De kleur van conversie

Hoe online kleurgebruik  kan leiden tot een betere UX en conversie

KleurenschemaHet kleurenschema is één van de meest bekende basiselementen van webdesign. Kleuren zijn zeer bepalend voor de visuele uitstraling en herkenbaarheid van een website. Daarbij zijn de visuele en psychologische aspecten van kleuren erg belangrijk in de huisstijl  van bedrijven.

Kleurgebruik vanuit huisstijl laat zich echter niet één op één vertalen naar gebruik op de website. Dejan Popovic legt in dit artikel uit waarom.

Kleurenschema en e-commerce

Een juist gebruik van een kleurenschema in het ontwerp zorgt voor een visueel aangenaam en overzichtelijke uitstraling en zorgt dat gebruikers de website als “mooi”, “professioneel ogend” en “plezierig” karakteriseren.

Bovendien is kleurgebruik een onmisbaar hulpmiddel voor snel, doelgericht en probleemloos uitvoeren van bepaalde acties op een website. Correct gebruik van kleuren kan de gebruiker doelgericht door de site leiden en daarmee conversieverhogend werken. Toch wordt het vaak over het hoofd gezien dat het één op één toepassen van corporate kleuren in een online omgeving niet altijd goed werkt, vooral niet in e-commerce.

Lees verder De kleur van conversie

Tips om de zoom functionaliteit voor tablet te optimaliseren

TabletsOntwikkelingen op het gebied van mobiele platforms (tablet en smartphone) gaan razendsnel. Het is daarom belangrijk uw webshop met enige regelmaat onder de loep te nemen om te kijken hoe u met deze ontwikkelingen mee kunt gaan en er optimaal van kunt profiteren. Een belangrijk aandachtspunt, vooral in fashion, is het optimaliseren van de zoom functionaliteit.

 

De zoom functionaliteit blijkt nu namelijk voor veel webshops op een tablet slecht of soms zelfs helemaal niet te werken, vaak doordat deze:

  • reageert op basis van mouse-over. Dit is niet mogelijk op een tablet, hierdoor werkt vaak de hele zoom-functionaliteit niet of heel beperkt.
  • werkt op basis van Flash. De iPad en veel Android tablets ondersteunen dit niet. Dit zorgt ervoor dat zoom functionaliteit helemaal niet werkt.
  • opent in een lightbox (ook wel pop-up genoemd) welke vervolgens niet meer af te sluiten is.
  • niet geoptimaliseerd is voor het gebruik op een tablet, waardoor de zoom functionaliteit niet goed werkt of onverwacht gedrag vertoont.

Er zijn verschillende mogelijkheden om de zoom functionaliteit voor de tablet te optimaliseren. Deze zullen in dit artikel besproken worden aan de hand van voorbeelden uit de praktijk. Lees verder Tips om de zoom functionaliteit voor tablet te optimaliseren

Expert review voor experts in chocolade

Op 29 maart ontving Chocstar de thuiswinkel award voor de beste startende webwinkel. Een onderdeel van de prijs is een expert review, aangeboden door Eperium. De expert review van Eperium focust zich op de conversiedoelen van een site  gebruiksvriendelijkheid en het opsporen en weghalen van conversie blokkers. De review bij Chocstar is onlangs gedaan door Annemieke Raven, UX expert bij Eperium.

 

Chocstar.nl

De website van Chocstar bestaat  sinds september 2011 en is gericht op de verkoop van chocolade. Kant-en-klaar, maar ook chocolade die je zelf samen kunt stellen. De site is gemaakt in Magento, heeft een sterke grafische stijl en een gemakkelijke ‘singlepage’ check out. De chocolade wordt vaak als cadeau besteld, dit proces is daarom erg belangrijk, naast het reguliere bestelproces.

 

4 Quick wins

De site zit goed in elkaar en past qua uitstraling en productaanbod goed bij de doelgroep (voornamelijk vrouwen). Op het gebied van gebruiksvriendelijkheid kan er echter nog wel wat verbeterd worden. De gevonden verbeterpunten zijn samengevat in quick wins. Wanneer Chocstar deze aanpakt verbetert dit de gebruiksvriendelijkheid en verhoogt de conversie. De belangrijkste quick wins zijn hieronder samengevat.

1. Online waarde popositie duidelijker maken

Het is belangrijk de online waardepropositie zo duidelijk mogelijk te maken op de homepage. Bijvoorbeeld door de pay-off groter te tonen, het hoofdmenu duidelijker namen te geven en eventueel op de homepage al producten te tonen die daar direct toegevoegd kunnen worden aan het winkelwagentje.

 

2. Duidelijker webshop uitstraling geven

Belangrijke webshop onderdelen worden nu niet conform UX standaarden weergegeven. Hoe herkenbaarder deze onderdelen zijn, hoe meer vertrouwen een klant krijgt en hoe eerder men geneigd is te bestellen. Een van de aanbevelingen is bijvoorbeeld om de minibasket om te vormen tot een meer standaard basket met een logische opbouw: eerst het aantal items tonen, dan het subtotaal en afsluiten met een heldere call to action in de vorm van een bestelknop. Een andere aanbeveling is het toevoegen van een courtesy navigation met alle belangrijke help links als ‘contact’, ‘help’, ‘in de media’, ‘over chocstar’, ‘verlanglijstje’, ‘mijn account’ en ‘mijn bestellingen’. Dit zijn namelijk belangrijke links die de klant helpen belangrijke informatie altijd terug te vinden.

 

 

3. Zorgen voor een consistente navigatie

Door de algemene navigatie zo consistent en duidelijk mogelijk te maken vindt de klant gemakkelijk haar weg. Een van de quick wins op dit gebied is bijvoorbeeld de navigatie in het bestelproces. ‘Ga naar stap 3’ is hier op 3 verschillende manieren weergegeven. De aanbeveling is om alleen de ‘ga naar stap 3’ button te laten staan, omdat dit de meest logische locatie hiervoor is.

 

‘Ga terug naar stap 2’ is goed om op 2 plekken te laten staan, maar het is dan wel belangrijk dezelfde opmaak aan te houden. Dit lijken kleine aanpassingen, maar door alle kleine aanpassingen consequent door te voeren zal de algehele navigatie aanzienlijk gemakkelijker en gebruiksvriendelijker worden.

4. Zorg ervoor dat belangrijke features goed zichtbaar zijn

Een van de belangrijkste functies, het cadeau geven van de chocolade, is nu verstopt achter een link op de product detail pagina en maakt geen onderdeel uit van de reguliere bestel-flow. Bovendien is deze optie vrij lastig te gebruiken omdat de gebruiker eerst de optie in een checkbox moet selecteren en vervolgens zelf nog op de link moet klikken om het adres van de ontvanger in te vullen. Een aanbeveling is om deze optie duidelijker op te nemen in het bestelproces en daarnaast de adres lightbox gelijk te openen wanneer de klant voor deze optie kiest.

 

Big Hitter

Een belangrijke aanbeveling die wellicht de nodige structurele aanpassing vergt, maar die wel veel winst kan opleveren, is het aanpassen van de algemene navigatie. Nu overlappen bijvoorbeeld de submenu’s van het hoofdmenu elkaar waardoor navigeren lastig wordt.

 

 

Daarnaast is het linkermenu op de categorie pagina’s van ‘onze choco’s’ niet zo gebruiksvriendelijk, het is onduidelijk waar je je als gebruiker bevindt en de navigatie is niet conform usability guidelines opgezet. Het aanpassen van deze structuur zou de site een stuk gebruiksvriendelijker maken.

 

 

Vrouwelijk design

De UX expert heeft ook vanuit haar specialisme ‘design for women’ naar de site gekeken. Hieruit komt duidelijk naar voren dat de site een goede match heeft met de doelgroep. De site is visueel sterk met veel grafische elementen die de site net dat persoonlijke tintje geeft dat vrouwen aanspreekt.

Chocstar zou nog beter kunnen inspelen op de doelgroep door bijvoorbeeld laatst bekeken chocolade te tonen, waardoor klanten nog beter hun weg kunnen vinden. Of door top 5 lijstjes meest lekkere chocolade creaties aan te bieden of suggesties te doen voor succesvolle combinaties van ingrediënten.

Next steps

Chocstar is gelijk aan de slag gegaan met onze review en is de eerste aanbevelingen al aan het oppakken. Het is een jonge site, die nog volop in ontwikkeling is. De aanbevelingen van Eperium zijn een waardevolle aanvulling.

 

Ook interesse in een expert review om te kijken wat de conversieblokkers en  optimalisatiemogelijkheden zijn? Neem dan contact met ons op.

Mail adres:  Info@eperium.com

 

 

“Quick view”: fysiek winkel gedrag vertaald naar online beleving

Quick view” of “quick shop” is een vorm van productpresentatie die je steeds vaker tegenkomt op e-commerce websites, met name in de fashion. In dit artikel wordt beschreven waarom deze manier van productpresentatie zo goed werkt en worden een aantal voorbeelden bekeken.

Wat is “quick view”?

“Quick view” is de mogelijkheid om op een overzichtspagina met artikelen snel meer informatie te zien van een bepaald artikel. Dit gebeurt op een gebruikersvriendelijke manier, dus zonder dat je de pagina verlaat. Vaak zie je wat meer afbeeldingen van het artikel, een korte omschrijving en heb je de mogelijkheid om het artikel direct in je winkelmand te plaatsen.

Waarom werkt de “quick view” zo goed?

  • Op de eerste plaats omdat het een gebruiksvriendelijke manier is, je kunt snel meer informatie krijgen van het artikel om te bepalen of je het wilt bestellen of niet. Zo niet dan ga je eenvoudig verder met de overzichtspagina om een ander artikel te bekijken.
  • Op de tweede plaats is deze benadering erg sterk omdat het overeenkomt met de manier waarop je in fysieke winkels winkelt. Vergelijk het maar. Je komt een kleding winkel binnen op zoek naar een broek. Je loopt naar het rek met de broeken. Je bekijkt het rek met broeken (= de overzichtspagina) en pakt een broek die je leuk vindt uit het rek en bekijkt de broek (= de “quick view”). Als het niet bevalt hang je de broek terug. Vervolgens pak je een andere broek (= (wederom) de “quick view”). Je kijkt naar de maat en de kleur en besluit de broek mee te nemen. Vervolgens pak je nog een andere broek (“quick view”). Ook deze broek vind je leuk, maar er is twijfel. Je wilt meer informatie en besluit de verkoper een aantal vragen te stellen over de maat en de stof (= doorklikken naar “product detail pagina”).

Vier voorbeelden van “quick view” in fashion

H&M

De website van H&M heeft onlangs een restyle gekregen en maakt gebruik van de laatste inzichten op gebied van productpresentatie en usability.

Bij H&M wordt de “quick view” “quick shop” genoemd. Zodra je met de muis over een afbeelding gaat, verschijnt de knop “quick shop”. Klikken op de knop toont de “quick view” pagina met extra informatie over het artikel.

H&M quickview

“Quick view”:H&M quickview

Het tonen van relevante artikelen zit achter een knop verborgen die niet goed opvalt. Voor de rest ziet het er goed uit, de achtergrond wordt iets donkerder waardoor de “quick view” goed opvalt en dat geeft rust. Je kunt zelfs artikelen direct “virtueel” passen in de paskamer.

Zappos

Bij Zappos is de “quick view” op een originele manier ingevoerd met een leuke variant. Echter er zijn ook veel artikelen die geen “quick view” hebben. Dan moet je de knop ook niet laten zien.

Zappos Quickview
“Quick view”:

Zappos Quickvview

Zappos kiest ervoor om de achtergrond niet te vervagen wat H&M wel doet. Hierdoor wordt het wat onrustig en het maakt de navigatie onduidelijker. De overzichtspagina blijft zo wel goed in beeld. De variant is dat je met de pijltjes, links, rechts, naar boven, naar beneden over de overzichtspagina kunt “scrollen” en op deze manier alle artikelen snel kunt bekijken.

Foot locker

Foot locker maakt duidelijk dat het om een “quick view” gaat met een knopje met tekst en een vergrootglas. Op de “quick view” pagina wordt ook de productbeoordeling getoond.

“Quick view”:
Footlocker Quick view

Wehkamp

Ook de marktleider in Nederland maakt gebruik van de “quick view”. Dit wordt alleen met een “vergrootglas” symbool duidelijk wordt gemaakt. Alleen een vergrootglas geeft de indruk dat een grotere afbeelding wordt getoond of kan worden ingezoomd en dit is hier niet het geval. Beter was het om ook een tekst te plaatsen zoals “snel bekijken”.

Wehkamp Quickview

“Quick view”:

Wehkamp Quickview
Ook hier wordt de achtergrond helaas niet vervaagd.

Belangrijkste kenmerken van de “quick view”:

Op de overzichtspagina:

  • Snel, zonder naar een andere pagina te gaan, meer informatie bekijken van een artikel.
  • Snel kunnen doorgaan met de overzichtspagina.
  • Op de overzichtspagina de keuze aanbieden om de “quick view” te gebruiken d.m.v. een knop of link.

Op de “quick view” pagina:

  • Een grotere afbeelding kunnen bekijken, en/of kunnen inzoomen.
  • Meerdere afbeeldingen en/of video kunnen bekijken.
  • Omschrijving van het artikel.
  • Door kunnen klikken naar meer informatie.
  • Mogelijkheid om het artikel in de winkelmand te plaatsen of aan de verlanglijst toe te voegen.
  • Optioneel: bijpassende artikelen tonen.
  • Optioneel: delen op sociale media.
  • Optioneel: beoordeling tonen.

Conversie?

De “quick view” is een handige en gebruikersvriendelijke manier om artikelen snel te kunnen bekijken. Het helpt de consument beter in het kiezen van het juiste artikel door de beleving van de fysieke winkel te benaderen. Of het ook conversie verhogend werkt omdat consumenten minder snel afhaken is nog niet duidelijk. Duidelijk is wel dat we de “quick view” op steeds meer websites zullen tegenkomen.

Onderzoek: Online loyaliteit binnen uw webwinkel

Het aantal consumenten dat voor het eerst een online-aankoop doet, wordt steeds kleiner. Webwinkeliers kunnen er niet vanuit gaan dat hun online-verkopen maar blijven stijgen. Het opbouwen van stevige klantrelaties is de komende jaren de sleutel tot online-succes.
Loyale consumenten zijn bereid om een hogere prijs te betalen, ze kopen meer, zijn makkelijker te bereiken en zorgen voor positieve mond-tot-mond reclame. Maar loyaliteit krijg je niet zomaar. En dat geldt zeker online. Consumenten kunnen (binnen enkele minuten) meerdere webwinkels bekijken en vergelijken.

Dit artikel is een samenvatting van de recent verschenen whitepaper. Het whitepaper kun je hier downloaden.

Wat is loyaliteit?

Loyaliteit is een zeer breed begrip. In dit artikel (en in mijn onderzoek) heb ik mij beperkt tot online-loyaliteit: de mate waarin consumenten loyaal zijn aan het online-kanaal. Andere vormen van loyaliteit (zoals merkloyaliteit) en loyaliteitsprogramma’s zijn buiten beschouwing gelaten.

Online-loyaliteit bestaat uit attitude en gedrag. Een loyale online-klant draagt je webwinkel een warm hart toe én zal bij een volgend bezoek aan je webwinkel een aankoop doen. Een consument wordt echter niet van de één op de andere dag loyaal: hier gaat een proces aan vooraf.

De vier loyaliteitsfases

Het loyaliteitsproces van een consument bestaat uit vier opeenvolgende fases: cognitieve loyaliteit, affectieve loyaliteit, intentie en actie. Om de ultieme loyaliteit (actie) te bereiken, heeft je klant alle eerdere fases doorlopen.
1.    Cognitieve loyaliteit is loyaliteit gebaseerd op informatie, zoals de specifieke eigenschappen van je webwinkel en de prijsstrategie.
2.    Affectieve loyaliteit is gebaseerd op een positief gevoel. De consument koopt omdat hij of zij je webwinkel waardeert.
3.    Een intentie loyale klant is van plan om (ook) de volgende keer bij je webwinkel te kopen.
4.    Actie loyaal houdt in dat de consument niet alleen gecommiteerd is, maar daarnaast ook bereid is om obstakels te negeren. Is je webwinkel tijdelijk niet bereikbaar, dan blijft de actie loyale consument terugkomen tot hij wel bij je kan bestellen.

Negen webwinkeleigenschappen

Om de loyaliteit voor je webwinkel te vergroten, moet je allereerst een onderscheidende online-strategie ontwikkelen (ook wel online-waardepropositie genaamd) en in je organisatie doorvoeren. Mijn onderzoek toonde aan dat er negen webwinkeleigenschappen zijn die de loyaliteit onder je klanten stimuleren. Deze negen webwinkeleigenschappen worden ook wel de 9 c’s genoemd: contact interactivity, convenience, care, choice, character, cultivation, customization, community en confidentiality.

1.       Contact interactivity betreft support tools die het eenvoudiger maken om producten te beoordelen. Goede productfoto’s en heldere productbeschrijvingen (gewicht, materiaal, maat, et cetera) leggen daarvoor de basis.

2.        Convenience hangt af van de gebruiksvriendelijkheid van je webwinkel. Is het duidelijk welke stappen een consument moet doorlopen om een product daadwerkelijk te bestellen? Kan een consument eenvoudig zoeken binnen je webshop?

3.         Care beschrijft de dienstverlening rond de levering van de bestelde producten. Voldoet je levertijd aan de verwachting van de klant en houd je de klant (voldoende) op de hoogte van de status van de order?
4.        Choice betekent vanzelfsprekend de productkeuze: je aanbod aan producten in de webshop.
5.        Character staat voor de uiterlijke karakteristieken van je webshop. Waar in traditionele winkels verkopers een belangrijke rol spelen, moet bij webwinkels het design zorgen voor een persoonlijke sfeer.

6.        Cultivation betreft gepersonaliseerde berichtgeving vanuit je organisatie met als doel de verkoop van producten te stimuleren. Vooral nieuwsbrieven en e-mails met een persoonlijke benadering dragen op die manier bij aan het creëren van loyaliteit.
7.        Bij customization gaat het om het herkennen van bezoekers en het doen van persoonlijke aanbevelingen op basis van de aankoopgeschiedenis, webstatistieken en alle overige beschikbare klantinformatie.

8.        Community betreft de online-versie van samen winkelen, door het tonen van ratings en reviews.
9.        Confidentiality betreft het gevoel van zekerheid in je webshop en bestelomging. De geloofwaardigheid en betrouwbaarheid van je webshop zijn essentieel. Alleen dan zullen je klanten deze informatie aan je geven en daadwerkelijk aankopen doen.

Welke eigenschappen zijn in welke loyaliteitsfase van belang?

De resultaten van mijn onderzoek onder 1.300 online-consumenten laten zien dat de invloed van een bepaalde webwinkeleigenschap verschilt per loyaliteitsfase. Welke kenmerken effect hebben op de loyaliteit, hangt dus af van de loyaliteitsfase waarin de klant zich begeeft. Met andere woorden: uw klanten zijn in elke fase gevoelig voor andere webwinkeleigenschappen.

1.        De eerste fase in loyaliteit is cognitieve loyaliteit. Hierbij is de consument loyaal aan de webwinkel vanwege de prijs en eigenschappen zoals het gemak van online-winkelen. Uit mijn onderzoek blijkt dat convenience, confidentiality, care, choice en community vooral in het begin van de relatie van belang zijn.
2.        De tweede loyaliteitsfase is affectieve loyaliteit, waarbij de consument een voorkeur heeft voor de webwinkel omdat het leuk is om er te winkelen. In deze fase gaat het vooral om contact interactivity, convenience, confidentiality en care.
3.        De derde fase is intentie loyaliteit. Een intentie loyale consument heeft echt de intentie om in de webwinkel te kopen. Uit mijn onderzoek blijkt dat vooral customization, choice en character belangrijk zijn bij het creëren van intentie loyaliteit.
4.        De vierde en laatste fase van loyaliteit is actie loyaliteit. Een actie loyale consument geeft niet alleen de voorkeur aan een webwinkel, maar heeft ook de intentie om daar te kopen en is tevens bereid om obstakels te negeren (zoals een webwinkel die tijdelijk niet bereikbaar is). In deze fase zijn vooral choice, customization en character belangrijk.

Conclusie

Om ervoor te zorgen dat je klanten loyaler worden, moet je continu inspelen op en voldoen aan de verwachtingen van je klanten. Loyaliteit is namelijk een proces, waarbij alle fases doorlopen moeten worden. Mijn onderzoek toonde daarnaast aan dat het belang van webwinkeleigenschappen verschilt per loyaliteitsfase. Maar wat betekent dat nu precies?

Dit betekent dat een cognitieve loyale klant andere eigenschappen waardeert, dan een intentie loyale klant, enzovoort. Bestaat je doelgroep vooral uit consumenten die online komen winkelen vanwege gemak (cognitief loyaal), investeer dan o.a. in de veiligheid, gebruiksvriendelijkheid en dienstverlening. Is je klant echter al een stap verder en heeft hij de intentie om vaker bij je te kopen (intentie loyaliteit), investeer dan in personalisatie en product aanbod.

Dit artikel verscheen eerder op Twinkle.