- Inleiding
- Hoe laat je artikelvoorraad het best zien?
- Hoe laat je winkelwageninhoud het best zien?
- Conclusie
- bronnen
In een feedback gepsrek met een van mijn docenten kreeg ik als feedback punt dat mijn usability niet overal even goed is.
Dit komt doordat de gebruiker niet duidelijk geinformeerd word over waarom hij een bepaalde hadeling niet kan doen.
Of dat er een getal in beeld als misleidend kan worden gezien. Na deze feedback te hebben ontvangen ben ik in mijn project een aantal van deze fouten gezocht.
Om deze punten te verbeteren heb ik eerst gekeken naar hoe andere webshops dit gedaan hebben om de usability voor hun gebruikers te verhogen.
Ik heb hierin naar 4 verschillende webshops geken om veel verschillende indrukken te krijgen. Deze webshops zijn: Coolblue, Bol.com, Etrias en Hema.
Ik heb voor deze webshops gekozen omdat ik hier mee naar verschillende type webshops kijk en naar de grootste.
Nadat ik dit gedaan heb heb ik in mijn eigen app hier een aantal variaties op gemaakt en aan een testpanel gevraagd wat hun het fijnst vonden.
In dit onderzoek zal ik ingaan op 2 punten van usability binnen mijn Vue frontend.
Het eerste usability item dat ik ga onderzoek is de artikelvoorraad. Op dit moment begrensd de frontend het maximaal aantal van een product dat je kunt bestellen aan de hand van de artikelvoorraad. Maar de frontend geeft de gebruiker hier geen melding van, waardoor de gebruiker niet wist waarom hij er maar bijvoordbeeld 7 van dit item kon bestellen.
Om te kijken hoe anderen webshops dit deden heb ik zoveel mogelijk van 1 product proberen te bestellen en gekeken of er een melding gegeven wordt. Als er een melding gegeven werd heb ik gekeken wat voor melding het was en welke informatie er allemaal in deze melding staat.
Bij Coolblue heb ik meerdere verschillende artikellen geprobeerd omdat ik geen melding of iets kreeg. Zo kon ik van alle producten er 999 bestellen en beloofde Coolblue nog steeds dat ik ze de volgende dag in huis zou hebben. Het max aantal te bestellen van 1 product staat bij Coolblue dus hardcoded vast op 999. Conclusie: Coolblue houd geen rekening met artikel voorraden en geeft de gebruiker geen enkele begrenzing of melding als er van het product niet voldoende op voorraad is.
Bij Bol.com heb ik een paar honderd TP-Link TL-SG105 proberen te bestellen, toen ik naar de bestelpagina ging gaf Bol.com mij de volgende melding.
 |
|---|
| Warning van Bol.com |
In deze melding geeft Bol.com aan om welk product in je winkelwagentje gaat. Hierin geven ze aan het gewenste aantal niet op voorraad te hebben waardoor de levertijd langer wordt. Ook geven ze hun huidige voorraad(in dit geval 45) als advies aantal om de gewoone levertijd te behouden.
Bij Etrias heb ik 100 tennisballen proberen te bestellen. Op het moment dat ik dit invul laat hij dit aantal staan en geeft hij een melding.
 |
|---|
| Melding van Etrias |
In deze melding geven ze aan de gebruiker niet aan wat er niet klopt ze zeggen alleen bad request. De gebruiker weet dus niet precies wat er aan de hand is. Op het moment dat je doorgaat naar de bestel pagina zal hij het bestelde aantal aanpassen naar de aanwezige voorraad, echter laat hij dit niet aan de gebruiker weten. Als je dit als gebruiker niet controleert denk je dat je er meer besteld dan dat je daadwerkelijk krijgt.
Bij de Hema heb ik veel zwembroeken proberen te bestellen, echter lukte dit niet omdat de input begrensd is op de artikel voorraad. Dit is de eerste site waarbij de input een hoger aantal niet toelaat de andere site's kun je alles invullen.
 |
|---|
| Melding van Hema |
De melding geeft duidelijk aan dat ik maar 3 van dit artikel kan bestellen waardoor ik als gebruiker snap waarom ik er maar 3 kan invullen in het aantal vak.
Na te hebben gezien hoe andere webshops dit doen heb ik voor mijn eigen site 3 alternatieven gemaakt die geinspireerd zijn op alle voordbeelden die ik gezien heb.
 |
|---|
| origineel element |
Hierboven zie je hoe het er op mijn webshop origineel uitziet.
Een van de variaties die ik gemaakt heb is een error in het rood zodat de gebruiker duidelijk ziet dat er iets niet klopt.
 |
|---|
| voordbeeld met error |
Hier naast heb ik nog een blauwe message box gemaakt die zegt wat het maximaal te bestellen aantal is.
 |
|---|
| voordbeeld met message |
Als laatste heb ik nog een variatie gemaakt waar de artikel voorrad onder het artikel komt te staan.
 |
|---|
| voordbeeld met aantal |
Nadat ik deze voordbeelden gemaakt heb heb ik deze voorgelegd aan een test om te kijken welke mogelijkheid bij hun het beste in de smaak valt.
Dit testpanel bestaat uit gebruikers van webshops en mensen die voor webshops werken.
Dit om te zorgen dat het testpanel zo goed mogelijk aansluit bij de doelgroep voor de applicatie.
Nadat ik deze voordbeelden heb voorgelegd aan het panel kwam hier de volgende conclusie uit.
Het test panel wil een combinatie uit meerdere voordbeelden.
Zo willen ze dat standaard de artikel voorraad in beeld is en ze een melding krijgen las ze teveel proberen te bestellen.
De melding die vanuit hun de voorkeur kreeg was de error message in het rood.
Dus het artikel aantal altijd in beeld en bij overschreiden de rode error weergeven.
Het tweede usability item dat ik ga onderzoek is de winkelwageninhoud. Op dit moment laat de frontend het aantal verschillende producten zien
en niet het totaal aantal artikelen in de winkelwagen.
Dit zou voor de gebruiker verwarrend kunne zijn omdat ze nu niet precies weten wat er in de winkelwagen zit.
Om te kijken hoe anderen webshops dit deden heb ik van 1 product 2 besteld en van een andere product 3.
Toen heb ik gekeken naar het aantal dat bij het winkel wagen staat.
Coolblue laat de het aantal artikelen in het mandje zien en niet het aatal verschillende.
 |
|---|
| winkelwagen Coolblue |
Bol.com laat de het aantal artikelen in het mandje zien en niet het aatal verschillende.
 |
|---|
| winkelwagen Bol.com |
Etrias laat de het aantal artikelen in het mandje zien en niet het aatal verschillende.
 |
|---|
| winkelwagen Etrias |
Hema laat de het aantal artikelen in het mandje zien en niet het aatal verschillende.
 |
|---|
| winkelwagen Hema |
 |
|---|
| winkelwagen aantal Hema |
Alle webshops waar ik naar gekeken heb laten het aantal verschillende artikelen zien en niet het aantal verschillende.
 |
|---|
| origineel winkelwagen aantal |
Hier boven zie je het origineel waar ik het aantal verschillende artikelen laat zien.
Ik heb dus ook een variatie gemaakt waarin ik het totaal aantal producten lat zien ipv het aantal verschillende.
 |
|---|
| winkelwagen aantal totaal |
Toen ik deze mogelijkheden aan het test panel liet zien waren ze redelijk verward dat ik maar 1 voordbeeld alleen het aantal verschillende artikelen liet zien.
Hierin is dus al duidelijk dat de testers voor het totaal aantal artikelen gaan. Dit word inderdaad ondersteund door de menig van het panel.
Hier moet dus de totale aantal artikeln worden laten zien voor de beste usability.
In dit onderzoek ben ik to de conclusie gekomen dat de usability van mijn website op een aantal punten verbetert kan worden.
Ook niet dat er een goede oplossing is maar ook meer dat er een combinatie van meerdere oplossingen gemaakt kan worden.
De punten die verbetert kunnen worden zijn dan ook:
Het max aantal dat je van een product moet bestellen. Hiervoor wil de klant beter geinformeerd worden door de artikel voorraad altijd in beeld staat.
Hierbij willen ze ook een opvallende error message als dit aantal toch overschreden wordt.
Bij het aantal van de winkel wagen willen ze het totaal aantal artikelen zien en niet het aantal verschillende.
Dit zorgde namelijk voor verwarring.
Door dit onderzoek ben ik naast dat ik een verbeterde ui heb ook beseft dat je op meerdere manieren naar ui schets kan kijken
en dat de oplossing vaak in een combinatie van dit is i.p.v. 1 goede oplossing.