Τι είναι η οπτική ιεραρχία (και πώς μπορείτε να την εφαρμόσετε);

Κάθε φορά που επισκέπτεστε μια ιστοσελίδα, κάποιο μοναδικό στοιχείο πιθανότατα θα σας μαγέψει. Μπορεί να είναι μια πρόσκληση για δράση (Call To Action), μια κεφαλίδα, ένα λογότυπο ή οτιδήποτε άλλο ξεχωρίζει. Στις περισσότερες περιπτώσεις, αυτά τα στοιχεία δεν τραβούν την προσοχή λόγω σύμπτωσης, αλλά επειδή έχουν σχεδιαστεί για να το κάνουν.

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

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

Τι είναι η οπτική ιεραρχία

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

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

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

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

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

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

5 στοιχεία που μπορείτε να χρησιμοποιήσετε για να εφαρμόσετε την οπτική ιεραρχία στα σχέδιά σας

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

  1. Χρώμα

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

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

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

Αυτή είναι μια απλή προσέγγιση, αλλά όταν το συνδυάζετε με υπερμεγέθη κείμενο είναι αδύνατο να αγνοήσετε.

  1. Μέγεθος

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

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

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

  1. Λευκός χώρος

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

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

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

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

  1. Ευθυγράμμιση

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

Φυσικά, χρησιμοποιώντας ποιοτικά γραφικά για να κυλήσετε τους επισκέπτες σε έργα. Ωστόσο, πρέπει επίσης να δώσετε προσοχή στην ευθυγράμμιση του συνοδευτικού κειμένου. Με το κεντράρισμα, διασφαλίζετε ότι οι επισκέπτες δεν θα μπορούν να το χάσουν. Η τοποθέτηση κειμένου στα αριστερά λειτουργεί επίσης, καθώς αυτό είναι το μέρος της σελίδας που λαμβάνει τη μεγαλύτερη προσοχή :

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

  1. Τυπογραφία

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

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

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

Συμπέρασμα

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

Υπάρχουν πολλά στοιχεία που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε μια επιτυχημένη οπτική ιεραρχία, όπως:

  1. Χρώμα
  2. Μέγεθος
  3. Λευκός χώρος
  4. Ευθυγραμμία
  5. Τυπογραφία

 

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on email
Email