Een klant die naar een foto van een bank op een witte achtergrond kijkt, ziet een bank. Dezelfde bank in een woonkamer, met het vloerkleed, de lamp en de kussens, toont hem een resultaat. De Shop the Look verandert die enscenering in een kooptraject: elk zichtbaar object wordt klikbaar.
De mechaniek is eenvoudig. Het succes zit in uitvoeringsdetails die pas in productie zichtbaar worden.
Waar het werkt
Drie families lenen zich er daadwerkelijk voor.
Mode en accessoires, het oorspronkelijke geval. De complete outfit beantwoordt een vraag die de productpagina niet behandelt: waarmee draag je dit item.
Decoratie en meubilair. De aankoop gebeurt per sfeer, vrijwel nooit per losstaand product. Dit is de sector waar de gemiddelde bestelwaarde het meest beweegt.
Klussen en tuin in situatie. Een ingericht terras, een uitgeruste werkplaats, een bureauhoek. De bezoeker ontdekt aanvullende producten waarnaar hij niet zou hebben gezocht.
Het systeem is daarentegen nutteloos op een technische catalogus waar de aankoop per stuk gebeurt en vooraf gespecificeerd is: reserveonderdelen, verbruiksartikelen, professionele producten op referentie.
De foto, de eerste beperking
Het resultaat hangt meer af van de afbeelding dan van de module.
Elk product moet herkenbaar zijn. Een object dat half verscholen zit achter een ander levert een onbegrijpelijke hotspot op. Componeer de scène met de klikbare zones in gedachten, niet alleen de esthetiek.
De resolutie moet zoomen toelaten, in het bijzonder op mobiel waar de bezoeker inzoomt om een detail te onderscheiden voordat hij klikt.
De kadrering moet ruimte laten. Een product tegen de rand van de afbeelding kan geen hotspot krijgen zonder dat de tooltip buiten het kader valt.
Denk ook aan het formaat: een heel brede afbeelding werkt slecht op mobiel, een vierkante afbeelding verspilt ruimte op desktop. Twee versies van dezelfde scène is de netste oplossing.
Shoppable Lookbook: Shop the Look & Klikbare HotspotsDe shoppable lookbook die uw foto's omzet in verkopen€79,00
De hotspots plaatsen
Vier regels uit de dagelijkse praktijk.
- Vijf tot zeven maximum per afbeelding. Daarboven wordt de scène een veld van stippen en opent de bezoeker er geen enkele.
- Een voldoende grote aanraakzone. Het punt moet met de vinger bereikbaar blijven, wat een zone van ongeveer veertig pixels per zijde op mobiel veronderstelt, ongeacht de visuele grootte van de stip.
- Eén punt per product, op het meest herkenbare deel. Bij een stoel de zitting in plaats van een poot.
- Een visuele aanwijzing van klikbaarheid. Een statische stip valt niet op. Een lichte animatie bij het binnenkomen van de afbeelding, gevolgd door een discrete ruststand, lost dit op.
De inhoud van de hotspot
Wat bij de klik opent, bepaalt de conversie. Vier elementen, niet meer.
De naam van het product, de prijs, de beschikbaarheid en een actie. Die actie moet het direct toevoegen aan de winkelwagen zijn wanneer het product geen varianten heeft, en een link naar de productpagina wanneer nog een maat of kleur gekozen moet worden.
Een verplichte omweg via de productpagina voor een product zonder opties voegt een nutteloze stap toe. Direct toevoegen aanbieden bij een product dat een maat vereist, levert foute bestellingen en retouren op.
Het mobiele gedrag
Hier falen de meeste implementaties. Op mobiel bedekt de tooltip die naast de hotspot opent de afbeelding en valt hij vaak buiten het scherm.
Het gedrag dat werkt: bij een klik op een hotspot verschijnt een productkaart onderaan het scherm, over de volledige breedte, zonder de aangeraakte zone te bedekken. De bezoeker behoudt de visuele context en kan doorgaan naar een ander punt zonder te sluiten.
Voorzie ook een terugvalweergave. Onder de afbeelding een klassieke lijst van de producten in de scène, altijd zichtbaar. Ze dient de bezoekers die de mechaniek niet begrijpen, en ze lost twee andere problemen op.
Toegankelijkheid en vindbaarheid
Beide worden opgelost met dezelfde lijst.
Een afbeelding met hotspots in overlay is niet bruikbaar voor een schermlezer, en de producten zijn geen indexeerbare links als de module ze pas bij de klik via JavaScript laadt. De HTML-lijst onder de afbeelding, met een link naar elke productpagina, maakt de scène toegankelijk en laat de interne linkstructuur bestaan.
Voeg een beschrijvende alt-tekst toe aan de afbeelding, die de scène beschrijft en niet de bestandsnaam.
Waar de looks te plaatsen
Drie locaties, complementair.
Een aparte pagina die alle scènes bundelt, gestructureerd per stijluniversum of per seizoen. Ze wordt goed gedeeld en positioneert zich op inspiratiezoekopdrachten.
Bovenaan een categorie, een of twee scènes uit het betrokken universum. Dit is de locatie die het best converteert, omdat de bezoeker daar al in de zoekfase aankomt.
Op de productpagina een blok “gezien in deze sferen” dat verwijst naar de scènes waarin dit product voorkomt. Deze omgekeerde koppeling is degene die de gemiddelde bestelwaarde omhoog brengt.
Meten
Drie indicatoren. Het interactiepercentage, het aandeel bezoekers dat ten minste één hotspot opent, dat u vertelt of de mechaniek begrepen wordt. Het toevoegpercentage vanuit de hotspots. En de gemiddelde bestelwaarde van sessies die een scène hebben gezien, vergeleken met de andere: daar rechtvaardigt het systeem zich al dan niet, omdat het fotoproductietijd kost.
De Lookbook Shoppable en Shop the Look module verzorgt deze mechaniek op PrestaShop 8 en 9: plaatsing van de hotspots op de afbeelding, productkaart met direct toevoegen aan de winkelwagen, aangepast mobiel gedrag, HTML-lijst van de producten voor de toegankelijkheid en omgekeerd blok op de betrokken productpagina’s.