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

Transcript

1 Περιεχόµενα ΕΠΛ 435: Αλληλεπίδραση Ανθρώπου Υπολογιστή Ανάπτυξη ιαδραστικών Συστηµάτων: Τεχνικές προδιαγραφής διαλόγου ανθρώπου υπολογιστή Τι είναι τεχνικές προδιαγραφής διαλόγου Στόχοι Τεχνικές Πρωτοτυποποίηση Τι είναι πρωτότυπο; Γιατί χρειαζόµαστε πρωτότυπα; Κατηγορίες πρωτοτύπων Χαµηλή πιστότητα Ενδιάµεση πιστότητα Βιβλιογραφία Εισαγωγή Αβούρης [2000]: Κεφάλαιο 7, slides in [pdf] Dix [2004]: Chapter 16 [pdf] Preece [2002]: Chapter 9, slides in [pdf] Shneiderman [2004]: Chapter 5, [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

2 Σχεδιασµός µε πρότυπη βασική οθόνη Τι είναι οι τεχνικές προδιαγραφής διαλόγου; [ ] Ορισµός ειδικών στόχων ευχρηστίας σύµφωνα µε τις ανάγκες των χρηστών [ ] ηµιουργία οδηγιών σχεδιασµού και οδηγού στυλ αλληλεπίδρασης [ ] Ορισµός ενός µοντέλου πλοήγησης και της κυρίαρχης µεταφοράς διεπιφάνειας [ ] Ορισµός της οµάδας των βασικών οθονών: εισαγωγική οθόνη, κεντρική οθόνη (home screen), βασικές οθόνες κύριων διεργασιών. [ ] Κατασκευή πρωτοτύπου των βασικών οθονών, χρησιµοποιώντας εργαλεία γρήγορης πρωτοτυποποίησης [ ] Για το πρωτότυπο, ζητείται η γνώµη των χρηστών και γίνονται οι πρώτες µετρήσεις ευχρηστίας Είναι µεθοδολογίες περιγραφής των δράσεων του χρήστη και της απόκρισης του υπολογιστή µε µεθοδικό τρόπο και ακολουθώντας συγκεκριµένους κανόνες σύνταξης. ιάλογος είναι η συνδιάλεξη µεταξύ δύο µερών. ιακρίνεται σε: Ελεύθερο διάλογο => δεν υπάρχει συγκεκριµένη ατζέντα ή πρωτόκολλο που καθορίζει πως θα διεξαχθεί η συνδιάλεξη οµηµένο διάλογο => Υπάρχουν συγκεκριµένοι κανόνες για τον τρόπο διεξαγωγής του διαλόγου Οι διάλογοι ανθρώπου υπολογιστή είναι αυστηρά δοµηµένοι και εποµένως µπορούν να περιγραφούν µε σχετικά αυστηρό τρόπο ακολουθώντας τις τεχνικές προδιαγραφής διαλόγου Σε τι διαφέρουν οι τεχνικές προδιαγραφής διαλόγου από την Ιεραρχική Ανάλυση Εργασιών (HTA); Στην HTA ο στόχος είναι η ανάλυση σύνθετων ενεργειών του χρήστη µε σκοπό την κατανόηση των απαιτήσεων του και την σύνταξη προδιαγραφών για το σύστηµα Οι τεχνικές προδιαγραφής διαλόγου επικεντρώνονται στην επικοινωνία ανθρώπου υπολογιστή αναλύουν σε κάθε στάδιο τις πιθανές ενέργειες χρήστη και τις αντίστοιχες αποκρίσεις του συστήµατος Οι στόχοι της προδιαγραφής διαλόγου Τεχνικές προδιαγραφής διαλόγου Οδιάλογος ανθρώπου υπολογιστή µπορεί να αναφέρεται στα /στη: Semantics της επικοινωνίας: Ο χρήστης επιλέγει την εντολή print και ο υπολογιστής εκτυπώνει τα ζητούµενα ή όχι Εµφάνιση του συστήµατος (syntactic level): Ο χρήστης επιλέγει την εντολή print. Ποια οθόνη εµφανίζεται; Αν η εκτύπωση είναι αδύνατη τι µήνυµα εµφανίζεται; Κατά την σχεδίαση διεπιφάνειας ο διάλογος επικεντρώνεται στο συντακτικό επίπεδο. Οι βασικοί στόχοι σε αυτή την περίπτωση είναι η αναγνώριση και η ανάλυση: µη συµβατών ενεργειών δύσκολα αναστρέψιµων ενεργειών µη εκτελεσµένων δράσεων πιθανών λαθών πληκτρολόγησης / επιλογής ιαγραµµατικές ιαγράµµατα καταστάσεων (State Transition Networks - STN), οµηµένα διαγράµµατα Jackson (Jackson Structured Diagrams JSD) ίκτυα Petri (Petri nets) ιαγράµµατα ροής (flow charts) Κειµενοστρεφείς Συµβολισµός BNF (Backus Naur Form) Συντακτική περιγραφή γλωσσών προγραµµατισµού Κανόνες παραγωγής (Production Rules) If condition then action Συµβολισµός CSP (Communicating Sequential Process) Περιγραφή συστηµάτων µε ακολουθιακή συµπεριφορά (π.χ. Τηλεπικοινωνιακά πρωτόκολλα) Συµβολισµός UAN (User Notation Action) Λεπτοµερής περιγραφή των ενεργειών του χρήστη και της ανάδρασης της διεπιφάνειας σε επίπεδο πληκτρολογήσεων

3 ιαγραµµατικές τεχνικές ιαγράµµατα καταστάσεων (STN) Οι διαγραµµατικές τεχνικές επιτρέπουν στο σχεδιαστή να σχηµατίζει µια γρήγορη και εποπτική εικόνα του διαλόγου Τείνουν να είναι λιγότερο αυστηρές στην σύνταξη τους και την περιγραφή των διαλόγων από ότι οι κειµενοστρεφείς Υπάρχει δυσκολία περιγραφής εκτεταµένων ή σύνθετων διαλόγων µε τις τεχνικές αυτές. Στη περίπτωση αυτή τα διαγράµµατα διασπώνται σε πολλά τµήµατα µε ιεραρχικό τρόπο Περιγράφουν καλύτερα τις διεπιφάνειες «απευθείας χειρισµού» (direct manipulation) γιατί επικεντρώνονται σε «συµβάντα» που προκαλούνται (triggered) από τις ενέργειες του χρήστη. Κατάσταση Α Ενέργεια Χρήστη Απόκριση συστήµατος Κατάσταση Β ιαγράµµατα καταστάσεων (II) Κύκλοι => καταστάσεις συστήµατος Βέλη => δράσεις χρήστη / γεγονότα (απόκριση συστήµατος) Start select 'circle' Menu select 'line' click on click on centre circumference Circle 1 Circle 2 Finish rubber band draw circle click on first point double click Line 1 Line 2 Finish rubber band draw last line click on point draw a line ιαγράµµατα καταστάσεων (IIΙ) Ηονοµασία των καταστάσεων δεν παρέχει ιδιαίτερες πληροφορίες Είναι σχετικά δύσκολο να δώσεις όνοµα στις καταστάσεις Είναι περισσότερο εύκολο να τις δεις στην πράξη Start select 'circle' Menu select 'line' click on click on centre circumference Circle 1 Circle 2 Finish rubber band draw circle

4 ιαγράµµατα καταστάσεων => Παράδειγµα ιαγράµµατα καταστάσεων => Παράδειγµα: ιάγραµµα κατάστασης MY-DRAW εργαλείο σχεδίασης που σχεδιάζει κύκλους και ευθύγραµµα τµήµατα: Αν ο χρήστης θέλει να σχεδιάσει ένα κύκλο, επιλέγει το εικονίδιο κύκλος. Στη συνέχεια µε τη δεικτική συσκευή επιλέγει ένα σηµείο σαν κέντρο του κύκλου Μετακινεί την δεικτική συσκευή προς ένα άλλο σηµείο που ορίζει ένα σηµείο της περιφέρειας του κύκλου. Ενώ κινείται, εµφανίζεται µια ελαστική αναπαράσταση ενός κύκλου (rubber band) που ακολουθεί τη δεικτική συσκευή. Όταν επιλέξει το σηµείο της περιφέρειας που επιθυµεί, ο κύκλος σχεδιάζεται και επανερχόµαστε στην αρχική κατάσταση, εξερχόµενοι από τη λειτουργία <σχεδίαση κύκλος>. MY-DRAW (Α) (Β) (Ε) 0 Επιλογή κύκλος Έµφαση σε Επιλογή γραµµή Έµφαση σε εικονίδιο γραµµής 3 Κλίκ σε κέντρο κύκλου (Α) 1 Ελαστικός κύκλος 2 µε κέντρο το Α ακολουθεί τη δεικτική συσκευή Κλίκ σε πρώτο σηµείο πολυγώνου (σηµείο Γ) Ελαστική γραµµή µε αρχή το Γ ακολουθεί τη δεικτική συσκευή Κλίκ σε επόµενο σηµείο πολυγώνου (π.χ. ) 4 Κλίκ σε περιφέρεια κύκλου (σηµείο Β) Σχεδιάζεται ο κύκλος και απενεργοποιείται το Ζωγραφίζεται γραµµή µέχρι το και ελαστική γραµµή ακολουθεί τη δεικτική συσκευή ιπλό κλίκ σε τελευταίο σηµείο πολυγώνου (π.χ. Ζ) (Γ) ( ) (Ζ) Ζωγραφίζεται το τελευταίο τµήµα και απενεργοποιείται το εικονίδιο γραµµή ιαγράµµατα καταστάσεων => ιαγράµµατα καταστάσεων => Άσκηση: Εξηγήστε το διάγραµµα Ιεραρχικά διαγράµµατα καταστάσεων 0 Κλίκ σε περιφέρεια κύκλου (σηµείο Β) Σχεδιάζεται ο κύκλος Επιλογή κύκλος Έµφαση σε Επιλογή κύκλος 1 Κλίκ σε κέντρο κύκλου (Α) Ελαστικός κύκλος µε κέντρο το Α ακολουθεί τη δεικτική συσκευή 2 Χρησιµοποιούνται για την αναπαράσταση σύνθετων διαλόγων: ιάφορα επίπεδα λεπτοµέρειας Σε ανώτερα επίπεδα δηλώνεται η ύπαρξη κάπιου διαλόγου ο οποίος αναλύεται στη συνέχεια (π.χ. Το Graphics submenu στο επόµενο σχήµα) Main Menu select graphics select text Graphics Submenu Text Submenu Paint Submenu Άρση έµφασης στο select paint

5 ίκτυα Petri ίκτυα Petri => Παράδειγµα Τα δίκτυα Petri αποτελούν µία από τις παλαιότερες µεθόδους προδιαγραφής διαλόγων στην πληροφορική Γραφήµατα / δοµικά στοιχεία: Τοποθεσίες (places) όπως τις καταστάσεις στα διαγράµµατα STN Μεταβάσεις (transitions) - όπως τα βέλη στα διαγράµµατα STN Μετρητές (counters) βρίσκονται εντός των τοποθεσιών και δηλώνουν την τρέχουσα κατάσταση Χρησιµοποιούνται πολλοί µετρητές και µε διαφορετικά χρώµατα έτσι ώστε να είναι δυνατή η αναπαράσταση πολλών ενεργειών του χρήστη ταυτόχρονα: Π.χ. η µορφοποίηση κειµένου σε bold, italic ταυτόχρονα user presses Bold Bold Off user actions represented as a new counter Bold On Italic On T1 T2 T3 T4 transition fires when all input places have counters Italic Off user presses Italic ιαγράµµατα JSD Κειµενοστρεφείς τεχνικές Χρησιµοποιούνται για ιεραρχικής µορφής διαλόγου Οµοιάζουν µε την Ιεραρχική Ανάλυση Εργασιών αλλά: Αναφέρονται κυρίως στις βασικές εργασίες του συστήµατος Επιβάλλουν εκτέλεση των ενεργειών από αριστερά προς τα δεξιά Χρησιµοποιούν ειδικούς συµβολισµούς * => Επαναληπτική εκτέλεση Personnel Record ο => Εναλλακτικές επιλογές System login add change transaction * display logout delete εν δίνουν την εποπτική εικόνα που απαιτείται αλλά παρέχουν µεγαλύτερη λεπτοµέρεια Αυστηρή σύνταξη ιαδεδοµένη χρήση στην περιγραφή γλωσσών προγραµµατισµού, κατασκευή µεταγλωττιστών, περιγραφή τηλεπικοινωνιακών πρωτοκόλλων Για την περιγραφή διαλόγων στις διεπιφάνειες χρήστη χρησιµοποιείται ο συµβολισµός UAN (User Notation Action) Λεπτοµερής περιγραφή των ενεργειών του χρήστη και της ανάδρασης της διεπιφάνειας σε επίπεδο πληκτρολογήσεων

6 Κειµενοστρεφείς τεχνικές = > Backus-Naur Form Χρησιµοποιούνται για γραµµατική - συντακτική περιγραφή / ανάλυση Παράδειγµα: <Telephone book entry>::= <Name><Telephone number> <Name> ::= <Last name>, <First name> <Last name> ::= <string> <First name> ::= <string> <string> ::= <character> <character><string> <character> ::= A B C D E F G H I J K L M N O P Q R S T U V W X Y Z <Telephone number>::= (<area code>) <exchange>-<local number> <area code>::= <digit><digit><digit> <exchange>::= <digit><digit><digit> <local number>::= <digit><digit><digit><digit> <digit>::= Παράδειγµα αποδεκτής εισόδου WASHINGTON, GEORGE (301) Κειµενοστρεφείς τεχνικές = > User Action Notation (UAN) Αντικείµενα και δράσεις: M = mouse button v = down ^ = up [ ] = context of some object, e.g. [line] midpoint or [box] centrepoint ~ = κίνηση cursor Π.χ. ~[Ε] = κίνηση προς το εικονίδιο Ε K = Είσοδος χαρακτήρων από το πληκτρολόγιο K copy = literal command K(filename) = Πληκτρολόγηση για την µεταβλητή filename K(user ID = [A-Z] [A-Z 0-9] +) = Πληκτρολόγηση το User ID το οποίο πρέπει να περιέχει µόνο αλφαριθµητικά στοιχεία Ανάδραση file icon! = file icon highlights ~file icon-! = file icon unhighlights application icon!! = application file highlights differently Κειµενοστρεφείς τεχνικές = > User Action Notation (UAN) Μεγαλύτερος φορµαλισµός. Χρήση στοιχείων λογικής: = for all = not = equals * not equals icon = selected icon box > ~ = box follows cursor box corner >> ~ = box corner rubber-bands to cursor ~[x,y]* = τυχαίος αριθµός επαναλήψεων (συµπεριλαµβανοµένου και του 0) ~[x,y]+ = µία ή περισσότερες επαναλήψεις (ο αριθµός µπορεί να καθοριστεί) Κειµενοστρεφείς τεχνικές = > User Action Notation => Παράδειγµα Task: Επιλογή εικονιδίου User Actions Interface Feedback Interface State ~[file] Mv file!, forall(file!): file-! selected = file ~[x,y]* outline(file) > ~ ~[trash] outline(file) > ~, trash! M^ erase(file), trash!! selected = null