Onderzoeksvraag:
In dit onderzoek analyseer ik het ontwerp van het voorgaande onderzoek #7 “Hoe wordt het nieuwe websiteontwerp vormgegeven?” op ontwerpfouten en mogelijke verbeterpunten, die gevalideerd zijn op basis van A/B-tests en gebruikerstests. Dit alles met als doel de gebruikerservaring van het nieuwe ontwerp van de Den Mulder website te optimaliseren.
Mogelijke verbeterpunten zijn bepaald in een Peer Review gesprek met Tom Sonnemans (front-end developer). Deze sessie heeft zeer waardevolle inzichten opgeleverd voor het toevoegen van nieuwe onderdelen of het wijzigen van positie, iconen of teksten van huidige componenten. Zo liet Tom weten dat het dropdownmenu (links op de onderstaande afbeelding) moest worden aangepast omdat dit teveel opties bevat. Ook werd me aangeraden om de cross-sell producten bij ‘Wij adviseren’ (rechts op de onderstaande afbeelding) minder prominent te maken, omdat deze nu teveel aandacht trekt. Ook zou het toevoegen van een ‘aanbevolen combinatie’ een goede toevoeging zijn om het ontwerp te verbeteren. Naast deze punten heb ik nog meer feedback ontvangen, deze zijn te zien in het onderzoeksdocument.
Op basis van meerdere ontvangen feedback op de hoeveelheid opties in de dropdown, is onderzocht hoe andere grote Nederlandse webshops dit probleem aanpakken. Uit deze analyse blijkt dat de meeste webshops maximaal drie opties tonen per selectievak, wat overzichtelijker is, vooral op mobiele apparaten. Voor producten met meer dan zes varianten wordt een dropdownmenu aanbevolen, bij minder varianten worden (radio)buttons aanbevolen vanwege het betere overzicht. Uit dit onderzoek is gebleken dat de meeste producten bij Den Mulder bestaan uit minder dan 6 varianten per wortelverpakking. In het Figma bestand hieronder ziet u de meest voorkomende en ideale situatie.
Maar er zijn uitzonderingen van producten met wel +20 varianten. Om deze reden zijn er twee verschillende mogelijk oplossingen ontworpen. In het geval dat een artikel uit meer dan zes varianten bestaat, wordt er een dropdownmenu aangeraden. Voor het ontwerp ben ik uitgegaan van het artikel met de meeste varianten in zowel wortelverpakking als variantaantallen. In het Figma bestand hieronder ziet u een artikel selectie voor producten met hoge hoeveelheid aan varianten.
Het bovenstaande dropdownmenu is nog steeds erg lang en zal niet ideaal zijn op kleine schermen. Daarom is er een nieuw design ontworpen waarbij de radiobuttons zijn gecombineerd met een dropdownmenu.
De verzamelde feedback is verwerkt in een vijfde iteratie van het Figma-ontwerp. Hierbij is onder andere op basis van tegenvallende resultaten uit de gebruikerstest het navigatiemenu vereenvoudigd door een extra klik weg te halen. Er is een pop-up toegevoegd na het toevoegen van een artikel aan de winkelwagen, om de gebruiker meer feedback te geven dat de uitgevoerde actie is geslaagd. De ‘aan winkelwagen toevoegen’-knop is altijd zichtbaar op de productdetailpagina (PDP). Wanneer er naar beneden wordt gescrold, zal de grote rode knop aan de bovenkant van de pagina verdwijnen. Op dat moment verschijnt er een extra balk met een ‘voeg toe aan winkelwagen’-knop aan de onderkant van de pagina, die daar blijft staan. De volledige lijst met aanpassingen is te zien in het onderzoeksdocument. Deze vijfde versie van het ontwerp is hieronder uit te proberen.
In een kwantitatieve A/B-test zijn de interactieve Figma-ontwerpen getest. Deze test bevestigd welke versie van het ontwerp het beste werkt bij de gebruikers. Ontwerp A is de vierde versie en ontwerp B is de vijfde versie van het Figma-ontwerp. Testgebruikers hebben in totaal vier taken moeten voltooien en antwoord moeten geven op drie vragen. De test is gestuurd middels een persoonlijk bericht naar 22 verschillende testpersonen, die binnen de doelgroep vallen. Alle deelnemers zijn bekend met doen van online aankopen en hebben hier wel eens gebruik van gemaakt. De kennis over groen artikelen varieert bij de test personen van geen tot gemiddeld. Er zijn geen test personen met professionele achtergronden of kennis in groen artikelen.
Beide ontwerpen worden door verschillende gebruikers als overzichtelijk en duidelijk beschouwd, toch kiest 64% van de gebruikers voor ontwerp B omdat dit voor hen het beste werkte. Hoewel sommige gebruikers het een voordeel vinden om in een oogopslag meerdere opties te zien, ervaren anderen dit juist als minder prettig. Dit geldt ook voor de afbeeldingen bij ‘wij adviseren’ in ontwerp A. Dit wordt door de ene gebruiker als positief ervaren terwijl de andere gebruiker dit als een afleiding ervaart. Verder voelt ontwerp B vertrouwder aan en biedt volgens de gebruikers meer opties om uit te kiezen, wat als prettig wordt ervaren.
De test resultaten zijn hieronder te bekijken. Voor een uitgebreidere uitleg wordt u aangeraden om het volledige onderzoeksdocument te lezen.
De gebruikerstest heeft kwalitatieve gegevens verzameld om problemen met het oude en nieuwe ontwerp te identificeren. De resultaten bevestigen de eerdere bevindingen uit vraag #1 “Hoe verloopt de klantreis en waar kan deze worden verbeterd?”, zoals typefouten in de zoekbalk, trage laadtijden, en niet-gepersonaliseerde artikelen. Uit de test resultaten blijkt dat alle testgebruikers het nieuwe ontwerp beschouwen als een verbetering vanwege de modernere uitstraling, duidelijkere informatie, en compactere pagina’s.
Enkele verbeterpunten zijn te het navigatiemenu voor desktop, beperkte feedback na het toevoegen van een artikel aan de winkelwagen, en moeilijk vindbare wortelverpakking informatie. Peer review met Tom Sonnemans heeft waardevolle inzichten opgeleverd voor designverbeteringen en conversieoptimalisatie, die door een design pattern search verder zijn onderzocht en verwerkt in een nieuwe iteratie.
Een kwantitatieve A/B-test vergeleek de twee ontwerpvarianten, waarbij ontwerp B als effectiever werd beschouwd. De belangrijkste bevindingen zijn dat gebruikers zowel de zoekbalk, navigatiebalk als de ‘bekijk ons aanbod’-knop gebruiken. Dat door de aanpassingen in de menubalk het gewenste effect is behaald doordat de gebruikers in ontwerp B, twee keer zo gemakkelijk de resultaten kunnen vinden doordat er één klik minder is vereist. Dat de meerderheid van 55% heeft bij het kopen van bomen een voorkeur voor een detailfoto van het artikel in plaats van een foto van het volledige artikel. Ook is er een duidelijke meerderheid van 80% die de voorkeur heeft voor dezelfde placeholder voor een artikel zonder foto. En 64% van de gebruikers kiest voor een artikelselectie in de vorm van meerdere knoppen (ontwerp B) boven een dropdown-sectie (ontwerp A). Dit komt omdat dit er overzichtelijker en vertrouwder uitziet.
De resultaten van de A/B-test geven aan dat de meningen van de gebruikers over de vragen verschillend zijn, en de keuzes zijn bepaald op basis van de meerderheid van de stemmen. De resultaten tonen aan dat beide ontwerpen werken, maar er is een voorkeur voor ontwerp B. Alleen de belangrijkste onderdelen, namelijk het vinden van artikelen en het toevoegen van artikelen, zijn getest omdat deze de grootste impact hebben op de gebruiksvriendelijkheid en de verhoging van conversies. Er zullen dus nog tests uitgevoerd moeten worden om het ontwerp verder te optimaliseren voor de gebruiker. Het beter afstemmen op de behoeften en verwachtingen van de gebruikers zal resulteren in een hogere conversie.
De resultaten van dit onderzoek bevestigen dat de gebruikers weten hoe ze het ontwerp moeten gebruiken en dat het een duidelijke verbetering is ten opzichte van het huidige ontwerp.
Juliën Verheijen
