Hoe Krijg je Wijzig Aantal in de Winkelwagen Goed?

Vrijwel iedere e-commerce winkelwagen toont het aantal keer dat een bepaald item in de wagen zit. Echter, deze ogenschijnlijk simpele waarde kan leiden tot enkele serieuze conversie blockers.

Het aantal veld

Een van de opties die aanwezig is in vrijwel iedere winkelwagen van Magento tot WooCommerce en verder is het aantal veld. De functie lijkt simpel: toon het aantal keer dat een bepaald item aanwezig is in de winkelwagen. Echter, kijkende naar de grote hoeveelheid verschillende implementaties van dit veld, lijkt er nog geen goede best practice te zijn hiervoor. Dit kan er voor zorgen dat vele website eigenaren het wiel opnieuw gaan uitvinden, vaak met ongewenste gevolgen.

Probeer de term 'qty' te vermijden

In het Engels wordt de term 'quantity' vaak afgekort tot qty, hetgeen bezoekers kan verwarren. Zeker voor bezoekers die Engels niet als hun eerste taal hebben, kan er verwarring optreden over waarvoor deze afkorting staat.

Jamie Appleseed - Co-founder van Baymard Institute

"Hoewel de meeste mensen wel weten dat 'QTY.' een afkorting is voor de term 'Quantity', moet je ook rekening houden met bezoekers van wie Engels niet hun eerste taal is.

Dit is met name van toepassing wanneer er meer dan genoeg ruimte is om het volledig woord weer te geven."

De beruchte 'Wijzigen' knop

De meest voorkomende implementatie die bezoekers de hoeveelheid van een item laat aanpas is een Wijzigen knop (in het Engels 'Update Cart'). Andere bekende variaties zijn bijvoorbeeld een [-] en een [+] knop of een 'ververs' icoon. Al deze opties vereisen dat er aanvullende elementen in de winkelwagen geplaatst dienen te worden en/of dat bezoekers moeten gaan uitzoeken hoe ze het aantal items veranderen. Zeker gezien de winkelwagen al één van de drukste pagina's op veel webshops lijkt het een goed advies aan site eigenaren om het aantal niet-vereiste elementen tot een minimum terug te brengen.

Probeer je Wijzigen knop dichtbij je 'Aantal' veld te plaatsen. Immers, bezoekers kunnen slechts een zeer klein vlak van het scherm scherp zien. Wanneer ze buiten hun zichtveld moeten zoeken naar elementen dan zorgt dit voor frictie, wat hen kan doen besluiten de webshop af te sluiten.

Wat 'Wijzigt' wijzigen?

Een aspect aan de Wijzigen knop dat vaak over het hoofd wordt gezien is dat het voor veel bezoekers niet geheel duidelijk is wat er gebeurt wanneer ze er op klikken. Frequente winkelaars zullen dezer dagen wel weten dat het waarschijnlijk alleen het aantal wijzigt, maar hoe kunnen zij dit zeker weten? Om te zorgen voor de kleinst mogelijke hoeveelheid frictie zou de knop herschrijven naar Wijzig aantal bijvoorbeeld al kunnen helpen.

De beste oplossing voor jouw webshop

Gebruik een data-gedreven aanpak

Er zijn verschillende vragen die je jezelf dient te stellen voordat je besluit hoe je jouw aantal selectie er uit laat zien. Alleen door vragen als deze te beantwoorden kun je er achter komen welke oplossing waarschijnlijk het beste werkt voor jouw publiek.

→ Input veld met type="text"

Momenteel lijkt dit de meest populaire manier om de hoeveelheid van een item in de winkelwagen weer te geven. In technische termen omvat dit een input element met een type="text" attribuut. Dit zal er voor zorgen dat je veld oogt als een standaard invulveld dat je vindt op website en afreken checkouts op het internet.

Voordelen van deze oplossing

Het feit dat dit moment de standaard oplossing is en veel mensen weten hoe het werkt is een belangrijk pluspunt voor deze oplossing. Daarbij houden mensen meestal niet van verandering, dus de zaken zo laten zoals ze zijn kan hierom de beste oplossing voor jouw webshop zijn.

Problemen met deze oplossing

Het meest belangrijke minpunt van deze oplossing is de eerder genoemde Wijzigen knop. Een dergelijk knop kan een link zijn naast het item of zelf een echte knop die bezoekers in staat stel alle aantallen in één keer tegelijk aan te passen.

Hoe dan ook zorgt het voor opnieuw een extra element die de aandacht van bezoekers zal moeten trekken, iets dat je bij voorkeur niet wilt. Immers, de Afrekenen knop dient de visuele rockster van de winkelwagen pagina te zijn. Een andere subtiele oplossing voor dit probleem is om een kleine Update link naast elke aantal veld te zetten.

→ Input veld met type="number"

Een moderne variant van degene hierboven. In dit geval wordt er opnieuw gebruik gemaakt van een input element maar dit maal met een type="number" attribuut. Het nummer veld is een relatief nieuw type veld en is een onderdeel van de set aan HTML5 input types. Dit alternatief wordt ondersteund door de meeste moderne browsers en valt netjes terug op een text veld voor browsers die het niet ondersteunen. Het nummer veld type biedt iedere voordelen over het gewone tekst veld.

Voordelen van deze oplossing

Het biedt bezoekers een manier om de waarde te verhogen zonder dat hiervoor aanvullende Javascript benodigd is. Daarbij stelt het je in staat om een minimum en maximum waarde aan het veld te koppelen, wat het aantal items dat een bezoeker kan selecteren beperkt. Op veel browsers lijkt het tevens niet-numerieke waardes te blokkeren, wat kan helpen met de validatie van de invoer.

Problemen met deze oplossing

Dit veldtype laat op sommige browsers niet-numerieke waardes toe en toont op mobiele apparaten geen numeriek toetsenbord. Wanneer je geïnteresseerd bent in deze mogelijkheden, dan kun je het type="tel" veldtype verkennen of leren over andere mobile input types.

→ Dropdown selectie veld

In plaats van een input element te gebruiken, zet deze oplossing een element. Zeker voor minder ervaren mobiele gebruikers kan het uitdaging zijn om de juiste waarde te selecteren met behulp van de spinner. Gebruikers testen kunnen ingezet worden om te kijken of de doelgroep goed in staat is om dit te doen.

Voordelen van deze oplossing

Ten eerste kunnen bezoekers alleen kiezen uit de waarden die hen aangereikt worden. Dit zal tevens helpen met de validatie van het veld. Daarbij zal de vastgestelde set aan waardes je in staat stellen om een maximale hoeveelheid per item in te stellen die mogelijk zelfs verbonden kan zijn aan je voorraad database. Hieraan toegevoegd zullen mobiele gebruikers de standaard spinner te zien krijgen die hen eenvoudig in staat stelt om het aantal te kiezen wat zij willen. Tenslotte biedt het element aanvullende JavaScript acties die gekoppeld kunnen worden aan het selecteren van een aantal. Door het verbinden van een Wijzigen Javascript function aan een onChange event van het selectieveld kun je mogelijk een te sterk aanwezige Wijzingen knop achterwege laten. Houd hierbij wel in gedachten dat bezoekers the hun JavaScript uitgeschakeld hebben alsnog een knop dienen te zien om hun winkelwagen aan te passen.

Problemen met deze oplossing

Het meest prominente probleem is gerelateerde aan de mobiele gebruikersvriendelijkheid van het select element. Zeker voor minder ervaren mobiele gebruikers kan het uitdaging zijn om de juiste waarde te selecteren met behulp van de spinner. Gebruikers testen kunnen ingezet worden om te kijken of de doelgroep goed in staat is om dit te doen.

→ Knoppen met [-] en [+]

Deze oplossingen gebruik knoppen of links die geplaatst zijn rondom een inout field. Deze oplossing wordt steeds vaker ingezet en met goede redenen.

Voordelen van deze oplossing

Een van de grootste voordelen van deze oplossing is dat het bezoekers zowel de mogelijkheid biedt om aantallen handmatig in te voeren als te klikken/tappen. Dit zorgt ervoor dat het een uitstekende optie is zowel voor de desktop als voor mobiele apparaten. Daarbij is het zowel intuïtief ("Ik wil meer items") en gebaseerd op de aanname dat de meeste bezoekers het aantal toch niet zullen aanpassen of dit zullen doen met kleine verhogingen of verlagingen.

Problemen met deze oplossing

Wanneer je wilt dat de prijzen in de winkelwagen ook aanpassen wanneer de bezoeker klikt op [-] of [+] dan dien je hiervoor JavaScript in te zetten. Net als met de oplossing hierboven Dien je er rekening mee te houden dat de winkelwagen nog wel werkt voor bezoekers die dit uitgeschakeld hebben. Daarbij worden er opnieuw extra elementen toegevoegd aan de winkelwagen. Echter gezien de nabijheid tot het element in de intuïtieve manier waarop zij werken zullen zij niet zo opvallen als de Wijzigen knop die al vele malen eerder is benoemd.

→ Statisch aantal

Wanneer je onderzoek aantoont dat bezoekers slechts zelden de aantallen in een winkelwagen wijzigen waarom zou je deze oplossing dan sowieso aanbieden? Immers je kunt ze het aantal items ook al laten selecteren op de productpagina. Hierom zou een algemene Wijzigen link ze in staat stellen om zowel opties als de maat of kleur en het aantal tegelijk aan te passen.

Voordelen van deze oplossing

Door het verwijderen van de optie om de aantallen aan te passen zal de afleiding in de winkelwagen tot een minimum beperkt zijn. Dit zal ervoor zorgen dat bezoekers zo min mogelijk mentale energie hoeven te besteden aan de acties die zij dienen te doen in de winkelwagen zoals het nakijken welke items zijn gaan bestellen of het klikken op de knop Afrekenen.

Problemen met deze oplossing

Zoals eerder aangegeven houden bezoekers vaak niet van verandering. Wanneer ze er gewend aan zijn geraakt om de aantallen in de winkelwagen te kunnen aanpassen, en jouw website deze mogelijkheid niet biedt, dan zou dit ervoor kunnen zorgen dat zij de website verlaten. Daarbij zou het ervoor kunnen zorgen dat de bezoekers die terug moeten naar de productpagina nooit meer wederkeren op de winkelwagen.

Aanbevelingen

Zoals de uitgebreide analyse hierboven laat zien hebben alle opties hun eigen voordelen en nadelen. Echter het is mijn mening dat het dropdown selectie veld de beste keus is voor de meeste websites.

De reden hiervoor is dat het een onaangepaste ervaring op mobiele apparaten biedt, het een eenvoudige selectie biedt, en het bekend is voor de meest gebruikers. Andere voordelen zijn onder andere de mogelijkheid tot aanvullende data validatie, het gebrek aan behoefte voor een Wijzigen knop en de mogelijkheid om de aantallen te koppelen aan de voorraad zorgen ervoor dat dit de beste keus is. Dit zelfs wanneer de genoemde limitaties in overweging worden genomen.