Un cliente che guarda la foto di un divano su fondo bianco vede un divano. Lo stesso divano in un soggiorno, con il tappeto, la lampada e i cuscini, gli mostra un risultato. Lo Shop the Look trasforma quella messa in scena in un percorso d’acquisto: ogni oggetto visibile diventa cliccabile.
La meccanica è semplice. La sua riuscita dipende da dettagli di esecuzione che si vedono solo una volta in produzione.
Dove funziona
Tre famiglie vi si prestano davvero.
La moda e gli accessori, il caso originario. L’outfit completo risponde a una domanda che la scheda prodotto non tratta: con cosa abbinare questo capo.
L’arredamento e la decorazione. L’acquisto avviene per atmosfera, quasi mai per prodotto isolato. È il settore dove lo scontrino medio si muove di più.
Il fai da te e il giardino in contesto. Una terrazza allestita, un laboratorio attrezzato, un angolo ufficio. Il visitatore scopre prodotti complementari che non avrebbe cercato.
Il dispositivo è invece inutile su un catalogo tecnico dove l’acquisto è unitario e specificato in anticipo: ricambi, consumabili, prodotti professionali su riferimento.
La foto, primo vincolo
Il risultato dipende più dall’immagine che dal modulo.
Ogni prodotto deve essere identificabile. Un oggetto mezzo nascosto dietro un altro produrrà un hotspot incomprensibile. Componi la scena pensando alle zone cliccabili, non solo all’estetica.
La risoluzione deve permettere lo zoom, in particolare su mobile, dove il visitatore ingrandisce per distinguere un dettaglio prima di toccare.
L’inquadratura deve lasciare spazio. Un prodotto attaccato al bordo dell’immagine non può ricevere un hotspot senza che il tooltip esca dal riquadro.
Prevedi anche il formato: un’immagine molto larga funziona male su mobile, un’immagine quadrata spreca spazio su desktop. Due versioni della stessa scena è la soluzione più pulita.
Lookbook Shoppable — Shop the Look e Hotspot CliccabiliIl lookbook shoppable che trasforma le tue foto in vendite€79.00
Posizionare gli hotspot
Quattro regole nate dall’uso reale.
- Cinque-sette al massimo per immagine. Oltre, la scena diventa una semina di pallini e il visitatore non ne apre nessuno.
- Una dimensione tattile sufficiente. Il punto deve restare raggiungibile con il dito, il che presuppone una zona di circa quaranta pixel di lato su mobile, qualunque sia la dimensione visiva del pallino.
- Un punto per prodotto, sulla parte più riconoscibile. Su una sedia, la seduta piuttosto che una gamba.
- Un’indicazione visiva di cliccabilità. Un pallino statico passa inosservato. Una leggera animazione all’arrivo sull’immagine, poi uno stato di riposo discreto, risolve questo punto.
Il contenuto dell’hotspot
Ciò che si apre al clic determina la conversione. Quattro elementi, non di più.
Il nome del prodotto, il prezzo, la disponibilità e un’azione. Quell’azione deve essere l’aggiunta diretta al carrello quando il prodotto non ha varianti, e un link alla scheda quando resta necessaria una scelta di taglia o colore.
Forzare un passaggio dalla scheda per un prodotto senza opzioni aggiunge un passo inutile. Proporre un’aggiunta diretta su un prodotto che esige una taglia produce ordini sbagliati e resi.
Il comportamento mobile
È qui che la maggior parte delle implementazioni fallisce. Su mobile, il tooltip che si apre accanto all’hotspot copre l’immagine e spesso esce dallo schermo.
Il comportamento che funziona: al tocco su un hotspot, una scheda prodotto appare in basso, a tutta larghezza, senza coprire la zona toccata. Il visitatore mantiene il contesto visivo e può passare a un altro punto senza chiudere nulla.
Prevedi anche una visualizzazione di riserva. Sotto l’immagine, una lista classica dei prodotti presenti nella scena, sempre visibile. Serve ai visitatori che non capiscono la meccanica, e risolve altri due problemi.
Accessibilità e SEO
Entrambi si trattano con la stessa lista.
Un’immagine con hotspot in sovrapposizione non è utilizzabile da uno screen reader, e i prodotti non sono link indicizzabili se il modulo li carica in JavaScript al clic. La lista HTML sotto l’immagine, con un link verso ogni scheda, rende la scena accessibile e fa esistere il linking interno.
Aggiungi un testo alternativo descrittivo sull’immagine, che descriva la scena e non il nome del file.
Dove collocare i look
Tre collocazioni, complementari.
Una pagina dedicata che raggruppa tutte le scene, strutturata per universo o per stagione. Si condivide bene e si posiziona su ricerche di ispirazione.
In testa di categoria, una o due scene dell’universo interessato. È la collocazione che converte meglio, perché il visitatore vi arriva già in fase di ricerca.
Sulla scheda prodotto, un blocco «visto in questi ambienti» che rimanda alle scene contenenti quel prodotto. Questo linking inverso è quello che fa salire lo scontrino medio.
Misurare
Tre indicatori. Il tasso di interazione, la parte di visitatori che apre almeno un hotspot, che ti dice se la meccanica è compresa. Il tasso di aggiunte dal punto caldo. E lo scontrino medio delle sessioni che hanno visto una scena, confrontato con le altre: è lì che il dispositivo si giustifica o meno, perché costa tempo di produzione fotografica.
Il modulo Lookbook Shoppable e Shop the Look gestisce questa meccanica su PrestaShop 8 e 9: posizionamento degli hotspot sull’immagine, scheda prodotto con aggiunta diretta al carrello, comportamento mobile adattato, lista HTML dei prodotti per l’accessibilità e blocco inverso sulle schede interessate.
