Product Update: Hover states zijn er al sinds de uitvinding van de muis, en met reden: ze vertellen gebruikers waar ze moeten klikken. Dus toen A.S. Watson ons vroeg de hover states van hun hotspots te verbeteren, gingen we meteen aan de slag.
Gedurende een periode van twee maanden voerden we verschillende A/B-tests uit waarbij we hun hotspots zichtbaar maakten bij hover. Op die manier konden we een stijging van 96% bereiken in hun doorklikpercentage (CTR - d.w.z. de verhouding van shoppers die van de wekelijkse online advertenties naar de online winkel klikken).
We zijn verheugd deze update eindelijk voor iedereen beschikbaar te maken. Lees verder voor meer informatie over de update en hoe u van deze voordelen gebruik kunt maken.
Voordat we erin duiken, wil ik een kort overzicht geven van deze post. In het eerste deel wordt de zweefstand van de hotspot uitgelegd en hoe je deze functie kunt inschakelen. Het bevat ook enkele tips over hoe je de zweefstand optimaal kunt gebruiken.
Het tweede en derde deel zijn voor degenen die meer willen lezen over de tests die wij hebben uitgevoerd en onze theorie waarom de verbeterde zweeftoestanden tot zo'n aanzienlijke verbetering hebben geleid.
1. Hotspots zichtbaar bij hover
De meesten van u zijn waarschijnlijk bekend met de hotspot-editor en hoe u rechthoeken kunt gebruiken om klikbare gebieden (of hotspots) te maken in uw online catalogus.
In het verleden, wanneer een shopper met de muis over een hotspot ging, veranderde zijn muiscursor en verscheen er een tooltip:
Er is geen indicatie van het klikbare gebied, waardoor de gebruiker niet weet waar hij op gaat klikken. Om dat op te lossen, hebben wij het mogelijk gemaakt de hotspot te tonen wanneer het winkelend publiek er met de muis overheen gaat:
Door deze functie in te schakelen, geeft u het winkelend publiek preciezere feedback over wat ze gaan aanklikken. En in het geval van A.S. Watson, dit verbeterde hun CTR met 96%.
Hoewel we deze verbetering niet voor iedereen kunnen garanderen, raden we je ten zeerste aan deze functie in te schakelen en zelf te testen.
Hoe maak je hotspots zichtbaar bij hover
Hotspots zichtbaar bij zweven wordt automatisch ingeschakeld voor alle nieuwe groepen die je aanmaakt. Voor bestaande groepen moet u het inschakelen door te gaan naar Aanpassing van de kijker -> Hotspots -> Hotspot zichtbaar bij hover.
Waarop letten bij het activeren van de zweefstand van de hotspot?
- Door deze functie te activeren maak je de hotspots zichtbaar bij hover voor alle catalogi in je groep. Dit geldt ook voor catalogi die momenteel online zijn. Het kan verstandig zijn om die catalogi te bekijken om er zeker van te zijn dat de hotspots correct geplaatst zijn en er goed uitzien.
- Hoewel de hover-status helpt om het klikgebied van een hotspot te onthullen, is het geen excuus om hotspot-pictogrammen uit te schakelen. Hotspotpictogrammen dienen nog steeds een uniek doel, omdat ze aangeven waar de hotspots zich bevinden.
- Hover states werken niet op smartphones en tablets. Nog een reden om hotspotpictogrammen ingeschakeld te houden.
Bonustip:
- Om het beste resultaat te krijgen van de hotspot hover state, moeten je hotspots goed geplaatst zijn. We hebben een gids geschreven over hoe labelt u producten met hotspots om u te helpen uw hotspotplaatsing te verbeteren.
2. A/B test A.S. Watson
Wanneer we wijzigingen aanbrengen in Publitas, willen we er zeker van zijn dat we u en uw klanten meerwaarde bieden. Om de waarde van hotspots die zichtbaar zijn wanneer u met de muis beweegt te verifiëren, hebben we twee tests uitgevoerd. De eerste was een A/B test op een wekelijkse advertentie die 7 dagen liep:
| Testgroep | % verhoogde CTR |
|---|---|
| A - Controlegroep | – |
| B - Verbeterde zweefstand voor hotspots | 99% |
Met de eerste test bereikten we een stijging van 99% in CTR - veel hoger dan we hadden verwacht. Omdat deze resultaten veelbelovend waren, besloten we nog een test te doen. De tweede test duurde 21 dagen:
| Testgroep | % verhoogde CTR |
|---|---|
| A - Controlegroep | – |
| B - Verbeterde zweefstand voor hotspots | 96% |
Opnieuw leverde de test veel betere resultaten op dan we hadden verwacht, wat de geldigheid van de eerste testresultaten bevestigt. We probeerden ook een paar verschillende interactiemodellen, zoals het kort laten knipperen van hotspots direct nadat een pagina was geladen. Geen van deze had een noemenswaardige stijging van de CTR in vergelijking met de hotspots die zichtbaar zijn bij hover.
3. Hoe hebben hover states tot zo'n aanzienlijke verbetering geleid?
Zonder een gezonde dosis gedachten lezen is het nogal moeilijk om details vast te stellen. Maar een snelle blik op Don Norman's bruikbaarheidsheuristieken geeft ons een paar aanwijzingen - een vriendelijke herinnering om nooit de grondbeginselen van UX en bruikbaarheid te vergeten!
Onze UX-specialist Oliver McGough heeft de 4 punten eruit gehaald die aangeven waarom hover states zo essentieel zijn:
1. Zichtbaarheid van de systeemstatus
"Het systeem moet gebruikers altijd op de hoogte houden van wat er gaande is, door middel van passende feedback binnen een redelijke termijn."
Vóór de invoering van hover states lieten we het aan de gebruiker over om klikbare gebieden aan te nemen. De enige aanwijzing was een klein hotspot-pictogram en een tooltip bij hover.
We wilden de prachtige catalogi van onze klanten niet bedekken met klikbare hotspots, uit angst dat inbreuk op hun ontwerp hen en hun lezers zou irriteren.
Zonder duidelijk bewijs van wat klikbaar is, waarom zou het winkelend publiek dan klikken?
2. Het voorkomen van fouten
"Nog beter dan goede foutmeldingen is een zorgvuldig ontwerp dat voorkomt dat een probleem zich überhaupt voordoet. Elimineer foutgevoelige omstandigheden of controleer erop en presenteer gebruikers een bevestigingsoptie voordat ze de actie ondernemen."
Hover states zijn een geweldige manier om een actie te bevestigen voordat de gebruiker zich eraan verbindt. Als de muis over een hotspot zweeft, wordt de gebruiker geïnformeerd over het klikgebied en dat er iets zal gebeuren als hij klikt.
Gebruikers kunnen nu onderscheiden welke kliks tot welke acties leiden en ze kunnen beslissen om al dan niet te klikken. In het verleden moesten onze gebruikers blindelings klikken, waardoor ze mogelijk ergens terechtkwamen waar ze dat niet wilden.
3. Herkenning in plaats van herinnering
"Minimaliseer de geheugenbelasting van de gebruiker door objecten, acties en opties zichtbaar te maken. De gebruiker moet geen informatie van het ene deel van de dialoog naar het andere hoeven te onthouden. Instructies voor het gebruik van het systeem moeten zichtbaar zijn of gemakkelijk terug te vinden wanneer dat nodig is."
Net als bij Foutpreventie fungeren hover states als een zichtbare indicator van wat er gaat gebeuren. Bij UX-ontwerp willen we zo weinig mogelijk openlaten voor interpretatie.
Wij willen efficiënte en subtiele acties die de grotere ervaring niet in de weg staan. Efficiëntie houdt de mentale belasting van de gebruiker op peil met de gedachte "ik zou me kunnen voorstellen dat ik dit koop" in plaats van "wat moet ik nu doen?".
Bruikbaarheid is het wegnemen van mentale belasting bij het vinden van een weg door de ervaring. Zo komt er meer capaciteit vrij om van de ervaring te genieten. Hover states maken het klikken en de weg vinden veel instinctiever.
4. Esthetisch en minimalistisch ontwerp
"Dialogen mogen geen informatie bevatten die irrelevant of zelden nodig is. Elke extra informatie-eenheid in een dialoog concurreert met de relevante informatie-eenheden en vermindert hun relatieve zichtbaarheid."
Tenslotte zijn hover states een uitstekend voorbeeld van minimalistisch design. We geven alle informatie die we nodig hebben door een kleine opacity tweak. Foto's vertellen misschien duizend woorden, maar onze subtiele hover state vertelt er minstens twee."KLIK HIER".
