Όταν ένας επισκέπτης μπαίνει στην ιστοσελίδα σου, τα μάτια του δεν διαβάζουν τη σελίδα από πάνω προς τα κάτω με τη σειρά. Σαρώνουν, πηδώντας ανάμεσα σε στοιχεία που ξεχωρίζουν. Η οπτική ιεραρχία είναι η αρχή σχεδιασμού που ελέγχει τι προσέχουν πρώτο, δεύτερο και τρίτο. Χωρίς αυτήν, ακόμα και το καλογραμμένο περιεχόμενο χάνεται, γιατί τίποτα δεν οδηγεί το μάτι προς αυτό που μετράει περισσότερο.
Η οπτική ιεραρχία σε μια ιστοσελίδα είναι η σκόπιμη οργάνωση των στοιχείων με βάση το μέγεθος, το χρώμα, την αντίθεση, τις αποστάσεις και τη θέση, ώστε οι επισκέπτες να εστιάζουν φυσικά πρώτα στην πιο σημαντική πληροφορία. Καθορίζει αν κάποιος καταλαβαίνει την πρόταση αξίας σου μέσα σε δευτερόλεπτα ή φεύγει μπερδεμένος για το τι προσφέρει η επιχείρησή σου. Το να στήσεις σωστά την ιεραρχία είναι μία από τις αποφάσεις σχεδιασμού με τον μεγαλύτερο αντίκτυπο.
Γιατί μετράει η οπτική ιεραρχία;
Οι επισκέπτες χρειάζονται κατά μέσο όρο λίγα δευτερόλεπτα για να αποφασίσουν αν θα μείνουν σε μια σελίδα. Σε αυτό το διάστημα δεν διαβάζουν παραγράφους. Σαρώνουν επικεφαλίδες, εικόνες και κουμπιά για να κρίνουν αν η σελίδα τους αφορά. Μια σελίδα με δυνατή οπτική ιεραρχία εκφράζει αμέσως τον σκοπό της. Μια σελίδα χωρίς αυτήν αναγκάζει τους επισκέπτες να κοπιάσουν περισσότερο και οι περισσότεροι δεν θα μπουν στον κόπο.
Η ιεραρχία οδηγεί και σε ενέργεια. Όταν το κύριο κουμπί ενέργειας κυριαρχεί οπτικά, περισσότεροι επισκέπτες το πατούν. Όταν χάνεται μέσα στο περιεχόμενο γύρω του, τα ποσοστά μετατροπής πέφτουν. Η σχέση ανάμεσα στην οπτική ιεραρχία και τα επιχειρηματικά αποτελέσματα είναι άμεση: μια καθαρή ιεραρχία δίνει πιο καθαρές διαδρομές προς τις ενέργειες που θέλεις να κάνουν οι επισκέπτες.
Ποια εργαλεία δημιουργούν οπτική ιεραρχία;
Οι σχεδιαστές χρησιμοποιούν ένα σταθερό σύνολο οπτικών ιδιοτήτων για να ορίσουν προτεραιότητα. Η καθεμία μπορεί να ρυθμιστεί ανεξάρτητα ή να συνδυαστεί για πιο δυνατό αποτέλεσμα.
Μέγεθος
Τα μεγαλύτερα στοιχεία τραβούν πρώτα την προσοχή. Ένας κύριος τίτλος στα 36 pixel τραβά το μάτι πριν από το κείμενο στα 16 pixel. Οι διαφορές μεγέθους ανάμεσα στα επίπεδα επικεφαλίδων δημιουργούν καθαρή σειρά ανάγνωσης. Όταν όλα στη σελίδα έχουν περίπου το ίδιο μέγεθος, τίποτα δεν ξεχωρίζει και οι επισκέπτες δεν έχουν σημείο εισόδου.
Χρώμα και αντίθεση
Τα στοιχεία με υψηλή αντίθεση πάνω σε ουδέτερο φόντο απαιτούν προσοχή. Ένα φωτεινό κουμπί σε λευκή σελίδα είναι αδύνατο να το χάσεις. Τα στοιχεία με χαμηλή αντίθεση υποχωρούν. Χρησιμοποίησε το κύριο χρώμα του brand σου με φειδώ στα στοιχεία που μετράνε περισσότερο: τον κύριο τίτλο, το κύριο κουμπί ενέργειας και τα βασικά στατιστικά ή τις μαρτυρίες. Το περιεχόμενο γύρω τους πρέπει να χρησιμοποιεί ουδέτερους τόνους που υποστηρίζουν αντί να ανταγωνίζονται.
Αποστάσεις και λευκός χώρος
Τα στοιχεία που περιβάλλονται από λευκό χώρο φαίνονται πιο σημαντικά από στοιχεία στριμωγμένα μαζί. Η γενναιόδωρη απόσταση γύρω από ένα κουμπί ενέργειας δείχνει ότι αξίζει προσοχή. Οι στριμωγμένες διατάξεις κάνουν τα πάντα να φαίνονται εξίσου επείγοντα, που σημαίνει ότι τίποτα δεν φαίνεται επείγον. Το άρθρο πώς να χρησιμοποιείς τον λευκό χώρο στην ιστοσελίδα σου καλύπτει αυτή την αρχή με πρακτικές λεπτομέρειες.
Θέση
Οι επισκέπτες σαρώνουν τις σελίδες με προβλέψιμα μοτίβα, συνήθως ξεκινώντας από πάνω αριστερά και κατεβαίνοντας. Το πιο σημαντικό περιεχόμενο ανήκει στο πάνω μέρος της σελίδας και above the fold στο κινητό.
Πώς εφαρμόζεις την οπτική ιεραρχία σε μια επαγγελματική ιστοσελίδα
Η δυνατή ιεραρχία ακολουθεί σταθερό μοτίβο σε κάθε τύπο σελίδας. Οι λεπτομέρειες αλλάζουν, αλλά η δομή μένει η ίδια.
Ιεραρχία στην αρχική σελίδα
Η αρχική σελίδα χρειάζεται την πιο καθαρή ιεραρχία σε ολόκληρη την ιστοσελίδα, γιατί απευθύνεται στο ευρύτερο κοινό. Ο κύριος τίτλος λέει τι κάνει η επιχείρηση. Ένα κύριο κουμπί ενέργειας βρίσκεται εμφανώς από κάτω. Το άρθρο πώς να κάνεις την ιστοσελίδα σου να φαίνεται επαγγελματική καλύπτει πώς χωράει η ιεραρχία στον ευρύτερο στόχο μιας προσεγμένης εμφάνισης. Το άρθρο τι είναι ο σχεδιασμός UX εξηγεί πώς συνδέεται η ιεραρχία με την ευρύτερη εμπειρία του επισκέπτη.
Πώς χειρίζεται το WEMASY την οπτική ιεραρχία
Τα πρότυπα του WEMASY χτίζονται με την οπτική ιεραρχία ως βασική αρχή σχεδιασμού. Τα μεγέθη επικεφαλίδων, το στυλ των κουμπιών, οι προεπιλεγμένες αποστάσεις και οι διατάξεις των μπλοκ περιεχομένου είναι δομημένα ώστε τα πιο σημαντικά στοιχεία να ξεχωρίζουν φυσικά. Ο οπτικός επεξεργαστής σου επιτρέπει να προσαρμόζεις την ιεραρχία αλλάζοντας επίπεδα επικεφαλίδων, στυλ κουμπιών και αποστάσεις ενοτήτων, διατηρώντας ανέγγιχτη τη δομή σε υπολογιστή και κινητό.
Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τα πακέτα στη σελίδα τιμών.
Συχνές ερωτήσεις
Τι είναι η οπτική ιεραρχία σε μια ιστοσελίδα;
Η οπτική ιεραρχία είναι η οργάνωση των στοιχείων της σελίδας ώστε οι επισκέπτες να προσέχουν πρώτα την πιο σημαντική πληροφορία. Το μέγεθος, το χρώμα, η αντίθεση, οι αποστάσεις και η θέση συμβάλλουν όλα στον ορισμό αυτής της σειράς. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το ρυθμίσεις απευθείας στην ιστοσελίδα σου.
Γιατί είναι σημαντική η οπτική ιεραρχία για τις μετατροπές;
Μια καθαρή ιεραρχία καθοδηγεί τους επισκέπτες προς την ενέργεια που θέλεις να κάνουν. Όταν το κουμπί ενέργειας κυριαρχεί οπτικά και η πρόταση αξίας φαίνεται αμέσως, περισσότεροι επισκέπτες καταλαβαίνουν τι να κάνουν και το ολοκληρώνουν. Χωρίς ιεραρχία, τα κουμπιά ενέργειας χάνονται ανάμεσα σε ανταγωνιστικά στοιχεία.
Πώς ξέρω αν η σελίδα μου έχει καλή οπτική ιεραρχία;
Μισόκλεισε τα μάτια σου μπροστά στη σελίδα ή δες την από απόσταση. Το στοιχείο που ξεχωρίζει περισσότερο πρέπει να είναι ο κύριος τίτλος ή το κύριο κουμπί ενέργειας. Αν τίποτα δεν ξεχωρίζει, ή αν κυριαρχεί λάθος στοιχείο, η ιεραρχία θέλει προσαρμογή. Ζήτησε από κάποιον που δεν γνωρίζει την ιστοσελίδα σου να εντοπίσει το κύριο μήνυμα μέσα σε πέντε δευτερόλεπτα.
Ποια είναι η διαφορά ανάμεσα στην οπτική ιεραρχία και τη διάταξη;
Η διάταξη καθορίζει πού τοποθετούνται τα στοιχεία στη σελίδα: στήλες, πλέγματα και σειρά ενοτήτων. Η οπτική ιεραρχία καθορίζει ποια από αυτά τα στοιχεία τραβούν πρώτα την προσοχή μέσα από το μέγεθος, το χρώμα και την αντίθεση. Μια σελίδα μπορεί να έχει λογική διάταξη αλλά κακή ιεραρχία, αν όλα τα στοιχεία ανταγωνίζονται εξίσου για την προσοχή.
Δουλεύει η οπτική ιεραρχία το ίδιο στο κινητό;
Οι αρχές είναι ίδιες, αλλά η εφαρμογή διαφέρει. Οι οθόνες κινητού δείχνουν λιγότερο περιεχόμενο κάθε φορά, οπότε η ιεραρχία πρέπει να είναι πιο σφιχτή. Στοίβαξε τα στοιχεία κάθετα με σειρά προτεραιότητας. Φρόντισε ο κύριος τίτλος και το κύριο κουμπί ενέργειας να εμφανίζονται πριν κάνει κύλιση ο επισκέπτης. Μείωσε τον αριθμό των ανταγωνιστικών στοιχείων σε σχέση με την έκδοση για υπολογιστή.
Μπορούν τα πρότυπα να δώσουν καλή οπτική ιεραρχία;
Ναι. Τα καλοσχεδιασμένα πρότυπα ορίζουν ιεραρχία μέσα από τη δομή των επικεφαλίδων, το στυλ των κουμπιών και τις προεπιλεγμένες αποστάσεις. Η προσαρμογή πρέπει να δουλεύει μέσα σε αυτή τη δομή και όχι να την παρακάμπτει. Αν αλλάξεις μια επικεφαλίδα σε πολύ μεγαλύτερο μέγεθος ή προσθέσεις πολλά έντονα χρωματισμένα κουμπιά, μπορεί να χαλάσεις την ιεραρχία που δίνει το πρότυπο.