moving gradient dot moving gradient dot
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots

7 designtrends die in 2019 aan conversie-optimalisatie bijdragen

Sjoerd - May 22, 2019 - 7 Minuten

Knipper één keer met je ogen en er is al weer een nieuwe website toegevoegd aan de enorme collectie die het internet al kent. Het web staat geen seconde stil. Hoe zorg je er dan voor dat je jouw concurrentie voorblijft en dat jouw content, website of -shop converteert?


Dat is de vraag waar wij ons ook dagelijks mee bezighouden. Het betreft het hele Niice-team, want conversie-optimalisatie raakt al onze afdelingen. Niet alleen onze online marketeers letten erop of je content en pagina wel gericht zijn op conversie, maar ook het development- en designteam houden conversie te allen tijde in het achterhoofd. In deze blog lees je zeven designtrends in die in 2019 kunnen bijdragen aan conversie-optimalisatie.

Kantoor verticaal niice 11

1. Mobile first

Mobile first ontwerpen is een trend die Niice al lange tijd toepast, maar ook in 2019 is het nog volop relevant. Mobile first houdt in dat wij eerst aan de slag gaan met het ontwerpen van mobiele pagina’s en pas daarna voor grotere schermen ontwerpen. De reden hiervan is eenvoudig: nog steeds neemt het mobiel gebruik toe, blijkt uit een van de vele onderzoeken daarnaar. Onderstaande tabel geeft inzage in zoekopdrachten, maar zegt dus ook iets over het percentage personen dat uiteindelijk via een mobiel apparaat op jouw website belandt.

Mobile vs desktop search volumes
Mobile vs. Desktop Local Search Volumes (BIA/Kelsey Forecast)

De lijn voor mobiel is stijgende. Voor desktop stijgt de lijn ook nog steeds, maar die stijging zwakt langzaam af. Het is dus niet zo vreemd dat de focus in eerste instantie op mobiele designs ligt, ook in 2019. Mobielvriendelijke websites krijgen bijvoorbeeld ook voorrang in Google ten opzichte van websites die minder mobielvriendelijk zijn.

Met het oog op conversie-optimalisatie is mobile first ontwerpen dé manier om goed na te denken over hoe conversiegerelateerde elementen in beeld worden gebracht. Zo is de weergave en positionering van knoppen heel anders dan op desktop, waar je veel meer ruimte hebt. Juist op kleinere schermen is het dus zaak om met de beperkte ruimte de ultieme plek te kiezen. Uiteindelijk is desktop niet minder belangrijk, maar juist de beperkte ruimte van mobiele devices stelt ons in staat om extra goed na te denken over de opzet van een conversieverhogende pagina.

2. Patronen

Over positionering gesproken: als we je nu zouden vragen om met je muis of vinger naar de navigatie te bewegen, is de kans groot dat je naar boven beweegt. We zijn nou eenmaal gewend aan bepaalde terugkerende patronen op het web. Er zijn websites die de navigatie aan de onderkant hebben gepositioneerd, maar voor veel gebruikers zal dat even wennen zijn of zelfs volkomen onlogisch. Als je afwijkt van een patroon, moet het ontzettend goed doordacht en getest zijn. Wat we hiermee willen zeggen, is dat het bij bepaalde zaken vaak beter is om deze als standaard te zien, ook met het oog op conversie.

Probeer in onderstaand voorbeeld in je hoofd maar eens het boek te bestellen. Het boek is overigens een aanrader, maar aangezien dit (nog?) geen gesponsord bericht is laten we het linkje achterwege.

Boek zonder bestelknop
Bewerkt screenshot van een productpagina op Bol.com

Gelukt? Heel knap, maar wij geloven er niets van. De Call To Action-knop (CTA) is immers nergens te bekennen. Hoe voeg je het boek nu toe aan je winkelwagen? Je zou de knop ergens in de buurt van de prijs verwachten, maar blijkbaar staat hij ergens verderop op de pagina. Als je een geduldig type bent, zou je wellicht nog de moeite doen om even verder te scrollen (in gedachten) dan je neus lang is. De meeste mensen zijn dat echter niet en zullen wegklikken of zelfs naar de concurrent stappen. Bovenstaand voorbeeld is gelukkig bewerkt: Bol.com weet wel beter en de bestelknop is gewoon direct in beeld op de daadwerkelijke pagina. Echter is het een goed voorbeeld om te testen wat het met je doet als een website een patroon doorbreekt. Patronen zijn belangrijk. Soms saai, maar als mensen er eenmaal aan gewend zijn, is er geen ontkomen meer aan.

Nu vraag jij je misschien af: was dit vóór 2019 niet ook al zo? Ja, zeker wel. Maar wat anno 2019 soms een trend lijkt, is dat websites ‘hippe’ keuzes gaan maken waardoor de website misschien wel heel origineel wordt, maar waarbij conversie naar de achtergrond verdwijnt. Dit betekent natuurlijk niet dat een goede website niet mooi kan zijn. Door te starten met de strategie, kan direct nagedacht worden over wat belangrijk is en wat minder, de doelen en waar we de gebruiker naartoe willen leiden. Het visuele jasje volgt dan wel, maar voor wie de conversie wil verhogen (wie niet?), is dit uiteindelijk niet het belangrijkste om aan het begin al tijd en energie in te steken.

3. Typografie

Times New Roman, Comic Sans… wie is er niet groot mee geworden? Tegenwoordig is het meer een trend om deze fonts belachelijk te maken. Welke je wel gebruikt, is belangrijker dan je misschien denkt en ook dat heeft invloed op je conversiewaarde. Ben je een jurist of heb je een advocatenbureau? Dan wil je zakelijkheid uitstralen. Professionaliteit, passie voor het vak. Een font met schreef past dan waarschijnlijk goed. Schreef? Ja, met van die pootjes, zoals dit:

Font met scheef

Run je een pretpark, dan is die zakelijkheid niet wat je wil overbrengen. Een speels font is dan veel leuker voor de doelgroep. Stel je voor dat je bovenstaand voorbeeld op de website van Walibi voorbij ziet komen, in combinatie met de slogan ‘Hard gaan’. Dan kijk je ook wel even twee keer of je echt wel op de juiste website bent beland. Het juiste font is dus echt wel van belang om het juiste gevoel bij gebruikers over te laten komen. Het grote voordeel anno 2019 is dat de keuze in lettertypes alsmaar ruimer wordt. Via fonts.google.com bijvoorbeeld zijn erg veel fonts voor het web gratis beschikbaar.

4. Afbeeldingen

Naast goede typografie, groeit de trend om visueel materiaal te gebruiken in 2019. Op wat voor manieren kan een simpele afbeelding dan invloed hebben op de conversiewaarde?

Lange teksten lezen vanaf een scherm is niet altijd prettig. Als je een digitaal boek leest, is dat nog tot daaraan toe. Maar op het moment dat jij je op conversie gaat richten, zijn lange teksten niet interessant. Toch wil je wel het een en ander vertellen bij datgene waarmee jij voor conversie gaat zorgen. Visuele beelden worden om die reden steeds belangrijker. ‘Een foto zegt meer dan duizend worden’, wordt weleens gezegd. Maar daarvoor is relevantie wel belangrijk. Een foto van een bedrijfspand op de contactpagina kan beeldend zijn, maar het gezicht van de contactpersoon zou voor je doelgroep wel eens veel interessanter kunnen zijn. Die persoonlijkheid zal in combinatie met de juiste teksten waarschijnlijk voor meer conversie zorgen dan een onpersoonlijk pand.

Dat heeft tevens met relevantie te maken. Relevante content is belangrijk en dat gaat dieper dan je denkt. Juist nu anno 2019 beeldmateriaal zo belangrijk is, is het goed om hier rekening mee te houden. Human gaze is een term die beschrijft dat je het kijkgedrag van gebruikers kan sturen door relevante inhoud voor een afbeelding te kiezen en hier slim mee om te gaan. Kijk maar eens naar deze voorbeeldadvertentie:

Jurrien kijkt weg van de CTA
Jurriën kijkt weg van de CTA

Jurriën - een van onze marketeers - kijkt hier naar links, terwijl de CTA zich rechts bevindt. Het is psychologisch bewezen dat je automatisch de kijkrichting van de persoon op de foto volgt. In dit geval leidt dat naar niks, of in het ergste geval: een andere advertentie die links gepositioneerd is. In het tweede voorbeeld kijkt Jurriën wel naar de CTA. Drie keer raden waar jij als kijker dan uitkomt. Het onderzoek stelt dat het daarmee 20% aannemelijker wordt dat jij de tekst leest omdat 33% de kijkrichting volgt.

Jurrien kijkt richting de CTA
Jurriën kijkt richting de CTA (en jij waarschijnlijk ook)

5. Bewegende beelden en elementen

Niet alleen stilstaand beeld is nuttig als het om conversieverhogende middelen gaat. Ook bewegend beeld kan een boost geven aan je conversies. Er komen, ook in 2019, steeds meer middelen beschikbaar om op een lichtgewicht manier (zonder dat je website traag wordt), bewegingen in hoge kwaliteit toe te passen. Denk daarbij aan video of animatie. Welke voordelen kun je verwachten als je bewegend beeld gebruikt op je website?

  1. Mensen hoeven minder te lezen. Door leuke, informatieve video's in te zetten, voorkom je dat je doelgroep grote lappen tekst moet lezen voordat men snapt wat je nou eigenlijk wilt verkopen. Aangezien mensen steeds sneller geneigd zijn om lange teksten voorbij te scrollen, kan video dus een mooie oplossing zijn. Meer weten over videomarketing?
  2. Creëer hints en triggers. Visuele hints kunnen gebruikers triggeren om bepaalde keuzes te maken. Denk aan een CTA die heel subtiel beweegt. Het trekt de aandacht, waardoor men eerder geneigd is iets aan te klikken.
  3. Je website wordt aantrekkelijker van bewegend beeld. Video en subtiele animaties maken de website interessanter. De kans is dus groter dat mensen langer blijven hangen, dieper ingaan op de inhoud en dus stijgt de kans dat men actie onderneemt.

6. CTA’s en knoppen

Beweging toevoegen aan CTA's is dus een manier om de aandacht te trekken. Maar dan moet de basis van die knop ook in orde zijn. Wat bepaalt dan of die basis goed is of niet?

  • Grootte en padding. Een knop moet niet alleen groot genoeg zijn om op te vallen of goed klikbaar te zijn: ook in de knop moet voldoende ruimte zijn. Kijk eens naar onderstaande voorbeelden. De onderste knop is een stuk minder aantrekkelijk. Het oogt op elkaar gedrukt en is daarnaast niet lekker klikbaar, vooral niet met grote vingers op een klein scherm. De bovenste is daarom een betere optie. Mede omdat het anno 2019 niet erg is om je pagina's en elementen ruim op te zetten. Mensen willen liever ruimte dan zoveel mogelijk informatie op elkaar gedrukt. Dat was vroeger wel anders.
CTA’s en knoppen
  • Wat in het bovenste voorbeeld ook het geval is, is dat de tekst een resultaat beschrijft. Online groeien is het resultaat van onze diensten; datgene waar wij samen met jou naartoe werken. De tekst 'Contact opnemen', doelt op een actie die jij moet uitvoeren en niet op jouw uiteindelijke doel.
  • Gebruik nooit twee dezelfde of sterk vergelijkbare knoppen bij elkaar in de buurt. De knoppen hierboven hebben dezelfde stijl, ondanks dat de ene groter is dan de andere. Dit roept een allesbehalve conversieverhogende vraag bij jou op: 'welke moet ik nu aanklikken?' Zorg er altijd voor dat men één keuze heeft. Wil je toch een secundaire knop? Uiteraard houden wij daar rekening mee, maar deze heeft een beduidend andere stijl dan de CTA.
  • Daarentegen is het van belang dat overal waar de CTA wordt gebruikt, deze dezelfde stijl heeft. Als je op de ene plek een blauwe knop inzet en op de andere plek een groene, geef je eigenlijk twee opties terwijl ze hetzelfde doel hebben. Ook dit kan verwarring opwekken.
  • Een laatste tip: gebruik emotionele triggers. In plaats van 'Verhoog je conversie' kun je ook zeggen: 'Stop met het verliezen van conversie'. Dit werkt in op de emotionele kant van je brein. 'Conversie verliezen?! Wacht eens! Dat wil ik niet! Nu moet ik wel actie ondernemen' is een logische gedachte bij het zien van een dergelijke tekst

7. Fysieke belemmeringen voorkomen

De trend om online te kopen zet door. Omdat ook in 2019 het aantal online verkopen nog groeiende is, is het des te belangrijker dat men online de best mogelijke ervaring heeft. Als je de conversie wilt verhogen, is het van belang dat je zoveel mogelijk potentiële belemmeringen wegneemt. Dat kan op de volgende manieren:

  1. Toon de voortgang van de gebruiker. Je hebt het vast wel eens meegemaakt: je vult een online enquête in en er komt maar geen eind aan. Nergens staat hoe lang het nog duurt en dus denk je al gauw: laat maar zitten. Vervelend voor degene die de enquête afneemt. Nog vervelender is het voor de eigenaar van een webshop als iets vergelijkbaar gebeurt. Hoe irritant is het dat als jij je in het bestelproces bevindt, jij jezelf af moet vragen hoe lang het nog gaat duren? Als je geen voortgang toont, bestaat de kans dat de gebruiker de bestelling afbreekt en ergens anders verder gaat kijken.
  2. Leid je bezoekers door het bestelproces alsof ze in de IKEA rondstruinen. Oftewel: de route moet zo logisch zijn dat ze vanzelf wel een keer bij de uitgang komen. Een zijroute nemen kan, maar daar moet je wel even naar zoeken. Daarom is het ook zo belangrijk dat elke CTA dezelfde kleur heeft. Vanaf de knop 'Voeg toe aan winkelmandje' tot aan 'Betaal direct' zouden alle knoppen voor Niice blauw moeten zijn, als wij een webshop hadden. De gebruiker weet dan dat hij een logisch pad volgt en hoeft er eigenlijk niet bij na te denken.
  3. Blijf overal je voordelen benoemen. Op zoveel mogelijk plekken in het design van een webshop houden wij rekening met het tonen van voordelen. Om een lang verhaal kort te houden: kijk eens naar onderstaand voorbeeld van Coolblue. Ook onder de bestelknop benoemen zij nogmaals de voordelen. Mocht je nog twijfelen om die knop te gebruiken, wordt dat laatste beetje twijfel hier weggenomen.
Fysieke belemmeringen voorkomen
Screenshot van een productpagina van Coolblue

Er is nog zoveel meer te schrijven over hoe je in de designfase al rekening kunt houden met conversieverhogende trucjes. De essentie van deze blog was dan ook niet om extreem gedetailleerd in te gaan op alle trends en tips, maar je een idee te geven over de essentie van design bij het verbeteren en verhogen van jouw conversiewaarde. Wij duiken er echter wel graag samen met jou dieper op in. Neem gerust eens contact met ons op, dan zullen wij samen bekijken hoe jij je conversie kunt verhogen op je nieuwe of verbeterde website!

pijltje-links-witCreated with Sketch. pijltje-rechts-witCreated with Sketch.
🚀
mail-iconCreated with Sketch.