6.Η διάδραση (human-computer INTERACTION) Τρόποι (Στυλ) Αλληλεπίδρασης Τεχνολογίες Προσβασιµότητας

Transcript

1 6.Η διάδραση (huma-computer INTERACTION) Τρόποι (Στυλ) Αλληλεπίδρασης Τεχνολογίες Προσβασιµότητας

2 Πώς εισάγουµε µια ηµεροµηνία; Διαφορετικά στυλ Αλληλεπίδρασης Γραµµή εντολών Μενού Απευθείας χειρισµός

3 Διαφορετικοί τρόποι αλληλεπίδρασης (στυλ) Γραµµή εντολών (commad lie) Μενού επιλογών (meu) Συµπλήρωση φορµών Φυσική γλώσσα (atural laguage) Ερωταποκρίσεις και διάλογος µέσω ερωτηµάτων (questio/ aswer ad query dialog) Απευθείας χειρισµός (direct maipulatio) Παραθυρικά περιβάλλοντα (WIMP) Εικονική πραγµατικότητα Μια µατιά στο µέλλον (νέοι τρόποι αλληλεπίδρασης)

4 Γραµµή Εντολών (1/2) Απευθείας διατύπωση οδηγιών προς τον υπολογιστή, µέσω πληκτρολογούµενων εντολών (συντοµογραφίες ή ολόκληρες λέξεις) και λειτουργικών πλήκτρων (fuctio keys, π.χ. F1). Ιστορικά ο πιο παλιός τρόπος αλληλεπίδρασης ανθρώπου υπολογιστή Σήµερα χρησιµοποιούνται συµπληρωµατικά του απ ευθείας χειρισµού ή από πεπειραµένους χρήστες

5 Γραµµή Εντολών (2/2) Πλεονεκτήµατα δυνατότητα που παρέχει σε έµπειρους χρήστες να εκτελούν µε γρήγορο και αποτελεσµατικό τρόπο σύνθετες λειτουργίες. πρωτοβουλία ενεργειών στο χρήστη Μειονεκτήµατα όχι κατάλληλη για άπειρους ή ευκαιριακούς χρήστες, αυξηµένη δυσκολία στην εκµάθηση και χρήση. ο χρήστης πρέπει να θυµάται εντολές. σε περιπτώσεις σφαλµάτων συχνά δεν είναι κατατοπιστικές

6 Μενού Επιλογών (1/3) Μία λίστα από επιλογές από τις οποίες ο χρήστης διαλέγει όποια επιθυµεί Pull-dow meu Pop-up meu Text Meu Pie Meu Toolbar Ribbo

7 Μενού Επιλογών (2/3) Πλεονεκτήµατα λίγη πληκτρολόγηση, εύκολη διαχείριση λαθών µικρό µνηµονικό φορτίο (οι διαθέσιµες επιλογές είναι ορατές) δυνατότητα στο σχεδιαστή για δόµηση του διαλόγου Μειονεκτήµατα µικρότερη αποδοτικότητα σε σχέση µε γραµµή εντολών καταλαµβάνουν πολύτιµο χώρο στην οθόνη δυσκολία εισαγωγής δεδοµένων από τον χρήστη

8 Μενού Επιλογών (3/3) Αρχές και οδηγίες σχεδιασµού Δηµιουργήστε λογικές και αµοιβαία αποκλειόµενες κατηγορίες Ελαχιστοποιήστε το βάθος (depth) έναντι του πλάτους (breadth) Επιλέξτε να απενεργοποιείτε επιλογές όταν δεν χρειάζονται Συνέπεια στη χρήση ετικετών ως προς γραµµατικό στυλ και θέση Ταξινοµήστε κατάλληλα τις ετικέτες των επιλογών (π.χ. συχνότητα χρήσης, αλφαβητικά, τυχόν συµβάσεις κλπ) Παρέχετε ανάδραση για την επιλογή αντικειµένων στο µενού (π.χ. αλλαγή σκίασης, χρώµατος κλπ) Χρησιµοποιήστε Pie meus για ιεραρχίες µε 1-2 επίπεδα Διευκολύνετε την προς τα πίσω πλοήγηση Δηµιουργήστε συντοµεύσεις σε σηµαντικές επιλογές (π.χ. ctrl + s => save)

9 Το πρόβληµα της οργάνωσης των επιλογών Η µέθοδος card sortig (λαµβάνοντας υπόψη τη γνώµη των χρηστών) Οργάνωση µε βάση τις τυπικές εργασίες δοµή εργασιών και ανάλυση τους σε υπο-εργασίες (χρήση τεχνικών task aalysis) Άλλα λογικά µοντέλα οργάνωσης των επιλογών (αλφαβητικά κλπ)

10 Φόρµες (1/3) Μια οθόνη η οποία µοιάζει µε έντυπη φόρµα και περιλαµβάνει ειδικές θέσεις (πεδία) για συµπλήρωση στοιχείων. TextLabel, TextBox, ListBox, ComboBox, CheckBox, Butto κλπ

11 Φόρµες (2/3) Πλεονεκτήµατα απευθύνεται σε όλους και απαιτεί ελάχιστη εκπαίδευση επιτρέπει το σχεδιασµό δοµηµένης αλληλεπίδρασης δεν απαιτεί µνηµονικό φορτίο ο χρήστης έχει εποπτεία µεγάλου τµήµατος της φόρµας που συµπληρώνει και αισθάνεται ότι ελέγχει την όλη διαδικασία Μειονεκτήµατα µεγάλη απαίτηση για χώρο οθόνης προϋποθέτουν τη γνώση των έγκυρων τιµών εισόδων απαιτούν ικανότητα πληκτρολόγησης

12 Φόρµες (3/3) Αρχές και οδηγίες ο τίτλος κάθε φόρµας πρέπει να είναι σαφής και κατατοπιστικός η προτροπή προς τον χρήστη πρέπει να είναι λιτή και περιεκτική, προσωπικός τόνος πρέπει να αποφεύγεται πληροφορίες για νέους και ευκαιριακούς χρήστες πρέπει να παρέχονται σε ξεχωριστές οθόνες µε εύκολη πρόσβαση. λογική διάταξη πεδίων κάλυψη οθόνης µε οµοιόµορφη πυκνότητα. οµοιοµορφία στη σύνταξη των βοηθητικών φράσεων, µηνυµάτων σφάλµατος και στην ορολογία σε όλες τις οθόνες. να γίνεται σαφές στους χρήστες το µέγεθος των πεδίων εισαγωγής πρέπει να παρέχεται η δυνατότητα αλλαγών ή διόρθωσης σφαλµάτων έγκαιρος έλεγχος εσφαλµένων τιµών. πρέπει να αναφέρονται σαφώς τα προαιρετικά πεδία αν υπάρχουν σαφείς οδηγίες για την ολοκλήρωση.

13 Φυσική Γλώσσα (1/2) Επιτρέπει στους χρήστες να εκφράσουν αιτήµατα σε µια εφαρµογή λογισµικού στη φυσική τους γλώσσα.

14 Φυσική Γλώσσα (2/2) Πλεονεκτήµατα Φυσικότητα φυσικής γλώσσας Ευέλικτη και αποδοτική Μειονεκτήµατα Ασάφεια που χαρακτηρίζει τη φυσική γλώσσα Τεχνικές δυσκολίες ανάπτυξης συστηµάτων φυσικής γλώσσας Ανθρωποµορφισµός

15 Ερωταποκρίσεις (1/2) Ο χρήστης καλείται να απαντήσει σε µια σειρά ερωτήσεων (κυρίως µε απαντήσεις του στυλ «ναι/όχι» ή µέσω αριθµηµένων επιλογών) και καθοδηγείται βήµα προς βήµα καθ όλη τη διάρκεια της διάδρασής του µε το σύστηµα. Βήµα 1 Βήµα 2 Βήµα 3

16 Ερωταποκρίσεις (2/2) Πλεονεκτήµατα Εύκολες στην εκµάθηση και χρήση Μικρό µνηµονικό φορτίο (χωρίζουν την εργασία σε βήµατα) Δυνατότητα στο σχεδιαστή για δόµηση του διαλόγου Μειονεκτήµατα Περιορισµένη ισχύ (δύσκολο να οριστούν συγκεκριµένα βήµατα σε πολλές εργασίες) Συχνά είναι χρονοβόρα η ανάκαµψη από λάθη

17 Απευθείας χειρισµός (1/5) Περιβάλλον απευθείας χειρισµού ορίζεται µια διεπιφάνεια χρήστη στην οποία: τα αντικείµενα ενδιαφέροντος του χρήστη αναπαρίστανται στην οθόνη εικονικά οι ενέργειες του χρήστη πάνω στα αντικείµενα αυτά έχουν άµεσο αποτέλεσµα, είναι αυξητικού χαρακτήρα (κάθε νέα ενέργεια λαµβάνει υπόψη όλες τις προηγούµενες) και είναι αντιστρεπτές Αντί για εντολές ο χρήστης απ-ευθείας χειρίζεται τα αντικείµενα του ενδιαφέροντός του Σήµερα αποτελεί το κυρίαρχο στυλ αλληλεπίδρασης

18 Απευθείας χειρισµός (2/5)

19 Απευθείας χειρισµός (3/5) Πλεονεκτήµατα ευκολία εκµάθησης (αναγνωρίζω χειριστήρια, δεν θυµάµαι εντολές) το άµεσο αποτέλεσµα των ενεργειών, συνεπάγεται επιβεβαίωση της προόδου, ή έγκαιρη διάγνωση σφαλµάτων. απαιτούνται ελάχιστα µηνύµατα σφάλµατος παρέχεται η δυνατότητα στους έµπειρους χρήστες να ενεργούν γρήγορα εκτελώντας σύνθετες λειτουργίες οι ευκαιριακοί χρήστες µπορούν να θυµούνται τη χρήση του συστήµατος η αντιστρεψιµότητα των ενεργειών περιορίζει το άγχος για τις συνέπειες εσφαλµένων χειρισµών, οι χρήστες έχουν εµπιστοσύνη στο σύστηµα αφού αισθάνονται υπό έλεγχο και σε θέση να προβλέψουν τα αποτελέσµατα των ενεργειών τους

20 Απευθείας χειρισµός (4/5) Μειονεκτήµατα Δυσκολία εικονικής αναπαράστασης αφηρηµένων ή σύνθετων εννοιών. Πολλά εικονικά σύµβολα δεν είναι εύκολο να γίνουν άµεσα κατανοητά, αφού η έννοια που συνεπάγεται µια εικόνα διαφέρει ανάλογα µε το πολιτισµικό και γνωστικό υπόβαθρο του χρήστη, σε αντίθεση µε µια λέξη που είναι πιο σαφής. Μικρή ταχύτητα χειρισµών για έµπειρους χρήστες που επιτυγχάνουν µεγαλύτερες ταχύτητες µέσω εντολών που πληκτρολογούν παρά µε χειρισµό εικονιδίων µέσω δεικτικών συσκευών

21 Απευθείας χειρισµός (5/5) Αρχές και οδηγίες Αρχή υπαινισσόµενης χρήσης (affordace): Τα αντικείµενα πρέπει να υπαινίσσονται τη χρήση τους (οπτικοί υπαινιγµοί, ακουστικοί υπαινιγµοί κλπ) Αρχή τήρησης περιορισµών: Να τηρούνται οι φυσικοί, σηµασιολογικοί, πολιτισµικοί και λογικοί περιορισµοί που αφορούν τα αντικείµενα Αρχή αντιστοιχίας χειριστηρίων-λειτουργιών: Να υπάρχει σαφής αντιστοιχία µεταξύ χειριστηρίων-λειτουργιών, Αρχή της ανάδρασης: Να παρέχεται ανάδραση σχετικά µε το ποια ενέργεια έχει πραγµατοποιηθεί και τι αποτελέσµατα έχει επιφέρει

22 Αρχή υπαινισσόµενης χρήσης (affordace)

23 Αρχή τήρησης περιορισµών Κάδος ανακύκλωσης? Right-to-left Iterface Άδειος Κάδος ανακύκλωσης?

24 Αρχή αντιστοιχίας χειριστηρίων-λειτουργιών Ποιο κουµπί ανοίγει ποιο µάτι? Τι αποτέλεσµα περιµένετε? Airbus A380

25 Αρχή της ανάδρασης Οπτική Visited Not visited Ακουστική π.χ. Ήχος διαγραφής αρχείου Ολοκλήρωση διαδικασίας

26 Το στυλ αλληλεπίδρασης WIMP (Widows, Icos, Meus, Poiter) Οι σύγχρονες διεπιφάνειες είναι συνδυασµός πολλών στυλ, κυρίως συνδυάζουν: Απευθείας χειρισµό, Μενού, Φόρµες Παράθυρα (Widows) Περιοχές στην οθόνη που συµπεριφέρονται ανεξάρτητα Εικονίδια (Icos) Συντοµεύσεις για την εκτέλεση ενεργειών (π.χ. "άνοιξε το Word") Μενού (Meus) Παρουσιάζει διαθέσιµων επιλογών σε κάθε χρονική στιγµή Δείκτης (Poiter) Απαιτείται η ένδειξη και επιλογή αντικειµένων από την οθόνη Παρέχει ανάδραση µεταξύ διαφορετικών καταστάσεων (π.χ. βέλος, κλεψύδρα κλπ)

27 WIMP Widows 7

28 WIMP MacOS-X

29 Εικονική πραγµατικότητα (1/2) Επέκταση του απευθείας χειρισµού σε εικονικούς χώρους

30 Εικονική πραγµατικότητα (2/2) Όταν η πραγµατικότητα είναι: απροσπέλαστη (π.χ. εχθρική χώρα, µακρινός πλανήτης, περιβάλλον υψηλής ραδιενέργειας) ή, επικίνδυνη για πειραµατισµό και εκπαίδευση (προσοµοιωτές πτήσης) ή, διαφορετικών διαστάσεων για τις ανθρώπινες εµπειρίες (ατοµικός και µοριακός κόσµος, ή πλανητικό σύµπαν). συστήµατα ολικής εµβάπτισης του χρήστη (immersio systems), (datasuite) επιτραπέζια συστήµατα (desktop VR systems)

31 Μια µατιά στο µέλλον (νέοι τρόποι αλληλεπίδρασης) (1/2) BeThere: 3D Mobile Collaboratio with Spatial Iput (Sodhi et al., 2013) [τοπικά] A Multi-touch Iterface for Fast Architectural Sketchig ad Massig (Su et al., 2013) [τοπικά] Flexpad: Highly Flexible Bedig Iteractios for Projected Hadheld Displays (Steimle et al., 2013) [τοπικά] GravitySpace: Trackig Users ad Their Poses i a Smart Room Usig a Pressure-Sesig Floor (Bräzel et al., 2013) [τοπικά] Sublimate: State-Chagig Virtual ad Physical Rederig to Augmet Iteractio with Shape Displays (Leithiger et al., 2013) [τοπικά] NailDisplay: Brigig a Always Available Visual Display to Figertips (Su, 2013) [τοπικά] Squarig the Circle: How Framig Iflueces User Behavior aroud a Seamless Cylidrical Display (Beyer et al., 2013) [τοπικά]

32 Μια µατιά στο µέλλον (νέοι τρόποι αλληλεπίδρασης) (2/2) Fillables: Everyday Vessels as Tagible Cotrollers with Adjustable Haptics (Corste et al., 2013) [τοπικά] LaserOrigami: Laser-Cuttig 3D Objects (Mueller et al., 2013) [τοπικά] Music, Techology, ad Huma-Computer Iteractio (Bevilacqua et al., 2013) [τοπικά]

33 Ψηφιακά περιβάλλοντα στο Μουσείο: Πρόσφατα ερευνητικά αποτελέσµατα Love it or Hate it! Iteractivity ad User Types (Hart et al., 2013) [τοπικά] Istagram at the Museum: Commuicatig the Museum Experiece through Social Photo Sharig (Weilema et al., 2013) [τοπικά] I See You There! Developig Idetity-Preservig Embodied Iteractio for Museum Exhibits (Cafaro et al., 2013) [τοπικά] NIME: Music, Techology, ad Huma-Computer Iteractio (Bevilacqua et al., 2013) [τοπικά] Effects of the Display Agle i Museums o User's Cogitio, Behavior, ad Subjective Resposes (Ichio et al., 2013) [τοπικά]

34 Ψηφιακά περιβάλλοντα στην Εκπαίδευση: Πρόσφατα ερευνητικά αποτελέσµατα Early Itervetio i Autism through Techology (Vekatesh et al., 2013) [τοπικά] Evaluatio of Tablet Apps to Ecourage Social Iteractio i Childre with Autism Spectrum Disorders (Hourcade et al., 2013) [τοπικά] The Desig Space of Body Games: Techological, Physical, ad Social Desig. (Segura et al., 2013) [τοπικά]