ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ

Transcript

1 ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ ΣΧΟΛΗ ΘΕΤΙΚΩΝ ΕΠΙΣΤΗΜΩΝ ΤΜΗΜΑ ΕΠΙΣΤΗΜΗΣ ΥΠΟΛΟΓΙΣΤΩΝ ΜΑΘΗΜΑ ΕΠΙΛΟΓΗΣ ΗΥ-464 ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ Διδάσκων: Κωνσταντίνος Στεφανίδης

2 Οπτικός Σχεδιασμός (Visual Design) Όραση Σκοπός Τα τρία βασικά εργαλεία του οπτικού Σχεδιασμού Τυπογραφία Διάταξη (Layout) Χρώμα Σχεδιασμός Πληροφορίας (Information Design) Οργάνωση και δομή της πληροφορίας Κυνήγι πληροφορίας και οσμή πληροφορίας (Information foraging and information scent) Διαφάνεια 2

3 A minute to learn a lifetime to master

4 Είναι η κύρια πηγή πληροφοριών για το μέσο άνθρωπο Η οπτική αντίληψη χωρίζεται σε δύο στάδια: 1. Ξεκινά με τα φυσικά χαρακτηριστικά του ματιού, μέσω των οποίων βλέπουμε τα αντικείμενα (φυσική λήψη του ερεθίσματος από τον εξωτερικό κόσμο) Τα αντικείμενα πρέπει να είναι αρκετά μεγάλα, με επαρκή αντίθεση, με κατάλληλο χρώμα, κ.ο.κ., ώστε να μπορεί να τα αντιληφθεί το ανθρώπινο μάτι 2. Στο δεύτερο βήμα τα οπτικά σήματα μεταφέρονται στον εγκέφαλο (επεξεργασία / ερμηνεία του ερεθίσματος) Αφού δούμε ένα αντικείμενο ξεκάθαρα, θα πρέπει να μπορούμε και να το ερμηνεύσουμε (π.χ. τι σημαίνει ένα εικονίδιο) HY-464: Αλληλεπίδραση Ανθρώπου Υπολογιστή Διαφάνεια 4

5 Διαφάνεια 5

6 Οδηγός Δείχνει δομή, σχετική σπουδαιότητα, σχέσεις Βηματισμός Να τραβήξει τον κόσμο μέσα, να βοηθήσει στον προσανατολισμό, να παρέχει το δόλωμα για να βουτήξει κάποιος πιο βαθιά Μήνυμα Εκφράζει νόημα και στυλ, δίνει ζωντάνια στο περιεχόμενο Διαφάνεια 6

7 Τυπογραφία Κενό (Whitespace) Βάρος και κλίμακα Γραμματοσειρές Διάταξη (Layout) Πλέγματα (grids) και στοίχιση Παράγοντες και συμβιβασμοί Χρώμα Παράγοντες και προκλήσεις Συμβουλές Διαφάνεια 7

8

9 Πώς μπορούμε να το βελτιώσουμε; Και ποιος είναι ο στόχος; Είστε θερμά προσκεκλημένοι στο απολαυστικό πάρτυ του Robert και της Alexandra. Θα σερβιριστούν μεζέδες και κρασί. Πότε: 30 Ιουνίου, 2012 στις 9:30 μ.μ. Πού: Στο διαμέρισμα. Αν χρειάζεστε οδηγίες, κάντε μας ping! Παρακαλώ ενημερώστε μας αν θα παραβρεθείτε μέχρι την 1 η Ιουνίου. Η άσκηση προέρχεται από το Visual Design του Scott Klemmer (Stanford), εμπνευσμένη από το Design Interfaces της Jennifer Tidwell Διαφάνεια 9

10 Είστε θερμά προσκεκλημένοι στο απολαυστικό πάρτυ του Robert και της Alexandra. Θα σερβιριστούν μεζέδες και κρασί. Πότε: 30 Ιουνίου, 2012 στις 9:30 μ.μ. Πού: Στο διαμέρισμα. Αν χρειάζεστε οδηγίες, κάντε μας ping! Παρακαλώ ενημερώστε μας αν θα παραβρεθείτε μέχρι την 1 η Ιουνίου. Το κενό δίνει την αίσθηση της ομαδοποίησης Διαφάνεια 10

11 Είστε θερμά προσκεκλημένοι στο: απολαυστικό πάρτυ του Robert και της Alexandra Θα σερβιριστούν μεζέδες και κρασί. Πότε: 30 Ιουνίου, 2012 στις 9:30 μ.μ. Πού: Στο διαμέρισμα. Αν χρειάζεστε οδηγίες, κάντε μας ping! Παρακαλώ ενημερώστε μας αν θα παραβρεθείτε μέχρι την 1 η Ιουνίου. Διαφάνεια 11

12 Ευθυγράμμιση και τα «ρυάκια» κενού χώρου: Η σχετικά πρωτόγονη ευθυγράμμιση που είναι διαθέσιμη σήμερα για τον παγκόσμιο ιστό, δημιουργεί προβλήματα με τις λέξεις και τα κενά, τα οποία έχουν ως αποτέλεσμα τη δημιουργία κενού χώρου (ρυάκια) που φαίνεται να κυλούν προς το κάτω τμήμα της σελίδας Η στοίχιση του κειμένου στα αριστερά είναι η πιο ευανάγνωστη επιλογή για ιστοσελίδες Διαφάνεια 12

13 Προσαρμοσμένες παραδοσιακές γραμματοσειρές Τα Times New Roman είναι ένα καλό παράδειγμα μιας παραδοσιακής γραμματοσειράς που προσαρμόστηκε για χρήση σε οθόνες υπολογιστών Τα Times New Roman είναι μια καλή γραμματοσειρά για χρήση σε έγγραφα με πολύ κείμενο τα οποία πιθανόν θα εκτυπωθούν από τους αναγνώστες και δε θα διαβαστούν από την οθόνη Σχεδιασμένες για την οθόνη Γραμματοσειρές όπως οι Georgia και Verdana σχεδιάστηκαν ειδικά για αναγνωσιμότητα στην οθόνη του υπολογιστή Αυτές οι γραμματοσειρές παρέχουν εξαιρετική αναγνωσιμότητα για ιστοσελίδες που σχεδιάστηκαν να διαβάζονται κατευθείαν από την οθόνη Ωστόσο, αυτές οι γραμματοσειρές φαίνονται ογκώδεις και άκομψες όταν μεταφέρονται από μέσα υψηλής ανάλυσης στο χαρτί Διαφάνεια 13

14 Ποιες γραμματοσειρές να χρησιμοποιήσω; Δεν υπάρχει μία οριστική απάντηση Παρατηρήστε μια γραμματοσειρά σε πολλά μέρη για να δείτε το εύρος της Κοιτάξτε το ίδιο κείμενο με διαφορετικές γραμματοσειρές για να αλλάξτε την αποτελεσματικότητά του Σε κάθε περίπτωση, είναι ασφαλέστερο να χρησιμοποιείτε μία οικογένεια γραμματοσειρών και να αλλάζετε το πάχος (weight) και το μέγεθος ανάλογα την οθόνη και την έμφαση που θέλετε να δώσετε Επίσης, είναι ασφαλέστερο να χρησιμοποιείτε μια γραμματοσειρά που υπάρχει στα περισσότερα λειτουργικά συστήματα Διαφάνεια 14

15 Ο καθορισμός του μεγέθους της γραμματοσειράς αποτελεί ζήτημα αντιπαράθεσης Ο Ιστός υποτίθεται ότι είναι ένα παγκόσμιο μέσο όπου χρήστες όλων των ειδών έχουν ίση πρόσβαση στην πληροφορία Για παράδειγμα, οι χρήστες με προβλήματα όρασης μπορούν να ορίσουν τη γραμματοσειρά των εγγράφων του Ιστού να παρουσιάζεται σε ένα μέγεθος που τους είναι ευανάγνωστο Ωστόσο αυτές οι τροποποιήσεις μπορούν να αναδιαμορφώσουν τη διάταξη Με την εισαγωγή της παραμέτρου FONT, οι σχεδιαστές επίσης απέκτησαν τη δυνατότητα να καθορίζουν το μέγεθος της γραμματοσειράς Το W3C συστήνει να επιτρέπετε στους χρήστες να καθορίζουν το βασικό μεγέθους γραμματοσειράς στον πλοηγό τους και εσείς να καθορίζετε όλες τις εναλλαγές χρησιμοποιώντας την παράμετρο "em" Για παράδειγμα, αν η προκαθορισμένη από το χρήστη τιμή είναι μεγέθους 12, τότε μια 2-em εσοχή κειμένου θα ήταν μεγέθους 24, αλλά αν ο χρήστης χρησιμοποιούσε το χαρακτηριστικό του πλοηγού για μεγέθυνση του κειμένου για να μεταβάλλει το μέγεθος σε 16, η εσοχή κειμένου θα άλλαζε σε μέγεθος 32 ώστε να αντικατοπτρίζει το μεγαλύτερο μέγεθος γραμματοσειράς Αν ακολουθήσετε αυτή την προσέγγιση, χρησιμοποιήστε μια ευέλικτη διάταξη σελίδας που θα εξυπηρετεί τη μεγαλύτερη γραμματοσειρά Διαφάνεια 15

16 Διαφάνεια 16

17 Όπως και στις παραδοσιακές έντυπες μορφές δημοσίευσης, οι υψηλής ποιότητας διαδικτυακοί τόποι ακολουθούν τις καθιερωμένες ρυθμίσεις για το ύφος τυπογραφίας με συνέπεια Η συνέπεια βελτιώνει ένα διαδικτυακό τόπο και ενθαρρύνει τους επισκέπτες να παραμείνουν, προϊδεάζοντας τους για τη δομή του Η ατημέλητη και ασυνεπής διάταξη μπορεί να ανατρέψει αυτή την εντύπωση, να προκαλέσει σύγχυση στους αναγνώστες με αποτέλεσμα να μην επισκεφθούν ξανά το διαδικτυακό τόπο Πρέπει να αποφασίσετε για τις ρυθμίσεις (όπως οι γραμματοσειρές, το κενό μεταξύ των παραγράφων, το μέγεθος των υπο-επικεφαλίδων κ.α.) και στη συνέχεια να δημιουργήσετε έναν οδηγό για το ύφος συγγραφής ώστε να διατηρήσετε αυτές τις ρυθμίσεις ενώ αναπτύσσετε το διαδικτυακό τόπο. Αυτό το βήμα είναι ιδιαίτερα σημαντικό για μεγάλους διαδικτυακούς τόπους που αποτελούνται από πολυάριθμες σελίδες Διαφάνεια 17

18 Πλέγματα (grids), στοίχιση και διάταξη ιστοσελίδων

19 Οι χρήστες αναζητούν σαφήνεια, τάξη και αξιοπιστία στις πηγές πληροφορίας, είτε αυτές είναι τα παραδοσιακά έντυπα έγγραφα είτε είναι ιστοσελίδες Η χωροταξία των γραφικών και του κειμένου στην ιστοσελίδα μπορεί να εντυπωσιάσει το χρήστη, να κατευθύνει την προσοχή του, να δώσει προτεραιότητα στην πληροφορία και να κάνει την αλληλεπίδραση του χρήστη με το διαδικτυακό τόπο πιο ευχάριστη και αποδοτική Διαφάνεια 19

20 Οι αναγνώστες αρχικά αντιλαμβάνονται τις σελίδες μόνο σαν ένα μεγάλο σύνολο σχημάτων και χρωμάτων, με τα στοιχεία που βρίσκονται στο προσκήνιο να έρχονται σε αντίθεση με το φόντο Μόνο σε δεύτερη φάση αρχίζουν να εστιάζουν σε συγκεκριμένη πληροφορία, ξεκινώντας από τα γραφικά αν υπάρχουν, και συνεχίζοντας με το κείμενο και την ανάγνωση μεμονωμένων λέξεων και φράσεων Διαφάνεια 20

21 Σχεδιάζοντας με πλέγματα, χρησιμοποιώντας την ομαδοποίηση και τη στοίχιση για να επικοινωνήσουμε την δομή Java Διαφάνεια 21

22 Κακή διάταξη: καμία οπτική ιεραρχία Καλύτερη διάταξη: προβλέψιμη, ομαδοποιημένη και ξεκάθαρη οπτική δομή Η συνέπεια και η προβλεψιμότητα είναι απαραίτητα χαρακτηριστικά σε οποιοδήποτε καλά σχεδιασμένο πληροφοριακό σύστημα Όταν χρησιμοποιούνται με λάθος τρόπο ή χωρίς συνέπεια, τα τυπογραφικά στοιχεία και τα γραφικά του περιεχομένου των ιστοσελίδων μπορεί να δημιουργήσουν ένα οπτικό συνονθύλευμα χωρίς εμφανή ιεραρχία Τα ανοργάνωτα γραφικά και κείμενο μειώνουν την ευχρηστία και την ευκρίνεια, όπως ακριβώς συμβαίνει και στις έντυπες σελίδες. Ένα ισορροπημένο και με συνέπεια υλοποιημένο σχεδιαστικό μοτίβο θα αυξήσει την εμπιστοσύνη των αναγνωστών στο διαδικτυακό τόπο Διαφάνεια 22

23 Κανένα σχεδιαστικό πλέγμα δεν είναι κατάλληλο για όλες τις ιστοσελίδες. Το πρώτο βήμα είναι η επιλογή ενός βασικού κοινού πλέγματος για τη διάταξη των σελίδων Για αρχή, πρέπει να γίνει συλλογή αντιπροσωπευτικών παραδειγμάτων του κειμένου καθώς και των γραφικών και άλλων στοιχείων απεικόνισης και στη συνέχεια πειραματισμός με διάφορους τρόπους διάταξης των στοιχείων στη σελίδα Σε μεγαλύτερα συστήματα είναι αδύνατο να προβλεφθεί ακριβώς πώς θα φαίνεται στην οθόνη κάθε συνδυασμός κειμένου και γραφικών. Μπορεί όμως να γίνει δοκιμή των προσχεδίων της διάταξης, τόσο στις πιο πολύπλοκες όσο και στις πιο απλές σελίδες Ο στόχος είναι η εφαρμογή μιας συνεπούς, λογικής διάταξης στην οθόνη, μιας διάταξης που θα καθιστά δυνατή την προσθήκη κειμένου και γραφικών χωρίς να χρειάζεται επανεξέταση της βασικής σχεδιαστικής προσέγγισης σε κάθε νέα σελίδα Χωρίς την ύπαρξη ενός αυστηρού βασικού σχεδιαστικού πλέγματος, η διάταξη των σελίδων του διαδικτυακού τόπου θα επηρεάζεται από πρόσκαιρα προβλήματα και η συνολική σχεδίαση θα φαίνεται ανομοιογενής και αποπροσανατολιστική Διαφάνεια 23

24 Η σχεδίαση των περισσότερων ιστοσελίδων μπορεί να διαχωριστεί σε οριζόντιες «ζώνες» με διαφορετικές λειτουργίες και διάφορα επίπεδα πολυπλοκότητας γραφικών και κειμένου Καθώς η κάθετη κύλιση αποκαλύπτει σταδιακά τη σελίδα, νέο περιεχόμενο εμφανίζεται και το επάνω περιεχόμενο εξαφανίζεται Παρατηρείστε την κάθετη δομή της αρχικής σελίδας που φαίνεται στη διπλανή εικόνα. Η πάνω οθόνη με πληροφορίες είναι πολύ πιο πλούσια σε συνδέσμους, γιατί είναι η μόνη περιοχή που θα είναι σίγουρα ορατή σε όλους τους χρήστες Διαφάνεια 24

25 Διαφάνεια 25

26 Οι πίνακες υπάρχουν στην HTML για έναν λόγο: για την παρουσίαση δεδομένων. Η επιλογή border= 0 έδωσε στους σχεδιαστές τη δυνατότητα να έχουν ένα πλαίσιο στο οποίο μπορούν να τοποθετούν εικόνες και κείμενο Αν και είναι ακόμα ένας από τους επικρατέστερους τρόπους για τη σχεδίαση οπτικά πλούσιων ιστοσελίδων, η χρήση των πινάκων εμποδίζει τη δημιουργία ενός περισσότερο προσβάσιμου, ευέλικτου και λειτουργικού διαδικτύου Οι σελίδες που χρησιμοποιούν πίνακες για διαμόρφωση είναι πολύ λιγότερο προσβάσιμες σε χρήστες με αναπηρίες και χρήστες που έχουν πρόσβαση στο διαδίκτυο μέσω κινητών και PDAs Οι επισκέπτες μιας ιστοσελίδας που χρησιμοποιούν αναγνώστες οθόνης (καθώς κι εκείνοι που έχουν αργή ταχύτητα σύνδεσης) δεν πρέπει να περιπλανώνται μέσω αναρίθμητων κελιών πινάκων για να φτάσουν στο πραγματικό περιεχόμενο της ιστοσελίδας Οι σύγχρονοι πλοηγοί είναι πολύ καλύτεροι στην απόδοση των προτύπων του Ιστού (web standards) κι έτσι η χρήση αυτών των απαρχαιωμένων μεθόδων δεν είναι απαραίτητη Διαφάνεια 26

27 Αντί της χρήσης εμφωλευμένων πινάκων (πίνακες μέσα σε πίνακες) και της χρήσης κενών εικόνων (spacer) για να γεμίσουν άδεια κελιά, συστήνεται η χρήση πολύ πιο απλή επισημείωσης και φύλλων διαμόρφωσης (CSS - Cascading Style Sheets) για τη δημιουργία όμορφων διαδικτυακών τόπων που είναι πιο γρήγορο να φορτωθούν, πιο εύκολο να επανασχεδιαστούν και είναι πιο προσβάσιμοι από όλους Η χρήση δομικής επισημείωσης (structural markup) στα έγγραφα HTML και CSS για τη διάταξη των σελίδων, επιτρέπει το διαχωρισμό του πραγματικού περιεχομένου των ιστοσελίδων από τον τρόπο με τον οποίο αυτές παρουσιάζονται Αφαιρώντας την επισημείωση παρουσίασης από τις ιστοσελίδες, η επανασχεδίαση υπάρχοντων διαδικτυακών τόπων και του περιεχομένου τους είναι πολύ λιγότερο απαιτητική σε εργασία και πολύ πιο οικονομική. Για να αλλάξει η εμφάνιση του διαδικτυακού τόπου, το μόνο που χρειάζεται είναι να αλλάξουν τα φύλλα διαμόρφωσης (CSS), χωρίς να απαιτείται η επεξεργασία των ίδιων των σελίδων (Βλ. Η χρήση διαδικτυακών προτύπων κάνει εξαιρετικά εύκολη τη διατήρηση της οπτικής συνέπειας σε ένα διαδικτυακό τόπο. Αφού οι σελίδες χρησιμοποιούν το ίδιο έγγραφο CSS, θα έχουν όλες την ίδια διαμόρφωση Διαφάνεια 27

28 Συνηθισμένη (conventional) οθόνη Οθόνη Σελίδα προς εκτύπωση Εκτύπωση Σελίδα για κινητό τηλέφωνο Φορητή συσκευή Διαφάνεια 28

29 Μήκος γραμμής Έρευνες έχουν δείξει ότι το διάβασμα καθυστερεί και ο βαθμός απομνημόνευσης μειώνεται όσο το μέγεθος γραμμής υπερβαίνει το ιδανικό πλάτος. Ποσοτικές μελέτες έχουν δείξει ότι τα μεσαία μήκη γραμμών αυξάνουν σημαντικά την αναγνωσιμότητα του κειμένου Προσπαθήστε να περιορίσετε το μέγεθος γραμμής, ιδανικά σε δέκα έως δώδεκα λέξεις ανά γραμμή Περιθώρια Τα περιθώρια προσδιορίζουν την περιοχή ανάγνωσης της σελίδας, διαχωρίζοντας το κυρίως κείμενο από άλλα αντικείμενα, όπως στοιχεία της διεπαφής και άλλα γραφικά Τα περιθώρια επίσης παρέχουν αντίθεση και οπτικό ενδιαφέρον O ορισμός περιθωρίων μπορεί να γίνει μέσω των CSS και η χρήση τους στο διαδικτυακό τόπο πρέπει να γίνεται με συνέπεια Διαφάνεια 29

30 Source: W3Counter, February 2017 CS-464: Human Computer Interaction Slide 30

31 Μέγεθος οθόνης Δεν υπάρχει κάποια σαφής μελέτη για το μέγεθος των οθονών Φαίνεται ότι τα πιο συνηθισμένα μεγέθη είναι οθόνες 17 και 19 ιντσών, αλλά σίγουρα υπάρχουν ακόμα χρήστες που χρησιμοποιούν οθόνες 15 ιντσών, αλλά και χρήστες με πολύ μεγαλύτερες οθόνες Τα παραπάνω είναι ιδιαίτερα σημαντικά κατά τον καθορισμό της διάταξης ενός διαδικτυακού τόπου και του πλάτους κάθε περιοχής, ιδιαίτερα της περιοχής του κυρίως περιεχομένου, στην οποία ο χρήστης θα αφιερώνει χρόνο για να διαβάζει Διαφάνεια 31

32 Μια σημαντική επιλογή που πρέπει να πραγματοποιηθεί νωρίς κατά τη διαδικασία σχεδίασης είναι η απόφαση αν η διάταξη της σελίδας θα είναι ευέλικτη ή σταθερή Στις ευέλικτες διατάξεις, το περιεχόμενο επεκτείνεται κατάλληλα για να ταιριάξει με το πλάτος του παραθύρου Στις σταθερές διατάξεις το πλάτος είναι προκαθορισμένο από το σχεδιαστή Διαφάνεια 32

33 Οι περιέκτες μεταβλητού πλάτους τροποποιούνται ώστε να γεμίσουν το παράθυρο του πλοηγού Οι περιέκτες σταθερού περιεχομένου διατηρούν τις διαστάσεις τους ανεξάρτητα από το παράθυρο του πλοηγού Διαφάνεια 33

34 Σταθερή διάταξη Πλεονεκτήματα Μέγιστος έλεγχος στη διάταξη και σχεδίαση των ιστοσελίδων Αρκετά πιο εύκολη στην υλοποίηση σε σχέση με την ευέλικτη διάταξη, ειδικά όταν περιλαμβάνει σχεδίαση γραφικών (π.χ. στο Photoshop) Η περιοχή του περιεχομένου μπορεί να σχεδιαστεί κατάλληλα για τον περιορισμό του μήκους της γραμμής, με αποτέλεσμα το περιεχόμενο να είναι πιο ευανάγνωστο Οι καρτέλες (tabs) στους πλοηγούς είναι πλέον συνηθισμένες, οπότε σπάνια οι χρήστες αλλάζουν το μέγεθος του παραθύρου Τα μεγιστοποιημένα παράθυρα φαίνεται (χωρίς να είναι βέβαιο) ότι είναι η πιο συνηθισμένη διάταξη Μειονεκτήματα Οι χρήστες με χαμηλότερες αναλύσεις ή μικρότερες οθόνες θα πρέπει να χρησιμοποιούν την πολύ ενοχλητική οριζόντια μπάρα κύλισης Ο χώρος της οθόνης θα παραμείνει αχρησιμοποίητος για χρήστες με μεγαλύτερες οθόνες και υψηλότερες αναλύσεις από τη σταθερή διάταξη Αυτή τη σπατάλη χώρου μπορεί να αποφευχθεί σε μια σταθερή διάταξη, «κεντράροντας» το περιεχόμενο της ιστοσελίδας στο παράθυρο του πλοηγού ή σχεδιάζοντας ένα φόντο γραφικών για να γεμίσει τις άδειες περιοχές της οθόνης Διαφάνεια 34

35 Ευέλικτη διάταξη Πλεονεκτήματα Εκμεταλλεύεται το χώρο της οθόνης και τις δυνατότητες του υπολογιστή, ενώ δίνει στους χρήστες την ελευθερία να αποφασίσουν για την τελική παρουσίαση Ελαχιστοποιεί την πιθανότητα για κύλιση Παρουσιάζει περισσότερη πληροφορία στο τμήμα της σελίδας που φαίνεται στην οθόνη Βέβαια οι τροχοί (wheels) στα ποντίκια είναι πλέον συνηθισμένοι, οπότε η κατακόρυφη κύλιση δεν αποτελεί πλέον πρόβλημα Μειονεκτήματα Το κείμενο που εκτείνεται σε μεγάλη απόσταση στις μεγαλύτερες οθόνες και στις υψηλότερες αναλύσεις είναι πιο δυσανάγνωστο Ο σχεδιαστής χάνει την ελευθερία και τον έλεγχο στην τελική παρουσίαση του περιεχομένου Είναι δύσκολη η υλοποίηση μιας αρμονικής σχεδίασης με έντονα γραφικά που φαίνεται ευχάριστη σε διαφορετικές αναλύσεις και μεγέθη παραθύρων HY-464: Αλληλεπίδραση πλοηγών Ανθρώπου - Υπολογιστή Διαφάνεια 35

36 Ποια από τις δύο; Δεν υπάρχει μια απάντηση, οι σχεδιαστές ακόμα διαφωνούν για την καλύτερη λύση Η τελική απόφαση εξαρτάται από διάφορους παράγοντες Αν ο στόχος του διαδικτυακού τόπου είναι να τραβήξει την προσοχή, να είναι καλλιτεχνικός, να προωθήσει κάτι ή οτιδήποτε άλλο παρόμοιο, θα πρέπει να η χρήση σταθερής διάταξης θα πρέπει να μελετηθεί σοβαρά ως καλύτερη επιλογή Αν ο διαδικτυακός τόπος απευθύνεται σε ένα ευρύτερο κοινό και ο πρωταρχικός του στόχος είναι να παρέχει πληροφόρηση, θα πρέπει είναι όσο το δυνατόν πιο ευέλικτος Διαφάνεια 36

37 Οι μικρές ιστοσελίδες πρέπει να προτιμούνται για: Αρχικές σελίδες και σελίδες με μενού ή συνδέσμους πλοήγησης, οπουδήποτε μέσα σε ένα διαδικτυακό τόπο Έγγραφα που θα αναζητηθούν και θα αναγνωσθούν ενόσω ο χρήστης είναι συνδεμένος στο δίκτυο Σελίδες με μεγάλα γραφικά Τα μεγάλα έγγραφα: Είναι πιο εύκολα στη συντήρηση (το περιεχόμενο είναι όλο σε ένα μέρος και όχι συνδεδεμένο σε τμήματα) Μοιάζουν περισσότερο με τα ενιαία έντυπα έγγραφα (δεν είναι διασπασμένα σε τμήματα) Είναι πιο εύκολο να τα αποθηκεύσουν και να τα εκτυπώσουν οι χρήστες Διαφάνεια 37

38 Μελέτες εντοπισμού του βλέμματος (eye-tracking) που πραγματοποιήθηκαν από τον Jakob Nielsen δείχνουν ότι οι ιστοσελίδες που έχουν κυρίως κείμενο σαρώνονται με ένα μοτίβο σχήματος F έντονων στάσεων του ματιού στην πάνω περιοχή της επικεφαλίδας και προς τα κάτω στην αριστερή πλευρά του κειμένου About Us σελίδα (αριστερά), σελίδα προϊόντος (κέντρο), αποτελέσματα μηχανής αναζήτησης (δεξιά) Διαφάνεια 38

39 Όταν οι αναγνώστες κοιτάζουν ιστοσελίδες χρησιμοποιούν ένα συνδυασμό του κλασικού σαρώματος σελίδας τύπου z (Gutenberg z) και αυτών που έχουν μάθει από τα πρότυπα και τις πρακτικές που ακολουθούν οι σχεδιαστές ιστοσελίδων Διαφάνεια 39

40 Οι χρήστες έχουν αναπτύξει ξεκάθαρες προσδοκίες για το πού είναι πιθανότερο να εμφανιστούν τα συνηθισμένα στοιχεία περιεχομένου και της διεπαφής Παραβίαση αυτών των προσδοκιών είναι ρίσκο Διαφάνεια 40

41

42 Ο μέσος άνθρωπος έχει την ικανότητα να ξεχωρίσει 7 εκατομμύρια αποχρώσεις χρωμάτων Ωστόσο μόνο 8 έως 10 διαφορετικά χρώματα μπορούν να αναγνωριστούν με ακρίβεια, χωρίς προηγούμενη εκπαίδευση Περίπου 8% των ανδρών και 1% των γυναικών υποφέρουν από αχρωματοψία, με πιο συνηθισμένη αυτή της δυσκολίας διαχωρισμού του κόκκινου από το πράσινο Στην περιφέρειά του το μάτι είναι λιγότερο ευαίσθητο στο κόκκινο, πράσινο και κίτρινο φως και περισσότερο ευαίσθητο στο μπλε φως Το μπλε αποτελεί ένα καλό χρώμα φόντου (background colour), ιδιαίτερα σε μεγάλες οθόνες Στο μπροστινό μέρος του ματιού, όπου η όραση χρωμάτων είναι ισχυρότερη, το μάτι είναι περισσότερο ευαίσθητο στο κόκκινο και στο κίτρινο και λιγότερο ευαίσθητο στο μπλε Μικρά μπλε αντικείμενα έχουν την τάση να «εξαφανίζονται» στην οθόνη, και αυτό ισχύει κυρίως στις περιπτώσεις του απαλού μπλε Μικρές αλλαγές στις αποχρώσεις του μπλε είναι δύσκολο να διαχωριστούν, αλλά το μάτι είναι ευαίσθητο στις μικρές αλλαγές του κόκκινου Διαφάνεια 42

43 Φασματικά αντίθετα χρώματα δεν θα πρέπει να τοποθετούνται μαζί Έτσι μπλε και κόκκινο δεν θα πρέπει να τοποθετούνται μαζί Το κόκκινο, το πορτοκαλί και το κίτρινο είναι με άνεση ορατά μαζί Σκούρα ή σκοτεινά χρώματα θα πρέπει να χρησιμοποιούνται για το φόντο και φωτεινά χρώματα για το προσκήνιο National Archives: Insufficient contrast Διαφάνεια 43

44 Διαχωρισμός χρωμάτων: είναι ένας πολύ αποτελεσματικός τρόπος για το διαχωρισμό μιας οθόνης σε διαφορετικές περιοχές. Περιοχές που πρέπει να φαίνεται ότι ανήκουν μαζί, θα πρέπει να έχουν το ίδιο χρώμα Πάρα πολλά χρώματα σε μία οθόνη, αυξάνουν το χρόνο αναζήτησης, συνεπώς θα πρέπει να χρησιμοποιούνται με σύνεση. Συνεπώς η υπερβολική χρήση χρωμάτων θα πρέπει να αποφεύγεται Διαφάνεια 44

45 Σχεδιάστε πρώτα σε grayscale (ασπρόμαυρο) Συχνά κάποιοι βασίζονται στο χρώμα σαν δεκανίκι για να κάνουν οπτικούς διαχωρισμούς στην σχεδίαση Αυτό είναι εντάξει αλλά θα πρέπει να γίνεται αφού έχουν χρησιμοποιηθεί τα άλλα εργαλεία: η τυπογραφία και η διάταξη Χρησιμοποιήστε την φωτεινότητα για να ξεχωρίσετε αυτά που είναι περισσότερο και λιγότερο σημαντικά Προσθέστε χρώμα αργότερα, διατηρώντας τις διαφορές στη φωτεινότητα, ώστε να παρέχετε επιπλέον τρόπο για να ξεχωρίζουν Διαφάνεια 45

46 Διαφάνεια 46

47 Διαφάνεια 47

48 Οργανώνοντας την πληροφορία και την οσμή της πληροφορίας

49 Υπάρχουν πέντε βασικά βήματα στην οργάνωση της πληροφορίας: 1. Δημιουργία καταλόγου του περιεχομένου: Τι έχετε ήδη; Τι χρειάζεστε; 2. Καθορισμός ιεραρχικής σύνοψης του περιεχόμενου και δημιουργία ελεγχόμενου λεξιλογίου ώστε το βασικό περιεχόμενο, η δομή του διαδικτυακού τόπου και τα στοιχεία πλοήγησης να προσδιορίζονται πάντα με συνέπεια. 3. Διάσπαση: Διαχωρισμός του περιεχομένου σε λογικές ενότητες με συνεπή δομή 4. Σχεδιασμός διαγραμμάτων που δείχνουν τη δομή του διαδικτυακού τόπου και περιλήψεις ιστοσελίδων με μια λίστα των βασικών συνδέσμων πλοήγησης, και 5. Ανάλυση του συστήματος μέσω δοκιμών της οργάνωσης με πραγματικούς χρήστες. Αναθεώρηση όσο είναι απαραίτητο Διαφάνεια 49

50 1. Κατηγορία Οργάνωση βάσει της ομοιότητας χαρακτηριστικών ή της συνάφειας Αποτελεί μια ιδιαίτερα χρήσιμη προσέγγιση όταν αυτά που οργανώνονται είναι της ίδιας ή απρόβλεπτης σημασίας Παραδείγματα περιλαμβάνουν θέματα βιβλίων σε ένα βιβλιοπωλείο ή βιβλιοθήκη και αντικείμενα σε ένα κατάστημα 2. Χρόνος Οργάνωση βάσει χρονικής σειράς ή ιστορίας, όπου τα στοιχεία παρουσιάζονται με βήματα ακολουθίας Αυτή η προσέγγιση χρησιμοποιείται συνήθως στην εκπαίδευση Άλλα παραδείγματα περιλαμβάνουν το πρόγραμμα της τηλεόρασης, την ιστορία συγκεκριμένων γεγονότων και τη μέτρηση των χρόνων απόκρισης διαφορετικών συστημάτων 3. Θέση Οργάνωση βάσει χωρικής ή γεωγραφικής θέσης, συνήθως για προσανατολισμό ή κατεύθυνση Είναι σίγουρα ιδανική για χάρτες, αλλά χρησιμοποιείται εκτενώς και στην εκπαίδευση, την επιδιόρθωση, τις απεικονίσεις εγχειριδίων χρηστών και άλλες περιπτώσεις όπου η πληροφορία είναι συνδεδεμένη με ένα μέρος Διαφάνεια 50

51 4. Αλφαβητικά Οργάνωση βάσει του πρώτου γράμματος των ονομάτων αντικειμένων Προφανή παραδείγματα είναι οι τηλεφωνικοί και άλλοι κατάλογοι ονομάτων, λεξικά και θησαυροί όρων, όπου οι χρήστες γνωρίζουν τη λέξη ή το όνομα που αναζητούν Τα αλφαβητικά συστήματα είναι απλά στην κατανόηση και γνωστά από την καθημερινή ζωή Αυτή η μέθοδος οργάνωσης είναι λιγότερο αποδοτική για μικρές λίστες μη σχετικών πραγμάτων αλλά είναι πολύ καλή για μεγάλες λίστες 5. Συνεχές Οργάνωση βάσει της ποσότητας μιας μετρήσιμης σε αλληλουχία μεταβλητής, όπως η τιμή, το σκορ, το μέγεθος ή το βάρος Η οργάνωση με το συνεχές είναι αποδοτική όταν οργανώνονται πολλά πράγματα που μετριούνται ή βαθμολογούνται με τον ίδιο τρόπο Παραδείγματα περιλαμβάνουν βαθμολογίες και κριτικές κάθε είδους, όπως οι καλύτερες ταινίες μιας χρονιάς, τα πιο σκοτεινά ή πιο φωτεινά αντικείμενα, και άλλες περιπτώσεις όπου ένα συγκεκριμένο βάρος ή αξία μπορεί να αποδοθεί σε κάθε αντικείμενο Διαφάνεια 51

52 Να παρέχετε στους χρήστες την πληροφορία που θέλουν σε όσο το δυνατόν λιγότερα βήματα και σε όσο το δυνατόν συντομότερο χρόνο Να σχεδιάζετε μια αποδοτική ιεραρχία της πληροφορίας έτσι ώστε ο αριθμός των βημάτων ανάμεσα στις σελίδες να είναι ο ελάχιστος Μελέτες των διεπαφών έχουν δείξει ότι οι χρήστες προτιμούν μενού που περιέχουν πέντε με επτά συνδέσμους και λίγες συγκεντρωτικές οθόνες επιλογών αντί πολλά επίπεδα απλοποιημένων μενού Διαφάνεια 52

53 Στον παρακάτω πίνακα φαίνεται ότι δεν είναι απαραίτητα πολλά επίπεδα μενού για να συμπεριλάβουν μεγάλο αριθμό επιλογών: Αριθμός υπομενου Αριθμός επιλογών Διαφάνεια 53

54 Οι περισσότεροι διαδικτυακοί τόποι εξαρτώνται από τις ιεραρχίες, κινούμενοι από μια πιο γενική περιγραφή του τόπου (η αρχική ιστοσελίδα) σε όλο και πιο συγκεκριμένα υπομενού και σελίδες περιεχομένου Τα τμήματα της πληροφορίας πρέπει να ταξινομηθούν βάσει σπουδαιότητας και να οργανωθούν από τις συσχετίσεις μεταξύ των μονάδων Αφού καθοριστεί το λογικό σύνολο προτεραιοτήτων, μπορεί να κατασκευαστεί μια ιεραρχία από τις πιο σημαντικές ή γενικές έννοιες σε πιο συγκεκριμένα ή λεπτομερή θέματα Διαφάνεια 54

55 Το πιο σημαντικό βήμα στο σχεδιασμό ενός διαδικτυακού τόπου είναι η οργάνωση της πληροφορίας Η προσεκτική μελέτη του τι θέλει κανείς να πει και πώς θέλει να το πει απαιτεί ιδιαίτερη εξοικείωση με το περιεχόμενο του διαδικτυακού τόπου Να δημιουργείτε σύντομες περιγραφές, να διασπάτε την πληροφορία σε ενότητες και υποενότητες, να μελετάτε τη συσχέτιση μεταξύ των ενοτήτων και να δημιουργείτε πίνακα περιεχομένων Ένας καλά οργανωμένος πίνακας περιεχομένων μπορεί να αποτελέσει βασικό εργαλείο πλοήγησης σε έναν διαδικτυακό τόπο Ο πίνακας είναι κάτι παραπάνω από μια λίστα συνδέσμων δίνει στο χρήση μια γενική εικόνα της οργάνωσης, των ορίων και της ροής της παρουσίασης της πληροφορίας Διαφάνεια 55

56 Οι πληροφοριο-βόροι (informavore) προσπαθούν να βρουν και να καταναλώσουν πληροφορίες Πώς να βρουν πολλές, γρήγορα Ένα από το κυριότερα χαρακτηριστικά που χρησιμοποιούν για να κατευθύνουν την έρευνα τους οι πληροφοριο-βόροι είναι η «οσμή της πληροφορίας» Προβλέποντας την επιτυχία μιας διαδρομής Τα Links, οι τίτλοι και το ευρύτερο πλαίσιο παρέχουν την οσμή πληροφορίας μιας web σελίδας Διαφάνεια 56

57 Κλασσικά σημάδια από την παρατήρηση χρηστών: Να κινούνται άσκοπα μέσα στην σελίδα Μην γνωρίζοντας τι να κάνουν ή πού να κοιτάξουν Χαμηλή αυτοπεποίθηση Έλεγχος της αυτοπεποίθησής τους πριν και μετά που θα ακολουθήσουν ένα link Η αυτοπεποίθηση πριν-το-κλικ θα φανερώσει αν το link έχει δυνατή οσμή Μετά το κλικ θα φανερώσει αν η σελίδα προβάλλει την πληροφορία που προσπαθεί να βρει ο χρήστης Υπερβολική χρήση του Back button Σημαντικά προβλήματα στην πλοήγηση Διαφάνεια 57

58 Αδύναμη οσμή πληροφορίας Γενικά, ασαφή link Click here, Picture 1 Κατασκευασμένες λέξεις και jargon ορολογίες Σλόγκαν, ορολογίες σχεδιαστών, marketing «φιοριτούρες» Φτυάρι: Εργαλείο σκαψίματος, Λύση εκσκαφής - excavation solution Οι χρήστες ψάχνουν για λέξεις που γνωρίζουν ή που περιμένουν να βρουν Βελτιώνοντας την οσμή πληροφορίας των link Link πολλαπλών λέξεων Με συγκεκριμένους, αναγνωρίσιμους όρους Λέξεις «σκανδάλη», όχι «έξυπνες» λέξεις Βοηθάνε και την προσβασιμότητα Διαφάνεια 58

59 CS-464: Human Computer Interaction Slide 59