E-commerce checkout stap 3: Formulieren

Written by Guido Jansen in
December 2011

Formulieren: In dit onderdeel volgen enkele richtlijnen gerelateerd aan de invoer van data, door de consument, tijdens het checkoutproces.

Gebruik het afleveradres standaard als factuuradres

Zeker als je een B2C webshop hebt zullen de meeste bestellingen een afleveradres hebben dat gelijk is aan het factuuradres. Zorg er dan ook voor dat deze gegevens standaard hetzelfde zijn. Geef eventueel wel de optie om een apart factuuradres in te voeren. Het liefst verberg je de velden voor een apart factuuradres helemaal tot de besteller aangeeft dit apart te willen invoeren.

Bestelproces 1

 

Gebruik standaard hetzelfde adres voor verzending en factuur.

Vraag maar 1 keer om dezelfde informatie

Dit gaat eigenlijk door op het voorgaande punt: vraag niet meerdere keren om dezelfde informatie. Als iemand al is ingelogd en al een keer wat bij je besteld heeft, vraag dan niet nogmaals om alle gegevens van de besteller, die heb je immers al in je systeem staan! Verschillende e-mail velden kun je kopiëren en de naam op de creditcard kun je bijvoorbeeld kopiëren van het ‘Naam’ veld.

Geef aan welke velden verplicht zijn

Soms wil je graag extra informatie van de besteller hebben om bijvoorbeeld je marketing beter te kunnen segmenteren. Consumenten willen echter zo snel mogelijk door het bestelproces heen en alleen de hoognodige informatie geven. Geef dan ook duidelijk aan welke velden verplicht zijn om naar de volgende stap te kunnen gaan. Zorg ervoor dat de consument niet door een trial-and-error proces achter moet komen welke velden verplicht zijn en welke niet. Een asterisk (*) is gebruikelijk voor verplichte velden, het expliciet vermelden van ‘optioneel’ bij velden die dat zijn is een welkome aanvulling.

Bestelproces 2

 Alle verplichte velden hebben een rode asterisk.

Bewaar input ondanks errors

Als er een error voorkomt in een formulier, zorg er dan voor dat alle informatie in het formulier bewaard blijft. Niets is zo vervelend als een lang formulier invullen, op verzenden te klikken om vervolgens een foutmelding te krijgen en weer opnieuw te moeten beginnen.

Geef input voorbeelden

Om je data gestructureerd binnen te krijgen kan het helpen om bij het invullen van een formulier voorbeelden weer te geven. Een veld voor een telefoonnummer kun je bijvoorbeeld alvast beginnen met +316-, (06) of 0031 6, afhankelijk van de door jou gewenste standaard.

Gebruik een enkel ‘Naam’ veld

Veel gebruikers zien hun eigen naam als één geheel en niet als een losse voor- en achternaam. Het komt dan ook vaak voor dat er bij het eerste ‘naam’ veld (of dit nu voornaam of achternaam is) de complete naam ingevuld wordt, om er bij het volgende veld achter te komen dat dit niet de bedoeling was. Uiteindelijk gaat dit meestal goed en stuurt niemand een verkeerd formulier in, maar de meeste gebruikers zijn toch geïrriteerd wanneer ze deze fout gemaakt hebben en moeten corrigeren.

Bestelproces 3 (1)

Gebruik één veld voor de naam.

Valideer velden direct bij invoer

In plaats van controle bij het insturen van het formulier, is het beter om de inhoud van velden direct te controleren bij de invoer ervan. Het is ten eerste gewoon vervelend als je denk klaar te zijn, om er vervolgens achter te komen dat je nog zaken moet corrigeren. Ten tweede wordt deze directe controle (dmv JavaScript/AJAX) steeds vaker toegepast waardoor gebruikers het ook van je site verwachten.

Bestelproces 4

Groene vinkjes: deze velden zijn goed ingevuld!

Het beste moment van validatie is nadat de gebruiker het veld verlaat en niet tijdens het invullen. In dat laatste geval krijgt de gebruiker namelijk direct foutmeldingen te zien die op dat moment nog helemaal niet nodig zijn, ze zijn tenslotte nog bezig met het invullen van het veld!

Belangrijk is ook om niet alleen fouten weer te geven, maar ook goed bedrag te ‘belonen’, bijvoorbeeld door middel van een groen vinkje bij het veld te tonen. Dit maakt de ervaring een stuk positiever.

De volgende keer zal het volgende blog uit deze miniserie verschijnen waarin het onderwerp “Navigatie” behandelt zal worden. In dit blog zullen enkele richtlijnen omschreven worden met betrekking tot het weergeven van de navigatie en acties, die in de navigatie uitgevoerd kunnen worden.

Recent posts
Announcing a new Magento community project
Announcing a new Magento community project

I would like to share a new project with you. I’ve had this idea for over 5 years now and I’ve finally been able to make it a reality in the last couple of weeks.

Can you afford not to know? Can you afford to be wrong?
Can you afford not to know? Can you afford to be wrong?

In rapid changing online environments, continues business experimentation is a great way of constantly learning what works and what doesn’t. But then the question might arise: how far do you go? What do you test? And is it sometimes ok NOT to test something?