Τοποθέτηση στοιχείων σε ιστοσελίδα: πώς χτίζεται καθαρή οπτική ιεραρχία

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

Η οπτική ιεραρχία ξεκινά από μία κύρια ερώτηση

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

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

Πίνακας προτεραιότητας στοιχείων

Η κύρια ενέργεια δεν πρέπει να επαναλαμβάνεται παντού

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

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

Η φόρμα επικοινωνίας θέλει δικό της χώρο

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

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

Σειρά ανάγνωσης σε κινητό και μεγάλη οθόνη

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

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

Τι πρέπει να αποφεύγεται

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

Έλεγχος με πραγματικά σενάρια

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

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

Ο χώρος ανάμεσα στα στοιχεία είναι μέρος της πληροφορίας

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

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

Πάνω μέρος, μέση και τέλος έχουν διαφορετική δουλειά

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

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

Έλεγχος χωρίς χρώμα και χωρίς εικόνες

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

Η διάταξη πρέπει να αντέχει σε αλλαγές περιεχομένου

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

Έλεγχος της διάταξης με μία μόνο κύρια αποστολή

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