Meer conversie op je site met deze webdesign trends

webdesign, conversion rate optimization
Written by Jolien Struyf

Een website moet er mooi uitzien zodat deze mensen aantrekt en overtuigt langer te surfen. Maar dé ultimate goal van je website is toch nog steeds zoveel mogelijk conversies verkrijgen? Wel, dan mag je website niet enkel een streling voor het oog zijn, maar moet deze ook daad bij het woord voegen, zoals we wel eens zeggen. Daarom hebben wij voor jou enkele design tips & tricks op een rijtje geplaatst die niet enkel visueel optimaal zijn, maar ook zorgen voor een verbetering op vlak van conversies. 

Full-width images 

CoreICT-full-width-imageAfbeeldingen zijn belangrijk voor je website, zoveel is duidelijk. Een website die bestaat uit enkel doorlopende tekst verveelt snel en schrikt je bezoekers af. Uiteraard leidt dit dan ook niet tot de gewenste conversies. Over de grootte van je afbeeldingen kan je best even stilstaan. Onderzoek toonde aan dat grote, full-width afbeeldingen de aandacht trekken waardoor de websitebezoekers even stoppen met scrollen. En hoe langer je een persoon op je website houdt, hoe meer kans je hebt om hen te betrekken in je verhaal. 

Full-width images zijn responsive en passen zich dus aan aan de breedte van het toestel waarmee gesurft wordt en behouden hun resolutie. Hierdoor krijgen de bezoekers de indruk dat de website onbegrensd is. Het geeft je developers daarnaast de ruimte en flexibiliteit om de inhoud overal op de webpagina te plaatsen en te spelen met de doorzichtigheid van de afbeelding. 

Naast het feit dat een full-width afbeelding compatibel is met de verschillende browsers, zijn er nog enkele andere voordelen. Zo zorgt het voor een strak, eigentijds of modern gevoel. Websitebezoekers moeten ook niet meer wachten tot de afzonderlijke afbeelding laadt, ze moeten minder scrollen en de afbeelding is steeds duidelijk zichtbaar, ook wanneer ze mobiel surfen. 

Verder zijn er enkele concrete punten waar je rekening mee kan houden. Afbeeldingen roepen bepaalde emoties op bij lezers. Gelukkige, lachende en plezier makende mensen zorgen daardoor voor meer conversie. Uiteraard moet de emotie die je wil uitlokken overeenkomen met je bedrijf en de conversie die je voor ogen hebt. 

Een van de belangrijke punten bij SEO is de laadtijd van je website. Deze kan een positieve of negatieve impact op de ranking van je website hebben. Als je dus kiest om gebruik te maken van dergelijke indrukwekkende, grote afbeeldingen moet je opteren voor een hoogstaande resolutie die op vlak van bestandsgrootte toch geoptimaliseerd is. 

Bij het invoegen van een full-width image komt het er dus op neer dat je een evenwicht moet vinden tussen een imponerende afbeelding, die toch vlotjes laadt en perfect past bij het imago van je bedrijf en website. 

Split-screen layouts 

Wat is een split-screen layout? Eigenlijk kan je dit letterlijk vertalen: een layout waarbij het beeld gesplitst is. Op een scherm worden twee verschillende boodschappen geplaatst waartussen de bezoekers zelf snel kunnen kiezen. Een split-screen layout laat je bezoekers dus toe hun eigen weg te bepalen. 

Niet voor elk product of elke website raden wij een split-screen layout aan, maar voor bedrijven die een beperkt aantal verschillende type producten of diensten aanbieden kan het best een goede keuze zijn. Op deze manier worden de websitebezoekers zo snel mogelijk naar bijpassende, relevante landingspagina’s geleid. 

peugeot-split-screen-website

Bij het gebruik van een onderverdeeld scherm moet er rekening gehouden worden met enkele basisprincipes. Ten eerste moeten beide keuzes, of beide schermen visueel bij elkaar passen. Ten tweede staat er op de deze split-screen pagina vaak een minieme hoeveelheid van informatie. Het is dus van groot belang de bezoeker door te sturen naar een gedetailleerde pagina door steeds de aandacht te trekken naar de CTA. Dit kan enerzijds door je beginscherm sober te houden en een contrasterende kleur voor de CTA te gebruiken. Of je kan gebruik maken van de human gaze, zoals je hiernaast op het voorbeeld van Peugeot kan zien. Hierbij wordt het kijkgedrag van de gebruiker beïnvloed door slim en creatief om te gaan met foto’s en afbeeldingen. Maar ook animatie kan gebruikt worden om een handeling van de gebruiker te stimuleren.

Als laatste moet je jezelf afvragen of een split-screen layout wel passend is bij jouw content en of je dan geen potentiële nevenverkoop misloopt. 

Monochromatisch kleurgebruik

Monochro…wat? Monochromatische kleurgebruik is het gebruiken van alle tinten van donker naar licht van slechts één kleur. Deze kleuren kunnen goed als basis kleurenpalet gebruikt worden en zijn perfect te combineren met een contrasterende kleur. 

Pink-Ribbon-monochromatisch-kleurgebruikBij de keuze van de kleuren die je gaat gebruiken op je website moet je ook kijken naar de functionaliteit ervan. Om je websitebezoekers je webteksten snel en beter te laten lezen kies je voor een sterk contrasterende kleur. Om deze reden is zwart op wit nog steeds dé koploper als het gaat om leesbaarheid, maar andere kleuren kunnen uiteraard ook aangewend worden. 

Zoals eerder aangehaald moet de CTA opvallen, daarom kies je bij monochromatisch kleurgebruik of andere sobere kleurencombinaties voor een contrasterende kleur. 

Bezoekers bij de hand nemen 

Soms worden er teveel opties aan de bezoeker gegeven, waardoor het pad dat je wil dat je bezoekers afleggen niet duidelijk meer is. Deze voelen zich dan overweldigd waardoor zij sneller gaan bouncen. De bezoekers die wel op je website blijven dwalen vaak doelloos doorheen je webpagina’s. 

Het is jouw taak om de bezoekers bij de hand te nemen en deze naar de betreffende conversie te leiden. Dit kan enerzijds door het vereenvoudigen van de keuze door deze visueel te beperken. Bijvoorbeeld door deze ‘weg te stoppen’ in een secundaire navigatie die elders op de website of in een hidden drawer menu geplaatst wordt. Anderzijds kan je er ook voor kiezen een belangrijke CTA in je navigatiebalk als button te stylen. Denk hierbij ook aan het vorige puntje waar we spraken over contrasterende kleuren. 

Header en navigatie Mia

Frictionless buying experience door personalisatie

Data, data, data, tegenwoordig draait bijna alles rond het verzamelen en verwerken van data. Het grote voordeel van het implementeren van een systeem die een bezoeker identificeert aan een type of persona, is dat je via marketing automation je content en marketing kan aanpassen aan deze bezoeker. Ook kan deze informatie en personalisatie gebruikt worden om de bezoekers door de conversiefunnel te sturen. Op deze manier gaat de ontvanger relevante informatie te zien krijgen op exact het juiste moment. En dit is waar de kopers tegenwoordig naar op zoek zijn. Ze willen een frictionless buying experience, wat staat voor snelheid, personalisatie en wow-ervaring.

Personalisatie is dus eigenlijk anticiperen op wat je bezoekers nodig hebben, zonder dat ze hier zelf achter moeten vragen. Zo krijgen ze het gevoel dat je hun problemen verstaat en dat jouw product of dienst de perfecte oplossing kan bieden. En net hierdoor gaat het persoonlijk aanspreken en behandelen van prospects of leads tot meer conversies leiden dan statische content waar ze zelf naar op zoek moeten. 

Mobile friendly 

responsive-websiteSamenhangend met de wens naar een frictionless buying experience is de mobile friendliness van je website. Het mobiele gebruik blijft toenemen, maar dat verwondert je vast niet? Deze stijging is er al sinds enkele jaren en het ziet er niet naar uit dat dit snel zal omslagen. Net daarom is het belangrijk om extra aandacht te vestigen op de mobielvriendelijkheid van je website. De kleinere ruimte van het scherm van smartphones zorgt voor enkele beperkingen. De positionering van buttons, foto’s, navigatie,... moet daarom zorgvuldig gekozen worden. 

 

Video 

Video heeft de laatste jaren een enorme groeispurt gekend, daarom spreken we soms wel eens van videomarketing. Het is, ook voor B2B, een uitstekende manier om je publiek te laten weten wat je bedrijf net doet en zorgt daarnaast voor meer betrokkenheid. Onderzoek toont bovendien aan dat video 12 keer meer bekeken wordt dan teksten en dat ons brein videocontent veel sneller verwerkt. Dit zorgt er mede voor dat het plaatsen van een video op je landingspagina je aantal conversies verhoogt. 

Waar moet je rekening mee houden wanneer je een video implementeert in je website? Lengte, thumbnail, audio, mensen of animaties, … Hieronder lichten we deze punten verder toe. 

Ten eerste moet je nadenken over de lengte van je video. Vanaf het begin van je video moet je de aandacht trekken en ervoor zorgen dat de kijkers tot het einde van je film blijven kijken. Een ideale lengte bestaat er niet, maar hoe langer de video, hoe moeilijker het is de aandacht van de kijker vast te houden. 

Flanders-make-video-thumbnailTen tweede moet je kiezen voor een aantrekkelijke thumbnail. Een thumbnail is een momentopname van je video die je websitebezoekers moet overtuigen op play te klikken. Naast deze afbeelding is ook de titel een belangrijk item om kijkers te laten overgaan tot actie. Zorg er daarnaast voor dat je gebruik maakt van passende audio en schrijf je volledige video ook uit. Zo krijgt je video meteen wat meer SEO-waarde. 

Bij video’s die als doel hebben leads te genereren of conversies te verkrijgen zijn er vaak één of meerdere personen die uitleg geven over je bedrijf en producten. Hierbij moet je de keuze maken of je gaat werken met echte personen of animatiefiguren. Beide hebben hun voor- en nadelen. Zo zullen experts binnen je sector wel meer vertrouwen opleveren, maar animaties zijn dan weer gemakkelijk te creëren binnen je huisstijl. 

Het grote doel is natuurlijk dat op het einde van je video je kijker een actie onderneemt. Om deze actie te vergemakkelijken en te boosten, sluit je je video steeds af met een CTA. 

Opvallende, activerende CTA

Efficiënte-CTAHierboven werd de CTA al meerdere malen aangehaald, dat deze belangrijk is om je conversie te verhogen is dus meer dan duidelijk. De CTA kan je niet enkel optimaliseren op vlak van kleur, vorm en inhoud, maar ook op plaatsing. Zorg er dus voor dat deze altijd zichtbaar is. Dit kan door deze bijvoorbeeld vast te zetten in de header van je website of in de footer van je mobiele versie. Ook kan je gebruik maken van een single column CTA. We merken dat door het wegnemen van extra informatie links of recht, de aandacht beter naar de CTA getrokken wordt. 

Hoe schrijf of maak je nu een doeltreffende CTA? Ten eerste moet je CTA aansporend en activerend zijn. Vaak kan het helpen om het specifieke voordeel voor de bezoeker duidelijk te maken in je button, in plaats van een meer algemene beschrijving te gebruiken. De landingspagina, de pagina die volgt op het doorklikken van je CTA, moet een logisch gevolg zijn van je aanbod. Is dit niet het geval, dan kan dit leiden tot een hoog percentage van bounces. 

Weet je niet zeker wat nu het beste bij jouw website past? Test enkele zaken van hierboven uit en kijk zelf wat het best presteert, want meten is weten! 

contact opnemen met Mia