Mere polstring, tak!

Kraften i hvidt rum i produktdesign

Hvis du overhører en QA-session mellem en produktdesigner og en ingeniør, er det sjovt, at du vil høre produktdesigneren sige noget sådan:

“Kan du tilføje 8 pixels polstring her og også der? ... Lad os faktisk gøre det til 16 pixels. ”

Hos Wayfair er vi heldige nok til at arbejde sammen med ingeniører, der er forståelige og åbne for vores løbende anmodninger. Jeg er dog sikker på, at nogle ingeniører ser os som “pixel crazy”. Og for at være retfærdig, er nogle få af os det. Men tro mig, der er en metode til vores galskab.

Så hvorfor er produktdesignere så betyder ved polstring?

Polstring, også kendt som hvid plads, er det tomme mellemrum mellem og omkring individuelle elementer i et sidelayout; Disse elementer kan være kopier, billeder, kort, knapper, ikoner osv. Når det bruges korrekt, giver hvid plads visuel klarhed og balance i et layout.

Tænk på det hvide rum som et frisk pust. Ligesom mennesker har brug for luft til at trække vejret, har design brug for hvid plads til at trække vejret. Ja, dette lyder måske kornet. Men jeg står ved dette.

Hvordan tackle Wayfair hvidt rum?

Som jeg nævnte tidligere, er der en metode til vores galskab. Hos Wayfair følger vores produktdesignteam en streng polstringsregel for at sikre konsistens og nem vedligeholdelse på tværs af siden. Denne regel er integreret i vores designværktøjssæt, en samling af brugergrænsefladesignelementer, der er byggestenene til alle vores webstedsdesign. Reglen siger, at afstanden mellem hvert designelement skal være et multiplum af 8 pixels; dette betyder, at afstanden kan være 8, 16, 24, 32, 40 pixels osv. Denne regel bringer intentionen om vores brug af hvidt rum og skaber visuel konsistens på tværs af vores webstedsoplevelse.

“Regel af 8” i aktion

Hvordan kan hvid plads forbedre brugeroplevelsen?

Det hjælper med at bevare fokus

White space er et værktøj, der hjælper med at guide brugeroplevelsen. Vi bruger hvidt rum til at skabe fokuspunkter for vores brugere, der henleder opmærksomheden på visse elementer. Jo større polstring omkring et bestemt element på en side er, jo større er vægten på dette element. I eksemplet nedenfor opretholdes fokus tydeligt på opfordringen til handling og den primære meddelelse.

Aaaah, drik i alt det hvide rum

Desværre har vi ikke altid luksusen af ​​denne slags hvide rum. Dette er en sjældenhed, så nyd det, mens det varer. På en typisk e-handelsside står en produktdesigner over for udfordringen med at afbalancere flere opkald til handling, sekundære links, billeder, kopier - listen fortsætter. Eksemplet nedenfor viser vores produktdetaljer-side (PDP), en side, der kræver meget fra vores bruger. Strategisk placeret hvidt rum hjælper vores bruger med at navigere den visuelle støj på denne side og potentielt øger konverteringen.

Hvidt rum hjælper med at fokusere brugeren på hvert interaktionsområde på PDP'en

Det forbedrer visuel organisering

Ud over at fremhæve fokusområder spiller hvidt rum en enorm rolle i den visuelle organisering af en side. Hvidt rum er vigtigt for at afklare forhold og adskille sektioner med forskellige formål; det er også drivkraften bag Gestalt Princippet om Nærhed, der siger:

Objekter eller figurer, der er tæt på hinanden, ser ud til at danne grupper.

At tydelig definere forskellige dele af en side øger vores brugers tillid til webstedets oplevelse; at tvinge vores bruger til at tænke gennem et forvirrende layout er noget, som enhver produktdesigner ønsker at undgå. Følgende eksempel viser Wayfair's hjemmeside, en side, der let kunne synes overvældende, hvis hvidt rum ikke blev brugt korrekt.

White space definerer klart de forskellige sektioner på Wayfair's hjemmeside

Det øger læsbarheden

Ud over at definere organiseringen af ​​en side, kan hvid plads i høj grad forbedre læsbarheden af ​​en side. Det er vigtigt at være opmærksom på afstanden mellem kopieringslinjer - og endda bogstaver - da tankevækkende afstand vil gøre det lettere for brugeren at fordøje. Mere afstand er generelt bedre, men for meget kan potentielt få kopierede linjer til at føle sig frakoblet. Det handler om at finde den rigtige balance.

Medium (ja, dette websted) gør et godt stykke arbejde med at overveje hvid plads i sine kopiindstillinger. Hvis du læser denne artikel på en større skærm, skal du tjekke, hvor stort det hvide rum er i margenerne. Medium ved hvad der sker.

Hvad er almindelige bekymringer omkring det hvide rum?

“Hvidt rum er spildt plads!”

Dette er en myte. Hvidt rum er ikke spildt plads. Der er en tendens til, at nogle af vores interessenter fylder hvidt rum med mere indhold, når det ikke altid er nødvendigt. Alle har hørt ordsprog “mindre er mere”. Dette gælder for indhold på en given side, hvor mindre visuel støj giver en bedre brugeroplevelse. På Wayfair's kassestrøm (se nedenfor) kan det hvide rum under hovedopfordringen være meget, men det balanserer smukt og understøtter elementerne på denne side.

Store områder med hvidt rum behøver IKKE at blive fyldt med indhold
"Hvidt rum skubber indhold under folden, og brugere vil ikke se dette indhold!"

Brugere vil rulle og rulle nogle mere. Jeg lover dig. Der er denne myte, at brugere ikke altid vil rulle for at se alt indhold på en side. Derfor anmoder nogle af vores interessenter om, at størstedelen af ​​en sides indhold lever over folden.

Brugere har udviklet sig og bliver mere komfortable med at rulle. Der er bestemt visse elementer, der er bedst egnet over folden, men det er vigtigt ikke at begrænse brugen af ​​hvidt rum til at rumme folden.

Konklusion

Enhver produktdesigner ønsker at designe den bedst mulige brugeroplevelse; med dette i tankerne er hvid plads et kraftfuldt værktøj, der kan hjælpe med at opnå dette fra et brugerflade-perspektiv. Det skal være stærkt integreret i designprocessen.

Tror du, at du bruger for meget hvidt rum? Der er en god chance for, at du ikke er. Hvis noget, bruger du sandsynligvis ikke nok. Hvis du er i tvivl, skal du tilføje mere hvidt rum ...

Særlig tak til Connor Doherty. Se hans artikel om UX Copywriting.

Er du interesseret i at blive medlem af Wayfair produktdesignteam? Gennemse vores åbne positioner her.