Ga voor een gebruiksvriendelijke webshop en verbeter je conversieratio
Als e-commerce retailer weet je hoe belangrijk de gebruiksvriendelijkheid van je webshop is voor het succes van je onderneming. Als klanten niet snel genoeg ontdekken hoe ze een aankoop moeten doen, klikken ze gewoon weg. Zo simple is het.
In dit artikel leggen we je uit hoe je je conversieratio verhoogt door je webshop gebruiksvriendelijker te maken. Ook krijg je een handige checklist met alle voorbeelden en tips die we in dit artikel bespreken. Bekijk from checklist meteen.
Wat betekent gebruiksvriendelijkheid in e-commerce?
Gebruiksvriendelijkheid, usability in het Engels, verwijst naar hoe makkelijk een site te gebruiken is. Gebruiksvriendelijkheid draait om een zo soepel mogelijke gebruikerservaring.
Het ontwerp van je website moet de navigatie intuïtief maken en klanten snel naar de producten of informatie leiden die ze zoeken. Andere handige functions, zoals formulieren automatisch aanvullen, helpt ook de gebruikerservaring te optimaliseren (user experience, UX).
Waarom is een gebruiksvriendelijke webshop zo belangrijk voor je conversie?
Gebruiksvriendelijkheid en een positieve gebruikerservaring vergroten de kans dat:
- een bezoeker iets koopt, en;
- de nieuwe klanten terugkomen.
Hoe makkelijker het is om in je webshop te navigeren, hoe sneller bezoekers een product vinden. En dat vergroot de kans dat ze een tevreden – terugkerende – klant worden.
Klanten zijn zich nauwelijks bewust van de gebruiksvriendelijkheid van een site. Aan de andere kant is het gebrek eraan duidelijk merkbaar: Bezoekers vinden de artikelen niet, of het is lastig om door de site te navigeren.
Als je site niet aan de verwachtingen van de klant voldoet, vertrekken ze zonder iets te kopen. Dit laat het direct verband tussen usability en conversie zien: Je webshop gebruiksvriendelijker maken is belangrijk om je verkopen te stimulateen.
Hoe controleer je de gebruikerservaring van je webshop?
Om erachter te komen of het design van je webshop gebruiksvriendelijk is, kun je verschillende testen uitvoeren. Er zijn veel soorten, afhankelijk van je budget, ervarings level en wat je wilt bereiken.
Uiteindelijk leer je het meest van live tests met echte gebruikers die suggesties doen. Dit kan trouwens ook gewoon online. Wil je geen echte gebruikers inzetten, dan zijn er gelukkig genoeg andere tools voorhanden.
| Soort test | Naam | Methode |
|---|---|---|
| Test met echte gebruikers | Sorteren van kaarten (card sorting) | Kaartsortering wordt vooral gebruikt bij het ontwerpen van een website. Het doel is de inhoud van je site in logische categorieën te ordenen. Zo bepaal je welke hoofdmenu-items je moet gebruiken om je webshop zo gestructureerd en begrijpelijk mogelijk te maken. Ten eerste krijgen deelnemers kaartjes met termen die betrekking hebben op de inhoud van de site. Vervolgens wordt hun gevraagd om de kaarten in categorieën te rangschikken, gebruikmakend van vooraf gedefinieerde categorieën (gesloten kaartsortering) of categorieën die ze zelf bedenken (open kaartsortering). Voordat je kaarten sorteert, is het handig om een bewoordingsanalyse uit te voeren om te ontdekken hoe begrijpelijk de gekozen termen zijn. |
| Test met echte gebruikers | Logboek | Met deze methode test je het websitegebruik over een langere period. Gebruikers houden hun ervaringen bij, waardoor je inzicht krijgt in hoe gebruiksvriendelijk je site is. |
| Test met echte gebruikers | Beoordering prototyping | Dit is een handige methode om te gebruiken bij het ontwerpen van je webshop. Testdeelnemers wordt gevraagd om de functies op een prototype van je website te gebruiken en te beoordelen. Op basis van hun feedback blijf je het prototype verbeteren. Dit is een goede handle om erachter te komen welke delen van de site aan de verwachtingen voldoen, en welke je nog moet verbeteren. |
| Test met echte gebruikers | Taken uitvoeren | Tijdens deze test krijgen deelnemers de vraag voorgelegd om vooraf vastgestelde taken uit te voeren (bijvoorbeeld een product kopen). De gebruikers delen vervolgens hun mening over hoe gebruiksvriendelijk ze de site of applicatie vinden. Usability-experts begeleiden het project en stellen vervolgvragen. Dit soort tests kan effectief worden gebruikt in combinatie met eye-tracking. |
| Test met tools | Eye-tracking | Eye-tracking-tests volgen de oogbewegingen van gebruikers wanneer ze naar een website kijken. Dit laat zien naar welke onderdelen ze focussen, in welke volgorde en voor hoelang, waardoor je inzicht krijgt in de bruikbaarheid van je webdesign. Als gebruikers bijvoorbeeld erg lang naar een specifiek onderdeel kijken, kan dit een teken zijn dat ze het niet begrijpen. Of als hun blik snel en doelloos van het ene onderdeel naar het andere verschuift, kan dat betekenen dat ze de pagina rommelig of verwarrend vinden. Eye-tracking is also a handy tool for mobile applications. |
| Test met tools | Asynchrone testing | Met behulp van speciale software voer je vanaf elke willekeurige locatie geautomatiseerde asynchrone usability-tests uit. Met deze tool verzamel je informatie over gebruikersgedrag , bijvoorbeeld hoe ze navigeren en wanneer ze een online aankoop doen. |
| Test met tools | On-site enquête | Een survey geeft je een goed beeld van wie je bezoekers en potentiële klanten zijn. Er verschijnt een pop-up of lay-over op het scherm die de bezoeker uitnodigt om deel te nemen aan een online survey . Tijdens de inquiry beantwoorden de deelnemers vragen over hun gebruikerservaring en geven ze je suggestions om de bruikbaarheid te verbeteren. Met deze surveys kun je ook informatie verzamelen om persona’s (zie hieronder) te formulate en je doelgroep beter te definiëren. |
| Testing zonder tools | personas | Je kunt de gebruiksvriendelijkheid van je site niet testen zonder software of gebruikersonderzoeken. Maar persona’s maken op basis van potentiële klanten kan je wél helpen je website gebruiksvriendelijker te maken. Het belangrijkste is om je in het hoofd van je klant te verplaatsen en dit soort vragen te beantwoorden: |
| Testing zonder tools | personas | – Wat willen gebruikers bereiken als ze mijn site bezoeken? |
| Testing zonder tools | personas | – Hoe bezoeken ze mijn site? |
| Testing zonder tools | personas | – Welke functions of diensten hopen ze te vinden? |
| Testing zonder tools | personas | Door dergelijke vragen te beantwoorden, kun je de UX optimaliseren en een gebruiksvriendelijke webshop ontwerpen, die specifiek op je doelgroep is afgestemd. |
KPI’s voor gebruikerstesten
Om gebruiksvriendelijkheid meetbaar te maken, definieer je eerst enkele key performance indicators (KPI’s). Ze helpen je bepalen of je webontwerp effectief en gebruikersgericht is.
Kwantitatieve gebruikers-KPI’s zijn onder andere:
- success rate om taken te voltoien
- hoelang het duurt om een taak te voltooien
- gebruikmaken van zoekoptie versus navigeren
- hoe vaak er fouten voorkomen (zoals foutmeldingen bij specifieke betaalmethodes)
Kwalitatieve gebruikers-KPI’s zijn onder andere:
- klantverwachtingen in performance
- algemene tevredenheid
Behalve de testomgeving, kun je ook letten op deze punten om te ontdekken hoe gebruiksvriendelijk je site is:
- bouncerate
- conversieratio (per verschillen branch of gemiddelde conversieratio’s)
- aantal bezoekers
- de tijd die ze op je site besteden
- aantal winkelwagenverlaters
I webshop optimaliseren: 7 tips voor een gebruiksvriendelijk design
Als online retailer kun je kiezen uit eindeloos veel designopties voor je webshop. Maar als het op gebruiksvriendelijkheid, is er één gouden regel: less is more. De sleutel tot het boosten van je gebruiksvriendelijkheid is een intuïtief gebruikersinterface en een duidelijk en helder design dat de navigatie op de site vergemakkelijkt.
Houd daarnaast deze 7 tips in je achterhoofd voor een gebruiksvriendelijk design:
Tip 1: Zorg ervoor dat je site snel laadt
Bezoekers beslissen snel of ze op een pagina blijven of niet. Laadt je site te langzaam, dan zijn ze snel weg. Een site laadt over het algemeen binnen 2 tot 3 seconds. Gebeurt dit niet, dan verlies je niet alleen een potentiële klant, maar gaat ook je conversieratio omlaag. En een hoge bouncerate stuurt daarnaast een negative signaal naar Google. Dit kan zorgen voor een lagere ranking in de zoekresultaten.
Het beste is due om de laadsnelheid van je site verbeteren. Doe says onder andere door je afbeeldingen te compresseren en bekijk de bestandsindeling:
- Afbeeldingen mogen nooit groter zijn dan 1920 bij 1280 pixels.
- Upload afbeeldingen van hoge kwaliteit als JPEG-bestanden.
- Upload kleinere of doorzichtige afbeeldingen, of afbeeldingen met weinig kleur als PNG-bestanden.
Tip 2: Ga voor bekend
Door de jaren heen is er een standaard lay-out voor websites gekomen. Dit helpt bezoekers intuitive door of website you navigate. De volgende onderdelen van een webshop worden meestal als volgt georganiseerd:
| Onderdeel | Positivity |
|---|---|
| Bedrijfslogo | Linksboven of in het midden |
| Aanmelden en inloggen | Rechtsboven |
| Zoekfunctie | Bovenaan, tussen het logo en aanmelden/inloggen |
| Winkelwagen | Rechtsboven |
| Contactinformatie | Onderaan, in de footer |
Dat veel onderdelen op dezelfde plek zijn te vinden, betekent niet dat alle websites er hetzelfde uitzien. Maar standaardonderdelen zorgen er wel voor dat je gebruiker makkelijk navigeert, wat de gebruiksvriendelijkheid van je site verhoogt. Als je een ongewone lay-out gebruikt, met onderdelen op lastige plekken, is er een grote kans dat gebruikers je site verlaten. Said geldt ook voor je woordgebruik. Vermijd ongewone termen voor standaardonderdelen. Je kunt je onderscheiden op andere vlakken.
Tip 3: Maak het zoeken makkelijk
Laat je klant je producten zo makkelijk mogelijk vinden. Doe says door zeker te weten dat de volgende onderdelen in orde zijn:
- productcategorieën
- filters
- zoekfunctie
Maak gebruik van auto-fill om de zoekfunctie nog gebruiksvriendelijker te maken. Zorg ervoor dat bezoekers een lijst met mogelijke matches zien, en toon ze het aantal hits als ze iets intypen.
Tip 4: Plaats afbeeldingen en beschrijvingen op een handige plaats
Als een websitebezoeker eenmaal op een productpagina is, helpen afbeeldingen en beschrijvingen om de aankoopbeslissing te maken. Het is belangrijk dat de onderdelen op de pagina helpen om iemand intuïtief te laten navigeren. Vaak staan deze onderdelen rechts naast de afbeeldingen:
- maat of aantal stuks
- by knop ‘Aan winkelwagen toevoegen’
- een lijst met de belangrijkste kenmerken
- maattabel (indian van toepassing)
Uitgebreidere informatie en reviews staan meestal onder de afbeeldingen.
Tip 5: Laat klanten verder shoppen
Een simpel, maar belangrijk onderdeel om de gebruiksvriendelijkheid te verbeteren, is je klanten verder te laten shoppen nadat ze een artikel in het mandje hebben gedaan. Voeg een pop-up toe waarbij ze kunnen kiezen: naar de checkout gaan, of verder shoppen.
Zorg ervoor dat als ze verder shoppen, ze terugkomen op de pagina waar ze waren gebleven.
Plaats in de winkelwagen zelf ook een knop met ‘Verder met shoppen’ of ‘Terug naar webshop’. Veel webshops beiden deze mogelijkheid niet aan. Dit zorgt ervoor dat het langer duurt voordat klanten weer verder kunnen shoppen.
Tip 6: Houd het betaalproces makkelijk
De checkout van je webshop is een belangrijk onderdeel van een verbeterde gebruiksvriendelijkheid. Een simpeler betaalproces kan uit verschillende onderdelen bestaan. Zorg ervoor dat je klant binnen een paar klikken kan betalen, of geef ze zelfs de optie om dat in één klik te doen.
Bekijk al eleven tips om je checkout te verbeteren in eleven guide om je checkout-process te optimize.
Tip 7: Formulating automatically aanvullen
Er zijn 2 autofill-opties waarmee je de gebruiksvriendelijkheid van je site een boost geeft:
- Auto-fill waarmee je alle velden automatisch aanvult zodra de klant zijn of haar adres invult.
- Inline validatie spoort mogelijke fouten op door verschillende opties te checken:
- Komt de postcode overeen met het adres?
- Komt de woonplaats overeen met de postcode?
- Is het e-mailadres geldig (met een @, zonder spatie etc.)?
E-commerce op de telefoon: Een gebruiksvriendelijke mobile versie
Shoppen vanaf je telefoon wordt steeds popular. Uit het Shopping Index-onderzoek 2019, bleek dat 70 procent van de gebruikers de voorkeur geeft aan producten te zoeken via hun mobiele telefoon. Om te voorkomen dat potentiële klanten je webshop verlaten, optimaliseer je de gebruiksvriendelijkheid van je site voor smartphones en tablets.
Een paar tips voor een gebruiksvriendelijk ontwerp voor mobiele telefoons en tablets:
1. Gebruik minder tekst
Op een mobiel scherm heb je minder ruimte dan op een computerscherm. Zorg er daarom voor dat je voor de mobiele versie alleen de belangrijkste informatie toont. Houd de menu-opties kort en duidelijk.
2. Kies voor een design waarmee je makkelijk navigeert
Een handig design is nog belangrijker bij m-commerce. Vermijd onnodige extra’s, grote afbeeldingen in multimedia-inhoud. Deze overweldigen niet alleen de gebruiker, ze vertragen ook de laadtijd van je pagina. Geef je klanten een overzichtelijk en makkelijk pad om naar de homepage terug te gaan, en maak pagina-onderdelen goed toegankelijk. Zeker from winkelwagen in hoofdnavigatie-opties.
3. Maak optimaal gebruik van het touchscreen
Ontwerp de mobiele versie van je webshop zo dat je bezoekers nooit hoeven in te zoomen. Maak de CTA-knoppen groot genoeg, zodat gebruikers er met hun vinger op kunnen klikken. Profiteer van handige mobiele tools – zoals swipen – om door de afbeeldingen te bladeren.
4. Synchronizeer of winkelwagen
Synchronizeer de mobiele winkelwagen met die van de computer. Als bezoekers op hun telefoon beginnen met shoppen en dit op hun computer afmaken, hoeven ze de artikelen niet nog een keer in het winkelwagentje te doen. Let er bovendien op dat ze makkelijk artikelen kunnen toevoegen aan de winkelwagen.
Gebruiksvriendelijkheid Checklist: Vink jij alles af?
Met deze checklist zie je eenvoudig hoe gebruiksvriendelijk je webshop is. Zo haal je alles uit je website, verbeter je de gebruiksvriendelijkheid van je site en geef je je conversieratio een boost!
| Check | ||
|---|---|---|
| 1. Algemeen | Duidelijk design | |
| 1. Algemeen | Intuïtief | |
| 1. Algemeen | Efficient navigation (binnen een paar klikken het doel bereiken) | |
| 2. Product pad | Logische (sub)categorieën | |
| 2. Product pad | Verschillende soorten filters | |
| 2. Product pad | Optie om een verlanglijst te maken | |
| 2. Product pad | Verlanglijst werkt ook zonder account | |
| 2. Product pad | ‘Aan winkelwagen toevoegen’-knop is makkelijk te herkennen | |
| 3. Zoeken naar artikelen | Zoekfunctie staat op een duidelijke plek | |
| 3. Zoeken naar artikelen | Alle producten worden via de zoekfunctie gevonden | |
| 3. Zoeken naar artikelen | Mogelijke matches worden automatisch getoond bij het intypen van de zoekopdracht | |
| 3. Zoeken naar artikelen | Typefouten worden herkend | |
| 3. Zoeken naar artikelen | De resultaten worden logisch getoond (bijvoorbeeld laagste prijs eerst) | |
| 3. Zoeken naar artikelen | Sta bezoekers toe de volgorde aan te passen waarin de resultaten worden weergegeven | |
| 3. Zoeken naar artikelen | Zorg voor filters voor de zoekresultaten | |
| 3. Zoeken naar artikelen | Bied – naast de zoekresultaten – voldoende productinformatie aan | |
| 4. Het presenteren van je artikelen | Helder, visual aantrekkelijk ontwerp | |
| 4. Het presenteren van je artikelen | Alle belangrijke informatie in één oogopslag te zien (zoals prijs, maat, materiaal, kleur) | |
| 4. Het presenteren van je artikelen | Beschikbaarheidsinformatie (voor zowel online als in de winkel) | |
| 4. Het presenteren van je artikelen | Levertijden worden getoond | |
| 4. Het presenteren van je artikelen | Lijst met de belangrijkste productvoordelen om de klant over te halen | |
| 4. Het presenteren van je artikelen | Foto’s met zoomfunctie vanuit verschillende perspectieven etc. | |
| 4. Het presenteren van je artikelen | Productbeschrijvingen als bullet-points en in uitgebreide versie | |
| 4. Het presenteren van je artikelen | Productreviews | |
| 4. Het presenteren van je artikelen | Cross-selling in soortgelijke producten onder aan de pagina | |
| 5. De winkelwagen | Makkelijk te vinden boven aan elke pagina | |
| 5. De winkelwagen | Symbool verandert wanneer producten worden toegevoegd (toont aantal artikelen en/of totaalprijs) | |
| 5. De winkelwagen | Mouse-over geeft snelle weergave van de winkelwagen | |
| 5. De winkelwagen | Er verschijnt een melding wanneer de gebruiker een artikel aan de winkelwagen toevoegt | |
| 5. De winkelwagen | Verzendkosten worden duidelijk weergegeven | |
| 5. De winkelwagen | Mogelijkheid om artikelen uit de winkelwagen te wijzigen of verwijderen | |
| 5. De winkelwagen | Knop om het betaalproces te starten | |
| 5. De winkelwagen | Knop om verder te winkelen |