Webshopdesign: de 5 essentiële onderdelen voor overtuiging en betrouwbaarheid

Het maken van een goed converterende en betrouwbare webshop wordt een steeds grotere uitdaging. Dit komt onder andere door de opkomst van het aantal ‘nepwebwinkels’ en de constante groei van verkoopplatformen zoals bol.com en amazon.nl. In dit artikel licht ik toe waarom het design van een webshop (en website) vaak belangrijker is dan gedacht, inclusief voorbeelden en praktische tips hoe jij het ontwerp van je webshop kunt optimaliseren. Ik sluit af met informatie die je moet verwerken volgens een groot gebruikersonderzoek op de productpagina van je webshop. Op naar een professioneel en converterend webshopdesign.

850^x gelezen Webontwikkeling Marketing

Waarom is het ontwerp van je webshop zo belangrijk?

Mensen vormen vrijwel direct een beeld van je. In slechts één tot twee seconden hebben ze al bepaald wat ze van je vinden. Dat deze eerste indruk belangrijk is, bevestigt de wetenschap. Als iemand een bepaald beeld heeft gevormd, is het moeilijk om dit beeld nog te veranderen

Dit geldt ook voor jouw webshop of website, mensen beoordelen je dienst of product op basis van de look & feel van je website. Als het webshopdesign niet betrouwbaar overkomt, is het vertrouwen winnen van websitebezoekers bijna onmogelijk.

Tip: Verwerk de contact- en adresgegevens duidelijk op de website. Hier hechten bezoekers erg veel waarde aan en het wekt vertrouwen op.

Houdt rekening met deze 5 onderdelen voor een overtuigend en betrouwbaar webshopdesign

De eerste indruk die websitebezoekers vormen is afhankelijk van veel verschillende factoren, deze heb ik opgedeeld in onderstaande categorieën:

Layout
Kleurgebruik
Tekstgebruik
Afbeeldingen
Call to action’s

In onderstaande paragrafen worden de deze onderdelen uitgelicht en beargumenteerd waarom ze zo belangrijk zijn voor een overtuigend en betrouwbaar design van jouw webshop.

1. Optimale webshoplayout

De layout van een webshop is de verbindende factor tussen de verschillende designelementen. Een veelgebruikte regel voor de layout van een ontwerp is ‘de regel van derden’ of in het Engels ‘the rule of thirds’. Het zorgt ervoor dat je design makkelijk te scannen is door de gebruiker. Maar wat houdt deze regel in en hoe pas je deze toe in het ontwerp van je webshop of website?

Het komt neer op een rooster van 3 bij 3 dat over een ontwerp gelegd kan worden. Dit rooster helpt je met inzicht te krijgen in hoe iemand een website scant.

Voorbeeld in de praktijk

Achter het rooster is de homepagina van onze website te zien. De percentages op de foto geven aan waar gebruikers het eerste kijken. Links boven, waar 41% van de gebruikers het eerste kijkt staat kort en krachtig waar we voor staan. Linksonder, de plaats waar 25% van de gebruikers kijkt staat een kort stukje over onze aanpak. Door de content op de overige 2 focuspunten te minimaliseren krijgen de linker 2 punten bijna alle aandacht. Doordat de tekst hier kort maar krachtig geschreven is is het ook nog eens eenvoudig te scannen. Doel bereikt!

2. Kies de juiste kleuren in je webshopdesign!

Kleur is een veel te onderschat aspect van webshopdesign in mijn ogen, Het kan namelijk een zeer belangrijke rol spelen bij de usability, het ondernemen van acties en algemene sfeer, en dus indruk, van de website. Verschillende kleurencombinaties kunnen verschillende emoties en reacties oproepen. Dit komt doordat er psychologische associaties aan kleuren verbonden zijn. Daarnaast staat niet iedere kleur in iedere cultuur voor hetzelfde, zo wordt zwart in westerse landen gezien als een rouwkleur terwijl dit in oosterse landen wit is. Meer lezen over kleuren en hun betekenis?

Maak slim gebruik van contrast in je webshopdesign

Kleurgebruik speelt een belangrijke rol in het creëren van het gewenste contrast op je website. Gebruik contrast om tekst, koppen en call-to-action-knoppen zichtbaar en leesbaar te houden. Met andere woorden, je lettertype en call-to-action kleuren moeten in hoog contrast staan met de achtergrond (bijv. witte achtergrond met zwarte tekst). De elementen die je wilt benadrukken (call to action’s) moeten in een kleur zijn die opvalt tegen de rest van je website.

Bekijk ter voorbeeld hiernaast webdesign van Mailchimp, Welke elementen van deze site trekken je aandacht ondanks de kleurrijke visual?

Punt gemaakt.

Zo kan ik nog wel even doorgaan over het kleurgebruik in webshopdesign, maar daarover hebben we al een uitgebreid blog geschreven. Dus wil je hier nog meer over leren, lees dan: Het effect van kleur in je webdesign.

1. Zie tekst als een visueel element

Zoals hierboven al aangegeven wordt is het belangrijk dat de tekst er aantrekkelijk en niet ‘zwaar’ uitziet.

2. Minimaliseer het aantal verschillende lettertypes

Door meer dan 3 verschillende lettertypes (fonts) te gebruiken ontstaat het gevaar dat een tekst er slordig en onprofessioneel uitziet.

3. Beperk de lengte van je regels

Het hebben van de juiste regellengte is cruciaal voor de leesbaarheid van je tekst. Zorg ervoor dat je teksten minimaal 60 en maximaal 100 karakters lang zijn. Voor mobiele apparaten zou je rond de 30/40 karakters per regels moeten aanhouden. We komen te vaak websites tegen waarbij de tekst de gehele breedte van je scherm vult. Niet doen dus.

4. Maak goed gebruik van koppen

Door goed gebruik te maken van koppen, tussenkoppen, inleidingen en opsommingen ontstaat er een hiërarchie in de tekst wat gebruiksvriendelijk is en prettig voor het oog. Gebruikers scannen teksten op een website voordat ze de diepte in gaan (de tekst gaan lezen). Denk maar eens terug over toen je dit blog voor het eerst voor je had, ben je toen direct de eerste regel gaan lezen en vanuit daar hier terecht gekomen?

5. Zorg voor genoeg ruimte tussen de regels

Binnen de typografie is er een speciale term hiervoor, namelijk line-height oftewel lijnhoogte. Dit is de verticale witruimte tussen regels tekst. Zorg ervoor dat dit niet te veel en niet te weinig is, zie onderstaande afbeelding.

4. Gebruik de juiste afbeeldingen

Het belangrijkste bij het gebruiken van afbeeldingen is dat ze waarde moeten toevoegen aan de pagina. Dit kan zijn ter illustratie van een probleem, oplossing of het toevoegen van sfeer. Hierbij is het belangrijk dat je enkel foto’s gebruikt die van goede kwaliteit zijn. Foto’s die wazig, donker of pixelachtig zijn, komen niet professioneel over en verlagen de betrouwbaarheid. Ben je op zoek naar goede afbeeldingen om te verwerken in je webshopdesign, maar heb je niet de middelen om zelf goede foto’s te maken? Kijk dan eens op Pexels of Unsplash. Dit zijn rechtenvrije foto’s die je kan en mag gebruiken.

Maak een connectie met de gebruiker

Als we onszelf herkennen in een probleem, ergernis, gewoonte etc. voelen we ons verbonden en begrepen. Dit verhoogt het vertrouwen en werkt conversieverhogend, omdat de gebruiker hierdoor een emotionele connectie met jouw website heeft gemaakt. Probeer er dus voor te zorgen dat de gebruiker zich herkent in een aantal afbeeldingen.

Het gebruiken van portretfoto’s (foto’s met de focus op het gezicht) is nog een bekende truc om een emotionele connectie te maken met de gebruiker. Studies tonen aan dat het gebruik van mensen op foto’s conversieverhogend werkt. Meer weten over afbeeldinggebruik in webshopdesign?

“Let er op dat je afbeeldingen niet een te grote bestandsgrootte hebben. Dit vertraagt je website enorm, is niet goed voor de gebruikerservaringen en ook zoekmachines als Google zijn hier niet blij mee, waardoor je vindbaarheid verslechterd.”

Op webp-converter.com kun je je afbeelding uploaden. Deze website verkleint je afbeeldingen voor je. In webshops en websites die wij ontwikkelen implementeren we een WEBP converter die afbeeldingen automatisch converteert en optimaliseert wanneer je ze toevoegt.

Daan Verberne Mede-oprichter

5. Killer call to action’s

Dé beste call to action bestaat helaas niet. Er zijn wel enkele kenmerken waar een succesvolle call to action aan voldoet. Als je een call to action gaat ontwerpen voor je webshop hou dan in ieder geval rekening met de volgende punten:

Geef de call to action een onderscheidende kleur met een hoog contrast (zie eerder het voorbeeld van Mailchimp)
Geef de call to action een afwijkende vorm
Geef de call to action een opvallende grootte
Zorg voor voldoende (wit)ruimte om de call to action
Geef de call to action een visuele actie
Schrijf activerende short-copy in de call to action wanneer mogelijk (beschrijf de handeling)

Uit onderzoek is gebleken dat de “in winkelwagen” of “in winkelmand” de best presterende call to action is voor webshops. Op basis van vele A/B testen blijkt dat deze call to action 35 tot 320% meer conversie oplevert dan andere call to actions.

Bonustip: informatie die je moet verwerken op de productpagina van je webshop

Je weet nu waarom het design van een webshop zo belangrijk is en waar je op moet letten bij het maken of beoordelen ervan. Door de richtlijnen aan te houden ben je erin geslaagd om een positieve eerste indruk te creëren. Dankzij de juiste uitstraling van je webshop en visualisatie van je producten is de potentiële klant op een productpagina terechtgekomen. Vanaf dat moment is het het belangrijkste dat je de juiste informatie aan de potentiële klant toont.

In de afbeelding hiernaast (via Edubirdie) worden de meest belangrijke informatiepunten volgens gebruikers van webshops getoond.

Levertijden en leverkosten: Het blijkt dat bezoekers met name de levertijden/leverkosten belangrijk vinden. Zorg dat deze informatie duidelijk vermeld wordt, met een link naar uitgebreide informatie over het verzend- en retourbeleid.
Gedetailleerde productinformatie: Geef snel inzicht in de belangrijkste eigenschappen en voordelen van het product, bij voorkeur in overzichtelijke bullet points bovenaan. De bezoeker ziet dan in één oogopslag of het product aan de wensen voldoet. Niet voor niets dat de grote jongens zoals Coolblue en Bol.com dit doen.
Productspecifieke reviews: Toon productspecifieke reviews om vertrouwen te wekken. Aanbevelingen en positieve beoordelingen verhogen de kans op een conversie.

Hulp of advies voor jouw webshop?

Dat was het dan, mijn richtlijnen voor het creëren van een converterend webshopdesign. Zorg er dus voor dat jouw webshop de juiste uitstraling heeft, vertrouwen uitstraalt en alle juiste informatie bevat. Mocht je nog ergens vragen over hebben, ben je op zoek naar hulp voor het maken van jouw webshop of wil je online marketing inzetten voor het genereren van meer verkeer naar je webshop? Neem contact met ons op.