Werk aan de mobiele webwinkel: 10 usability-tips

We kopen steeds meer online, waar en wanneer het ons uitkomt. Voor retailers speelt het gebruik van mobiele technologie hierin een grote rol. Om (potentiële) klanten tevreden te stellen, moeten webwinkeliers de presentatie van hun aanbod aanpassen voor mobiel gebruik. Je kunt dan niet om de gebruiksvriendelijkheid van je app of website heen. Waar moet je op letten bij het bepalen van de usability van je mobiele shop?

1. Ontwikkel een mobiele versie

Het is een misvatting om te denken dat een webshop die ontwikkeld is als desktopsite, ook goed werkt voor mobiele gebruikers. Integendeel, je moet de website optimaliseren voor mobiele devices en verschillende schermresoluties, bijvoorbeeld met een responsive website. Een andere oplossing hiervoor is het bouwen van een native app, die vervolgens via de corresponderende appstores (zoals die van Google, Apple en Windows) gedistribueerd wordt. Deze native apps zijn gericht ontwikkeld om te werken op Android-, iOS- en Windows-toestellen.

Tip: Zet op een rij wat er nodig is voor je mobiele webshop

Of het nu gaat om een app, een responsive mobiele website of een hybride variant, een online shop moet geoptimaliseerd worden voor het gebruik op een mobiel device. Welke van de opties meer geschikt is, verschilt natuurlijk per winkelier en per applicatie. Het is van belang om op een rij te zetten wat er nodig is voor je mobiele webshop, voor je met een app-bouwer of ontwikkelaar gaat praten.

2. Definieer de gewenste toepassingen

De mobiele versie is geen één-op-één kopie van de reguliere website. Het hangt natuurlijk sterk af van de content, maar over het algemeen hoeft niet alles in een mobiele versie getoond te worden. Wat zijn de kernfunctionaliteiten? Welke functionaliteiten worden in de reguliere webshop hoofdzakelijk gebruikt? Het loont om vast te stellen over welke functies de app of mobiele website in ieder geval moet beschikken, maar ook over welke functies niet. Zorg dat de aandacht op de belangrijke content gevestigd is. Toon verdere informatie en functionaliteiten secundair, na een ‘druk op de knop’.

Tip: Welke functionaliteiten zijn er nodig?

Zet op een rij welke functionaliteiten er nodig zijn voor mobiel gebruik van de webshop. Alles kan, maar less is more. Door niet teveel content en functionaliteiten toe te voegen, gaat de aandacht direct uit naar de meest relevante inhoud van je aanbod en bespaar je ook nog eens op de laadtijd.

3. Houd het gebruik overzichtelijk

Beeldschermen komen in vele soorten en maten. Smartphones en tablets hebben beduidend kleinere resoluties dan laptops en desktops. Daarmee bieden ze minder ruimte voor content. Dit geldt bijvoorbeeld voor het menu. Je wil het natuurlijk voor de eindgebruiker, de bezoeker van je webshop, zo makkelijk en aantrekkelijk mogelijk maken om iets te kopen. De navigatie voor een mobiele versie van de online shop moet daarom compact zijn en eenvoudig en intuïtief werken.

Tip: Betrek je eindgebruiker in het ontwikkelproces

Probeer voor of in een vroeg stadium van het proces feedback van je eindgebruiker te krijgen. Zo kom je er bijvoorbeeld achter of de mobiele webwinkel daadwerkelijk intuïtief werkt en licht bedienbaar is. Bovendien werk je zo tegelijkertijd aan je klantbinding. Zoals ik eerder schreef, je wilt uiteraard voorkomen dat gebruikers afhaken.

4. Schrijf ook voor mobiel

Online gebruikers zijn selectief met het lezen van teksten. Lange teksten lezen prettig als ze zijn voorzien van een duidelijke stuctuur met titels, tussenkoppen, paragrafen en beeld. Wanneer het om een mobiele versie gaat, is het belang van een goed gestructureerde tekst nog groter. Ook hierbij geldt het credo ‘less is more’. Probeer je qua tekstuele inhoud te beperken tot de kern van je boodschap.

Tip: Vermijd overbodig tekstgebruik

Richt de aandacht op de kern van je boodschap. Formuleer je content helder en actief. Zo blijft de informatie beter hangen en activeer je de gebruiker sneller tot een gewenste actie.

5. Maak het visueel aansprekend

Een eerste indruk maak je maar één keer. Daarbij is visuele content erg belangrijk, zeker voor webshops. Dit geldt niet alleen voor je productaanbod, maar ook voor designonderdelen, zoals iconen, navigatie-objecten, kleurgebruik en contrastratio. Zo zou je voor een Android-app elementen van material design kunnen toepassen, de ontwerpstijl van Android 5.0, om de herkenbaarheid van specifieke gebruikselementen te vergroten. Zoek hierbij altijd naar de juiste balans tussen tekst en beeld.

Tip: Laat de beeldstijl corresponderen met de branding van je merk

Het design van je webshop moet functioneel zijn en de winkelervaring versterken. Laat de beeldstijl corresponderen met de branding van je merk. Twijfel je tussen verschillende beeld- en tekstverhoudingen? Met een A/B-test ontdek je welke van de twee beter werkt bij je eindgebruiker.

6. Onthoud: de vinger is geen cursor

Met een touchscreen is het anders navigeren dan met een muis. Niet alleen zijn de schermen van smartphones en tablets kleiner, het navigeren met een vinger gaat niet zo precies als met een muis. Knoppen waarop gedrukt moet worden, moeten groot genoeg zijn om met een vinger op te klikken. Tekstuele hyperlinks moeten niet te klein zijn. Daarnaast zijn steeds meer gebruikers het gewend om te navigeren door te swipen. Ook deze technieken kunnen de gebruikerservaring positief verrijken.

Tip: Maak klikbare elementen groot genoeg

Zorg ervoor dat klikbare elementen in de pagina groot genoeg zijn voor navigatie met vingers. Vergeet niet dat interactieve technieken de winkelervaring kunnen versterken, maar pas deze enkel toe als ze funtioneel bijdragen. Het is belangrijk voor app developers dat ze bekend zijn met de ontwerpprincipes van mobiele besturingssystemen, zoals die van iOS, Android of Windows.

7. Begeleid de gebruiker

Het gebruik van de mobiele versie van je webshop moet zo makkelijk mogelijk zijn. Je wilt niet dat een klant lang moet zoeken, door ontelbare categorieën moet klikken of ellenlange formulieren moet invullen. De eindgebruiker wil weten waar hij zich bevindt in de shop, met welke elementen hij een actie kan uitvoeren en met welke niet. Zoals eerder benoemd, kunnen bekende designelementen hierbij helpen, maar ook handige toevoegingen als filterfuncties en tooltips.

Tip: Kijk naar intelligente functionaliteiten

Intelligente functionaliteiten zoals begeleidende tooltips en filter- en zoekmogelijkheden komen de gebruiksvriendelijkheid ten goede. Ook autosuggesties bij formulieren en snelkoppelingen, om direct te bellen met de klantenservice, maken de winkelervaring prettig.

8. Denk aan apparaatspecifieke features voor apps

Smartphones en tablets beschikken over verschillende features die erg nuttig kunnen zijn voor de gebruiker. Als de winkelier naast de webshop ook een fysieke vestiging heeft, dan kan de app gebruik maken van gps. Dit maakt het eenvoudig voor appgebruikers om de weg naar de vestiging te vinden. Verder is mobiel betalen volop in ontwikkeling, met bijvoorbeeld Rabo Wallet en betalen via social media als recente voorbeelden. Dergelijke ontwikkelingen zijn interessant om in de gaten te houden.

Tip: Test met echte gebruikers

Als je apparaatspecifieke features voor je app wilt gebruiken, zorg er dan voor dat je deze functionaliteiten goed test met echte gebruikers die in echte omstandigheden op de (specifieke) devices test. Zo weet je niet alleen of de app goed werkt, maar ook of het aansluit bij de verwachting van je klant of eindgebruiker.

9. Optimaliseer de winkelwagen

De winkelwagen is erg belangrijk voor je webshop. Zo kan de gebruiker ten alle tijden zicht houden op de producten die hij of zij wil kopen. Bovendien komt het de koopervaring ten goede als de producten in de winkelwagen bewaard kunnen blijven.Zorg dat gekozen producten makkelijk toegevoegd en verwijderd kunnen worden. En is een gebruiker ingelogd op de mobiel als hij of zij dingen in de winkelwagen stopt, dan is de verwachting dat hij of zij het proces op een ander apparaat voort kan zetten.

Tip: Maak het bestelproces zo makkelijk en overzichtelijk mogelijk

Hoewel het aanmaken van een account een extra stap is, kun je hier de winkelwagen van de mobiele versie synchroniseren met een desktopversie. Aan de achterkant kunnen die gegevens wel helpen voor de klantbinding.

10. Bied voldoende betaalmogelijkheden

Klanten moeten hun gewenste betaalmanier tussen de mogelijkheden kunnen vinden. Bedenk echter of je zoveel mogelijk methoden wilt aanbieden: overzichtelijkheid is ook belangrijk. In Nederland wordt online veel gebruik gemaakt van iDEAL, PayPal en creditcard. Voor buitenlandse klanten zijn er uiteraard aanvullende betaalmethoden.

Tip: Stroomlijn het afrekenproces

Stroomlijn het afrekenproces op een gebruiksvriendelijke, maar veilige manier. Vereenvoudig het registratieproces voor mobiele gebruikers en bied de mogelijkheid zonder aanmelding een betaling te verrichten. Bied de mogelijkheid om te betalen met bekende betaaldiensten als iDEAL, PayPal en creditcard.

Mobiele versie van een webshop is niet vanzelfsprekend

Of een webshop nu als app, website of in hybride vorm komt, de gebruiksvriendelijkheid is een bepalende factor voor het succes ervan – niet alleen het productaanbod. Een mobiele versie van een webshop is alleen niet vanzelfsprekend. Er zijn aardig wat uitdagingen bij het ontwikkelen van een gebruiksvriendelijk bezoek- en koopproces, maar bij een grondige aanpak zal de investering een duurzame zijn. Mobiel betalen is namelijk volop in ontwikkeling en dit wordt bijgestaan door een groeiend internetgebruik en veel verschillende devices.

Laat deze tien tips je helpen om tot een aansprekende mobiele webshop te komen. Zet alle gewenste functionaliteiten op een rij, houd het gebruik simpel en het geheel overzichtelijk en betrek je eindgebruikers bij het ontwikkelproces door met ze te testen. Zo vorm je de basis voor een succesvolle mobiele webshop.

Illustratie intro met dank aan Fotolia.