Η παρουσίαση της πληροφορίας στο διαδίκτυο Δρ. Ματθαίος Α. Πατρινόπουλος
2
3 Πώς διαβάζονται οι ιστοσελίδες; Οι περισσότεροι χρήστες σπάνια διαβάζουν τις ιστοσελίδες λέξη λέξη αντίθετα τις σαρώνουν.
4 Δαιάβσέ το γήρογρα, μροπείς Σνφμύωα με μαι έυρενα σοτ Πμανιπσητετο τυο Κμτρπιαιζ, δνε πεαιζι ρλόο με τι σριεά ενίαι τοθοπεμετενα τα γταμαμρά μσέα σε μαί λξηέ, αεκρί το πώτρο κια το ταελείτυο γάμρμα να ενιαί σητ στωσή θσέη. Τα υλοπιόπα μροπούν να ενίαι σε τχίυεας θιέεσς κια να μροπετίε να τςι δαβαιάεστε χρωίς πλβημόρα. Ατυό γνίταει γαιτί ο απρώνθονις εκέγλφοας δνε δαεβζιάι γάμρμα γάμρμα κθάε λξηέ αλλά τνη λξηέ σνα σνύλοο. Ατίπτσυεο ε;
5 Διαφορές ανάλογα με τους χρήστες Καταγράφεται ότι το μορφωτικό επίπεδο επηρεάζει τον τρόπο που διαβάζονται οι σελίδες. Oι υψηλότερου μορφωτικού επιπέδου χρήστες σαρώνουν τις σελίδες εκτός αν θέλουν να κατανοήσουν συγκεκριμένες πληροφορίες. Οι χαμηλότερου μορφωτικού επιπέδου χρήστες (όχι οι αναλφάβητοι) δεν μπορούν να καταλάβει ένα κείμενο με μια ματιά. Αλλά θα πρέπει να το διαβάσουν λέξη προς λέξη και συχνά περνούν πολύ χρόνο προσπαθώντας να κατανοήσουν πολυσύλλαβες λέξεις. Lower-Literacy Users: Writing for a Broad Consumer Audience by JAKOB NIELSEN
Παιδιά Ενήλικες 6 Γιατί επισκέπτονται ιστοσελίδες ; Για ψυχαγωγία Για να βρουν πληροφορίες για Επικοινωνία για να νιώσουν μέλη μιας κοινότητας Πρώτες αντιδράσεις. Κρίνουν πολύ γρήγορα μια ιστοσελίδα (Και φεύγουν, αν δεν τους ικανοποιεί) Προθυμία να περιμένουν απόκριση στις εντολές. Δυνατότητα ελέγχου ενεργειών από το χρήστη Θέλουν άμεση απόκριση Το Προτιμούν Παρουσιάζουν περιορισμένη υπομονή
7 Εξερευνητική / Διερευνητική συμπεριφορά Δοκιμάζουν πολλαπλές επιλογές. Περιορισμένη -σάρωση της οθόνης Ακολουθούν την κύρια πορεία Πολλαπλές επιλογές για την πλοήγηση Προκαλούν έντονη σύγχυση Περιορισμένη σύγχυση Το κουμπί Πίσω Δεν χρησιμοποιείται (από μικρά παιδιά) Περιορισμένα (από μεγάλα παιδιά) Χρησιμοποιείται Ανάγνωση Καθόλου (πολύ μικρά παιδιά) Αβέβαιη (μικρά παιδιά) Σάρωση (μεγάλα παιδιά) Σάρωση
8 Μεταφορές της Πραγματικής ζωής π.χ., της χωροταξικής πλοήγησης Πολύ χρήσιμες για προ-αναγνώστες Συχνά αποσπά την προσοχή Μέγεθος γραμματοσειράς 14 στιγμών (μικρά παιδιά) 12 στιγμών (μεγάλα παιδιά) 10 στιγμών (και 14 στιγμών για τους ηλικιωμένους) Φυσικοί περιορισμοί Αργή δακτυλογράφηση Με Ανεπαρκή έλεγχο του ποντικιού Δεν υφίσταται (εκτός άτομα με ειδικές ανάγκες) Scrolling Το μικρά παιδιά το αποφεύγουν Τα μεγαλύτερα παιδιά το χρησιμοποιούν πολύ λίγο Περιορισμένο
9 Animation και ήχοι Αρέσουν Συνήθως είναι ανεπιθύμητο Διαφήμιση και προωθήσεις Δεν είναι δυνατή η διάκρισή τους από το πραγματικό περιεχόμενο Διαφημίσεις πρέπει να αποφεύγονται, υπάρχει δυσπιστία για τις εμφανίσεις Banner Αποκάλυψη προσωπικών πληροφοριών Συνήθως έχουν μια σχετική ενημέρωση και διστάζουν να δώσουν προσωπικές πληροφορίες!!! Συχνά λειτουργούν απερίσκεπτα και είναι πρόθυμοι να δώσουν προσωπικές πληροφορίες Ηλικία στόχος και σχεδιασμός Κρίσιμης σημασίας, με πολύ λεπτές διακρίσεις μεταξύ των ηλικιακών ομάδων Δεν υπάρχει μεγάλη διαφορά ανάμεσα στις ηλικίες (εκτός αν απευθυνόμαστε σε ηλικιωμένους) Διαφάνειες του μαθήματος Σχεδιασμός και Ανάπτυξη Εφαρμογών Διαδικτύου.
10 Αναζήτηση Υπάρχει μεγαλύτερη εξάρτηση από τους σελιδοδείκτες σε σχέση με την έρευνα. Τα μεγαλύτερα παιδιά κάνουν αναζήτηση. Κύριο σημείο εισόδου στο Web Children's Websites: Usability Issues in Designing for Kids by JAKOB NIELSEN
11 Διαφοροποιήσεις ανάλογα με την ηλικία Σε μελέτες του 1998 πολλά παιδιά ήταν πρόθυμα να διαβαστούν τις οδηγίες πριν την έναρξη ενός παιχνιδιού. Το 2010 περισσότερα παιδιά να συμπεριφέρονται περισσότερο σαν ενήλικοι χρήστες και αρνούνται να διαβάσουν. Αυτό φαίνεται να συνδέεται με την εμπειρία: η μεγαλύτερη εμπειρία των χρηστών οδηγεί σε μικρότερο χρόνο ανάγνωσης οδηγιών.
12 Τα παιδιά και οι ενήλικες απαιτούν διαφορετική προσέγγιση με στυλ σχεδιασμού που ακολουθεί κατευθύνσεις χρηστικότητας ανάλογες με τις ανάγκες τους. Πολλά από τα στοιχεία που καθιστούν την περιήγηση τις ιστοσελίδες πιο εύκολη για τους ενήλικες, ισχύουν και για τα παιδιά. Πάντα θα πρέπει να λαμβάνουμε υπόψη μας τις ιδιαιτερότητές τους. M.Πατρινόπουλος
13 Για να αυξήσουμε την αναγνωσιμότητα των σελίδων μας θα πρέπει: Να τονίζονται οι λέξεις - κλειδιά (με αλλαγές στη γραμματοσειρά, το χρώμα ) Να χρησιμοποιούμε σύντομα κείμενα Να χρησιμοποιούνται λίστες με κουκκίδες διάταξης Να αναπτύσσουμε μια ιδέα ανά παράγραφο (οι χρήστες θα προσπεράσουν τυχόν πρόσθετες ιδέες, αν δεν έχουν προετοιμαστεί από τις πρώτες λέξεις της παραγράφου)
14 Για να αυξήσουμε την αναγνωσιμότητα των σελίδων μας θα πρέπει: (2) Χρησιμοποιούμε την τεχνική της ανεστραμμένης πυραμίδας, ξεκινώντας με τη σύνοψη και αναπτύσσοντας στην πορεία τις απόψεις μας. Συνοπτικό κείμενο (οι μισές λέξεις από όσες θα χρησιμοποιούσαμε σε ένα γραπτό κείμενο). Αυξάνουμε την αξιοπιστία των κειμένων μας και του δικτυακού μας τόπου.
15 Οι σύνδεσμοι Χρησιμοποιούμε απλή γλώσσα Χρησιμοποιούμε ειδική σήμανση για να επισημαίνουμε τους συνδέσμους Χρησιμοποιούμε κοινά χαρακτηριστικά σε όλο το δικτυακό τόπο
16 Για κάθε στοιχείο που αφαιρούμε από το περιβάλλον διεπαφής του χρήστη, έχουμε ένα λιγότερο παράγοντα που μπορεί να προκαλεί σύγχυση στους χρήστες και κάνει τις υπόλοιπες λειτουργίες του πιο εύκολες στη χρήση.
17 Από το https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
18 Από το http://www.useit.com/alertbox/photo-content.html
19 αφάνειες του μαθήματος Σχεδιασμός και Ανάπτυξη Εφαρμογών Διαδικτύου.
20 Αραβικά
http://browsersize.googlelabs.com/ 21
Screen Resolution Statistics As of January 2016, about 97% of our visitors have a screen resolution of 1024x768 pixels or higher: Date Other high 1920x1080 1366x768 1280x1024 1280x800 1024x768 Lower 22 January 2016 30.7% 18% 35% 6% 4% 3% 3.3% January 2015 32.7% 16% 33% 7% 5% 4% 2.3% January 2014 34% 13% 31% 8% 7% 6% 1.0% January 2013 36% 11% 25% 10% 8% 9% 1.0% January 2012 35% 8% 19% 12% 11% 13% 2% January 2011 50% 6% 15% 14% 14% 1% January 2010 39% 2% 18% 17% 20% 4% January 2009 57% 36% 7% January 2008 38% 48% 14% January 2007 26% 54% 20% January 2006 17% 57% 26% January 2005 12% 53% 35% January 2004 10% 47% 43% January 2003 6% 40% 54% January 2002 6% http://www.w3schools.com/browsers/browsers_display.asp 34% 60% January 2001 5% 29% 66% January 2000 4% 25% 71%
High Screen Resolution Statistics The tables below are a breakdown of "other high resolutions" from our Browser Display Statistics: 23 Resolution January 2014 January 2016 1440x900 7% 6% 1600x900 6% 6% 1680x1050 5% 3% 1920x1200 3% 2% 1360x768 2% 2% 1280x720 1% 2560x1440 1% 1% 1536x864 1% Other high resolutions 10% 8.7%
24 Άτομα με ειδικές δυσκολίες Δαλτονισμός http://www.vischeck.com/vischeck/
25
26
27 www.vischeck.com/vischeck/
28 Mετατροπή κειμένου σε Συνθετική Ομιλία (Text-to-Speech) Εκφωνητής+, Μίλα μου... Ελληνικά!, ΦωνΑισθησία Mobile, ΦωνΑισθησία VISUAL, ΦωνΑισθησία WIN INTEGRATOR http://www.oddcast.com/home/demos/tts/tts_example.php?sitepal Αναγνώστες οθόνης, ακουστική αντίληψη του γραφικού περιβάλλοντος και πλοήγηση με ακουστική υποβοήθηση ή και οδήγηση οθόνων Braille. Ακουστική επαλήθευση των χαρακτήρων που πληκτρολογoύνται. Connect Outloud, Home Page Reader, Mobile Speak, ReadPlease,, Windows Eyes. HAL, JAWS, Magic, Supernova. Μετατροπή φωνής σε κείμενο Ηλεκτρονικός λογογράφος, MLS Talk&Write, Αναγνώριση φωνής ενσωματωμένη στα Windows
29 Χρώματα και παρουσίαση της πληροφορίας Τα χρώματα προδιαθέτουν τους χρήστες. Η Επίδρασή τους εξαρτάται από τις εμπειρίες και την πολιτισμική κουλτούρα.
30 Παράδειγμα ερμηνείας χρωμάτων (όχι απόλυτα αποδεκτό) Χρώμα Θετικό Αρνητικό Άσπρο Καθαρός, αθώος, αγνός Ψυχρός, άδειος, στείρος Κόκκινο Δυνατός, γενναίος, παθιασμένος Επικίνδυνος, επιθετικός, δεσποτικός Κίτρινο Χαρούμενος, φιλικός, αισιόδοξος Φοβισμένος, ενοχλητικός, αγενής Καφέ Ζεστός, γήινος, ώριμος Ακάθαρτος, θλιμμένος, τσιγκούνης Πράσινο Φυσικός, ήρεμος, χαλαρωτικός Ζηλιάρης, άπειρος, άπληστος Μπλε Δυνατός, αξιόπιστος, αυταρχικός Ψυχρός, καταθλιπτικός, μελαγχολικός
31 Η απόχρωση προσδιορίζει το βασικό χρώμα πράσινο, κόκκινο, μπλε, πορτοκαλί κ.ά. Ο κορεσμός αναφέρεται στην ποσότητα του γκρι σε ένα χρώμα και προσδιορίζει τη ζωντάνια του. Η φωτεινότητα αναφέρεται στη λευκότητα ή στην ένταση ενός χρώματος. Η φωτεινότητα για οποιοδήποτε χρώμα θα ποικίλει από καθαρό λευκό μέχρι μαύρο. Η χρήση του ίδιου χρώματος σε διάφορες διαβαθμίσεις φωτεινότητας σε μια παλέτα τοποθεσίας έχει ως αποτέλεσμα ένα αρμονικό χρωματικό μοτίβο.
32 Εμπειρικός κανόνας Ακολουθήσετε μια γραμμή χρωμάτων είτε διαγώνια είτε οριζόντια, και συνδυάστε τα χρώματα που ανήκουν σε αυτή
Σύμφωνα με την microsoft 33 Όσοι ζουν σε ζεστά κλίματα, προτιμούν τα φωτεινά, έντονα χρώματα, ενώ αυτοί από τα ψυχρότερα προτιμούν τα πιο ψυχρά, πιο ξεθωριασμένα χρώματα. Στάση που αλλάζει με την ψυχολογική διάθεση. Ο συνδυασμός πολύ κορεσμένων σκιάσεων, τείνει να δώσει έμφαση στις αρνητικές πλευρές κάθε χρώματος. Η χρήση λιγότερο έντονων χρωμάτων οδηγεί σε μια πιο ζεστή, φιλική εμφάνιση, που προβάλλει μια εικόνα ποιο υψηλής ποιότητας.
34 Οι μπλε συνδυασμοί προβάλλουν μια πιο επαγγελματική και αυταρχική αίσθηση. Το μπλε μόνο του, σε διάφορες αποχρώσεις, μπορεί να φαίνεται ψυχρό, συντηρητικό και απρόσιτο. Η προσθήκη κόκκινου και κίτρινου φέρνει ζεστασιά και δυναμισμό σε αυτό το χρωματικό μοτίβο.