Πρώτα σχεδιάζαμε στο χαρτί. Μετά ήρθαν οι οθόνες υπολογιστών και τα ηλεκτρονικά tablet. Καθώς η τεχνολογία για την εμφάνιση μιας σελίδας εξελίσσεται, η δουλειά του σχεδιαστή παραμένει να τακτοποιήσει με σαφήνεια το περιεχόμενο. Ποιος είναι ο καλύτερος τρόπος; Να ακολουθεί τις αρχές οπτικής ιεραρχίας.

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

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

1. Μοτίβα ανάγνωσης

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

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

Μοτίβα F

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

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

Ζ-μοτίβα

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

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

2. Αρχές οπτικής ιεραρχίας και μέγεθος

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

3. Χώρος

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

4. Βάρος γραμματοσειράς και αντιστοίχιση

Η επιλογή γραμματοσειράς είναι κρίσιμη για τη δημιουργία οπτικής ιεραρχίας. Μεταξύ των πιο σημαντικών χαρακτηριστικών μιας γραμματοσειράς είναι το βάρος και το στυλ, όπως το serif και το sans serif. Άλλες τροποποιήσεις όπως η πλάγια γραφή μπορούν επίσης να παίξουν ρόλο.

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

5. Χρώμα και απόχρωση

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

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

6. Κατεύθυνση

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

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