Deel #3 Design – Formulier en Check-Out Proces Conversie Optimalisatie

In het derde deel van onze reeks leggen we precies uit waar je op moet letten qua design voor conversie optimalisatie en geven we tientallen praktische tips om jouw conversies te verhogen.

Transcriptie van de Video

Hoi. Mijn naam is Bart van Klik Proces en in deze video ga ik je alles uitleggen over het ontwerpen van een conversie-gericht formulier en check-out proces.

Een waarschuwing vooraf: de pagina is wat lang (bij 10.000 woorden), maar dat komt omdat ik je echt alles wil uitleggen over design.

Ik heb het artikel zo gemaakt dat ‘ie extreem praktisch is.

Dus zet jouw offerteformulier of jouw checkout proces op het tweede beeldscherm ernaast en dan kan je die tijdens het filmpje meteen bekijken, aantekeningen maken en het direct gaan verbeteren.

We gaan heel veel doornemen tijdens deze video en als je hiermee klaar bent, heb je eigenlijk alles wat je design-technisch moet weten om jouw conversies flink te verhogen.

Waar gaan we het over hebben deze video:

• Het gebruik van kleuren: welke kleuren converteren goed en welke kleuren converteren minder.
• Witruimte, over of je één kolom of meerdere kolommen moet gebruiken.
• Hoe je je formulier moet opdelen zodat het logisch is en zodat het mensen helpt.
• Teksten, over labels, over placeholders.
• Navigatie en over de call to actions die onderaan staan.
• Ik ga zelfs een poging doen om van een saai formulier eigenlijk een verhaal te maken om bezoekers te motiveren en om het leuker te maken om het in te vullen.
• Specifieke velden hebben, zoals kortingscodevelden of winkelwagen-bijwerkvelden.

Kortom: alles wat met design te maken heeft komt in dit filmpje aan bod.

En door al die dingen te combineren, gaan we ervoor zorgen dat mensen zo min mogelijk moeite hoeven te doen om jouw formulier helemaal te doorlopen en daardoor gaan je conversies omhoog.

Als je vragen hebt, kan je die achterlaten in de YouTube-reacties of op de site.

Algemene Design Principes

Als we het hebben over het design van een formulier, dan gaan we even beginnen bij het begin.

Eerste Indruk

Het begin is de eerste indruk die het formulier maakt.

Als je eenmaal op een formulier komt of op het checkout proces: hoe ziet het er dan uit en wat is de eerste indruk die je krijgt.

En dat kan eigenlijk positief zijn: het ziet er goed uit, wekt vertrouwen op.

of negatief: ik weet het niet zeker, het ziet er niet zo geweldig uit.

Los van de specifieke elementen op de site, gaat het eigenlijk over het grote plaatje.

Ik open de site: wat zie ik?

Coolblue heeft dat uiteraard goed voor mekaar.

Maar als ik dat bijvoorbeeld vergelijk met dit van Plantje.nl, dan zie je: de opmaak is veel minder aandacht aan besteed en daarmee ziet het er ook meteen heel anders en veel minder vertrouwenwekkend uit.

Dus een eerste indruk is heel erg belangrijk.

Zeker ook omdat die eerste indruk ook bepaalt, onbewust, een stukje bewust, maar vooral onbewust, hoe ingewikkeld ga ik dit allemaal vinden.

Hoe ingewikkeld ziet het formulier eruit en heb ik daar wel zin in.

Wederom: een goed, netjes opgemaakt formulier die duidelijk en overzichtelijk is, wekt een veel betere indruk dan één grote lap zonder echt een mooi design.

Design is allereerst belangrijk, omdat het je eerste indruk bepaalt en dat bepaalt voor een deel of je daadwerkelijk gaat beginnen aan het invullen van het formulier.

Achtergrond Kleur

Dan is het eerste waar ik het over wil gaan hebben het kleurgebruik in het formulier.

Want er is eigenlijk één manier die gewoon simpelweg het beste werkt. Dat is als volgt: neem als kleur een witte achtergrond en neem als velden duidelijk gekleurde velden, bijvoorbeeld zwart, dat kan zijn oranje, dat kan zijn net als bij Coolblue waar ze veel groen gebruiken. Ook blauw gebruiken ze hier.

Maar een witte achtergrond of in elk geval een hele lichte achtergrond met donkere, opvallende tekst en velden erin. Dat werkt altijd het beste.

Wat je anders namelijk bijvoorbeeld kan gaan krijgen is dit:

Hier heb ik een voorbeeld van een contactformulier dat donker is en je ziet het misschien niet, maar hier staat tekst.

Dit is een typisch voorbeeld van een donkere achtergrond met een donkere tekst wat dus absoluut niet werkt en niet opvalt.

Je kan zien als je met je muis erover gaat: kijk, er staat daadwerkelijk iets.

Dus gebruik altijd een lichte achtergrond, donkere tekst.

Let daarbij wel op dat je niet een lichte achtergrond gebruikt en grijze of lichtgrijze tekst.

Dat zie je nogal regelmatig en dat valt best wel tegen elkaar weg.

Dus hier zie je dat Coolblue ervoor heeft gekozen om wat extra informatie ook op die manier te presenteren, hoewel zij wel echt een witte achtergrond hebben.

Maar zorg er dus voor dat deze kleur op die achtergrond niet je standaard is, want het is gewoon veel minder goed te lezen dan de zwarte tekst.

Wat je ook nog kan doen om het nog duidelijker te maken, en dat hebben ze hier bij offerte.today bijvoorbeeld wel goed gedaan, is dat ze de kleur wisselen tussen de vragen door.

Hier is het iets donkerder, hier is het weer wat lichter, hier wat donkerder, iets lichter, zodat je nog duidelijker ziet wat de specifieke vragen zijn die aan jou gesteld worden.

Ook dat kan een optie zijn om het nog iets duidelijker te maken wat je precies moet invullen en wat bij elkaar hoort.

Call To Action Kleuren

Wat betreft het kleurgebruik van je call to action, de knop onderaan, in dit geval “ontvang offertes”, maar wat ik net bij Coolblue liet zien is het “verder”: zorg ervoor dat die altijd een heel scherp contrast heeft met de rest van de pagina.

Hier is de knop knalgroen, ten opzichte van oranje en een blauwe pagina.

Als je het hebt over kleuren die eigenlijk altijd wel goed werken en een goede conversie hebben, dan zou ik vooral denken aan de kleur groen, de kleur rood, en hier zie je ook weer groen.

Dat zijn eigenlijk een beetje drie basiskleuren die over het algemeen wel goed converteren.

Maar nogmaals: voor jouw specifieke situatie is het moeilijk voor mij om dat zo te zeggen.

Witruimte

Naast je kleuren moet je ook zorgen voor voldoende witruimte in je formulier.

Daar bedoel ik mee: de ruimte die eigenlijk tussen de verschillende velden in zit.

Hier zie je dat dat er heel rustig en overzichtelijk uitziet, omdat overal voldoende witruimte tussen zit.

Als ik weer die van Offerte Today pak zie je het ook: er is voldoende witruimte tussen de velden, maar ook hier omheen, zodat het heel duidelijk is.

Mijn aandacht gaat naar dit stuk uit. Ik heb verder weinig afleiding.

Je hebt die witruimte namelijk nodig om de aandacht van de bezoeker geconcentreerd te houden op het naar beneden gaan in het formulier en dit stuk voor stuk in te vullen.

Wanneer er weinig witruimte is en er rondom het formulier te veel staat, stel je voor dat hier nog iets staat en hier staat nog iets en hier staat nog iets, dat kunnen navigatie elementen zijn van deze pagina weg of andere afleiding, dan kan ik mijn concentratie niet houden bij het invullen van het formulier.

Dat is wat je wel wilt.

Dus witruimte tussen de velden en aan de zijkanten speelt een cruciale rol bij een goed converterend formulier.

Witruimte op Mobiel en Tablet

Nu is dit nog op de desktop en daar kan ik nog dingen aanklikken met mijn muis, maar zeker als ik bijvoorbeeld naar een formulier ga op mijn mobiel of op mijn tablet, waarbij ik met mijn vingers moet drukken, en vergis je niet: sommige vingers zijn wat dikker dan de andere, als je dan niet genoeg witruimte hebt, dan zit je de hele tijd dubbele vakjes aan te klikken.

Dit is eigenlijk bijvoorbeeld al iets: het zou mooi zijn als hier iets meer witruimte tussen zit.

Hier krijg je dat bijvoorbeeld ook. Als ik met mijn vinger hierop moet klikken, dan is dit heel weinig ruimte tussen die verschillende opties.

Dat kan een probleem vormen voor mij als gebruiker, omdat simpelweg gewoon de dikte van mijn vinger daar in de weg zit.

Zorg echt voor voldoende witruimte, zodat ook op mobiel en op tablet je website of webshop goed functioneert.

1 of Meerderen Kolommen?

Een derde belangrijk punt is de vraag: hoeveel kolommen zijn er op je pagina te zien?

Als ik hier weer het checkout proces van Coolblue heb, dan heb ik maar één actieve kolom. Met hiernaast een stukje uitleg daarvoor.

Ik heb één kolom met uitleg en één kolom met dingen die ik in kan vullen. Dat werkt doorgaans het beste.

Nou heb je ook veel bij webshops deze vorm en dat is dat je eigenlijk drie kolommen hebt, dus deze, die en die.

Het is niet per definitie zo dat één kolom beter werkt dan twee of drie kolommen, maar meestal wel.

De reden daarvoor is  eigenlijk weer net als bij het vorige punt, bij het gebruik van goede witruimte, je kan namelijk in één keer zo naar beneden lezen, naar beneden scrollen zonder dat je aandacht eigenlijk hier vandaan weer daarheen moet gaan en weer daarheen moet gaan.

Het gedrag wat ik moet doen als bezoeker is veel gemakkelijker door gewoon simpelweg naar beneden te scrollen dan dat ik weer omhoog moet en weer omhoog moet. Nogmaals: het werkt niet per definitie beter, maar als je een keuze moet maken: kies er dan voor om één kolom te doen.

Als je het wel wilt opdelen in drie stukken, ga dan in plaats van naar de tweede kolom gewoon naar de volgende pagina met een knop, zodat je weer één kolom kan hebben.

SEOshop probeert eigenlijk het beste van twee werelden te krijgen, namelijk er staan hier wel drie kolommen, maar wat ze hebben gedaan, is dat ze eigenlijk die eerste twee kolommen hebben ze wat vaag gehouden, zodat het duidelijk is dat je aandacht eerst hierheen moet.

Als je dit hebt ingevuld, dan wordt deze actief en dan zie je dat je aandacht daarheen moet gaan.

Op die manier probeert SEOshop eigenlijk het beste van twee werelden: wel alles in één keer op je scherm, maar het is wel duidelijk wat ik eerst moet invullen.

Dit is een hele goede manier die waarschijnlijk heel erg goed converteert.

Naast het gebruik van kolommen kan je ook jouw formulier opdelen.

In een check-out proces zie je al vaak dat het is opgedeeld als volgt: je hebt één tabblad waar je gegevens invult, je hebt één tabblad waar je je betaalwijze invult, daarna ga je naar een overzichtspagina.

Groepering Invoervelden

Voor de meeste check-out processen is die opdeling al best goed gebeurd. Maar bij een offerteformulier speelt dat ook een belangrijke rol.

Namelijk: staan gegevens op een logische en duidelijke manier gegroepeerd?

Bijvoorbeeld: staan hier al mijn contactgegevens als eerste bij elkaar? Want dat is logisch.

In dit geval wel.

Ik ga hier een offerte aanvragen voor een auto, dus dan zou je verwachten dat je autogegevens, dus je kenteken, kilometerstand, dat die ook bij elkaar staan.

Dat staan ze ook.

Dan komt hier alleen opeens een vraag over betalingen tussendoor en dan staat er daarna weer een vraag over de auto’s.

Dat is niet helemaal logisch, dus wat je eigenlijk wilt, is dat je deze vraag hierbij wilt zetten, zodat je het kan groeperen op contactgegevens, vragen over de auto en dat je deze apart hebt met vragen over betalingen.

Zorg ervoor dat je je formulier zo logisch mogelijk opdeelt.

Offerte.nl heeft dat slim gedaan.

Die hebben het hier eerst over de regio, de regio waar iets moet gebeuren.

Vervolgens willen ze dat je je opdracht specificeert en dan staan daar alle keuzes duidelijk weergegeven.

Als laatste hebben ze het over je contactgegevens.

Een hele goede manier van doen.

Dus kijk goed: welke velden moeten mensen bij mij invullen en zorg ervoor dat je dat opdeelt op een zo logisch mogelijke manier.

Daarbij moet je wel opletten met het aantal keuzes wat je iemand geeft.

Want hier staat bijvoorbeeld het veld “type woning”. En ik heb daar vijf keuzes.

Dat is op zich prima.

Vijf keuzes tot maximaal zeven keuzes, dat is nog te doen voor een bezoeker.

Dat is makkelijk te verwerken.

Hij leest weer in één keer naar beneden, vervolgens kiest ‘ie hier wat van toepassing is en hij gaat verder.

Maar wat gebeurt er als je iemand veel meer keuzes geeft: dan ga je namelijk één heel groot blok tekst krijgen waar eigenlijk niet doorheen te komen is.

Ik zal hier een voorbeeld geven.

Bijvoorbeeld hier. Ik ga hier een offerte aanvragen en dan staat hier: “ik wil een offerte voor” en hier een hele waslijst met allerlei mogelijkheden.

Als je dit ziet, is het één groot blok, er is geen doorkomen aan.

Dus deel je keuzes op.

Ik zie hier bijvoorbeeld een aantal keuzes over iets oprichten.

Splits die.

Ik zie hier een aantal dingen over samenleven: splits die ook op.

Ik zie hier iets over voorwaarden: splits die ook op.

Zorg ervoor dat je dit stuk opsplitst in logische segmenten met maximaal zeven keuzes en het liefst drie of vijf, dat is het meest overzichtelijk.

Op die manier kan ik als bezoeker veel duidelijker door je offerte heen gaan, door de aanvraag heen gaan. Dat is veel makkelijker voor mij om het juiste aan te klikken.

Er verandert eigenlijk niks aan de inhoud, het enige is dat het design er gewoon beter uitziet en dat maakt het beter voor mij om er doorheen te gaan.

De opdeling die je eigenlijk het meeste tegenkomt is dat je in eerste instantie NAW-gegevens invult, daarna heb je meestal informatie over bijvoorbeeld het product, en in een webshop heb je meestal de productinformatie al ingevuld, dan heb je daarna een kopje met overige informatie.

Stel dat je een berekening hebt, kan je die ook nog toevoegen.

Dus die specifieke opdeling, afsluitend met een vragen- of opmerkingenveld, dat is een opdeling die je vaak tegenkomt en die werkt over het algemeen ook goed.

Zolang je designtechnisch duidelijk maakt dat dit allemaal aparte blokken zijn. En als je die opdeling maakt, zorg er dan ook voor dat je de informatie die iemand het makkelijkste in kan vullen als eerste doet.

NAW-gegevens bijvoorbeeld zijn altijd makkelijk in te vullen, want ik weet hoe ik heet, ik weet mijn adres, ik weet mijn postcode.

Maar wat ik misschien niet precies weet, is welke van deze opties moet ik precies gaan kiezen. Daar moet ik over na gaan denken. Plaats je makkelijkste opties als eerst en naarmate het formulier vordert steeds moeilijker opties.

In onze video over psychologische effecten die je kan toepassen ga ik precies uitleggen hoe dat zit. Maar neem even als vuistregel als je iets gaat ontwerpen: makkelijk eerst en maak het steeds moeilijker.

Soorten Formulier Invoervelden en Keuzes

Dan wil ik het hebben over de verschillende keuzes die je eigenlijk hebt als je een offerteformulier gaat ontwerpen. En daar bedoel ik mee: wat voor soort mogelijkheden kan ik een bezoeker eigenlijk bieden.

Tekstvakken

Allereerst kan je mensen een invoerveld, een tekstvak geven. Tekstvakken zijn ook over het algemeen wel bij iedereen bekend. Hier kan je gewoon wat schrijven.

Er zijn nog allerlei manieren waarop je kan controleren dat wat er in moet worden gevuld, dat dat ook echt klopt, maar daar gaan we het in de technische video over hebben.

Radiobuttons

Daarnaast hebben we radiobuttons met een mooi woord. Een radiobutton is: ik heb keuze uit meerdere opties, maar ik kan er maar één selecteren.

In dit geval “de heer” of “mevrouw”.

Je kan maar één van de twee kiezen.

Checkboxes

Dan hebben we hier nog de checkboxen. Bij de checkboxen kan ik er meerdere van aanklikken.

Hier kan ik meerdere opties van aanklikken.

Sliders

Dan hebben we nog een slider.

Een slider is als het ware een balkje die je heen en weer kan schuiven om iets aan te geven. Die kan ik zo heen en weer doen en dan neemt een bedrag in dit geval toe of af.

Ik kan het ook gewoon hier zo kan typen.

Agenda

Dan gaan we van de slider door naar de agenda.

Dus hier kan je een jaartal selecteren en een datum invoeren.

Dat is nog een specifiek stukje.

Dropdown Keuzelijst

Als je meerdere keuzes hebt, heb je dus naast de checkboxen en de radiobuttons ook een dropdownbox om iets te kiezen.

Bestand Uploaden

Als laatste hebben we nog de mogelijkheid om een bestand te uploaden.

In dit formulier bijvoorbeeld kan je zien dat je hier een bestand in kan voeren.

Als het enigszins te lezen is.

Je ziet hier ook weer: gebruik alsjeblieft geen donkere kleur met een witte tekst.

Doe het alsjeblieft andersom.

Dat zijn de opties die je hebt.

Vermijd een Dropdown Keuze indien Mogelijk

Nou is er één heel belangrijk en dat is namelijk: als je de bezoeker de keuze geeft of als een bezoeker moet kiezen uit meerdere opties, gebruik dan nooit een dropdown. Omdat het eigenlijk een extra handeling is.

Ik heb hier de burgerlijke staat en dan kan ik kiezen uit één, twee, drie, vier opties.

Maar ik moet eerst op deze knop klikken voordat ik die opties pas zie.

Op het moment dat je van die vier opties radiobuttons maakt en ze hier onder elkaar zet, dan wordt het formulier misschien wel iets langer, maar ik kan mijn aandacht simpel naar beneden houden.

Ik klik hier aan wat van toepassing is en ik ga verder.

Hoewel het wel het formulier langer maakt, kost het mij minder moeite om dit in te vullen.

Als je iemand keuzes aanbiedt, biedt ‘m of een radiobutton aan als het gaat om meerdere keuzes waarvan je er maar één mag kiezen en biedt ‘m een checkbox aan als je keuzes hebt waarvan je er meerdere mag selecteren.

Probeer een dropdownbox eigenlijk altijd te vermijden. De enige uitzondering daarop misschien is de optie om je land te selecteren, omdat dat er zo ongelofelijk veel kunnen zijn. Maar dan nog steeds kan je bijvoorbeeld zeggen: ik zet als checkbox of als radiobutton bovenaan Nederland en België, want 99% van mijn klanten komen daaruit, en zo niet, dan kunnen ze een dropdownbox selecteren om een ander land aan te klikken.

Gebruik dropdownboxen niet, gebruik radiobuttons en checkboxen.

Zorg er wel voor dat de keuzes die je geeft eigenlijk altijd onder elkaar komen, verticaal.

Niet horizontaal zoals je in dit formulier ziet.

Dat zijn kleine dingen, maar waarom is dat zo belangrijk in je design?

Omdat je wilt dat die aandacht zo naar beneden gaat. Nu gaat de aandacht zo en dan moet ik weer zo nadenken en dan moet ik weer teruggaan.

Dus dat is eigenlijk wat je niet wilt.

We kunnen dit formulier hier verbeteren door deze drie bijvoorbeeld, deze halen we weg. Daarna krijgen we geslacht en ook die zetten we onder elkaar. We krijgen burgerlijke staat, daar maken ze radiobuttons van onder elkaar.

Zodat ik alleen maar naar beneden hoef te kijken. Ik vink aan wat van toepassing is en ik kan zo snel mogelijk door. Het kost me zo min mogelijk moeite om het te zien en om het te verwerken. En dat is wat we uiteindelijk willen.

Formaat Invoerveld in Proportie met het Antwoord

Wat daarnaast heel erg belangrijk is bij de invoervelden, is dat het formaat van het invoerveld in proportie is met het antwoord dat wij verwachten.

Hier zie je bijvoorbeeld dat dat op die formulier goed is toegepast.

Voorletters, dat zijn er één, twee of drie.

Dus wat wil je? Je wilt hier dat mensen zien: “B.F.T.”.

Dat zijn bijvoorbeeld mijn voorletters. En mijn tussenvoegsel is bijvoorbeeld “van de”.

Dat kan gewoon niet veel langer zijn.

Stel dat die voorletters-formulier tekstvak zo groot is, dan krijg ik daarmee de indruk dat ik heel veel moet invullen.

Vooral onbewust denk ik dan dat hier iets heel groots moet worden ingevuld, terwijl dat helemaal niet hoeft.

Zorg in je design dat je invoervelden in proportie zijn met wat je verwacht dat er wordt ingevuld.

Een veel gemaakte fout waarbij dat gebeurt, is bijvoorbeeld het opmerkingenveld.

Hier heb ik bijvoorbeeld Conrad en het opmerkingenveld is hier relatief klein.

Als ik hier zo begin met typen, is dat redelijk overzichtelijk.

Als je dat vergelijkt met de volgende website, offertetoday, dan is deze nog kleiner.

Dus voor mijn gevoel hoef ik hier minder in te vullen dan hier.

Wat veel mensen dus fout doen, is dat ze het opmerkingenveld heel groot maken, zoals deze.

Ik pak ‘m er even bij.

Hier zie je bijvoorbeeld een heel groot en langgerekt opmerkingen- of suggestieveld.

Wat bij mij dus de indruk wekt dat ik hier een heel verhaal moet gaan typen.

Zeker een opmerkingenveld waarbij ik geen makkelijke keuzes heb waarbij ik dat allemaal zelf moet gaan bedenken is heel veel moeite. Is niet de bedoeling.

Zorg ervoor dat je velden in proportie zijn tot het antwoord wat jij daar wilt of wat je daar verwacht.

Problemen Bestand Uploaden Velden

Bij je bestand-uploaden-pagina loop je eigenlijk ook vaak tegen een probleem aan. Hier bijvoorbeeld heb ik een formulier gevonden waar je dus een bestand kan uploaden.

Het grote probleem hiermee is dat je dus vaak niet weet: wat wordt er verwacht.

Welk formaat moet het bestand zijn, hoeveel KB of MB kan ik hier maximaal kwijt, welke soort extensie kan ik hier kwijt, is het .jpg afbeelding, is het .pmg?

Moet ik een pdf-bestand hier uploaden? Moet ik een Word-document uploaden? Wat verwacht je precies hier van mij?

Als je bestanden wilt laten uploaden in je formulier, houd er in je design rekening mee dat je ergens uitleg geeft over wat er precies van je verwacht wordt.

Veld Instant Validation

Zorg er tijdens je ontwerpen ook voor dat je er rekening mee houdt dat je formulier geactiveerd wordt op het moment dat er gebruik van gemaakt wordt. Als ik hier bijvoorbeeld mijn naam invul, Bart van der Meer, kijk, dan krijg ik hier een groen vinkje.

Tijdens de technieksessie gaan we precies doornemen hoe dat allemaal werkt, maar houd er rekening mee dat als je een veld nog niet hebt ingevuld, op het moment dat je erin aan het typen bent en op het moment dat je ‘m goed hebt ingevuld, dat je een feedback iets geeft aan de bezoeker om duidelijk te maken of dat goed is of niet waar ‘ie mee bezig is.

Houd er rekening mee dat je bijvoorbeeld andere kleuren gebruikt of dat je een icoontje gebruikt, maar dat je iets doet om die bezoeker te laten weten dat het goed gaat.

Velden Contextueel Invoegen

Wat je ook kan doen, en dat is een hele goede om je formulier zo kort en moeiteloos mogelijk te houden, is dat je pas velden gaat invoegen op het moment dat dat relevant is.

Ik heb hier bijvoorbeeld een offerteformulier.

Je kan hier zien: ze vragen om de gewenste oppervlakte en de gewenste lengte- en breedtematen en of ik een vloer wil of niet.

Op het moment dat ik nu klik op feesten en evenementen, dan komt er hier een optie bij, of ik weet hoeveel mensen ik verwacht.

Als ik deze nu uit klik, verdwijnt ‘ie weer. Als ik nu iets voor tijdelijke huisvesting wil, verschijnt het niet, want blijkbaar is het voor die tijdelijke huisvesting niet relevant, maar voor feesten en evenementen wel.

Op die manier houd je je formulier zo kort mogelijk zonder dat je relevante informatie mist.

Ga na bij jouw formulier: is er informatie die ik misschien kan verbergen en pas duidelijk kan maken als er een bepaalde keuze is gemaakt door de bezoeker.

Actief Veld + Niet in te Vullen Velden

Tenslotte is nog belangrijk om te weten van je invoervelden, dat je ook velden hebt die niet actief zijn of op dit moment niet actief zijn.

Hier bij bol.com zie ik bijvoorbeeld dat ik op dit moment nog geen ophaalpunt kan selecteren.

Dat is voor mij heel duidelijk.

Dit is actief, daar hebben ze een hele slimme, blauwe kleur om gegeven, zodat ik precies weet wat nu actief is, waar ik mee bezig ben (het laten bezorgen gedeelte).

Daardoor is het voor mij ook duidelijk dat dit grijze gebied, dat ik dat niet kan invullen.

Het kan bijvoorbeeld ook zo zijn als ik een postcode en een huisnummer invoeg, dat die automatisch mijn straatnaam laat zien, maar dat ik die straatnaam niet kan wijzigen.

Dat doen ze heel makkelijk door ‘m eigenlijk zo grijs te tonen. Dus als je informatie hebt die je wel wilt tonen, maar waar een bezoeker niks mee kan of hoort te doen, maak die dan op een duidelijke manier onderscheidend van de rest. En meestal is dat door ‘m wat simpeler of wat grijziger te maken.

Effectief Gebruik Labels

Dan is het volgende hele belangrijke punt wat ongelofelijk vaak fout gaat. Het gebruik van labels. Een label is het volgende: een label is een stukje tekst wat iets vertelt over een veld.

In dit geval is het label voornaam.

en dat maakt duidelijk dat in dit vakje ik mijn voornaam moet plaatsen.

Hier staat land, dus dat maakt duidelijk dat ik hier mijn land moet selecteren.

Dan zijn er twee manieren om een label te plaatsen en dat zijn de volgende: een label ergens naast plaatsen.

Dus hier zie je dat dit label beschrijft wat er in dit vakje moet.

En je kan een label erboven plaatsen en dat kan je hier zien.

Daar kan je zien dat dit label beschrijft wat er in het vakje daaronder moet. Wederom: als we gaan denken over de moeite die en bezoeker moet doen, dan werkt altijd het beste om het op deze manier te doen.

Namelijk eerst het label en dan het veld.

Want waarom: de bezoeker is zo aan het lezen en die kan zo blijven lezen.

Steeds verder naar beneden. Kost het minste moeite.

Want wat doet ‘ie namelijk bij het andere veld: daar zit ‘ie namelijk de hele tijd dit te doen: poink, poink.

Hij moet de hele tijd zo gaan lezen.

En geloof het of niet, dat kost onbewust veel meer energie dan simpelweg zo naar beneden te lezen.

Dus plaats labels altijd boven je invoerveld.

Dit is de juiste manier van je labels toepassen boven een veld, namelijk hij zit kort op het invoerveld en dan heb ik hier een heel stuk witruimte en dan komt het volgende veld pas weer.

Dat is hoe je het wilt hebben.

Wat je anders namelijk krijgt, is dat je een invoerveld hebt, een label, een invoerveld, een label, een invoerveld, en dan is het onduidelijk of dit label nu bij het invoerveld erboven of eronder hoort.

Zorg dat je je labels kort op je invoerveld hebt, zodat er geen enkele misvatting is over wat bij elkaar hoort.

Schrijf ook je labels niet in caps lock volledig, gebruik niet volledig hoofdletters. Gewoon eerste letters een hoofdletter en daarna kleine letters. Dat is het makkelijkste om te lezen en het duidelijkste voor iedereen.

Effectief Gebruik Placeholders

Dan gaan we van de labels verder naar de placeholders.

Ook een duidelijk onderdeel van het formulier, of dat kan in elk geval.

Maar wel een verschil met de labels waar we het net over hebben.

Het is een stukje tekst wat in het veld staat voordat ik het aanklik en begin met typen.

Dat moet je helpen om te begrijpen wat je daar in moet vullen.

Dit is dus een verkeerd gebruik wat je hier ziet van placeholders.

Want hoe moet het eigenlijk zijn: boven dit vakje moet staan voornaam en hier moet staan bijvoorbeeld Bart.

Dit moet de placeholder zijn.

Want dit helpt mij om te begrijpen wat ik in dat vakje moet invullen.

Dus niet een label (beschrijving), maar een concreet voorbeeld. Dat is wat je wilt zien.

Een placeholder is er om duidelijkheid te verschaffen en niet als enige om uit te leggen wat je daar moet invullen.

Technische Problemen Placeholders

Er zijn wel een paar potentiële problemen met placeholders. Een probleem met een placeholder kan namelijk zijn dat mensen denken dat het invoerveld al is ingevuld.

Dat zie je bijvoorbeeld wanneer je een tijd moet invullen en daar staat dan al een tijd ingevuld als placeholder.

Daardoor denken mensen dat er al een tijd ingevuld staat.

Dus als je een placeholder plaatst, zorg er dan altijd voor dat het duidelijk is dat er niet al iets is ingevuld.

Placeholder Verwijderen

Een tweede probleem wat kan voorkomen, maar dat is een technisch stukje, is dat de placeholder die ingevuld is, dat je die eerst moet verwijderen voordat je iets nieuws kan gaan tikken.

Heel erg irritant. Ik kon zo gauw even geen voorbeeld geven, maar zorg ervoor dat dat niet het geval is.

In onze video over techniek gaan we dat nog even extra benadrukken en vertellen hoe je dat weg kan halen.

Aangeven van Stappen in Formulier

Een stukje wat soms kan helpen is je stappen of je categorieën van je formulier aan te duiden met een getal of met iets opvallends.

In dit formulier staat bijvoorbeeld: “1. Wat voor soort tent zoekt u?”. “2. Voor welke periode wil je ‘m gebruiken?”.

Dan gaan we verder naar 3: in welke plaats of stad. 4: contactgegevens. Heeft u nog vragen of opmerkingen.

Die stappen kunnen een bezoeker helpen om duidelijk te maken hoe ‘ie door het formulier moet navigeren.

Het kan soms helpen, niet altijd, en dat is puur afhankelijk van jouw website, dus dat is echt iets wat je moet gaan testen.

Font en Letter Formaat

Het volgende belangrijke punt om rekening mee te houden in je design, dat zijn het formaat van de letters en het font dat je gebruikt.

Nou is er niet één specifiek font dat altijd het beste werkt, dat je Arial moet gebruiken of een ander font.

Het belangrijkste is dat het font duidelijk is voor bezoekers.

Geen Comic Sans of geen ander grappig font wat leuk eruit ziet, het gaat erom dat het duidelijk is.

Op het hele formulier, dus hier zie je bijvoorbeeld dat er twee verschillende lettertypes zijn gebruikt, doe dat niet.

Gebruik één lettertype door het hele formulier heen. En zorg ervoor dat de tekst groot genoeg is.

Het is een hardnekkig probleem dat er te kleine teksten worden gebruikt op websites.

Houd als regel in gedachten dat je tenminste 16 pixels gebruikt. Dat zorgt er namelijk ook voor dat wanneer je een website opent op je mobiele telefoon, zoals hier, dat het goed en makkelijk leesbaar is.

16 pixels is meestal het ideale formaat daarvoor.

Visuele Elementen in Formulier

Het andere element dat je kan gebruiken in je design, dat is het gebruik van visuele elementen in je formulier.

Let wel op als je visuele elementen gaat gebruiken, dus bijvoorbeeld een afbeelding of zoals bol hier het winkelmandje toont.

Dat is altijd gevaarlijk, want je moet altijd zorgen dat het niet gaat afleiden van het formulier dat ze aan het invullen zijn.

Als je het goed gebruikt, kan een visueel iets kan je helpen dat mensen sneller en makkelijker je formulier invullen.

Waar moet je aan denken bij visualisatie?

Eén is: je kan net als bol.com de producten of de diensten waarvoor jij een offerte aan het aanvragen bent kan je tonen, zodat mensen in gedachten houden: oh ja, daar ben ik voor bezig, dat ding wil ik graag hebben, en dat ze daarmee meer gemotiveerd zijn om het formulier in te vullen.

Wat je ook kan doen, is dat je visuele elementen, dus afbeeldingen of video’s of het gebruik van pijlen kan gebruiken om mensen gerust te stellen en te motiveren om door te gaan.

Hier heb ik vooral een voorbeeld hoe het niet moet.

Hier bij het formulier staan aan de zijkanten allerlei visuele elementen die niks met mijn offerte te maken hebben en die heel erg afleiden, heel erg de aandacht naar zich toe trekken.

Los van het feit dat dit op zijn zachts gezegd niet het beste offerteformulier ooit is, is dat wat je niet wilt hebben.

Je wilt geen afleiding hebben.

Wat je wel wilt hebben, dan zijn versterkers.

Daar heb ik ook een goed voorbeeld van. Als je naar deze website kijkt.

Die hebben hier aan de rechterkant een oplevergarantie en die hebben contactinformatie en een e-mailadres voor als je vragen hebt.

Dat kan een prima stuk van visualisatie zijn wat helpt.

Ook bij dit formulier zie je bijvoorbeeld aan de linkerkant hun sterke punten, de certificeringen, een stukje social proof, hulp nodig, dus telefoonnummer.

Je kan hier ook denken aan reviews of recensies.

Maar dingen die niet per se afleiden, die niks vragen, waar je eigenlijk het liefst ook niet op kan klikken, maar die wel versterken wat hier al staat.

Eventueel ook het gebruik van pijlen, ik zit ze nu ook in te tekenen.

Die kan je gebruiken om mensen aan te tonen waar ze bij het formulier moeten beginnen of van mijn part een pijl die meebeweegt, zodat je kan zien wat is het volgende wat ik moet invullen.

Pijlen kunnen mensen ook helpen om makkelijk door de navigatie heen te gaan.

Specifiek van pijlen is het zo dat als we een pijl zien, ongeacht waar ‘ie precies heen gaat en ik zal het demonstreren, want wat je ook precies aan het doen bent, je gaat mijn streep nu volgen en je bent heel erg benieuwd waar ik nu met die pijl heen ga.

Dat gebeurt eigenlijk onbewust.

Pijlen kan je heel goed gebruiken om mensen ergens heen te sturen, bijvoorbeeld naar het volgende veld dat ze moeten invullen.

Nogmaals: pas wel op met visualisatie. Zorg ervoor dat je het zo gebruikt zodat het wel versterkt, maar dat het niet afleidt of dat het ervoor zorgt dat je wegklikt.

Navigatie Website Verwijderen

Nog een heel erg belangrijk punt, dat is de navigatie die wel of niet op de pagina aanwezig is.

Dat kan je bij alle eigenlijk alle grote webshops zien en eigenlijk goed geoptimaliseerde websites, dat zo’n beetje elke vorm van navigatie, op hier een paar dingetjes na, en misschien het logo na, is eigenlijk verdwenen.

Ik kan niet zo makkelijk meer teruggaan naar de vorige pagina, weer terug de webshop in of terug de website in.

Dat is heel bewust.

Want de enige navigatie die ik hier voornamelijk zie is eigenlijk deze en die navigatie is bedoeld om mij door dat mandje heen te brengen. Of door het proces heen te brengen.

Verwijder al je navigatie van je beeldscherm. Want als iemand eenmaal op je offerte-aanvragenpagina zit en hij heeft besloten dat ‘ie dat wil doen, dan moet je ‘m zo gemotiveerd mogelijk houden en één van de manieren is om de verleiding weg te halen dat ‘ie weg gaat klikken.

Haal je navigatie allemaal weg.

Als je dat niet doet, dan kan je bijvoorbeeld in de situatie komen van wat ik net liet zien en dat is dat je hier allerlei manieren hebt om weg te gaan bij al die moeite die ik hier moet doen en weer wat leuks aan te klikken.

Dat is gewoon wat we niet willen hebben.

Ook social media knoppen, haal ze alsjeblieft weg.

Ontwerp Call To Action (CTA) Knop

Dan hebben we het ontwerp van de call to action. We hebben het er al kort over gehad.

De call to action, dat is de grote knop die onderaan staat die er óf voor zorgt dat je een bestelling plaatst óf het is de knop die ervoor zorgt dat je verder gaat in het proces, de knop die zorgt dat je een offerte aanvraagt.

Zorg ervoor dat die opvallend is, dat die contrast heeft en dat die eigenlijk door de hele site hetzelfde is, dat is de knop die je verder brengt in het proces. Zorg er ook voor dat die in je formulier op een logische plek zit.

Dus als dit mijn formulier is dat ik zo invul, dan wil ik die knop dus hier hebben of net als bij Coolblue hier aan de zijkant.

Ik wil die knop dus absoluut niet links hebben, hier hebben, wat allemaal niet logisch is. Want iemand is bezig om op een logische en moeiteloze manier door het formulier heen te gaan en de makkelijkste is recht naar beneden, dus zorg ervoor dat die knop daar staat.

Je kan er bijvoorbeeld voor kiezen om die knop gewoon wat groter te maken, zodat er geen enkele misvatting is over: wat is de volgende stap die ik moet nemen.

Als je per se een terugknop wilt hebben, doe het dan zoals Coolblue hier ook doet: houd het heel klein, heel beperkt en heel simpel en plaats die eigenlijk altijd aan de linkerkant.

Dus ook in je offertepagina: houd ‘m onopvallend als je ‘m al überhaupt erin wilt hebben.

Meest Conversie Dodende Formulier Knop: Reset of Annuleer Knop

Wat je absoluut niet wilt hebben in de buurt van je call to action, maar eigenlijk wil je dat hele ding niet op je formulier hebben, de meest conversie-dodende knop die je kan hebben en dat is dit.

Ik heb hier een formulier en wat zit er naast mijn aanvragenknop: een resetknop.

Als ik hierop klik, gaat alles wat ik net met pijn en moeite heb ingevuld, gaat weg.

Als er iets vervelend is, als er iets conversie-dodend is, is dat een reset- of een annuleer knop.

Haal deze alsjeblieft van elk formulier af wat je maar hebt.

Niet in je winkelmandje, niet bij een offerte aanvragen.

Een reset- of een volledige annuleer knop wil je echt nooit hebben.

Als je ‘m dan per se wilt, om redenen die ik niet begrijp, zet ‘m dan niet naast je call to action knop. Zodat mensen er niet per ongeluk op kunnen klikken.

Plaats ‘m dan heel ergens anders, bijvoorbeeld helemaal bovenaan of hier ergens onderaan, los van het formulier.

Maar plaats alsjeblieft niet je call to action en je reset knop naast elkaar. Dat is mega frustrerend voor bezoekers die gegarandeerd per ongeluk een keer hierop klikken en dit kost je ongelofelijk veel conversies.

Verhalend Offerte Formulier

Een leuke manier om je offerteformulier te verbeteren, dit kan eigenlijk niet bij een winkelmandje, maar alleen bij een offerteformulier, en niet eens bij alle formulieren, maar bij sommige, dus je mag zelf bepalen of dat bij jou past, is om een verhaal te maken van jouw formulier.

Niet simpelweg de vakjes en vul maar in, maar je maakt er eigenlijk een lopend verhaal van wat ervoor zorgt dat het iets makkelijker te verwerken is voor een bezoeker.

Ik zal hier nu eigenlijk een voorbeeld geven waarin ik een bestaand formulier omzet tot een verhaaltje.

Offerteformulier van Aannemersbedrijf Rockanje.

En die heb ik aan de linkerkant hier gewijzigd in een verhaaltje.

We hebben de

[list type=”list-type2″ title=””]

• titel
• omschrijving van de klus
• postcode
• wanneer zij aan de slag moeten gaan
• telefoonnummer
• e-mailadres

[/list]

Persoonlijk vind ik het een beetje apart dat er geen naam bij staat, maar goed.

Die heb ik hier veranderd in een verhaaltje.

Ik maak ervan:

---

Hoi, Aannemersbedrijf Rockanje.

Mijn naamis [naam] en ik wil graag een offerte aanvragen.

Ik ben namelijk bezig met mijn [ruimte] en daarvoor wil ik dat jullie deze [activiteit invullen] Dit moet gebeuren op postcode [postcode]en het liefst heb ik dat jullie starten op [datum].

Als er vragen zijn, kan je me bereiken op telefoonnummer [telefoonnummer] die en kan je de offerte sturen naar [e-mailadres].

Ik zie de offerte graag tegemoet.

---

Dat staat een stuk vriendelijker, een stuk leuker dan het simpele formulier wat hier staat.

Op die manier kan je het wat leuker, wat makkelijker maken voor iemand om het formulier in te vullen.

Tegelijkertijd vertel je iemand veel duidelijker wat ‘ie precies moet invullen hier.

Ook dat kan helpen.

Het is hier wel belangrijk om te weten dat: dit moet je echt testen of het werkt.

Het zal zeker niet voor elke branche en voor elk bedrijf werken.

Maar het is de moeite waard, want als het wel werkt, werkt het namelijk heel goed en is het heel effectief.

Omringende Elementen

Dan is het nog echt cruciaal om tijdens het designen rekening te houden met de omringende elementen die er op jouw website komen.

Ik heb het er net al kort over gehad, maar we gaan er nu even diep in, dus we gaan even punt voor punt doorlopen wat omringende elementen kunnen zijn en los van hoe je er precies invulling aan geeft, moet je er met designen echt rekening mee houden.

Inleidende Tekst Formulier

Het eerste waar je echt rekening mee moet houden is dat op een offerteformulier er eigenlijk altijd een context is en een korte inleiding naar het formulier toe.

Dat raad ik ook aan, want dat werkt conversieverhogend.

Zorg ervoor dat je ruimte hebt voor een titel en een inleiding.

In sommige gevallen heeft het zin om ook tekst eronder te plaatsen, maar dat verschilt sterk per branche, dat is niet altijd zinvol. Sterker nog: meestal niet.

Maar vooral: context erboven en een inleiding die iets over het formulier uitlegt.

Elementen Zijkant

Daarnaast kan je allerlei visuele elementen aan de zijkant hebben, waar we het al eerder over hebben gehad.

Een stukje over

[list type=”list-type2″ title=””]

• hulp nodig?
• telefoonnummer
• USPS
• certificeringen

[/list]

Bedenk goed: wil ik hier bijvoorbeeld een sidebar maken of wil ik op andere plekken (boven of onder) andere visuele elementen hebben.

Zorg ervoor dat je in je design daar heel goed rekening mee houdt, dat er voldoende witruimte is zodat je dat kwijt kan en ook eventueel kan wijzigen.

Zeker bij het gebruik van foto’s of logo’s is het belangrijk dat het allemaal goed uitlijnt.

Als je een berekenaar aan de zijkant wil hebben, dan is het helemaal cruciaal.

Het belangrijkste daaraan is namelijk dat je niet wilt dat die berekenaar afleidt.

Ik moest even zoeken, maar hier heb ik een voorbeeld gevonden van Freo en dan zie je hier aan de rechterkant een berekenaar.

Het is belangrijk dat je er rekening mee houdt:

1. dat die er überhaupt is, maar

2. dat die ook goed werkt, op je desktop, maar ook op je tablet en je mobiel, want als ik deze site nu bekijk op mobiel, dan ziet het er als volgt uit.

Kijk, je ziet: die berekenaar heeft zich aangepast, zodat ‘ie onderin verschijnt, zodat ik ‘m kan openen, zodat ik ‘m weg kan klappen.

Hier is goed over nagedacht. Dus als je aan het designen bent, houd er rekening mee: welke elementen moeten er eigenlijk rondom het formulier komen die heel erg belangrijk zijn en zorg ervoor dat daar voldoende ruimte voor is en dat het niet afleidt, maar dat het ondersteunt aan het formulier.

Tooltips

Een heel erg specifiek element, en die zie ik bij Coolblue bijvoorbeeld terugkomen, dat is namelijk de tooltip.

En de tooltip, dat is dit kleine vraagtekentje wat je hier ziet en die verstrekt extra informatie over het veld.

Als ik daarop klik, dan zie ik hier een referentie en dan krijg ik uitleg van wat dat inhoudt.

Heel erg nuttig om mensen op een makkelijke manier die niet in de weg zit extra info te geven, maar heel belangrijk dat je het goed implementeert.

Wat is goed: allereerst moet je niet simpele informatie die je kan geven weglaten en die in een tooltip stoppen.

Wat je bijvoorbeeld hier heel goed ziet: het wachtwoord, minimaal zes karakters, verder doen we niet moeilijk.

Dat is geen informatie die je hier achter je tooltip wilt zetten, want de kans dat mensen dit fout doen en daardoor opnieuw het moeten invullen en gefrustreerd raken, die kans is heel erg groot.

Bij je tooltip wil je alleen maar informatie geven die in de meeste gevallen die maar voor een bepaald deel voor de mensen is voor wie het niet helemaal duidelijk is.

Die informatie kan je hier bieden.

Stel dat je een berekening moet maken, dan kan je hier extra informatie over die berekening zetten.

Stel dat je denkt: waarom moet ik hier precies mijn telefoonnummer invullen bij een webshop, wat raar.

Oké, als je een vraag of opmerking hebt, laten we dat persoonlijk weten.

Niet iedereen zal zich afvragen waarom het telefoonnummer hier moet, maar dat is wel belangrijk dat degenen die het willen weten het kunnen vinden.

Zo kan je tooltips op hele simpele, maar goede manieren inzetten om dingen duidelijker te maken voor de klant.

Wat daar wel een veelgemaakte fout bij is, is dat ‘ie wordt geïmplementeerd met een hoover, en dat betekent dat als ik erop ga staan, dat ‘ie dan verschijnt en anders niet.

Dat zorgt ervoor dat ‘ie op telefoon en op tablet niet bruikbaar is.

Wat je altijd wilt doen, is dat er een  vraagteken staat waar je op moet klikken en pas als je erop klikt, dat er informatie verschijnt met een duidelijk kruisje om ‘m af te sluiten.

Denk daarbij goed na: welke invoervelden zijn óf potentieel onduidelijk óf brengen een hoog level van stress met zich mee als in: ik moet iets persoonlijks afgeven, waarom moet ik dat doen, waarom wil je dit weten, want eigenlijk wil ik het niet afstaan.

Dus telefoonnummer, e-mailadres, wachtwoord zijn daar goede voorbeelden van.

Elke vorm van betaalgegevens kan daar een goed voorbeeld van zijn. Maar ook velden die misschien specifiek voor jouw branche zijn.

Zorg ervoor dat je daar een duidelijke uitleg geeft om die bezoeker gerust te stellen. In een notendop alle belangrijke elementen van een goed gedesigned formulier.

Specifieke Problematische Formulier Velden

Dan wil ik nog een paar hele specifieke velden doornemen die vaak in winkelwagentjes of in offerteformulieren voorkomen en die vaak fout geïmplementeerd worden.

Producten Verwijderen Winkelmandje

De eerste is dat je makkelijk producten kan verwijderen uit je winkelmandje. Even kijken. Dus wat je hier ziet is dat ik hier mijn aantallen heb en dat ik hier een kruisje heb om het hele product te verwijderen.

Wat je sowieso wil, net als met die resetknop, dit kruisje wil je niet in de buurt hebben van die aantallen.

Want het kan zo zijn dat ik per ongeluk hierop wil klikken, op het kruisje klik, het product kwijt ben en ja, dan moet ik het weer helemaal opnieuw gaan zoeken. Nou, laat maar zitten.

Sls je zo’n kruisje erin zet, zet ‘m bijvoorbeeld aan het eind en zorg dat ‘ie, dat hebben ze hier wel goed gedaan, niet opvalt.

Houd ‘m onopvallend.

Persoonlijk zou ik je aanraden om het kruisje helemaal niet erin te zetten, want je kan altijd een aantal op 0 zetten en we zijn hier om te zorgen dat ze op die knop drukken en niet dat ze producten eruit gaan halen.

Het verwijderknopje bij een winkelmandje, als je ‘m wilt hebben, zorg ervoor dat ‘ie niet opvalt, dat ‘ie helemaal op het eind bijvoorbeeld staat en dat ‘ie niet in de buurt staat van andere belangrijke elementen.

Kortingscode

Een tweede dingetje is een kortingscode.

En een kortingscode zorgt namelijk altijd voor bezoekers geeft het gevoel van stress.

En waarom dat zo is, is eigenlijk als volgt: ik ben dit product aan het kopen, daar betaal ik 90 euro voor, en ik zie een kortingscode.

En die kortingscode heb ik niet.

Dus denk ik: ja, ik word genaaid.

Want iedereen heeft een kortingscode, behalve ik.

Dus óf het gaat gebeuren dat ik denk: ik wacht wel totdat ik een kortingscode heb om het te kopen.

Misschien ga ik googelen op een kortingscode, dan voer ik die in en heb ik eigenlijk korting voor niks.

Dus die kortingscodevelden, die zorgen voor heel veel stress.

Probeer die zo klein mogelijk te houden.

Hier staat ‘ie vrij duidelijk in het scherm.

Ik zou persoonlijk zeggen: maak er bijvoorbeeld van: kortingscode met hier een klein plusje dat je uit kan klappen, en verwijder dit helemaal, zodat ‘ie gewoon minder ruimte in beslag neemt.

Sterker nog: je kan dit veld zelfs nog kleiner maken door het plusje hier te zetten en dan houd je het veld zo groot maar. Want kortingscode is echt een dodelijk stukje.

Bijwerken in Winkelmandje

Dan heb je ook nog de knop bijwerken.

Ik ben een veel grotere voorstander dat als je het aantal verandert, dat de prijzen meteen mee veranderen, maar ik weet dat dat technisch gezien niet in alle winkelmandjes kan.

Als je die knop hebt, zorg er wel voor dat die duidelijk is, zodat mensen niet het idee hebben van: hé, ik heb hier net van één heb ik net twee gemaakt en ik betaal nog steeds hetzelfde.

Als ze dan vervolgens bij bestelling afronden komen, gaan ze dan teleurgesteld worden.

Dus als die erin zit, zorg dan net als hier dat het een grote, duidelijke knop is waarvan mensen kunnen zien dat ze erop moeten klikken.

Je kan er zelfs voor kiezen dat als je een aantal gewijzigd hebt, dat er een melding komt: klik even op deze knop om je nieuwe prijzen te zien.

Landkeuze

Dan hebben we nog eentje die zowel bij offertes als bij webshops veel voorkomt en dat is namelijk de keuze van je land.

Dat je je land moet selecteren en vervolgens krijg je gewoon een lijst met alle landen van de wereld. Terwijl dat onzin is en als je naar Coolblue kijkt, die hebben dat heel slim gedaan: Nederland staat standaard aan, want 90% zetten ze waarschijnlijk af in Nederland, dat geldt voor de meeste bedrijven bij ons.

Eventueel kan je het ook in België laten bezorgen, zij doen het waarschijnlijk nergens anders.

Maar zelfs als je overal ter wereld dingen heen wilt sturen, zorg er dan wel voor dat bijvoorbeeld Nederland en België makkelijk en snel aan te klikken zijn en dat je niet het helemaal hoeft op te zoeken. Want de meeste omzet gaat toch hierheen en dat maakt het voor bezoekers veel makkelijker.

Social Login

En de laatste optie, maar dat is echt een keuze, dat je je gegevens in kan laten vullen door Facebook.

Dus dat je kan klikken Sign in with Facebook en dat die eigenlijk al mijn gegevens invult.

Sommige bedrijven willen dat bewust niet, sommige bedrijven willen het wel. Maar het is wel de moeite waard om te testen, want in sommige markten werkt het beter. Je klikt op één knop, je moet nog één keer doorklikken en al je gegevens, of een groot deel van je gegevens, staan in principe ingevuld.

Upselling Winkelmandje

De upselling in het winkelmandje.

Dit is ook iets wat je veel ziet. Logisch, want je wilt upselling doen of je wilt cross-selling doen.

Je gaat extra producten of een duurder product aanbieden die ze nog even snel in het winkelmandje kunnen doen.

Ook dit is echt een kwestie van testen of dit voor jou werkt, want het is natuurlijk afleiding. Als je bijvoorbeeld kijkt naar deze upselling, dan roept dat ook wat vragen op.

Namelijk: wat is Pokon Palmvoeding?

Wat is Pokon Bonsai-voeding?

Wat is Groene plantenvoeding?

Ze zijn verschillend in prijs.

Ik weet allemaal niet wat het inhoudt, dus welke moet ik nu aanklikken?

Dat zorgt voor onzekerheid, dat zorgt voor stress. En dat zorgt er weer voor dat het veel meer moeite kost om hier doorheen te gaan.

Als je wilt upselling of cross-sellen, zorg dan dat het aanbod dat je hebt extreem duidelijk is.

Geef niet te veel keuzes en weet zeker dat je getest hebt dat het niet in zijn totaliteit ten koste gaat van de conversies of uiteindelijk van de winst of omzet die je webshop maakt.

Vooraf Gemaakte Keuzes (Default Choice)

Het een na laatste punt wat belangrijk is om over na te denken, is het geven van vooraf gemaakte keuzes.

Op het moment dat je een keuze geeft, dus bijvoorbeeld via een radiobutton zoals hier, kies welk type bedrijf je bent: bedrijf, overheid en healthcare of educatie, dan kan je alvast één bedrijf selecteren.

Of je kan alvast één keuze aanzetten.

Hetzelfde als hier: aanhef. staat de heer standaard al aangevuld.

Dat kan je doen wanneer je meerdere keuzes hebt, maar één keuze veruit het meeste voorkomt.

Dat betekent dat 50 of 60 of 70 procent van de mensen die keuze niet hoeft te maken.

Daarmee is het makkelijker om een formulier door te lopen. Als je keuzemogelijkheden hebt, bedenk goed: kan ik een keuze van tevoren alvast aanzetten zodat het makkelijker is voor het grootste deel van het publiek.

Responsive Formulier

Het allerlaatste punt dat ik je mee wil geven, maar ik hoop toch echt in godsnaam in 2017 dat iedereen dit al zo’n beetje geregeld heeft, is als je een formulier designt of een webwinkel, zorg er dan voor dat ‘ie responsive is.

Zorg ervoor dat ‘ie werkt op alle apparaten.

Dan heb ik er toevallig eentje gevonden die nog niet responsive is.

Ik zal ‘m hier laten zien.

Dat ziet er dan als volgt uit, dus dit is Stevers en dit is het check-out proces op je mobiele telefoon.

Echt een verschrikking. Dus zorg ervoor dat je ontwerpen hebt voor je mobiele telefoon, voor je tablets, dat ‘ie op elk scherm goed te zien is.

In mijn optiek is dit toch wel een beetje een gegeven.

Maar dat is het allerlaatste dat ik je wil meegeven over het goed designen van jouw formulier of jouw winkelmandje om zoveel mogelijk conversies eruit te halen, het proces zo moeiteloos mogelijk te laten gaan.

Ik weet zeker: als je al deze tips uit deze vrij lange video gaat toepassen, dat je conversies ongelofelijk hard omhoog gaan schieten.

Gefeliciteerd! Je hebt het gehaald tot het einde van het artikel.

Heb je nu nog steeds vragen of opmerkingen, laat dan een reactie hieronder op de site of stuur ons een mailtje, dan kan je alle vragen stellen. Ik wens je ook heel veel plezier met het verbeteren van je formulier.