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

Human Interface Guidelines (Κανόνες Σχεδιασμού) Γενικοί και ειδικοί κανόνες/εισηγήσεις σχεδίασης συστημάτων ▫ Βελτίωση εμπειρίας/ ικανοποίησης χρήστη με το να γίνονται οι διαφάνειες (interfaces) πιο διαισθητικές (intuitive), συνεπείς (consistent.), ευκολότερες στην μάθηση (Learnable) ▫ Συνήθως οι οδηγίες είναι αποτέλεσμα μελετών στην περιοχή HCI (usability studies), αλλά και σε τυχαίες μετατροπές από συγκεκριμένους δημιουργούς πλατφόρμων. 27/10/2014Τμήμα Πληροφορικής 2

Συλλογές κανόνων σχεδιασμού  Από διάφορες εταιρίες και οργανισμούς  Microsoft, IBM, Sun, Apple, NASA, κλπ  Οδηγός της NASA  γενικού σκοπού  ανεξάρτητος περιβάλλοντος αλληλεπίδρασης  σύγχρονος και περιορισμένος σε όγκο  Οργάνωση σε 3 μέρη  Βασικές οδηγίες (ανθρωποκεντρικός)  Σχεδιασμό στοιχείων (χρώμα, εικονίδια, κλπ)  Διάταξη οθονών 27/10/2014Τμήμα Πληροφορικής 3

Γενικά χαρακτηριστικά διεπιφάνειας  Να είναι διαφανής  Να παρουσιάζει προσαρμοστικότητα  Να υποβοηθάει την πλοήγηση  Να έχει απλότητα σχεδιασμού  Να παρέχει βοήθεια  Να αφήνει τον έλεγχο στο χρήστη 27/10/2014Τμήμα Πληροφορικής 4

Οδηγίες σχεδιασμού [NASA] : 1. Διαφάνεια  Η διεπιφάνεια πρέπει να είναι ανύπαρκτη για τον χρήστη:  Ο διάλογος και η πληροφορία που θα παρουσιαστεί, πρέπει να αφορά στην εργασία του χρήστη και να μην περιέχει όρους του λογισμικού  Η διάταξη των αντικειμένων (σε μενού, πίνακες κλπ) πρέπει να αντικατοπτρίζει την λογική ακολουθία της εργασίας του χρήστη  οι δυνατότητες του συστήματος (χρήση πολυμέσων, πολλαπλών χρωμάτων κλπ) πρέπει να γίνεται με μοναδικό κριτήριο τη διευκόλυνση του χρήστη και όχι την παρουσίαση των τεχνικών δυνατοτήτων του συστήματος 27/10/2014Τμήμα Πληροφορικής 5

2. Προφανείς και αναμενόμενες ιδιότητες διεπιφάνειας  Οι κωδικοποιήσεις, ακρωνύμια, εντολές και εικονικές αναπαραστάσεις πρέπει να ανταποκρίνονται στις συνήθειες και την προηγούμενη εμπειρία των χρηστών και των εργασιών τους.  Η σχεδίαση πρέπει να στηρίζεται σε γνωστές ήδη έννοιες και μεθόδους του χρήστη και θα μειωθούν οι δυσκολίες εκμάθησης και συγκράτησης της γνώσης χρήσης του συστήματος.  Η υπάρχουσα γνώση μπορεί να προέρχεται από τον προηγούμενο τρόπο εκτέλεσης της εργασίας ή από το γενικό πολιτισμικό υπόβαθρο του χρήστη, από εμπειρία χρήσης προηγούμενων εκδόσεων του συστήματος ή άλλων συστημάτων.  Η χρησιμοποιούμενη ορολογία, γλώσσα και εικονικές αναπαραστάσεις θα πρέπει να είναι συμβατές με το πλαίσιο αναφοράς και τις προσδοκίες του χρήστη. 27/10/2014Τμήμα Πληροφορικής 6

3. Συνέπεια σε όλη την διεπιφάνεια  Η αναπαράσταση των παρακάτω στοιχείων θα πρέπει να γίνει κατά συνεπή (ομοιόμορφο) τρόπο οπουδήποτε στην διεπιφάνεια: ώστε το σύστημα να έχει προβλέψιμη συμπεριφορά. 27/10/2014Τμήμα Πληροφορικής 7  εικονίδια,  θέση τίτλων,  μενού,  μηνύματα,  σχήμα δρομέα,  χρωματικοί κώδικες,  ετικέτες,  ακρωνύμια,  συντομεύσεις,  εντολές και πλήκτρα εντολών,  μηνύματα σφάλματος.

4. Προσαρμοστικότητα  Το σύστημα θα πρέπει να αποδέχεται παρεκκλίσεις στις εντολές του χρήστη, και να προβλέπει κατά το δυνατόν τις ενέργειες του χρήστη.  Π.Χ. Η δυνατότητα εναλλακτικών εντολών ή συντομεύσεων. Οι εντολές exit, signoff, logoff, bye θα πρέπει όλες να έχουν το ίδιο αποτέλεσμα και να συνεπάγονται εκ μέρους του συστήματος την ίδια απόκριση. Π.χ την απόκριση "Επιβεβαιώστε έξοδο από το σύστημα [ΟΚ] [Άκυρο]". 27/10/2014Τμήμα Πληροφορικής 8

5. Πρόβλεψη ενεργειών του χρήστη  Το σύστημα θα πρέπει να προβλέπει τις ενέργειες του χρήστη ώστε να επιτυγχάνεται λιγότερη επιβάρυνση του.  Π.χ. Σε μία φόρμα ο δρομέας θα πρέπει να τοποθετείται στο πρώτο και πιο πιθανό πεδίο εισόδου. Όταν ένα πεδίο συμπληρωθεί, ο δρομέας θα πρέπει να προχωράει αυτόματα στο επόμενο πεδίο.  Αν σε κάποιο πεδίο υπάρχει μια συνήθης τιμή που ο χρήστης αναμένεται να εισάγει συχνά, αυτή θα πρέπει να τοποθετείται στο πεδίο σαν προκαθορισμένη τιμή 27/10/2014Τμήμα Πληροφορικής 9

6. Υποστήριξη πλοήγησης  Θα πρέπει σε κάθε στιγμή το σύστημα να παρέχει πληροφορίες για το πού βρίσκεται ο χρήστης, τι μπορεί να κάνει και πώς να προχωρήσει από το σημείο αυτό.  ύπαρξη επεξηγηματικού τίτλου της οθόνης σε σταθερή θέση.  χρήση γενικού πλάνου της εφαρμογής (site map) με ένδειξη της σχετικής θέσης του χρήστη,  η ύπαρξη γενικών επιλογών σε σταθερή θέση παρέχει αίσθηση σταθερής αναφοράς στον χρήστη.  η παροχή βοήθειας σχετικής με την τρέχουσα δραστηριότητα και η προσφορά βοήθειας μετά από επαναλαμβανόμενα λάθη  η δυνατότητα διακοπής ή αναίρεσης της τρέχουσας ενέργειας πρέπει πάντα να είναι δυνατή.  η έξοδος από το σύστημα ή από μια δραστηριότητα θα πρέπει να είναι εύκολη από οποιοδήποτε σημείο. 27/10/2014Τμήμα Πληροφορικής 10

7. Απλότητα συστήματος  Η απλότητα της διεπιφάνειας επιτρέπει την αποδοτική εκτέλεση εργασιών.  η ιεραρχία ενεργειών ελέγχου δεν θα πρέπει να υπερβαίνει τα 3 επίπεδα.  η χρήση συντομεύσεων και ακρωνυμίων θα πρέπει κατά το δυνατόν να αποφεύγεται  περιττολογίες και μακριές εκφράσεις δυσκολεύουν τον χρήστη.  οι μονάδες μέτρησης που χρησιμοποιούνται πρέπει να είναι γνωστές στον χρήστη και να μην χρειάζονται μετατροπές,  η ομαδοποίηση των εντολών θα πρέπει να γίνεται με βάση κάποιο σαφές χαρακτηριστικό γνώρισμα, όπως η λειτουργικότητα. 27/10/2014Τμήμα Πληροφορικής 11

8. Διάταξη οθονών  Η μορφή και δομή των οθονών θα πρέπει να παραμένει κατά το δυνατόν σταθερή σε ολόκληρη την διεπιφάνεια.  Η χρήση τεχνικών για την εστίαση της προσοχής του χρήστη (αναστροφή χρωματική, υπογράμμιση, κλπ) να χρησιμοποιούνται με μέτρο.  Σε κρίσιμες εργασίες η πυκνότητα πληροφορίας στην οθόνη να είναι χαμηλή. Π.χ. σε οθόνες με μηνύματα για καταστάσεις ανάγκης η πυκνότητα πληροφορίας < 25%.  Πρέπει να αποφεύγεται χρωματική ρύπανση από υπερβολική χρήση χρωμάτων. Πάνω από 4 χρώματα ανά οθόνη, κουράζουν το χρήστη.  Πληροφορίες που αφορούν την ίδια εργασία : στην ίδια οθόνη.  Η διάταξη των πληροφοριών να είναι σύμφωνη με την προβλεπόμενη κίνηση του δρομέα και της ματιάς του χρήστη, Π.χ. εντολές ελέγχου πλοήγησης στο κάτω μέρος της οθόνης.. 27/10/2014Τμήμα Πληροφορικής 12

9. Ανάδραση  Ο χρήστης πρέπει να λαμβάνει συνεχώς πληροφορίες που του γνωστοποιούν την τρέχουσα κατάσταση του συστήματος.  Π.χ. η καθυστέρηση μιας εκτύπωσης ή η αδυναμία εκτέλεσης αιτηθείσας εργασίας θα πρέπει να του γνωστοποιούνται άμεσα.  Αν επιλεγεί κάποιο αντικείμενο, αυτό πρέπει να τονίζεται.  Όταν ολοκληρωθεί μια εργασία και παραχθούν αποτελέσματα, αυτά πρέπει να γίνονται άμεσα γνωστά στον χρήστη.  Εσφαλμένες εντολές ή δεδομένα θα πρέπει να προκαλούν άμεσα κατατοπιστικά μηνύματα.  Μήνυμα προόδου εργασίας συστήματος για εργασίες που διαρκούν πάνω από 10"  χρήση ειδικού συμβόλου δρομέα για εργασίες που διαρκούν μεταξύ 1" και 10". 27/10/2014Τμήμα Πληροφορικής 13

10. Προστασία από επικίνδυνες ενέργειες του χρήστη  Κάθε προσπάθεια πρέπει να γίνεται ώστε να προστατεύονται τα δεδομένα του συστήματος από επικίνδυνες (ηθελημένες ή εσφαλμένες) ενέργειες του χρήστη.  Δυνατότητα αναίρεσης εσφαλμένων ενεργειών (undo) και παροχή επεξηγήσεων και βοήθειας να παρέχονται συνεχώς.  Η προκαθορισμένη επιλογή δεν πρέπει να είναι ποτέ η επικίνδυνη επιλογή.  Αναίρεση ενεργειών: κάθε ενέργεια του χρήστη να είναι αναστρέψιμη μέσω επιλογής αναίρεσης σε σημαντικό αριθμό 27/10/2014Τμήμα Πληροφορικής 14

11. Παροχή βοήθειας  Βοήθεια πρέπει να παρέχεται συνεχώς.  Η βοήθεια πρέπει να είναι πολλαπλών επιπέδων.  Στην αρχή να είναι συνοπτική και να υπεισέρχεται σε λεπτομέρειες μετά από απαίτηση του χρήστη.  Η προσφυγή στην παρεχόμενη βοήθεια από τον χρήστη πρέπει να είναι αποτέλεσμα εύκολης, απλής και τυποποιημένης ενέργειας.  Η παρεχόμενη βοήθεια πρέπει να προσαρμόζεται στις τρέχουσες κάθε φορά συνθήκες.  Υπό συνθήκες επαναλαμβανόμενων εσφαλμένων ενεργειών του χρήστη, να είναι δυνατή η αυτόματη επίκληση αντίστοιχης βοήθειας.  η επιστροφή στο σύνηθες περιβάλλον αλληλεπίδρασης πρέπει να είναι εύκολη και προφανής. 27/10/2014Τμήμα Πληροφορικής 15

12. Έλεγχος από τον χρήστη  Ο χρήστης ενός υπολογιστικού συστήματος επιθυμεί να αισθάνεται ότι η αλληλεπίδραση γίνεται υπό τον έλεγχο του.  Ο ρυθμός πρέπει να καθορίζεται από τον χρήστη  πρέπει να διατίθενται πολλαπλά μέσα για την επίτευξη των στόχων του χρήστη.  Η χρήση εργαλείων αναζήτησης και η δυνατότητα διαχείρισης των πόρων της οθόνης είναι μέσα ελέγχου.  η χρήση συντομεύσεων εντολών καθώς και ισχυρής γλώσσας εντολών παρέχει πρόσθετες δυνατότητες στον χρήστη.  Η χρήση συντομεύσεων (π.χ. function keys) πρέπει να καλύπτει συχνά επαναλαμβανόμενες ακολουθίες εντολών.  Δεν πρέπει ο χρήστης να υποχρεώνεται στην επόμενη ενέργεια. 27/10/2014Τμήμα Πληροφορικής 16

13. Εισαγωγή δεδομένων  Πρέπει να παρέχονται οδηγίες στον χρήστη για τον τύπο και τους περιορισμούς που αφορούν τα εισαγόμενα στοιχεία.  Προκαθορισμένες τιμές (default values) όταν είναι προβλέψιμη η πιο πιθανή τιμή ενός πεδίου  Ποτέ ένα στοιχείο δεν πρέπει να ζητείται από τον χρήστη περισσότερες από μια φορές.  Η εισαγωγή στοιχείων θα πρέπει πάντα να γίνεται με το ρυθμό που απαιτεί ο χρήστης.  Οι μέθοδοι εισαγωγής στοιχείων θα πρέπει να είναι σταθεροί σε όλη την εφαρμογή. 27/10/2014Τμήμα Πληροφορικής 17

14. Μηνύματα σφάλματος  Τα μηνύματα σφάλματος θα πρέπει να έχει πολλαπλά επίπεδα επεξήγησης, ώστε να είναι δυνατές περαιτέρω διευκρινίσεις.  Τα μηνύματα σφάλματος θα πρέπει να είναι σύντομα και διατυπωμένα κατά τρόπο ουδέτερο, χωρίς χρήση προσβλητικής ή σκωπτικής διάθεσης.  Η ορολογία των μηνυμάτων αυτών, πρέπει να είναι σχετική με την εργασία του χρήστη και κατά το δυνατόν να μην χρησιμοποιεί ορολογία του συστήματος.  Τα μηνύματα ακόμη θα πρέπει να είναι εποικοδομητικά, ώστε να παρέχουν οδηγίες για ανάνηψη από την κατάσταση σφάλματος. 27/10/2014Τμήμα Πληροφορικής 18

Χρυσοί κανόνες (Shneiderman) (1) ομοιομορφία και συνέπεια στην διεπιφάνεια και αποφυγή απροσδόκητης συμπεριφοράς του συστήματος (2) σύντομοι χειρισμοί για τη διευκόλυνση των εμπείρων χρηστών (3) συνεχής ανάδραση της κατάστασης του συστήματος(4) οι υπο-διάλογοι πρέπει να ολοκληρώνονται σε λίγα βήματα. 27/10/2014Τμήμα Πληροφορικής 19

Χρυσοί κανόνες (Shneiderman) (5) πρόβλεψη για σφάλματα των χρηστών(6) δυνατότητα αναίρεσης μιας ή περισσότερων ενεργειών (7) ο έλεγχος της αλληλεπίδρασης θα πρέπει να είναι από την πλευρά του χρήστη και όχι του συστήματος (8) Το φορτίο βραχύχρονης μνήμης του χρήστη θα πρέπει να ελαχιστοποιηθεί 27/10/2014Τμήμα Πληροφορικής 20

Τμήμα Πληροφορικής Website Design To choose what happens on each page — and how many pages exist on your site — you must balance, helping the users accomplish their current task and at the same time making certain the tools for what they need to do next are also available. To achieve this balance, a page must do two things: 1.Help the user accomplish one discrete task. 2.Make the next step easy to access. 27/10/

Τμήμα Πληροφορικής Linking the Chain User tasks are like links in a chain And each page on a Web site is like a window that shows only so much of the chain. 27/10/

Τμήμα Πληροφορικής Linking the chain  When you design the page, you are designing a window that shows both a link in the chain, as well as the connected links. Gmail example  When you first come into Gmail, your primary task is to understand what s you have and quickly act on them.  When you open an , you are reading it first, responding (or filing, or deleting) second.  While responding to that appears to happen on the same “page,” with a trick of modern web technology, the page is sufficiently transformed to be considered a new page. 27/10/

Τμήμα Πληροφορικής There are three types of pages on the Web:  Navigation pages help users determine where to find what they want, and give them access to it.  Consumption pages allow users to consume content.  Interaction pages let users enter and manipulate data. Each type of page is optimized for a different kind of user task. Focus the Page on the User’s Primary Task 27/10/

Τμήμα Πληροφορικής Navigation pages Navigation pages exist to send you somewhere else. Homepages, the business section at the New York Times, a list of search results, the Gmail inbox, a gallery of thumbnails All of the above pages dedicate their lives to making you go away. Examples: Gmail, Yahoo! Homepage, Phileleftheros Other examples??? 27/10/

Τμήμα Πληροφορικής  Consumption pages are the “somewhere else” you usually go to. These are places where articles are read, videos watched, photos viewed, and mp3s played. Other examples you know??? Consumption Pages 27/10/

Τμήμα Πληροφορικής Interaction Pages  Interaction pages are places where people want to type, drag, slide, push, poke, edit, and delete information. This can be something as simple as Google’s homepage with one text input, or something as complex as word processing with Google Docs  For these kinds of pages, focus on making them easy to use 27/10/

Τμήμα Πληροφορικής Mixing Page Types  But, my page is all three?!?!? Maybe.  Regardless of how much you think your users want to do on the page, there’s one primary thing, that’s more important than everything else that your visitors want to do, and that task is what the page’s design needs to support first and foremost.  Google Maps 27/10/

Τμήμα Πληροφορικής  When moving from box to page, you should match a user’s tasks with the appropriate page type.  For example, if the user’s task is to choose an article to read, then you need a navigation page. Book example Match discrete tasks to discrete pages 27/10/

Τμήμα Πληροφορικής  We always have to balance clarity with efficiency in our design.  Each page may be devoted to one primary task, but that task may have subtasks or related tasks that make sense to group together closely.  Or sometimes, a task may be too small to really deserve an entire page to itself (or may be a subtask disguised as a task!). Group Like Tasks Together 27/10/

Τμήμα Πληροφορικής When deciding how many pages to create for a group of tasks, consider these factors:  The audience’s technical sophistication  The audience’s bandwidth  The amount of information on a page  The task the audience is trying to accomplish  How often the audience will complete the task In interface design, there are three approaches to grouping interaction tasks: Wizards, Control Panels, and Toolbars. Group Like Tasks Together 27/10/

Τμήμα Πληροφορικής Wizards: Many boxes, many pages  When users want to accomplish a goal that has many steps. Wizards are good at making sure you don’t miss a step.  When the steps must be completed in order. Wizards are linear, so it’s impossible to complete them any other way.  When the task is seldom performed. Wizards can seem slow and plodding, so they are best used in tasks you do only once in a while, like setting up a printer. 27/10/

Τμήμα Πληροφορικής Wizards are a good choice for Web design under all the conditions previously listed, as well as when the following conditions are present:  The audience is not technically savvy and is likely to be confused by a page with a lot of choices on it. A Web site can have novice users, and a wizard makes complex tasks seem easy.  Bandwidth is low and downloading a single big page could take forever, or the tasks require several server calls,9 which would also slow the page’s load.  The task has several steps in it, performed only once a visit, such as checkout. Wizards: Many boxes, many pages 27/10/

Τμήμα Πληροφορικής  A wizard is not the only choice. Just because your task analysis shows several discrete tasks doesn’t mean you don’t have other choices.  A complex layout with many steps on one page is called a control panel  Control panels are good when wizards are not—when the audience is technically savvy and on a fast download. Control panels: Many boxes, one page 27/10/

Τμήμα Πληροφορικής Control panels are also a good choice when the following conditions are met:  The application is easy to understand, and the choices are straight forward.  The elements gain context by being placed next to each other.  The interface is used often enough that the audience will appreciate the convenience of a single page. Control panels are often used in situations in which occasional tweaking is required, such as configuring a program. If you have several related tasks, you may be able to group them on one page as a control panel. Then the group of tasks becomes one task. Control panels: Many boxes, one page 27/10/

Τμήμα Πληροφορικής  You have to make similar choices when you design pages for your content organization.  Just because you have a category doesn’t mean it should be a page.  Some levels of a category only exist to provide an explanation of organizational logic. The important thing to keep in mind when deciding which pages should exist is that each page should have a purpose. Ask yourself, “What is this page doing?” and if you don’t have a good answer, get rid of it. When a box doesn’t need a page 27/10/

 Βασισμένο στο υλικό από το κεφάλαιο 7 του βιβλίου  Additional Resources:  HCI Standards: A Mixed Blessing by Elizabeth Buie  NASA - Human-Computer Interface (HCI) Design Guide You can find the above documents in the wiki. Καλή συνέχεια 27/10/2014Τμήμα Πληροφορικής 37