16 USER EXPERIENCE DESIGN (UX DESIGN) TIPS VOOR WEBSHOPS

UX-design-webshops

De feiten spreken voor zichzelf; het wereldwijde gemiddelde voor het afbreken van een online aankoop door consumenten is ongeveer 69%

Econsultancy heeft berekend dat retailers wereldwijd 3 biljoen dollars per jaar in omzet verliezen doordat consumenten vroegtijdig een online aankoop afbreken.

Ons team werkt met klanten in Eindhoven om de user experience (UX) van websites en applicaties te optimaliseren. De user experience is het gevoel dat een gebruiker meekrijgt bij het bezoeken van een website, applicatie of systeem. User experience design houdt zich bezig met het optimaliseren van de gebruikerservaring. Onze ervaring is dat online resultaten verbeteren als klanten de volgende 16 UX design verbeteringen toepassen.

Zelfs grote eCommerce websites zoals Apple, NewEgg, Walmart of Zapos maken fouten in de UX, zelfs vaker dan u denkt. Bovendien zijn de meeste grote webshop softwares zoals Magento, Zencart en Woocommerce niet geoptimaliseerd voor een perfecte UX.

Dit is het eerste artikel als onderdeel van 5 UX artikelen betreffende de aanbevelingen voor webwinkels met als doel conversieratio’s verbeteren.

In deel 1 behandelen we een van de belangrijkste onderdelen van UX design met betrekking tot online webshops:  het invullen van gegevens door de klant.

Tip 1: Meet de impact van veranderingen

U hebt het waarschijnlijk al vaker gelezen in onze blog dat we aanbevelen om de impact van de veranderingen die uw maakt aan uw website te meten. Er zijn handige tools om deze veranderingen te meten. We bespreken hier een aantal middelen om dit te doen:

Ecommerce-Google-Analytics-webshops

Google Analytics – Hier kunt u meer informatie vinden over hoe Google Analytics de prestaties van uw webshop meet

CrazyEgg – Met CrazyEgg kunt u inzien hoe gebruikers door de online winkelwagen scrollen en klikken

Meer van Techsmith – Verkrijg diepgaande informatie door gebruiker studies, focusgroepen of veldonderzoek. Niet goedkoop maar wel effectief

Zodra deze tracking systemen zijn geïnstalleerd suggereren we om zorgvuldig te kijken naar data uit het verleden en op basis daarvan Key Performance Indicators (KPI’s) op te stellen. Dit heeft als doel betere beslissingen te maken betreffende user experience.

Dit zijn voorbeelden van concrete KPI’s:

  • KPI 1 – Verlaag het vroegtijdig afbreken van een online aankoop met X over X weken
  • KPI 2 – Voer X gebruikers testen uit in de komende X maanden om feedback te krijgen en om verbeteringen te kunnen maken
  • KPI 3 – Een toename in herhaal aankopen met X over X weken
  • KPI 4 – Verminder het aantal klantenservice verzoeken met betrekking tot betalingen en verzendingen met X over de volgende X maanden

KPI’s kunnen veranderen als ze eenmaal gebruikt worden in de praktijk. Wij discussiëren bestaande en nieuwe KPI’s aan het einde van onze wekelijkse SCRUM vergaderingen. Sommige kritische KPI’s bespreken we dagelijks.

Goed nieuws: de investering in het opstellen en monitoren van KPI’s verdiend u terug door betere online prestaties

Tip 2: Autfill ‘bezorgadres’ hetzelfde als ‘factuuradres’

Veel klanten willen een bezorgadres definiëren wat in sommige gevallen hetzelfde is als het factuuradres, maar dat hoeft niet altijd. Daarom moet u altijd vragen of het factuuradres hetzelfde is als het bezorgadres en dan ook precies in die volgorde.

Maak de invoervelden voor het factuuradres alleen zichtbaar wanneer een klant aangeeft een afwijkend factuuradres in te willen vullen. We raden aan om een check box te gebruiken die verplicht ingevuld moet worden om vergissingen te voorkomen.

Het bovenstaande leidt tot een nettere UI (user interface) en het is makkelijk voor de gebruiker om te zien welke velden ingevuld moeten worden.

Het volgende voorbeeld is van PayPal. Onderzoek toont aan dat dit de beste manier is om bezorginformatie te verzamelen; op één pagina met behulp van AJAX.

UX-Design-Cart-Shipping-vs-Billing-Info

Tip 3: Slechts één keer vragen voor bepaalde informatie

Wanneer een gebruiker zijn of haar gegevens invult zoals een email adres, credit card gegevens of bezorgadres zorg er dan voor dat deze informatie automatisch wordt ingevuld voor gelijkwaardige invulvelden. Indien de website niet beschikt over de functionaliteit om gegevens op te slaan en automatisch in te vullen is dit een gemiste kans wat betreft de UX. Er zijn nog steeds grote bedrijven die op hun website aan klanten vragen om de voornaam opnieuw in te vullen in het factuuradres zelfs wanneer de klant deze informatie al heeft ingevuld in de registratie.

online-shop-naam-automatisch-invullen-webshop

Tip 4: Maak onderscheid tussen verplichte en optionele invulvelden

Veel gebruikers nemen aan dat het invullen van bepaalde invulvelden niet verplicht is als dit niet wordt vermeld. Dit resulteert in error berichten en geïrriteerde gebruikers. Gebruikers willen graag voor het invullen van een formulier weten welke informatie verplicht ingevuld moet worden.

online-shop-checkout

Tip 5: Het formulier slaat alle ingevulde informatie op ook als het formullier niet correct is ingevuld

Niets irriteert gebruikers meer dan dat ze informatie opnieuw in moeten vullen omdat een formulier niet correct is ingevuld. Als het invullen van een formulier te complex is of teveel tijd kost zullen er mensen zijn die de online aankoop afbreken. Dit kan eenvoudig worden verholpen door dynamische validatie met AJAX / Javascript.

online-shop-FORMULIER

 

Tip 6: Laat voorbeelden zien

De verschillende formats van invulvelden zoals telefoonnummer kunnen verwarrend zijn voor gebruikers. Het is daarom verstandig om een voorbeeld te laten zien. Het is goed om verschillende methodes te accepteren voor het invullen van telefoonnummers, hetzelfde geldt voor creditcards. Het invullen van een creditcardnummer met of zonder spaties tussen de nummers zou moeten worden toegestaan. Zorg er dan voor dat de website automatisch de creditcard gegevens op de juiste manier doorgeeft aan de betalingsgateway.

Tip 7: Gebruik één invoerveld voor ‘naam’

Gebruikers kijken meestal niet naar alle invulvelden voordat ze beginnen met het invullen van een formulier. Zodra een gebruiker een veld zien dat vraagt ‘naam’ vullen veel mensen hun naam voluit in. Als de gebruiker het formulier verder invult en dan ziet dat de achternaam apart moet worden ingevuld moet de gebruiker weer terug naar het eerste ‘naam’ veld om dit aan te passen. Een eenvoudige gebruiksvriendelijke oplossing is om maar één naam invoerveld weer te geven. De website code vult dit dan automatisch aan bij bijvoorbeeld e-newsletters door de aanhef te formuleren als ‘Beste Peter’. Er zijn maar weinig websites die dit goed doen, terwijl gebruikersonderzoek bevestigd dat gebruikers hun achternaam kopiëren en plakken van het ene veld naar het andere.

Tip 8: Valideer invulvelden online

Het direct valideren van ingevulde gegevens online is de meest gebruiksvriendelijke methode. Gebruikers vinden het prettig als gegevens direct worden gecontroleerd. Gebruik AJAX / JavaScript zodat gebruikers niet eerst op de ‘verzend’ knop hoeven te klikken om te ontdekken dat een invoerveld verkeerd is ingevuld.

webshop-dynamische-validatie

Dynamische validatie kan ook creatief worden gebruikt om op een leuke manier met gebruikers te communiceren gedurende het aankoopproces.

webshop-creativiteit

Tip 9: Gebruik geen drop down functionaliteit als er slechts één optie is

Met intelligente invulvelden die data verzamelen van een database bijvoorbeeld ‘betalingsmethode’ of ‘verzend opties’ is er maar één mogelijke optie. In dat geval is er geen reden om een drop down menu te gebruiken.

Tip 10: Automatische detectie voor invulveld ‘stad’ nadat ‘postcode’ is ingevuld

In een ideale situatie is het invullen van een online formulier eenvoudig en kost de gebruiker weinig moeite. Zodoende raden we aan om auto detectie te gebruiken zodat na het invullen van een postcode automatisch de stad wordt ingevuld.

Belangrijk is wel om gebruikers de mogelijkheid te geven om de stad en postcode te bewerken omdat eventuele fouten met autodetectie kunnen resulteren in het afbreken van de aankoop.

Tip 11: De ‘plak functie’ uitschakelen in ‘e-mail bevestiging’ velden

Een groot aantal gebruikers kopieert en plakt een emailadres in de validatie velden. Wat wij aanbevelen is geen dubbele invulvelden van email adres weer te geven omdat dit weinig toegevoegde waarde heeft omdat email addressen tegenwoordig per email moeten worden bevestigd. Social media logins zijn ook een goede manier om de echtheid van een persoon te valideren.

Tip 12: Gebruik alleen drop-downs als er minder dan 20 opties zijn

Gebruikers kunnen overweldigd raken van lange dropdown menu’s, vooral als  de website of app via een mobiel apparaat wordt bekeken. Een meer gebruiksvriendelijke optie is het gebruik van automatische invulvelden. Als u toch kiest voor een dropdown is het raadzaam om antwoorden te ordenen op alfabetische volgorde.

Tip 13: Houdt titel labels zichtbaar

Sommige websites zoals die van Apple verbergen de titels van invulvelden wanneer een gebruiker een veld invuld. De content moet verwijderd worden om opnieuw te zien welke informatie nodig is.

Om die redenen houdt labels zichtbaar, zelfs als dit ten koste gaat van de ‘clean’ uitstraling van de website. Simon van eBusiness Consultants houdt van ‘clean’ UX maar niet als dat ten koste gaat van gebruikersvriendelijkheid.

Tip 14: Gebruik geografische data om automatisch velden in te vullen

Geografische segmentatie is mogelijk via een IP adres, door toestellen met GPRS of door een login via social media of zoek machines met de mogelijkheid tot locatie detectie. Dit geeft e-commerce bedrijven ook de mogelijkheid om de verzendkosten automatisch aan te passen. Automatische landingspagina, product en taal aanpassingen; benut de mogelijke toepassingen van geografische data.

UX-automatisch

Tip 15: Het aantal karakters dat ingevuld moet worden moet overeenkomen met het aantal karakters toegestaan in het invulveld

De lengte van invulvelden moet overeenkomen met de verwachte ingave. Bijvoorbeeld een tekst invulveld voor verzend instructies mag 500 karakters zijn terwijl het invulveld voor het beveiligingsnummer van een credit card maar 3 karakters lang is.

Tip 16: Social media logins

Logins via Social Media geven voordelen voor de functionaliteit van een ecommerce website.

Dave Chaffey heeft een artikel geschreven waarin hij advies geeft over een login met een social media account.

  • 65% van de internet gebruikers heeft een social media account. Aanmelden via een social media registratie verkort het aanmeldproces en geeft de mogelijkheid om het profiel te personaliseren met foto’s van het social media profiel.
  • 23% van de mensen geeft aan dat het opzetten van een account een reden is voor het afbreken van een online aankoop. Een alternatief is een social media login gecombineerd met een betalingssysteem als PayPal voor een snelle check out. Onderzoek data bevestigd dat de mogelijkheid voor het aanmaken van een account via social media de moeite waard is:
  • 40% van de klanten (2 van de 5) hebben een voorkeur voor social media logins
  • 68% van de klanten gaan naar sociale netwerk websites om reviews te lezen. Delen van reviews is eenvoudig door een login via social media.
  • Het gemiddelde aantal bezoekers stijgt van 4 bij aanmelden via email naar 11 met een aanmeld procedure via social media.

social-media-integratie

 

Als u hulp nodig heeft met een UX/UI design project in Eindhoven, dan horen we graag van u!

Bronnen:

  • e-Commerce Checkout Usability, Exploring customer’s checkout experience, Baymard Institute Research, June 6, 2013, ISBN 978-87-994365-2-1
  • https://econsultancy.com/blog/64680-six-tactics-for-reducing-cart-abandonment-rates#i.weabnjzqdeyu10
  • e-Commerce Checkout Usability, Exploring customer’s checkout experience, Baymard Institute Research, June 6, 2013, ISBN 978-87-994365-2-1

Reageer op deze blog post