Το ένστικτο όταν χτίζεις μια ιστοσελίδα είναι να γεμίζεις τον χώρο. Να προσθέτεις μια ακόμα ενότητα, ένα ακόμα πλαίσιο με λειτουργίες, μια ακόμα γραμμή κειμένου. Το ένστικτο που βγάζει καλύτερες ιστοσελίδες είναι το αντίθετο: άφησε χώρο. Ο λευκός χώρος δεν είναι άδειος χώρος. Είναι αυτό που κάνει όλα τα άλλα στη σελίδα ευανάγνωστα, αξιόπιστα και εύκολα στο να δράσεις.
Ο λευκός χώρος στο design αναφέρεται στις άδειες περιοχές ανάμεσα και γύρω από τα στοιχεία μιας σελίδας. Περιλαμβάνει την απόσταση ανάμεσα στις γραμμές κειμένου, το περιθώριο μέσα σε ένα κουμπί, το κενό ανάμεσα σε έναν τίτλο και την παράγραφο από κάτω και τα περιθώρια γύρω από τις ενότητες. Τίποτα από αυτά δεν πάει χαμένο. Όλα δουλεύουν.
Το όνομα είναι ελαφρώς παραπλανητικό: ο λευκός χώρος δεν χρειάζεται να είναι λευκός. Είναι κάθε περιοχή της σελίδας που δεν καταλαμβάνεται από περιεχόμενο. Ένα σκούρο φόντο με γενναιόδωρες αποστάσεις ανάμεσα στις ενότητες χρησιμοποιεί τον λευκό χώρο εξίσου αποτελεσματικά με ένα λευκό φόντο.
Γιατί μετράει ο λευκός χώρος σε μια ιστοσελίδα;
Ο λευκός χώρος επηρεάζει το πώς αντιλαμβάνονται και επεξεργάζονται οι επισκέπτες το περιεχόμενο. Οι σελίδες με γενναιόδωρες αποστάσεις φαίνονται πιο εύκολες στην ανάγνωση, πιο επαγγελματικές και πιο αξιόπιστες. Οι σελίδες με λίγες αποστάσεις φαίνονται φορτωμένες και δυσκολότερες στην πλοήγηση, όσο καλό κι αν είναι το περιεχόμενο.
Ο γνωστικός λόγος είναι απλός. Όταν τα στοιχεία είναι κοντά το ένα στο άλλο, ο εγκέφαλος πρέπει να δουλέψει περισσότερο για να καταλάβει πού τελειώνει το ένα και πού αρχίζει το άλλο. Όταν τα στοιχεία έχουν χώρο γύρω τους, το μάτι κινείται φυσικά στη σελίδα χωρίς κόπο. Λιγότερη προσπάθεια από τον επισκέπτη σημαίνει περισσότερη προσοχή διαθέσιμη για το πραγματικό περιεχόμενο και τα κουμπιά ενέργειας.
Ο λευκός χώρος εκφράζει και τοποθέτηση brand. Τα premium και τα πολυτελή brand χρησιμοποιούν σταθερά περισσότερο λευκό χώρο από τα οικονομικά. Η σύνδεση ανάμεσα στις γενναιόδωρες αποστάσεις και την ποιότητα είναι βαθιά ριζωμένη. Μια επαγγελματική ιστοσελίδα που φαίνεται στριμωγμένη δείχνει κάτι ακούσιο για το brand, ό,τι κι αν λέει το κείμενο.
Ποιοι είναι οι τύποι λευκού χώρου στο web design;
Μακρο λευκός χώρος
Ο μακρο λευκός χώρος είναι ο χώρος μεγάλης κλίμακας ανάμεσα στις βασικές ενότητες μιας σελίδας. Το κενό ανάμεσα στην ενότητα hero και στην ενότητα με τις λειτουργίες, τα περιθώρια δεξιά και αριστερά του περιεχομένου, ο χώρος ανάμεσα στην τελευταία ενότητα και το footer. Ο μακρο λευκός χώρος δίνει στη σελίδα τον συνολικό της «αέρα» και καθορίζει πόσο ανοιχτή ή πυκνή φαίνεται η διάταξη με την πρώτη ματιά.
Μικρο λευκός χώρος
Ο μικρο λευκός χώρος είναι οι αποστάσεις μικρής κλίμακας μέσα στο περιεχόμενο: ο χώρος ανάμεσα στις γραμμές κειμένου (line height), το κενό ανάμεσα σε μια ετικέτα και το πεδίο της σε μια φόρμα, το περιθώριο μέσα σε ένα κουμπί. Ο μικρο λευκός χώρος καθορίζει πόσο ευανάγνωστα είναι τα μεμονωμένα στοιχεία. Μια παράγραφος με στενή απόσταση γραμμών διαβάζεται πιο δύσκολα από την ίδια παράγραφο με γενναιόδωρη απόσταση, ακόμα κι αν το μέγεθος γραμματοσειράς είναι ίδιο.
Ενεργός λευκός χώρος
Ο ενεργός λευκός χώρος είναι χώρος που τοποθετείται σκόπιμα για να κατευθύνει την προσοχή ή να δημιουργήσει έμφαση. Μια γενναιόδωρη ποσότητα χώρου γύρω από ένα κουμπί ενέργειας, για παράδειγμα, το απομονώνει οπτικά και το κάνει να ξεχωρίζει από το περιεχόμενο γύρω του. Εδώ ο λευκός χώρος χρησιμοποιείται ως εργαλείο σχεδιασμού και όχι απλώς ως χώρος για «αναπνοή».
Παθητικός λευκός χώρος
Ο παθητικός λευκός χώρος είναι ο φυσικός χώρος που υπάρχει γύρω από το περιεχόμενο ως αποτέλεσμα της διάταξης και όχι ως σκόπιμη απόφαση σχεδιασμού. Το κενό ανάμεσα στο τέλος μιας παραγράφου και την άκρη της στήλης περιεχομένου, ο χώρος στο κάτω μέρος μιας σελίδας πριν το footer. Είναι απαραίτητος αλλά όχι στρατηγικός.
Πόσος λευκός χώρος είναι αρκετός;
Δεν υπάρχει σταθερός κανόνας, αλλά το πιο συνηθισμένο λάθος είναι να χρησιμοποιείς πολύ λίγο και όχι πολύ. Αν αμφιβάλλεις, αύξησε τις αποστάσεις και δες αν η σελίδα φαίνεται καλύτερη. Σχεδόν πάντα φαίνεται.
Η ποσότητα λευκού χώρου που δουλεύει εξαρτάται από τον τύπο περιεχομένου και το κοινό. Μια σελίδα τεκμηρίωσης για τεχνικούς χρήστες μπορεί να είναι πιο πυκνή από μια αρχική σελίδα που απευθύνεται σε απλούς επισκέπτες. Μια σελίδα πολυτελούς προϊόντος χρειάζεται περισσότερο χώρο από έναν πίνακα σύγκρισης. Η σωστή ποσότητα είναι αυτή που κάνει το περιεχόμενο πιο εύκολο στην ανάγνωση και τα πιο σημαντικά στοιχεία πιο εύκολα στην εντόπιση.
Ένα πρακτικό τεστ: αν μισοκλείσεις τα μάτια μπροστά στη σελίδα και όλα θολώνουν μαζί, δεν υπάρχει αρκετός λευκός χώρος. Αν το μάτι σου βρίσκει αμέσως τον τίτλο και το κουμπί ενέργειας όταν κοιτάς τη σελίδα συνολικά, οι αποστάσεις δουλεύουν. Το άρθρο τι είναι η οπτική ιεραρχία εξηγεί πώς δουλεύουν οι αποστάσεις μαζί με το μέγεθος, το χρώμα και την αντίθεση για να καθοδηγήσουν το μάτι του επισκέπτη.
Συνηθισμένα λάθη λευκού χώρου σε επαγγελματικές ιστοσελίδες
Ενότητες στριμωγμένες μαζί χωρίς οπτικό διαχωρισμό είναι το πιο συχνό πρόβλημα. Όταν η ενότητα hero, η ενότητα λειτουργιών, οι μαρτυρίες και το κουμπί ενέργειας κυλούν η μία μέσα στην άλλη χωρίς χώρο, οι επισκέπτες δεν καταλαβαίνουν πού τελειώνει ένα θέμα και πού αρχίζει άλλο. Η προσθήκη κάθετου χώρου ανάμεσα στις ενότητες είναι συνήθως η μία αλλαγή που βελτιώνει περισσότερο μια φορτωμένη αρχική.
Η στενή απόσταση γραμμών στο κυρίως κείμενο κάνει τις παραγράφους πιο δύσκολες στην ανάγνωση, ιδιαίτερα στο κινητό, όπου το μήκος της γραμμής είναι μικρότερο και το μάτι πρέπει να αλλάζει κατεύθυνση πιο συχνά. Ύψος γραμμής τουλάχιστον 1,5 φορές το μέγεθος της γραμματοσειράς είναι το ευρέως χρησιμοποιούμενο πρότυπο για ευαναγνωσία στο web.
Τα κουμπιά με πολύ λίγο περιθώριο φαίνονται μικρά και δύσκολα στο πάτημα. Ένα κουμπί που τεχνικά έχει το σωστό μέγεθος αλλά ελάχιστο περιθώριο γύρω από το κείμενο φαίνεται οπτικά μικρότερο απ' ό,τι είναι και παίρνει λιγότερα κλικ. Το γενναιόδωρο περιθώριο κάνει τα κουμπιά να φαίνονται σημαντικά και εύκολα στο να δράσεις.
Περιεχόμενο που τρέχει από άκρη σε άκρη χωρίς πλαϊνά περιθώρια διαβάζεται άβολα και κάνει τη σελίδα να φαίνεται ημιτελής. Κάθε περιοχή περιεχομένου ωφελείται από ένα σταθερό περιθώριο που κρατά το κείμενο μακριά από τις άκρες της οθόνης, ιδιαίτερα στο κινητό. Το άρθρο πώς να κάνεις την ιστοσελίδα σου φιλική προς τα κινητά καλύπτει τις αποστάσεις ως μέρος του ευρύτερου συνόλου θεμάτων σχεδιασμού για κινητά.
Πώς επηρεάζει ο λευκός χώρος το SEO;
Ο λευκός χώρος επηρεάζει το SEO έμμεσα, μέσα από τα σήματα εμπειρίας χρήστη που δημιουργεί. Οι σελίδες που διαβάζονται πιο εύκολα έχουν χαμηλότερα ποσοστά εγκατάλειψης και μεγαλύτερο χρόνο παραμονής. Αυτά τα σήματα συμπεριφοράς δείχνουν στις μηχανές αναζήτησης ότι η σελίδα εξυπηρετεί καλά τους επισκέπτες της, κάτι που συμβάλλει στην κατάταξη με τον καιρό.
Σχετική είναι και η ταχύτητα της σελίδας. Ο λευκός χώρος από μόνος του δεν έχει μέγεθος αρχείου, οπότε οι περισσότερες αποστάσεις δεν επιβραδύνουν μια σελίδα. Όμως οι επιλογές σχεδιασμού που συνοδεύουν μερικές φορές τις πυκνές διατάξεις, μεγάλες εικόνες στοιβαγμένες κοντά, βαριά animation ανάμεσα στις ενότητες, υπερβολικό περιεχόμενο, μπορούν όλες να επηρεάσουν τον χρόνο φόρτωσης. Μια πιο καθαρή, πιο ευρύχωρη διάταξη συχνά συμπίπτει με μια πιο γρήγορη. Το άρθρο τι είναι το SEO καλύπτει πώς συνδέονται η εμπειρία χρήστη και η τεχνική απόδοση με την κατάταξη στις αναζητήσεις.
Πώς χειρίζεται το WEMASY τον λευκό χώρο
Τα πρότυπα του δημιουργού ιστοσελίδων του WEMASY χτίζονται με σταθερές προεπιλεγμένες αποστάσεις που δημιουργούν ευανάγνωστη, επαγγελματική διάταξη χωρίς χειροκίνητη ρύθμιση. Το περιθώριο των ενοτήτων, τα ύψη γραμμών και οι αποστάσεις των στοιχείων είναι ορισμένα σε τιμές που δουλεύουν σε όλες τις συσκευές. Ο οπτικός επεξεργαστής σου επιτρέπει να προσαρμόζεις τις αποστάσεις σε μεμονωμένες ενότητες όταν η προεπιλογή δεν ταιριάζει στο περιεχόμενό σου, δίνοντάς σου έλεγχο χωρίς να ξεκινάς από το μηδέν.
Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τα πακέτα στη σελίδα τιμών.
Συχνές ερωτήσεις
Σημαίνει ο περισσότερος λευκός χώρος λιγότερο περιεχόμενο;
Όχι απαραίτητα. Ο λευκός χώρος αφορά τις αποστάσεις ανάμεσα και γύρω από τα στοιχεία, όχι την αφαίρεση περιεχομένου. Μπορείς να έχεις μια σελίδα πλούσια σε περιεχόμενο που πάλι χρησιμοποιεί αποτελεσματικά τον λευκό χώρο, ομαδοποιώντας καθαρά το σχετικό περιεχόμενο, δίνοντας στις ενότητες χώρο να αναπνεύσουν και μην προσπαθώντας να δείξεις τα πάντα μαζί. Η αντίληψη ότι η προσθήκη λευκού χώρου σημαίνει αφαίρεση περιεχομένου είναι ένας από τους λόγους που οι επαγγελματικές ιστοσελίδες καταλήγουν πολύ πυκνές. Περισσότερος λευκός χώρος συνήθως σημαίνει καλύτερα οργανωμένο περιεχόμενο, όχι λιγότερο. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το ρυθμίσεις απευθείας στην ιστοσελίδα σου.
Μετράει ο λευκός χώρος στο κινητό;
Ναι, και αναμφίβολα περισσότερο από ό,τι στον υπολογιστή. Σε μικρή οθόνη, το υπερβολικά πυκνό περιεχόμενο διαβάζεται πιο δύσκολα και πατιέται με λιγότερη ακρίβεια. Οι στόχοι πατήματος χρειάζονται απόσταση γύρω τους για να δουλεύουν αξιόπιστα. Τα ύψη γραμμών πρέπει να είναι γενναιόδωρα, ώστε οι σύντομες γραμμές κειμένου που σπάνε να παραμένουν ευανάγνωστες. Το μειωμένο πλάτος οθόνης στο κινητό σημαίνει ότι κάθε απόφαση για τις αποστάσεις επηρεάζει την εμπειρία πιο άμεσα από μια πλατιά διάταξη υπολογιστή. Έλεγξε όλες τις αποστάσεις σε πραγματικό κινητό πριν δημοσιεύσεις.
Μπορεί ο λευκός χώρος να επιβραδύνει την ιστοσελίδα μου;
Όχι. Ο λευκός χώρος είναι αποστάσεις σε CSS, που δεν έχουν ουσιαστικό μέγεθος αρχείου. Η προσθήκη περισσότερου padding, margin ή ύψους γραμμής σε μια σελίδα δεν αυξάνει τον χρόνο φόρτωσης. Αυτό που μπορεί να επηρεάσει τον χρόνο φόρτωσης είναι το περιεχόμενο που γεμίζει τον χώρο: μεγάλες εικόνες, ενσωματωμένα βίντεο, βαριά scripts. Μια ευρύχωρη διάταξη με βελτιστοποιημένο περιεχόμενο φορτώνει εξίσου γρήγορα με μια πυκνή με το ίδιο περιεχόμενο και συνήθως είναι αισθητά καλύτερη στη χρήση.
Πώς ξέρω αν η ιστοσελίδα μου έχει πολύ λίγο λευκό χώρο;
Το πιο καθαρό σημάδι είναι ότι η σελίδα φαίνεται πολυάσχολη ή δυσανάγνωστη όταν την κοιτάς συνολικά. Συγκεκριμένες ενδείξεις είναι κείμενο που φτάνει κοντά στην άκρη της οθόνης, ενότητες που συγχωνεύονται οπτικά χωρίς καθαρό διάλειμμα, κουμπιά που φαίνονται μικρά ενώ τεχνικά είναι αρκετά μεγάλα και παράγραφοι που κουράζουν στην ανάγνωση. Το να δείξεις τη σελίδα σε κάποιον που δεν την έχει ξαναδεί και να παρακολουθήσεις πού πηγαίνει πρώτα το μάτι του είναι ένας από τους πιο αξιόπιστους τρόπους να εντοπίσεις προβλήματα λευκού χώρου, αφού η εξοικείωση με το περιεχόμενο μπορεί να κάνει την πυκνότητα αόρατη στον σχεδιαστή.
Ποια είναι η διαφορά ανάμεσα στο padding και το margin στο web design;
Το padding είναι ο χώρος μέσα σε ένα στοιχείο, ανάμεσα στο περιεχόμενό του και το περίγραμμά του. Το margin είναι ο χώρος έξω από ένα στοιχείο, ανάμεσα σε αυτό και τα στοιχεία γύρω του. Στην πράξη, και τα δύο συμβάλλουν στον λευκό χώρο. Το padding μέσα σε ένα κουμπί καθορίζει πόσος χώρος περιβάλλει το κείμενο του κουμπιού. Το margin κάτω από μια επικεφαλίδα καθορίζει πόσο κοντά βρίσκεται η επόμενη παράγραφος. Και οι δύο ιδιότητες ρυθμίζονται για να δημιουργηθούν οι αποστάσεις που κάνουν μια σελίδα ευανάγνωστη και καλά οργανωμένη.