Εισαγωγή στην Επιστήμη του Ιστού Ενότητα 6 : Βασικές αρχές σχεδιασμού και ευχρηστίας δικτυακών τόπων Διδάσκων: Νικόλαος Τσέλιος Τμήμα Επιστημών της Εκπαίδευσης και της Αγωγής στην Προσχολική Ηλικία
Σημείωμα Αναφοράς Copyright Πανεπιστήμιο Πατρών, Σχολή Κοινωνικών και Ανθρωπιστικών Επιστημών, Τμήμα Επιστημών της Εκπαίδευσης και Αγωγής στην Προσχολική Ηλικία, Νικόλαος Τσέλιος, «Εισαγωγή στην Επιστήμη του Ιστού». Έκδοση: 1.0. Πάτρα 2014. Διαθέσιμο από τη δικτυακή διεύθυνση: https://eclass.upatras.gr/courses/pn1427/
Σημείωμα Αδειοδότησης Το παρόν υλικό διατίθεται με τους όρους της άδειας χρήσης Creative Commons Αναφορά, Μη Εμπορική Χρήση Παρόμοια Διανομή 4.0 [1] ή μεταγενέστερη, Διεθνής Έκδοση. Εξαιρούνται τα αυτοτελή έργα τρίτων π.χ. φωτογραφίες, διαγράμματα κ.λ.π., τα οποία εμπεριέχονται σε αυτό και τα οποία αναφέρονται μαζί με τους όρους χρήσης τους στο «Σημείωμα Χρήσης Έργων Τρίτων». [1] http://creativecommons.org/licenses/by-nc-sa/4.0/ Ως Μη Εμπορική ορίζεται η χρήση: που δεν περιλαμβάνει άμεσο ή έμμεσο οικονομικό όφελος από την χρήση του έργου, για το διανομέα του έργου και αδειοδόχο που δεν περιλαμβάνει οικονομική συναλλαγή ως προϋπόθεση για τη χρήση ή πρόσβαση στο έργο που δεν προσπορίζει στο διανομέα του έργου και αδειοδόχο έμμεσο οικονομικό όφελος (π.χ. διαφημίσεις) από την προβολή του έργου σε διαδικτυακό τόπο Ο δικαιούχος μπορεί να παρέχει στον αδειοδόχο ξεχωριστή άδεια να χρησιμοποιεί το έργο για εμπορική χρήση, εφόσον αυτό του ζητηθεί.
Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα εκτός κι αν αναφέρεται διαφορετικά Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο Πανεπιστήμιο Πατρών» έχει χρηματοδοτήσει μόνο τη αναδιαμόρφωση του εκπαιδευτικού υλικού Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους 4
Σκοποί ενότητας Θα εξοικειωθεί με βασικές σχεδιαστικές πρακτικές για την επαύξηση της ευχρηστίας σε δικτυακούς τόπους 5
Περιεχόμενα ενότητας Περιγραφή: Συζήτηση περί αναγκαιότητας της ευχρηστίας στο διαδίκτυο. Δίνονται ορισμοί. Επίσης προσφέρονται οδηγίες για το σχεδιασμό εύχρηστων δικτυακών τόπων και παρουσιάζονται τιμές δεικτών ευχρηστίας Λέξεις Κλειδιά: Ευχρηστία, Δομή δικτυακού τόπου, Μεγέθη μέτρησης ευχρηστίας 6
Θέματα γραπτών εργασιών 1. Από απόσταση εκπαίδευση: Ιστορία, θεωρία και πρακτική 2. Ασφαλής χρήση Διαδικτύου για παιδιά και ενήλικες 3. Μαθησιακό υλικό για πλατφόρμες e-μάθησης: προτυποποίηση, ανάπτυξη, αξιολόγηση 4. Ιδιαιτερότητες σχεδιασμού διεπιφάνειας χρήσης στο διαδίκτυο 5. Massive Open Online Courses. Αναδρομή και τρέχουσα κατάσταση 6. Μελέτες περίπτωσης για εκπαιδευτική χρήση υπηρεσιών Web 2.0 σε Πανεπιστήμια του εξωτερικού 7. Προσαρμοστικά εκπαιδευτικά συστήματα και διαδίκτυο 8. Αξιολόγηση εκπαιδευτικού περιεχομένου στο διαδίκτυο
Επόμενες φάσεις σχεδιασμού Περιγραφή αντικειμένων και δομών της διεπιφάνειας του χρήστη Σχεδιασμός προτύπων οθονών. Πρώτα απόφαση: Στιλ αλληλεπίδρασης Συσκευές αλληλεπίδρασης Επιλογή κύριας μεταφοράς Σχεδιασμός πρωτοτύπου. Πρώτα απόφαση: Εικονικό περιεχόμενο και διάταξη οθονών Ροή του διαλόγου Μοντέλο πλοήγησης
Νομοθετικό πλαίσιο Οδηγία του Συμβουλίου 90/270/EEC με αντικείμενο «Εργασία με οθόνες οπτικής απεικόνισης» Η χώρα μας έχει συμμορφωθεί με την οδηγία αυτή, με την έκδοση του ΠΔ 16/18.1.1996 «Ελάχιστες προδιαγραφές ασφαλείας και υγείας κατά την εργασία με οθόνες οπτικής απεικόνισης» Ο νόμος αυτός περιέχει οδηγίες εργονομικού χαρακτήρα που αφορούν: την ποιότητα και χαρακτηριστικά του εξοπλισμού, τις συνθήκες του περιβάλλοντος εργασίας, τη διεπιφάνεια ανθρώπου-υπολογιστή
Γιατί η ευχρηστία είναι απαραίτητη; Οι χρήστες δεν βρίσκουν την πληροφορία που θέλουν στο 60% των περιπτώσεων Χαμένος χρόνος Μειωμένη παραγωγικότητα Εκνευρισμός Επανάληψη επισκέψεων, φόρτος δικτύου, απώλεια εσόδων
Γιατί η ευχρηστία είναι απαραίτητη? (1/2) Απώλεια ως και 40% της επισκεψιμότητας Απώλεια ως 50% στα έσοδα λόγω μη εύρεσης προϊόντων People will gladly waste a million dollars on their fancy design and not spend $4,000 to see if it works - Nielsen Μειωμένα τηλέφωνα για υποστήριξη
Γιατί η ευχρηστία είναι απαραίτητη? (2/2) Η Dell εφάρμοσε βασικούς κανόνες ευχρηστίας το 1999 και τα έσοδα εκτινάχθηκαν από $1 million την ημέρα το Σεπτέμβριο 1998, σε $34 την ημέρα το Μάρτιο του 2000 Τα Windows XP οφείλουν σε μεγάλο βαθμό τη δημοφιλία τους επειδή έχουν εξαιρετικό επίπεδο ευχρηστίας Τι κινητό αγοράζετε;
Σχεδίαση εφαρμογών διαδικτύου Στόχος ελαχιστοποίηση ταχύτητας φόρτωσης ιστοσελίδας Υποβοήθηση αναζήτησης (τοπικές μηχανές αναζήτησης) Υποστήριξη πλοήγησης Μέγεθος ιστοσελίδων (αποφυγή κύλισης) Απλότητα (χρώμα, κινούμενα γραφικά κλπ) υπερ-χρησιμοποίηση τεχνολογίας απλή διεύθυνση - τίτλος σελίδας αυθύπαρκτος χαρακτήρας σελίδας διατήρηση επικαιρότητας υλικού ομοιομορφία - τήρηση συμβάσεων αρχές αναγνωσιμότητας υπερ-κειμένων
Άλλες οδηγίες χρηστοκεντρικού σχεδιασμού για Web Usability Τίτλοι σελίδων Μέγεθος κειμένου και χρώματα Καλύτερες μινιατούρες εικόνων (thumbnails) Προσοχή στις υποθέσεις για τους χρήστες Στυλ γραφής κατάλληλο για το web Παροχή ανάδρασης Κατάλληλες ετικέτες σε εικόνες (Image tags)
Page Titles Οι σελίδες θα πρέπει να έχουν το αναγνωριστικό <TITLE> στον κώδικα HTML Γιατί; Σημαντικό για τη πλοήγηση Λίστα αγαπημένων, ιστορικό, μηχανές αναζήτησης Επαρκής πληροφορία από μόνη της Πέρα και έξω από το πλαίσιο της σελίδας (μηχανές αναζήτησης) Υπερβολικά ευμεγέθεις τίτλοι καθυστερούν τους χρήστες (trade-off) Καλό είναι να κωδικοποιείτε την πληροφορία τηλεγραφικά Η εταιρία μου- Κεντρική σελίδα vs. Καλωσήρθατε στη σελίδα της εταιρίας μου... Διαφορετικές σελίδες διαφορετικούς τίτλους
Μέγεθος και χρώμα κειμένου Μην χρησιμοποιείτε μπλε ή κόκκινο χρώμα Μη χρησιμοποιείτε συνδυασμό κόκκινου με μπλε Δύσκολο να το επεξεργαστεί η ανθρώπινη όραση Συχνά οι σχεδιαστές διαφοροποιούν το προκαθορισμένο φόντο Αποδεκτό να αλλάζουμε μικρό σώμα του κειμένου Όχι για όλο το κείμενο Οι χρήστες σκόπιμα έχουν επιλέξει φόντο της αρεσκείας τους! Βελτιστοποιεί τη προσωπική τους ανάγνωση
Καλύτερα thumbnails Thumbnails Αναπαριστούν εικόνες που είναι πολύ μεγάλες σε όγκο πληροφορίας για να καταβιβαστούν απευθείας Τεχνική Σμίκρυνση (scaling) or λωριδοποίηση (cropping) δεν είναι άμεσα αποτελεσματικές πάντα (γιατί ;)
Μικρογραφία με επαύξηση συνάφειας (1/2) Πρώτα λωριδοποίηση και ακολούθως σμίκρυνση π.χ., για thumbnail που είναι στο10% του πραγματικού Λωριδοποίηση στο 32% Μετά σμίκρυνση στο 32%.32 *.32 =.10 του πραγματικού Βέλτιστη ισορροπία λεπτομέρειας και πληροφορίας εικόνας
Μικρογραφία με επαύξηση συνάφειας (2/2) Πρώτα λωριδοποίηση και ακολούθως σμίκρυνση π.χ., για thumbnail που είναι στο10% του πραγματικού Λωριδοποίηση στο 32% Μετά σμίκρυνση στο 32%.32 *.32 =.10 του πραγματικού Βέλτιστη ισορροπία λεπτομέρειας και πληροφορίας εικόνας
Μην κάνετε υποθέσεις Για Φυλλομετρητές Οι χρήστες χρησιμοποιούν ποικιλία φυλλομετρητών Chrome, Firefox, Explorer, Safari, κλπ. Για μέγεθος παραθύρου/ ανάλυση Συχνά οι χρήστες έχουν διαφορετικές αναλύσεις ή δεν ανοίγουν το φυλλομετρητή τους σε πλήρη οθόνη
Γράφοντας για το Web (1/2) Να είστε περιεκτικοί Είναι 20% βραδύτερο να διαβάζετε από μια οθόνη υπολογιστή εξαρτάται από τα dpi της οθόνης, στις σημερινές οθόνες περι τα 100<<300 που είναι το ελάχιστο που έχει το τυπωμένο χαρτί Τα κείμενα πρέπει να είναι στο 50% της έντυπης μορφής (οι χρήστες δεν ακολουθούν συχνά κυλιόμενες σελίδες) Γράψτε για υποβοήθηση σαρωτικής ανάγνωσης (skimability) Οι χρήστες φυλλομετρούν επιπόλαια δεν διαβάζουν κανονικά Δομήστε το κείμενο με 2-3 επίπεδα επιγραφών Χρησιμοποιείστε περιγραφικούς τίτλους και σωστή έμφαση στο κείμενο
Γράφοντας για το Web (2/2) Χρησιμοποιήστε υπερκείμενο για την κατάτμηση της πληροφορίας Τεμαχίστε την πληροφορία σε σελίδες με αυτόνομο -συνεκτικό περιεχόμενο Χρησιμοποιήστε στυλ ανάστροφης πυραμίδας (πρώτα τα συμπεράσματα ή η σύνοψη του κειμένου)
ZDNet: Χρήση ανάστροφης πυραμίδας
Άλλες οδηγίες Ανάδραση Κατάλληλες μικρές περιγραφές διασυνδεόμενων ιστοσελίδων και μεγέθη καταβιβαζόμενων αρχείων Ενημερότητα για μέγεθος εικόνων Στην html στα IMG tags Η πληροφορία εμφανίζεται πριν αρχίσει να κατεβαίνει η εικόνα
Δομή δικτυακού τόπου (1/3) Είναι η διαδικασία δόμησης της πληροφορίας του web site σε επιμέρους σελίδες με τρόπο που να υποστηρίζει τους στόχους και τη πλοήγηση των χρηστών Λόγοι Φτωχή δόμηση=φτωχή ευχρηστία ανεξαρτήτως του συστήματος πλοήγησης Η δόμηση πληροφορίας διαφέρει από το απλό χαρτί. Οι χρήστες δεν θέλουν να διατρέχουν μεγάλες σελίδες για να βρούν αυτό που θέλουν. Για να υποστηρίξουν τη μελλοντική ανάπτυξη του δικτυακού τόπου. Δεν θα πρέπει να απεικονίζει τη δομή μιας εταιρίας αλλά τους στόχους των χρηστών
Δομή δικτυακού τόπου (2/3) Η δόμηση της πληροφορίας γίνεται με ιεραρχικό τρόπο Η επιτυχία εδράζεται στο πόσο καλά αντανακλά τις προ σδοκίες των χρηστών
Δομή δικτυακού τόπου (3/3) Λόγω της υπερβολικής πληροφορίας, το δίκτυο μπορεί να ειδωθεί ως σύστημα πλοήγησης και ανάκτησης πληροφορίας Άρα το σύστημα πλοήγησης βοηθά τους χρήστες να αντιληφθούν τη δομή και την οργάνωση της πληροφορίας Ανά πάσα στιγμή πρέπει να βοηθά τρία ερωτήματα: Που είμαι; logo, σχετική αναφορά δομής Πού ήμουν; Δεν υποστηρίζεται επαρκώς, μόνο back, ιστορία φυλλομέτρησης, αλλαγή χρώματος συνδέσμου που έχω επισκεφτεί. Που μπορώ να πάω; Σύστημα πλοήγησης
Saturn s παλιά σελίδα
Saturn s Νέα σελίδα
Παράδειγμα προς αποφυγή
cnn.com
Μη καθαρή δόμηση
Καθαρή δόμηση
www.ee.upatras.gr Course selection menu Selected courses Personal timetable
Αδυναμία εύρεσης αναζήτησης The search engine button
www.ee.upatras.gr Κεντρική σελίδα
Επανασχεδιασμένη έκδοση
Ανάλυση απαιτήσεων: Προδιαγραφές Ευχρηστίας Νωρίς κατά τη φάση σχεδιασμού, πρέπει να ορίσουμε προδιαγραφές (στόχους) ευχρηστίας H ευχρηστία { (η) ουσ. το γνώρισμα του εύ-χρηστου, η ευκολία στη χρήση } είναι βασική παράμετρος της ποιότητας ενός διαδραστικού συστήματος Ορισμούς ευχρηστίας περιέχουν διεθνή πρότυπα που αφορούν ποιότητα λογισμικού (ISO/IEC 9126) και επικοινωνία ανθρώπου-υπολογιστή (ISO/DIS 9241-11)
Στόχοι ευχρηστίας Εξαρτώνται από το προφίλ των τυπικών χρηστών Μετρούνται Με χρήστες που ανταποκρίνονται στο τυπικό προφίλ χρήστη Σε πραγματικές ή προσομοιούμενες συνθήκες
Παράδειγμα προδιαγραφής Ευχρηστίας παράμετρος: ευκολία εγκατάστασης προϊόντος σε τυπικό υπολογιστή μέθοδος μέτρησης: προϊόντος ο χρόνος που απαιτείται για την εγκατάσταση του χειρότερη περίπτωση: 1 μέρα με χρήση εγχειριδίων συνήθης περίπτωση: 1 ώρα χωρίς εγχειρίδια βέλτιστη περίπτωση: 10 λεπτά με εγχειρίδια τρέχουσα κατάσταση: πολλοί χρήστες αδυνατούν να εγκαταστήσουν το προϊόν
Μεγέθη μέτρησης ευχρηστίας (1) Χρόνος συμπλήρωσης μιας καθορισμένης εργασίας ποσοστό εργασίας που ολοκληρώνεται σε ορισμένο χρόνο ποσοστό εργασίας που εκτελείται ανά μονάδα χρόνου (ταχύτητα) λόγος επιτυχών προσπαθειών / αποτυχίες χρόνος που καταναλώνεται στη διόρθωση σφαλμάτων ποσοστό σφαλμάτων αριθμός εντολών που απαιτούνται συχνότητα χρήσης HELP και εγχειριδίων ποσοστό θετικών και αρνητικών σχολίων χρηστών αριθμός επαναλήψεως αποτυχημένων εντολών αριθμός επιτυχημένων και αποτυχημένων προσπαθειών
Μεγέθη μέτρησης ευχρηστίας (2) Αριθμός περιπτώσεων που η διεπιφάνεια ξεγελά το χρήστη Αριθμός θετικών και αρνητικών χαρακτηριστικών που θυμάται ο χρήστης Αριθμός διαθέσιμων εντολών που δεν χρησιμοποιήθηκαν Αριθμός υποχωρήσεων του χρήστη Αριθμός χρηστών που προτιμούν το σύστημα Αριθμός προσπαθειών παράκαμψης προβλήματος Αριθμός προσπαθειών του χρήστη που διακόπηκαν Αριθμός περιπτώσεων που ο χρήστης χάνει τον έλεγχο Αριθμός περιπτώσεων που ο χρήστης εκφράζει απογοήτευση ή ευχαρίστηση
Στόχοι ευχρηστίας κατά τη φάση σχεδίασης Στόχος ευχρηστίας συστήματος Καταλληλότητα του για εκτέλεση του συγκεκριμένου έργου Καταλληλότητα του για έμπειρους χρήστες Ευκολία εκμάθησης Αντιμετώπιση σφαλμάτων Μέτρηση αποτελεσματικότητας Ποσοστό στόχων που επετεύχθησαν Αριθμός προχωρημένων λειτουργιών που χρησιμοποιήθηκαν Ποσοστό λειτουργιών που έμαθε ο χρήστης να χρησιμοποιεί Ποσοστό σφαλμάτων που διορθώθηκαν αποτελεσματικά Μέτρηση απόδοσης Χρόνος για επίτευξη των στόχων Σχετική απόδοση σε σύγκριση με έμπειρους χρήστες Χρόνος που απαιτείται για ικανοποιητική εκμάθηση Χρόνος που απαιτήθηκε για την διόρθωση σφαλμάτων Μέτρηση ικανοποίησης Ικανοποίηση σύμφωνα με κλίμακα Ικανοποίηση που παρέχουν οι προηγμένες λειτουργίες Υποκειμενική εντύπωση από ευκολία εκμάθησης Υποκειμενική εντύπωση από διαχείριση σφαλμάτων
Τιμές δεικτών ευχρηστίας Καθορίζονται λαμβάνοντας υπόψη Προηγούμενη εμπειρία (σε παλαιότερη έκδοση αυτού ή σε άλλα συστήματα) Ανταγωνιστικά συστήματα Την απόδοση των αρχικών πρωτοτύπων Την μη αυτοματοποιημένη εκτέλεση της εργασίας Προγενέστερη απόδοση των ίδιων χρηστών Για κάθε τμήμα του συστήματος!
Π.χ. Διαδικτυακή εφαρμογή έκδοσης εισιτηρίων Στόχοι ευχρηστίας: Η ευκολία εκμάθησης από τον πρωτόπειρο χρήστη Ο ρυθμός (ταχύτητα) ολοκλήρωσης των ενεργειών Η ικανοποίηση που προκαλεί το σύστημα στο χρήστη Π.χ. Έκδοση εισιτηρίου σε 2min/5min Εκτίμηση στόχων: με χρήση προτύπου
Τέλος Ενότητας