Webdesign: de best practices uitgelegd door experts

Heeft u uzelf ooit afgevraagd hoe u een webshop creëert die écht converteert? Hoe zorgt u ervoor dat uw website er zowel esthetisch als ergonomisch uit ziet, maar tegelijk ook gemakkelijk te navigeren is? Welke kleuren, lettertypes en thema’s moet u kiezen? In deze blog vindt u de antwoorden op al deze vragen, uitgelegd door de design experts van Lightspeed: Étienne Leprette en Guillaume Geoffroy.

Étienne is UX-ontwerper bij Lightspeed. Dankzij zijn passie voor technologie en de evolutie van webdesign heeft Étienne meerdere bedrijven geholpen om hun website te verbeteren. Guillaume is sinds 2016 verantwoordelijk voor de Themes Store bij Lightspeed eCom. Hij is de afgelopen tien jaar webontwikkelaar geweest en is tevens verantwoordelijk voor het rekruteren en begeleiden van alle Lightspeed-partners.

De gebruikersinterface, oftewel UI – User Interface

Het is geen geheim dat een sterke visuele identiteit, prachtige afbeeldingen en een esthetische website essentiële webonderdelen zijn om bezoekers naar een webshop te trekken én te behouden. 67% van de consumenten geeft aan dat de kwaliteit van afbeeldingen belangrijker is dan de meningen van klanten of productbeschrijvingen. Het is daarom cruciaal om te investeren in aantrekkelijke foto’s en een mooi design.

Er zijn dingen waar u bijzondere aandacht aan moet besteden. Zo moet de presentatie van uw items efficiënt zijn en uw ontwerp moet harmonieus en consistent zijn (daarom wordt sterk aangeraden om vanaf het begin al bepaalde regels vast te stellen). Hier zijn enkele tips van onze experts bij Lightspeed.

Welke kleuren kan men het best gebruiken? Zijn er bepaalde kleuren die beter werken bij bepaalde producten?

Het hangt echt af van de sector waarin u werkt. Check de achterliggende betekenissen van de kleuren per land, in sommige landen kan het iets heel anders betekenen dan wat de intentie is. Volg de stijl van uw merk, en als u er nog geen heeft, kijk dan naar enkele kleurenpaletten die mogelijk voor u werken met tools z

oals Coolors of Adobe Colors. Volg eventueel de trends en kleuren van seizoenen, of gebruik originele kleurverlopen zoals Webgradients.

Interieur- en modewinkels gebruiken vaak pastelkleuren. Bij fashion webshops is het ook gewoon om veel negatieve ruimte te gebruiken: zo komen de items echt naar voren. Neem het voorbeeld van Lockwood hieronder. Doordat de website voornamelijk wit is, vallen de producten meer op.

Eén specifieke kleur die u altijd zou kunnen overwegen is blauw.. Veel designers zijn het erover eens dat blauw een universele kleur is en één van de meest gebruikte in webdesign. Neem bijvoorbeeld Facebook, Twitter of Shazam. Veel onderzoeken tonen aan dat blauw de fa

voriete kleur is van de meeste mensen. Blauw wordt als een veilige en betrouwbare kleur beschouwd.

Welke thema’s werken het beste? Zijn er thema’s die beter passen bij bepaalde producten en de verkoop stimuleren?

Elk Lightspeed-thema stelt tussen 1 en 4 verschillende verticals (dit kunnen bijvoorbeeld fashionshops zijn, of electronica-shops) voor, die specifieke features hebben. Bepaalde functies passen nu eenmaal beter bij bepaalde categorieën. Een lookbook of de “get the look”-functie is bijvoorbeeld gericht op modewinkels. 

Bijvoorbeeld het thema Voilà-Fashion. Een aftelklok creëert een gevoel van urgentie, en dit is wellicht beter geschikt voor gadget- en elektronicawinkels, zoals het Invision-thema.

Hoe kiest u het juiste lettertype?

Kies voor een eenvoudig en makkelijk leesbaar lettertype. Gebruik maximaal één of twee verschillende lettertypes. Neem het voorbeeld van populaire blog-lettertypes zoals Medium. De hoogte van de lijnen en de afstand tussen de letters zijn ook erg belangrijk. Maak een document of testpagina waar u de richtlijnen van uw website behoudt voor de kopgrootte, alinea’s, offertes, enzovoort. En volg deze richtlijnen altijd voor consistentie in uw webshop.

Neem voor leesbaarheid de tijd om zorgvuldig de lettertype-instellingen te kiezen (formaat, dikte, letterafstand en regelafstand). Het is altijd goed om geïnspireerd te worden door referenties zoals Apple (Sans serif) of Medium (Serif). Deze twee lettertypes zijn zeer goed leesbaar omdat de tekst ‘ademt’. Populaire opties op het web zijn onder andere Google-Fonts zoals Roboto. Onderscheid ook de titels van de paragrafen. Als we naar een van de bovenstaande voorbeelden kijken, zijn de titels minstens tweemaal groter dan de alinea’s en veel dikker.

De gebruikerservaring , oftewel UX – User Experience

Nu u meer weet over het belang van interface ontwerp, moet u ook nadenken over de browse-ervaring van uw bezoekers. Dat betekent, denk eens aan het gemak van navigatie van uw klanten in uw online winkel. Kunnen (potentiële) klanten gemakkelijk vinden waarnaar ze op zoek zijn? Is uw menu duidelijk? Duurt het laden van uw pagina’s lang? Zijn er niet te veel nutteloze stappen? Komen verlaten winkelmandjes veel voor? Is uw betaalproces te lang of biedt u niet alle mogelijke betaalmethoden aan?

Het geheim is om de navigatie-inspanningen te minimaliseren en ervoor te zorgen dat uw bezoekers na een minuutje uw winkel niet verlaten omdat de ervaring niet vlot verloopt. Maak het gemakkelijk voor uw klanten om te vinden wat ze zoeken met de onderstaande tips.

Hoe richt u uw navigatiebalk het beste in?

Bedenk waar uw klanten naar op zoek zijn en hoe u de informatie het beste kunt weergeven. Besteed wat tijd aan het analyseren van andere websites, concurrenten en belangrijke spelers in de sector. Kijk wat het beste werkt en haal er inspiratie uit. Mensen voelen zich op hun gemak bij wat ze al weten, dus probeer niet alles opnieuw uit te vinden, maar gebruik populaire mechanismen.

Hoe belangrijk zijn filters?

Met filters kunnen uw klanten binnen enkele seconden vinden wat ze zoeken. Gebruik dus zoveel mogelijk filters en maak ze zo nuttig mogelijk. Geef uw bezoekers de mogelijkheid om te filteren op categorie, product, geslacht, kleur, maat en merk.

Moeten we pop-upvensters gebruiken of deze liever vermijden?

Geef uw gebruikers genoeg tijd (een paar seconden) om op uw site te navigeren voordat er een pop-up venster opent. Gebruik deze pop-ups ook niet op alle pagina’s, maar selecteer de belangrijkste pagina’s. Vraag hen bijvoorbeeld om zich te abonneren op uw nieuwsbrief door hen een korting van 10% aan te bieden. Zorg ervoor dat ze het venster gemakkelijk kunnen sluiten. Er is namelijk niets vervelender voor de gebruiker dan op zoek te gaan naar het kleine kruisje om een pop-up te sluiten.

Waar moeten we op letten om de mobiele versie van uw online winkel te optimaliseren?

Lightspeed-thema’s zijn allemaal responsief en geschikt voor mobiele gebruikers. Plaats geen tekst in uw afbeeldingen omdat deze niet leesbaar zijn op mobiele apparaten. Het kan zijn dat afbeeldingen op mobiel een beetje worden bijgesneden. Plaats dus geen belangrijke elementen te dicht bij de rand van de afbeelding.

Gebruik niet te veel kleuren, geef de voorkeur aan variaties van uw hoofdkleur voor het hoofdthema en misschien een tweede kleur voor de buttons. Maak call-to-action buttons goed zichtbaar, alle klikbare items moeten groot en toegankelijk zijn wanneer men met één hand navigeert.

U kunt ook overwegen om een shopping app te ontwikkelen voor uw webshop.

Hoe kan u het betalingsproces optimaliseren? Hoeveel stappen zou het moeten bevatten?

Lightspeed biedt drie verschillende betalingsprocessen en door middel van A/B testen kan u ontdekken welke processen het beste bij uw shop passen.

Hoe minder stappen de klant moet nemen, hoe hoger uw conversieratio en hoe kleiner het aantal verlaten winkelmandjes. Wees zo duidelijk mogelijk over het betalingsproces. Geef duidelijk de betaalmethoden weer die door uw platform zijn geaccepteerd om te voorkomen dat uw klant aan het einde van het proces beseft dat hij of zij niet kan betalen.

Wist u dat 53% van de consumenten een online aankoop met slechts één klik willen kunnen voltooien?

Hoe zit het met de Call-To-Action (CTA) buttons?

Een CTA-knop nodigt gebruikers van de site uit om een actie uit te voeren. Winkeliers moeten op een creatieve manier hun buttons zo duidelijk mogelijk maken. Buttons moeten onmiddellijk zichtbaar zijn in de eerste seconden nadat iemand op de pagina komt. Als de CTA-knop niet goed doordacht, geplaatst of ontworpen is, kunnen gebruikers in de war raken. Dit verhoogt het risico op een slecht conversieratio en een matige gebruikerservaring.

Let er ook op dat u niet te veel CTA-buttons op uw pagina zet. Dit is een van de grootste fouten die webshophouders maken.