Gezond verstand en uitstekend webdesign

In deze whitepaper geven we je een kijk op de inzichten van Steve Krug, een expert in webdesign en user experience. Zijn kennis combineren we met onze eigen jarenlange ervaringen in deze blog.

Uitstekend webdesign: laat een gebruiker niet denken 

We kunnen je ontelbaar veel voorbeelden geven waar bezoekers absoluut geen tijd mogen aan spenderen. Enkele klassieke voorbeelden:

  • Waar ben ik? 
  • Waar moet ik beginnen? 
  • Waar moet ik nu klikken? 
  • Wat is er nu belangrijk op deze pagina? 
  • Waarom noemen ze dit nu zo? 

Iedere keer dat een bezoeker moet nadenken, verliest hij tijd en wordt hij afgeleid van de essentie. Je website moet dus duidelijk en gebruiksvriendelijk zijn. Een mooi voorbeeld van een website die zich beperkt tot de essentie is Tesla. In 5 stappen en in nog minder minuten is je Tesla geconfigureerd en heb je een order geplaatst. 

Voorbeeld van een goede website: www.tesla.com

Als het bestellen van een wagen kan gebeuren door een 7-jarige, waarom hebben webshops dan vaak zo een immens complex webdesign? Dat is voor een deel te wijten aan het feit dat websitebouwers vaak een ander idee hebben van hoe bezoekers een websites gebruiken.

Hoe bezoekers je website echt gebruiken

Iets wat ons de laatste jaren heeft doen verbazen is hoe fout we waren door te denken te weten hoe bezoekers navigeren door onze webpagina’s. We waanden ons vaak in de utopie dat bezoekers gefascineerd onze met passie geschreven teksten rustig en doordacht zouden lezen. Dat iedere klik weldoordacht was en iedere pagina nauwkeurig en gedetailleerd bekeken werd.

In realiteit kan je websitebezoekers vergelijken met chauffeurs die tegen 120 km/h over de autosnelweg rijden en een billboard bekijken. Terwijl ontwerpen vaak toelaten om maximum 10 km/h te rijden om de boodschap te begrijpen. 

Om het overzichtelijk te houden zullen we er vanuit gaan dat iedereen op dezelfde manier door een website navigeert. Wil je effectieve webpagina’s maken? Dan moet je rekening houden met de volgende 3 feiten:

  1. We lezen geen webpagina’s, we scannen ze.
  2. We kiezen niet voor de meest logische optie, maar voor de gemakkelijkste.
  3. We zoeken niet uit hoe dingen werken, we spartelen ons er liever door.

Feit 1: we lezen geen webpagina’s, we scannen ze

We zijn altijd gehaast. Geef zelf toe, zelden bekijken we een website in alle rust. We weten ook gewoon dat we niet alle info moeten lezen om een boodschap te begrijpen. We scannen dus webpagina’s en we zijn er zeer goed in geworden. Al jaren scannen we kranten, tijdschriften en boeken op zoek naar de stukken die we interessant vinden. We weten dat scannen werkt. 

Feit 2: we kiezen niet voor de meest logische optie, maar voor de gemakkelijkste 

In de meeste gevallen kiezen we niet voor de beste oplossing maar voor de eerste oplossing die we tegenkomen die er redelijk oké uitziet. Zodra we een knop vinden die lijkt op wat we zoeken, klikken we. Maar waarom kiezen gebruikers niet voor de beste oplossing? 

  • We zijn gehaast of willen zo snel mogelijk een antwoord.
  • We hebben minder te verliezen wanneer we verkeerd kiezen.
  • Opties vergelijken verbetert onze kansen niet. Kiezen we verkeerd, dan klikken we gewoon op ‘back’.
  • Gokken is toffer en geeft ons een goed gevoel.

Feit 3: we zoeken niet uit hoe dingen werken, we spartelen ons er liever door

We hebben er geen probleem mee om een tool of website te gebruiken zonder te weten hoe deze te gebruiken. Erger nog: we denken te weten hoe iets werkt en gebruiken de website of tool totaal verkeerd! Al klikkend komen we wel tot een resultaat. 

Een mooi voorbeeld hiervan is het volgende: wanneer we zien dat mensen telkens opnieuw een website opzoeken in Google ook al moeten ze deze site meerdere malen per dag raadplegen. Erger nog, ze typen iedere keer dus meerdere malen per dag de volledige URL van deze website in de zoekbalk. Perfect voorbeeld van een verkeerde manier van werken die toch tot op een bepaald niveau tot een gewenst resultaat zal leiden. 

Bij uitstekend webdesign zijn je pagina’s ontworpen om te scannen, niet om ze te lezen

Rekening houdend met het feit dat bezoekers met een snelheid van 120 km/h door je website scannen zijn er 5 belangrijke zaken die je kan doen op vlak van webdesign. Zo laat je hen zoveel mogelijk zien en begrijpen van je website: 

  1. Zorg voor een duidelijk hiërarchie op iedere pagina.
  2. Iconen zijn altijd je vriend, gebruik ze dus.
  3. Verdeel pagina’s in duidelijke blokken. 
  4. Maak het extreem vanzelfsprekend wat clickable is.
  5. Beperk ruis.

Zorg bij je webdesign voor een duidelijke hiërarchie op iedere pagina 

Hiërarchie creëren is niet zo moeilijk, alles is logisch. Je moet het alleen maar toepassen. Hier zijn 3 basisregels: 

  • Des te belangrijker, des te prominenter aanwezig.
  • Gerelateerde zaken moeten visueel ook gerelateerd zijn.
  • Kader en geef context aan ieder blok.

Deze 3 basisregels zijn absoluut niet nieuw. Kijk naar kranten, deze passen dit principe al decennia toe. Het belangrijkste nieuws is prominent zichtbaar. Alle nieuwsberichten zijn per thema op te zoeken en ieder nieuwsitem is netjes afgelijnd en krijgt zijn eigen titel, afbeelding en inleiding. 

De website van De Tijd heeft een goede hiërarchie.

Iconen zijn je vriend 

Iconen gebruiken laat je toe om bezoekers veel te laten begrijpen terwijl ze eigenlijk geen woord begrijpen. Designers moeten dus iconen correct gebruiken om een site duidelijk te maken voor iedereen. Zelfs wanneer we de taal niet spreken kunnen universele iconen ons wegwijs maken doorheen een website. 

Neem nu bijvoorbeeld Allibaba, een zeer uitgebreide webshop met immens veel opties. Door het gebruik van iconen is het zelfs mogelijk om gemakkelijk te navigeren door de Chinese website. Neem nu de shopping cart? Iedereen weet wat hij met een shopping cart moet en kan doen.

Verdeel pagina’s in duidelijke blokken 

Kader en lijn verschillende secties van je website af. Dit maakt meteen duidelijk welke content bij elkaar hoort en vermijd onnodige verwarring bij gebruikers. 

Maak het extreem vanzelfsprekend wat clickable is 

Buttons die verloren gaan in het design kunnen mooi zijn, maar weer: wil je een gebruiker die op punt staat een aankoop te doen laten nadenken op welke knop hij moet klikken? Gebruik complementaire kleuren in plaats van zogenoemde ghost buttons. Het effect op je conversie resultaten zal je verbazen. 

Beperk ruis en afleiding

Een van de meest gemaakte fouten is ruis op je website. Dat zijn afleidingen die een bezoeker onnodig doet denken. Er zijn twee grote ruis factoren: 

  • Busy-ness: wanneer er te veel gaande is op een website, dan weet de bezoeker niet waarop hij moet klikken. Hij is overweldigd door de hoeveelheid aan zaken die zijn schreeuwen om zijn aandacht.
  • Background noise: verschillende kleine aspecten van je website die op zichzelf de bezoeker niet afleiden, maar die samen de user experience verstoren.

Iedere gebruiker reageert anders op afleiding, sommige mensen hebben geen problemen met afleiding andere kunnen er niet mee om. Je kan er bij het ontwerpen van een website dus best vanuit gaan dat iedereen last heeft van ruis en te beperken tot een minimum. Verder nog: je mag er zelfs van uitgaan dat ieder overbodig element ruis is.

Voorbeeld van busy-ness

Waarom we het liefst keuzes maken zonder te denken

We vinden het niet erg om veel te klikken op voorwaarde dat iedere klik ‘pijnloos’ is. Dus zonder al te veel moeite. De regel: 3x klikken zonder inspanning kan je gelijk zetten aan 1 klik waarbij je moet nadenken. We kunnen stellen dat een succesvolle website bestaat uit kliks zonder denkinspanning, dat doorheen het hele process. De bezoeker moet dus weten waar hij heen gaat met iedere klik.

De kunst om webteksten te schrijven met webdesign in het achterhoofd

Verwijder overbodige woorden

Een zin mag geen onnodige woorden bevatten, een paragraaf geen onnodige zinnen. Je kan het vergelijken met een schilderij, alle lijnen samen zorgen voor een kunstwerk. Laat de verkeerde lijn weg en je verliest balans. Zet een lijn te veel, en ook dan verlies je balans.

Overbodige woorden verwijderen heeft de volgende voordelen: 

  • Het vermindert ruis.
  • Je zet belangrijke zaken beter in de kijker.
  • Het maakt pagina’s korter waardoor gebruiker sneller door een pagina kunnen scannen. 

Promotietekst moet verdwijnen

De promotionele teksten zoals je ze ziet in slecht geschreven brochures waarbij ieder bedrijf zichzelf de hemel in prijst moeten verdwijnen. Het legt de focus te sterk op waarom ze geweldig zijn in plaats van wat hen zo geweldig maakt. 

Introducties moeten verdwijnen 

Het belangrijkste dat je moet weten over introducties: niemand leest ze. Je moet je website zo duidelijk maken dat introducties geheel overbodig worden.

Websitenavigatie gaat hand in hand met je webdesign

De basis: we zoeken

We bezoeken een website omdat we zoeken zijn naar iets: een product, info, noem het op. We kunnen kiezen om zelf opzoek te gaan, te browsen dus of om het te ‘vragen’, beter gezegd: de zoekfunctie gebruiken.

Ga je browsen, dan baan je jezelf een weg door de hiërarchie van een website. Je zoekt de hoofdnavigatie en deze brengt je steeds dieper in de structuur tot je uiteindelijk de info hebt die je zoekt. Wanneer we niet vinden wat we zoeken, vertrekken we uiteindelijk gefrustreerd. 

Opmerkingen bij browsen

In veel gevallen kan je een website bezoek vergelijken met het bezoeken van een grootwarenhuis. Toch zijn de volgende 3 zaken zeer verschillend: 

  • Geen gevoel van schaal: wanneer een website bestaat uit 5 pagina’s is dit niet van toepassing. Wanneer we spreken over 50 pagina’s wel. We hebben hier totaal geen besef van hoe groot of uitgebreid een website is. Praktisch geeft dit als probleem dat je geen idee hebt of je nu alles gezien hebt of niet. Dus we weten niet wanneer we moeten stoppen met zoeken. 
  • Geen gevoel van richting: we hebben op een website geen links en rechts, geen op en neer. We spreken wel over op en naar maar dan bedoelen we dieper gaan in een hierarchy. Dat is misleidend. 
  • Geen besef waar je bent: in een fysieke plaats onthouden we een bepaalde route. Op een website kunnen we ineens springen van pagina A naar pagina Z zonder B zelfs maar gezien te hebben. Een goed gebruik van breadcrumbs zorgt ervoor dat we altijd weten waar we zijn en hoe we er gekomen zijn. 

Het doel van navigeren zonder te navigeren 

  • Vertellen wat er allemaal is: simpel en overzichtelijk tonen wat er allemaal te vinden is op de site. 
  • Bezoekers vertellen hoe ze de site moeten gebruiken: wanneer een navigatiemenu correct is opgebouwd vertelt het de bezoeker waar te starten en hoe te navigeren. Dat zouden alle instructies moeten zijn die je nodig hebt. 
  • Vertrouwen geven in de websitebouwer: wanneer het menu een duidelijke structuur en hiërarchie heeft straalt deze vertrouwen uit. 
  • Bezoekers geruststellen: navigatie heeft misschien wel als belangrijkste doel om ons gerust te stellen. Dat door steeds aanwezig te zijn als houvast en als gids doorheen de website. 

Breadcrumbs 

De naam breadcrumb komt, geloof het of niet van het sprookje van Hans en Grietje waarbij Hans een spoor van broodkruimels achter zich liet om zichzelf een weg terug te vinden door het bos. Ze tonen je het pad van de homepage tot waar je nu bent en maken het gemakkelijk om terug te gaan in de hiërarchie. Je past breadcrumbs het best als volgt toe: 

  • Zet ze bovenaan: dat is een logische plek, net zoals paginanummers onderaan in een boek zeer logisch zijn. 
  • Gebruik ‘>’ tussen ieder niveau’s: onderzoek heeft aangetoond dat ‘>’ het beste teken is om te gebruiken in een breadcrumb. Het maakt een voorwaartse beweging zichtbaar. 
  • Zet het laatste item in bold: zo toon je duidelijk waar iemand zich bevindt op je website. 

Test de kwaliteit van webnavigatie

Stel je voor dat je op een webpagina gedropt wordt net als scoutsleden in een donker bos. Je zit midden in een complexe site op een pagina die je nog nooit gezien hebt. Als de navigatie goed is toegepast kan je de volgende vragen zonder aarzelen meteen beantwoorden: 

  • Welke site is dit? 
  • Op welke pagina zit ik? 
  • Wat zijn de grote secties op deze site? 
  • Wat zijn mijn opties op dit niveau? 
  • Waar bevind ik me in de hiërarchie? 
  • Hoe kan ik iets zoeken? 

Deze vragen zijn een aanrader om eens te gebruiken op je eigen website. Is er een vraag waar het antwoord niet meteen duidelijk is? Dan kijk je best het webdesign van je website of van die pagina na.

De ideale homepage: een uitdaging op vlak van webdesign

Alle zaken die je op een homepage moet terugvinden:

  • Site identiteit en missie
  • Site hierarchie
  • Zoekfunctie
  • Teasers
  • Promoties
  • Tijdgerelateerde content: regelmatig nieuwe of geüpdatete content
  • Shortcuts
  • Registratie

Vervolgens moet je al het bovenstaande zo plaatsen dat je credibiliteit en vertrouwen uitstraalt. Een serieuze uitdaging dus.

En nu serieus: hoe maak ik de perfecte homepage

Al de bovenstaande elementen krijg je niet mooi, overzichtelijk en functioneel bruikbaar op een homepage. Het belangrijkste wat je niet uit het oog mag verliezen is je uiteindelijke doel. De volgende 4 vragen zou je meteen moeten kunnen beantwoorden als bezoeker op een goede homepage:

  • Wat is dit?
  • Wat kan ik hier doen?
  • Wat doen ze?
  • Waarom zou ik hier moeten zijn en niet ergens anders?

De eerste seconden op een website zijn bepalend. Kunnen de 4 bovenstaande vragen niet meteen beantwoord worden? Dan moeten er dingen veranderen op vlak van webdesign want je website is niet gebruiksvriendelijk.

Breng je boodschap correct

Alles op de homepage kan bijdragen tot het overbrengen van je boodschap, maar er zijn 3 plaatsen waar we een duidelijke boodschap verwachten:

  • De Baseline
  • De inleidende tekst
  • De ‘Leer meer’-button

Relevante artikels

Man working on a laptop with the word translate on the computer screen
2 min

Je website instant vertalen met Weglot

Heb je ooit overwogen om je markt uit te breiden naar het buitenland? Dan heb je misschien al gedacht om je website te vertalen, maar vertalingen van topkwaliteit …
verschillende sociale media
5 min

7 tips voor goede social media posts in 2021

Hoe maak je goede social media posts? Hoe vaak moet je posten op Facebook? Wanneer post je best? En wat is goede content? Lees onze 7 tips!
Seo what to do and not to do
5 min

SEO-checklist: what to do and not to do

Zoekmachineoptimalisatie (Search Engine Optimization) is het vindbaar maken van je website. Het legt de focus op organische zoekresultaten, anders dan bij bijvoorbeeld SEA (Search Engine Advertising) waar je …
Contact

Dazzle BV
Kerkstraat 106
9050 Gent

+32 9 395 45 65
info@dazzle.be

BE 0873.618.820

Nieuwsbrief

Schrijf je nu in voor onze maandelijkse nieuwsbrief en kies je favoriete onderwerpen.

>>>