Περισσότερος χρόνος, παρακαλώ!

Η ισχύς του λευκού χώρου στο σχεδιασμό του προϊόντος

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

"Μπορείτε να προσθέσετε 8 εικονοστοιχεία του padding εδώ και επίσης εκεί; ... Στην πραγματικότητα, ας φτιάξουμε 16 εικονοστοιχεία. "

Στην Wayfair, είμαστε αρκετά τυχεροί για να δουλέψουμε μαζί με τους μηχανικούς που είναι κατανοητοί και ανοιχτοί στα συνεχή μας αιτήματα. Ωστόσο, είμαι βέβαιος ότι κάποιοι μηχανικοί μας βλέπουν ως "τρελό pixel". Και για να είμαστε δίκαιοι, είμαστε μερικοί από εμάς. Αλλά με εμπιστευθείτε, υπάρχει μια μέθοδος για την τρέλα μας.

Έτσι, γιατί οι σχεδιαστές προϊόντων είναι τόσο επιλεκτικοί για το padding;

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

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

Πώς αντιμετωπίζει ο Wayfair τον λευκό χώρο;

Όπως ανέφερα προηγουμένως, υπάρχει μια μέθοδος για την τρέλα μας. Στην Wayfair, η ομάδα σχεδιασμού προϊόντων μας ακολουθεί έναν αυστηρό κανόνα για την εξασφάλιση της συνοχής και της εύκολης συντήρησης σε όλη την περιοχή. Αυτός ο κανόνας είναι ενσωματωμένος στο εργαλείο σχεδιασμού μας, μια συλλογή στοιχείων σχεδίασης διεπαφής χρήστη που αποτελούν τα δομικά στοιχεία για όλα τα σχέδια του site μας. Ο κανόνας δηλώνει ότι η απόσταση μεταξύ κάθε στοιχείου σχεδιασμού πρέπει να είναι πολλαπλάσια των 8 εικονοστοιχείων. αυτό σημαίνει ότι η απόσταση μπορεί να είναι 8, 16, 24, 32, 40 εικονοστοιχεία και ούτω καθεξής. Αυτός ο κανόνας φέρνει την πρόθεση στη χρήση του λευκού χώρου και δημιουργεί οπτική συνοχή στην εμπειρία του ιστότοπού μας.

Πώς μπορεί ο λευκός χώρος να βελτιώσει την εμπειρία του χρήστη;

Βοηθάει στη διατήρηση της εστίασης

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

Aaaah, πίνετε σε όλο αυτό το λευκό χώρο

Δυστυχώς, δεν έχουμε πάντα την πολυτέλεια αυτού του είδους του λευκού χώρου. Αυτό είναι μια σπανιότητα, γι 'αυτό το απολαύστε όσο διαρκεί. Σε μια τυπική σελίδα ηλεκτρονικού εμπορίου, ένας σχεδιαστής προϊόντων αντιμετωπίζει την πρόκληση της εξισορρόπησης πολλαπλών κλήσεων προς δράση, δευτερευόντων συνδέσμων, εικόνων, κομματιών αντιγράφων - ο κατάλογος συνεχίζεται. Το παρακάτω παράδειγμα παρουσιάζει τη σελίδα λεπτομερειών του προϊόντος (PDP), μια σελίδα που απαιτεί πολλά από τον χρήστη. Ο στρατηγικά τοποθετημένος λευκός χώρος βοηθά τον χρήστη να πλοηγηθεί στον οπτικό θόρυβο σε αυτήν τη σελίδα και πιθανώς να αυξήσει τη μετατροπή.

Ο λευκός χώρος βοηθά στην εστίαση του χρήστη σε κάθε περιοχή αλληλεπίδρασης στο PDP

Βελτιώνει την οπτική οργάνωση

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

Τα αντικείμενα ή τα σχήματα που βρίσκονται κοντά μεταξύ τους φαίνεται να σχηματίζουν ομάδες.

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

Ο λευκός χώρος ορίζει σαφώς τα διαφορετικά τμήματα της αρχικής σελίδας του Wayfair

Αυξάνει την αναγνωσιμότητα

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

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

Ποιες είναι οι συνήθεις ανησυχίες γύρω από τον λευκό χώρο;

"Ο λευκός χώρος είναι χαμένος χώρος!"

Αυτός είναι ένας μύθος. Ο λευκός χώρος δεν είναι άχρηστος χώρος. Υπάρχει μια τάση για μερικούς από τους ενδιαφερόμενους να γεμίσουν λευκό χώρο με περισσότερο περιεχόμενο όταν δεν είναι πάντοτε απαραίτητο. Όλοι έχουν ακούσει το ρητό "λιγότερο είναι περισσότερα". Αυτό ισχύει για περιεχόμενο σε οποιαδήποτε σελίδα, όπου ο μικρότερος οπτικός θόρυβος βελτιώνει την εμπειρία του χρήστη. Στη ροή ταμειακής ροής του Wayfair (βλέπε παρακάτω), ο λευκός χώρος κάτω από την κύρια πρόσκληση για δράση μπορεί να είναι τεράστιος, αλλά ισορροπεί όμορφα και υποστηρίζει τα στοιχεία αυτής της σελίδας.

Οι μεγάλες περιοχές λευκού χώρου ΔΕΝ χρειάζεται να γεμίζουν με περιεχόμενο
"Ο λευκός χώρος ωθεί το περιεχόμενο κάτω από την πτυχή και οι χρήστες δεν θα δουν αυτό το περιεχόμενο!"

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

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

συμπέρασμα

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

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

Ειδικές ευχαριστίες βγαίνουν στον Connor Doherty. Ελέγξτε το άρθρο του σχετικά με το Copywriting UX.

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