Τεχνολογία Αλληλεπίδρασης

ΣΧΕ ΙΑΣΗ ΠΕΡΙΒΑΛΛΟΝΤΟΣ ΙΕΠΑΦΗΣ ΜΕ ΤΟ ΧΡΗΣΤΗ Εαρινό Εξάµηνο 2001 ΑΛΛΗΛΕΠΙ ΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ ρ. Βαγγελιώ Καβακλή ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΙΓΑΙΟΥ, ΤΜΗΜΑ ΠΟΛΙΤΙΣΜΙΚΗΣ ΤΕΧΝΟΛΟΓΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ 1 Τεχνολογία Αλληλεπίδρασης Οι πρώτοι Η/Υ είχαν ελάχιστη διάδραση και συνεπώς τρόπο επικοινωνίας που αφορούσε µόνο εξειδικευµένους και έµπειρους χρήστες Η εµφάνιση των προσωπικών υπολογιστών σαν µηχανή υποστήριξης και αύξησης της προσωπικής παραγωγικότητας επέφερε ανάπτυξη γραφικών διεπιφανειών WIMP (Windows, Icons, Menus, Pointers) Ο νέος τρόπος αλληλεπίδρασης στηρίζεται στον απ ευθείας χειρισµό (direct manipulation) αποµάκρυνση από το γλωσσικό µοντέλο αλληλεπίδρασης WYSIWYG (What You See Is What You Get) Νέες τεχνολογίες αλληλεπίδρασης Πολυµέσα Χρήση πολλαπλών καναλιών αλληλεπίδρασης και συµπληρωµατικών µέσων Internet / WWW µετατροπή του Η/Υ σε µηχανή επικοινωνίας & συνεργασίας Μεσάζοντες χρήστη (user agents) ευφυείς και προσαρµοζόµενες διεπιφάνειες χρήστη Πανταχού παρόν υπολογιστής (ubiquitous computing) φορητοί Η/Υ, εισαγωγή Η/Υ στις περισσότερες συσκευές που µας περιβάλουν 2 1

Συσκευές Εισαγωγής Κειµένου: Πληκτρολόγιο ιάταξη QWERTY ιάταξη Dvorak 3 Ειδικές Κατηγορίες Πληκτρολογίων Πληκτρολόγιο τµηµατοποίησης πλήκτρων Πληκτρολόγιο µιας χειρός Πληκτρολόγιο χορδής 4 2

Παράδειγµα: Επιλογή συσκευής εισαγωγής κειµένου Αριθµητικό πληκτρολόγιο αλφαβητικό πληκτρολόγιο ABCD Πληκτρολόγιο χορδής Κλασικό πληκτρολόγιο QWERTY 1. Εκπαιδευτικό σύστηµα για παιδιά δηµοτικού σχολείου 2. Σύστηµα τήρησης πρακτικών της Βουλής των Ελλήνων 3. Σύστηµα εισαγωγής στοιχείων φορολογικών δηλώσεων 4. ακτυλογράφηση κειµένων ελληνικής και αγγλικής γλώσσας 5 εικτικές Συσκευές Οθόνη Επαφής (touch screen) Φωτογραφίδα (light pen) Πίνακας ψηφιοποίησης (digitising tablet) Χειριστήριο (joystick) Ιχνόσφαιρα (trackball) Ποντίκι (mouse) Άλλες συσκευές ποντίκι εδάφους επιφάνεια επαφής (touch pad) 6 3

Επιλογή εικτικών Συσκευών Συσκευή Πλεονεκτήµατα Μειονεκτήµατα Τυπικές χρήσεις οθόνη επαφής δεν απαιτείται εκπαίδευση χρηστών ή συγχρονισµός µατιού χεριού, κινδυνεύει λιγότερο από βανδαλισµούς / ρύπανση απαιτεί µη κατακόρυφη τοποθέτηση, ρύπανση οθόνης, δύσκολη επιλογή µικρών περιοχών της οθόνης, δυσκολία διεκπεραίωσης κάποιων εργασιών Κιόσκια παροχής πληροφοριών σε δηµόσιους χώρους φωτογραφίδα ακρίβεια υπολογισµού περιοχής στην οθόνη, δεν απαιτεί χώρο στο γραφείο µειωµένη λειτουργικότητα πίνακας ψηφιοποίησης Ακρίβεια, ρυθµός καταγραφής, εύκολη χρήση µεγάλο κόστος, απαιτούν µεγάλο χώρο εργασίας Βιοµηχανική σχεδίαση, χαρτογραφία χειριστήριο επιτρέπει την ενσωµάτωση πολλαπλών εντολών, χαµηλό κόστος, καταλαµβάνει µικρό χώρο µικρή ακρίβεια Μηχανές παιχνιδιών, βιοµηχανικά περιβάλλοντα, πιλοτήρια ιχνόσφαιρα ακρίβεια, δεν καταλαµβάνει ιδιαίτερο χώρο, ενσωµάτωση πολλαπλών εντολών δυσκολία χρήσης, δεν αντέχει τη ρύπανση Φορητοί Η/Υ, βιοµηχανικά περιβάλλοντα ποντίκι χαµηλό κόστος, ευκολία εκτέλεσης εργασιών, δεν απαιτεί ιδιαίτερη επιφάνεια εργασίας καταλαµβάνει χώρο, µικρή ακρίβεια, δεν αντέχει τη ρύπανση Προσωπικοί Η/Υ, εφαρµογές αυτοµατισµού γραφείου ποντίκι εδάφους δεν απαιτεί χρήση χεριών απαιτεί συγχρονισµό µατιού, ποδιών που είναι δυσκολότερο να επιτευχθεί Σε περιπτώσεις που είναι αδύνατη η χρήση χεριών 7 Παράδειγµα επιλογής δεικτικής συσκευής Έστω ότι πρέπει να επιλέξουµε κατάλληλη δεικτική συσκευή για ένα σύστηµα σχεδίασης κυκλωµάτων µεγάλης ακρίβειας Από την ανάλυση εργασιών έχουν προκύψει οι εξής απαιτήσεις ανάγκη συχνής µετακίνησης µεταξύ περιοχών του σχεδίου εστίαση σε λεπτοµέρειες σχεδιασµού (zooming) Επιλογή µεταξύ των συσκευών: χειριστήριο ποντίκι ιχνόσφαιρα 8 4

Συσκευές εξόδου Οθόνη καθοδικού σωλήνα ηλεκτρονίων (Cathode Ray Tube, CRT) Πλεονεκτήµατα υψηλός ρυθµός ανανέωσης εικόνας µεγάλη ποικιλία χρωµάτων µεγάλη φωτεινότητα σχετικά χαµηλό κόστος Μειονεκτήµατα όγκος πιθανές επιπτώσεις στην υγεία λόγω της ακτινοβολίας και των ηλεκτροστατικών και ηλεκτροµαγνητικών πεδίων Επίπεδες οθόνες ( Liquid Crystal Display, LCD, Thin Film Transistor, TFT) Πλεονεκτήµατα ελαφρές στην κατασκευή µικρός όγκος µικρή κατανάλωση ενέργειας µειωµένος κίνδυνος από ακτινοβολία σταθερότητα εικόνας Μειονεκτήµατα µικρή φωτεινότητα αργός ρυθµός ανανέωσης χαµηλή λαµπρότητα χρωµάτων µικρό εύρος γωνιών από τις οποίες ο χρήστης έχει καλή οπτική εικόνα ανάγκη ύπαρξης ισχυρής εξωτερικής πηγής φωτός υψηλό κόστος 9 Παράδειγµα Επιλογής οθόνης Να επιλέξετε µια από τις 2 οθόνες (καθοδικού σωλήνα ή υγρών κρυστάλλων) µε βάση τα παρακάτω κριτήρια: φωτεινότητα χρωµάτων µακροχρόνια έκθεση του χειριστή χρήση για εφαρµογές πολυµέσων περιβάλλον µε µειωµένο χώρο επιφάνειας γραφείου εφαρµογή που απαιτεί συχνές µετακινήσεις της συσκευής ανάγκη µεγάλης σταθερότητας εικόνας (χαµηλό flicker) Κόστος Ανάπτυξη παροχής πληροφοριών σε δηµόσιο χώρο Χαµηλή κατανάλωση ενέργειας 10 5

Νέες συσκευές Νέα γενιά υπολογιστικών συσκευών µικρών διαστάσεων υβρίδιο τηλεφώνου υπολογιστή φορητή συσκευή πρόσβασης στο διαδίκτυο (webpad) υπολογιστές παλάµης (palm computers) ηλεκτρονικές ατζέντες (personal digital assistants, PDA) Νέες απαιτήσεις στον τρόπο επικοινωνίας ανθρώπου υπολογιστή µικρός χώρος οθόνης µικρό πληκτρολόγιο, βοηθητικού χαρακτήρα Τάση επαναφοράς στην επικαιρότητα των γλωσσών εντολών µη γραφικών διεπιφανειών 11 Αναγνωσιµότητα κειµένου σε οθόνες Παράγοντες που επηρεάζουν την αναγνωσιµότητα η ποσότητα κειµένου στην οθόνη γωνία ανάγνωσης βαθµός συγκέντρωσης των χρηστών αριθµός χαρακτήρων και λέξεων ανά γραµµή χρώµα και χρωµατική αντίθεση διαστήµατα µεταξύ χαρακτήρων και γραµµών µήκος γραµµών και γραµµατοσειρά Χρήσιµοι κανόνες λέξεις µε κεφαλαία γράµµατα 20% πιο δυσανάγνωστες οι προεξοχές χαρακτήρων προς τα πάνω ή προς τα κάτω βελτιώνουν την αναγνωσιµότητα η απόσταση µεταξύ των χαρακτήρων πρέπει να είναι περίπου το 10% της απόστασης µεταξύ των λέξεων η απόσταση µεταξύ των γραµµών πρέπει να είναι τουλάχιστον το 50% του ύψους των γραµµάτων βέλτιστος αριθµός λέξεων ανά γραµµή είναι 8 15 βέλτιστο µέγεθος παραγράφου 3 5 γραµµές 12 6

Μελέτη αναγνωσιµότητας κειµένου Σε γνωρίζω από την όψη 11 mm 7,5 mm 1,8 mm 6 mm 13 Στυλ Αλληλεπίδρασης Στυλ Αλληλεπίδρασης Η αλληλεπίδραση του χρήστη µε τον υπολογιστή µπορεί να γίνει µε διαφορετικούς τρόπους Έχει παρατηρηθεί βαθµιαία µεταστροφή από από την αλληλεπίδραση που στηρίζεται σε εντολές προς την αλληλεπίδραση βασισµένη σε χειρισµό αντικειµένων που απεικονίζονται στη διεπιφάνεια ιακρίνονται τα εξής στυλ αλληλεπίδρασης (Interaction styles) γλώσσα εντολών µενού φυσική γλώσσα συµπλήρωση φορµών και λογιστικά φύλλα απευθείας χειρισµός αντικειµένων γραφικό περιβάλλον WIMP εικονική πραγµατικότητα Τα διαφορετικά στυλ µπορεί να χρησιµοποιηθούν εναλλακτικά ή να συνυπάρχουν ανάλογα µε τα χαρακτηριστικά της εργασίας και του χρήστη 14 7

Γλώσσα Εντολών Ιστορικά ο πιο παλιός τρόπος αλληλεπίδρασης ανθρώπου υπολογιστή Σήµερα χρησιµοποιούνται συµπληρωµατικά του απ ευθείας χειρισµού είτε από πεπειραµένους χρήστες Πλεονεκτήµατα επιτρέπει την εκτέλεση σύνθετων λειτουργιών µε γρήγορο τρόπο παρέχει απόλυτη πρωτοβουλία ενεργειών στο χρήστη Μειονεκτήµατα ακατάλληλο για άπειρους χρήστες απαιτεί µακροχρόνια εκπαίδευση και ικανότητα ενθύµησης εντολών αδυναµία κατατοπιστικής αντιµετώπισης όλων των συνδυασµών των εσφαλµένων εντολών που µπορεί να δώσει ο χρήστης 15 Μενού Επιλογής Εναλλακτικό στυλ αλληλεπίδρασης που αναπτύχθηκε αντιµετωπίζει κάποια από τα προβλήµατα των γλωσσών εντολών Βασίζεται στην αναγνώριση εναλλακτικών επιλογών που περιέχονται στο µενού χωρίς να απαιτεί την ενθύµηση εντολών Χρησιµοποιείται εκτεταµένα σε συνδυασµό µε άλλα στυλ αλληλεπίδρασης Πλεονεκτήµατα µικρός αριθµός πληκτρολογήσεων και κατά συνέπεια σφαλµάτων µικρές απαιτήσεις µνηµονικού φορτίου του χρήστη δυνατότητα καλής δόµησης του διαλόγου µε το χρήστη Μειονεκτήµατα καθυστέρηση σε σχέση µε γλώσσες εντολών κατανάλωση χώρου οθόνης δυσκολία εισαγωγής δεδοµένων από το χρήστη 16 8

Αρχές σχεδιασµού µενού Η δόµηση των επιλογών των µενού γίνεται συνήθως ιεραρχικά σε διαδοχικά υποµενού ώστε να καταστεί δυνατή η οργάνωση όλων των επιλογών σε ένα σύνθετο σύστηµα Κανόνες οργάνωσης µενού: Ο αριθµός επιλογών σε κάθε µενού πρέπει να είναι µεταξύ 4 και 12 Η οµαδοποίηση των επιλογών πρέπει να γίνεται µε θεµατικά κριτήρια Η µη λογική οµαδοποίηση των επιλογών αυξάνει τον αριθµό των σφαλµάτων που µπορεί να γίνει από τους χρήστες Η επιλογή από µενού γίνεται είτε απευθείας µε δεικτική συσκευή, είτε µε πληκτρολόγηση κάποιας αντιπροσωπευτικής συντόµευσης Πρέπει να υπάρχει δυνατότητα πλοήγησης στην ιεραρχία των µενού µε πρόβλεψη για αναίρεση (undo) και υποχώρηση (backtrack) 17 Παράδειγµα 18 9

Συµπλήρωση φόρµας ιευκολύνει την εισαγωγή πληροφορίας από το χρήστη στο σύστηµα Κατάλληλες υποδείξεις χρησιµοποιούνται για την κατάλληλη εισαγωγή στοιχείων κείµενο αριθµούς Πλεονεκτήµατα: Η συµπλήρωση εντύπων µε τη µορφή φόρµας είναι ευρέως διαδεδοµένη φορολογική δήλωση αιτήσεις άρα, η προσοµοίωση φορµών στον Η/Υ χρησιµοποιεί κατά µεταφορικό τρόπο την προηγούµενη εµπειρία Έχει παρατηρηθεί ότι η χρήση φορµών έναντι γλωσσών εντολών για την ενηµέρωση βάσεων δεδοµένων απαιτεί ελάχιστη εκπαίδευση βελτιώνει την απόδοση των χρηστών αυξάνει την ικανοποίηση των χρηστών ο χρήστης έχει εποπτεία µεγάλου τµήµατος της φόρµας και συνεπώς αισθάνεται ότι ελέγχει τη διαδικασία Μειονεκτήµατα χαµηλή ταχύτητα απόκρισης απαίτηση µεγάλου χώρου οθόνης απαιτείται µηχανισµός ελέγχου του δροµέα στην οθόνη 19 Αρχές σχεδίασης φορµών σαφής και κατατοπιστικός τίτλος κάθε φόρµας λιτή και περιεκτική προτροπή προς το χρήστη παροχή βοηθηµάτων για νέους / ευκαιριακούς χρήστες οργάνωση των πεδίων µε λογικό τρόπο οµοιόµορφη πυκνότητα των πεδίων στην οθόνη οµοιοµορφία στη σύνταξη φράσεων και ορολογία σε όλες τις οθόνες σαφές µέγεθος πεδίου εισαγωγής δυνατότητα αλλαγών / διορθώσεων έγκαιρος έλεγχος εσφαλµένων τιµών σαφή και κατατοπιστικά µηνύµατα λάθους σαφής αναφορά προαιρετικών πεδίων σαφείς οδηγίες ολοκλήρωσης συµπλήρωσης της φόρµας 20 10

Εφαρµογή διαδικτύου 21 Λογιστικά φύλλα Προσοµοιώνουν έντυπα λογιστικών πράξεων Επιπλέον µπορούν να αποθηκεύουν συναρτήσεις που επιτρέπουν την αυτόµατη διενέργεια πράξεων µεταξύ των περιεχοµένων των κελιών π.χ. αυτόµατος υπολογισµός αθροίσµατος µιας στήλης αριθµών Επιτρέπουν γραφική απεικόνιση της πληροφορίας Συνδυάζουν πολλαπλά στυλ αλληλεπίδρασης φόρµες µενού απευθείας χειρισµό Παραδείγµατα συστηµάτων λογιστικών φύλων VisiCalc Lotus 1-2-3 Microsoft Excel 22 11

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

Παράδειγµα Σε ποιες από τις παρακάτω περιπτώσεις πιστεύετε ότι ταιριάζει στο στυλ αλληλεπίδρασης φυσικής γλώσσας: διεπιφάνεια λειτουργικού συστήµατος λογισµικό αρχιτεκτονικής σχεδίασης σύστηµα παροχής πληροφοριών για δροµολόγια τραίνων εκπαίδευση σε µαθηµατικές έννοιες πληροφορίες τηλεφωνικού καταλόγου βιβλιογραφική αναζήτηση σε µεγάλη βιβλιοθήκη 25 Απευθείας Χειρισµός Περιβάλλον απευθείας χειρισµού ορίζεται µια διεπιφάνεια χρήστη στην οποία: τα αντικείµενα ενδιαφέροντος του χρήστη αναπαρίστανται στην οθόνη ο χρήστης χειρίζεται απευθείας τα αντικείµενα, συνήθως µε δεικτικές συσκευές οι ενέργειες του χρήστη πάνω στα αντικείµενα αυτά έχουν άµεσο αποτέλεσµα οι ενέργειες είναι αυξητικού χαρακτήρα (κάθε νέα ενέργεια λαµβάνει υπόψη όλες τις προηγούµενες) οι ενέργειες είναι αντιστρεπτές Συνεπώς πρόκειται για περιβάλλον γραφικού τύπου GUI (Graphical User Interface) Η πρώτη ευρέως διεπιφάνεια απευθείας χειρισµού ήταν το λειτουργικό σύστηµα του υπολογιστή Mackintosh της Apple το 1978, που εισήγαγε τη µεταφορά της επιφάνειας γραφείου αναπαράσταση αντικείµενων ήδη γνωστών (έγγραφα, φάκελοι, καλάθι απορριµµάτων, κ.τ.λ.), στην οθόνη χειρισµό των αντικειµένων µε χρήση δεικτικής συσκευής Σήµερα µε τη βοήθεια των συστηµάτων εικονικής πραγµατικότητας ο απευθείας χειρισµός εκτείνεται στον τρισδιάστατο χώρο, στον οποίο ο χρήστης µπορεί να χειριστεί αντικείµενα µε κατάλληλες συσκευές (dataglove, datasuite, κ.τ.λ.) 26 13

Πλεονεκτήµατα / µειονεκτήµατα Πλεονεκτήµατα εύκολη εκµάθηση µέσω παραδειγµάτων εύκολη αναγνώριση χρήσης του συστήµατος από τυχαίους χρήστες άµεσο αποτέλεσµα ενεργειών συνεπάγεται επιβεβαίωση προόδου και έγκαιρη διάγνωση εσφαλµένων ενεργειών η αντιστρεψιµότητα των ενεργειών µειώνει το άγχος για τις συνέπειες εσφαλµένων χειρισµών µεγαλύτερο αίσθηµα εµπιστοσύνης στο σύστηµα Μείωση του χάσµατος εκτέλεσης και χάσµατος εκτίµησης Μειονεκτήµατα δυσκολία εικονικής αναπαράστασης αφηρηµένων ή σύνθετων εννοιών η έννοια που συνεπάγεται µια εικόνα διαφέρει ανάλογα µε το πολιτισµικό και γνωστικό υπόβαθρο του χρήστη (αντίθετα οι λέξεις είναι περισσότερο σαφείς) περιορισµένος χώρος οθόνης του Η/Υ µειωµένη ταχύτητα µέσω χειρισµού δεικτικών συσκευών 27 Σχεδιασµός απευθείας χειρισµού Κύριες αρχές σχεδιασµού τα αντικείµενα πρέπει να υπαινίσσονται τη χρήση του οπτικοί υπαινιγµοί: ένα πλήκτρο υπαινίσσεται το πάτηµά του ακουστικοί υπαινιγµοί: χαρακτηριστικοί ήχοι λάθους ακολουθίες υπαινιγµών: η αλλαγή του δροµέα σε διπλό βέλος όταν µετακινηθεί στην άκρη του παραθύρου υπαινίσσεται τη λειτουργία της ελαστικής αύξησης του παραθύρου προς µια κατεύθυνση να τηρούνται οι φυσικοί σηµασιολογικοί περιορισµοί που αφορούν τα αντικείµενα π.χ., ένα καλάθι απορριµµάτων για να είναι χρήσιµο πρέπει να είναι τοποθετηµένο σε οριζόντια θέση, όχι ανάποδα να υπάρχει σαφής αντιστοιχία µεταξύ χειριστηρίων λειτουργιών π.χ. διάταξη ηλεκτρικών διακοπτών φωτισµού σ ένα µεγάλο δωµάτιο, ή η διάταξη ηλεκτρικών διακοπτών στην ηλεκτρική κουζίνα να παρέχεται ανάδραση (πληροφορίες σχετικά µε την εξέλιξη και το αποτέλεσµα εργασιών) οπτική: αλλαγή εικονιδίου, αλλαγή θέσης, λεκτικό µήνυµα προόδου ακουστική: ήχος διαγραφής, µεταφοράς αρχείου [Norman 88], The design of everyday things 28 14