Webwinkels worden steeds vaker met een smartphone of tablet bezocht. Toch zijn lang niet alle webshops ingericht voor het bekijken (en nog belangrijker bestellen) op smartphone of tablet.
Responsive design lijkt hierbij een uitkomst. Maar bij een webshop zijn er wel een aantal aandachtspunten om rekening mee te houden. Want hoe zorg je ervoor dat de bezoeker gemakkelijk in je webshop kan navigeren? Hoe laat je de productpagina’s optimaal zien? En hoe maak je het bestelproces zo simpel mogelijk? Hierbij een aantal aandachtspunten.

Header

De header vormt een belangrijk onderdeel van de website. Op een desktop computer of laptop is er voldoende ruimte om deze prominent te tonen met banners en logo’s, maar op een smartphone of tablet is veel minder ruimte beschikbaar.
Om toch aan de bezoeker gelijk de nodige informatie te tonen, is het belangrijk om op een mobiel apparaat een smallere header te tonen (ongeveer 15 procent of minder van het scherm).
Een aardig voorbeeld hoe de grootte van de header de functionaliteit kan bevorderen:
responsive-design-webwinkel
Aan de linkerkant is te zien dat de website een vrij grote header gebruikt, terwijl de website aan de rechterkant meer gebruik maakt van pictogrammen waardoor de header een stuk smaller wordt.

Call to action

Vaak is de productpagina van een webshop zo ingedeeld dat de afbeelding links staat, en aan de rechterkant de product informatie met nodige call to action buttons. Op een mobiel apparaat worden de onderdelen onder elkaar getoond. Welke volgorde is optimaal voor de conversie? Hierbij een voorbeeld:
responsive-design-webwinkel-3
In bovenstaand voorbeeld is er prioriteit gegeven aan de call to action buttons. Dit onderdeel wordt dan ook bovenaan getoond, met daaronder de afbeelding en beschrijving.

Afbeeldingen

Bij een webshop leveren afbeeldingen en video’s een belangrijke bijdrage aan de conversie. Bij een responsive design blijft dit een belangrijk onderdeel. Bezuinig dan ook niet op de productfoto's, verklein deze niet tot thumbnails, maar probeer deze zo volledig mogelijk te gebruiken. Een aardig voorbeeld:
responsive-design-webwinkel
Bovenstaande webshop verkoopt herenkleding op maat. De responsive website kenmerkt zich door het beeldmateriaal, die ook op mobiele apparaten goed aanwezig is.

Buttons en links

Of je een website met een muis of vingertop bedient maakt een groot verschil. Een muis is veel nauwkeuriger dan een vingertop. Opsommingen met links in een klein lettertype zijn prima voor een desktop computer, maar op een mobiel apparaat wordt het al een stuk lastiger.
Door grote, easy-to-touch-buttons te gebruiken bij smartphones en tablets voorkom je lastigheden en verbeter je de gebruikerservaring.

Navigatie

Als laatste aandachtspunt de navigatie. Bij een desktop is er voldoende ruimte om alle beschikbare categorieën uitgebreid te tonen. Maar op de mobiele variant, is het belangrijk om alleen de essentiële categorieën te laten zien.
Natuurlijk wil je de bezoeker op een mobiel apparaat dezelfde gebruikerservaring geven, maar hiervoor hoef je niet alles tegelijk te tonen. Je laat de bezoeker richten op wat belangrijk is (het product) en toont de benodigde navigatie voor het moment.

Reageer op dit artikel

avatar
  Subscribe  
Abonneren op