Σχεδίαση γραφικού περιβάλλοντος διασύνδεσης χρήστη (UI)

Transcript

1 Σχεδίαση γραφικού περιβάλλοντος διασύνδεσης χρήστη (UI) Προτεραιότητες διαδραστικού σχεδιασµού: Η επικοινωνία ανθρώπου µε υπολογιστικά συστήµατα Εµπεριέχεται η έννοια της ευχρηστίας συστηµάτων Συνεπώς: ανθρωποκεντρικός σχεδιασµός. άνθρωπος υπολογιστικό σύστηµα διάδραση Ειρήνη Μαυροµµάτη

2 Ο παράγοντας άνθρωπος Περιορισµένες πήγες επεξεργασίας πληροφορίας Πληροφορία µέσω Οπτικής οδού Ακουστικής οδού Απτικής οδού Όσφρησης Κιναισθησία Η πληροφορία αποθηκεύεται στη µνήµη Η πληροφορία επεξεργάζεται και εφαρµόζεται

3 Όραση δυο στάδια φυσική απόκτηση ερεθίσµατος νοητική διαδικασία επεξεργασίας του

4 Το µάτι Μηχανισµός για να λαµβάνει φως και να το µεταλλάσσει σε ηλεκτρική ενέργεια (νευρικό ερέθισµα) Το φως αντανακλά από τα αντικείµενα Οι εικόνες είναι εστιασµένες ανάποδα στον αµφιβληστροειδή του µατιού. Το µάτι έχει γραµµώσεις για χαµηλό φως, και κώνους για χρωµατική όραση. Τα γάγγλια-κύτταρα (µυαλό) ξεχωρίζουν κίνηση και σχήµατα.

5 Μετάφραση του οπτικού σήµατος (2) φωτεινότητα υποσυνείδητη αντίδραση σε επίπεδα φωτισµού επηρεάζεται από την φωτεινότητα του αντικειµένου. µετρίσιµη µε µόλις παρατηρητές διαφορές Η οπτική ευκρίνεια αυξάνεται µε την φωτεινότητα Ηλικιωµένοι: µειώνεται η φωτεινότητα, άρα και οι ευκρίνεια χρώµα χρωµατικός τόνος, φωτεινότητα, χρωµατική ένταση, (hue, intensity, saturation) οι κώνοι είναι ευαίσθητοι στο µήκος κύµατος του χρώµατος. η ευκρίνεια του µπλε χρώµατος είναι η µικρότερη. 8% ανδρών +1%γυναικών έχουν αχρωµατοψία

6 Μετάφραση του οπτικού σήµατος (3) Το οπτικό σύστηµα αντεπεξέρχεται σε: κίνηση αλλαγές φωτός. Χρήση σύγκρισης περιεχοµένου για να λυθούν οπτικές ασάφειες. Οράµατα, οπτικά «λάθη», λόγω υπερβολικού φόρτου...

7 Οπτικές παρερµηνείες

10 ιάβασµα Σταδία: 1. Λήψη οπτικού µοτίβου (pattern) 2. Αποκωδικοποίηση του µε τη χρήση λεξικού εσωτερικών οπτικών αναπαραστάσεων Εξήγηση του µε γνώση σύνταξης, σηµαντικής ερµηνείας, κτλ. Σχήµα λέξεων-σηµαντικό για αναγνώριση. Αρνητικό κοντράστ: βελτιώνει το διάβασµα από την οθόνη. Σχόλια: Παράδειγµα οθόνης τη νύχτα. υσλεξία.

11 διάβασµα (2) Η αντίθεση σχετίζεται µε την φωτεινότητα (του αντικειµένου αλλά και του υπόβαθρου). Η ευκρίνεια αυξάνεται µε την αύξηση της φωτεινότητας. Η αναγνωσιµότητα είναι καλύτερη σε αρνητικό κοντράστ (σκουρόχρωµα γράµµατα σε ανοιχτόχρωµο υπόβαθρο), λόγω µεγαλύτερης ευκρίνειας, µεγαλύτερης φωτεινότητας. Σε συνθήκες µειωµένης φωτεινότητας του περιβάλλοντος όµως συµβαίνει το αντίθετο.

12 ιάβασµα - Παράδειγµα οθόνης τη νύχτα (1) VDO-Dayton: σύστηµα πλοήγησης αυτοκινήτου 1) Προσοχή στην οθόνη για κλάσµατα δευτερολέπτου ευκρίνεια απαραίτητη. 2) Μεταβαλλόµενες συνθήκες περιβαλλοντικού φωτισµού (πρωινό έντονο φως, λυκόφως, νυχτερινή οδήγηση) Οι εικόνες που ακολουθούν, δείχνουν τα χρώµατα και αντίθεση της οθόνης το πρωί, και την αντίστοιχη βραδινή οθόνη, (µε αντεστραµµένα χρώµατα και µειωµένη την αντίθεση, ώστε στις νυχτερινές συνθήκες φωτισµού να δίνει την ίδια ευκρίνεια). Παρατηρήστε ότι η νυκτερινή οθόνη σχεδόν δεν διακρίνεται σε έντονες συνθήκες φωτός (θα τη δείτε καλύτερα σε γεµάτη οθόνη, χωρίς πλαίσια, και µε κλειστά φώτα)

13

14

15 Κινητικά ερεθίσµατα Χρόνος ανταπόκρισης σε ερέθισµα: χρόνος αντίδρασης + χρόνος κίνησης χρόνος κίνησης εξαρτώµενος από ηλικία, φυσική κατάσταση, κ.α. χρόνος αντίδρασης - εξαρτώµενος από τον τύπο του ερεθίσµατος: οπτικό ~ 200ms ακουστικό ~ 150 ms πόνος ~ 700ms

16 Κίνηση νόµος του Fitts (1) Ο νόµος του Fitts περιγράφει το χρόνο που χρειάζεται για να βρεί κανείς ένα στόχο (στο γραφικό περιβάλλον της οθόνης, αλλά και σε φυσικά αντικείµενα όπως το πληκτρολόγιο κ.α.).

17 Κίνηση - νόµος του Fitts (2) Από το νόµος του Fitts, λοιπόν προκύπτει ότι: Η ταχύτητα πρόσβασης σε ένα στόχο, κατά την αλληλεπίδραση µε ένα σύστηµα, είναι γρηγορότερη ανάλογα µε τοµέγεθος του στόχου, και την απόσταση από αυτόν. Όσο δηλαδή µεγαλύτερος είναι ο στόχος, και όσο µικρότερη η απόσταση από αυτόν, τόσο γρηγορότερη η πρόσβαση στο στόχο αυτόν.

18 Κίνηση - νόµος του Fitts (3) Συνέπειες του ν. Fitts στη σχεδίαση διάδρασης: Όταν κάποια λειτουργία χρησιµοποιείται συχνά ή είναι κρίσιµη,και συνεπώς η πρόσβαση σε αυτή πρέπει να γίνεται γρήγορα / εύκολα είναι σκοπιµότερο να γίνεται µε: Μεγάλα κουµπιά/πλήκτρα Κοντινά κουµπιά/πλήκτρα Κουµπιά/πλήκτρα στις άκρες της οθόνης (είναι αδύνατον να µετακινήσεις τον κέρσορα παραπέρα, κλειδώνουν ). Παράδειγµα: το πλήκτρο κενού διαστήµατος (space) στο πληκτρολόγιο Περισσότερα για τον νόµο τουfitts: Quiz designed to give you Fitts

19 Επίλυση προβληµάτων Επίλυση προβληµάτων: ιαδικασία εύρεσης λύσεων σε άγνωστες εργασίες, χρησιµοποιώντας την ήδη υπάρχουσα γνώση. Υπάρχουν διάφορες θεωρίες για το πώς ο άνθρωπος επιλύει προβλήµατα. Θεωρία Gestalt η επίλυση προβληµάτων γίνεται και µε παραγωγικούς και µε αναπαραγωγικούς τρόπους. Παραγωγικοί τρόποι: βασίζονται στην ενόραση και αναδόµηση του προβλήµατος Αναπαραγωγικοί τρόποι: στηρίζονται σε προηγούµενες εµπειρίες Η θεωρία Gestalt είναι ελκυστική, άλλα και περιορισµένη αφού δεν εξηγείτε η ενόραση ή η αναδόµηση

20 Gestalt Από την Θεωρία Gestalt µπορούµε να συµπεράνουµε πως Οι άνθρωποι καταλαβαίνουν τα πράγµατα γύρω τους εξηγώντας τα µέσα από προηγούµενες εµπειρίες τους, και ότι µπορούν να λάβουν από οπτικές νύξεις. Σχετίζεται µε το πως οι άνθρωποι δηµιουργούν µία νοητική εικόνα του τί συµβαίνει. Αυτό που αντιλαµβάνονται είναι η ευκολότερη δυνατή εξήγηση, αφαιρώντας την οπτική πολυπλοκότητα. µερικές έννοιες Gestalt: Κλείσιµο: νοητικά κλείνουµε τα κενά ενός σχήµατος Συνέχεια: το µάτι συνεχίζει σε µία νοητή φορά Οµοιότητα: όταν τα αντικείµενα µοιάζουν, οµαδοποιούνται Εγγύτητα: γειτονικά αντικείµενα, σε κοντινές αποστάσεις Παράταξη: οργάνωση αντικειµένων σε σειρά ώστε να δηµιουργούν οµάδες.

21 Gestalt Έτσι, στο σχεδιασµό: αν χρησιµοποιηθούν οπτικές υποδείξεις, που παρατηρούµε ότι δεν παραπέµπουν τους χρήστες στο να εξάγουν σωστό συµπέρασµα πρέπει να ξανασχεδιάσουµε βελτιστοποιώντας ή χρησιµοποιώντας διαφορετικές οπτικές υποδείξεις.

22 Περισσότερα για Gestalt Gestalt

23 29 Μαΐου 2002 λεπτοµερής σχεδίαση για γραφικά οθονών Σχεδίαση γραφικών για χρήση σε οθόνη: µερικές οδηγίες Τι Ανάλυση: προδιαγραφές απαιτήσεων Αρχιτεκτονική συστήµατος Στην πρακτική, οι σχεδιαστές δεν ακολουθούν µία γραµµική ακολουθία σχεδιαστικών βηµάτων. Αντίθετα, κάθε στάδιο/διεργασία επηρεάζει συχνά και τις υπόλοιπες. Λεπτοµερής σχεδίαση Πώς Κώδικας και έλεγχος τµηµάτων Ενσωµάτωση έλεγχος Λειτουργία συντήρηση Ειρήνη Μαυροµµάτη

24 οδηγίες σχεδίασης γραφικών για οθόνες Το τελικό προϊόν: Που θα χρησιµοποιηθεί, σε τι κατάσταση, απο ποιόν; Φανταστείτε τον εαυτό σας στην θέση του χρήστη, σε µερικές συνήθεις καταστάσεις χρήσης της εφαρµογής / προϊόντος. Λ.χ. Σηµασία στην Απόσταση (Επηρεάζει µέγεθος γραµµάτων, χρήση χρώµατος, αντίθεσης, ευκρίνειας σχηµάτων, κτλ) Ειρήνη Μαυροµµάτη

25 οδηγίες σχεδίασης γραφικών για οθόνες Κατηγορίες ηλεκτρονικών συσκευών; 1. PDAs, ραδιοκασετόφωνα, ψηφιακές φωτογραφικές, κινητά τηλέφωνα, κ.τ.λ. 2. Συστηµα πλοήγησης αυτοκινήτου, εφαρµογές διαδραστικής τηλεόρασης, game console (εφαρµογές που χρησιµοποιούν τηλεχειριστήρια, SetTopBox). Ειρήνη Μαυροµµάτη

26 οδηγίες σχεδίασης γραφικών για οθόνες Κατηγορίες ηλεκτρονικών συσκευών; 1. PDAs, ραδιοκασετόφωνα, ψηφιακές φωτογραφικές, κινητά τηλέφωνα, κ.τ.λ. Είναι αυτόνοµα, δεν βασίζονται σε άλλες συσκευές. 2. Συστηµα πλοήγησης αυτοκινήτου, εφαρµογές διαδραστικής τηλεόρασης, game console (εφαρµογές που χρησιµοποιούν τηλεχειριστήρια, SetTopBox) Είναι συστήµατα που αποτελούνται από περισσότερες από µία συσκευές. Ειρήνη Μαυροµµάτη

27 οδηγίες σχεδίασης γραφικών για οθόνες Κατηγορίες ηλεκτρονικών συσκευών; 1. PDAs, ραδιοκασετόφωνα, ψηφιακές φωτογραφικές, κινητά τηλέφωνα, κ.τ.λ. Είναι αυτόνοµα, δεν βασίζονται σε άλλες συσκευές. - Μπορεί να έχουν ή όχι οθόνη (screen or display) - Τα θέµατα συνέπειας (που επηρεάζει σηµαντικότατα την ευχρηστία) είναι πιο άµεσα και διακριτά, αφού αφορούν µία µόνο συσκευή. 2. Συστηµα πλοήγησης αυτοκινήτου, εφαρµογές διαδραστικής τηλεόρασης, game console (εφαρµογές που χρησιµοποιούν τηλεχειριστήρια, SetTopBox) Είναι συστήµατα που αποτελούνται από περισσότερες από µία συσκευές. Για να είναι η διάδραση και η εµφάνιση στο σύνολο τους συνεπής, πρέπει να συµπληρώνουν το ένα το άλλο. Ο σχεδιαστής θα πρέπει από την αρχή να σκεφτεί πώς να κάνει το σύστηµα να δένει σαν σύνολο, µε συνέπεια. Ειρήνη Μαυροµµάτη

28 Παράδειγµα συστήµατος προϊόντων : εφαρµογή i-tv, EPG Ειρήνη Μαυροµµάτη Συνέπεια στο σύστηµα επιτυγχάνεται µε τη χρήση οπτικής αναλογίας µεταξύ στοιχείων

29 οδηγίες σχεδίασης γραφικών για οθόνες Μπορεί να σχεδιάζουµε σε διαφορετική οθόνη απο αυτήν του τελικού προϊόντος. Οι οθόνες µπορεί να διαφέρουν σε Μέγεθος Ανάλυση Τεχνολογία Περιθώρια ασφαλείας (safety area) ιαθέσιµα χρώµατα (λ.χ. LCD οθόνες). Αντίθεση, φωτεινότητα, ένταση Αναγνωσιµότητα (σχετίζεται και µε την ανάλυση) Τρόπος αντανάκλασης φωτός Χρόνο ζωής συγκεκριµένων χρωµάτων (λ.χ. Μπλέ σε ELDs) κόστος Ειρήνη Μαυροµµάτη

30 οδηγίες σχεδίασης γραφικών για οθόνες Συζήτηση: Σχεδίαση ιστοσελίδων, Ποιους περιορισµούς θέτει η οθόνη; Ειρήνη Μαυροµµάτη

31 οδηγίες σχεδίασης γραφικών για οθόνες Οι οθόνες επίσης µπορεί να αντιµετωπίζονται διαφορετικά oσον αφορά την απόσταση από αυτές (λ.χ. Προβολή, monitor, TV) Τον περιβαλλοντικό φωτισµό. (λ.χ. Πολύ φωτεινή οθόνη την νύχτα) Ειρήνη Μαυροµµάτη

32 οδηγίες σχεδίασης γραφικών για οθόνες Παράδειγµα: διαφορές PC από TV; - απόσταση χρηστών από οθόνη µπροστά από PC µόνιτορ / 3-4µ για ΤV - Ένας χρήστης PC πολλοί θεατές (οικογένεια) TV - Μεγάλη Ανάλυση οθόνης PC, πολύ µικρότερη ανάλυση οθόνης - ιάθεση / περιεχόµενο δουλειάς: σε PC πιο ενεργητική παρουσία, δουλειά. TV: πιο χαλαροί θεατές, επικεντρώνει στη διασκέδαση, πιο παθητική παρακολούθηση, πιο εύκολη χρήση και µικρή ανοχή σε προβλήµατα. - Flicker (τρεµόπαιγµα οθόνης TV) vs. Σταθερή οθόνη PC - Ένταση χρωµάτων: πολύ πιο έντονα χρώµατα σε TV, µερικά χρώµατα φαίνονται σαν να ξεχειλίζουν από την περιοχή τους. Ειρήνη Μαυροµµάτη

33 ΙΑ ΙΚΑΣΙΑ ΣΧΕ ΙΑΣΗΣ Επαναληπτική σχεδίαση ΙΕΡΕΥΝΗΣΗ ΗΜΙΟΥΡΓΙΑ ΑΞΙΟΛΟΓΗΣΗ ΕΠΙΚΟΙΝΩΝΙΑ Για να µπορεί να γίνει σωστή σχεδίαση οπτικής εφαρµογής που θα χρησιµοποιεί άλλη οθόνη (TV, PDA, LCD, ELD, κ.λ.π.): από το PC που χρησιµοποιούµε για τον σχεδιασµό γραφικών, είναι πολύ σηµαντικό να γίνονται έλεγχοι (screen tests) σε τακτικά διαστήµατα, από τα πρώτα προσχέδια του σχεδιασµού του γραφικού περιβάλλοντος της εφαρµογής. Ειρήνη Μαυροµµάτη σύντοµη επανάληψη

34 ατοµικές διαφορές case study Παράδειγµα χρωµατικού ελέγχου Interface, ώστε αυτό να βελτιστοποιηθεί. Πρόκειται για εφαρµογή ευρείας κατανάλωσης όπου πρέπει να ληφθεί υπ όψιν η καταλληλότητα του για το ~8% πληθυσµού ατόµων µε αχρωµατοψία. Ειρήνη Μαυροµµάτη

35 ατοµικές διαφορές case study Ειρήνη Μαυροµµάτη Ηαχρωµατοψίας είναι πολλών ειδών. Η λύση σε αυτή την περίπτωση είναι η χρήση κατάλληλης αντίθεσης, κυρίως στην απεικόνιση των highlights και ενεργών πεδίών. Η αντίθεση πρέπει να είναι επαρκής, έτσι ώστε σε κάθε είδος αχρωµατοψίας, χωρίς να βασιζόµαστε στο χρώµα, να µπορεί να εντοπίσει κανείς ύπαρξη και την µετακίνηση του επιλεγµένου πεδίου. Ένας απλός έλεγχος σε grayscale και ανάλογα τροποποίηση των τόνων ώστε να επιτευχθεί κατάλληλη αντίθεση αρκεί για να καλύψουµε και αυτή την υπολογίσιµη µερίδα πληθυσµού