ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ ΣΧΟΛΗ ΘΕΤΙΚΩΝ ΕΠΙΣΤΗΜΩΝ ΤΜΗΜΑ ΕΠΙΣΤΗΜΗΣ ΥΠΟΛΟΓΙΣΤΩΝ ΜΑΘΗΜΑ ΕΠΙΛΟΓΗΣ ΗΥ-464 ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ Διδάσκων: Κωνσταντίνος Στεφανίδης
J. Johnson, (2008) GUI Bloopers 2.0 Common User Interface Design Don ts and Dos Publisher: Morgan Kaufmann Διαφάνεια 2
Ένα σχεδιαστικό λάθος bloopers : λάθη που κάνουν συχνά οι προγραμματιστές όταν σχεδιάζουν γραφικές διεπαφές (GUIs) Ο σκοπός είναι όχι να κοροϊδέψουμε λανθασμένες σχεδιάσεις να επισημάνουμε κοινά λάθη να εξηγήσουμε γιατί συμβαίνουν αυτά τα λάθη και πώς να τα αποφύγουμε και να προειδοποιήσουμε προγραμματιστές διεπαφών, τους σχεδιαστές διεπαφών και τους managers Διαφάνεια 3
προς αποφυγήν! Γιατί είναι: Κοινά Ενοχλητικά Κοστίζουν Συμπληρωματικά στην θεωρία της Επικοινωνίας Ανθρώπου Υπολογιστή προειδοποιώντας για κοινά σχεδιαστικά λάθη Διαφάνεια 4
Ελέγχου της διεπαφής Πλοήγησης Κειμένου Γραφικής σχεδίασης και διάταξης Αλληλεπίδρασης Ανταπόκρισης Management Διαφάνεια 5
1. Εστιάστε στους χρήστες και τις εργασίες τους, όχι στην τεχνολογία Αυτή είναι η Αρχή Νούμερο Ένα, η Βασική Αρχή, η μητέρα όλων των αρχών από την οποία εξάγονται όλες οι υπόλοιπες αρχές σχεδίασης διεπαφών 2. Σκεφτείτε πρώτα τη λειτουργία και μετά την παρουσίαση Αυτό δεν σημαίνει «σχεδιάστε και υλοποιήστε πρώτα τη λειτουργικότητα και ανησυχείτε για τη διεπαφή αργότερα» Κάντε νοητικά μοντέλα, ανάλυση διεργασιών, αποφασίστε 3. Προσαρμοστείτε στην οπτική του χρήστη για τη διεργασία Παράδειγμα: Σκάκι Αφύσικες διεργασίες, λεξιλόγιο, περιορισμοί Εσωτερικά του προγράμματος Διαφάνεια 6
4. Σχεδιάστε για την κοινή περίπτωση Κάντε εύκολη την επίτευξη κοινών αποτελεσμάτων («το συνηθισμένο») Δύο τύποι «κοινών περιπτώσεων»: «πόσοι χρήστες θα χρειαστούν τη λειτουργία;» και «πόσο συχνά;» 5. Μην αποσπάτε τους χρήστες από τους στόχους τους Διεπαφές που αναγκάζουν τους χρήστες να σταματούν να σκέφτονται τους δικούς τους στόχους για να σκεφτούν για τη διεπαφή είναι σχεδιαστικές αποτυχίες (Krug 2005) 6. Διευκολύνετε την μάθηση Οπτική από έξω προς τα μέσα, συνέπεια, σαφήνεια, παροχή περιβάλλοντος χαμηλού ρίσκου Slide 7
7. Δίνετε πληροφορία, όχι απλώς δεδομένα Οπτική ιεράρχηση και εστίαση χρήστη, κατάλληλη σχεδίαση για εύκολη σάρωση με μια ματιά, σχεδιάζοντας για το μέσο, προσοχή στη λεπτομέρεια Η οθόνη ανήκει στον χρήση (μην μετακινείτε και ανατοποθετείτε πράγματα), διατηρήστε την αδράνεια της οθόνης 8. Σχεδιάστε για ανταπόκριση Ο πιο σπουδαίος παράγοντας στην ικανοποίηση χρηστών: Ταχύτητα (αντιλαμβανόμενη ταχύτητα) 9. Δοκιμάστε το στους χρήστες και μετά φτιάξτε το! Στόχος πληροφόρησης Κοινωνικός στόχος Slide 8
Τα πλαίσια επιλογής αντικαθιστούν κάποιες ενέργειες εισαγωγής δεδομένων και παρέχουν ένα γρήγορο τρόπο για την πραγματοποίηση πολλαπλών επιλογών Χρησιμοποιείτε πλαίσια επιλογής για περισσότερες από μια επιλογές Χρησιμοποιείτε πλαίσια επιλογής όταν οι χρήστες μπορούν να πραγματοποιήσουν μια ή περισσότερες επιλογές Χρησιμοποιείτε πλαίσια επιλογής ως διακόπτες Χρησιμοποιείτε πλαίσια επιλογής ως διακόπτες για την ενεργοποίηση ή απενεργοποίηση ενός χαρακτηριστικού Μπορείτε να έχετε μόνο ένα πλαίσιο επιλογής HY-464: Επικοινωνία Ανθρώπου - Μηχανής Διαφάνεια 10
Τα κουμπιά επιλογής, επίσης γνωστά ως option buttons, αντικαθιστούν πολλές ενέργειες εισαγωγής δεδομένων Χρησιμοποιείτε κουμπιά επιλογής για μια μοναδική επιλογή Χρησιμοποιείτε κουμπιά επιλογής όταν οι χρήστες πρέπει να διαλέξουν μια επιλογή από ένα σύνολο αμοιβαία αποκλειόμενων επιλογών Για παράδειγμα, για να επιλέξουν μια περίοδο πληρωμής, σε μια εφαρμογή για τη διαχείριση προσωπικού Δίνετε περιγραφικά ονόματα στα κουμπιά επιλογής Επιλέξτε ένα ξεκάθαρο και περιγραφικό όνομα για κάθε κουμπί επιλογής Για παράδειγμα, «Αποστολή Περιγραφής Μαθήματος» αντί για «Μάθημα» HY-464: Επικοινωνία Ανθρώπου - Μηχανής Διαφάνεια 11
Μπερδεύοντας τα checkboxes με τα radio buttons Ένα μόνο radio button Τα checkboxes σαν radio buttons Αμοιβαία αποκλειόμενα checkboxes Χρήση checkbox για μη-on/off ρύθμιση Χρήση κουμπιών εντολών σαν διακόπτες (toggles) Χρήση καρτελών (tabs) σαν radio buttons Αρνητικά checkboxes Διαφάνεια 12
Διαφάνεια 13
Κουνώντας τον σκύλο αντί για την ουρά του (πλάτυνση του περιέκτη για να χωρέσουν οι καρτέλες ) Καρτέλες στα αριστερά μας, καρτέλες στα δεξιά μας, καρτέλες παντού! Σντμες ετκτς! Καρτέλες που χορεύουν Διαφάνεια 14
Διαφάνεια 15
Ρυθμίζοντας την επεξεργασιμότητα αλλά όχι την εμφάνιση Το εργαλείο ανάπτυξης της διεπαφής (GUI toolkit) με άφησε να το κάνω Μα το απενεργοποίησα! Αφού οι ετικέτες είναι μόνο για labels, σωστά; (λάθος) Θέλω να διατηρήσω τη συνέπεια, πρέπει να μοιάζει με την άλλη οθόνη! Τα πλαίσια ελέγχου, κουμπιά επιλογής, μενού και πεδία κειμένου δεν πρέπει ποτέ να χρησιμοποιούνται για μη-επεξεργάσιμα δεδομένα. Το «γκριζάρισμα» (απενεργοποίηση) πρέπει να γίνεται με προσοχή Εξαίρεση / Αναγκαίο κακό: Πεδία κειμένου με μπάρα κύλισης για μεγάλα μηεπεξεργάσιμα κείμενα (μηνύματα ηλεκτρονικού ταχυδρομείου, συμφωνίες παραχώρησης άδειας) Διαφάνεια 16
Αντί για λίστες ή μενού κλπ. Ημερομηνίες, πολιτεία, χώρα, δεδομένες τιμές Μεγάλη πηγή λαθών: μετατροπές διεπαφών κειμένου (TTY) σε γραφικές (GUI) Διαφάνεια 17
Εύκολα στον προγραμματισμό, δύσκολα στην εισαγωγή Να δέχεστε τους συνηθισμένους τύπους δεδομένων (format) Να δέχεστε τους δικούς σας τύπους δεδομένων Προσοχή να μην απορρίπτετε έγκυρα δεδομένα (π.χ. ο ταχυδρομικός κώδικας στην Αγγλία επιτρέπει γράμματα) Κεφαλαία και πεζά θα πρέπει να είναι δεκτά χωρίς πρόβλημα Να παρέχετε κάποιο παράδειγμα Διαφάνεια 18
ή κακές προεπιλογές Εξαιρέσεις: Δεν υπάρχει λογική προεπιλογή ( π.χ. Άνδρας / Γυναίκα) Κοινωνική, πολιτική ή νομική απαίτηση Διαφάνεια 19
Παράθυρο ή σελίδα χωρίς τίτλο Εφαρμογές: έλλειψη τίτλου παραθύρου Στο διαδίκτυο: page not identified «Ίδιος τίτλος σε διαφορετικά παράθυρα» - παραλλαγές: Οι τίτλοι στα παράθυρα έχουν μόνο το όνομα της εφαρμογής Ο προγραμματιστής αντέγραψε τον κώδικα αλλά ξέχασε να αλλάξει τον τίτλο Ο προγραμματιστής δεν γνώριζε ότι ο τίτλος ήταν σε χρήση αλλού Ο προγραμματιστής νόμιζε πως ο τίτλος ταίριαζε Διαφάνεια 21
Η «οσμή» της πληροφορίας (information scent) Κουμπιά και σύνδεσμοι που αποσπούν Self-links (Σύνδεσμοι που οδηγούν στον εαυτό τους) στην μπάρα πλοήγησης στο μονοπάτι πλοήγησης Home > About Us > People αλλού Διαφάνεια 22
Apple s Final Cut Pro: Η εξαγωγή μιας εικόνας (καρέ) από ένα βίντεο, βελτιστοποιημένο για streaming απαιτεί 5 επίπεδα πλαισίων διαλόγου Save As Options... Options Options Options... Checkbox. OK OK OK OK OK Διαφάνεια 23
Ο γενικός κανόνας είναι: αποφύγετε πάνω από δύο επίπεδα πλαισίων διαλόγου. Ένα πλαίσιο διαλόγου μπορεί να ανοίξει άλλο ένα, αλλά πέρα από αυτό, οι χρήστες μπορεί να χάσουν το δρόμο τους Σημείωση 1: Αφορά μόνο πλαίσια διαλόγου Σημείωση 2: Κάποιοι τύποι πλαισίων διαλόγου δεν συμπεριλαμβάνονται στον παραπάνω κανόνα Επιλογή αρχείου (open, save as ), επιλογείς χρωμάτων ή ημερομηνίας κλπ. (οικειότητα χρήστη) Μηνύματα λαθών (δεν επιβαρύνουν την πλοήγηση με πολυπλοκότητα) Διαφάνεια 24
Ανταγωνιστικά πλαίσια αναζήτησης Ουπς! Λάθος αναζήτηση! Πανομοιότυπα πεδία αναζήτησης. Ποιο να επιλέξω; Χμ... Ποιο είναι το καλύτερο; Ο βέλτιστος αριθμός πεδίων αναζήτησης ανά σελίδα είναι 1 Αν χρειάζεστε μια ξεχωριστή λειτουργία αναζήτησης σχεδιάστε την να δείχνει εντελώς διαφορετική Διαφάνεια 25
Πλοήγηση Δεν υπάρχει τρόπος να πλοηγηθεί κανείς ελεύθερα στα αποτελέσματα Χωρίς αριθμό αποτελεσμάτων ή υπενθύμιση της αρχικής αναζήτησης Θορυβώδη αποτελέσματα αναζήτησης Οι χρήστες δεν εξετάζουν προσεκτικά τα αποτελέσματα, τα κοιτάζουν γρήγορα, συνεπώς: Δείξτε και τονίστε τα σημαντικά δεδομένα, ελαχιστοποιήστε την ανάγκη για κλικ Διαφάνεια 26
Εύκολα παραβλέψιμη πληροφορία Οι προγραμματιστές συχνά υποθέτουν πως αν η πληροφορία είναι στην οθόνη, οι χρήστες θα την δουν. Δεν είναι έτσι! Οι άνθρωποι παραβλέπουν πληροφορίες διαρκώς. Το αντιληπτικό μας σύστημα απορρίπτει περισσότερα πράγματα από αυτά που προσλαμβάνει. Αυτό δεν είναι πρόβλημα είναι ιδιότητα (That isn t a bug; it s a feature!) Συνηθισμένο ελάττωμα σχεδίασης: δεν επικεντρώνει την προσοχή του χρήστη Σε όλη την ιστορία, η προβληματική σχεδίαση έχει γίνει η αιτία οι άνθρωποι να παραβλέπουν σημαντικές πληροφορίες και να κάνουν λάθη μερικές φορές, σοβαρά Παραδείγματα: η θέση της ασφάλειας σε όπλα, η θέση των ταχυτήτων σε οχήματα, προειδοποιητικές λυχνίες σε σταθμούς ελέγχου ενός πυρηνικού εργοστασίου, εκτυπώσεις από συστήματα ελέγχου δικτύων, στάθμες βενζίνης και λαδιού σε αυτοκίνητα και αεροπλάνα, οι γραμμές προόδου σε λογισμικό Διαφάνεια 28
Παραλλαγή A: Υπερβολικά μικρό ή απλό Παραλλαγή B: Όχι εκεί που κοιτάζει ο χρήστης Παραλλαγή Γ: Θαμμένο στο θόρυβο Εισαγωγή ονόματος αρχείου και πάτημα του ENTER Εισαγωγή ονόματος χρήστη και πάτημα του ENTER Όνομα αρχείου: Όνομα χρήστη: Διαφάνεια 29
Κατασκευάστε μια οπτική ιεραρχία Κάντε την σημαντική πληροφορία μεγαλύτερη Το μέγεθος μετράει. Αλλά είναι το σχετικό μέγεθος που μετράει Βάλτε την σημαντική πληροφορία εκεί που κοιτάει ο χρήστης Χρησιμοποιήστε (με φειδώ) χρώματα για να τονίσετε Bold, πυκνότητα, χρώμα, κορεσμός (saturation), γραφικά Βαρύ πυροβολικό χρησιμοποιήστε με ΠΟΛΥ φειδώ Πλαίσια διαλόγου και αναδυόμενα παράθυρα (pop-ups) Ήχος Δόνηση και κινούμενα γραφικά (animation) (πολύ προσοχή στο διαδίκτυο!) Διαφάνεια 30
Δίνετε πληροφορία, όχι απλώς δεδομένα (Βασική αρχή 7) Αποφεύγετε να παρουσιάζετε δεδομένα που δεν εμπεριέχουν χρήσιμη πληροφορία, ειδικά επαναλαμβανόμενα δεδομένα Να παρουσιάζετε τα αποτελέσματα σε πίνακες, διαγράμματα και γραφήματα Διαφάνεια 31
Πλαίσιο ομάδας για μία ρύθμιση Πλαίσια ομάδας μέσα σε άλλα πλαίσια ομάδας Ένα πλαίσιο ομάδας σε ένα παράθυρο Διαφάνεια 32
Διαφάνεια 33
Ομαδοποιείτε τα κουμπιά επιλογής και δίνετε στην ομάδα ένα όνομα Τοποθετείτε τα κουμπιά επιλογής μαζί σε μια ομάδα Χρησιμοποιείτε ένα πλαίσιο για να δείξετε την ομάδα Χρησιμοποιείτε ένα περιγραφικό όνομα για όλη την ομάδα Διαφάνεια 34
Στοιχίζετε τα κουμπιά επιλογής κατακόρυφα Αν έχετε στη διάθεσή σας τον απαραίτητο χώρο, στοιχίζετε τα κουμπιά επιλογής κατακόρυφα παρά οριζόντια προκειμένου να διευκολύνετε τη γρήγορη ανάγνωση (scanning) των επιλογών Διαφάνεια 35
Διαφάνεια 36