1

Ενότητα 5.3.3:Αξιολόγηση Εμπειρίας Χρήσης Ιστοτόπων

Διδάσκων:Χρήστος Κατσάνος - ckatsanos@ece.upatras.gr

Πανεπιστημιακό κέντρο εκπαίδευσης επιμορφωτών Δυτικής Ελλάδας Πανεπιστήμιο Πατρών, ΤΕΕΑΠΗ - Πανεπιστήμιο Πελοποννήσου, ΤΚΕΠ

Εκπαίδευση Επιμορφωτών Β΄Επιπέδου

2

Ευχρηστία

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

Σχεδιάζω με επίκεντρο τον χρήστη και τις ανάγκες του

3

Η ιδιαιτερότητα σχεδιασμού ιστοτόπων (Garrett J., 2002)

Οπτική απεικόνιση κειμένου, αντικειμένων σελίδας και πλοήγησης

Hypertext system

“look and feel” (διάταξη αντικειμένων, φυσικός σχεδιασμός)

Software interface

Σχεδίαση αντικειμένων για υποβοήθηση της αλληλεπίδρασης με τις λειτουργίες

Σχεδίαση αντικειμένων για ευκολία μετάβασης στο πληροφοριακό χώρο

Σχεδίαση ροής εφαρμογής σύμφωνα με ανάλυση εργασιών

Καταγραφή απαιτούμενων λειτουργιών για την υποστήριξη του χρήστη

Ανάγκες χρήστη (εξωτερικές): Μέσω εθνογραφίας, έρευνες χρήσης κλπ

Δόμηση πληροφορίας για εύρεσή της με απρόσκοπτο τρόπο

Καταγραφή απαιτήσεων περιεχομένου

Στόχοι δικτυακού τόπου (εσωτερικοί): Επιχειρηματικοί, επικοινωνιακοί κλπ.

Information oriented Task oriented

4

Σήμερα μιλάμε για σχεδιασμό εμπειρίας χρήσης (User Experience)

Σχεδιάζουμε για αξίες: Ευχρηστία Ευρεσιμότητα Προσβασιμότητα Αξιοπιστία Καλή αισθητική Χρησιμότητα

Usable

Findable

Accessible

Credible

Desirable

Useful

Valuable

The UX Honeycomb (Morville, 2004)

5

Ένα «απλό» δίλλημα;

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

Findable

6

Προβλήματα ευρεσιμότητας

Ποιο link να ακολουθήσω;

Είναι δυνατόν αυτή η πληροφορία να είναι εδώ..!?

Τι σημαίνει αυτή η λέξη;

Που το είχα βρει αυτό;

Δεν μπορώ να βρω αυτό που ψάχνω! (ενώ υπάρχει)

Findable

7

Ευρεσιμότητα

1) Πως μπορεί να δομηθεί το περιεχόμενο ενός ιστοτόπου έτσι ώστε να βοηθάει τους χρήστες να βρουν αυτό που ψάχνουν γρήγορα και αποτελεσματικά;

2) Πως μπορούν να διασυνδεθεί το περιεχόμενο ενός ιστοτόπου έτσι ώστε να βοηθάει τους χρήστες να βρουν αυτό που ψάχνουν γρήγορα και αποτελεσματικά;

Findable

Πληροφοριακή Αρχιτεκτονική

(Information Architecture)

8

Τεχνικές σχεδιασμού της Πληροφοριακής Αρχιτεκτονικής*

Ταξινόμηση καρτών (card sorting)

Ελεύθερη διατύπωση εννοιών (free listing)

Έλεγχος ευρεσιμότητας (findability or tree testing)

Έλεγχος πλοηγησιμότητας (navigation stress test)

Επιλογή κατηγορίας (category identification)

Περιγραφή περιεχομένου κατηγοριών (category description)

Κατονομασία κατηγοριών (naming exercise)

Ανάλυση καταγεγραμμένων συμβάντων (search log analysis)

Εθνογραφικές μελέτες (ethnographic studies)

Πείραμα μέτρησης απόδοσης (user testing)

*Βάσει βιβλιογραφικής αναδίφησης του πεδίου HCI στο πλαίσιο της διατριβής του Δρ. Χρήστου Κατσάνου

9

Ταξινόμηση καρτών (Card Sorting)

Δίνεται στους συμμετέχοντες ένα σύνολο καρτών με τίτλους & μικρές περιγραφές από τις προς ομαδοποίηση έννοιες

Κάθε συμμετέχοντας ομαδοποιεί τις έννοιες σε κατηγορίες που τους δίνει ονομασίες

Συλλογή δεδομένων για: Σχήμα οργάνωσης ιστοτόπου Λεξιλόγιο χρηστών => δημιουργία

κατάλληλων ετικετών

10

Επανασχεδίαση της φοιτητικής πύλης του τμήματος ΗΜΤΥ

Ποιες σελίδες πρέπει να ομαδοποιηθούν μαζί; Τι όνομα θα δίνατε σε κάθε κατηγορία;

11

Ταξινόμηση Καρτών: Τυπικές Χρήσεις

Δόμηση δικτυακών τόπων

Οργάνωση Μενού σε κλασσικές εφαρμογές

Οργάνωση Θεμάτων Βοηθείας

11

12 (Tullis & Wood, 2004)

Αριθμός Συμμετεχόντων Ομαδοποιήσεις 15~30 χρηστών ≈ 90~95% ομαδοποιήσεις

168 χρηστών (Tullis & Wood, 2004)

12

13

>100 κάνουν εξαιρετικά πολύπλοκη την φάση της εκτέλεσης αλλά και την ανάλυσης (Mauer & Warfel, 2004)

Λύσεις:1) Επιλογή πιο «σημαντικών» σελίδων2) Τυχαία ανάθεση 60% των καρτών σε 30~40 χρήστες ≈

90~95% συμφωνία με ομαδοποιήσεις όλων των καρτών από 15~30 χρήστες (Tullis & Wood, 2005)

Αριθμός Καρτών

13

14

Χαρακτηριστικά Χρηστών

Ομάδες Συμμετεχόντων Χρήστες που τους αφορά ή

έχουν τις απαραίτητες γνώσεις για τις κάρτες

Αν υπάρχουν διακριτές ομάδες μπορεί να γίνει διεξαγωγή πολλαπλών ασκήσεων ταξινόμησης

Πλοήγηση Θεματικής Κατηγορίας

Πλοήγηση Ομάδας Χρήστη 14

15

Εξ αποστάσεως (ή online) ταξινόμηση χρηστών

+ Μεγαλύτερος αριθμός χρηστών, ευκολία, ευελιξία, ειδικές κατηγορίες χρηστών (ΑΜΕΑ)

- Δεν επιτρέπει ποιοτικού τύπου ερωτήσεις

15

Εργαλεία WebSort (€€) MindCanvas (€€) OptimalSort (€€) WebCat (δύσχρηστο)

16

Ταξινόμησης Καρτών – Οικογένεια Τεχνικών (1/2)

Ταξινόμηση Ανοιχτού Τύπου: Οι χρήστες ταξινομούν τις κάρτες σε κατηγορίες που δημιουργούν και ονοματίζουν οι ίδιοι. Αρχικός σχεδιασμός

Ταξινόμηση Κλειστού Τύπου: Οι χρήστες ταξινομούν τις κάρτες σε κατηγορίες που παρέχει ο σχεδιαστής. Προσθήκη/Επέκταση Εγκυροποίηση ανοιχτού-τύπου

16

17

Ταξινόμησης Καρτών – Οικογένεια Τεχνικών (2/2)

«Ομαδική Ταξινόμηση: Οι χρήστες ταξινομούν τις κάρτες σε μικρές ομάδες (3~5 άτομα)

Ταξινόμηση καρτών με ομάδες εστίασης: 8~15 χρήστες ταξινομούν αρχικά τις κάρτες ο καθένας μόνος του και έπειτα συμμετέχουν σε μία ομάδα εστίασης.

Delphi Ταξινόμηση καρτών: Ένας χρήστης αρχικά σε μία ανοιχτού-τύπου ταξινόμηση και έπειτα δίνεται διαδοχικά στον επόμενο χρήστη ως σημείο έναρξης.

17

18

Ανάλυση Αποτελεσμάτων

Στόχοι Δημιουργία μοντέλου πλοήγησης Δημιουργία εναλλακτικών μονοπατιών σε σελίδες για τις

οποίες υπάρχει ασυμφωνία ομαδοποίησης Εντοπισμός ακατάληπτου για τους χρήστες περιεχομένου Χρήση λεξιλογίου χρηστών για τις ονομασίες των

κατηγοριών

Τρόποι ανάλυσης: Επισκόπηση Αποτελεσμάτων (“Eyeballing the data”) Στατιστική ανάλυση (Clustering, Multidimensional scaling)

18

19

Επισκόπηση Δεδομένων(Eyeballing the data)

Συχνότητα εμφάνισης καρτών μαζί (Κάρτες x Κάρτες) Δείκτης συμφωνίας ομαδοποίησης καρτών

Ποσοστό εμφάνισης καρτών σε διαφορετικές κατηγορίες (Κάρτες x Κατηγορίες) Δείκτης συμφωνίας ονομασίας ομάδος

19

P1 P2 P3 P4 P5 P6

P1 0,00 0,25 0,50 0,95 0,10 0,80

P2 0,25 0,00 0,55 0,40 0,85 0,75

P3 0,50 0,55 0,00 0,30 1,00 0,70

P4 0,95 0,40 0,30 0,00 0,60 0,65

P5 0,10 0,85 1,00 0,60 0,00 0,85

P6 0,80 0,75 0,70 0.36 0,85 0,00

70% των συμμετεχόντων ομαδοποίησαν μαζί τις 2 κάρτες

20

Στατιστική Ανάλυση Αλγόριθμοι Clustering

20

Στατιστικός τρόπος εύρεσης ομογενών ομάδων (clusters).

Που «κόβω» το δενδρόγραμμα? Υποκειμενική κρίση Ανάλυση

Παραγόντων

Νέα & Ανακοινώσεις

Ηλεκτρονικές Υπηρεσίες

20

Δενδρόγραμμα = οπτική αναπαράσταση

21

«Αδυναμίες» Ταξινόμησης Καρτών

Απαιτεί πόρους (κόστος, χρόνος) συχνά μη-διαθέσιμους στους σημερινούς ρυθμούς ανάπτυξης (Chi et al. 2003)

Δύσκολο να βρεθούν χρήστες σε τόσο αρχικό στάδιο

Δύσκολη η μετάβαση από τα δεδομένα που συλλέγουν στον τελικό σχεδιασμό

Ανάγκη για συνεχή τροποποίηση περιεχομένου (Brinck & Hofer 2002)

Είναι δύσκολο να εφαρμοστούν για μεγάλους ιστοτόπους (>100 ιστοσελίδες) (Mauer & Warfel 2004)

Αστοχίες στην πληροφοριακή αρχιτεκτονική δημιουργούν τα περισσότερα προβλήματα στην εμπειρία χρήσης ιστοτόπων (Nielsen 2009a; Nielsen 2009b)

Συχνά η τεχνική αγνοείται και η

δομή στηρίζεται στο «ένστικτο» του σχεδιαστή

22

Ερευνητικά ερωτήματα (Katsanos et al 2008)

1) Μπορεί να υποστηριχθεί αποδοτικότερα η διαδικασία δόμησης του περιεχομένου ενός ιστοτόπου;

2) Αν ναι, ποια η ποιότητα των αποτελεσμάτων που παράγει συγκριτικά με την καθιερωμένη τεχνική της Ταξινόμησης Καρτών;

23

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. In Proc. 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

24

AutoCardSorter: Μεθοδολογία Αυτόματης Δόμησης Ιστοτόπων

Περιγραφές Σελίδων

Μέτρα Σημασιολογικής Συσχέτισης (π.χ. LSA) Αλγόριθμοι Clustering

Διαδραστικό Δενδρόγραμμα

Επιπρόσθετη Υποστήριξη1. Αριθμός Κατηγοριών2. Cross-hierarchy links

Πίνακας Σημασιολογικών Συσχετίσεων

24

25

AutoCardSorter:Το εργαλείο (hci.ece.upatras.gr/autocardsorter)

Περιγραφές Σελίδων

Διαδραστικό Δενδρόγραμμα

Επιλογή αριθμού κατηγοριών

Παράμετροι αλγορίθμου AutoCardSorter

Προσδιορισμός στατιστικά-βέλτιστου αριθμού κατηγοριών

26

AutoCardSorter

Το πλαίσιο των μελετών

vs

Ταξινόμηση Καρτών

Μελέτη 1 Μελέτη 2 Μελέτη 3 Μελέτη 4Θεματική κατηγορία Διατροφή Εκπαίδευση Τουρισμός Ειδήσεις/Νέα# ιστοσελίδες 16 27 38 38# συμμετέχοντες* 18 26 34 36

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

27

AutoCardSorter

Αποτελέσματα (1/5)

vs

Ταξινόμηση Καρτών

28

AutoCardSorter

Αποτελέσματα (2/5)

vs

Ταξινόμηση Καρτών

29

AutoCardSorter

Αποτελέσματα (3/5)

vs

Ταξινόμηση Καρτών

30

AutoCardSorter

Αποτελέσματα (4/5)

vs

Ταξινόμηση Καρτών

17 φορές αποδοτικότερη κατά μέσο όρο

31

AutoCardSorter

Αποτελέσματα (5/5)

vs

Ταξινόμηση Καρτών

32

Μιλάμε πλέον για σχεδιασμό εμπειρίας χρήσης (User Experience)

Σχεδιάζουμε για αξίες: Ευχρηστία Ευρεσιμότητα Προσβασιμότητα Αξιοπιστία Καλή αισθητική Χρησιμότητα

Usable

Findable

Accessible

Credible

Desirable

Useful

Valuable

The UX Honeycomb (Morville, 2004)

33

Προσβασιμότητα – Εισαγωγή (1/2)

Πως μπορώ να επιτύχω την εύκολη πρόσβαση στο μεγαλύτερο δυνατό ποσοστό ανθρώπων ανεξάρτητα από τιςo ιδιαίτερες ανάγκες τους (προβλήματα όρασης, κίνησης)o χρησιμοποιούμενες συσκευές αλληλεπίδρασης (PC, PDA)o συνθήκες αλληλεπίδρασης (θόρυβος, έλλειψη φωτισμού κλπ)

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

όλους!

Accessible

34

Προσβασιμότητα – Εισαγωγή (2/2)

Accessible

World Wide Access Accessible Web Design

35

AccessibleΤεχνολογίες Υποστήριξης

Προβλήματα Όρασης ScreenReaders, Screen

Magnifiers, Συσκευές Braille Γνωστικές Δυσκολίες

Software βελτίωσης ανάγνωσης, πρόβλεψης λέξεων, Speech Synthesizers

Κινητικά Προβλήματα Virtual Keyboards, Oθόνες αφής,

Speech Recognition, Sip & Puff, Wands & Sticks

Προβλήματα Ακοής Voice recognition, Light Alerts

Οθόνη Braille

200% μεγέθυνση

Sip & Puff σύστημα Οπτικό Head Mouse

GreyScale

Braille Mouse

36

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

JAWS Παράδειγμα

37

AccessibleΜεθοδολογίες επίτευξης Διαδικτυακής Προσβασιμότητας

Κανόνες &Πρότυπα Web Content Accessibility Guidelines (WCAG. W3C) Section 508 Οδηγίες ανά κράτος (Καναδάς, Ισπανία, Αγγλία …)

Εργαλεία Αξιολόγησης Προσβασιμότητας (Ημί-)Αυτόματα (ATRC, TAW, Cynthia Says, Valet …) Υποστηρικτικές Εργαλειοθήκες Επισκόπησης (Web

Accessibility Toolbar, Mozilla Accessibility Extension …) Εργαλεία Ειδικών Ελέγχων (AccessColor, Color Filter …)

38

Απόσπασμα από τις Οδηγίες WCAG v.1

14 κανόνες - 64 σημεία ελέγχου

Κανόνας 1: Παρέχετε ισοδύναμες εναλλακτικές λύσεις στο ακουστικό και οπτικό περιεχόμενο Σημείο ελέγχου 1.1: Για κάθε εικόνα να παρέχεται

εναλλακτικά και ισοδύναμο κείμενο, το οποίο να περιγράφει το σκοπό και την λειτουργία της.

Κανόνας 2: Μη στηρίζεστε στο χρώμα μόνο Σημείο ελέγχου 2.1: Βεβαιωθείτε ότι όλες οι πληροφορίες

που αναπαρίστανται με χρώμα είναι εξίσου διαθέσιμες και χωρίς χρώμα.

Accessible

Παράδειγμα προβλήματος πλοηγησιμότητας

Σημείο ελέγχου 1.1 (P1): Για κάθε εικόνα να παρέχεται εναλλακτικά και ισοδύναμο κείμενο, το οποίο να περιγράφει το σκοπό της.

Web Accessibility - Κατσάνος Χρήστος - HCI Group

Για έναν ScreenReader δεν υπάρχουν τα βασικά navigation links …..

Accessible

40

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

Αξιολόγηση 50 δικτυακών τόπων σε βάθος μέχρι 1000 σελίδες από 7 διαφορετικές θεματικές κατηγορίες.

Accessible

Κατηγορία Αρ. ιστοτόπων Παράδειγμα

Ειδήσεις 8 www.in.gr

Εκπαίδευση 8 www.upatras.gr

Εμπόριο 7 www.plaisio.gr

Συγκοινωνίες 8 www.aia.gr

Τουρισμός/Ταξίδια 4 www.travelforall.gr

Υγεία 8 www.ippokratio.gr

Οργανισμοί Κοινής Ωφέλειας

7 www.ert.gr

41

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

4%

96%

Πολύ Προσβάσιμοι

Μέτρια Προσβάσιμοι

Καθόλου Προσβάσιμοι

Ταξινόμηση 50 ελληνικών δικτυακών τόπων ως προς την προσβασιμότητα

Accessible

42

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

Εκπαίδευση

Υγεία

Φορείς Κοινής Ωφέλειας

Εμπόριο

Συγκοινωνίες

Ειδήσεις & Ενημέρωση

Τουρισμός

0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

100.00%

87.50%

85.70%

100.00%

100.00%

100.00%

100.00%

12.50%

14.30%

Πολύ Προσβάσιμοι Μέτρια Προσβάσιμοι Καθόλου Προσβάσιμοι

Accessible

43

Ποιοι οι λόγοι που παρατηρούνται αυτά τα αποτελέσματα;

Σύμφωνα με έρευνα1 στην οποία συμμετείχαν 175 σχεδιαστές ιστοτόπων τα αίτια είναι:

1. Έλλειψη εκπαίδευσης τους σε θέματα προσβασιμότητας

2. Έλλειψη υποστήριξης από τους εργοδότες3. Έλλειψη υποστήριξης από τους πελάτες

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

44

ESALP (Katsanos et al, 2011)

Αναπτύχθηκε το ESALP (Educational System for Accessibility Learning through Paradigms) http://hci.ece.upatras.gr/esalp

Στόχοι: Υποστήριξη αποτελεσματικότερης εκπαίδευσης των

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

χρονοδιαγράμματα Ευαισθητοποίηση / ενημέρωση των άμεσα

εμπλεκόμενων στη σχεδίαση των δικτυακών τόπων

Accessible

45

Τυπικοί Χρήστες ESALP

Φοιτητές

Εκπαιδευτικοί / Καθηγητές

Επαγγελματίες μηχανικοί Διαδικτύου/ web designers

Accessible

46

Επιλογές Σχεδίασης του ESALP

Εκπαιδευτική Διάσταση Προσέγγιση εκμάθησης βασισμένη σε παραδείγματα Πολυμεσική προσέγγιση

Εικόνα => οπτική παρουσίαση προβλημάτων παραβίασης κανόνων Κείμενο => λεκτική τεκμηρίωση προβλήματος, οδηγίες επίλυσης Υπερσύνδεσμοι => για μελέτη και εμβάθυνση σε κάθε πρόβλημα

Διαστάσεις Αλληλεπίδρασης Πλοήγηση και αναζήτηση με πολλαπλά κριτήρια Δυνατότητα αναζήτησης με λέξεις - κλειδιά

Accessible

47

Πρωτότυπο Διεπιφάνειας ESALPAccessible

Διαθέσιμο στη διεύθυνση: http:// hci.ece.upatras.gr/esalp

48

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

Accessible

49

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

50

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

Accessible

51

Ευχαριστώ για την προσοχή σας – Ερωτήσεις;

Δρ. Χρήστος Κατσάνοςckatsanos@eap.gr