White space: Η σημασία του λευκού χώρου στο web design

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

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

To white space είναι πολλά περισσότερα από κενός χώρος σε μία ιστοσελίδα. Στην πραγματικότητα είναι ένα από τα πιο δημιουργικά στοιχεία στο σχεδιασμό ιστοσελίδων. Είναι ένα εξαιρετικό εργαλείο που αν χρησιμοποιηθεί έξυπνα, μπορεί να διευκολύνει τον επισκέπτη μας και να βελτιώσει την εμπειρία πλοήγησής του. Ωστόσο η χρήση του πρέπει να γίνεται υπεύθυνα και σωστά. Διαφορετικά μπορεί να βλάψει ένα brand ή να στείλει λανθασμένο μήνυμα στους χρήστες του.

Π.χ. για τη μηχανή αναζήτησης της Google ή την Apple, αυτός ο μεγάλος λευκός χώρος λειτουργεί.

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

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

Τι είναι λευκός χώρος σε ένα website;

Whitespace σε μια ιστοσελίδα (ή αρνητικός χώρος) είναι ο κενός χώρος ανάμεσα στο περιεχόμενο και στα διάφορα στοιχεία της.

Χρησιμοποιείται για να εξισορροπήσει τα στοιχεία και τα αντικείμενα που βρίσκονται στην ιστοσελίδα, να οργανώσει το περιεχόμενο και να βελτιώσει την οπτική εμπειρία του χρήστη.

Αν ρίξετε μια ματιά σε ένα website, για παράδειγμα στο γνωστό skroutz.gr θα το δείτε παντού:

• Ο κενός χώρος γύρω από το λογότυπο
• Τα λευκά διαστήματα ανάμεσα στις επιλογές του κεντρικού μενού
• Ο άδειος χώρος που δημιουργείται ανάμεσα στα διάφορα blocks περιεχομένου

Δείτε παρακάτω πώς ήταν η ίδια ιστοσελίδα το 2007 και θα παρατηρήσετε την τεράστια διαφορά που δημιουργεί ο «λευκός χώρος».

Φυσικά και τότε υπήρχε λευκός χώρος αλλά δεν έχει καμία σχέση με το πώς χρησιμοποιείται σήμερα.

Πώς προέκυψε ως όρος το White space;

Ο όρος «λευκός χώρος» (white space) είναι κάπως παραπλανητικός. Ενώ ορισμένα παραδείγματα white space είναι όντως λευκά (όπως το παραπάνω παράδειγμα), αυτό δεν συμβαίνει σε όλες τις περιπτώσεις.

Μπορούμε να χρησιμοποιήσουμε οποιοδήποτε χρώμα, ή διάταξη ώστε να δημιουργήσουμε αρνητικό χώρο σε ένα website. Θα μπορούσαμε ακόμη να χρησιμοποιήσουμε ένα φόντο με σχέδια ή μία background εικόνα.

Για να καταλάβουμε πως πήρε το όνομά του, πρέπει να δούμε από πού προήλθε.

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

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

Οι διαφορετικοί τύποι λευκού χώρου

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

Micro και Macro Λευκό Διάστημα

Ο micro και ο macro λευκός χώρος δεν ορίζουν απλώς τον αρνητικό χώρο με βάση το μέγεθος.

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

Σκοπός του micro λευκού χώρου είναι να βελτιώσει την αναγνωσιμότητα του περιεχομένου μας.

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

• Στα περιθώρια μιας ιστοσελίδας
• Γύρω από το λογότυπο στο πάνω μέρος
• Μεταξύ των ενοτήτων σε μια σελίδα
• Σε hero sections
• Μεταξύ του κύριου περιεχομένου και της πλαϊνής στήλης
• Σε εικόνες
• Γύρω από κουμπιά call to action (CTA)

Σκοπός του macro λευκού χώρου είναι να βελτιώσει τη διάταξη του website και να διευκολύνει την κατανόηση και την πλοήγηση.

Παθητικός και ενεργός λευκός χώρος

Ο λευκός χώρος μπορεί επίσης να χωριστεί σε παθητικό και ενεργητικό.

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

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

Γιατί είναι σημαντικό το white space στη σχεδίαση ιστοσελίδων;

1. Σε αντίθεση με τις τάσεις στο design που μπορεί να αλλάζουν συνεχώς, ο λευκός χώρος υπήρχε, υπάρχει και θα υπάρχει.
2. Με τη σωστή ποσότητα λευκού διαστήματος, μπορούμε να δημιουργήσουμε την τέλεια αντίθεση μεταξύ περιεχομένου και χώρου σε ένα website.
3. Η χρήστη white space βελτιώνει το user experience και κάνει τους χρήστες να νιώθουν άνετα καθώς πλοηγούνται. Επίσης μπορούν να εστιάσουν ευκολότερα σε αυτό που τους ενδιαφέρει.

Χρησιμοποιώντας τον «λευκό χώρο» αποτελεσματικά

Αναγνωσιμότητα του κειμένου

Πολλές φορές έχουμε συναντήσει κείμενο σε ένα website με στενές αποστάσεις. Κάτι που μας δυσκολεύει να το διαβάσουμε.

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

Σύμφωνα με παλιότερη έρευνα του Wichita State University, η σωστή χρήση του λευκού διαστήματος στο κείμενο μπορεί να αυξήσει την αναγνωσιμότητα έως και 20%. Αυτά τα λευκά διαστήματα αφορούν τις αποστάσεις παραγράφων, τα κενά μεταξύ των γραμμών κ.ά.

Οργάνωση περιεχομένου

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

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

Δίνοντας έμφαση στο βασικό μας μήνυμα

Πολλές ιστοσελίδες ή mobile apps υποφέρουν από τη συσσώρευση πολλών στοιχείων και πληροφοριών. Η οπτική ακαταστασία δημιουργεί μία κακή εμπειρία για τον επισκέπτη και υπερφορτώνει τους χρήστες μας με πάρα πολλές πληροφορίες.

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

Δημιουργώντας οπτική ιεραρχία

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

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

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

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

 

3 καλά παραδείγματα γνωστών ιστοσελίδων που χρησιμοποιούν τον κενό χώρο και μας αρέσει

Shopify

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

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

Wistia

Είναι πολύ σημαντικό τα βασικά κουμπιά παρότρυνσης για δράση (CTA) να είναι αισθητά διαχωρισμένα από το υπόλοιπο περιεχόμενο σε ένα website.

Αυτό αλλάζει ριζικά τον τρόπο που γίνεται αντιληπτό το περιεχόμενο μας από τους χρήστες.

Η Wistia, μια video marketing πλατφόρμα, χρησιμοποιεί αποτελεσματικά τον αρνητικό χώρο στην αρχική της σελίδα. Ο χρήστης μπορεί πολύ γρήγορα να καταλάβει τις δυνατότητες της υπηρεσίας. Παράλληλα μπορεί να εστιάσει εύκολα στα 2 κουμπιά παρότρυνσης για δράση.

Medium

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

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

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

Μήπως χρειάζεται επανασχεδιασμό η ιστοσελίδα σου;

Έλα να το κάνουμε μαζί! Στην IkarianMEDIA δημιουργούμε ιστοσελίδες με βάση το κοινό και τις ανάγκες κάθε επιχείρησης. Εστιάζοντας στον τελικό χρήστη.

Επικοινώνησε μαζί μας για ένα δωρεάν έλεγχο.