ΕΠΛ 435: Αλληλεπίδραση Ανθρώπου Υπολογιστή

Περιεχόµενα ΕΠΛ 435: Αλληλεπίδραση Ανθρώπου Υπολογιστή Οδηγίες Σχεδιασµού ιεπιφάνειας Χρήστη Στόχοι και κατηγορίες κανόνων σχεδίασης Αρχές γενικού σχεδιασµού για ευχρηστία Πρότυπα Οδηγίες Σχεδιασµού Οι 7 Αρχές του Norman Οι 8 χρυσοί κανόνες του Shneiderman Κανόνες Smith & Mosier Οδηγίες σχεδιασµού από τη NASA Βιβλιογραφία Εισαγωγή Αβούρης [2000]: Κεφάλαιο 6, slides in [pdf] Dix [2004]: Chapter 7, slides in [pdf] Norman [2001]: Chapter 7, slides in [pdf] Shneiderman [2004]: Chapter 2, pp. 67-92, [link], Chapter 10 [link], Chapter 11 [link], Chapter 13, [link] Smith & Mosier Design Guidelines, [pdf] NASA Design Guidelines, [link] UI design for the WWW, by John Stasko, [pdf] Interface Hall of Shame, [link] what is wanted interviews ethnography what is there vs. what is wanted scenarios task analysis analysis evaluation heuristics dialogue notations prototype guidelines principles design precise specification implement and deploy architectures documentation help

Σχεδιασµός µε πρότυπη βασική οθόνη Στόχοι και κατηγορίες κανόνων σχεδίασης [ ] Ορισµός ειδικών στόχων ευχρηστίας σύµφωνα µε τις ανάγκες των χρηστών [ ] ηµιουργία οδηγιών σχεδιασµού και οδηγού στυλ αλληλεπίδρασης Ορισµός ενός µοντέλου πλοήγησης και της κυρίαρχης µεταφοράς διεπιφάνειας Ορισµός της οµάδας των βασικών οθονών: εισαγωγική οθόνη, κεντρική οθόνη (home screen), βασικές οθόνες κύριων διεργασιών. Κατασκευή πρωτοτύπου των βασικών οθονών, χρησιµοποιώντας εργαλεία γρήγορης πρωτοτυποποίησης Για το πρωτότυπο, ζητείται η γνώµη των χρηστών και γίνονται οι πρώτες µετρήσεις ευχρηστίας Σχεδίαση για µεγιστοποίηση ευχρηστίας (ο κύριος στόχος της σχεδίασης διαδραστικών συστηµάτων) Κατηγορίες κανόνων: Αρχές γενικού σχεδιασµού (Principles) Αφαιρετικό επίπεδο πιο κοντά στις θεωρίες και τα γνωστικά µοντέλα Μεγάλη δυνατότητα γενίκευσης υσκολία µετασχηµατισµού σε πρακτικές ενέργειες (και πολλές φόρες παρερµηνείες) Πρότυπα (Standards) Πολύ συγκεκριµένοι κανόνες Αυστηρό συντακτικό υσκολία χρήσης λόγω µεγέθους, λεπτοµέρειας και προσπάθειας κάλυψης όλων των δυνατών περιπτώσεων Οδηγίες σχεδιασµού (Guidelines) Προσπάθεια µετάφρασης των αρχών γενικού σχεδιασµού σε πρακτικές οδηγίες Ενσωµάτωση εµπειρίας και καθηµερινής πρακτικής Αρχές γενικού σχεδιασµού Πρότυπα Στη σχεδίαση διεπιφάνειας χρήστη υπάρχουν τρεις βασικές αρχές οι οποίες αναφέρονται στην διασφάλιση της ευχρηστίας: Εκµάθηση (Learnability) ιασφάλιση της όσο το δυνατό ευκολότερης εκµάθησης του συστήµατος από τους χρήστες και ανάπτυξη ικανότητας αποδοτικής χρήσης και µέγιστης αποτελεσµατικότητας Προσαρµοστικότητα (Flexibility) ιασφάλιση εναλλακτικών επιλογών ως προς την διεκπεραίωση του εργασιών του χρήστη ώστε να λαµβάνονται υπόψη οι ιδιαιτερότητες του χρήστη Ευρωστία (Robustness) ιασφάλιση της υποστήριξης του χρήστη στην αλλήλεπίδραση του µε το σύστηµα έτσι ώστε να µπορεί να πιστοποιεί την εκτέλεση των εργασιών, να έχει τον έλεγχο εκτέλεσης τους ανά πάσα στιγµή και να µπορεί να αξιολογεί την εκτέλεση τους Είναι κανόνες οι οποίοι έχουν τεθεί από διεθνώς αναγνωρισµένους οργανισµούς ώστε να διασφαλίζεται η συµβατότητα ανάµεσα σε συστήµατα όσον αφορά τη χρήση τους από τους ανθρώπους. υστυχώς τα πρότυπα: Είναι πιο συνηθισµένα (και ακολουθούνται) στη ανάπτυξη υλικού (hardware) παρά λογισµικού γενικότερα και διεπιφανειών χρήστη ειδικότερα Πολλές φορές αδυνατούν να παρακολουθήσουν τις γοργές εξελίξεις σε ένα πεδίο (και σχεδίαση διεπιφανειών χρήστη είναι ένα τέτοιο επίπεδο) Για τις διεπιφάνειες χρήστη το ISO 9241 ορίζει την ευχρηστία ως: Την αποτελεσµατικότητα, αποδοτικότητα και ικανοποίηση µε την οποία οι χρήστες διεκπεραιώνουν τις εργασίες τους

Οδηγίες Σχεδιασµού = > Οδηγίες σχεδιασµού Οι 7 κανόνες του Norman Αποτελούν συνδυασµό της καθηµερινής πρακτικής µε της θεωρίες µάθησης και τα γνωστικά µοντέλα µε στόχο την δηµιουργία πρακτικών κανόνων για τη σχεδίαση διεπιφανείων χρήστη (και διαδραστικών συστηµάτων γενικότερα) Οι οδηγίες σχεδιασµού: Είναι κυρίως εισηγητικές παρά υποχρεωτικές ιακρίνονται σε: Αφαιρετικές οι οποίες είναι χρήσιµες στα αρχικά στάδια της σχεδίασης (π.χ. οι κανόνες του Norman και του Shneiderman) και βρίσκονται πιο κοντά στη θεωρία Λεπτοµερείς οι οποίες βρίσκονται πιο κοντά στην καθηµερινή πρακτική (heuristics) και εισηγούνται συγκεκριµένες λύσεις για τη σχεδίαση (κανόνες Smith-Mosier, κριτήρια Nielsen, κανόνες NASA). Για την επίλυση διαφωνιών είναι σηµαντικό να µπορούµε να αντιληφθούµε την τεκµηρίωση των οδηγιών σχεδίασης 1. Ηγνώση είναι στο κεφάλι αλλά και στο περιβάλλον. Χρησιµοποίησε και τις δύο µορφές 2. Απλοποίησε τη δοµή των εργασιών 3. Κάνε τα πράγµατα (εργασίες, επιλογές, κατάσταση συστήµατος) ορατά για να περιορίσεις τα χάσµατα εκτέλεσης (gulf of execution) αλλά και αξιολόγησης (gulf of evaluation) 4. Χρησιµοποίησε την αρχή της ταύτισης σωστά 5. Χρησιµοποίησε τη δύναµη των περιορισµών (τόσο φυσικών όσο και τεχνητών) 6. Σχεδίασε λαµβάνοντας υπόψη ότι το λάθος είναι ανθρώπινο. 7. Εάν αποτύχουν τα υπόλοιπα χρησιµοποίησε τη τυποποίηση Οδηγίες Σχεδιασµού = > Οι χρυσοί κανόνες του Shneiderman Οδηγίες Σχεδιασµού = > Κανόνες Smith & Mosier 1. Οµοιοµορφία και συνέπεια (consistency) στην διεπιφάνεια και αποφυγή απροσδόκητης συµπεριφοράς του συστήµατος: 1. Ορολογία 2. Μηνύµατα 3. Μενού 4. Οθόνες βοήθειας 5. Γραµµατοσειρές 6. Χρώµα 7. Μορφή 2. Σύντοµοι χειρισµοί (shortcut) για τη διευκόλυνση των εµπείρων χρηστών 1. Συντµήσεις 2. Ειδικά πλήκτρα 3. Μακροεντολές 3. Συνεχής ανάδραση της κατάστασης (informative feedback) του συστήµατος 4. Oι διάλογοι χρήστη- υπολογιστή πρέπει να ολοκληρώνονται σε λίγα βήµατα. 5. Πρόβλεψη για σφάλµατα των χρηστών και χειρισµός σφαλµάτων 6. υνατότητα αναίρεσης µιας ή περισσότερων ενεργειών µε ευκολία 7. Ο έλεγχος της αλληλεπίδρασης θα πρέπει να είναι από την πλευρά του χρήστη και όχι του συστήµατος 8. Το φορτίο βραχύχρονης µνήµης του χρήστη θα πρέπει να ελαχιστοποιηθεί Είναι γενικοί και ειδικοί κανόνες που αναλύονται σε µεγάλο βαθµό λεπτοµέρειας. Έξι κατηγορίες: Εισαγωγή δεδοµένων (Data Entry) Οι δράσεις του χρήστη που αφορούν την εισαγωγή δεδοµένων και η απόκριση του υπολογιστή στις εισόδους αυτές Παρουσίαση δεδοµένων (Data Display) Η παρουσίαση δεδοµένων στον χρήστη και η αφοµοίωση της πληροφορίας που τα δεδοµένα περιέχουν από το χρήστη Ελέγχου συνέχειας (Sequence Control) Τα στυλ αλληλεπίδρασης και οι διάλογοι χρήστη υπολογιστή Υποστήριξης χρήστη (User Guidance) Τα µηνύµατα σφαλµάτων, επικεφαλίδες, prompts, οθόνες βοήθειας Μετάδοσης δεδοµένων (Data Transmission) Ελαχιστοποίηση δράσεων χρήστη, ελαχιστοποίηση µνηµονικού φορτίου χρήστη Προστασίας δεδοµένων (Data Protection) Ελαχιστοποίηση της πιθανότητας εισαγωγή εσφαλµένων δεδοµένων και της πιθανότητας απώλειας δεδοµένων

Οδηγίες Σχεδιασµού = > Κανόνες Smith & Mosier => Παράδειγµα κανόνα Smith & Mosier Οδηγίες Σχεδιασµού = > Οδηγίες σχεδιασµού της NASA 2.6 DATA DISPLAY: Coding 2.6/26 Color Coding for Data Categories When a user must distinguish rapidly among several discrete categories of data, particularly when data items are dispersed on a display, consider using a unique color to display the data in each category. Example: Different colors might be used effectively in a situation display to distinguish friendly, unknown, and hostile aircraft tracks, or alternatively to distinguish among aircraft in different altitude zones. Comment: Color is a good auxiliary code, where a multicolor display capability is available. Comment: Perhaps as many as 11 different colors might be reliably distinguished, or even more for trained observers. As a practical matter, however, it will prove safer to use no more than five different colors for category coding. Ευρυστικοί αλλά πρακτικοί κανόνες σχεδίασης οι οποίοι αποτελούν σε µεγάλο βαθµό απλοποίηση της παρουσίασης των κανόνων Smith & Mosier σε συνδυασµό µε τους χρυσούς κανόνες του Shneiderman. Έξι κατηγορίες: ιαφάνεια Προσαρµοστικότητα Προσανατολισµός χρήστη Υποβοήθηση καλής απόδοσης του συστήµατος Προστασία της ακεραιότητας του συστήµατος Έλεγχος συστήµατος και διαλόγων από το χρήστη ιαφάνεια Η διεπιφάνεια πρέπει να είναι κατά το δυνατόν διαφανής, δηλαδή να µην γίνεται αντιληπτή για τον χρήστη: Ό διάλογος και η πληροφορία που θα παρουσιαστεί, πρέπει να αφορά στην εργασία του χρήστη και να µην περιέχει όρους του λογισµικού Η διάταξη των αντικειµένων (σε µενού, πίνακες κλπ) πρέπει να αντικατοπτρίζει την λογική ακολουθία της εργασίας του χρήστη Οι δυνατότητες του συστήµατος (χρήση πολυµέσων, πολλαπλών χρωµάτων κλπ) πρέπει να γίνεται µε µοναδικό κριτήριο τη διευκόλυνση του χρήστη και όχι την παρουσίαση των τεχνικών δυνατοτήτων του συστήµατος ιαφάνεια => Προφανείς και αναµενόµενες ιδιότητες διεπιφάνειας Οι κωδικοποιήσεις, ακρωνύµια, εντολές και εικονικές αναπαραστάσεις πρέπει να ανταποκρίνονται στις συνήθειες και την προηγούµενη εµπειρία των χρηστών και των εργασιών τους. Η σχεδίαση πρέπει να στηρίζεται σε γνωστές ήδη έννοιες και µεθόδους του χρήστη ώστε να µειωθούν οι δυσκολίες εκµάθησης και συγκράτησης της γνώσης χρήσης του συστήµατος. Η υπάρχουσα γνώση µπορεί να προέρχεται από τον προηγούµενο τρόπο εκτέλεσης της εργασίας ή από το γενικό πολιτισµικό υπόβαθρο του χρήστη, από εµπειρία χρήσης προηγούµενων εκδόσεων του συστήµατος ή άλλων συστηµάτων. Η χρησιµοποιούµενη ορολογία, γλώσσα και εικονικές αναπαραστάσεις θα πρέπει να είναι συµβατές µε το πλαίσιο αναφοράς και τις προσδοκίες του χρήστη.

ιαφάνεια => Συνέπεια Η αναπαράσταση των παρακάτω στοιχείων θα πρέπει να γίνει κατά συνεπή (οµοιόµορφο) τρόπο οπουδήποτε στην διεπιφάνεια ώστε το σύστηµα να έχει προβλέψιµη συµπεριφορά. εικονίδια, θέση τίτλων, µενού, µηνύµατα, σχήµα δροµέα, χρωµατικοί κώδικες, ετικέτες, ακρωνύµια, συντοµεύσεις, εντολές και πλήκτρα εντολών, µηνύµατα σφάλµατος. Προσαρµοστικότητα Το σύστηµα θα πρέπει να αποδέχεται τη διαφορετικότητα των χρηστών και να προβλέπει κατά το δυνατόν τις ενέργειες του χρήστη. Η δυνατότητα εναλλακτικών εντολών ή συντοµεύσεων ώστε να ικανοποιούνται και οι αρχάριοι ή περιστασιακοί χρήστες αλλά και οι έµπειροι. Το σύστηµα θα πρέπει να προβλέπει τις ενέργειες του χρήστη ώστε να επιτυγχάνεται λιγότερη επιβάρυνση του. Π.χ. σε µία φόρµα ο δροµέας θα πρέπει να τοποθετείται στο πρώτο και πιο πιθανό πεδίο εισόδου. Όταν ένα πεδίο συµπληρωθεί, ο δροµέας θα πρέπει να προχωράει αυτόµατα στο επόµενο πεδίο. Αν σε κάποιο πεδίο υπάρχει µια συνήθης τιµή που ο χρήστης αναµένεται να εισάγει συχνά, αυτή θα πρέπει να τοποθετείται στο πεδίο σαν προκαθορισµένη τιµή Προσανατολισµός χρήστη Υποβοήθηση καλής απόδοσης του συστήµατος Θα πρέπει σε κάθε στιγµή το σύστηµα να παρέχει πληροφορίες για το πού βρίσκεται ο χρήστης, τι µπορεί να κάνει και πώς να προχωρήσει από το σηµείο αυτό. Ύπαρξη επεξηγηµατικού τίτλου της οθόνης σε σταθερή θέση. Χρήση γενικού πλάνου της εφαρµογής (site map) µε ένδειξη της σχετικής θέσης του χρήστη, Η ύπαρξη γενικών επιλογών σε σταθερή θέση παρέχει αίσθηση σταθερής αναφοράς στον χρήστη. Η παροχή βοήθειας σχετικής µε την τρέχουσα δραστηριότητα και η προσφορά βοήθειας µετά από επαναλαµβανόµενα λάθη. Η δυνατότητα διακοπής ή αναίρεσης της τρέχουσας ενέργειας Η έξοδος από το σύστηµα ή από µια δραστηριότητα θα πρέπει να είναι εύκολη από οποιοδήποτε σηµείο. Ηαπλότητα της διεπιφάνειας επιτρέπει την αποδοτική εκτέλεση εργασιών. Η ιεραρχία ενεργειών ελέγχου δεν θα πρέπει να υπερβαίνει τα 3 επίπεδα. Η χρήση συντοµεύσεων και ακρωνυµίων θα πρέπει να µην η κύρια επιλογή ή πρακτική αντίστοιχα Περιττολογίες και µακριές εκφράσεις δυσκολεύουν τον χρήστη Οι µονάδες µέτρησης που χρησιµοποιούνται πρέπει να είναι γνωστές στον χρήστη και να µην χρειάζονται µετατροπές Η οµαδοποίηση των εντολών θα πρέπει να γίνεται µε βάση κάποιο σαφές χαρακτηριστικό γνώρισµα, όπως λειτουργικότητα.

Απόδοση Συστήµατος => ιάταξη και περιεχόµενο οθονών Απόδοση Συστήµατος => Ανάδραση Η µορφή και δοµή των οθονών θα πρέπει να παραµένει κατά το δυνατόν σταθερή σε ολόκληρη την διεπιφάνεια. Η χρήση τεχνικών για την εστίαση της προσοχής του χρήστη (χρωµατική αναστροφή, υπογράµµιση, κλπ) να χρησιµοποιούνται µε µέτρο. Σε κρίσιµες εργασίες η πυκνότητα πληροφορίας στην οθόνη να είναι χαµηλή. Π.χ. σε οθόνες µε µηνύµατα για καταστάσεις ανάγκης πυκνότητα πληροφορίας < 25%. Πρέπει να αποφεύγεται χρωµατική ρύπανση από υπερβολική χρήση χρωµάτων. Πάνω από 4 χρώµατα ανά οθόνη, κουράζουν το χρήστη. Πληροφορίες που αφορούν την ίδια εργασία => στην ίδια οθόνη. Η διάταξη των πληροφοριών να είναι σύµφωνη µε την προβλεπόµενη κίνηση του δροµέα και της µατιάς του χρήστη Π.χ. εντολές ελέγχου πλοήγησης στο κάτω µέρος της οθόνης. Ο χρήστης πρέπει να λαµβάνει συνεχώς πληροφορίες που του γνωστοποιούν την τρέχουσα κατάσταση του συστήµατος. Π.χ. η καθυστέρηση µιας εκτύπωσης ή η αδυναµία εκτέλεσης αιτηθείσας εργασίας θα πρέπει να του γνωστοποιούνται άµεσα. Αν επιλεγεί κάποιο αντικείµενο, αυτό πρέπει να τονίζεται. Όταν ολοκληρωθεί µια εργασία και παραχθούν αποτελέσµατα, αυτά πρέπει να γίνονται άµεσα γνωστά στον χρήστη. Εσφαλµένες εντολές ή δεδοµένα θα πρέπει να προκαλούν άµεσα κατατοπιστικά µηνύµατα. Μήνυµα προόδου εργασίας συστήµατος για εργασίες που διαρκούν πάνω από 10 sec Xρήση ειδικού συµβόλου δροµέα για εργασίες που διαρκούν µεταξύ 1secκαι 10 sec Προστασία ακεραιότητας του συστήµατος Να καταβάλλεται προσπάθεια ώστε να προστατεύονται τα δεδοµένα του συστήµατος από επικίνδυνες (ηθεληµένες ή εσφαλµένες) ενέργειες του χρήστη. Απενεργοποίηση επιλογών στα menu υνατότητα αναίρεσης εσφαλµένων ενεργειών (undo) του χρήστη σε σηµαντικό αριθµό βηµάτων Η προκαθορισµένη επιλογή δεν πρέπει να είναι ποτέ η επικίνδυνη επιλογή Παροχή επεξηγήσεων και βοήθειας να είναι ανά πάσα στιγµή εφικτή Ακεραιότητας συστήµατος => Παροχή βοήθειας Η βοήθεια πρέπει να είναι πολλαπλών επιπέδων. Στην αρχή να είναι συνοπτική και να υπεισέρχεται σε λεπτοµέρειες µετά από απαίτηση του χρήστη. Η προσφυγή στην παρεχόµενη βοήθεια από τον χρήστη πρέπει να είναι αποτέλεσµα εύκολης, απλής και τυποποιηµένης ενέργειας. Η παρεχόµενη βοήθεια πρέπει να προσαρµόζεται στις τρέχουσες κάθε φορά συνθήκες. Υπό συνθήκες επαναλαµβανόµενων εσφαλµένων ενεργειών του χρήστη, να είναι δυνατή η αυτόµατη επίκληση αντίστοιχης βοήθειας. Η επιστροφή στο σύνηθες περιβάλλον αλληλεπίδρασης (µετά από χρήση ή αυτόµατη επίκληση βοήθειας) πρέπει να είναι εύκολη και προφανής.

Έλεγχος του συστήµατος και του διαλόγου από τον χρήστη Οχρήστης ενός υπολογιστικού συστήµατος επιθυµεί να αισθάνεται ότι η αλληλεπίδραση γίνεται υπό τον έλεγχο του. Ο ρυθµός πρέπει να καθορίζεται από τον χρήστη Πρέπει να διατίθενται πολλαπλά µέσα για την επίτευξη των στόχων του χρήστη. Η χρήση εργαλείων αναζήτησης και η δυνατότητα διαχείρισης των πόρων της οθόνης είναι µέσα ελέγχου. Η χρήση συντοµεύσεων εντολών καθώς και ισχυρής γλώσσας εντολών παρέχει πρόσθετες δυνατότητες στον χρήστη. Η χρήση συντοµεύσεων (π.χ. function keys) πρέπει να καλύπτει συχνά επαναλαµβανόµενες ακολουθίες εντολών. εν πρέπει ο χρήστης να υποχρεώνεται στην επόµενη ενέργεια. Έλεγχος του συστήµατος => Εισαγωγή δεδοµένων Πρέπει να παρέχονται οδηγίες στον χρήστη για τον τύπο και τους περιορισµούς που αφορούν τα εισαγόµενα στοιχεία. Προκαθορισµένες τιµές (default values) όταν είναι προβλέψιµη η πιο πιθανή τιµή ενός πεδίου Ποτέ ένα στοιχείο δεν πρέπει να ζητείται από τον χρήστη περισσότερες από µια φορές. Η εισαγωγή στοιχείων θα πρέπει πάντα να γίνεται µε το ρυθµό που απαιτεί ο χρήστης. Οι µέθοδοι εισαγωγής στοιχείων θα πρέπει να είναι σταθεροί σε όλη την εφαρµογή. Έλεγχος του συστήµατος => Μηνύµατα σφάλµατος Έλεγχος του συστήµατος => Μηνύµατα σφάλµατος: Επιλέξτε µήνυµα Τα µηνύµατα σφάλµατος θα πρέπει να έχει πολλαπλά επίπεδα επεξήγησης, ώστε να είναι δυνατές περαιτέρω διευκρινίσεις. Τα µηνύµατα σφάλµατος θα πρέπει να είναι σύντοµα και διατυπωµένα κατά τρόπο ουδέτερο, χωρίς χρήση προσβλητικής ή σκωπτικής διάθεσης. Η ορολογία των µηνυµάτων αυτών, πρέπει να είναι σχετική µε την εργασία του χρήστη και κατά το δυνατόν να µην χρησιµοποιεί ορολογία του συστήµατος. Τα µηνύµατα ακόµη θα πρέπει να είναι εποικοδοµητικά, ώστε να παρέχουν οδηγίες για ανάνηψη από την κατάσταση σφάλµατος. (Α) Προσοχή!! Γεµάτη µνήµη, προτείνεται να σώσετε το αρχείο πριν προχωρήσετε [Ακύρωση] [ΟΚ-Σώσε αρχείο], (Β) Προσοχή!! Γεµάτη µνήµη, το σύστηµα θα σώσει το αρχείο σας [ΟΚ] (Α) "Να αποθηκευτεί το αρχείο "ΧΥΖ" στο δίσκο ; " (Β) "Να αποθηκευτεί η εικόνα "ΧΥΖ ; "

Άσκηση: Να κρίνετε τη διεπιφάνεια