Ιστοσελίδες από τον κλάδο της υγείας : γραφικός σχεδιασμός και προσβασιμότητα Ελευθέριος Παπαχρήστος, Χρήστος Κατσάνος, Νικόλαος Αβούρης.

Παρουσίαση με θέμα: "Ιστοσελίδες από τον κλάδο της υγείας : γραφικός σχεδιασμός και προσβασιμότητα Ελευθέριος Παπαχρήστος, Χρήστος Κατσάνος, Νικόλαος Αβούρης."— Μεταγράφημα παρουσίασης:

1 Ιστοσελίδες από τον κλάδο της υγείας : γραφικός σχεδιασμός και προσβασιμότητα Ελευθέριος Παπαχρήστος, Χρήστος Κατσάνος, Νικόλαος Αβούρης

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

3 Usable Findable Accessible Credible Desirable Useful Valuable 3 of 20 Γραφικός σχεδιασμός

4 http://hci.ece.upatras.gr 2,684 αξιολόγησαν 100 ιστοσελίδες ως προς αξιοπιστία (2002 Stanford Persuasive Technology Lab ) Κριτήριο αξιολόγησης : 46.1% -> γραφικός σχεδιασμός  Αντίληψη συνολικής ευχρηστίας (perceived usability) (Lavie & Tractinsky, 2004)  Συνολική προτίμηση ( preference ) (Schenkman & Jönsson, 2000)  Συνολική αντίληψη ποιότητας συστήματος ( overall quality ) (Hassenzahl, 2004)  Ικανοποίηση χρήστη ( satisfaction ) (Lindgaard & Dudek, 2003; Tractinsky et al., 2000)  Συνολική ευχαρίστηση ( pleasure ) (Jordan, 2002) 4 of 20

5 Μελέτη αξιολόγησης ιστοσελίδων ( κλάδος υγείας ) http://hci.ece.upatras.gr 5 of 20  15 ιστοσελίδες νοσοκομείων -> επιλέχτηκαν από λίστα 100 καλύτερων νοσοκομείων των Η. Π. Α.  34 συμμετέχοντες βαθμολόγησαν (29 άντρες, 4 γυναίκες, ηλικία = 22.2) -> βαθμολόγησαν τις ιστοσελίδες ως προς την συνολική προτίμηση

6 Μελέτη αξιολόγησης ιστοσελίδων ( κλάδος υγείας ) http://hci.ece.upatras.gr 6 of 20

7 Μελέτη σχεδιαστικών χαρακτηριστικών  Δεδομένα από τους ίδιους χρήστες που αξιολόγησαν ιστοσελίδες με βάση την προτίμησή τους : ( φαινόμενη ευχρηστία, αξιοπιστία, πρωτοτυπία, ελκυστικότητα )  Πάνελ ειδικών ( συμμετρία, ισορροπία, τάξη κ. α.)  Αντικειμενικές μετρικές ( αριθμός χρωμάτων, μέγεθος εικόνων, αριθμός κειμένου κ. α.) http://hci.ece.upatras.gr 7 of 20

8 Αποτελέσματα http://hci.ece.upatras.gr 8 of 20 Παράγοντες Προτίμησης:Ιστοσελίδες που προτιμήθηκαν : Ελκυστικότητα Φαινόμενη Ευχρηστία Αξιοπιστία Πολλούς κενούς χώρους, μεγάλες εικόνες, είχαν τάξη ήταν απλές και δεν ήταν κυρίως λευκές

9 Μελέτες σε άλλους κλάδους http://hci.ece.upatras.gr 9 of 20 (Κλάδος Υγείας) 34 χρήστες (29 άντρες, 4 γυναίκες, ηλικία = 22.2) 15 ιστοσελίδες νοσοκομείων (Τουριστικός κλάδος) 32 χρήστες (21 άντρες, 11 γυναίκες, ηλικία = 23.3) 18 ιστοσελίδες ξενοδοχείων (Επιχειρηματικός κλάδος) 30 χρήστες (17 άντρες, 13 γυναίκες, ηλικία = 28) 12 ιστοσελίδες εταιρών ανάπτυξης ιστοσελίδων 1 Μελέτη 2 3

10 Αποτελέσματα ( Τουριστικός κλάδος ) http://hci.ece.upatras.gr 10 of 20 Παράγοντες Προτίμησης:Ιστοσελίδες που προτιμήθηκαν είχαν: Ελκυστικότητα Ζωντάνια χρωμάτων Εικόνες Κυρίως γραφικά, είχαν ζωντανά χρώματα, μεγάλες Εικόνες και μόνο λίγο κείμενο

11 Αποτελέσματα ( Επιχειρηματικός κλάδος ) http://hci.ece.upatras.gr 11 of 20 Ελκυστικότητα Πρωτοτυπία Παράγοντες Προτίμησης :Ιστοσελίδες που προτιμήθηκαν ήταν : Πρωτότυπες και οπτικά ελκυστικές

12 Σύγκριση αποτελεσμάτων http://hci.ece.upatras.gr 12 of 20

13 Usable Findable Accessible Credible Desirable Useful Valuable 13 of 20 Προσβασιμότητα

14 Που βρίσκονται τα εξωτερικά ιατρεία ; http://hci.ece.upatras.gr 14 of 20  Άνθρωποι τυφλοί χρησιμοποιούν αναγνώστες οθόνης (screen reader)  Παρέχετε ένα ισοδύναμο κείμενο για κάθε μη - κειμενικό στοιχείο ( για εικόνες μέσω της ιδιότητας “alt”.)

15 Η κόκκινη γραμμή θα σας φέρει από το αεροδρόμιο στο ξενοδοχείο. http://hci.ece.upatras.gr 15 of 20  Δεν βλέπουν όλοι οι άνθρωποι τα χρώματα με τον ίδιο τρόπο  Μην στηρίζεστε μόνο στο χρώμα για να επικοινωνήσετε πληροφορία

16 Προσβασιμότητα ιστοτόπων (Web Accessibility) http://hci.ece.upatras.gr  Δυνατότητα χρήσης ανεξάρτητα από :  ιδιαιτερότητες ( π. χ. στην όραση, κίνηση )  συσκευές αλληλεπίδρασης ( π. χ. PC, tablet)  πλαισίου αλληλεπίδρασης ( π. χ. φωτισμός )  Προσβάσιμα sites = πιο εύχρηστα για όλους (Sulivan, 2000)  Βοηθητικές τεχνολογίες (Assistive Technologies)  Κανόνες / Πρότυπα Προσβασιμότητας  WCAGv1.0 | WCAGv2.0 | Section 508 16 of 20 Πληκτρολόγιο ενός χεριού Μεγέθυνση οθόνης Sip & Puff σύστημα Οπτικό Head Mouse Οθόνη Braille Χρήση μόνο πληκτρολογίου

17 Μελέτη προσβασιμότητας ελληνικών ιστοτόπων (1/4) (Katsanos et al., 2009; Tsakoumis et al., 2009) http://hci.ece.upatras.gr  50 ιστότοποι σε βάθος μέχρι 1000 σελίδες  7 θεματικές κατηγορίες 17 of 20 Κατηγορία # sites Παράδειγμα Ειδήσεις 8www.in.gr Εκπαίδευση 8www.upatras.gr Εμπόριο 7www.plaisio.gr Συγκοινωνίες 8www.aia.gr Τουρισμός / Ταξίδια 4www.travelforall.gr Υγεία 8www.ippokratio.gr Οργανισμοί Κοινής Ωφέλειας 7www.ert.gr  Web Content Accessibility Guidelines (WCAG) v.1.0  14 Κανόνες – 64 σημεία ελέγχου  ΙΒΜ Rational Policy Tester for Accessibility  Λάβαμε υπόψη σίγουρα λάθη ( errors) και όχι πιθανά λάθη ( warnings)

18 Μελέτη προσβασιμότητας ελληνικών ιστοτόπων (2/4) (Katsanos et al., 2009; Tsakoumis et al., 2009) http://hci.ece.upatras.gr 18 of 20

19 Μελέτη προσβασιμότητας ελληνικών ιστοτόπων (3/4) (Katsanos et al., 2009; Tsakoumis et al., 2009) http://hci.ece.upatras.gr 19 of 20

20 http://hci.ece.upatras.gr 20 of 20 Μελέτη προσβασιμότητας ελληνικών ιστοτόπων (4/4) (Katsanos et al., 2009; Tsakoumis et al., 2009) Σημεία ελέγχου με τις πιο συχνές παραβιάσεις  1.1: Παρέχετε ένα ισοδύναμο κείμενο για κάθε μη - κειμενικό στοιχείο (P1)  12.1: Βάλτε τίτλο σε κάθε πλαίσιο (frame) (P1)  13.2: Παρέχετε μεταδεδομένα σε σελίδες (P2)  3.2: Δημιουργήστε έγγραφα σύμφωνα με επίσημες γραμματικές ( π. χ DTD HTML 4.0) (P2)  9.3: Προσδιορίστε χειριστές γεγονότων μη εξαρτώμενους από συσκευές ( π. χ. onclick) (P2)  11.2: Αποφύγετε αποδ o κιμαζόμενα χαρακτηριστικά τεχνολογιών (P2)  4.3: Προσδιορίστε τη βασική φυσική γλώσσα του εγγράφου (P3)  9.4: Δημιουργήστε λογική σειρά στηλοθέτησης (P3)  10.5: Συμπεριλάβετε εκτυπώσιμους χαρακτήρες ανάμεσα σε γειτονικούς συνδέσμους (P3)

21 Μια ιδέα για τη βελτίωση της προσβασιμότητας http://hci.ece.upatras.gr  Που οφείλεται το πρόβλημα σύμφωνα με 175 επαγγελματίες (Lazar et al, 2004 ) :  Έλλειψη εκπαίδευσης σε θέματα προσβασιμότητας  Έλλειψη υποστήριξης από τους εργοδότες  Έλλειψη υποστήριξης από τους πελάτες 21 of 20 (Katsanos et al., 2009; 2011) http://hci.ece.upatras.gr/esalp

22 http://hci.ece.upatras.gr 22 of 20 Ευχαριστούμε για την προσοχή σας – Ερωτήσεις;