4. H αλληλεπίδραση Αλληλεπίδραση Ανθρώπου Υπολογιστή Μάρτιος, 2010 Παλαιγεωργίου Γ. Τμήμα Πληροφορικής, Α.Π.Θ.
Προηγούμενη Διάλεξη Ο υπολογιστής Συσκευές εισόδου Συσκευές εξόδου Πανταχού παρόν υπολογιστής Απτικές συσκευές
Η διάδραση Έχοντας προσεγγίσει τη διεπαφή από την πλευρά τόσο του χρήστη όσο και του υπολογιστή, στρέφουμε την προσοχή μας στον μεταξύ τους διάλογο. Περιεχόμενα: Μοντέλα διάδρασης Εργονομία Στυλ διάδρασης
Οι όροι της διάδρασης Ο σκοπός ενός διαδραστικού συστήματος είναι η υποβοήθηση του χρήστη για την επίτευξη στόχων σε κάποιο πεδίο εφαρμογής. Ένα πεδίο εφαρμογής ορίζει μια περιοχή γνώσης και εμπειρίας σε κάποια δραστηριότητα του πραγματικού κόσμου (π.χ. σχεδίαση γραφικών). Ένα πεδίο εφαρμογής εμπεριέχει έννοιες οι οποίες τονίζουν τις σημαντικές απόψεις του.
Οι όροι της διάδρασης Οι εργασίες είναι οι λειτουργίες για το χειρισμό των βασικών εννοιών ενός πεδίου εφαρμογής. Ένας στόχος είναι η επιθυμητή έξοδος (αποτέλεσμα) από την εκτέλεση μιας εργασίας (π.χ. η παραγωγή ενός τριγώνου με κόκκινη επιφάνεια).
Οι όροι της διάδρασης Μια πρόθεση είναι μια συγκεκριμένη ενέργεια που απαιτείται για την επίτευξη του στόχου. Η ανάλυση εργασιών απαιτεί τον προσδιορισμό του χώρου προβλήματος για το χρήστη ενός διαδραστικού συστήματος, βάσει του πεδίου εφαρμογής, των στόχων, των προθέσεων και των εργασιών.
Οι όροι Σκοπός Πεδίο εφαρμογής Στόχος Πρόθεση Ανάλυση εργασιών Εργασίες
Πλαίσια για την κατανόηση της αλληλεπίδρασης Τα επόμενα πλαίσια ερμηνείας της αλληλεπίδρασης μας επιτρέπουν: Να δομήσουμε καλύτερες σχεδιαστικές διεργασίες Να αναγνωρίσουμε προβλήματα Να θεωρητικοποιήσουμε τα προβλήματα 1-8
Ο κύκλος εκτέλεσης-αξιολόγησης
Ο κύκλος εκτέλεσης - αξιολόγησης Donald Norman (1990): The Design of Everyday Things Η δομή κάθε δράσης έχει τέσσερα μέρη: Στόχους: Ξεκινάμε με μια ιδέα του τι θέλουμε να κάνουμε, τι θέλουμε να συμβεί. Εκτέλεση: Εκτελούμε τις δράσεις στο κόσμο των δυνατών ενεργειών. Κόσμος: Για να εκτελέσουμε τις ενέργειες πρέπει να χειριστούμε αντικείμενα του κόσμου. Αξιολόγηση: Αξιολογούμε τη δράση μας και συγκρίνουμε τα αποτελέσματά της με το στόχο μας.
Ο κύκλος εκτέλεσης - αξιολόγησης Το μοντέλο διάδρασης του Norman πλησιάζει αρκετά στον τρόπο με τον οποίο αντιλαμβανόμαστε διαισθητικά την επικοινωνία μεταξύ του ανθρώπου χρήστη και του υπολογιστή. Ο χρήστης διατυπώνει ένα πλάνο ενεργειών Το πλάνο εκτελείται στη διεπαφή του υπολογιστή Ο χρήστης παρατηρεί τη διεπαφή για να αξιολογήσει το αποτέλεσμα και να καθορίσει περαιτέρω ενέργειες.
Ο κύκλος εκτέλεσης αξιολόγησης
Ο κύκλος εκτέλεσης αξιολόγησης 7-στάδια
Ο κύκλος εκτέλεσης αξιολόγησης goal execution user establishes the goal formulates intention specifies actions at interface executes action perceives system state interprets system state system evaluates system state with respect to goal evaluation
Ο κύκλος εκτέλεσης αξιολόγησης goal execution user establishes the goal formulates intention specifies actions at interface executes action perceives system state interprets system state system evaluates system state with respect to goal evaluation
Ο κύκλος εκτέλεσης αξιολόγησης goal execution user establishes the goal formulates intention specifies actions at interface executes action perceives system state interprets system state system evaluates system state with respect to goal evaluation
Ο κύκλος εκτέλεσης αξιολόγησης Οι στόχοι δεν προσδιορίζουν συγκεκριμένες ενέργειες Οι στόχοι και οι προθέσεις δεν έχουν μια «ένα προς ένα» σχέση Π.χ. στόχος: «Διαγραφή κειμένου» Πρόθεση που περιλαμβάνει το μενού Edit Πρόθεση που περιλαμβάνει το Delete key Κάθε πρόθεση εμπλέκει μια σειρά ενεργειών Goal > Intention > Actions > Execution
Ο κύκλος εκτέλεσης αξιολόγησης Αξιολόγησε τα αποτελέσματα Αντιλαμβάνεσαι την καινούρια κατάσταση Ερμηνεύεις αυτό που αντιλαμβάνεσαι Αξιολογείς τη νέα κατάσταση με ένα στόχο Perceive > Interpret > Evaluate
Ανθρώπινα λάθη- λάθη και απροσεξίες Απροσεξία Κατανοεί σύστημα και στόχους Σωστός σχηματισμός της ενέργειας Λάθος ενέργεια λάθος Ίσως ούτε ο σωστός στόχος! Διόρθωση; απροσεξίες καλύτερος σχεδιασμός διεπαφής λάθος καλύτερη κατανόηση του συστήματος
Ο κύκλος εκτέλεσης - αξιολόγησης Ο Norman χρησιμοποιεί αυτό το μοντέλο για να καταδείξει γιατί ορισμένες διεπαφές δημιουργούν προβλήματα στους χρήστες. Περιγράφει αυτά τα προβλήματα με τους όρους χάσμα εκτέλεσης και χάσμα αξιολόγησης.
Χάσμα εκτέλεσης (Gulf of Execution) Μας επιτρέπει η διεπαφή να εκτελέσουμε τις ενέργειες που απαιτούνται από την αντίστοιχη πρόθεση; Στόχος = αποθήκευση αρχείου Πρόθεση = χρήση μενού file Ενέργεια = κλικ στην επιλογή save Υπάρχει save επιλογή στο μενού file?
Χάσμα αξιολόγησης (Gulf of Evaluation) Πόσο εύκολα μπορείς (για μια δεδομένη διεπαφή) να: Προσδιορίσεις τη λειτουργία της; Προσδιορίσεις τις εφικτές δράσεις; Προσδιορίσεις την αντιστοίχιση από την πρόθεση στη φυσική κίνηση; Να πραγματοποιήσεις την ενέργεια; Να προσδιορίσεις αν το σύστημα βρίσκεται στην επιθυμητή κατάσταση; Να ερμηνεύσεις την κατάσταση του συστήματος; Να προσδιορίσεις σε ποια κατάσταση είναι το σύστημα;
Ο κύκλος εκτέλεσης - αξιολόγησης Πλεονεκτήματα του μοντέλου: Παρουσιάζει τη διάδραση με τρόπο σαφή και διαισθητικό. Επιτρέπει την ένταξη λεπτομερέστερων, εμπειρικών και αναλυτικών εργασιών σε ένα κοινό πλαίσιο. Μειονεκτήματα του μοντέλου: Εξετάζει το σύστημα μόνο μέχρι τη διεπαφή. Επικεντρώνεται εξ ολοκλήρου στην άποψη του χρήστη για τη διάδραση. Δεν επιχειρεί να ασχοληθεί με την επικοινωνία του συστήματος μέσω της διεπαφής.
Το πλαίσιο αναφοράς της διάδρασης
Το πλαίσιο αναφοράς της διάδρασης (Abowd and Beale ) Επιχειρεί μια πιο ρεαλιστική περιγραφή της διάδρασης, συμπεριλαμβάνοντας ρητά το σύστημα. Διαχωρίζει τη διάδραση σε τέσσερα βασικά συστατικά:
Το πλαίσιο αναφοράς της διάδρασης Κάθε ένα από αυτά τα συστατικά έχει τη δική του γλώσσα. Η αλληλεπίδραση επιβάλλει τη μετάφραση μεταξύ των διαφορετικών γλωσσών. Προβλήματα συμβαίνουν όταν η μετάφραση μεταξύ διαφορετικών γλωσσών είναι δύσκολη ή ακατόρθωτη.
Το πλαίσιο αναφοράς της διάδρασης Μεταφράσεις μεταξύ των συστατικών:
Το πλαίσιο αναφοράς της διάδρασης Το πλαίσιο αναφοράς της διάδρασης Δεν περιορίζεται στους υπολογιστές Αναγνωρίζει όλα τα βασικά χαρακτηριστικά που εμπλέκονται στην αλληλεπίδραση Επιτρέπει τη συγκριτική αξιολόγηση των συστημάτων Είναι μια αφαιρετική προσεγγιση
Το πλαίσιο αναφοράς της διάδρασης Παράδειγμα ανεπαρκούς αντιστοίχισης: Μια μεγάλη αίθουσα της οποίας ο φωτισμός ελέγχεται από ένα σύνολο διακοπτών. Επιθυμητό να ελέγχεται ώστε να φωτίζεται μόνο ένας χώρος. Πρέπει να εξακριβώσουμε ποιοι διακόπτες ελέγχουν ποια φώτα. Απαιτούνται επαναλαμβανόμενες δοκιμές για την επίτευξη του στόχου: δυσκολία μετάφρασης του στόχου στη γλώσσα εισόδου. Στη συγκεκριμένη περίπτωση η γλώσσα εισόδου απαρτίζεται από μια γραμμική διάταξη διακοπτών, των οποίων ο προσανατολισμός μπορεί να μη δηλώνει τίποτα για τη λειτουργία ή το αποτέλεσμά τους.
Το 3-επίπεδο μοντέλο αλληλεπίδρασης Ο στόχος ή η πρόθεση του χρήστη σε γλώσσα υψηλού επιπέδου. Η μετάφραση της πρόθεσης του χρήστη σε μια ακολουθία εντολών που μπορεί να κατανοήσει ο υπολογιστής. Η αντιστοίχιση των εντολών στη χρήση συγκεκριμένων στοιχείων της διεπαφής. Π.χ. πληκτρολόγηση, χρήση του ποντικιού, κλπ.
Το μοντέλο τεσσάρων επιπέδων Προσέγγιση από πάνω προς τα κάτω, εύκολη να εξηγηθεί, ταιριάζει με την αρχιτεκτονική λογισμικού, επιτρέπει την τμηματοποίηση (modularity) κατά τη σχεδίαση. Απαιτεί προσεκτική αντιστοίχιση μεταξύ των επιπέδων: 1. Το εννοιολογικό επίπεδο (conceptual level) είναι το νοητικό μοντέλο του χρήστη για το αλληλεπιδραστικό σύστημα. 2. Το σημασιολογικό επίπεδο (semantic level) περιγράφει τις έννοιες που μεταφέρονται από την είσοδο εντολών από το χρήστη και από την παρουσίαση της εξόδου από τον υπολογιστή. 3. Το συντακτικό επίπεδο (syntactic level) καθορίζει πώς οι μονάδες που μεταφέρουν σημασιολογική πληροφορία συναρμολογούνται σε μια πλήρη πρόταση που καθοδηγεί τον υπολογιστή να εκτελεί συγκεκριμένες ενέργειες. 4. Το λεξικό επίπεδο (lexical level) ασχολείται με τις εξαρτήσεις των συσκευών και με τους ακριβείς μηχανισμούς μέσω των οποίων ο χρήστης καθορίζει τη σύνταξη των εντολών.
Εργονομία
Εργονομία Η εργονομία (Ergonomics ή human factors) αφορά τη σχεδίαση περιβαλλόντων εργασίας που μεγιστοποιούν την ασφάλεια και την αποδοτικότητα. Σχετίζεται με τη βιομετρία, την ανθρωπομετρία και τη μηχανική ψυχολογία. Ο βασικός της στόχος είναι να διασφαλίσει ότι η γνώση που έχουμε για τα ανθρώπινα χαρακτηριστικά αξιοποιείται σε πρακτικά προβλήματα των ατόμων στην εργασία και στη διασκέδαση Γνωρίζουμε ότι τα άτομα προσαρμόζονται σε ακατάλληλες συνθήκες, αλλά αυτή η προσαρμογή μπορεί να οδηγήσει σε αναποτελεσματικότητα, λάθη, στρες, φυσιολογικό ή νοητικό κόστος
Εργονομία Ουσιαστικά έχει δυο κύριους στόχους: Τη πιο παραγωγική χρήση των ανθρώπινων δυνατοτήτων Και τη διασφάλιση της ανθρώπινης υγείας και ευημερίας. Η εργασία πρέπει να ταιριάζει στο άτομο και οι δεν πρέπει να γίνονται δεκτοί συμβιβασμοί σε σχέση με τις ανθρώπινες δυνατότητες και τους αντίστοιχους περιορισμούς.
Εργονομία Έχει τις ρίζες της στην Βιομηχανική Επανάσταση και εγκαθιδρύθηκε ως αυτόνομο πεδίο στο δεύτερο παγκόσμιο πόλεμο κατά τη σχεδίαση του πιλοτηρίου των μαχητικών αεροπλάνων Οι μηχανικοί ήταν εστιασμένοι στην τεχνολογία και οι βιομηχανικοί ψυχολόγοι στη βελτιστοποίηση της διεπαφής Υπάρχει μεγάλη αλληλοεπικάλυψη με τη σχεδίαση διεπαφών χρήστη και την αλληλεπίδραση ανθρώπου υπολογιστή αναφέρετε περισσότερο στη σχεδίαση του υλικού ενώ το HCI περισσότερο στη σχεδίαση του λογισμικού
Εργονομία Μελετά τα φυσικά χαρακτηριστικά της διάδρασης, τον τρόπο με τον οποίο σχεδιάζονται τα χειριστήρια και οι μηχανισμοί, το φυσικό περιβάλλον στο οποίο λαμβάνει χώρα η διάδραση, η διάταξη και τα φυσικά χαρακτηριστικά της οθόνης. τα χρώματα Κτλ.
Εργονομία Π.χ. διευθέτηση των χειριστηρίων και των ενδείξεων: Βάσει λειτουργικότητας. Οι μηχανισμοί και οι ενδείξεις που σχετίζονται μεταξύ τους από λειτουργικής απόψεως τοποθετούνται μαζί. Σειριακά. Αντικατοπτρίζεται η σειρά χρήσης τους σε μια τυπική μορφή διάδρασης. Βάσει συχνότητας. Οι μηχανισμοί και οι ενδείξεις οργανώνονται ανάλογα με το πόσο συχνά χρησιμοποιούνται. Ολόκληρη η διεπαφή πρέπει να είναι διευθετημένη σε σχέση με τη θέση του χρήστη. Για παράδειγμα: Ο χρήστης θα πρέπει να μπορεί να φτάνει όλους τους αναγκαίους μηχανισμούς και να βλέπει όλες τις ενδείξεις. Οι κρίσιμης σημασίας ενδείξεις θα πρέπει να βρίσκονται στο επίπεδο του ματιού.
Εργονομία Η εργονομία ασχολείται επίσης με τη σχεδίαση του ίδιου του περιβάλλοντος εργασίας. Πού πρόκειται να χρησιμοποιείται το σύστημα; Από ποιον πρόκειται να χρησιμοποιείται; Ποια θα είναι η θέση των χρηστών (θα κάθονται, θα στέκονται ή θα μετακινούνται); Παράγοντες του φυσικού περιβάλλοντος οι οποίοι επηρεάζουν άμεσα την ποιότητα της διάδρασης και την απόδοση του χρήστη: Φυσική θέση Θερμοκρασία Φωτισμός Θόρυβος Χρόνος
Εργονομία Η εργονομία ασχολείται επίσης με τη σχεδίαση πληροφοριακών περιβαλλόντων βάσει της ψυχολογίας. Ικανότητα πρόσληψης και επεξεργασίας νέων ερεθισμάτων Περιορισμοί και δυνατότητες της μνήμης Περιορισμοί «πολυμεσικών» καναλιών (π.χ. γνωστική υπερφόρτωση) Κτλ
Εργονομία Ένα θέμα εργονομίας είναι και η χρήση του χρώματος στις οθόνες, π.χ.: Τα χρώματα που χρησιμοποιούνται θα πρέπει να είναι όσο το δυνατόν πιο διακριτά μεταξύ τους. Το μπλε χρώμα δε θα πρέπει να χρησιμοποιείται για την παρουσίαση πληροφοριών ζωτικής σημασίας. Εάν το χρώμα χρησιμοποιείται σαν ένδειξη για κάτι δε θα πρέπει να είναι το μοναδικό στοιχείο. Τα χρησιμοποιούμενα χρώματα θα πρέπει να αντιστοιχούν σε κοινές συμβάσεις, καθώς και στις προσδοκίες των χρηστών. Κόκκινο, πράσινο και κίτρινο αντίστοιχα για διακοπή, έναρξη και αναμονή.
Εργονομία Η εργονομία είναι καλή στον προσδιορισμό προτύπων και οδηγιών για τον περιορισμό του τρόπου με τον οποίο σχεδιάζουμε συγκεκριμένες προοπτικές του συστήματος.
Νοητικά μοντέλα
Νοητικά μοντέλα Είναι δυναμικά σχήματα γνώσης που αφορούν χρήση συσκευών ή διατάξεων ή τρόπους αντιμετώπισης προβλημάτων Είναι νοητικές αναπαραστάσεις της πραγματικότητας μέσω των οποίων μπορούμε να προβλέψουμε έκτακτα περιστατικά ή να δοκιμάσουμε εναλλακτικές λύσεις Επικοινωνία Ανθρώπου Υπολογιστή - Τμήμα Πληροφορικής, ΑΠΘ
Νοητικά μοντέλα στο HCI O τρόπος που κατανοεί κάποιος χρήστης ότι δουλεύει μια συσκευή τα περιεχόμενα της γνώσης του όχι μόνο ένας γενικός τρόπος σκέψης Οι χρήστες δε γνωρίζουν όλες τις λεπτομέρειες λειτουργίας των συσκευών και για αυτό το λόγο δημιουργούν «γνωστικές συντομεύσεις» ικανές να επιτρέψουν την αλληλεπίδραση μαζί τους Τείνουμε να δημιουργούμε απλοϊκά μοντέλα Π.χ. σύνδεση μιας οικιακής συσκευής στην μπρίζα. Πως τη φαντάζεστε; Τις περισσότερες φορές τα μοντέλα υλοποίησης των συσκευών είναι πολύ διαφορετικά από τα νοητικά μοντέλα των χρηστών Π.χ. κεραίες και κινητά τηλέφωνα Π.χ. το πετάλι του φρένου Επικοινωνία Ανθρώπου Υπολογιστή - Τμήμα Πληροφορικής, ΑΠΘ
Νοητικά μοντέλα στο HCI Το φαινόμενο είναι ακόμη πιο έντονο για τα μοντέλα υλοποίησης του λογισμικού. Για το λόγο αυτό δημιουργούμε στις διεπαφές ένα μοντέλο αναπαράστασης των δυνατών συμπεριφορών, το οποίο τις περισσότερες φορές διαφέρει σημαντικά από το μοντέλο υλοποίησης. Όσο πιο κοντά το μοντέλο αναπαράστασης συμπεριφορών στο νοητικό μοντέλο του χρήστη, τόσο πιο εύκολη γίνεται η χρήση της διεπαφής. Όσο πιο κοντά το μοντέλο αναπαράστασης συμπεριφορών στο μοντέλο υλοποίησης της εφαρμογής, τόσο πιο δύσκολη γίνεται η χρήση της διεπαφής. Επικοινωνία Ανθρώπου Υπολογιστή - Τμήμα Πληροφορικής, ΑΠΘ
Νοητικά μοντέλα στο HCI Άρα η σχεδίαση διεπαφών πρέπει να βασίζεται περισσότερο στο νοητικό μοντέλο των χρηστών Το νοητικό μοντέλο του χρήστη δεν χρειάζεται να είναι απαραίτητα ακριβές ή αληθινό Επικοινωνία Ανθρώπου Υπολογιστή - Τμήμα Πληροφορικής, ΑΠΘ
Επικοινωνία Ανθρώπου Υπολογιστή - Τμήμα Πληροφορικής, ΑΠΘ Νοητικά μοντέλα στο HCI
Νοητικά μοντέλα στο HCI Τα μοντέλα αναπαράστασης συμπεριφορών που σχεδιάζονται από μηχανικούς συνήθως είναι πιο κοντά στο μοντέλο υλοποίησης Π.χ. Move στα windows μεταξύ drive Τέτοια στοιχεία δημιουργούν γνωστικές δυσαρμονίες ή διαφωνίες (cognitive dissonance) Είναι επίσης σύνηθες να μεταφέρουμε προηγούμενα νοητικά μοντέλα σε νέα μέσα (θυμηθείτε Web 2.0):... Επικοινωνία Ανθρώπου Υπολογιστή - Τμήμα Πληροφορικής, ΑΠΘ
Επικοινωνία Ανθρώπου Υπολογιστή - Τμήμα Πληροφορικής, ΑΠΘ Νοητικά μοντέλα στο HCI
Νοητικά μοντέλα στο HCI Τα νοητικά μοντέλα είναι: Αντιεπιστημονικά - βασίζονται συχνά στις εικασίες και τις σχετικές προσεγγίσεις. Ατελή - δεν περιγράφουν αναγκαστικά ολόκληρα συστήματα αλλά τις προοπτικές που είναι σχετικές. Ασταθή δεν είναι συγκεκριμένες φόρμουλες αλλά εξελίσσονται και προσαρμόζονται στο περιβάλλον. Αντιφατικά δε συγκροτούν αναγκαστικά ένα συνεκτικό όλον, κάποια τμήματά τους μπορεί να είναι ασύμβατα με άλλα τμήματα του ίδιου μοντέλου. Προσωπικά Είναι συγκεκριμένα για κάθε άτομο και δεν απαρτίζονται από έννοιες και σχέσεις που μπορούν να εφαρμοστούν καθολικά Δημιουργούνται από την αντίληψη, τη φαντασία, την ερμηνευτική ικανότητα κτλ. 1-50
Νοητικά μοντέλα στο HCI Το σημαντικότερο στοιχείο είναι ότι είμαστε ψυχαναγκαστικά διερμηνευτές οποιουδήποτε στοιχείου αντιλαμβανόμαστε. Οι χρήστες δεν ερμηνεύουν μόνο αυτό που βλέπουν αλλά και πολλά από αυτά που βλέπουν 1-51
Νοητικά μοντέλα στο HCI Συνήθως προσπαθούμε να μειώσουμε τις διαφορές μεταξύ του μοντέλου του χρήστη και του αναπαριστώμενου μοντέλου μέσω: Απλότητας Οικειότητας Διαθεσιμότητας Ευελιξίας Ανάδρασης Ασφάλειας Affordance (υπαινισσόμενη χρήση)
Νοητικά μοντέλα στο HCI Απλότητα Από τη στιγμή που τα νοητικά μοντέλα αποτελούν απλουστεύσεις της πραγματικότητας, η σχεδίαση διεπαφών θα πρέπει να απλοποιεί τις πραγματικές υπολογιστικές λειτουργίες Μια λειτουργία πρέπει να περιλαμβάνεται μόνο εφόσον μια ανάλυση εργασιών δείχνει ότι είναι απαιτούμενη Οι βασικές πιο χρησιμοποιούμενες λειτουργίες πρέπει να είναι άμεσα προσβάσιμες ενώ οι πιο προχωρημένες πρέπει να είναι λιγότερο προφανής στους χρήστες Η ενσωμάτωση προχωρημένων λειτουργιών διασπά τους χρήστες από την επίτευξη των στόχων τους
Νοητικά μοντέλα στο HCI Οικειότητα Η χρήση εννοιών και τεχνικών που οι χρήστες ήδη κατανοούν από τον πραγματικό κόσμο - έτσι τους δίνεται η δυνατότητα να ξεκινήσουν έμμεσα τη χρήση της εφαρμογής Η επιφάνεια εργασίας προσπαθεί να βασιστεί στη συγκεκριμένη αρχή Οι έννοιες και οι τεχνικές που μαθαίνονται μπορούν να εφαρμοστούν σε ποικιλία περιστάσεων. Επιλέγοντας μια διεπαφή να είναι συνεπής προς τα τυπικά στυλ αλληλεπίδρασης καταφέρνει να βοηθάει τους χρήστες να γίνονται γρηγορότερα παραγωγικοί
Νοητικά μοντέλα στο HCI Διαθεσιμότητα Οι χρήστες είναι πολύ καλύτεροι στην αναγνώριση παρά στην ανάκληση. Οι χρήστες δεν πρέπει να βασίζονται στη δική τους μνήμη για κάτι που το σύστημα γνωρίζει ήδη όπως προηγούμενες ρυθμίσεις, ονόματα αρχείων κτλ. Μια διεπαφή θα πρέπει να παρέχει οπτικές ενδείξεις, υπενθυμίσεις, λίστες επιλογών και άλλα βοηθήματα αυτόματα ή κατ απαίτηση
Νοητικά μοντέλα στο HCI Ευελιξία Μια διεπαφή θα πρέπει να υποστηρίζει εναλλακτικούς τρόπους αλληλεπίδρασης, επιτρέποντας στους χρήστες να επιλέξουν τη μέθοδο που θεωρούν καταλληλότερη για κάθε περίπτωση Οι χρήστες θα πρέπει να μπορούν να χρησιμοποιούν κάθε αντικείμενο με όποια σειρά και οποιαδήποτε στιγμή θέλουν Οι ευέλικτες διεπαφές πρέπει να ανταποκρίνονται σε διαφορετικές δεξιότητες χρηστών, φυσικές ικανότητες, στυλ αλληλεπίδρασης και περιβάλλοντα χρήσης
Νοητικά μοντέλα στο HCI Ανάδραση Ένα σύστημα πρέπει να παρέχει ολοκληρωμένη και συνεχής ανάδραση σε σχέση με τα αποτελέσματα των ενεργειών Κάθε ανάδραση που λαμβάνει ένας χρήστης και υποστηρίζει το τρέχον νοητικό του μοντέλο, ταυτόχρονα το ενδυναμώνει. Αν έρχεται σε αντίθεση, τότε το αναγκάζει να προσαρμοστεί Η άμεση ανάδραση επιτρέπει στους χρήστες να αξιολογούν κατά πόσο τα αποτελέσματα των ενεργειών τους είναι τα προσδοκώμενα και να αναλαμβάνουν διορθωτικές δράσεις αν αυτό είναι απαραίτητο
Νοητικά μοντέλα στο HCI Ασφάλεια Οι ενέργειες ενός χρήστης θα πρέπει να προκαλούν τα αποτελέσματα που περιμένει ο χρήστης Οι χρήστες θα πρέπει να νιώθουν αυτοπεποίθηση στη διερεύνηση της διεπαφής, να νιώθουν ότι μπορούν να δοκιμάσουν μια ενέργεια, να δουν τα αποτελέσματα και να τα αναιρούν αν αυτά δεν είναι αποδεκτά Οι χρήστες νιώθουν πιο βολικά σε διεπαφές στις οποίες οι ενέργειες δεν προκαλούν μη αναστρέψιμες συνέπειες
Νοητικά μοντέλα στο HCI Affordance (υπαινισσόμενη χρήση) Αναφέρεται στις ιδιότητες ενός αντικειμένου Αναφέρεται στις ενδείξεις για τους τρόπους χρήσης ενός αντικειμένου Η προσλαμβανόμενη (perceived) affordance αναφέρεται στο τι πιστεύει ένα άτομο ότι μπορεί να κάνει με ένα αντικείμενο. Μια διεπαφή μπορεί να εκμεταλλευτεί affordances αναπαραστάσεων του πραγματικού κόσμου στη διεπαφή. Οι χρήστες διαισθητικά γνωρίζουν τη μπορούν να κάνουν με το αντικείμενο μόνο κοιτώντας το
Νοητικά μοντέλα στο HCI Παράδειγμα Επιστρέφει κάποιος στο σπίτι μετά από μέρες μια κρύα νύχτα του χειμώνα και το βρίσκει εντελώς παγωμένο. Ενεργοποιεί το θερμοστάτη (αυτόνομη θέρμανση). Σκεφτείτε σε τι θερμοκρασία θα το βάλει κατά τη γνώμη σας: 18 βαθμούς ΜΑΧ Εξηγήσετε τη συμπεριφορά του με βάση το νοητικό μοντέλο που έχει ο χρήστης για το θερμοστάτη;
Νοητικά μοντέλα στο HCI Ζητούμενό μας να αναπαριστούμε τα νοητικά μοντέλα του χρήστη και να αναζητούμε σχετικά μοντέλα αναπαράστασης συμπεριφορών ως σχεδιαστές όχι να επιδιώκουμε την αλλαγή των νοητικών μοντέλων του χρήστη Επικοινωνία Ανθρώπου Υπολογιστή - Τμήμα Πληροφορικής, ΑΠΘ
Άλλα μοντέλα
Άλλα στυλ αλληλεπίδρασης Υπάρχουν και πολλές άλλες προσεγγίσεις της αλληλεπίδρασης (σημειωτικά μοντέλα, βάσει θεωριών σχεδίασης, θεωρία της δραστηριότητας, κατανεμημένη νοημοσύνη, συμπεριφορικά μοντέλα κτλ - ορισμένες θα τις δούμε κατά την ανάλυση της σχεδίασης)
Ιστορικό των διεπαφών
Ιστορικό Π.χ. windows Windows 1.01 (τοπικά) Windows 2.03 (τοπικά) Windows 3.0 (τοπικά) Windows 3.11 (τοπικά) Windows 95 (τοπικά) Windows 98 (τοπικά) Windows Me (τοπικά) Windows XP (τοπικά) Windows Vista Windows 7 http://www.guidebookgallery.org
Ιστορικό Microsoft Office 1-2003
Στυλ αλληλεπίδρασης
Στυλ διάδρασης Η διάδραση μπορεί να θεωρηθεί σαν ένας διάλογος μεταξύ του υπολογιστή και του χρήστη. Η επιλογή του στυλ της διεπαφής μπορεί να έχει σημαντική επίδραση στη φύση αυτού του διαλόγου. Ο όρος στυλ διάδρασης περιλαμβάνει όλους τους τρόπους με τους οποίους οι χρήστες επικοινωνούν ή αλληλεπιδρούν με υπολογιστικά συστήματα. Ένα στυλ διάδρασης αποτελείται από τα αντικείμενα της διεπαφής και τις αντίστοιχες τεχνικές αλληλεπίδρασης
Στυλ διάδρασης Θα μελετήσουμε τα ακόλουθα στυλ: Διεπαφή γραμμής εντολών (command line interface) Μενού επιλογών (menu) Φυσική γλώσσα (natural language) Ερωταποκρίσεις και διάλογος μέσω ερωτημάτων (question/answer and query dialog) Συμπλήρωση φορμών και φύλλα εργασίας (form-fills and spreadsheets) Λειτουργικά πλήκτρα (function keys) Διεπαφές άμεσης διαχείρισης Παραθυρικά περιβάλλοντα (WIMP) Ένδειξη και κλικ (point and click) Διεπαφές που λειτουργούν στις τρεις διαστάσεις (threedimensional interface)
Γραμμή εντολών (2004) Καθ. Κ.Στεφανίδης
Γραμμή εντολών Παρέχει ένα μέσο για την απευθείας διατύπωση οδηγιών προς τον υπολογιστή, μέσω πληκτρολογούμενων εντολών (συντομογραφίες ή ολόκληρες λέξεις) και λειτουργικών πλήκτρων (function keys, π.χ. F1). Ιστορικά ο πιο παλιός τρόπος αλληλεπίδρασης ανθρώπου υπολογιστή Σήμερα χρησιμοποιούνται συμπληρωματικά του απ ευθείας χειρισμού ή από πεπειραμένους χρήστες Πλεονεκτήματα Ισχυρό, ευέλικτο, γρήγορο, αποδοτικό, καταλαμβάνει τον ελάχιστο δυνατό χώρο στην οθόνη. Μειονεκτήματα Αυξημένη δυσκολία στην εκμάθηση και χρήση. Ο χρήστης πρέπει να θυμάται εντολές. Καταλληλότερο για έμπειρους χρήστες. Αδυναμία κατατοπιστικής αντιμετώπισης όλων των συνδυασμών των εσφαλμένων εντολών που μπορεί να δώσει ο χρήστης
Γραμμή εντολών Το περιβάλλον Unix και η εντολή mv: NAME mv move or rename file SYNOPSIS mv [ ] [ fi ] filename1 filename2 mv [ ] [ fi ] directory1 directory2 mv [ ] [ fi ] filename... directory OPTIONS Interpret all the following arguments to mv as file names. This allows file names starting with minus. f Force. Override any mode restrictions and the i option. The f option also suppresses any warning messages about modes which would potentially restrict overwriting. i Interactive mode. mv displays the name of the file or directory followed by a question mark whenever a move would replace an existing file or directory. If you type a line starting with y, mv moves the specified file or directory, otherwise mv does nothing with that file or directory
Γραμμή εντολών Αρχές και οδηγίες (1/2) Ισορροπείστε ανάμεσα στην ισχύ και την απλότητα, ανάλογα με τις ανάγκες των χρηστών. Παρέχετε συνέπεια στη σύνταξη της γλώσσας. Χρησιμοποιήστε σύνταξη ενέργειας αντικειμένου. Αποφύγετε την αυθαίρετη χρήση σημείων στίξης. Η σύνταξη μιας γλώσσας εντολών πρέπει να είναι φυσική και εύκολη να απομνημονευθεί. Αποφύγετε την απαραίτητη χρήση προαιρετικών παραμέτρων. Αποφύγετε τη συχνή χρήση των πλήκτρων shift και control. Σχεδιάστε τα ονόματα των εντολών ώστε να είναι ιεραρχικά, συγκεκριμένα, οικεία, συνεπή ως προς τη γραμματική και διαχωριστέα. Χρησιμοποιήστε γλώσσα του χρήστη (user jargon) και όχι σχετική με υπολογιστές (computer jargon).
Γραμμή εντολών Αρχές και οδηγίες (2/2) Χρησιμοποιήστε έναν απλό και συνεπή κανόνα για συντομεύσεις ονομάτων εντολών. Επιτρέψτε πλήρη ονόματα εντολών και κατά την εκπαίδευση δώστε έμφαση σε αυτά, ακόμα και αν επιτρέπονται οι συντομεύσεις. Τοποθετείστε τη γραμμή εντολών στο κάτω μέρος της οθόνης ή του παραθύρου, εκτός και αν είναι ξεκάθαρο ότι ο χρήστης θα κοιτάζει αλλού κατά τη διάρκεια της εισόδου εντολών. Παρέχετε αλληλεπιδραστική υποστήριξη, μέσω προκαθορισμένων (default) επιλογών, ευφυούς ερμηνείας, type-ahead και ανάδρασης. Παρέχετε βοηθήματα μνήμης, όπως on-line οδηγούς για σύντομη αναφορά (online quick reference) και προτροπές (prompting). Παρέχετε λειτουργικά πλήκτρα (function keys) για συχνά εκτελούμενες εντολές. Δημιουργήστε μια γλώσσα που να προσαρμόζεται ως προς το χρήστη (user tailorable).
Μενού επιλογών
Μενού επιλογών Ορισμός Μια λίστα από επιλογές από τις οποίες ο χρήστης διαλέγει όποια επιθυμεί. Πλεονεκτήματα Αυτο-επεξηγηματικά, απαιτούν λίγη μνήμη από το χρήστη (όλες οι διαθέσιμες επιλογές είναι ορατές), λίγη πληκτρολόγηση, εύκολη διαχείριση λαθών, καλός διάλογος. Μειονεκτήματα Μη αποδοτικά, μη ευέλικτα, όχι πρακτικά για πολλές επιλογές, καταλαμβάνουν χώρο στην οθόνη, δυσκολία εισαγωγής δεδομένων από το χρήστη
Μενού επιλογών
Μενού επιλογών Αρχές και οδηγίες (1/5) Αντιστοιχίστε τη δομή του μενού με τη δομή των ενεργειών του χρήστη. Παρέχετε στους χρήστες έναν εύκολο τρόπο να προσαρμόσουν τη δομή του μενού στη δομή των ενεργειών. Ελαχιστοποιήστε το βάθος της ιεραρχίας του μενού έναντι του πλάτους. Σε μενού κειμένου που καταλαμβάνουν ολόκληρη την οθόνη (fullscreen), παρουσιάστε τις επιλογές του μενού κάθετα. Χρησιμοποιήστε pie menus για ιεραρχίες ενός ή δύο επιπέδων με μικρές λίστες επιλογών, ειδικά όταν οι επιλογές αυτές ταιριάζουν με ένα κυκλικό (pie) τρόπο παρουσίασης.
Μενού επιλογών Αρχές και οδηγίες (2/5) Επιλέξτε να απενεργοποιείτε ή να διαγράφετε τα ανενεργά αντικείμενα του μενού, ανάλογα με την εμπειρία των χρηστών και τη συσκευή εισόδου. Δημιουργείτε λογικές, διακριτές και αμοιβαία αποκλειόμενες εννοιολογικές κατηγορίες, με ξεκάθαρη σημασία. Οι ετικέτες των επιλογών ενός μενού θα πρέπει να είναι σύντομες και συνεπείς σε γραμματικό στυλ και θέση. Χρησιμοποιήστε περιγραφείς των επιλογών του μενού, αν οι ετικέτες των επιλογών δεν είναι ξεκάθαρες και σαφείς..
Μενού επιλογών Αρχές και οδηγίες (3/5) Ταξινομήστε τις ετικέτες των επιλογών, σύμφωνα με: τυχόν συμβάσεις τη συχνότητα χρήσης τη σειρά χρήσης λειτουργικές ομάδες και / ή με αλφαβητική σειρά, ανάλογα με τους χρήστες και τις μεταβλητές των εργασιών που πραγματοποιούν με το σύστημα.
Μενού επιλογών Αρχές και οδηγίες (4/5) Σε συστήματα μενού με χρήση πληκτρολογίου, η επιλογή μέσω του δείκτη του ποντικού είναι αποδεκτή για μικρότερα μενού, ιδιαίτερα για χρήση που αναμένεται να είναι περιστασιακή. Για μεγαλύτερα μενού και/ή για συχνούς χρήστες μνημονικοί κωδικοί επιλογής είναι προτιμότεροι. Σε διεπαφές με χρήση συσκευών κατάδειξης (για παράδειγμα με ποντίκι) συνίσταται να παρέχεται ένας μηχανισμός επιλογής με χρήση του δείκτη του ποντικιού. Όταν είναι δυνατόν, καλό είναι να παρέχετε προεπιλογές (defaults) για την επιλογή αντικειμένων του μενού. Διαχωρίστε μεταξύ των μενού για «επιλογή ενός» και «επιλογή πολλών» αντικειμένων. Παρέχετε ανάδραση για την επιλογή αντικειμένων του μενού.
Μενού επιλογών Αρχές και οδηγίες (5/5) Χρησιμοποιείστε pop-up ή προκαλούμενα από τους χρήστες μενού για συχνούς χρήστες και καταστάσεις όπου ο χώρος στην οθόνη είναι ανεπαρκής. Τα μόνιμα μενού είναι προτιμότερα. Δημιουργείστε συμβάσεις για τη σχεδίαση μενού και εφαρμόστε τις με συνέπεια σε όλες τις οθόνες μενού σε ένα σύστημα. Σκεφτείτε τη χρήση ετικετών περιεχομένου, χαρτών μενού και ενδείξεων θέσης ως βοηθήματα πλοήγησης σε πολύπλοκα συστήματα μενού. Σκεφτείτε τη χρήση άμεσης πρόσβασης, μέσω type-ahead τεχνικών και macros δημιουργούμενων από τους χρήστες για να διευκολύνετε την πλοήγηση για έμπειρους χρήστες. Διευκολύνετε την προς τα πίσω πλοήγηση.
Φυσική γλώσσα
Φυσική γλώσσα Ορισμός Επιτρέπει στους χρήστες να εκφράσουν αιτήματα σε μια εφαρμογή λογισμικού στη φυσική τους γλώσσα. Πλεονεκτήματα Εύκολη στη μάθηση και στην απομνημόνευση, ευέλικτη, γρήγορη και αποδοτική, μέτρια χρήση χώρου στην οθόνη. Μειονεκτήματα Προϋποθέτει γνώση του τομέα εργασίας και ικανότητα πληκτρολόγησης, δύσκολη η κατανόηση της από τον υπολογιστή (λόγω εγγενούς ασάφειας), εύκολο να γίνουν λάθη, ακριβή να υλοποιηθεί Δημιουργία διεπαφών με υποστήριξη κατανόησης περιορισμένου υποσυνόλου της φυσικής γλώσσας Ενημέρωση του χρήστη για τους περιορισμούς του συστήματος
Φυσική γλώσσα Π.χ. Μια διεπαφή φυσικής γλώσσας σε έναν κατάλογο μιας online βιβλιοθήκης: list books with subject = HCI reserve book with ISBN = 0201631628 print list of books with title = Human Computer Interaction
Φυσική γλώσσα Αρχές και οδηγίες (1/1) Παρέχετε μια διεπαφή περιορισμένης φυσικής γλώσσας, η οποία είναι νοηματικά, λειτουργικά, συντακτικά και λεκτικά χρηστική. Καθορίστε το υποσύνολο της πραγματικής φυσικής γλώσσας που θα συμπεριλάβετε χρησιμοποιώντας την τεχνική Wizard-of-Oz. Εκφράστε όλη την έξοδο του συστήματος σε νοηματικά, λειτουργικά, συντακτικά και λεκτικά έγκυρες φόρμες εισόδου. Χρησιμοποιήστε σύντομη αλλά ξεκάθαρη γλώσσα. Χρησιμοποιήστε συνεπή και οικεία ορολογία και απλή και σύντομη γραμματική. Παρέχετε προαιρετικούς αποσαφηνιστικούςδιαλόγους. Ξεχωρίστε την είσοδο του χρήστη από την έξοδο του συστήματος με χρήση κενού χώρου και άλλων οπτικών βοηθημάτων. Παρέχετε στο χρήστη ένα τρόπο να δει και να τροποποιήσει το ιστορικό του διαλόγου. Παρέχετε οδηγίες για την πλοήγηση.
Ερωταποκρίσεις
Ερωταποκρίσεις Ορισμός Είναι ένας απλός μηχανισμός που μπορεί να παρέχει είσοδο σε μια εφαρμογή. Ο χρήστης καλείται να απαντήσει σε μια σειρά ερωτήσεων (κυρίως με απαντήσεις του στυλ «ναι/όχι» ή μέσω αριθμημένων επιλογών) και καθοδηγείται βήμα προς βήμα καθ όλη τη διάρκεια της διάδρασής του με το σύστημα. Πλεονεκτήματα Εύκολες στην εκμάθηση και στη χρήση, αυτο-επεξηγηματικές, έχουν μικρές απαιτήσεις σε ανθρώπινη ικανότητα μνήμης, παρέχουν παραμέτρους με πολλές δυνατές τιμές εισόδου. Μειονεκτήματα Περιορισμένη λειτουργικότητα και ισχύ, ανεπαρκείς, προϋποθέτουν κάποια στοιχειώδη ικανότητα από τους χρήστες, επιρρεπείς σε λάθη.
Ερωταποκρίσεις Παράδειγμα: Μια διεπαφή με χρήση ερωταποκρίσεων για ένα σύστημα κρατήσεων αεροπορικών θέσεων:
Ερωταποκρίσεις Αρχές και οδηγίες (1/1) Διατηρείτε πάντα ένα τίτλο για το σύστημά σας στην οθόνη. Παρέχετε υπότιτλους για το περιεχόμενο όπου χρειάζεται. Εκφράστε τις ερωτήσεις σε μια ξεκάθαρη και απλή γλώσσα. Παρέχετε σύντομες προτροπές (prompts) και οδηγίες. Χρησιμοποιείτε οπτικά βοηθήματα και κενό χώρο για να διαχωρίζετε μεταξύ των ερωτήσεων, των προτροπών, των οδηγιών και της εισόδου του χρήστη. Μην απαιτείτε περιττές τροποποιήσεις ή μεταφράσεις. Αποφύγετε τις απαντήσεις τύπου ναι/όχι σε ερωτήσεις που απαιτούν δυαδικές απαντήσεις. Παρέχετε μνημονικούς κωδικούς για τις εναλλακτικές επιλογές. Ελαχιστοποιήστε τις απαιτήσεις πληκτρολόγησης. Παρέχετε ευέλικτη πλοήγηση
Φόρμες
Φόρμες Ορισμός Μια οθόνη η οποία μοιάζει με έντυπη φόρμα και περιλαμβάνει ειδικές θέσεις (πεδία) για συμπλήρωση στοιχείων. Πλεονεκτήματα Αυτό-επεξηγηματικές, απαιτούν λίγη μνήμη, αποδοτική χρήση του χώρου της οθόνης, οικείες για το χρήστη (βασίζονται στην εμφάνιση μιας έντυπης φόρμας). Μειονεκτήματα Προϋποθέτουν τη γνώση των έγκυρων τιμών εισόδου, απαιτούν ικανότητα πληκτρολόγησης, επιτρέπουν λάθη, δεν είναι ευέλικτες
Φόρμες Εισαγωγή των λεπτομερειών για μια αγορά hardware, συμπληρώνοντας φόρμες.
Φόρμες Αρχές και οδηγίες Οργάνωση και εμφάνιση (1/8) Σχεδιάστε και οργανώστε τη φόρμα ώστε να υποστηρίζει την επιθυμητή εργασία. Οργανώστε ομάδες αντικειμένων που έχουν σημασιολογική σχέση, βάσει της σειράς χρήσης, της συχνότητας χρήσης και / ή σχετικής σπουδαιότητας. Διατηρείστε τον αριθμό των ομάδων στο ελάχιστο δυνατό, περιορίζοντας παράλληλα το μέγεθος των ομάδων σε πλάτος της τάξης των 12-14 χαρακτήρων και σε ύψος της τάξης των 6 7 γραμμών. Χρησιμοποιείστε κενό χώρο για να δημιουργήσετε ισορροπία και συμμετρία και να οδηγήσετε το μάτι στην κατάλληλη κατεύθυνση. Διαχωρίστε τις λογικές ομάδες με κενά, γραμμές, χρώμα, ή άλλα οπτικά βοηθήματα. Ελαχιστοποιείστε τον αριθμό των οθονών για συχνούς χρήστες και μεγάλο χρόνο απόκρισης του συστήματος. Μεγιστοποιείστε την καθαρότητα της οθόνης για σπάνιους χρήστες και μικρό χρόνο απόκρισης του συστήματος. Διατηρείτε τα σχετιζόμενα και αλληλοεξαρτώμενα αντικείμενα στην ίδια οθόνη
Φόρμες Αρχές και οδηγίες - Επικεφαλίδες και σχεδίαση των πεδίων (2/8) Στους δυτικούς πολιτισμούς, για ξεχωριστά πεδία, τοποθετείστε την επικεφαλίδα αριστερά του πεδίου. Για λίστες πεδίων, τοποθετείστε την επικεφαλίδα πάνω από το πεδίο, στοιχισμένη αριστερά για λίστες γραμμάτων, στοιχισμένη δεξιά για λίστες αριθμών. Στοιχείστε τις επικεφαλίδες και τα πεδία, ανάλογα με το χρήστη, την εργασία και το είδος των δεδομένων αντίστοιχα. Διαχωρίστε την (μεγαλύτερη) επικεφαλίδα (σε μια ομάδα αριστερά στοιχισμένη) από το πεδίο με όχι περισσότερα από δύο κενά. Διαχωρίστε μια ομάδα από επικεφαλίδες πεδίων από μια άλλη με τρία ή περισσότερα κενά οριζόντια ή με μία ή περισσότερες γραμμές κάθετα.
Φόρμες Αρχές και οδηγίες - Επικεφαλίδες και σχεδίαση των πεδίων (3/8) Διασπάστε τα μεγάλα πεδία (διαταγμένα σε στήλη) ή τις μεγάλες στήλες από ξεχωριστά πεδία σε ομάδες των πέντε, διαχωρισμένων με μια κενή γραμμή. Παρέχετε διακριτές επικεφαλίδες για ομάδες πεδίων και τίτλους τμημάτων σε πολύπλοκες φόρμες. Διαχωρίστε τις επικεφαλίδες από τα πεδία. Οι επικεφαλίδες πρέπει να είναι σύντομες, οικείες και περιγραφικές. Υποδείξτε τον αριθμό των κενών χαρακτήρων που είναι διαθέσιμοι σε ένα πεδίο. Υποδείξτε όταν ένα πεδίο είναι προαιρετικό.
Φόρμες Αρχές και οδηγίες Τύποι εισόδου (4/8) Θεωρείστε την παροχή αυτόματης συμπλήρωσης από το σύστημα για ασαφείς ανολοκλήρωτες εισόδους. Θεωρείστε την παροχή pop-up ή pull-down μενού για τη συμπλήρωση πεδίων με πολλές αλλά καλά καθορισμένες επιλογές εισόδου. Αποφύγετε τους πολύπλοκους κανόνες για την είσοδο δεδομένων στα διάφορα πεδία μιας φόρμας. Παρέχετε λογικές ομαδοποιήσεις για να ξεχωρίσετε μακροσκελείς τύπους εισόδου. Παρέχετε προεπιλογές (defaults) όταν αυτό είναι δυνατόν. Επιτρέπετε αποδοχή των προεπιλογών με το πάτημα ενός πλήκτρου. Οι συχνά χρησιμοποιούμενες είσοδοι θα πρέπει να είναι εύκολο να εκφραστούν (για παράδειγμα, ν/ο, 00, προεπιλογές). Επιτρέπετε στο χρήστη να προσδιορίζει τη μονάδα μέτρησης. Μην απαιτείται τροποποιήσεις ή υπολογισμούς
Φόρμες Αρχές και οδηγίες Τύποι εισόδου (5/8) Επιτρέπετε συντομεύσεις εισόδου, όπου αυτές μπορούν να ερμηνευθούν χωρίς ασάφειες ("yes" or "y"). Ένα σύστημα δε θα πρέπει να εξαρτάται από τη χρήση κεφαλαίων ή μικρών όταν πραγματικά δεν έχει σημασία ("YES" or "Yes" or "yes"). Διατηρείτε τα πεδία εισόδου σύντομα, όπου είναι δυνατόν. Μη συνδυάζετε γράμματα και αριθμούς σε ένα πεδίο. Αποφύγετε τις συχνές αλλαγές μεταξύ κεφαλαίων και μικρών χαρακτήρων. Αποφύγετε σπάνιες ακολουθίες γραμμάτων. Μην απαιτείτε την ύπαρξη μηδενικών στην αρχή των αριθμών
Φόρμες Αρχές και οδηγίες Προτροπές και καθοδηγήσεις (6/8) Παρέχετε προτροπές όταν η χρήση είναι σχετικά σπάνια και οι είσοδοι πρέπει να έχουν συγκεκριμένη μορφή. Οι προτροπές θα πρέπει να είναι σύντομες και σαφείς. Τοποθετείστε τις προτροπές στα δεξιά των πεδίων ή σε μια γραμμή βοήθειας στο κάτω μέρος της οθόνης. Παρέχετε καθοδήγηση για την πλοήγηση και τη συμπλήρωση της οθόνης (ή παρέχετε on-line help). Τοποθετείτε τις καθοδηγήσεις σε μια σταθερή τοποθεσία σε όλες τις οθόνες και κάντε τις ευδιάκριτες. Χρησιμοποιείτε συνεπή ορολογία, γραμματική σύνταξη και στυλ στις καθοδηγήσεις.
Φόρμες Αρχές και οδηγίες Πλοήγηση (7/8) Όταν είναι η πρώτη φορά που ο χρήστης βλέπει τη φόρμα, τοποθετείστε το δείκτη του ποντικιού στην πιο πιθανή προεπιλεγμένη θέση. Διατάξτε τις ομάδες πεδίων σε συνέπεια με την προεπιλεγμένη κίνηση του δείκτη. Οι κάθετε ομάδες είναι προτιμότερες από τις οριζόντιες εάν η κίνηση του δείκτη μπορεί να είναι κάθετη. Επιτρέπετε την προς τα μπρος και προς τα πίσω κίνηση ανά πεδίο και μεταξύ των πεδίων. Κάντε τις προστατευμένες περιοχές στην οθόνη μη προσβάσιμες. Μη χρησιμοποιείτε αυτόματη μετάβαση μεταξύ των πεδίων εκτός και αν αυτά έχουν συγκεκριμένο μέγεθος και οι χρήστες είναι συχνοί και πεπειραμένοι. Παρέχετε τίτλους και αριθμούς σελίδων ή δείκτες θέσης (place markers) στις οθόνες μιας φόρμας πολλαπλών οθονών. Η άμεση διαχείριση αυξάνει την ευελιξία, την ταχύτητα και την ευκολία της μάθησης για την πλοήγηση μεταξύ των πεδίων
Φόρμες Αρχές και οδηγίες Διαχείριση λαθών (8/8) Επιτρέψτε την τροποποίηση χαρακτήρων στα πεδία. Τοποθετείστε το δείκτη του ποντικιού στο πεδίο που έγινε λάθος μετά τον εντοπισμό του λάθους. Δώστε έμφαση (highlight) στο πεδίο λάθους όταν αυτό είναι δυνατόν. Για ανεξάρτητα πεδία, μην πραγματοποιείτε αναφορά λαθών μέχρι να ζητηθεί. Παρέχετε σημασιολογική και συντακτική πληροφορία στα μηνύματα λάθους, ανάλογα με τη γνώση του χρήστη.
Λειτουργικά πλήκτρα
Λειτουργικά πλήκτρα Ορισμός Εντολές, και μερικές φορές αντικείμενα, προσδιορίζονται με το πάτημα ειδικών πλήκτρων του πληκτρολογίου, αντί να τις πληκτρολογούμε ή να τις επιλέγουμε από ένα μενού. Πλεονεκτήματα Αυτό-επεξηγηματικά, απαιτούν λίγη μνήμη από τον άνθρωπο, εύκολα στη χρήση, ευέλικτα, απαιτούν λίγο ή καθόλου χώρο στην οθόνη, δεν απαιτούν πληκτρολόγηση Μειονεκτήματα Περιορισμένος αριθμός διαθέσιμων πλήκτρων, οι προσεγγίσεις επέκτασης από άποψη υλικού είναι ακριβές, οι προσεγγίσεις επέκτασης από άποψη λογισμικού θυσιάζουν χώρο στην οθόνη και στην ευκολία χρήσης.
Λειτουργικά πλήκτρα
Λειτουργικά πλήκτρα Αρχές και οδηγίες (1/2): Παρέχετε αρκετά λειτουργικά πλήκτρα για να υποστηρίξετε τη λειτουργικότητα, αλλά όχι τόσα πολλά ώστε η σάρωση και η ανεύρεση να είναι δύσκολες. Διατηρείστε τη χρήση λειτουργικών πλήκτρων για γενικές, συχνές και σημαντικές λειτουργίες. Διατάξτε τα πλήκτρα σε ομάδες των τριών ή των τεσσάρων βάσει σημασιολογικών συσχετίσεων. Βασίστε τις ομαδοποιήσεις στη ροή της χρήσης, παρά στις σημασιολογικές συσχετίσεις για υψηλή συχνότητα χρήσης. Διαχωρίστε τις ομαδοποιήσεις με χώρο, μέγεθος και χρώμα. Χρησιμοποιείστε ξεκάθαρες και διακριτές ετικέτες για τα πλήκτρα. Η αναγνωρισιμότητα προηγείται της συνέπειας. Τοποθετείστε τα συχνά χρησιμοποιούμενα πλήκτρα σε σημείο εύκολοης πρόσβασης.
Λειτουργικά πλήκτρα Αρχές και οδηγίες (2/2): Τοποθετείστε τα πιο συχνά χρησιμοποιούμενα πλήκτρα σε ομάδες λειτουργικών πλήκτρων στις πιο προσβάσιμες θέσεις. Τοποθετείστε τα πλήκτρα με σοβαρές συνέπειες σε δυσπρόσιτες θέσεις. Ελαχιστοποιείστε τη χρήση ειδικών πλήκτρων (shift, alt). Χρησιμοποιείστε τα με συνέπεια όταν είναι απαραίτητα. Να είστε συνεπείς στην ανάθεση λειτουργικών πλήκτρων μεταξύ των οθονών, των υποσυστημάτων και των σχετικών προϊόντων. Παρέχετε ανάδραση όταν πατιούνται λειτουργικά πλήκτρα. Απενεργοποιείτε ή διαγράφετε ετικέτες των προσωρινά ανενεργών πλήκτρων. Παρέχετε μια ένδειξη κατάστασης στα πλήκτρα αλλαγής τρόπου λειτουργίας.
Διεπαφές άμεσου χειρισμού
Διεπαφές άμεσου χειρισμού Περιβάλλον απευθείας χειρισμού ορίζεται μια διεπιφάνεια χρήστη στην οποία: τα αντικείμενα ενδιαφέροντος του χρήστη αναπαρίστανται στην οθόνη ο χρήστης χειρίζεται απευθείας τα αντικείμενα, συνήθως με δεικτικές συσκευές οι ενέργειες του χρήστη πάνω στα αντικείμενα αυτά έχουν άμεσο αποτέλεσμα οι ενέργειες είναι αυξητικού χαρακτήρα (κάθε νέα ενέργεια λαμβάνει υπόψη όλες τις προηγούμενες) οι ενέργειες είναι αντιστρεπτές Συνεπώς πρόκειται για περιβάλλον γραφικού τύπου GUI (Graphical User Interface)χ
Η πρώτη ευρέως διεπιφάνεια απευθείας χειρισμού ήταν το λειτουργικό σύστημα του υπολογιστή Mackintosh της Apple το 1978, που εισήγαγε τη μεταφορά της επιφάνειας γραφείου αναπαράσταση αντικείμενων ήδη γνωστών (έγγραφα, φάκελοι, καλάθι απορριμμάτων, κ.τ.λ.), στην οθόνη χειρισμό των αντικειμένων με χρήση δεικτικής συσκευής
Διεπαφές άμεσου χειρισμού Πλεονεκτήματα Εύκολες στη μάθηση και στην απομνημόνευση, άμεσες, WYSIWYG, ευέλικτες, εύκολα αναστρέψιμες ενέργειες, παρέχουν άμεση οπτική ανάδραση, εκμεταλλεύονται την ανθρώπινη χρήση οπτικών χωρικών στοιχείων, λιγότερο επιρρεπείς σε λάθη. Μειονεκτήματα Δεν είναι αυτό-επεξηγηματικές, μπορεί να είναι ανεπαρκείς, μπορεί να είναι δύσκολο να σχεδιαστούν αναγνωρίσιμα εικονίδια, τα εικονίδια καταλαμβάνουν περισσότερο χώρο στην οθόνη από ότι οι λέξεις.
Διεπαφές άμεσου χειρισμού Αρχές και οδηγίες (1/2): Ελαχιστοποιείστε τη σημασιολογική απόσταση στη σχεδίαση των διαλόγων. Παρέχετε οπτική ανάδραση για τη θέση, την επιλογή και την κίνηση και φυσική ανάδραση για τους τρόπους λειτουργίας (modes). Παρέχετε μια εναλλακτική διεπαφή για συχνούς και έμπειρους χρήστες Σχεδιάστε τα εικονίδια να είναι διακριτά και οικεία Ελαχιστοποιείστε την απόσταση σαφήνειας στη σχεδίαση εικονιδίων. Σχεδιάζετε τα εικονίδια ενός συνόλου να είναι ορατά και νοητικά διακριτά.
Διεπαφές άμεσου χειρισμού Αρχές και οδηγίες (2/2): Αποφύγετε τις υπερβολικές λεπτομέρειες στη σχεδίαση εικονιδίων. Σχεδιάζετε τα εικονίδια ώστε να εκφράζουν τις συσχετίσεις μεταξύ των αντικειμένων και τα χαρακτηριστικά όποτε είναι δυνατόν. Συνοδεύετε τα εικονίδια με ονόματα. Περιορίστε τον αριθμό των τύπων εικονιδίων σε 12 αν είναι δυνατόν, το πολύ όμως σε 20. Επιτρέψτε στους χρήστες να επιλέγουν μεταξύ της παρουσίασης των αντικειμένων και των ενεργειών μέσω κειμένου ή μέσω εικονιδίων.
WIMP - Windows, Icons, Menus & Pointers
Η διεπαφή WIMP WIMP = Windows, Icons, Menus & Pointers (or Windows, Icons, Mice & Pull-down menus). Τα πιο κοινά περιβάλλοντα διάδρασης με τον υπολογιστή βασίζονται στο στυλ διεπαφής WIMP Συνήθως αποκαλούνται παραθυρικά συστήματα. Παραδείγματα διεπαφών WIMP MS Windows, MacOS, X Windows Επιπλέον αντικείμενα και τεχνικές διάδρασης: κουμπιά, γραμμές εργαλείων, παλέτες και παράθυρα διαλόγου
Η διεπαφή WIMP Παράθυρα (Windows) Περιοχές στην οθόνη που συμπεριφέρονται σαν ανεξάρτητα, αυθύπαρκτα τερματικά. Εικονίδια (Icons) Για την αναπαράσταση ενός κλειστού παραθύρου χρησιμοποιείται μια μικρή εικόνα, η οποία αναφέρεται με τον όρο εικονίδιο. Δείκτες (pointers) Ο δείκτης είναι ένα σημαντικό συστατικό της διεπαφής WIMP, επειδή το στυλ διάδρασης που απαιτεί η διεπαφή WIMP βασίζεται σε μεγάλο βαθμό στην ένδειξη και ζπιλογή αντικειμένων από την οθόνη. Οι διάφορες μορφές που μπορεί να λάβει ο δείκτης χρησιμοποιούνται συνήθως για τη διάκριση μεταξύ διαφορετικών καταστάσεων λειτουργίας (π.χ. βέλος, κλεψύδρα, κ.α.) Μενού Ένα μενού παρουσιάζει στο χρήστη μια ποικιλία λειτουργιών ή υπηρεσιών οι οποίες μπορούν να εκτελεστούν από το σύστημα σε μια συγκεκριμένη χρονική στιγμή.
Η διεπαφή WIMP Κουμπιά (buttons) Ειδικές, σαφώς οριοθετημένες περιοχές της οθόνης οι οποίες μπορούν να επιλέγονται από το χρήστη για την εκτέλεση συγκεκριμένων λειτουργιών. Μοιάζουν με κουμπιά που συναντά κανείς στον πίνακα ελέγχου μιας πραγματικής συσκευής. Γραμμές εργαλείων (toolbars) Συλλογές μικρών κουμπιών, κάθε ένα εκ των οποίων έχει ένα εικονίδιο στην πρόσοψή του και παρέχει πρόσβαση σε μια κοινά χρησιμοποιούμενη λειτουργία. Το περιεχόμενο της γραμμής εργαλείων μπορεί να είναι σταθερό ή να προσαρμόζεται από τους χρήστες. Παλέτες Μηχανισμός μέσω του οποίου εμφανίζεται στο χρήστη το σύνολο των πιθανών καταστάσεων και η τρέχουσα ενεργή κατάσταση. Σε πολλές εφαρμογές, η διάδραση μπορεί να εισέλθει σε μια από αρκετές διαφορετικές καταστάσεις. Το προσδιοριστικό χαρακτηριστικό των καταστάσεων είναι ότι αλλάζει η ερμηνεία των ενεργειών του χρήστη. Π.χ. vi του UNIX
Διεπαφές «ένδειξη και κλικ»
Διεπαφές «ένδειξη και κλικ» Στις περισσότερες εφαρμογές πολυμέσων και περιήγησης στο Web, ουσιαστικά όλες οι ενέργειες απαιτούν μόνο ένα κλικ με το πλήκτρο του ποντικού. Για παράδειγμα: Αφού εμφανίζετε έναν ηλεκτρονικό χάρτη στην οθόνη, εάν τοποθετήσετε το δείκτη του ποντικιού πάνω σε μια πόλη και κάνετε κλικ, ανοίγει ένα παράθυρο το οποίο παρουσιάζει τουριστικές πληροφορίες για τη συγκεκριμένη πόλη. Εάν δείξετε σε μια συγκεκριμένη λέξη ενός κειμένου και κάνετε κλικ, εμφανίζεται ένα παράθυρο με τον ορισμό της συγκεκριμένης λέξης. Μπορείτε επίσης να τοποθετήσετε το δείκτη σε αναγνωρίσιμα κουμπιά και όταν κάνετε κλικ να εκτελεστεί κάποια ενέργεια.
Διεπαφές «ένδειξη και κλικ» Προφανώς αυτό το στυλ σχετίζεται με το στυλ WIMP. Ωστόσο η φιλοσοφία στην οποία βασίζεται είναι απλούστερη και σχετίζεται πιο στενά με το σκεπτικό του υπερκειμένου (hypertext). Επιπλέον το στυλ «ένδειξη και κλικ» δε χρησιμεύει μόνο σε διεπαφές οι οποίες βασίζονται στη χρήση του ποντικιού. Χρησιμοποιείται επίσης σε πληροφοριακά συστήματα με οθόνες αφής. Σε αυτή την περίπτωση συνδυάζεται συνήθως με ένα βασιζόμενο σε μενού στυλ διεπαφής. Το στυλ «ένδειξη και κλικ» χρησιμοποιείται ευρύτατα στις ιστοσελίδες. Οι ιστοσελίδες ενσωματώνουν όλους τους προαναφερθέντες μηχανισμούς πλοήγησης. Λέξεις που εμφανίζονται με έμφαση στην οθόνη (highlighted words) Χάρτες με ενεργές περιοχές Κουμπιά με εικονίδια στην πρόσοψή τους
Υπαινισσόμενη χρήση
Υπαινισσόμενη Χρήση (affordance) Η ιδιότητα πολλών συσκευών και χειριστηρίων να κάνουν σαφή το χειρισμό τους στο χρήστη με το σχήμα και την κατασκευή τους Ένα πλήκτρο υπαινίσσεται το πάτημα του Μια καρέκλα υπαινίσσεται ότι κάποιος μπορεί να καθίσει πάνω της Υπάρχουν πολλά παραδείγματα από θύρες και ντουλάπια που δεν είναι προφανές πώς ανοίγουν
Υπαινισσόμενη Χρήση (affordance)
Υπαινισσόμενη Χρήση (affordance)
Υπαινισσόμενη Χρήση (affordance)
Διεπαφές με τρισδιάστατα χαρακτηριστικά
Διεπαφές με τρισδιάστατα χαρακτηριστικά Παρατηρείται μια διαρκώς αυξανόμενη χρήση των εφέ τρισδιάστατης εμφάνισης. Το πιο εμφανές αποτέλεσμα είναι η εικονική πραγματικότητα, η οποία όμως αποτελεί μόνο ένα υποσύνολο των πολλών τεχνικών που έχει στη διάθεσή του ένας σχεδιαστής. Μια απλή τεχνική είναι η χρήση των συστατικών του στυλ WIMP (κουμπιά, μπάρες κύλισης, κ.α.), αλλά με τρισδιάστατη εμφάνιση, η οποία επιτυγχάνεται με την κατάλληλη χρήση σκίασης. Μια άτυπη σύμβαση προϋποθέτει την ύπαρξη μιας φωτεινής πηγής στην πάνω δεξιά γωνία. Όταν υλοποιούνται σωστά, οι ανάγλυφες περιοχές είναι εύκολα προσδιορίσιμες και μπορούν να χρησιμοποιηθούν για τον τονισμό των ενεργών περιοχών. Δυστυχώς, σε ορισμένες διεπαφές αυτά τα εφέ χρησιμοποιούνται αδιακρίτως σε κάθε περιοχή κειμένου, περίγραμμα και μενού, οπότε η αίσθηση της διαφοροποίησης χάνεται.
Διεπαφές με τρισδιάστατα χαρακτηριστικά Μια πιο πολύπλοκη τεχνική χρησιμοποιεί διεπαφές με τρισδιάστατους χώρους εργασίας. Τα αντικείμενα που περιέχονται σε τέτοια συστήματα είναι συνήθως επίπεδα, αλλά εμφανίζονται με προοπτική όταν βρίσκονται υπό γωνία σε σχέση με το θεατή και το μέγεθος τους μειώνεται όταν απομακρύνονται από αυτόν. Παράδειγμα το Web-book Τα τρισδιάστατα περιβάλλοντα εργασίας παρέχουν επιπλέον χώρο, αλλά με πιο φυσιολογικό τρόπο από ότι η μετατροπή των παραθύρων σε εικονίδια. Τέλος, υπάρχουν τα συστήματα εικονικής πραγματικότητας και οπτικοποίησης πληροφοριών, όπου ο χρήστης μπορεί να μετακινείται μέσα σε έναν τεχνητό τρισδιάστατο κόσμο
Διεπαφές με τρισδιάστατα χαρακτηριστικά Όλοι αυτοί οι μηχανισμοί έχουν κοινά στοιχεία με άλλα στυλ διάδρασης, κυρίως η χρήση ανάγλυφων στοιχείων σε διεπαφές WIMP). Ωστόσο η διάδραση με τρισδιάστατες διεπαφές έχει ένα μοναδικό στο είδος της γνώρισμα: μας ενθαρρύνει να χρησιμοποιήσουμε ικανότητες οικείες από τον πραγματικό κόσμο και να τις μεταφράσουμε στον ηλεκτρονικό κόσμο. Στις δισδιάστατες διεπαφές, ο αρχάριος χρήστης πρέπει να μάθει ότι μια ελλειπτικού ή τετράγωνου σχήματος περιοχή που περιλαμβάνει μια λέξη ή μια εικόνα είναι ένα κουμπί το οποίο μπορεί να πατηθεί. Αντίθετα, η εμφάνιση ενός τρισδιάστατου κουμπιού λέει από μόνη της «πάτησε με». Επιπλέον, τα πολυπλοκότερα τρισδιάστατα περιβάλλοντα μας προσκαλούν και μας ενθαρρύνουν να κινούμαστε μέσα σε αυτά, αντί να λειτουργούμε σαν παθητικοί χρήστες.
Windows 7
Windows 7 Η Microsoft έχει δημιουργήσει έναν εξαιρετικό οδηγό δημιουργίας διεπαφών που αξιοποιούν το παρεχόμενο στυλ αλληλεπίδρασης Μια σύντομη παρουσίαση
Στυλ διάδρασης http://www.dontclick.it/
Παραδειγματικές εφαρμογές Video 1 Video 2 Video 3 Video 4
Ολοκλήρωση πρώτου μέρους μαθήματος Α) γενικά στοιχεία για την αλληλεπίδραση και την αξία της μελέτης της Β) Ο άνθρωπος (φυσιολογικά και γνωστικά χαρακτηριστικά) Γ) Ο υπολογιστής (συσκευές εισόδου, συσκευές εξόδου, ο πανταχού παρών υπολογιστής) Δ) Η αλληλεπίδραση (μοντέλα αλληλεπίδρασης, στυλ αλληλεπίδρασης)
Επόμενη διάλεξη Ανθρωποκεντρική σχεδίαση Επιλογή θεμάτων εργασιών και ομάδων