Ενότητα 5. 3.3: Αξιολόγηση Εμπειρίας Χρήσης Ιστοτόπων Διδάσκων:

Πανεπιστημιακό κέντρο εκπαίδευσης επιμορφωτών Δυτικής ΕλλάδαςΠανεπιστήμιο Πατρών, ΤΕΕΑΠΗ - Πανεπιστήμιο Πελοποννήσου, ΤΚΕΠΕκπαίδευση Επιμορφωτών Β΄Επιπέδου Ενότητα 5.3.3: Αξιολόγηση Εμπειρίας Χρήσης Ιστοτόπων Διδάσκων: Χρήστος Κατσάνος - ckatsanos@ece.upatras.gr

Ευχρηστία • Η αποτελεσματικότητα, αποδοτικότητα και η υποκειμενική ικανοποίηση με την οποία συγκεκριμένοι χρήστες μπορούν να υλοποιήσουν συγκεκριμένες ενέργειες σε συγκεκριμένα περιβάλλοντα". (ISO 9241,1993) • Σχεδιάζω με επίκεντρο τον χρήστη και τις ανάγκες του

Η ιδιαιτερότητα σχεδιασμού ιστοτόπων (Garrett J., 2002) Software interface Hypertext system Task oriented Information oriented Οπτική απεικόνιση κειμένου, αντικειμένων σελίδας και πλοήγησης “look and feel” (διάταξη αντικειμένων, φυσικός σχεδιασμός) Σχεδίαση αντικειμένων για υποβοήθηση της αλληλεπίδρασης με τις λειτουργίες Σχεδίαση αντικειμένων για ευκολία μετάβασης στο πληροφοριακό χώρο Δόμηση πληροφορίας για εύρεσή της με απρόσκοπτο τρόπο Σχεδίαση ροής εφαρμογής σύμφωνα με ανάλυση εργασιών Καταγραφή απαιτήσεων περιεχομένου Καταγραφή απαιτούμενων λειτουργιών για την υποστήριξη του χρήστη Στόχοι δικτυακού τόπου (εσωτερικοί): Επιχειρηματικοί, επικοινωνιακοί κλπ. Ανάγκες χρήστη (εξωτερικές): Μέσω εθνογραφίας, έρευνες χρήσης κλπ

Σήμερα μιλάμε για σχεδιασμό εμπειρίας χρήσης (User Experience) Useful • Σχεδιάζουμε για αξίες: • Ευχρηστία • Ευρεσιμότητα • Προσβασιμότητα • Αξιοπιστία • Καλή αισθητική • Χρησιμότητα Desirable Usable Valuable Credible Findable Accessible • The UX Honeycomb (Morville, 2004)

Findable Ένα «απλό» δίλλημα; Θέλω να αγοράσω ένα τηλεφωνικό καλώδιο 2 μέτρων από ένα ηλεκτρονικό κατάστημα. Τι να επιλέξω;

Findable Προβλήματα ευρεσιμότητας • Ποιο link να ακολουθήσω; • Είναι δυνατόν αυτή η πληροφορία να είναι εδώ..!? • Τι σημαίνει αυτή η λέξη; • Που το είχα βρει αυτό; • Δεν μπορώ να βρω αυτό που ψάχνω! (ενώ υπάρχει)

Findable Ευρεσιμότητα • Πως μπορεί να δομηθεί το περιεχόμενο ενός ιστοτόπου έτσι ώστε να βοηθάει τους χρήστες να βρουν αυτό που ψάχνουν γρήγορα και αποτελεσματικά; • Πως μπορούν να διασυνδεθεί το περιεχόμενο ενός ιστοτόπου έτσι ώστε να βοηθάει τους χρήστες να βρουν αυτό που ψάχνουν γρήγορα και αποτελεσματικά; Πληροφοριακή Αρχιτεκτονική (Information Architecture)

Τεχνικές σχεδιασμού της Πληροφοριακής Αρχιτεκτονικής* Επιλογή κατηγορίας (category identification) Πείραμα μέτρησης απόδοσης (user testing) Ελεύθερη διατύπωση εννοιών (free listing) Ταξινόμηση καρτών (card sorting) Έλεγχος πλοηγησιμότητας (navigation stress test) Εθνογραφικές μελέτες (ethnographic studies) Κατονομασία κατηγοριών (naming exercise) Περιγραφή περιεχομένου κατηγοριών (category description) Ανάλυση καταγεγραμμένων συμβάντων (search log analysis) Έλεγχος ευρεσιμότητας (findability or tree testing) *Βάσει βιβλιογραφικής αναδίφησης του πεδίου HCI στο πλαίσιο της διατριβής του Δρ. Χρήστου Κατσάνου

Ταξινόμηση καρτών (Card Sorting) • Δίνεται στους συμμετέχοντες ένα σύνολο καρτών με τίτλους & μικρές περιγραφές από τις προς ομαδοποίηση έννοιες • Κάθε συμμετέχοντας ομαδοποιεί τις έννοιες σε κατηγορίες που τους δίνει ονομασίες • Συλλογή δεδομένων για: • Σχήμα οργάνωσης ιστοτόπου • Λεξιλόγιο χρηστών => δημιουργία κατάλληλων ετικετών

Επανασχεδίαση της φοιτητικής πύλης του τμήματος ΗΜΤΥ • Ποιες σελίδες πρέπει να ομαδοποιηθούν μαζί; • Τι όνομα θα δίνατε σε κάθε κατηγορία;

Ταξινόμηση Καρτών: Τυπικές Χρήσεις • Δόμηση δικτυακών τόπων • Οργάνωση Μενού σε κλασσικές εφαρμογές • Οργάνωση Θεμάτων Βοηθείας 11

Αριθμός Συμμετεχόντων • Ομαδοποιήσεις 15~30 χρηστών ≈ 90~95% ομαδοποιήσεις 168 χρηστών (Tullis & Wood, 2004) 12 (Tullis & Wood, 2004)

Αριθμός Καρτών • >100 κάνουν εξαιρετικά πολύπλοκη την φάση της εκτέλεσης αλλά και την ανάλυσης (Mauer & Warfel, 2004) • Λύσεις: • Επιλογή πιο «σημαντικών» σελίδων • Τυχαία ανάθεση 60% των καρτών σε 30~40 χρήστες ≈ 90~95% συμφωνία με ομαδοποιήσεις όλων των καρτών από 15~30 χρήστες (Tullis & Wood, 2005) 13

Χαρακτηριστικά Χρηστών • Ομάδες Συμμετεχόντων • Χρήστες που τους αφορά ή έχουν τις απαραίτητες γνώσεις για τις κάρτες • Αν υπάρχουν διακριτές ομάδες μπορεί να γίνει διεξαγωγή πολλαπλών ασκήσεων ταξινόμησης Πλοήγηση Θεματικής Κατηγορίας Πλοήγηση Ομάδας Χρήστη 14

Εξ αποστάσεως (ή online) ταξινόμηση χρηστών • Εργαλεία • WebSort (€€) • MindCanvas(€€) • OptimalSort(€€) • WebCat (δύσχρηστο) • Μεγαλύτερος αριθμός χρηστών, ευκολία, ευελιξία, ειδικές κατηγορίες χρηστών (ΑΜΕΑ) • Δεν επιτρέπει ποιοτικού τύπου ερωτήσεις 15

Ταξινόμησης Καρτών – Οικογένεια Τεχνικών (1/2) • Ταξινόμηση Ανοιχτού Τύπου: Οι χρήστες ταξινομούν τις κάρτες σε κατηγορίες που δημιουργούν και ονοματίζουν οι ίδιοι. • Αρχικός σχεδιασμός • Ταξινόμηση Κλειστού Τύπου: Οι χρήστες ταξινομούν τις κάρτες σε κατηγορίες που παρέχει ο σχεδιαστής. • Προσθήκη/Επέκταση • Εγκυροποίηση ανοιχτού-τύπου 16

Ταξινόμησης Καρτών – Οικογένεια Τεχνικών (2/2) • «Ομαδική Ταξινόμηση: Οι χρήστες ταξινομούν τις κάρτες σε μικρές ομάδες (3~5 άτομα) • Ταξινόμηση καρτών με ομάδες εστίασης: 8~15 χρήστες ταξινομούν αρχικά τις κάρτες ο καθένας μόνος του και έπειτα συμμετέχουν σε μία ομάδα εστίασης. • Delphi Ταξινόμηση καρτών: Ένας χρήστης αρχικά σε μία ανοιχτού-τύπου ταξινόμηση και έπειτα δίνεται διαδοχικά στον επόμενο χρήστη ως σημείο έναρξης. 17

Ανάλυση Αποτελεσμάτων • Στόχοι • Δημιουργία μοντέλου πλοήγησης • Δημιουργία εναλλακτικών μονοπατιών σε σελίδες για τις οποίες υπάρχει ασυμφωνία ομαδοποίησης • Εντοπισμός ακατάληπτου για τους χρήστες περιεχομένου • Χρήση λεξιλογίου χρηστών για τις ονομασίες των κατηγοριών • Τρόποι ανάλυσης: • Επισκόπηση Αποτελεσμάτων (“Eyeballing the data”) • Στατιστική ανάλυση (Clustering, Multidimensionalscaling)

Επισκόπηση Δεδομένων(Eyeballing the data) • Συχνότητα εμφάνισης καρτών μαζί (Κάρτες x Κάρτες) • Δείκτης συμφωνίας ομαδοποίησης καρτών • Ποσοστό εμφάνισης καρτών σε διαφορετικές κατηγορίες (Κάρτες x Κατηγορίες) • Δείκτης συμφωνίας ονομασίας ομάδος 70% των συμμετεχόντων ομαδοποίησαν μαζί τις 2 κάρτες

Στατιστική Ανάλυση Αλγόριθμοι Clustering • Στατιστικός τρόπος εύρεσης ομογενών ομάδων (clusters). Νέα & Ανακοινώσεις • Δενδρόγραμμα = οπτική αναπαράσταση Ηλεκτρονικές Υπηρεσίες • Που «κόβω» το δενδρόγραμμα? • Υποκειμενική κρίση • Ανάλυση Παραγόντων 20

«Αδυναμίες» Ταξινόμησης Καρτών Συχνά η τεχνική αγνοείται και η δομή στηρίζεται στο «ένστικτο» του σχεδιαστή • Απαιτεί πόρους (κόστος, χρόνος) συχνά μη-διαθέσιμους στους σημερινούς ρυθμούς ανάπτυξης (Chietal. 2003) • Δύσκολο να βρεθούν χρήστες σε τόσο αρχικό στάδιο • Δύσκολη η μετάβαση από τα δεδομένα που συλλέγουν στον τελικό σχεδιασμό • Ανάγκη για συνεχή τροποποίηση περιεχομένου (Brinck & Hofer 2002) • Είναι δύσκολο να εφαρμοστούν για μεγάλους ιστοτόπους (>100 ιστοσελίδες)(Mauer & Warfel 2004) Αστοχίες στην πληροφοριακή αρχιτεκτονική δημιουργούν τα περισσότερα προβλήματα στην εμπειρία χρήσης ιστοτόπων (Nielsen 2009a; Nielsen 2009b)

Ερευνητικά ερωτήματα(Katsanos et al 2008) • Μπορεί να υποστηριχθεί αποδοτικότερα η διαδικασία δόμησης του περιεχομένου ενός ιστοτόπου; • Αν ναι, ποια η ποιότητα των αποτελεσμάτων που παράγει συγκριτικά με την καθιερωμένη τεχνική της Ταξινόμησης Καρτών;

AutoCardSorter:Μέθοδος Αποδοτικής Δόμησης Δικτυακών Τόπων • Katsanos C., Tselios N., Avouris N. (2008)Automated semantic elaboration of web site information architecture. Interacting with computers, 20 (6), pp. 535-544, • Katsanos C., Tselios N., Avouris N. (2008) AutoCardSorter: Designing the Information Architecture of a Web Site using Latent Semantic Analysis. InProc.CHI 2008 (pp. 875-878),Acceptance Rate: 18% Florence, Italy: ACM Press, April 5-10, 2008, • Tselios N., Katsanos C., Avouris N. (2007) Beyond user centered design: A web design approach based on information foraging theory. In Proc. INTERACT 2007, Rio de Janeiro, Brazil, 10-14 September 2007

AutoCardSorter: Μεθοδολογία Αυτόματης Δόμησης Ιστοτόπων Μέτρα Σημασιολογικής Συσχέτισης (π.χ. LSA) Αλγόριθμοι Clustering Πίνακας Σημασιολογικών Συσχετίσεων Περιγραφές Σελίδων Διαδραστικό Δενδρόγραμμα Επιπρόσθετη Υποστήριξη Αριθμός Κατηγοριών Cross-hierarchy links 24

AutoCardSorter:Το εργαλείο(hci.ece.upatras.gr/autocardsorter) Επιλογή αριθμού κατηγοριών Προσδιορισμός στατιστικά-βέλτιστου αριθμού κατηγοριών Παράμετροι αλγορίθμου AutoCardSorter Διαδραστικό Δενδρόγραμμα Περιγραφές Σελίδων

Το πλαίσιο των μελετών vs Ταξινόμηση Καρτών AutoCardSorter *15-20 χρήστες δίνουν αξιόπιστα αποτελέσματασε ένα πείραμα ταξινόμησης καρτών (Nielsen 2004; Tullis & Wood 2004)

Αποτελέσματα (1/5) vs AutoCardSorter Ταξινόμηση Καρτών

Αποτελέσματα (4/5) vs AutoCardSorter Ταξινόμηση Καρτών 17 φορές αποδοτικότερη κατά μέσο όρο

Μιλάμε πλέον για σχεδιασμό εμπειρίας χρήσης (User Experience) Useful • Σχεδιάζουμε για αξίες: • Ευχρηστία • Ευρεσιμότητα • Προσβασιμότητα • Αξιοπιστία • Καλή αισθητική • Χρησιμότητα Desirable Usable Valuable Credible Findable Accessible • The UX Honeycomb (Morville, 2004)

Accessible Προσβασιμότητα – Εισαγωγή (1/2) • Πως μπορώ να επιτύχω την εύκολη πρόσβαση στο μεγαλύτερο δυνατό ποσοστό ανθρώπων ανεξάρτητα από τις • ιδιαίτερες ανάγκες τους (προβλήματα όρασης, κίνησης) • χρησιμοποιούμενες συσκευές αλληλεπίδρασης (PC, PDA) • συνθήκεςαλληλεπίδρασης (θόρυβος, έλλειψη φωτισμού κλπ) • Για ποιούς λόγους είναι σημαντική? • Οικονομικοί: >20% των ανθρώπων σε όλο τον κόσμο • Νομικοί: Εθνική Νομοθεσία, Ευρωπαϊκές Οδηγίες,US Sect.508 • Ηθικοί/Κοινωνικοί:Το Web αποτελεί πλέον «κοινωνικό αγαθό» • Μπόνους Ευχρηστίας:Προσβάσιμαsites = πιο εύχρηστα για όλους!

Accessible Προσβασιμότητα – Εισαγωγή (2/2) World Wide Access Accessible Web Design

Accessible Τεχνολογίες Υποστήριξης • Προβλήματα Όρασης • ScreenReaders, Screen Magnifiers,Συσκευές Braille • Γνωστικές Δυσκολίες • Software βελτίωσης ανάγνωσης, πρόβλεψης λέξεων, SpeechSynthesizers • Κινητικά Προβλήματα • Virtual Keyboards, Oθόνες αφής, SpeechRecognition, Sip & Puff, Wands& Sticks • Προβλήματα Ακοής • Voice recognition, Light Alerts Braille Mouse Οθόνη Braille Οπτικό Head Mouse Sip & Puff σύστημα 200% μεγέθυνση GreyScale

JAWS ScreenReader – Παράδειγμα (Amazon) JAWS Παράδειγμα

Accessible Μεθοδολογίες επίτευξης Διαδικτυακής Προσβασιμότητας • Κανόνες &Πρότυπα • Web ContentAccessibilityGuidelines (WCAG. W3C) • Section 508 • Οδηγίες ανά κράτος (Καναδάς, Ισπανία, Αγγλία …) • Εργαλεία Αξιολόγησης Προσβασιμότητας • (Ημί-)Αυτόματα (ATRC, TAW, Cynthia Says, Valet …) • Υποστηρικτικές Εργαλειοθήκες Επισκόπησης (Web Accessibility Toolbar, Mozilla Accessibility Extension…) • Εργαλεία Ειδικών Ελέγχων (AccessColor, ColorFilter …)

Accessible Απόσπασμα από τις Οδηγίες WCAG v.1 • 14 κανόνες - 64 σημεία ελέγχου • Κανόνας 1: Παρέχετε ισοδύναμες εναλλακτικές λύσεις στο ακουστικό και οπτικό περιεχόμενο • Σημείο ελέγχου 1.1: Για κάθε εικόνα να παρέχεται εναλλακτικά και ισοδύναμο κείμενο, το οποίο να περιγράφει το σκοπό και την λειτουργία της. • Κανόνας 2: Μη στηρίζεστε στο χρώμα μόνο • Σημείο ελέγχου 2.1: Βεβαιωθείτε ότι όλες οι πληροφορίες που αναπαρίστανται με χρώμα είναι εξίσου διαθέσιμες και χωρίς χρώμα.

Παράδειγμαπροβλήματος πλοηγησιμότητας Σημείο ελέγχου 1.1 (P1):Για κάθε εικόνα να παρέχεται εναλλακτικά και ισοδύναμο κείμενο, το οποίο να περιγράφει το σκοπό της. Accessible Για έναν ScreenReader δεν υπάρχουν τα βασικά navigation links….. Web Accessibility - Κατσάνος Χρήστος - HCI Group

Accessible Μελέτη προσβασιμότητας ελληνικών ιστοτόπων (Katsanos et al., 2009) • Αξιολόγηση 50 δικτυακών τόπων σε βάθος μέχρι 1000 σελίδες από 7 διαφορετικές θεματικές κατηγορίες.

Accessible Μελέτη προσβασιμότητας ελληνικών ιστοτόπων (Katsanos et al., 2009) Ταξινόμηση 50 ελληνικών δικτυακών τόπων ως προς την προσβασιμότητα

Accessible Μελέτη προσβασιμότητας ελληνικών ιστοτόπων (Katsanos et al., 2009)

Accessible Ποιοι οι λόγοι που παρατηρούνται αυτά τα αποτελέσματα; Σύμφωνα με έρευνα1στην οποία συμμετείχαν 175 σχεδιαστές ιστοτόπων τα αίτια είναι: • Έλλειψη εκπαίδευσης τους σε θέματα προσβασιμότητας • Έλλειψη υποστήριξης από τους εργοδότες • Έλλειψη υποστήριξης από τους πελάτες • 1 J. Lazar, A. Dudley-Sponaugle, and K. Greenidge, “Improving web accessibility: a study of webmaster perceptions,” Computers in Human Behavior, vol. 20, no. 2, pp. 269–288, 2004.

Accessible ESALP(Katsanos et al, 2011) • Αναπτύχθηκε το ESALP (Educational System forAccessibility Learning through Paradigms) • http://hci.ece.upatras.gr/esalp • Στόχοι: • Υποστήριξη αποτελεσματικότερης εκπαίδευσης των μηχανικών Διαδικτύου • Αποφυγή των εκτενών επίσημων εγγράφων • Προσαρμογή στον τρόπο σκέψης και τα επιβαρημένα χρονοδιαγράμματα • Ευαισθητοποίηση / ενημέρωση των άμεσα εμπλεκόμενων στη σχεδίαση των δικτυακών τόπων

Accessible Τυπικοί Χρήστες ESALP • Φοιτητές • Εκπαιδευτικοί / Καθηγητές • Επαγγελματίες μηχανικοί Διαδικτύου/ web designers

Accessible Επιλογές Σχεδίασης του ESALP • Εκπαιδευτική Διάσταση • Προσέγγιση εκμάθησης βασισμένη σε παραδείγματα • Πολυμεσική προσέγγιση • Εικόνα => οπτική παρουσίαση προβλημάτων παραβίασης κανόνων • Κείμενο => λεκτική τεκμηρίωση προβλήματος, οδηγίες επίλυσης • Υπερσύνδεσμοι => για μελέτη και εμβάθυνση σε κάθε πρόβλημα • Διαστάσεις Αλληλεπίδρασης • Πλοήγηση και αναζήτηση με πολλαπλά κριτήρια • Δυνατότητα αναζήτησης με λέξεις - κλειδιά

Accessible Πρωτότυπο Διεπιφάνειας ESALP Διαθέσιμο στη διεύθυνση: http:// hci.ece.upatras.gr/esalp

Accessible ESALP: Παραδείγματα (1/3)

Ενότητα 5. 3.3: Αξιολόγηση Εμπειρίας Χρήσης Ιστοτόπων Διδάσκων:

Ενότητα 5. 3.3: Αξιολόγηση Εμπειρίας Χρήσης Ιστοτόπων Διδάσκων:

Presentation Transcript