Το 1997, ο Jakob Nielsen δημοσίευσε ένα εύρημα που παραμένει επίκαιρο: το 79% των επισκεπτών μιας ιστοσελίδας τη σαρώνουν αντί να τη διαβάζουν λέξη προς λέξη. Αυτή η τάση μόνο ενισχύθηκε με την εξάπλωση των smartphones και τη συρρίκνωση της προσοχής μας. Δεν πρόκειται για τεμπελιά. Η σάρωση είναι αποτελεσματική στρατηγική: παρέχει σχεδόν την ίδια πληροφορία με την πλήρη ανάγνωση, σε κλάσμα του χρόνου. Ένας σχεδιασμός που αγνοεί αυτή την πραγματικότητα πολεμά τον χρήστη.
Από το 2006, ερευνητές του Nielsen Norman Group κατέγραφαν μέσω eye-tracking πού ακριβώς πέφτει το βλέμμα σε ιστοσελίδες. Σε σελίδες με πολύ κείμενο, το μάτι κινείται σε ένα προβλέψιμο σχήμα: μια δυνατή οριζόντια σάρωση στην κορυφή, μια κοντύτερη οριζόντια κίνηση λίγο χαμηλότερα, και έπειτα μια κατακόρυφη ματιά κατά μήκος της αριστερής πλευράς. Το σχήμα μοιάζει με το γράμμα F. Μια νεότερη έρευνα, έντεκα χρόνια αργότερα, επιβεβαίωσε ότι το μοτίβο παραμένει αμετάβλητο, τόσο σε υπολογιστές όσο και σε κινητά.
Το F-μοτίβο δεν είναι απλή παρατήρηση. Είναι μήνυμα. Μας λέει ότι η πρώτη γραμμή διαβάζεται, η αριστερή άκρη διαβάζεται, και η δεξιά πλευρά σε μεγάλο βαθμό αγνοείται. Οι μεγάλες παράγραφοι χάνουν τον αναγνώστη πριν τελειώσουν. Η αρχή κάθε γραμμής ανταγωνίζεται για προσοχή. Το υπόλοιπό της, όχι. Αν το μήνυμά σας κρύβεται στη μέση μιας παραγράφου, οι περισσότεροι επισκέπτες δεν θα το δουν.
Το F-μοτίβο εμφανίζεται όταν η σελίδα δεν δίνει στο μάτι καμία δομή να ακολουθήσει. Η ίδια ερευνητική ομάδα εντόπισε μια αποτελεσματικότερη συμπεριφορά σάρωσης: το μοτίβο «layer-cake» (στρώσεις κέικ). Όταν οι επικεφαλίδες και οι υποτίτλοι είναι οπτικά διακριτοί (μεγαλύτεροι, έντονοι, ξεκάθαρα διαφορετικοί από το βασικό κείμενο) το μάτι πηδά από επικεφαλίδα σε επικεφαλίδα, σταματά σε όσες φαίνονται σχετικές, και έπειτα εμβαθύνει στο κείμενο από κάτω. Καλός σχεδιασμός καθοδηγεί τη σάρωση αντί να παραδίδεται σε αυτή.
Η οπτική ιεραρχία είναι το σύνολο σημάτων που λένε στο μάτι πού να κοιτάξει πρώτα. Το μέγεθος είναι το πιο άμεσο: μια μεγάλη επικεφαλίδα τραβά την προσοχή πριν από μια μικρή. Η αντίθεση λειτουργεί το ίδιο: ένα στοιχείο υψηλής αντίθεσης τραβά το βλέμμα πριν από ένα χαμηλής αντίθεσης. Ο λευκός χώρος είναι λιγότερο προφανής αλλά εξίσου ισχυρός. Τα στοιχεία που περιβάλλονται από κενό χώρο λαμβάνουν περισσότερη προσοχή, γιατί τίποτα άλλο δεν ανταγωνίζεται για το μάτι σε εκείνη τη ζώνη. Όταν τα πάντα είναι συνωστισμένα, τίποτα δεν φαίνεται σημαντικό. Οι έρευνες συνιστούν να κρατάμε απλή την ιεραρχία: τρία μεγέθη κειμένου το πολύ, δύο κύρια χρώματα και δύο δευτερεύοντα. Όσο περισσότερη ποικιλία, τόσο πιο δύσκολο για το μάτι να χτίσει ιεραρχία από τον θόρυβο.
Ένα συναφές εννοιολογικό εργαλείο είναι το Z-μοτίβο, χρήσιμο για σελίδες με λίγο κείμενο: ένα hero section, μια landing page, μια καμπάνια. Σε αραιό layout, το μάτι ξεκινά πάνω αριστερά, σαρώνει δεξιά, πέφτει διαγώνια στα κάτω αριστερά, και σαρώνει πάλι δεξιά προς το κάλεσμα σε δράση. Πρόκειται περισσότερο για οδηγό τοποθέτησης στοιχείων παρά για αυστηρά καταμετρημένη συμπεριφορά, αλλά είναι αξιόπιστο πλαίσιο για σελίδες με λίγο κείμενο.
Όταν σχεδιάζουμε ένα hero section, σκεφτόμαστε αυτή την αλληλουχία συνειδητά. Η επικεφαλίδα φέρει αρκετό μέγεθος και αντίθεση ώστε να αγκυρώσει αμέσως το βλέμμα. Το υποστηρικτικό κείμενο είναι πιο σύντομο από ό,τι θα επιθυμούσε. Ο λευκός χώρος δεν είναι αδόκιμος χώρος. Σηματοδοτεί ότι κάτι εδώ αξίζει προσοχή. Το κουμπί δράσης βρίσκεται στην επόμενη φυσική στάση του βλέμματος. Τίποτα στη σελίδα δεν ανταγωνίζεται για την προσοχή αν δεν το έχει κερδίσει.
Δεν γεμίζουμε κάθε κενό. Δεν κινούμε κάθε στοιχείο. Ρωτάμε: αν ένας επισκέπτης περάσει έξι δευτερόλεπτα σε αυτή τη σελίδα, τι θέλουμε να έχει δει; Κι έπειτα σχεδιάζουμε το μονοπάτι.