Waar begin je met UX in je Magento-webshop? Bij de productpagina, en dan op je telefoon. Daar beslist een bezoeker of hij koopt, en daar gaat aantoonbaar veel mis. Baymard zag in een gebruikersonderzoek dat 56% van de testdeelnemers als eerste actie op een productpagina de foto’s begon te bekijken (Baymard, 2017). Op mobiel ondersteunt 40% van de onderzochte sites geen pinch- of tap-zoom op die foto’s (Baymard, 2016).
Daarna komen zoeken en filters, die je net zo snel nakijkt. Hieronder per plek wat onderzoek zegt, wat je zelf checkt en wat je developer moet oppakken.
Wat zijn UX, UI en CRO?
Drie termen die vaak door elkaar worden gebruikt, maar iets anders betekenen. UX (user experience) is hoe makkelijk iemand vindt wat hij zoekt en doet wat hij wil op je site, van zoeken tot afrekenen. UI (user interface) is het uiterlijk waarmee dat gebeurt: de knoppen, kleuren en lettertypes. Een mooie UI met een trage zoekfunctie los je niet op met een nieuwe kleur.
CRO (conversion rate optimization) is het structureel testen of een wijziging echt meer bestellingen oplevert, in plaats van aannemen dat hij dat doet. Dat gebeurt meestal met een A/B-test: je laat twee versies van een pagina naast elkaar draaien, de ene groep bezoekers ziet versie A en de andere versie B, en je meet welke versie beter scoort. Zonder die meting is een UX-aanpassing een gok, al een beter onderbouwde dan niets doen.
De productpagina
Baymard vond in hetzelfde artikel dat 42% van de gebruikers via de foto’s probeert de grootte van een product in te schatten, terwijl 28% van de 60 onderzochte grote sites geen enkele foto toont die het product op schaal laat zien, bijvoorbeeld naast een herkenbaar object of een model (Baymard, 2017). Mensen willen weten hoe groot iets is, en veel shops geven daar geen antwoord op.
Zelf check je dit op je telefoon: open je best verkochte product, probeer met twee vingers in te zoomen op de hoofdfoto (zoomt de hele pagina mee in plaats van de foto, dan telt het niet) en kijk of er minstens één foto op schaal tussen zit. Een galerij met werkende zoom inrichten is werk voor je developer, in het Hyvä- of Luma-thema. De fotografie zelf is dat niet: een foto op schaal regel je met je fotograaf of leverancier.
Tip: test pinch-zoom altijd op een echte telefoon, niet alleen in de mobiele weergave van je browser. Die simuleert de schermgrootte, niet een vinger die probeert in te zoomen.
Mobiel
Op een telefoon telt vooral of je comfortabel kunt tikken. Nielsen Norman Group adviseert tikdoelen van minimaal ongeveer 1 bij 1 centimeter, zodat een vinger niet per ongeluk de verkeerde knop of checkbox raakt (NN/g, 2019).
Tik met je duim op “In winkelwagen”, op de filters en op de checkboxes, zoals een bezoeker dat met één hand doet. Mis je vaak, of raak je het verkeerde element, dan zijn de tikdoelen te klein. Let ook op alles wat ongevraagd beweegt, zoals een carrousel die doorschuift voordat je de eerste afbeelding hebt bekeken. Grotere knoppen en checkboxes, en een carrousel die de bezoeker zelf bedient, zijn aanpassingen in je thema.
Let op: een goede Lighthouse-score zegt vooral iets over snelheid, en weinig over hoe prettig je shop met één duim te bedienen is. Dat zie je pas als je het zelf probeert.
Zoeken
Autocomplete lijkt een standaardonderdeel, maar de uitvoering verschilt flink. Baymard vond dat 80% van de webshops autocomplete aanbiedt, maar dat slechts 19% alle best practices goed implementeert (Baymard, 2022). Een jaar eerder bleek dat 69% van de sites geen passende suggesties geeft bij een lichte spelfout (Baymard, 2021). Typ je “schoeen” en krijg je niets terug, dan verlies je die bezoeker op het moment dat hij wil kopen.
Tik een paar bekende producten in met een bewuste typfout en kijk of er nog suggesties verschijnen, terwijl je typt en op de resultatenpagina (“Bedoelde u …?”). Kijk daarna in de admin onder Stores > Configuration > Catalog > Catalog > Catalog Search of “Enable Search Suggestions” en “Enable Search Recommendations” aanstaan. Hoe tolerant de zoekfunctie is voor spelfouten en welke suggesties hij geeft, stelt je developer in, in OpenSearch of de zoekoplossing die aan je shop hangt.
Filters
Nielsen Norman Group legt uit dat interactief filteren, waarbij resultaten direct veranderen zonder “Toepassen”-knop, alleen goed werkt als de pagina binnen ongeveer een seconde reageert. Is de pagina trager, dan werkt een expliciete knop beter, omdat mensen anders bij elke filterkeuze opnieuw moeten wachten, zeker op mobiel (NN/g, 2016). Een tweede punt uit hetzelfde artikel: de pagina moet niet automatisch naar boven scrollen terwijl iemand nog filters aanklikt, want dan verliezen mensen hun plek.
Klik twee of drie filters aan op een categoriepagina en tel hoe lang het duurt voor de resultaten veranderen. Welke filters er staan, bepaal je zelf: in de admin onder Stores > Attributes > Product zet je per attribuut op het tabblad Storefront Properties “Use in Layered Navigation” aan of uit (dat werkt alleen bij attributen van het type dropdown, multiselect, ja/nee of prijs). Een filter op een attribuut dat niemand gebruikt, maakt de lijst alleen langer. Filteren zonder dat de hele pagina opnieuw laadt en het scrollgedrag aanpassen is werk in het thema. Hoe filters ook de vindbaarheid in zoekmachines raken, staat in de SEO-fouten in configuratie.
De checkout
De checkout is het laatste stuk voordat de bestelling binnen is, en juist daar is minder vaak beter dan meer. Wat daar concreet speelt, van het aantal stappen tot gastafrekenen, staat uitgewerkt in checkoutconversie met Hyvä.
Zelf checken of developerwerk
Deze tabel kun je zo doorsturen naar je developer: links wat je zelf hebt gezien, rechts wat er moet gebeuren.
| Plek | Zelf checken | Voor je developer |
|---|---|---|
| Productpagina | Pinch-zoom op de hoofdfoto werkt niet, of er is geen foto op schaal | Zoom en tap-gestures in de productgalerij van het thema aanzetten of herstellen |
| Mobiel | Je mist knoppen of checkboxes met je duim, of iets beweegt ongevraagd | Tikdoelen van minimaal ongeveer 1 x 1 cm, carrousel niet automatisch laten draaien |
| Zoeken | Geen suggesties bij een typfout; “Enable Search Suggestions” staat uit | Spelfouttolerantie en suggesties instellen in OpenSearch of de zoekoplossing |
| Filters | Resultaten verschijnen pas na meer dan een seconde, of de pagina springt omhoog | Filteren zonder volledige herlaadbeurt, of een “Toepassen”-knop; niet automatisch naar boven scrollen |
Wil je weten hoe je eigen shop op deze punten scoort, zonder alles zelf na te lopen? Een Magento Quickscan kijkt van buitenaf naar UX, snelheid en checkout. Gaat het om de code of modules achter je thema, dan past een Magento code review beter. En sta je nog op Luma, dan is de overstap naar Hyvä het moment om deze punten meteen goed te bouwen.
Veelgestelde vragen
Wat is het verschil tussen UX en UI?
UX is hoe makkelijk iemand vindt wat hij zoekt en doet wat hij wil op je site. UI is het uiterlijk waarmee dat gebeurt, zoals knoppen, kleuren en lettertypes. Een aantrekkelijke UI compenseert geen trage of verwarrende UX.
Wat is een A/B-test?
Een A/B-test laat twee versies van een pagina naast elkaar draaien bij echte bezoekers: de ene groep ziet versie A, de andere versie B. Zo meet je of een wijziging echt meer bestellingen oplevert, in plaats van ervan uit te gaan.
Waar begin je als je weinig tijd hebt?
Bij de productpagina op je telefoon. Zoom op een productfoto en tik met je duim op de knoppen: dat geeft binnen vijf minuten een eerste beeld.
Is dit iets voor een developer of voor een marketeer?
Beide. De checks en de twee admin-instellingen doe je zelf, zonder technische kennis. De oplossing, van filtersnelheid tot galerij-zoom, is werk voor je developer. Weet je niet waar je moet beginnen, neem dan contact op.