A/B-testing, een haat/liefde-relatie

A/B-testing stuurt onze dagelijkse ontwerp keuzes. We bewijzen er statistisch mee wat goede en slechte ontwerp keuzes zijn: evidence-based design. Een krachtig middel en verplichte kost, maar steeds vaker zie ik dat A/B-testing de vooruitgang tegenwerkt. A/B-testing stuurt je de verkeerde kant op voordat je er erg in hebt. We laten ons leiden door getallen en niet door de gedachten achter die getallen. Op deze manier laten statistieken geen ruimte voor afwijkende ideeën, ideeën die verder gaan en op de lange termijn een beter resultaat leveren.

Nog verontrustender is dat grote jongens zoals Google en Facebook in deze valkuil stappen. Dit is trouwens niet de enige reden waarom de grote spelers met gigantische budgetten nog steeds grove ontwerpfouten maken, maar daarover een andere keer. Vervolgens neemt iedereen de verkeerde keuzes van de grote spelers klakkeloos over. Maar om wezenlijk te innoveren moet je kritisch omgaan met het gereedschap. Eerder schreef ik over eyetracking en personas. Nu is A/B-testing aan de beurt.

A/B-testing is een manier om twee situaties met elkaar te vergelijken, zoals verschillende kleuren voor een knop. Aan een deel van de bezoekers toon je 'situatie A' en aan het andere deel van de bezoekers toon je 'situatie B'. De gevolgen zijn zeer nauwkeurig te meten. Je ziet precies wat de impact is op zowel de micro-conversie als op de uiteindelijke conversie. Je zou kunnen zeggen dat je hiermee wetenschappelijk aantoont dat de ene situatie significant beter is dan een andere. En daarin schuilt een gevaar.

Ook wetenschappers trekken foute conclusies op basis van significante verschillen. In de wetenschap zijn er twee factoren die ervoor zorgen dat we die foute conclusies minder makkelijk trekken en mogelijk nog corrigeren. De eerste factor is dat je als wetenschapper altijd eerst een sterk theoretisch kader moet bouwen. Ik herinner me nog dat mijn begeleider daar tijdens mijn afstuderen behoorlijk op hamerde. Als je maar genoeg data hebt, kun je namelijk de gekste onwaarheden significant 'bewijzen'. Een doordacht theoretisch kader behoedt je daarvoor. Dat kader is een combinatie van eerder onderzoek en praktische aanwijzingen. De tweede factor is dat wetenschappers kritisch naar elkaar zijn en met eigen onderzoek de resultaten verifiëren. Alhoewel een onderzoek reproduceren niet sexy is, komen daaruit nog geregeld onwaarheden boven tafel. Dat kan als muggenziften overkomen, maar alleen zo ontwikkel je nieuwe kennis.

Nu concreet toegepast op de A/B-testing. Daarvoor geef ik je een sprekend voorbeeld: het 'hamburger-icoon' waarachter zich het navigatie-menu op mobiel verschuilt.

Eerste resultaat: gebruik een icoon zonder het label 'MENU'

James van Exis Web voert naar aanleiding van een discussie op Twitter een A/B-test uit met drie verschillende situaties.

Situaties voor het eerste onderzoek.
  1. Het hamburger-icoon zonder enige toevoeging.
  2. Het hamburger-icoon met het woord 'MENU' in het klein eronder.
  3. Het hamburger-icoon met omlijning.

Waarom hij juist deze situaties met elkaar vergelijkt is mij niet geheel helder. Uit het verleden weten we dat iconen niet duidelijk zijn voor gebruikers en dat een icoon het altijd verliest van tekst.

In every study that considered the question, icons were demonstrated to be more difficult to understand than were labels, especially at first viewing, which contradicts one of the most frequently cited reasons for using icons, namely, comprehensibility for beginners.

Jef Raskin, 2004, The Humane Interface, p.170.

Je verwacht dat situatie 2 wint. Aan de andere kant is het label in situatie 2 zo klein geschreven dat het de vraag is of het helpt en is de affordance van situatie 1 en 2 verre van ideaal. Door het te omlijnen, creëer je het idee van een knop en verhoog je de affordance. Uiteindelijk wint situatie 3, waarschijnlijk vanwege die affordance. Door geen theoretisch kader te bouwen, kun je gemakkelijk de verkeerde conclusies trekken: het woord 'MENU' is niet nodig en het omlijnen van een icoon is de juiste oplossing.

Alhoewel de resultaten niet significant zijn, viel er wel een winnaar uit de bus. Een onterechte winnaar. Volgens mij had James van Exis Web dit snel door en hij deed nog een extra onderzoek met nieuwe situaties.

Vervolg: gebruik toch 'MENU' als label

In z'n volgende A/B-test creëert James 4 situaties. Later herhaalt hij dat gedeeltelijk nog een keer.

Situaties voor het tweede onderzoek.
  1. De winnaar van test 1: het hamburger-icoon met omlijning.
  2. Het woord 'MENU' met omlijning.
  3. Het hamburger-icoon en het woord 'MENU' in het groot ernaast met omlijning.
  4. Het woord 'MENU' zonder omlijning.

Situatie 2, met het woord 'MENU' en omlijning, is de winnaar, en ook situatie 3 wint van situatie 1, de oorspronkelijke winnaar. Dit was te voorspellen als we kennis uit het verleden zouden gebruiken: affordance is essentieel en tekst is altijd duidelijker dan iconen.

Een betere conclusie, maar al met al blijft het onderzoek onvolledig. Er missen namelijk nog twee aspecten: de locatie van de knop en de schrijfwijze van het label. De locatie van de knop is niet ideaal. In het onderzoek staat de knop linksboven in het scherm. Dat is de meest vervelende locatie om te bereiken met je vingers. Rechts boven is een veel betere keuze. En tekst in hoofdletters verzwakt het woordbeeld, dus mijn advies is om het niet als 'MENU', maar als 'Menu' te schrijven.

Het alternatief.

Alhoewel dat interessant is om te testen, zou ik veel rigoureuzer te werk gaan. Vergeet dat hele menu: belangrijke navigatie zou je helemaal niet mogen verbergen achter een nietszeggende menu-knop en als de navigatie niet belangrijk is, geldt dat ook voor het menu.

Vergeet het menu

Door deze A/B-testen vergeten we dat 'het menu' sowieso al een slechte oplossing is. Het verbergt belangrijke navigatie. Anthony Rose van zeebox toont met zijn A/B-test aan dat het hebben van een verborgen menu de engagement van je gebruikers halveert.

Around Sep 2013 Facebook switched to a new side menu design. Surely if Facebook was doing this, then it had to be good… right? [...] But when we looked at our analytics, it was a disaster! Engagement time was halved! It looked like “out of sight, out of mind” really was the case.

Opvallend is dat ze de meest ongebruiksvriendelijke variant van de menu-knop hebben gekozen: het hamburger-icoon zonder de affordance van een knop, zeer klein, lichtgrijs en linksboven. Ook hier dus een slecht uitgevoerde A/B-test. Alhoewel er genoeg is aan te merken op z'n test, wijzigt z'n testopstelling niks aan het feit dat een menu-knop belangrijke opties voor de gebruiker verbergt en dat 'Menu' of het hamburger-icoon niks zegt over de inhoud ervan. Een no-no in informatie architectuur.

Het probleem toont de afwezige integratie tussen content en user interface aan. In mijn vorige blog schreef ik al over dat de knop 'menu' een tussenoplossing is om oude desktopmenu's op mobiel beschikbaar te maken. We moeten er naar toe dat de homepage zelf het menu is en het ouderwetse menu op de onderliggende pagina's in de footer staat. Een nieuw ontwerppatroon zonder menu-knop. Interessant is om te zien dat dit niet alleen nu, voor mobiel, een goede ontwerp keuze is. Al 14 jaar geleden gaf Jakob Nielsen aan dat er een probleem is met de manier waarop we navigatie vormgeven voor desktopcomputers.

For almost seven years, my studies have shown the same user behaviour: users look straight at the content and ignore the navigation areas when they scan a new page.

Dus ook de winnende situatie uit Anthony Rose's A/B-test, waarin het nog steeds om een ouderwets menu gaat, is verre van ideaal.

A/B-testing, een haat/liefde-relatie

Nog even voor de duidelijkheid: ik waardeer James' en Anthony Rose's toevoegingen aan de discussie over mobiele menu's. Mij gaat het erom dat dit prachtige illustraties zijn over de valkuilen van A/B-testing.

A/B-testing is een zeer krachtige tool, net als eyetracking. Alhoewel ik kritisch ben over beide onderzoekmethodes, zijn het ook gereedschappen die ons verder brengen. Maar creëer altijd eerst een sterk theoretisch kader voordat je onderzoek uitvoert, blijf kritisch over de onderzoeken en blijf open staan voor nieuwe ideeën die misschien in eerste instantie lijnrecht tegenover de resultaten van onderzoek lijken te staan.

Bart van de Biezen

Bart van de Biezen

Als cognitief ergonoom bij Aan Zee Communicatie, onderzoek, ontwerp, spreek en schrijf ik over user interfaces en usability. M'n achtergrond: Industrieel Ontwerpen en daarna Psychologie aan de Universiteit Twente, afgestudeerd bij Philips op midair pointing voor een nieuwe generatie TV's, Apple Design Award voor CSSEdit, usability onderzoeker bij MetrixLab en blogger.