Περιεχόµενα ΕΠΛ 435: Αλληλεπίδραση Ανθρώπου Υπολογιστή Θεωρητικό Υπόβαθρο: Νοητικά Μοντέλα και Ιδεατά Μοντέλα Συστήµατος Βιβλιογραφία Νοητικά µοντέλα (Mental models) Ιδεατά Μοντέλα Συστήµατος (Conceptual Models) Τρόποι σχηµατισµού Ιδεατών Μοντέλων στους χρήστες Βιβλιογραφία Νοητικά Μοντέλα (Mental Models) Αβούρης [2000]: Κεφάλαιο 2, pp. 52-62, slides in [pdf] Preece [2002]: Chapter 2, slides in [pdf] Norman [2001]: Chapter 1, slides in [pps] Design of Everyday Things, by S. Greenberg, slides in [pdf] Είναι νοητικές αναπαραστάσεις της πραγµατικότητας µέσω των οποίων µπορούµε να προβλέψουµε τη χρήση συσκευών ή διατάξεων ή να αναπτύξουµε τρόπους αντιµετώπισης προβληµάτων και να δοκιµάσουµε εναλλακτικές λύσεις. ιακρίνονται σε: οµικά µοντέλα (structured or surrogate models) Λειτουργικά µοντέλα (functional models)
Νοητικά Μοντέλα (ΙΙ) οµικά µοντέλα: Περιγράφουν πλήρως τη δοµή ενός συστήµατος / συσκευής και την αρχή λειτουργίας του / της. Απαραίτητα εάν κάτι δε λειτουργεί ικανοποιητικά. Οι κατασκευαστές και επισκευαστές συστηµάτων πρέπει να έχουν πολύ καλή γνώση των αντίστοιχων δοµικών µοντέλων των συστηµάτων αυτών. Λειτουργικά µοντέλα: εν περιγράφουν την ακριβή δοµή των συστηµάτων αλλά τις αρχές λειτουργίας. Σε πολλές περιπτώσεις δηµιουργούνται µε τη µεταφορά της εµπειρίας ενός χρήστη από άλλη συσκευή ή περιοχή γνώσης. Με την εκτεταµένη εξάπλωση της τεχνολογίας (και την πληθώρα συστηµάτων που µας περιβάλλουν) οι χρήστες περιορίζονται στη γνώση µόνο των λειτουργικών µοντέλων των συστηµάτων. Μεταφορά Γνώσης και Νοητικά Μοντέλα Ξεκινάει κάποιος να πάει στη δουλεία του στις 6:30 το πρωί µία παγωµένη µέρα του Ιανουαρίου Σε ποια θέση θα τοποθετήσει τη ροή αέρα (1,2,3 ή 4) στο σύστηµα θέρµανσης του αυτοκινήτου του; Επιστρέφει κάποιος στο σπίτι µετά από µέρες µια κρύα νύχτα του Χειµώνα και το βρίσκει εντελώς παγωµένο. Ενεργοποιεί το θερµοστάτη (αυτόνοµη θέρµανση). Σε τι θερµοκρασία θα το βάλει κατά τη γνώµη σας: 18 βαθµούς µέγιστη δυνατή Εξηγήσετε τη συµπεριφορά του µε βάση το νοητικό µοντέλο του θερµοστάτη; Πως έχει δηµιουργηθεί αυτό το νοητικό µοντέλο; Νοητικά Μοντέλα (ΙΙΙ) Να καταγράψετε το δικό σας νοητικό µοντέλο που αφορά τις µηχανές ATM τραπεζών που χρησιµοποιείτε µε βάση τις εξής ερωτήσεις: Τι υπάρχει στην κάρτα σας; Τι συµβαίνει όταν εισάγετε λάθος κωδικό PIN; Γιατί υπάρχουν καθυστερήσεις κατά τη διαδικασία; Γιατί κατά τη διαδικασία η κάρτα παραµένει στη µηχανή; Μετράτε τα χρήµατα στο τέλος, γιατί; Κάντε τις ίδιες ερωτήσεις σε ένα τραπεζικό στέλεχος Ιδεατά µοντέλα συστήµατος (Conceptual Models) Ονοµάζονται όλα τα νοητικά µοντέλα που εµπλέκονται κατά τις φάσεις σχεδίασης ανάπτυξης και λειτουργίας ενός υπολογιστικού συστήµατος. Με απλά λόγια: οι διαφορετικοί τρόποι µε τους οποίους το σύστηµα γίνεται αντιληπτό από τους σχεδιαστές και τους χρήστες του. ιακρίνονται σε δύο κατηγορίες: Μοντέλα Σχεδιαστή Μοντέλα Χρήστη
Ιδεατά µοντέλα συστήµατος (ΙΙ) Ιδεατά µοντέλα συστήµατος (ΙΙΙ) Τα µοντέλα σχεδιαστή ή µοντέλα συστήµατος είναι τα νοητικά µοντέλα που οι σχεδιαστές αναπτύσσουν για το σύστηµα και την αλληλεπίδραση του µελλοντικού χρήστη µε αυτό (δοµικά και λειτουργικά µοντέλα). Τα µοντέλα χρήστη είναι τα νοητικά µοντέλα που ο χρήστης τελικά αναπτύσσει κατά την εκµάθηση και χρήση του συστήµατος (λειτουργικά µοντέλα). Σύµφωνα µε τις αρχές του ανθρωποκεντρικού σχεδιασµού τα νοητικά Design Model µοντέλα σχεδιαστή και χρήστη πρέπει να απέχουν Designer όσο το δυνατόν λιγότερο. εδοµένου ότι ο χρήστης σχηµατίζει εικόνα για το σύστηµα κυρίως µέσω της διεπιφάνειας χρήστη γίνεται αντιληπτό πόσο σηµαντικό ρόλο έχει αυτή στην δηµιουργία επιτυχηµένων διαδραστικών συστηµάτων image User's model User Πως οδηγούµε το χρήστη στη δηµιουργία του σωστού ιδεατού µοντέλου; Ηχρήση µεταφορών στις διεπιφάνειες χρήστη (Ι) Ηεικόνα του συστήµατος πρέπει να: Χρησιµοποιεί τη σωστή µεταφορά (interface metaphor) εφόσον υπάρχει τέτοια Παρέχει οπτικά αντικείµενα των οποίων η χρήση συνάγεται από τη µορφή τους (visual affordance) Χρησιµοποιεί σωστή ταύτιση εργαλείων - χειριστηρίων προς λειτουργίες (visual mapping) ώστε να περιορίζεται το χάσµα εκτέλεσης (gulf of execution) Χρησιµοποιεί περιορισµούς στις δυνατές Design Model ενέργειες χρήστη για προστασία από σφάλµατα (constraints) Designer Παρέχει αποτελεσµατική πληροφόρηση για την κατάσταση του συστήµατος µετά από κάθε ουσιαστική δράση του χρήστη (causality of interaction) ώστε να µειωθεί το χάσµα εκτίµησης (gulf of evaluation) Παρέχει οδηγίες χρήσης που είναι σύµφωνες µε την εικόνα του συστήµατος (instructions augment visuals) image User's model User Η διαπροσωπεία του συστήµατος σχεδιάζεται ώστε να απεικονίζει φυσικές οντότητες µε τις οποίες ο χρήστης είναι εξοικειωµένος. Με αυτό τον τρόπο ο χρήστης χρησιµοποιώντας το φυσικό ανάλογο ως παράδειγµα µπορεί να προβλέψει σε µεγάλο βαθµό τη χρήση του συστήµατος. Στην ουσία µε το τρόπο αυτό ο χρήστης χτίζει το σωστό ιδεατό µοντέλο για το σύστηµα Επιτρέπει την χρήση υπολογιστικών συστηµάτων σε ευρείες µάζες πληθυσµού
Ηχρήση µεταφορών στις διεπιφάνειες χρήστη (ΙΙ) Προβλήµατα από τη χρήση µεταφορών στη διεπιφάνεια χρήστη: Η εύρεση κατάλληλων µεταφορών δεν είναι πάντα εύκολη (ποια µεταφορά χρησιµοποιούν τα Windows;) Η µεταφορά στο δισδιάστατο χώρο µπορεί να δηµιουργήσει ρήξη µε πολιτισµικούς και ηθικούς κανόνες (είναι δυνατό να τοποθετείτε ο κάδος ανακύκλωσης επί του γραφείου;) Ωθεί τους χρήστες να κατανοούν το σύστηµα µόνο µέσω της µεταφοράς και να αγνοούν σηµαντικές λειτουργίες οι οποίες δεν απεικονίζονται καθαρά από τη µεταφορά Περιορίζουν την δηµιουργικότητα το σχεδιασµό όσον αφορά την ανάπτυξη νέων ιδεατών µοντέλων για τους χρήστες Ανεπαρκείς ή κακές µεταφορές διαιωνίζονται λόγω της ευρείας χρήσης τους Visual Affordance (Ι) Είναι η ιδιότητα ενός αντικειµένου να προδιαθέτει τη σωστή χρήση του µε βάση την εµφάνιση και τις πραγµατικές του ιδιότητες Η εµφάνιση υποδεικνύει το τρόπο χρήσης: Καρέκλα => κάθοµαι Τραπέζι => τοποθετώ αντικείµενα πάνω Πόµολο => στρίβω Σχισµές => τοποθέτηση αντικειµένου Πλήκτρα => πιέζω Υπολογιστής =>? Κανόνας σχεδίασης: Σύνθετα αντικείµενα και συστήµατα µπορεί να χρειάζονται οδηγίες χρήσης. Για τα απλά όµως πρέπει να είναι αυτονόητη η χρήση τους Visual Affordance (ΙΙ) Visual Affordance Προβλήµατα sliders for sliding dials for turning Is this a graphic or a control? A button is for pressing, but what does it do? Visual affordances for window controls are missing! are these buttons? what does this button do? IBM Real Phone text is for editing, but it doesn t do it.
Visual Affordance Προβλήµατα (II) Handles are for lifting, but these are for scrolling! Οπτική Ταύτιση (Mapping) Ταύτιση: Το σύνολο των δυνατών σχέσεων ανάµεσα σε αντικείµενα Οπτική Ταύτιση Η σχέση ανάµεσα στα χειριστήρια και στις ενέργειες ελέγχου Βασικές αρχές οπτικής ταύτισης Αιτία αποτέλεσµα Στρίψιµο του τιµονιού αριστερά οδηγεί σε στρίψιµο του αυτοκινήτου προς τα αριστερά Χρήση διαγραµµάτων µίµησης Μάτια κουζίνας και αντίστοιχα πόµολα from AudioRack 32, a multimedia application Οπτική Ταύτιση - Παράδειγµα Οπτική Ταύτιση Παράδειγµα Σχεδίασης arbitrary paired full mapping Cursor re-enforces selection of current item Only active pallette items visible back right front left back left front right 2 4 possibilities, requires: -visible labels + memory back front front back 2 possibilities per side =4 total possibilities Depressed button indicates current mapped item
Οπτική Ταύτιση Παράδειγµα ταύτισης ένα προς πολλά Οπτική ταύτιση και Ιδεατά Μοντέλα συστήµατος Ρύθµιση θερµοκρασίας σε ψυγείο δύο τµηµάτων: Πως ρυθµίζω τη θερµοκρασία ώστε να έχω µέγιστη ψύξη στην κατάψυξη; Flash button: What it does? Οπτική ταύτιση και Ιδεατά Μοντέλα συστήµατος (ΙΙ) Ιδεατό µοντέλο για ψυγείο δύο τµηµάτων (Μοντέλο Χρήστη): Οπτική ταύτιση και Ιδεατά Μοντέλα συστήµατος (ΙΙΙ) Ιδεατό µοντέλο για ψυγείο δύο τµηµάτων (Μοντέλο Σχεδιαστή):
Οπτικοί περιορισµοί (Constraints) Οπτικοί περιορισµοί στη σχεδίαση Οπτικοί περιορισµοί: Περιορισµοί στις πιθανές δράσεις όπως συνάγονται από την εµφάνιση των αντικειµένων Αιτιατότητα (Causality) Ότι λαµβάνει χώρα αµέσως µετά από µια ενέργεια του χρήστη εκλαµβάνεται από αυτόν ως αποτέλεσµα της ενέργειας του ιερµηνεία της ανάδρασης του συστήµατος: Ο χρήστης προσπαθεί να ερµηνεύσει το αποτέλεσµα της ενέργειας του. Εποµένως πρέπει πάντοτε να δίνεται αυτή η πληροφορία στο χρήστη Λανθασµένη αιτιότητα συστήµατος οδηγεί µέχρι και σε ανάπτυξη δεισιδαιµονικών προλήψεων Αόρατα αποτελέσµατα οδηγούν Επαναληπτική εκτέλεση ενεργειών Αιτιατότητα - WYSIWYG Microsoft Word vs. Latex Image Processing