Sticky element op je website: onze lessen na 33 experimenten

0

- shares

Deel via WhatsApp Desktop

4 reacties

1 like

bookmark

Florien Cramwinckel van Online Dialogue

Thomas Daamen van Online Dialogue

Het sticky maken van een element wil zeggen dat deze altijd in beeld is, onafhankelijk van de positie op de pagina. Dat is handig, omdat dit element dan altijd binnen bereik ligt. Maar, is een sticky element altijd succesvol? In dit artikel beschrijven we de uitkomsten van 33 experimenten waarbij een element sticky is gemaakt.

Wat is nou precies sticky?

Een sticky zorgt ervoor dat een website-component vast blijft staan op een pagina of totale website. Zo is het gelijk een stuk makkelijker om er gebruik van te maken. Hierdoor kan je meer kliks of interacties verwachten op deze “plakkende” button, header of ander onderdeel van je website. De keerzijde is dat er minder ruimte voor andere elementen overblijft.

Het is belangrijk dat er alleen elementen sticky zijn die daadwerkelijk relevant zijn voor de bezoeker. Houd er ook rekening mee dat het effect van het verschijnen van een element verdwijnt. Daardoor trekt het minder aandacht: het is immers bij aanvang al in beeld.

Semi-sticky maken van elementen is een oplossing voor dit laatste nadeel. In dit geval verdwijnt het element als je stilstaat op de pagina, maar komt het weer in beeld wanneer er een stukje wordt gescrold. Zie de visuals hieronder voor een voorbeeld van een pagina zonder én met sticky call-to-action.

Voorbeeld met sticky call-to-action, sticky element zit in bodem van beeldscherm:

Voorbeeld zonder sticky call-to-action, sticky element zit in bodem van beeldscherm (klik om af te spelen):

Sticky element: de verwachtingen

Vanuit de psychologie weten we dat mensen meer geneigd zijn om acties uit te voeren als deze makkelijker zijn (Fogg, 2007). Hoe minder tijd en moeite het kost om iets te doen, hoe eerder iemand dat zal doen. Dit betekent dus dat je zou kunnen verwachten dat mensen vaker op een knop klikken als deze knop altijd direct onder je duim zit (sticky dus).

Dit effect zou je bovendien sterker verwachten voor mobiele bezoekers dan voor desktop-bezoekers, want uit de psychologische literatuur weten we dat de beleving van “flow” belangrijker is voor mobiele bezoekers. Dit houdt in dat het vooral voor mobiele bezoekers heel belangrijk is dat ze moeiteloos en soepel de gehele klantreis kunnen afleggen, en dat ze afhaken als dat niet het geval is.

Op basis van deze verwachtingen zou je dus denken dat het sticky maken van relevante elementen met name voor mobiele bezoekers positieve effecten heeft op het gewenste gedrag. Is dat ook daadwerkelijk zo? We namen de proef op de som en bekeken de resultaten van 33 experimenten waarbij een element is gebruikt.

Sticky element: de realiteit

Het sticky maken van een element kan op allerlei verschillende manieren. In tabel 1 zie je een overzicht van de verschillende kenmerken waar we naar hebben gekeken.

In totaal hebben we 33 experimenten onderzocht, en de resultaten zijn genuanceerder dan je misschien zou verwachten. Van de 33 experimenten zijn er 9 winnaars, 6 verliezers en 18 besluiteloos. Dat is een winnaarspercentage van 27%. Dat is eigenlijk redelijk vergelijkbaar met een standaard winnaarspercentage. Zijn er bepaalde kenmerken die ervoor zorgen dat een sticky element meer of minder succesvol is?

Device verschillen: mobiel werkt beter

Uit de resultaten blijkt dat het sticky maken van een element meer impact heeft op mobiel dan op desktop. Op mobiele apparaten zagen we een winnaarspercentage van 29%, tegenover slechts 15% op desktop. Als we alleen kijken naar tests met transacties als metric, dan zagen we zelfs een winnaarspercentage van 33% op mobiel (tegenover 22% op desktop).

Pagina verschillen: sticky werkt goed in de cart en check-out

Sticky is niet op alle plekken even relevant blijkt uit onze resultaten, zie tabel 2. Zoals je kunt zien zijn er een aantal plekken waarop een element geen positieve invloed heeft. De homepage, lijstpagina en actiepagina hebben geen profijt van een sticky element. Opvallend hier is dat dit allemaal pagina’s zijn waarop bezoekers bezig zijn met het oriënteren. Een sticky element waarmee ze altijd direct door kunnen naar de volgende stap (of naar bestellen) is hier wellicht dan nog te opdringerig.

Verderop in het aankoopproces kan een sticky element wel degelijk een positieve invloed hebben. In onze experimenten zijn het toevoegen van een sticky element in de cart of de check-out altijd succesvol gebleken.

Positie: plaats je sticky element aan de zijkant op desktop en aan de onderkant op mobiel

De positie op de pagina maakt uit, zoals je kunt zien in tabel 3. Opvallend hierbij is dat er grote device verschillen zijn. Voor desktop werkt een sticky element aan de zijkant beter dan op een andere positie, terwijl op mobiel juist een sticky element aan de onderkant succesvol is.

3  tips voor een succesvol sticky element

Het sticky maken van een element wordt veel gebruikt om conversie te verhogen. De bovenstaande resultaten tonen aan dat het geen garantie is voor een uplift in conversie. We geven je een aantal tips om een sticky element succesvol in te zetten.

1. Gebruik je element in de winkelwagen of check-out pagina’s. Op deze plekken zijn bezoekers bezig met het daadwerkelijke bestellen, en daar is het extra relevant dat je zo soepel mogelijk door deze stappen heen kan lopen. Een sticky button voor de digitale winkelwagen of het afrekenen, kan hier goed werken.
2. Op mobiel is een “plakkend” onderdeel nuttiger dan op desktop. Juist op mobiele schermen is ruimte schaars, en kost het relatief veel moeite om te scrollen over lange pagina’s. Een sticky element kan hier uitkomst bieden. Maar let op: op oriëntatiepagina’s zoals de homepage neemt een element veel kostbare ruimte in beslag die je beter kunt besteden aan de informatie die je bezoekers helpt om zich goed te kunnen oriënteren.
3. Laat de plaats van het element afhangen van het device waarop je deze toont. Op desktop is de zijkant (of eventueel bovenkant) een geschikte plaats, terwijl op mobiele devices de onderkant van het scherm beter werkt.

Test het uit!

Maar de belangrijkste les van dit onderzoek is dat het altijd belangrijk is om nieuwe elementen te testen in plaats van gelijk door te voeren. Het is namelijk lang niet altijd succesvol, en soms kan het zelfs negatief uitpakken. De meest succesvolle combinatie lijkt het tonen van een element op de onderkant van het scherm op mobiele devices, op de cart of check-out pagina. Maar wil je echt weten of het sticky maken van een bepaald element op jouw website werkt; test het uit!