Πώς να αξιοποιήσετε το μοτίβο F στο web design

Τι είναι το μοτίβο F;

Στα τέλη του 19ου αιώνα, ο Louis Émile Javal ήταν ο πρώτος που ανακάλυψε ότι, όταν διαβάζουμε, τα μάτια μας δεν κινούνται συνεχώς κατά μήκος μιας γραμμής κειμένου, αλλά κάνουν μικρά άλματα και σταματούν σε κάποια σημεία σε κάθε γραμμή.

Το 2006, μια έρευνα της εταιρείας συμβούλων Nielsen-Norman Group έδειξε ότι οι άνθρωποι δεν διαβάζουν τις ιστοσελίδες λέξη προς λέξη, από την αρχή μέχρι το τέλος, αλλά τις διαβάζουν ακολουθώντας ένα μοτίβο σε σχήμα F.

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

Τι σημαίνει αυτό το μοτίβο:

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

Γιατί οι άνθρωποι διαβάζουν σε σχήμα F;

Οι άνθρωποι διαβάζουν μια σελίδα σε σχήμα F όταν ισχύουν και τα τρία παρακάτω:

1. Η σελίδα έχει κείμενο με ελάχιστη ή καθόλου μορφοποίηση για το web. Για παράδειγμα, δεν έχει υπότιτλους, κουκκίδες ή σημεία με έντονα γράμματα, οπότε σχηματίζει ένα ενιαίο κομμάτι κειμένου.
2. Ο χρήστης προσπαθεί να είναι όσο πιο γρήγορος γίνεται σε αυτή τη σελίδα.
3. Ο χρήστης δεν είναι πολύ συγκεντρωμένος ή δεν ενδιαφέρεται να διαβάσει κάθε λέξη.

Τα δύο τελευταία περιγράφουν σχεδόν όλη τη συμπεριφορά στο web: οι περισσότεροι χρήστες προτιμούν να κάνουν αυτό που θέλουν με τον πιο γρήγορο τρόπο και με τη μικρότερη δυνατή προσπάθεια. Συνήθως δεν θέλουν να εμβαθύνουν και προτιμούν να βρουν μια γρήγορη απάντηση.

Πώς να χρησιμοποιήσετε το μοτίβο F στο web design

1. Βάλτε προτεραιότητες στο κείμενο και μορφοποιήστε το έτσι ώστε να οδηγεί τους χρήστες σε αυτό που θέλετε να δουν και σε αυτό που ξέρετε ότι θέλουν να δουν.
2. Βάλτε τα πιο σημαντικά σημεία στις δύο πρώτες παραγράφους της σελίδας.
3. Χρησιμοποιήστε τίτλους και υπότιτλους. Φροντίστε οι χρήστες να τους ξεχωρίζουν γρήγορα, κάνοντάς τους να φαίνονται πιο σημαντικοί και πιο εμφανείς από το κανονικό κείμενο.
4. Βάλτε τις λέξεις που δίνουν τις περισσότερες πληροφορίες στην αρχή των τίτλων και των υπότιτλων. Οι χρήστες πρέπει να καταλαβαίνουν τι λέει η ενότητα διαβάζοντας μόνο τις δύο πρώτες λέξεις.
5. Ομαδοποιήστε οπτικά μικρά κομμάτια περιεχομένου που σχετίζονται μεταξύ τους: για παράδειγμα, μπορείτε να τα βάλετε σε ένα πλαίσιο ή να χρησιμοποιήσετε διαφορετικό φόντο.
6. Γράψτε με έντονα γράμματα τις σημαντικές λέξεις και φράσεις.
7. Φροντίστε οι σύνδεσμοι να περιέχουν λέξεις που δίνουν πληροφορίες (αντί για τα γενικά "πήγαινε", "κάντε κλικ εδώ" ή "περισσότερα"). Αυτή η τεχνική βοηθά επίσης τους χρήστες που ακούνε τους συνδέσμους να διαβάζονται δυνατά, αντί να κοιτάζουν το περιεχόμενο με τα μάτια.
8. Χρησιμοποιήστε κουκκίδες και αριθμούς για να ξεχωρίζουν τα στοιχεία μιας λίστας ή τα βήματα μιας διαδικασίας.
9. Αφαιρέστε το περιεχόμενο που δεν χρειάζεται.

Ένα παράδειγμα σχεδιασμού με το μοτίβο F

Ισχύει το μοτίβο F και στα κινητά;

Υπάρχει μια έρευνα της Google που κάποιοι σχολιαστές χρησιμοποιούν για να πουν ότι το μοτίβο F δεν ισχύει στις κινητές συσκευές. Αυτή η έρευνα εστιάζει στα αποτελέσματα αναζήτησης που δίνουν αμέσως την απάντηση και προέρχονται από το Knowledge Graph και το Google Instant.

Αφού οι άνθρωποι παίρνουν την απάντηση χωρίς να κάνουν κλικ σε έναν σύνδεσμο, ο αριθμός των κλικ δεν δείχνει με ακρίβεια πόσο ικανοποιημένοι είναι οι χρήστες και πόσο χρήσιμα είναι τα αποτελέσματα. Γι' αυτό οι ερευνητές μελέτησαν πού κοιτούσαν οι χρήστες στην οθόνη του κινητού τους και βρήκαν ότι:

"...το 68 τοις εκατό της προσοχής πηγαίνει στο πάνω μισό της οθόνης και το 86 τοις εκατό της προσοχής πηγαίνει στα πάνω δύο τρίτα της οθόνης."

Ωστόσο, αυτά τα ευρήματα ισχύουν μόνο για τις σελίδες με αποτελέσματα αναζήτησης και όχι για άλλα είδη σελίδων. Άρα, προς το παρόν, το μοτίβο F εξακολουθεί να ισχύει για το μεγαλύτερο μέρος του περιεχομένου στο web, όποια συσκευή κι αν χρησιμοποιείται.

Όμως έρχονται αλλαγές. Αναπτύσσονται νέες τεχνολογίες που "επιτρέπουν στο κείμενο να ξέρει αν και πώς διαβάζεται", συνδυάζοντας την τεχνητή νοημοσύνη με την τεχνολογία που παρακολουθεί την κίνηση των ματιών. Ένα κείμενο που αντιδρά στον τρόπο που το διαβάζουμε θα μπορούσε να αλλάξει εντελώς τον τρόπο που διαβάζουμε online.

Άλλοι τρόποι ανάγνωσης μιας σελίδας

Το μοτίβο F δεν είναι ο μόνος τρόπος με τον οποίο κοιτάζουμε μια σελίδα. Υπάρχουν πολλοί άλλοι, όπως αυτοί που ακολουθούν:

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

Συμπέρασμα

Ο τρόπος που κοιτάζουμε μια σελίδα στο web εξαρτάται από:

• Το κίνητρο του χρήστη
• Τους στόχους που θέλει να πετύχει
• Τη διάταξη της σελίδας και τη μορφοποίηση του κειμένου
• Το περιεχόμενο της σελίδας

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