Weblog
Design principes die de conversion rate verhogen
Door: Tim Welzen,
08 oktober 2018
-
Een design kan een website maken of breken. Tegenwoordig ligt de nadruk heel erg op SEO (Search Engine Opitimization). Uiteraard moet de potentiële klant op zijn minst de website kunnen vinden. Maar alle SEO effort wordt teniet gedaan als de klant daarna de site onmiddellijk weer verlaat vanwege een slecht design. Voor een optimale conversion rate (percentage bezoekers dat daadwerkelijk iets koopt) is het dus heel belangrijk dat je een aantrekkelijke website hebt. Klanten zullen niet eens verder kijken naar de producten, als de aanblik van de site ze niet bevalt.
Omdat ontwerpen niet ieders sterkste punt is, geven we je hier een aantal tips, gebaseerd op standaard design principes, die je direct kunt toepassen.
1. Lay-out
Een van de basis lay-out principes in grafisch design en fotografie is de rule of thirds. Dit betekent dat je de belangrijkste objecten/het belangrijkste object op de pagina op een van de lijnen, of nog beter, op een van de kruispunten van een raster van 2 horizontale en 2 verticale lijnen plaatst die de pagina in 9 gelijke delen verdeelt.
Het is bekend dat objecten die op deze kruispunten worden geplaatst de meeste aandacht trekken. Het is dus verstandig om een belangrijke afbeelding of call-to-action button volgens dit principe te plaatsen. De hiërarchie en de flow van de inhoud is ook belangrijk. Je ziet daarom dat vaak de F-lay-out wordt toegepast waarbij het bovenste gedeelte, of soms alleen de titel, zwaarder is aangezet en over de volle breedte van het scherm loopt, terwijl de content eronder steeds minder ver naar rechts loopt, als in een hoofdletter F. Dit principe volgt de natuurlijke leesrichting van de gebruiker. Belangrijke zaken horen dus links boven, de wat minder belangrijke items kunnen verder naar rechtsonder worden geplaatst.
Verder is het belangrijk om genoeg witruimte toe te passen. Een volgepropte pagina is onaantrekkelijk en schept verwarring: waar moet de klant naar kijken. Bedrijven zoals Apple zijn meesters in het toepassen van deze negative space". De lege ruimte trekt het oog als een magneet naar de inhoud/de afbeelding die er wel toe doet.
En vergeet niet dat een webdesign lay-out (een of meerder pagina's) een logisch en visueel geheel moet vormen. De gebruiker moet er als vanzelf doorheen geloodst worden. De navigatie moet uniform zijn en de look and feel van de onderdelen moeten overeenstemmen.
2.Aandachtsspanne
De aandachtspanne van een gemiddelde website bezoeker is tegenwoordig niet erg veel groter dan die van een goudvis (ongeveer 8 seconden), zeker niet op het mobiele platform. Het is dus heel belangrijk om in een zo kort mogelijke tijd de aandacht van de gebruiker te fixeren.
Dit begint met de laad tijd van de pagina. Als een potentiële klant moet wachten op het laden van een plaatje, ben je hem al kwijt. Investeer daarom in goede webdesign technieken die het mogelijk maken om relatief rijke content toch snel te laten laden. Kies bijvoorbeeld voor "particle backgrounds" (voorbeeld), kleine stukjes javascript die volledig op de achtergrond op de end-user device worden uitgevoerd, i.p.v. traag ladende zware video's. In de zeer kleine tijdspanne die je hebt moet je dus zorgen dat je de aandacht van de gebruiker trekt en vast houdt. Een paar tips, met in acht neming van de eerder beschreven lay-out principes:
- Plaats een duidelijke to the point header.
- Gebruik trefwoorden.
- Gebruik media die de boodschap ondersteunt en de aandacht richt op de belangrijkste call-to-action.
- Beperk het aantal keuzes op een scherm (en in de menu's)
- Gebruik interactieve content.
- Maak call-to-action buttons aantrekkelijk, duidelijk en simpel.
3. Kleurgebruik
Kleuren roepen emoties op en het is dus belangrijk dat de kleuren op de website het gevoel weergeven dat je wilt oproepen met je product of service. Om de juiste kleurencombinaties te vinden zijn verschillende hulpmiddelen beschikbaar. Coolors is een site waar je gratis color schemes kunt opzoeken. Het helpt je ook om bij een of meerdere kleuren, bijpassende kleuren te zoeken of een alternatief te vinden voor de color scheme die je hebt.
Als je bepaalde afbeeldingen hebt die naar jouw mening goed passen bij het imago dat je wilt uitstralen, kun je m.b.v. het Adobe Color Wheel automatisch een color scheme genereren dat afgeleid is van de afbeelding.
Bij het bepalen van de juiste kleurencombinatie is het ook belangrijk om te kijken of het gebruik van de kleuren een goed contrast geeft. Alle componenten moeten een goed contrast hebben met de achtergrond en de kleuren moeten de tekst goed leesbaar maken.
4. Afbeeldingen
En last but not least: Afbeeldingen. Afbeeldingen zijn de belangrijkste elementen van een website. De meeste consumenten klikken veel eerder op zoekresultaten als deze gecombineerd worden met afbeeldingen. Ook zal bijna niemand contact opnemen met een bedrijf of een online aankoop doen, als het product niet of slecht gepresenteerd wordt. Afbeeldingen moeten een hoge resolutie hebben, die door een goed webdesign, passend gemaakt kunnen worden voor het uiteindelijke device waarmee de potentiële klant de website benadert. Verder moeten de afbeeldingen de juiste uitstraling en sfeer hebben die past bij jouw product. Naast een professionele productfoto kun je sfeerafbeeldingen gebruiken. Gebruik bijvoorbeeld een gezicht als je een empathisch gevoel wilt opwekken of natuurfoto's om de nadruk op rust te leggen.
Gebruik echter nooit 13 in een dozijn stockfoto;s. Hiermee geef je de indruk dat je geen aandacht hebt besteed aan je eigen product en niet de moeite hebt genomen om het product uniek te presenteren. De consumenten worden geconfronteerd met een saaie alledaagse website en zullen deze snel verlaten. Presenteer unieke afbeeldingen en vraag desnoods een design professional (webdesign, illustrator, merk designer) om de juiste afbeeldingen voor je te ontwerpen of te selecteren.
Tenslotte
Neem deze adviezen ter hand en kijk nog eens goed naar je eigen website: Volgt deze alle principes of is er ruimte voor verbetering en kun je met de adviezen aan de slag om jouw conversion rate te verhogen? Doorsturen | Reageer | Nieuwsbrief