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

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 Οι χρήστες δυσκολεύονται στο χειρισμό μικρών αντικειμένων. Συνεπώς: οι στόχοι θα πρέπει να είναι όσο το δυνατόν μεγαλύτεροι και η απόσταση που θα διανυθεί όσο το δυνατόν μικρότερη Κυκλικό μενού στο παιχνίδι Crysis Κυκλικό μενού στο παιχνίδι the Sims Αυτό οδήγησε στο σκεπτικό ότι τα μενού με κυκλικό σχήμα είναι προτιμότερα από τις λίστες, επειδή όλες οι επιλογές τους ισαπέχουν Ωστόσο, αν χρησιμοποιούνται λίστες, οι πιο συχνά χρησιμοποιούμενες επιλογές μπορούν να τοποθετούνται πλησιέστερα στο σημείο εκκίνησης του χρήστη (για παράδειγμα στην κορυφή ενός μενού) Διαφάνεια 6

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

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

9

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

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

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

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

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

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

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

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

18 Μεγαλύτερο κενό ανάμεσα στις γραμμές μπορεί να κάνει ευανάγνωστα ακόμα και μεγάλα κείμενα Διαφάνεια 18

19 Ο κατακόρυφος χώρος ενός τμήματος κειμένου ονομάζεται διάστιχο και είναι η απόσταση από το κάτω τμήμα μιας γραμμής κειμένου έως την επόμενη γραμμή Το διάστιχο επηρεάζει την ευκολία ανάγνωσης των τμημάτων κειμένου: Υπερβολικό κενό καθιστά δύσκολο για το μάτι τον εντοπισμό της επόμενης γραμμής Πολύ λίγο κενό προκαλεί σύγχυση μεταξύ των γραμμών Εσοχές παραγράφων. Υπάρχουν δύο βασικές σχολές για τη δήλωση των παραγράφων: Η κλασσική τυπογραφική μέθοδος χρησιμοποιεί εσοχές για να σηματοδοτήσει την έναρξη μιας καινούριας παραγράφου. Ωστόσο, πολλές τεχνικές δημοσιεύσεις, αναφορές και εμπορικές δημοσιεύσεις πλέον χρησιμοποιούν μια κενή γραμμή για το διαχωρισμό των παραγράφων Και οι δύο προσεγγίσεις είναι έγκυρες εφόσον χρησιμοποιούνται με συνέπεια σε όλο το διαδικτυακό τόπο Διαφάνεια 19

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

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

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

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

24 Διαφάνεια 24

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

26 Έντονη γραφή (bold): Το κείμενο σε έντονη γραφή προσδίδει έμφαση γιατί έρχεται σε χρωματική αντίθεση με το υπόλοιπο κείμενο Οι υπο-επικεφαλίδες μιας ενότητας είναι καλές όταν ορίζονται ως έντονες Το έντονο κείμενο είναι ευανάγνωστο στην οθόνη, αν και μεγάλα τμήματα κειμένου σε έντονη γραφή δεν παρουσιάζουν αντίθεση και επομένως χάνουν την αποτελεσματικότητά τους Υπογράμμιση (underlined): Η υπογράμμιση έχει συγκεκριμένη λειτουργική έννοια στα έγγραφα του Παγκόσμιου Ιστού. Οι περισσότεροι αναγνώστες έχουν ρυθμίσει τους πλοηγούς τους να υπογραμμίζουν τους συνδέσμους. Το υπογραμμισμένο κείμενο στην ιστοσελίδα θα δίνει την εντύπωση συνδέσμου Έγχρωμο κείμενο (coloured): Θα πρέπει να αποφύγετε τη χρήση έγχρωμου κειμένου γιατί οι αναγνώστες θα υποθέσουν ότι πρόκειται για σύνδεσμο Ωστόσο, το έγχρωμο κείμενο είναι αποτελεσματικό ως ένας διακριτικός τρόπος για το διαχωρισμό των επικεφαλίδων μιας ενότητας. Επιλέξτε σκούρες αποχρώσεις που έρχονται σε αντίθεση με το φόντο της σελίδας, και αποφύγετε να χρησιμοποιείτε χρώματα που πλησιάζουν τα προεπιλεγμένα χρώματα συνδέσμων του παγκόσμιου ιστού, δηλαδή το μπλε και το βιολετί Διαφάνεια 26

27 Κεφαλαία γράμματα: Το κείμενο σε ΚΕΦΑΛΑΙΑ είναι μια από τις πιο συνηθισμένες και λιγότερο αποτελεσματικές μεθόδους για την προσθήκη τυπογραφικής έμφασης Λέξεις που γράφονται μόνο με κεφαλαία θα πρέπει να αποφεύγονται γενικά γιατί είναι δυσκολότερη η σάρωσή τους Οι λέξεις που γράφονται με κεφαλαία αποτελούν μονότονα παραλληλόγραμμα και δεν αποτελούν ευδιάκριτα σχήματα που τραβούν την προσοχή Συστήνεται η γραφή με πεζά για μεγάλα κομμάτια κειμένου Τα πεζά είναι πιο ευανάγνωστα γιατί καθώς διαβάζουμε σαρώνουμε τις κορυφές των γραμμάτων Διαφάνεια 27

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

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

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

31 Δομή μέσω γλώσσας επισημείωσης (Structural markup). Η διάταξη του κειμένου που γίνεται χρησιμοποιώντας γλώσσα επισημείωσης για την παρουσίαση (αντί των stylesheets) περιορίζει τη δυνατότητα του χρήστη να μετασχηματίσει τη διάταξη ανάλογα με τις ανάγκες του Ορισμένοι πλοηγοί έχουν ένα χαρακτηριστικό που επιτρέπει στους χρήστες να παρακάμψουν φύλλα διαμόρφωσης (stylesheets) του συγγραφέα με δικά τους φύλλα διαμόρφωσης. Αυτό σημαίνει ότι οι χρήστες μπορούν να ορίσουν ένα φύλλο διαμόρφωσης που ανταποκρίνεται στις ανάγκες παρουσίασης που έχουν Ωστόσο αυτά τα μέτρα δεν είναι αποτελεσματικά, ή είναι εν μέρει, σε σελίδες που διατάσσονται με τη χρήση γλώσσας επισημείωσης για παρουσίαση Αν το χρώμα του κειμένου καθορίζεται χρησιμοποιώντας το <FONT COLOR> και οι επικεφαλίδες χρησιμοποιώντας το <FONT SIZE> και το <B> για έμφαση, το καθορισμένο από το χρήστη φύλλο διαμόρφωσης δε θα έχει κάτι στο οποίο να εφαρμοστεί (χωρίς παραμέτρους παραγράφου και επικεφαλίδων) Αν ορίσετε ιδιότητες παρουσίασης χρησιμοποιώντας φύλλα διαμόρφωσης, οι χρήστες που θέλουν να τροποποιήσουν τη σελίδα μπορούν να το κάνουν Διαφάνεια 31

32 Έμφαση. Αν χρησιμοποιείτε μόνο χρώμα για να πετύχετε τυπογραφική έμφαση, οι χρήστες που δεν μπορούν να διαχωρίσουν τα χρώματα θα χάσουν την έμφαση Για να δώσετε έμφαση στο κείμενο έτσι ώστε να μην παραβλέπεται, χρησιμοποιείτε έντονες γραμματοσειρές συνοδευτικά με το χρώμα Επίσης βεβαιωθείτε ότι υπάρχει επαρκής αντίθεση μεταξύ του φόντου και του κειμένου στη σελίδα σας. Αν και η αντίθεση είναι ιδιαίτερα σημαντική για χρήστες με οπτική αναπηρία, όλοι οι χρήστες θα επωφεληθούν από τη μεγαλύτερη αναγνωσιμότητα Προσαρμόσιμες διατάξεις. Οι περισσότερες διατάξεις ιστοσελίδων δεν είναι σχεδιασμένες έχοντας υπόψη μεγάλες γραμματοσειρές Για παράδειγμα, οι σταθερές διατάξεις που περιορίζουν τη στήλη κειμένου σε ένα συγκεκριμένο πλάτος είναι συνήθως σε τέτοιο μέγεθος ώστε να υποστηρίζουν μέγεθος γραμματοσειράς 12 ή μικρότερο Πράγματι, σε μεγάλα μεγέθη γραμματοσειρών μια σταθερή στήλη κειμένου μπορεί να περιέχει μόνο μερικές λέξεις, γεγονός που κάνει το κείμενο δύσκολο στην ανάγνωση Για προσαρμόσιμες σελίδες, χρησιμοποιείτε μια ευέλικτη διάταξη που μετασχηματίζεται ομαλά για την υποστήριξη μεγαλύτερων γραμματοσειρών Διαφάνεια 32

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

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

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

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

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

38 Διαφάνεια 38

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

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

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

42 Διαφάνεια 42

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

44 Διαφάνεια 44

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

46 Πράγματι, δεν υπάρχει τρόπος πλήρους ελέγχου της σχεδίασης μιας ιστοσελίδας. Η καλύτερη προσέγγιση, κατά συνέπεια, είναι η σχεδίαση ευέλικτων σελίδων που να είναι προσβάσιμες σε όλους τους χρήστες. Μια από τις οπτικές ιδιότητες που περιγράφουν τα Cascading Style Sheets (CSS) είναι ο τρόπος τοποθέτησης των στοιχείων στη σελίδα Η διάταξη με χρήση style sheet πρέπει να παρέχει τον σχεδιαστικό έλεγχο που χρειάζεται για να δημιουργηθούν οπτικώς ελκυστικές και ευανάγνωστες ιστοσελίδες. Στην πράξη, ωστόσο, υπάρχουν αρκετές ασυμβατότητες στους πλοηγούς που πρέπει να λαμβάνει υπόψη ο σχεδιαστής Βλ. Διαφάνεια 46

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

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

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

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

51 Source: W3Counter, March 2013 Source: W3Schools Διαφάνεια 51

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

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

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

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

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

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

58 Ο καθορισμός του κατάλληλου μήκους για οποιαδήποτε ιστοσελίδα απαιτεί την εξισορρόπηση τεσσάρων παραγόντων: 1. Της σχέσης μεταξύ της σελίδας και του μεγέθους της οθόνης 2. Του περιεχομένου 3. Του αν ο χρήστης αναμένεται να περιηγηθεί στη σελίδα όσο είναι συνδεμένος στο δίκτυο ή να εκτυπώσει / αποθηκεύσει τα έγγραφα για να τα διαβάσει αργότερα 4. Του εύρους ζώνης (bandwidth) που είναι διαθέσιμο στο κοινό στόχος Οι ερευνητές έχουν παρατηρήσει ότι η κύλιση (scrolling) στις οθόνες των υπολογιστών προκαλεί αποπροσανατολισμό Ο αποπροσανατολισμός των χρηστών είναι ιδιαίτερα ενοχλητικός όταν κατά την κύλιση χάνονται από την οθόνη βασικά στοιχεία πλοήγησης, όπως οι τίτλοι των εγγράφων, τα αναγνωριστικά των διαδικτυακών τόπων και οι σύνδεσμοι σε άλλες σελίδες του διαδικτυακού τόπου Διαφάνεια 58

59 Διαφάνεια 59

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

61 info.med.yale.edu Διαφάνεια 61

62 Όλες οι ιστοσελίδες που είναι μεγαλύτερες σε μήκος από δύο οθόνες πρέπει να έχουν στο υποσέλιδο ένα κουμπί / σύνδεσμο για επιστροφή στην κορυφή της σελίδας: Διαφάνεια 62

63 Για τη δημιουργία μιας καλής διεπαφής Παγκόσμιου Ιστού για ένα μεγάλο έγγραφο, αλλά και για την εύκολη εκτύπωση / αποθήκευσή του, πρέπει: Να γίνει διαχωρισμός του εγγράφου σε τμήματα (chunks), τα οποία δε θα ξεπερνούν σε πληροφορία τις δύο εκτυπώσιμες σελίδες, συμπεριλαμβανομένων και των γραφικών ή των εικόνων που υπάρχουν στο περιεχόμενο. Πρέπει να χρησιμοποιούνται σύνδεσμοι και να γίνεται αξιοποίηση των δυνατοτήτων του Διαδικτύου Να υπάρχει ένας σύνδεσμος που να οδηγεί σε ένα ξεχωριστό αρχείο, το οποίο περιέχει το πλήρες κείμενο σε μία σελίδα ειδικά σχεδιασμένη ώστε ο αναγνώστης να μπορεί να εκτυπώσει (ή να αποθηκεύσει) όλη τη σχετική πληροφορία σε ένα βήμα. Δε θα πρέπει να παραλειφθεί μέσα στο κείμενο η διεύθυνση (URL) της online έκδοσης αυτής της σελίδας, ώστε οι χρήστες να μπορούν να αναγνωρίζουν νέες εκδόσεις και να κάνουν σωστές αναφορές στην πηγή Διαφάνεια 63

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

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

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

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

68

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

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

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

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

73 Διαφάνεια 73

74 Διαφάνεια 74

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

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

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

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

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

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

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

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

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

84 Όταν οι χρήστες έρχονται αντιμέτωποι με ένα νέο και σύνθετο πληροφοριακό σύστημα τείνουν να δημιουργούν νοητικά μοντέλα (mental models). Χρησιμοποιούν αυτά τα μοντέλα για να προσδιορίσουν τις σχέσεις μεταξύ των θεμάτων και να κάνουν υποθέσεις για το πού θα βρουν πράγματα που δεν έχουν δει πιο πριν Η επιτυχία ενός διαδικτυακού τόπου ως προς την οργάνωση της πληροφορίας καθορίζεται σε μεγάλο βαθμό από το πόσο καλά το σύστημα οργάνωσης ανταποκρίνεται στις προσδοκίες του χρήστη Μια λογική οργάνωση του διαδικτυακού τόπου επιτρέπει στους χρήστες να κάνουν επιτυχείς προβλέψεις για το πού θα βρουν πράγματα που επιθυμούν Διαφάνεια 84

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

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

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

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

89 Οι πιο περίπλοκοι διαδικτυακοί τόποι μπορούν επίσης να οργανωθούν σε μια λογική ακολουθία, αλλά κάθε ιστοσελίδα στην κύρια ακολουθία μπορεί να έχει συνδέσμους σε μια ή περισσότερες σελίδες με θεματικές παρακάμψεις, παρενθετική πληροφορία ή πληροφορία σε άλλους διαδικτυακούς τόπους: Διαφάνεια 89

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

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

92 Ο στόχος είναι συχνά η μίμηση της συσχετιστικής σκέψης (associative thought) και της ελεύθερης ροής ιδεών, όπου οι χρήστες ακολουθούν τα ενδιαφέροντά τους με έναν ευρετικό δικό τους τρόπο, που είναι μοναδικός για κάθε χρήστη που επισκέπτεται το διαδικτυακό τόπο Αυτός ο τρόπος οργάνωσης αναπτύσσεται και στους διαδικτυακούς τόπους με πολυάριθμους συνδέσμους προς άλλη πληροφορία μέσα στον ίδιο διαδικτυακό τόπο αλλά και προς άλλους άλλους διαδικτυακούς τόπους του Παγκόσμιου Ιστού Οι ιστοί λειτουργούν καλύτερα σε μικρούς διαδικτυακούς τόπους, που χαρακτηρίζονται από λίστες συνδέσμων και απευθύνονται σε μορφωμένους ή έμπειρους χρήστες, οι οποίοι αναζητούν περαιτέρω εκπαίδευση και γνώση και όχι μια απλή κατανόηση του θέματος που παρουσιάζεται στο διαδικτυακό τόπο Διαφάνεια 92

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

94 Το παρακάτω διάγραμμα συνοψίζει τους τρεις βασικούς τύπους δομών σε σχέση με τη γραμμικότητα της πλοήγησης και την πολυπλοκότητα του περιεχομένου Διαφάνεια 94

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

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

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