Værdien af White Space på din hjemmeside

Et af de vigtigste elementer i webdesign er White Space.

De seneste to blogupdates, vi har bragt på bloggen, har handlet om nogle af de webdesigntrends og designprincipper, der får dine brugere til at bruge tid på din hjemmeside og komme tilbage igen. I dette indlæg har vi fokus på ét af de vigtigste elementer i webdesign, som oven i købet tydeliggør værdien i Less Is More- og Content First-principperne: W h i t e  S p a c e.

Hvad er White Space?

White Space er den tomme luft mellem og omkring indholdselementerne på en webside. Og det er ikke bare varm luft. Ifølge den anerkendte designer og forfatter Mark Boulton, bør White Space, selvom det egentlig ”bare” er tom plads, behandles som et designprincip i sig selv.

Et af de mest fremviste og tydeligste eksempler på brugen af White Space er Google:

Website: www.google.com

I et i forvejen støjfyldt og uoverskueligt internet kan din hjemmeside meget nemt risikere at blive overset og ignoreret – især hvis den i sig selv er med til at skabe mere støj og uoverskuelighed for brugeren. For at fastholde brugerne af din hjemmeside bliver du derfor nødt til at være skarp og klar i mælet, så din hjemmesides budskab bevares, huskes og ikke sorteres fra som støj. Et godt eksempel på det er Google-eksemplet ovenfor, der tydeligt viser, hvordan de med White Space skaber fokus på dét, det handler om – søgning.

Selvom det hedder White Space (altså hvid plads eller hvid tomrum), behøver tomrummet ikke nødvendigvis være hvidt. Det kan lige så vel være den farve, som du har valgt som baggrundsfarve på din hjemmeside. Eksempelvis sort som i nedenstående eksempel:

Website: http://rule-of-three.co.uk

White Space handler altså i al sin enkelthed om at skabe luft på din hjemmeside. Skabe luft mellem dit indhold, så hvert indholdselement – tekst, billeder, grafik m.m. – får plads til at ånde og tale for sig selv.

Less Is More – Skab ro

Hvis din hjemmeside er simpel og let at afkode, har du allerede taget første skridt hen imod fastholdelsen af dine besøgende. Husk Less Is More-princippet, som vi gennemgik dette blogindlæg.

Med et sammenpresset layout forvirres det menneskelige øje, som i forvejen skal forsøge at holde fokus på en digital ”levende” skærm. Ved at skabe luft mellem dit indhold med White Space giver du brugerens øjne lov til at slappe af under læsningen og dermed fremmer du den gode brugeroplevelse med et bedre læse-flow. Lad os tage et eksempel, som vi har ”lånt” fra Mark Boulton:

Tekst eksempel 1

Tekst eksempel 2

Hvilken af de to ovenstående tekster foretrækker du at læse? Den sidste, ikke? Hvilket beviser vores (og Mark Boultons) pointe: White Space skaber ro og overblik og gør det meget nemmere for dine brugere at afkode dit budskab.

Gestalts lov om nærhed

Lige så vel som White Space handler om at skabe luft mellem dit indhold, handler det også om at skabe overskuelighed, så din bruger hurtigt kan gennemskue, hvad din hjemmeside tilbyder.

Gestalts lov om nærhed går ud på, at symboler, der er placeret nær hinanden, opfattes som sammenhørende. Intuitivt ved vi mennesker godt, hvad der hører sammen, og hvad der ikke gør. Men fordi det er sværere at læse på en skærm end på papir, er der behov for, du organiserer dit indhold på en overskuelig måde for din bruger.

Eksempel på Gestalts lov om nærhed

I forhold til webdesign skal du altså sikre dig, at de indholdselementer, der ikke hører sammen, ikke blandes sammen. Men på samme måde er det også vigtigt, at du grupperer det indhold, der bør høre sammen – som f.eks. indhold i footeren, menuen, nyheder o. lign. White Space handler altså i bund og grund om at gruppere dit indhold i klumper af relaterede emner og samtidig guide dine brugere vha. et visuelt hierarki. Det var vi også inde på i vores første blogindlæg om webdesign.

Nedenstående eksempel fra det hollandske teleselskab van Hi er et godt eksempel på Gestalts lov om nærhed. Her er det tydeligt at se, hvordan de har grupperet deres indhold med brugen af White Space.

Website: http://shop.www.hi.nl

Hvorfor White Space skaber værdi

Indtil videre har vi argumenteret for, hvordan du med White Space tydelig øger både brugeroplevelsen og brugervenligheden på din hjemmeside.

Det er der flere fordele ved:

  1. Du kan forbedre både læse-flow og navigation på dit site.
  2. Du kan skabe fokus mod vigtigt indhold.
  3. Og… du kan fastholde din bruger i længere tid.

Brand positionering

Med White Space følger også nogle æstetiske fordele, som kan bidrage til at forbedre din brand positionering på et brandsite. Med den rigtige brug af White Space på et brandsite kan du nemlig kommunikere elegance og overskud og føje en fornemmelse af luksus til et brand.

Tag Apple som eksempel. Med White Space, lækre billeder og få tekstuelle virkemidler kommunikerer de sofistikeret, kvalitetsbevidst og fokuseret. Som Steve Jobs selv prædikede: ”Design handler om at sige nej” – i eksemplet her: Nej til overflødigt og forstyrrende indhold.

Website: www.apple.com/dk

White Space er essentiel for et harmonisk layout. Ingen vil bruge tid på en hjemmeside, hvor hver enkelt pixel kæmper om din opmærksomhed. Det skræmmer brugerne væk, og det er du vel ikke som hjemmesideejer interesseret i?

Sidder du og skal du have lavet en hjemmeside? Eller har du en hjemmeside, som trænger til at blive kigget efter i sømmene? Så kontakt os til en uforpligtende snak og hør, hvordan vi kan hjælpe dig.

Udgivet:
11. oktober 2013
Tags:
Større digital forretningsforståelse? Kontakt os i dag