 Τεχνικές αξιολόγησης ευχρηστίας  Διδάσκων: Nίκος Τσέλιος

2  O αποτελεσματικός σχεδιασμός ενός δικτυακού τόπου εξαρτάται από 2 παράγοντες:  Μέρος1:Σχεδιασμός σε επίπεδο δομής δικτυακού τόπου/ Engineering Κυρίαρχη έννοια η ευχρηστία (usability)  Μέρος 2:Σχεδιασμός σε επίπεδο σελίδας / Art Εισέρχεται και το ζήτημα της αισθητικής (aesthetics- visual attractiveness)

Τι δεν μας αρέσει ένα δικτυακό τόπο? 3

4  Πολλά από τα πράγματα που δεν μας αρέσουν αφορούν στην ευχρηστία των δικτυακών τόπων.  Ως ευχρηστία νοούμε: Το να σχεδιάζουμε τεχνουργήματα με τρόπο που να ‘βγάζουν νόημα’ στους ανθρώπους που τα χρησιμοποιούν. Πόσο εύκολα μπορούμε να κατανοήσουμε τη δομή, το σκοπό και τη χρήση ενός δικτυακού τόπου

 ``Ευχρηστία: ο βαθμός στον οποίο ένα σύστημα μπορεί να χρησιμοποιηθεί από συγκεκριμένους χρήστες για να επιτύχουν συγκεκριμένους σκοπούς με αποτελεσματικότητα, αποδοτικότητα και υποκειμενική ικανοποίηση, σε δοθέν πλαίσιο χρήσης.''. [ISO 9241]

 ευκολία εκμάθησης  υψηλή απόδοση εκτέλεσης έργου  χαμηλή συχνότητα σφαλμάτων χρήστη και εύκολη ανάνηψη από αυτά  ευκολία συγκράτησης της γνώσης χρήσης του  υποκειμενική ικανοποίηση χρήστη Ερώτηση: ποιόν από τους {Απ,Ευκ,Εμπ} χρήστες αφορούν οι παραπάνω παράμετροι ;

Η έννοια της ευχρηστίας στον πραγματικό κόσμο 7

Η ευχρηστία στον πραγματικό κόσμο 8

9  Οι χρήστες επισκέπτονται ένα δικτυακό τόπο για διαφορετικούς λόγους  Συνεπώς τα χαρακτηριστικά των χρηστών επηρεάζουν τη φαινόμενη ευχρηστία.  Επιπροσθέτως, ο τρόπος χρήσης του Ιστού από τους ανθρώπους έχει ΄διαφοροποιηθεί σημαντικά τα τελευταία 10 έτη

 Εξαρτώνται από το προφίλ των τυπικών χρηστών  Μετρούνται Με χρήστες που ανταποκρίνονται στο τυπικό προφίλ χρήστη Σε πραγματικές ή προσομοιούμενες συνθήκες

 Οι χρήστες δεν βρίσκουν την πληροφορία που θέλουν στο 60% των περιπτώσεων. Χαμένος χρόνος Μειωμένη παραγωγικότητα Εκνευρισμός Επανάληψη επισκέψεων, φόρτος δικτύου, απώλεια εσόδων.

 Απώλεια ως και 40% της επισκεψιμότητας  Απώλεια ως 50% στα έσοδα λόγω μη εύρεσης προϊόντων.  “People will gladly waste a million dollars on their fancy design and not spend $4,000 to see if it works” - Nielsen  Μειωμένα τηλέφωνα για υποστήριξη

 Η Dell εφάρμοσε βασικούς κανόνες ευχρηστίας το 1999 και τα έσοδα εκτινάχθηκαν από $1 million την ημέρα το Σεπτέμβριο 1998, σε $34 την ημέρα το Μάρτιο του  Τα Windows XP οφείλουν σε μεγάλο βαθμό τη δημοφιλία τους επειδή έχουν εξαιρετικό επίπεδο ευχρηστίας.  Τι κινητό αγοράζετε;

παράμετρος: ευκολία εγκατάστασης προϊόντος σε τυπικό υπολογιστή μέθοδος μέτρησης: ο χρόνος που απαιτείται για την εγκατάσταση του προϊόντος χειρότερη περίπτωση: 1 μέρα με χρήση εγχειριδίων συνήθης περίπτωση: 1 ώρα χωρίς εγχειρίδια βέλτιστη περίπτωση: 10 λεπτά με εγχειρίδια τρέχουσα κατάσταση: πολλοί χρήστες αδυνατούν να εγκαταστήσουν το προϊόν

 Χρόνος συμπλήρωσης μιας καθορισμένης εργασίας  ποσοστό εργασίας που ολοκληρώνεται σε ορισμένο χρόνο  ποσοστό εργασίας που εκτελείται ανά μονάδα χρόνου (ταχύτητα)  λόγος επιτυχών προσπαθειών / αποτυχίες  χρόνος που καταναλώνεται στη διόρθωση σφαλμάτων  ποσοστό σφαλμάτων  αριθμός εντολών που απαιτούνται  συχνότητα χρήσης HELP και εγχειριδίων  ποσοστό θετικών και αρνητικών σχολίων χρηστών  αριθμός επαναλήψεως αποτυχημένων εντολών  αριθμός επιτυχημένων και αποτυχημένων προσπαθειών

 Αριθμός περιπτώσεων που η διεπιφάνεια ξεγελά το χρήστη  Αριθμός θετικών και αρνητικών χαρακτηριστικών που θυμάται ο χρήστης  Αριθμός διαθέσιμων εντολών που δεν χρησιμοποιήθηκαν  Αριθμός υποχωρήσεων του χρήστη  Αριθμός χρηστών που προτιμούν το σύστημα  Αριθμός προσπαθειών παράκαμψης προβλήματος  Αριθμός προσπαθειών του χρήστη που διακόπηκαν  Αριθμός περιπτώσεων που ο χρήστης χάνει τον έλεγχο  Αριθμός περιπτώσεων που ο χρήστης εκφράζει απογοήτευση ή ευχαρίστηση

Στόχοι ευχρηστίας κατά τη φάση σχεδίασης

Καθορίζονται λαμβάνοντας υπόψη  Προηγούμενη εμπειρία (σε παλαιότερη έκδοση αυτού ή σε άλλα συστήματα)  Ανταγωνιστικά συστήματα  Την απόδοση των αρχικών πρωτοτύπων  Την μη αυτοματοποιημένη εκτέλεση της εργασίας  Προγενέστερη απόδοση των ίδιων χρηστών  Για κάθε τμήμα του συστήματος!

Στόχοι ευχρηστίας:  Η ευκολία εκμάθησης από τον πρωτόπειρο χρήστη  Ο ρυθμός (ταχύτητα) ολοκλήρωσης των ενεργειών  Η ικανοποίηση που προκαλεί το σύστημα στο χρήστη  Π.χ. Έκδοση εισιτηρίου σε 2min  Εκτίμηση στόχων: με χρήση προτύπου

Τεχνική αποκάλυψης σφαλμάτων ευχρηστίας με σύγκριση της διεπιφάνειας από ένα σύνολο ειδικών (Heuristics). Διεξάγεται από έμπειρους αξιολογητές. Δουλεύουν μόνοι τους για να μην επηρεάζονται και να διασφαλίζεται η ανεξαρτησία της γνώμης τους. Πρέπει να ‘περάσουν’ την διεπιφάνεια τουλάχιστον εις διπλούν. Σύμφωνα με έρευνες (Nielsen) το κόστος/όφελος της μεθόδου είναι 50/1. (μέσο κόστος 10k euro, μέσο όφελος 500κ euros). Ευρετική αξιολόγηση

Ο Nielsen έχει προτείνει 10 κανόνες για αξιολόγηση: 1.Ενημέρωση για τη κατάσταση του συστήματος. Οι χρήστες πρέπει να γνωρίζουν που βρίσκονται, την πορεία των ενεργειών τους. Πρέπει να ξέρουν αν οι αποστολές δεδομένων είναι επιτυχείς ή όχι. 2.Αντιστοίχηση συστήματος-πραγματικού κόσμου: Να είναι κατανοητό το επίπεδο της γλώσσας και χρήση καθαρών συμβόλων και μεταφορών (π.χ. Πίσω αριστερό βέλος, μπροστά, δεξιό) 3.Ελευθερία και έλεγχος από το χρήστη : Καθαρές εξόδους (π.χ. Κουμπί για κεντρική σελίδα), υποστήριξη undo/redo, (π.χ back, forward δεν υποστηρίζονται αν ανοίγει σελίδα σε νέο παράθυρο) 4.Συνέπεια και συνέχεια και χρήση στάνταρ: Συνεπές μοντέλο πλοήγησης και δόμηση σελίδας, κώδικας που να επιτρέπει την συμβατότητα με τους φυλλομετρητές 5.Αποφυγή λαθών: Έλεγχος για συνδέσμους που δεν οδηγούν πουθενά, έλεγχος εγκυρότητας δεδομένων πριν αποσταλούν στον εξυπηρετητή. Ευρετική αξιολόγηση (συνέχεια)

6. Αναγνώριση αντί για ανάκληση: Σωστά ονόματα στα αντικείμενα πλοήγησης, ώστε να μην χρειάζεται περαιτέρω νοητική επεξεργασία. 7. Προσαρμοστικότητα και αποδοτικότητα χρήσης: Να επιτρέπεται η χρήση σύνθετων τεχνικών αναζήτησης, η καταχώρηση μιας ιστοσελίδας στα αγαπημένα κλπ. 8. Καλαίσθητος και μινιμαλιστικό σχεδιασμός: Να μην υπάρχει περιττή πληροφορία που να μπερδεύει τους χρήστες, ‘καθαρός’ σχεδιασμός. 9. Αναγνώριση και ανάνηψη από λάθη: Εξήγηση των σφαλμάτων σε καθαρή γλώσσας παρά να χρησιμοποιούνται σφάλματα με κωδικούς. 10. Βοήθεια: Σε μικρούς δικτυακούς τόπους όχι απαραίτητη. Χάρτες πλοήγησης, επεξήγηση ενεργειών. Ευρετική αξιολόγηση (συνέχεια)

 H2-1: Ενημέρωση για τη κατάσταση του συστήματος Προσοχή στη διαχείριση χρόνων απόκρισης ○ 0.1 sec: δεν χρειάζεται ειδική πρόνοια ○ 1.0 sec: διασπάται η προσοχή σε επιμέρους δεδομένα ○ 10 sec: διασπάται η προσοχή στην επιτελούμενη εργασία ○ Για μεγαλύτερη καθυστέρηση-> μπάρες προόδου searching database for matches

Heuristics  Κακό παράδειγμα: Mac desktop Μεταφορά δισκέτας στο κάλαθο αχρήστων ○ Έπρεπε να τη ‘σβήνει’, όχι να το διαγράφει  H2-2: Αντιστοίχηση συστήματος πραγματικού κόσμου Κατανοητή ορολογία Ρεαλιστικές μεταφορές και εικονικές αναπαραστάσεις

Heuristics  Μάγοι-Wizards Υποχρεωτικά πρέπει να ανταποκριθεί ο χρήστης πριν συνεχίσει Για σπάνιες εργασίες (π.χ., παραμετροποίηση) Ακατάλληλο για συχνές εργασίες Κατάλληλο για αρχάριος ○ 2 εναλλακτικά στυλ χειρισμού (WinZip) H2-3: Ελευθερία & έλεγχος χρήστη – “Έξοδοι” σε περίπτωση λανθασμένων επιλογών και υποστήριξης αναίρεσης (undo) και επανάληψης (redo) – Δεν πρέπει να υποχρεώνουμε το χρήστη σε γραμμική αλληλεπίδραση

 H2-4: Συνέπεια και συνέχεια

Heuristics  MS Web Publishing Wizard  Πριν τη σύνδεση Ζητά id & password  Μετά τη σύνδεση Ζητά ξανά id & password H2-5: Ελαχιστοποίηση λαθών H2-6: Αναγνώριση παρά ανάκληση – Θα πρέπει τα αντικείμενα οι ενέργειες, οι επιλογές και δυνατότητες-κατευθύνσεις να είναι ανιχνεύσιμες και ορατές

Edit Cut Copy Paste  H2-7: Αποδοτικότητα χρήση Συντομεύσεις για έμπειρους χρήστες (shortcuts) Να επιτρέπεται στους χρήστες να αποθηκεύουν αλληλουχίες συχνών ενεργειών (macros)

 H2-8: Καλαισθησία και μινιμαλιστικός σχεδιασμός Μόνο η απολύτως σχετική πληροφορία με την εργασία πρέπει να είναι διαθέσιμη

 H2-9: Εποικοδομητικά μηνύματα λαθών Μηνύματα σε απλή γλώσσα Ακριβής περιγραφή του προβλήματος Πρόταση ‘άρσης’ αδιεξόδου

 H2-10: Παροχή βοήθειας και οδηγιών χρήσης Εύκολη αναζήτηση Εστιασμένη σε εργασίες και όχι μεμονωμένες ενέργειες ○ Ανάλυση σε λίστα διακριτών βημάτων Όχι υπερβολικά εκτενής

Κατάλληλος αριθμός αξιολογητών N ( 1 - (1-L) ) n  Περίπου 5 αξιολογητές απαιτούνται για να διερευνήσουν τα σφάλματα.  Ένα πρώτο τεστ θα αποκαλύψει περίπου 80% των σφαλμάτων.  Ένα δεύτερο τεστ περίπου 13% των εναπομεινάντων σφαλμάτων.

 Αξιολόγηση ενός δικτυακού τόπου με βάση κάποιο σενάριο.  Προσπαθούμε να απαντήσουμε στα εξής: ΠΟΙΟΣ: Περιγράφουμε το χρήστη και το επίπεδο γνώσεων του πεδίου και της εφαρμογής ΤΙ ΚΑΙ ΓΙΑΤΙ: Στόχοι και κίνητρα του χρήστη Με τι: Περιγραφή των εργαλείων και του εξοπλισμού που θα χρησιμοποιήσει ο χρήστης Πως: Περιγραφή των ενεργειών που απαιτούνται για να επιτύχει το στόχο του ο χρήστης Γνωσιακό περιδιάβασμα

 Οι επόμενες ερωτήσεις εξετάζονται κατά τη διάρκεια εξέτασης των βημάτων που απαιτούνται για την επίτευξη του στόχου. Τι γνώσεις απαιτείται να έχει ο χρήστης. Ο χρήστης τις κατέχει αυτές τις γνώσεις; Ο χρήστης θα παρατηρήσει ότι οι συγκεκριμένες ενέργειες είναι διαθέσιμες? Ο χρήστης θα μπορεί να συνδέσει τις ενέργειες που κάνει με το στόχο του? Ο χρήστης θα αντιληφθεί την ανάδραση του συστήματος? Ο χρήστης θα κατανοήσει την ανάδραση του συστήματος? Ο χρήστης θα αντιληφθεί την πρόοδο που έχει στην επίτευξη του στόχου του? Γνωσιακό περιδιάβασμα 2

 Εξαιρετικά χρήσιμη αλλά δαπανηρή μέθοδος  Βάζουμε πραγματικούς χρήστες να ελέγξουν τη διεπιφάνεια χρήσης: 1.Βάλτε αντιπροσωπευτικούς χρήστες να ελέγξουν τη διεπιφάνεια χρήσης. 2.Δώστε τους αντιπροσωπευτικές εργασίες να εκτελέσουν. 3.Μην τους επηρεάζετε και μην παρεμβάλλεστε.  Συχνά οι ενέργειες των χρηστών καταγράφονται, ή και βιντεοσκοπούνται για περαιτέρω ανάλυση σε ειδικούς χώρους (εργαστήρια ευχρηστίας)  Οι εργασίες βασίζονται στους στόχους που έχει κάθε χρήστης. Παρατήρηση χρηστών

 Στόχος ελαχιστοποίηση ταχύτητας φόρτωσης ιστοσελίδας  Υποβοήθηση αναζήτησης (τοπικές μηχανές αναζήτησης)  Υποστήριξη πλοήγησης  Μέγεθος ιστοσελίδων (αποφυγή κύλισης)  Απλότητα (χρώμα, κινούμενα γραφικά κλπ)  υπερ-χρησιμοποίηση τεχνολογίας  απλή διεύθυνση - τίτλος σελίδας  αυθύπαρκτος χαρακτήρας σελίδας  διατήρηση επικαιρότητας υλικού  ομοιομορφία - τήρηση συμβάσεων  αρχές αναγνωσιμότητας υπερ-κειμένων

 Τίτλοι σελίδων  Μέγεθος κειμένου και χρώματα  Καλύτερες μινιατούρες εικόνων (thumbnails)  Προσοχή στις υποθέσεις για τους χρήστες  Στυλ γραφής κατάλληλο για το web  Παροχή ανάδρασης  Κατάλληλες ετικέτες σε εικόνες (Image tags)

 Οι σελίδες θα πρέπει να έχουν το αναγνωριστικό στον κώδικα HTML  Γιατί? Σημαντικό για τη πλοήγηση ○ Λίστα αγαπημένων, ιστορικό, μηχανές αναζήτησης Επαρκής πληροφορία από μόνη της ○ Πέρα και έξω από το πλαίσιο της σελίδας (μηχανές αναζήτησης) Υπερβολικά ευμεγέθεις τίτλοι καθυστερούν τους χρήστες (trade-off) ○ Καλό είναι να ‘κωδικοποιείτε’ την πληροφορία τηλεγραφικά “Η εταιρία μου- Κεντρική σελίδα” vs. “Καλωσήρθατε στη σελίδα της εταιρίας μου...” Διαφορετικές σελίδες  διαφορετικούς τίτλους

 Μην χρησιμοποιείτε μπλε ή κόκκινο χρώμα  Μη χρησιμοποιείτε συνδυασμό κόκκινου με μπλε Δύσκολο να το επεξεργαστεί η ανθρώπινη όραση  Συχνά οι σχεδιαστές διαφοροποιούν το προκαθορισμένο φόντο Αποδεκτό να αλλάζουμε μικρό σώμα του κειμένου Όχι για όλο το κείμενο ○ Οι χρήστες σκόπιμα έχουν επιλέξει φόντο της αρεσκείας τους! Βελτιστοποιεί τη προσωπική τους ανάγνωση

 Thumbnails Αναπαριστούν εικόνες που είναι πολύ μεγάλες σε όγκο πληροφορίας για να καταβιβαστούν απευθείας  Τεχνική Σμίκρυνση (scaling) or λωριδοποίηση (cropping) δεν είναι άμεσα αποτελεσματικές πάντα (γιατί ?)

 Πρώτα λωριδοποίηση και ακολούθως σμίκρυνση π.χ., για thumbnail που είναι στο10% του πραγματικού ○ Λωριδοποίηση στο 32% ○ Μετά σμίκρυνση στο 32% ○.32 *.32 =.10 του πραγματικού  Βέλτιστη ισορροπία λεπτομέρειας και πληροφορίας εικόνας

 Πρώτα λωριδοποίηση και ακολούθως σμίκρυνση π.χ., για thumbnail που είναι στο10% του πραγματικού ○ Λωριδοποίηση στο 32% ○ Μετά σμύκρινση στο 32% ○.32 *.32 =.10 του πραγματικού  Βέλτιστη ισορροπία λεπτομέρειας και πληροφορίας εικόνας

 Για Φυλλομετρητές Οι χρήστες χρησιμοποιούν ποικιλία φυλλομετρητών ○ Chrome, Firefox, Explorer, Safari, κλπ.  Για μέγεθος παραθύρου/ ανάλυση Συχνά οι χρήστες έχουν διαφορετικές αναλύσεις ή δεν ανοίγουν το φυλλομετρητή τους σε πλήρη οθόνη

 Να είστε περιεκτικοί Είναι 25% βραδύτερο να διαβάζετε από μια οθόνη υπολογιστή Τα κείμενα πρέπει να είναι στο 50% της έντυπης μορφής (οι χρήστες δεν ακολουθούν συχνά κυλιόμενες σελίδες)  Γράψτε για υποβοήθηση ‘σαρωτικής’ ανάγνωσης (skimability) Οι χρήστες φυλλομετρούν επιπόλαια —δεν διαβάζουν κανονικά Δομήστε το κείμενο με 2-3 επίπεδα επιγραφών ○ Χρησιμοποιείστε περιγραφικούς τίτλους και σωστή έμφαση στο κείμενο

 Χρησιμοποιείστε υπερκείμενο για την κατάτμηση της πληροφορίας Τεμαχίστε την πληροφορία σε σελίδες με ‘αυτόνομο’-συνεκτικό περιεχόμενο Χρησιμοποιείστε στυλ ανάστροφη πυραμίδας (πρώτα τα συμπεράσματα ή σύνοψη του κειμένου)

ZDNet: Χρήση ανάστροφης πυραμίδας

 Ανάδραση Κατάλληλες μικρές περιγραφές διασυνδεόμενων ιστοσελίδων και μεγέθη καταβιβαζόμενων αρχείων  Ενημερότητα για μέγεθος εικόνων Στην html στα IMG tags ○ Η πληροφορία εμφανίζεται πριν αρχίσει να κατεβαίνει η εικόνα

Δομή δικτυακού τόπου  Είναι η διαδικασία δόμησης της πληροφορίας του web site σε επιμέρους σελίδες με τρόπο που να υποστηρίζει τους στόχους και τη πλοήγηση των χρηστών  Λόγοι Φτωχή δόμηση=φτωχή ευχρηστία ανεξαρτήτως του συστήματος πλοήγησης Η δόμηση πληροφορίας διαφέρει από το απλό χαρτί. Οι χρήστες δεν θέλουν να διατρέχουν μεγάλες σελίδες για να βρούν αυτό που θέλουν. Για να υποστηρίξουν τη μελλοντική ανάπτυξη του δικτυακού τόπου.  Δεν θα πρέπει να απεικονίζει τη δομή μιας εταιρίας αλλά τους στόχους των χρηστών

 Η δόμηση της πληροφορίας γίνεται με ιεραρχικό τρόπο  Η επιτυχία εδράζεται στο πόσο καλά αντανακλά τις προσδοκίες των χρηστών Δομή δικτυακού τόπου

 Λόγω της υπερβολικής πληροφορίας, το δίκτυο μπορεί να ειδωθεί ως σύστημα πλοήγησης και ανάκτησης πληροφορίας.  Άρα το σύστημα πλοήγησης βοηθά τους χρήστες να αντιληφθούν τη δομή και την οργάνωση της πληροφορίας.  Ανά πάσα στιγμή πρέπει να βοηθά τρία ερωτήματα:  Που είμαι;  logo, σχετική αναφορά δομής  Πού ήμουν;  Δεν υποστηρίζεται επαρκώς, μόνο back, ιστορία φυλλομέτρησης, αλλαγή χρώματος συνδέσμου που έχω επισκεφτεί.  Που μπορώ να πάω;  Σύστημα πλοήγησης Δομή δικτυακού τόπου

Επανασχεδιασμένη έκδοση