Gebruikerservaring is de laatste jaren steeds belangrijker geworden. De allereerste websites zag er niet zo gelikt uit als die van vandaag de dag. Ze waren traag en onhandelbaar. Inmiddels hoort elke website je een grandioze ervaring te bieden. Design is één van de belangrijkste elementen als het gaat om gebruikerservaring. Een WordPress website laten bouwen begint dan vaak ook met het uitdenken van het design van de website.
In dit artikel gaan we het hebben over design en de invloed daarvan op conversies. Iedereen wilt toch meer omzet genereren via zijn website?
Het is namelijk frustrerend om een goede landingpage te hebben, een goed ingerichte Facebook campagne, een redelijk budget, máár 0 extra leads. Waar ging het dan toch mis? Hoe kan de conversie ratio omhoog? Eén van de eerste punten om te bekijken is het design van de landingpage. Hierover straks meer, maar eerst…
Wacht even, wat is een conversie?
Voordat we een conversieverhogend ontwerp kunnen maken is het natuurlijk wel handig dat we over hetzelfde spreken als we het over conversie hebben.
Een conversie is een interactie die door de gebruiker wordt ondernomen om een zakelijk doel te bereiken. Soft conversies zijn het downloaden van een whitepaper, een brochure aanvragen of inschrijven voor de nieuwsbrief. Harde conversies zijn daadwerkelijk online producten kopen of contact opnemen met het bedrijf.
Als iemand zijn of haar gegevens achter laat in ruil voor een eBook of whitepaper, dan spreken we van een conversie met als doel lead generatie.
“It’s much easier to double your business by doubling conversion rates than by doubling your traffic.” - Jeffrey Eisenberg
Conversieratio berekenen
Door middel van analyses weet je hoeveel mensen jouw site bezoeken. Je kunt vervolgens dan ook meten welk percentage van deze mensen converteert. Dit getal is het conversieratio en is één van de belangrijkste succesindicatoren voor jouw website. In jouw analyses wil je werken met doelen en conversietrechters zodat je exact weet wat er gebeurt en waar mogelijk de conversie verhoogd kan worden. Laat data de drijvende kracht zijn, niet jouw onderbuikgevoel over wat wel of niet werkt. Soms kan de beste kop of het meest strakke design niet doen wat je wilt dat het doet – dit blijkt dan uit de data.
Bounce-rate bijhouden
Het is ook belangrijk om jouw bounce-percentage bij te houden. Dit is het percentage gebruikers dat een pagina bezoekt en vervolgens weggaat zonder een conversie te maken of naar een andere pagina te navigeren. Een hoger bouncepercentage is een indicatie dat er een verschil is tussen de verwachting van de bezoeker en wat ze daar vinden. Het verlagen van het bounce percentage gaat dus vaak hand in hand met het verhogen van de conversieratio.
Laten we nu gaan kijken hoe je middels design jouw conversieratio’s aanzienlijk kunt verbeteren. De volgende tips zijn met name bedoeld voor gebruik op landingpages, maar kunnen eigenlijk overal waar Call to Actions staan worden benut.
Eén doel, één Call to Action
Een landingpage moet één enkel doel, één enkele CTA hebben. Uiteindelijk draait het er bij een landingpage om dat men het pad wandelt naar een conversie toe. Hoe meer opties je toevoegt, des te meer ruis er op de lijn is. Meer opties zorgen voor minder gemaakte keuzes.
Kies de juiste kleuren
Kleur is een extreem belangrijk onderdeel, je kunt het niet wegwuiven. Gebruik een reeks kleuren die niet te uitgebreid zijn. Kies een primaire kleur, welke wordt gebruikt als accent en voor acties (bijv. buttons). Kies daarnaast een secundaire kleur, die goed contrasteert ten opzichte van de primaire kleur. Ten slotte heb je enkel wat grijstinten nodig.
Kleur kan worden ingezet om een emotionele respons bij je websitebezoeker los te weken. Oranje, bijvoorbeeld, wordt ingezet om positieve gevoelens te creëren en is een perfecte keuze voor een Call to Action knop. Hieronder een volledige lijst van de psychologische impact per kleur:
- Rood: gevaar, stop, negatief, spanning, warm
- Donkerblauw: stabiel, kalm, betrouwbaar, volwassen
- Lichtblauw: Jong, mannelijk, koud
- Groen: groei, positief, organisch, ga, geruststellend
- Wit: puur, schoon, eerlijk
- Zwart: serieus, zwaar, dood
- Grijs: integer, neutraal, volwassen
- Bruin: organisch, bescheiden, heilzaam
- Geel: emotioneel, positief, oppassen
- Goud: conservatief, stabiel, elegant
- Oranje: emotioneel, positief, organisch
- Paars: Jeugdig, koninklijk
- Roze: Jeugdig, vrouwelijk, warm
Een andere belangrijke overweging is het contrast-effect van kleur. Door witruimte en contrast-technieken te gebruiken kun je extra nadruk leggen op een gewenste actie. Stel, een groot gedeelte van de pagina is blauw, dan zou een rode Call to Action kunnen werken, terwijl normaliter rood als kleur voor CTA’s voor afgeraden.
Klikt u verder?
Ontwerp een CTA die uitnodigt om door te klikken. Maak de tekst goed leesbaar, zorg voor een kleur die goed opvalt (als je een primaire kleur hebt gekozen heb je dit al gedaan). Vermijd dwingend taalgebruik, gebruik liever emotionele zinnen. Markeer knoppen door gebruik te maken van lichte schaduwen.
Daarnaast kun je aanwijzingen gebruiken die de websitebezoeker op de landingpage naar de gewenste plek stuurt. Deze aanwijzingen zijn visuele indicatoren die wijzen naar een focuspunt op de landingpage. Ze begeleiden de bezoeker naar datgeen wat jij van ze wilt vragen. Aanwijzingen zijn pijlen, paden maar ook bijvoorbeeld ogen van mensen op de landingpage. Daarover straks meer!
Pijlen
Tja, als richtingaanwijzers zijn pijlen ongeveer net zo subtiel als een mokerslag. Een pijl zegt “negeer al het andere en kijk híernaar”. Subtiel? Nee. Effectief? Jazeker!
Paden
Een weg of pad wordt door het menselijk brein geïnterpreteerd als de weg van de minste weerstand. In een landingpage kun je hier slim gebruik van maken door bijvoorbeeld samenkomende lijnen te hanteren die men naar de Call to Action toetrekt.
Ogen
Er zijn diverse onderzoeken gedaan die kijken naar het effect van ogen op landingpages. Wat bleek? Een persoon die rechtstreeks ‘in de camera’ kijkt is vaak één van de eerste dingen die iemand checkt zodra ze op de page landen. Als de persoon daarentegen naar links, rechts, boven of onderen kijkt, volgen we als mens een denkbeeldige lijn naar hetgeen dat hij bekijkt. Je kunt afbeeldingen van personen op die manier dus inzetten om jouw websitebezoeker de goede kant op de loodsen.
“To design is to plan, to order, to relate, to control. In short, it opposes all means of disorder and accident.” – Emil Ruder
Contrasterende koppen
Hoe groter de koppen, des te belangrijker ze lijken. Dit zorgt namelijk voor een visuele hiërarchie waarmee je gebruiker makkelijk de belangrijkste onderdelen van een pagina kan scannen. Als alle tekst ongeveer dezelfde grootte is, tja, dan wordt het lastig om te bepalen voor de websitebezoeker wat nou de belangrijkste onderdelen zijn. Het verschil tussen de H1, H2, H3 en H4 moet met het blote oog zichtbaar zijn.
Less is more, way more
Meer is minder en less is more. Elimineer alle overbodige elementen. Laat je websitebezoeker niet verdwalen in een jungle van tekst, knoppen en andere zaken die om aandacht schreeuwen. Een drukke pagina maakt over het algemeen de inhoud ervan ook slechter te begrijpen en moeilijker te consumeren. Bovendien, jouw pagina heeft maar één doel, verwijderen daarom alles wat niet bijdraagt aan dit doel.
Witruimte is wonderlijk
De witruimte tussen elementen maken deel uit van de samenstelling van de pagina, de structuur en helpen bij het rangschikken van de inhoud. Als je weinig witruimte gebruikt ziet je pagina er druk en onoverzichtelijk uit. De elementen liggen te dicht op elkaar en het is moeilijk ze te onderscheiden. Gebruik je teveel witruimte, dan lijkt de informatie niet verbonden en is het moeilijker voor de websitebezoeker om verbanden te leggen.
Je kunt witruimte enorm goed benutten door een gebied leeg te laten rondom een belangrijk element, of gebied, op de pagina. Witruimte is overigens niet per definitie de beste benaming. De ruimte rondom het element hoeft niet persé wit te zijn, zolang het maar een lege ruimte is. Hierdoor valt de Call to Action extra goed op en hoeft de websitebezoeker zich maar op één ding te concentreren.
Zorg voor wat extra ademruimte om een rustgevend effect te creëren. Onderscheid hiermee jouw CTA van de rest van het ontwerp.
“There’s relief in white space for the reader” – Leni Zumas
Krachtige afbeeldingen gebruiken
Een belangrijk onderdeel van design is het gebruik van afbeeldingen. De afbeeldingen van een landingpage moeten niet alleen de inhoud verklaren, maar ook verleiden.
Gebruik afbeeldingen die aantrekkelijk zijn met heldere kleuren en gedurfde kaders. Wees origineel, gebruik dus niet de dertien in één dozijn stockfoto’s die we allemaal wel kennen.
Vergeet niet dat de gebruikte kleuren uit de afbeelding in overeenstemming moeten zijn met het kleurgebruik op de pagina zelf.
Als het aankomt op effectieve afbeeldingen is gebleken dat baby’s (ja echt!) en aantrekkelijke mensen de sterkste impact hebben. Als mens zijn we zo’n beetje geprogrammeerd om een reactie te hebben als we een baby zien.
Responsive design
Browsen op een telefoon gaat anders dan op een desktop of tablet. Als je achter je computer zit heb je mogelijk meer tijd, je surfgedrag is heel anders. Op je smartphone browse je mogelijk vluchtiger. Pas daarom de inhoud van jouw landingpage aan op het betreffende apparaat. Besteed met name veel aandacht aan de mobiele versie van jouw landingpage. Werk met een responsive design.
Een responsive design wilt zeggen dat de inhoud van de page zich automatisch aanpast al naar gelang welk apparaat wordt gebruikt. Aangezien iedereen een ander apparaat gebruikt is het raadzaam om voor ieder wat wils te designen. De ervaring van een mobiele gebruiker is anders dan van iemand die op de tablet zit te browsen.
Webpagina’s zonder responsive design roepen frustratie op. Denk aan afbeeldingen of tekst die niet goed wordt getoond. Dit kan ertoe leiden dat websitebezoekers vroegtijdig afhaken en je website wegklikken.
“Design must seduce, shape, and perhaps more importantly, evoke an emotional response.”– April Greiman
Conclusie
Design en conversie zijn dus onlosmakelijk met elkaar verbonden. Zonder goed design is de kans groot dat je conversies dalen. Een doordacht design daarentegen zal conversies verhogen. Je hebt geleerd over kleurgebruik, contrast, ‘aanwijzers’, responsive design en meer. Welke van deze conversie verhogende design tips ga je als eerste toepassen?
Wil je een WordPress website laten bouwen mét een schitterend design? Neem dan vrijblijvend contact op voor een consult.
