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

Παρουσίαση με θέμα: " Τεχνικές αξιολόγησης ευχρηστίας  Διδάσκων: Nίκος Τσέλιος"— Μεταγράφημα παρουσίασης:

1  Τεχνικές αξιολόγησης ευχρηστίας  Διδάσκων: Nίκος Τσέλιος nitse@ece.upatras.gr

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

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

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

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

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

7 Η έννοια της ευχρηστίας στον πραγματικό κόσμο 7 http://www.flickr.com/photos/rdolishny/2760207306

8 Η ευχρηστία στον πραγματικό κόσμο 8 http://www.flickr.com/photos/johnswords/2717108560/http://www.flickr.com/photos/11759181@N04/1176026705/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

51

52

53

54

55

56

57

58

59

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