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:

1. Layout
2. Kleurgebruik
3. Tekstgebruik
4. Afbeeldingen
5. 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 webshopdesign 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?

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

Achter het rooster in bovenstaande afbeelding 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 wie we zijn en waar we voor staan. Linksonder, de plaats waar 25% van de gebruikers kijkt staat een kort stukje over onze aanpak en een call-to-action. 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.

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 onderstaand 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 over geschreven. Dus wil je hier nog meer over leren, lees dan: “Het effect van kleur in je webdesign”.

3. Tekst als aantrekkelijk visueel element in je webdesign

De uitstraling van de teksten op je website, het gebruik van fonts, is ook een enorm belangrijk onderdeel van webshopdesign. Over de manier waarop teksten geschreven dienen te worden zouden we nog een heel nieuw blog kunnen schrijven.

Voor het creëren van een website met aantrekkelijk ogende teksten hebben we 5 tips opgesteld:

• Zie tekst als een visueel element
  Zoals hierboven al aangegeven wordt is het belangrijk dat de tekst er aantrekkelijk en niet ‘zwaar’ uitziet, zie onderstaande foto.

• 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.
• 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.
• 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?
• 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.

Tip:
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.

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.

“When we see a face, we are automatically triggered to feel something or to empathize with that person,” – Sabina Idler

Meer weten over afbeeldinggebruik in webshopdesign? Lees dan het blog “het belang van sterke fotografie in webdesign“.

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.

Zie de productpagina van RBN Onderhoudsproducten, een klant van ons, die aan al deze punten voldoet.

Bonustip: Essentiële 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 onderstaande afbeelding worden de meest belangrijke informatiepunten volgens gebruikers van webshops getoond.

via Edubirdie

Het blijkt dat bezoekers met name de levertijden/leverkosten belangrijk vinden, zorg er dus voor dat deze informatie duidelijk vermeld met een link erbij waar uitgebreide informatie te vinden is over het verzend- en retourbeleid.

Wat ook erg belangrijk is is de gedetailleerde productinformatie. De bezoeker wil graag zo snel mogelijk weten of het product aan de wensen voldoet. Je kunt hierbij helpen door de belangrijkste eigenschappen en voordelen bovenaan te vermelden. Vat de belangrijkste eigenschappen van het product bijvoorbeeld samen in bullet points om de tekst overzichtelijk en leesbaar te houden. De bezoeker ziet dan in één oogopslag of het producten aan de wensen voldoet. Niet voor niets dat de grote jongens zoals Coolblue en Bol.com dit doen.

Als laatste maar zeker niet als minst belangrijk is het tonen van productspecifieke reviews. Als een product wordt aanbevolen dan koop je het veel sneller. Hoe meer goede reviews, des te beter de conversie van het product zal zijn.

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.