Effectief webwinkelontwerp: 5 richtlijnen

Het ontwerp van uw webwinkel functioneert niet alleen als toonbeeld van een professionele uitstraling, het draagt ook bij aan het overbrengen van uw identiteit en het verhogen van het conversiepercentage.


Tekst: Christian Waijers

Een goed webwinkeldesign voldoet aan de volgende voorwaarden:

1. authentiek: het sluit aan bij uw identiteit
2. simplistisch: het legt de focus op de producten 
3. visueel: het maakt slim gebruik van tekst formatting en afbeeldingen
4. consistent: het laat verschillende designelementen regelmatig terugkomen
5. overtuigend: het oogt professioneel en spreekt uw doelgroep aan

1. Authentiek
Het ontwerp van uw website is de manier om uw identiteit naar buiten toe kenbaar te maken. Met een eigen, unieke huisstijl onderscheidt u uw winkel van uw concurrenten en zorgt u ervoor dat bezoekers uw webshop eerder zullen herkennen en onthouden. U hoeft hier niet voor overboord te gaan bij het designen, met enkele subtiele elementen kunt u uw identiteit al duidelijk uitstralen:

• zorg voor een uniek en herkenbaar logo
• kies een vaste kleurencombinatie die past bij uw identiteit
• voer uw huisstijl door in al uw uitingen, zelfs in de facturen
• verwerk er uw belangrijkste USP's (unique selling points ) in

Samengenomen draagt dit in sterke mate bij aan de authenticiteit van uw webwinkel.

Voorbeeld
Fonq.nl is een goed voorbeeld van een website met een authentieke uitstraling. De identiteit van Fonq.nl en tevens de pay-off  ‘Hèt eigentijdse webwarenhuis’ komt duidelijk terug in de huisstijl. Bijvoorbeeld in het eigenzinnige en speelse logo, in de gewaagde kleurencombinatie (bruin, blauw en paars) en de uitgebreide, moderne serviceopties: gratis retourneren, afleverdag kiezen, next-day delivery, achteraf betalen en dergelijke.

2. Simplistisch
De kern van elke webwinkel is het productaanbod. Het doel van de website is om bezoekers tot aankoop over te laten gaan. Om de kans op conversie zo hoog mogelijk te maken is het dan ook belangrijk dat bezoekers dit proces ongehinderd kunnen volgen. Zorg er dus voor dat uw producten altijd centraal staan binnen de webshop en dat alle onnodige afleiding hierbij zo veel mogelijk wordt beperkt. 

• zorg voor een onopvallende achtergrond:
  - gebruik niet veel verschillende kleuren (bij voorkeur niet meer dan één of twee)
  - kies conservatieve, neutrale kleuren: matwit, matgrijs of andere lichte kleurtinten
  - wat decoratie of styling is prima, maar hou het op de achtergrond
  - plaats liever geen foto's; als u foto's gebruikt, bewerk ze dan zo dat ze naar de achtergrond vallen (hoge transparantie, laag contrast)
• gebruik een niet te grote, rustige header:
  - bij voorkeur niet veel hoger dan 100-150 pixels
  - het logo mag opvallen, maar probeer andere uitingen er subtiel in te verwerken
  - overige tekst, logo's en symbolen zijn prima, maar vermijd opvallende afbeeldingen (behalve voor de winkelwagen)
• bedenk van te voren bij elk element dat u op de homepage of over de gehele website plaatst of het niet te veel afleid

Op het bovengenoemde zijn natuurlijk uitzonderingen mogelijk. Het kan zijn dat uw doelgroep juist getriggerd moet worden met een opvallend ontwerp. Een origineel en eigenzinnig ontwerp dat de aandacht trekt is dan prima, maar zet ook in die situatie uw producten centraal. Hou er verder rekening mee dat bezoekers schreeuwerige banners associëren met reclame-uitingen. Acties en aanbiedingen mogen opvallen, maar zorg dat u niet gaat adverteren op uw eigen website. Zorg dat het past in de stijl van uw site. 

Voorbeeld
Bij  Sjaalmania.nl staan de producten duidelijk centraal op de voorgrond. Alles wat hier omheen is gezet, dient om de producten zo goed mogelijk aan potentiële klanten te presenteren.

3. Visueel
Bezoekers scannen een website en beslissen in enkele seconden of zij bij uw webshop aan het juiste adres zijn voor het vervullen van hun behoeften. Besluiten ze om langer op uw site te blijven, dan willen ze met zo min mogelijk ongemak de producten en informatie vinden waar ze naar op zoek zijn. 

Dat de manier waarop u uw content presenteert hier een cruciale rol inspeelt, stond al vast, maar ook het ontwerp heeft hierin een belangrijk aandeel. De homepage is doorgaans een bolwerk van uitingen: u wilt hier uw belangrijkste categorieën en producten presenteren, acties aankondigen, bezoekers overtuigen met uw USP's en ze geruststellen met logo's, keurmerken, certificaten en klantreviews. Bovendien is het wel zo handig als uw klanten altijd zicht hebben op de (inhoud van de) winkelwagen, op de zoekfunctie, social media-iconen en dat ze zich direct kunnen inschrijven op de nieuwsbrief.

Door een slim gebruik van afbeeldingen en tekstuele formatting kunt u al deze uitingen kwijt zonder dat uw bezoeker het overzicht verliest. Denk hierbij aan:

• gebruik van verschillende kleuren (maar in de regel niet meer dan drie) om nabij geplaatste elementen met een verschillende functie van elkaar te scheiden, of juist om bepaalde elementen te benadrukken
• variëren met tekstuele formatting om belangrijke tekst te onderscheiden van minder belangrijke tekst:
  - tekstgrootte
  - tekstkleur
  - tekststijl: dikgedrukt, cursief of onderstreept (onderstrepen alleen gebruiken als het een link betreft om verwarring te voorkomen)
• witruimtes inzetten om verschillende elementen duidelijk af te zonderen

Voorbeeld
Een mooi voorbeeld van een website die dit op de juiste manier toepast is Tas.nl. In nagenoeg één oogopslag zie je wat de webwinkel te bieden heeft en waar je als (potentiële) klant aan toe bent, zonder dat je het gevoel hebt dat er te veel informatie tegelijk op je af komt.

4. Consistent
Heeft u gekozen voor een bepaalde sitestructuur, styling, kleurencombinatie, lettertype, taalgebruik, aanspreekvorm, toon etc.? Voer deze dan ook consistent door op de website. Bezoekers verwachten dat gelijksoortige elementen - zoals knoppen, menu's, productinformatie - steeds op dezelfde plek terug komen en op dezelfde wijze worden gepresenteerd.

Dit is vooral belangrijk bij de navigatie en productpresentatie. Een goed voorbeeld is het screenshot van Tas.nl hierboven. Iemand die op het menu ‘Dames’ klikt en vervolgens een uitklapmenu krijgt te zien, verwacht hetzelfde respons wanneer hij op het menu ‘Merken’ klikt. Als dit menu vervolgens niet blijkt uit te klappen (maar een directe link is naar de merkpagina), schept u een onverwachte reactie - wat kan resulteren in een afhaakmoment. De menu's ‘Home’, ‘Sale!’ en ‘Nieuw Binnen!’ creëren door een andere styling, ook een andere verwachting. Net als bij de punten uit de vorige sectie zijn hierop de regels van Gestaltpsychologie van toepassing. Een onderwerp waar op zichzelf al een heel artikel aan gewijd kan worden. 

Voorbeeld
Styling & Trends laat de gekozen huisstijl en structuur consistent terugkomen door de gehele website heen. De navigatie reageert op de hele website hetzelfde en de presentatie van categorieën, artikelen en informatie is samenhangend en gestructureerd.

5. Overtuigend
In de eerste plaats moet het ontwerp uw bezoekers overtuigen dat ze in een professionele webshop zijn beland. Een online koper stelt zich kwetsbaar op door zijn persoonlijke gegevens te overhandigen en (vooruit)betalingen te verrichten. Veel meer dan met keurmerken of veiligheidslogo’s geeft u met een professioneel ontwerp uw bezoeker het gevoel dat hij op een vertrouwde plek is waar zijn bestelling correct en veilig wordt afgehandeld.

Naast een betrouwbare uitstraling is het ook van belang dat uw doelgroep zich door het ontwerp voelt aangesproken. Dit geldt vooral voor winkels die zich richten op een specifieke doelgroep. Voor een webwarenhuis is het daarom minder relevant, maar voor een webshop in sieraden, kinderkleding of designmeubels is het handig om hierop in te spelen. Zeker als het zich ook nog eens in een niche bevindt, bijvoorbeeld retro designmeubels.

Een goede kennis van uw doelgroep en hun interesses en waarden is hierbij van essentieel belang. Door met de juiste afbeeldingen, kleuren en symbolen op hen in te spelen, creëert u een bepaald gevoel, waardoor er al snel een binding ontstaat met uw website. Dit kan het conversiepercentage een flinke boost geven.

Voorbeeld
Cayboo.nl, een winkel in bamboeproducten, haakt met het ontwerp duidelijk in op zijn doelgroep: liefhebbers van natuurproducten met een duurzame lifestyle.

Uitdaging
Voldoet u aan deze vijf richtlijnen, dan ligt voor u de uitdaging om dit ook steeds door te voeren in de centrale content van uw website om uw categorieën en producten op een effectieve wijze te (blijven) presenteren.

Christian Waijers is online marketeer bij Mijnwebwinkel, een platform waarmee ondernemers een webwinkel kunnen beginnen.