Una foto d’ambiente mostra un outfit completo, un interno arredato, un banco da lavoro attrezzato. Il visitatore vede l’insieme e non sa quali prodotti lo compongono né dove trovarli. Gli hotspot risolvono questo problema, a condizione di essere posizionati e implementati correttamente.
L’interesse commerciale di questo formato è stato trattato separatamente. Questo articolo riguarda la messa in opera.
Dove posizionare i punti
Quattro regole, in ordine di importanza.
Sul prodotto, non accanto. Un punto posizionato al centro dell’oggetto è compreso immediatamente. Un punto che fluttua a qualche centimetro obbliga a indovinare cosa designa.
Distanziati almeno della larghezza di un dito. Due punti troppo vicini sono impossibili da distinguere al tocco. Conta una distanza equivalente all’area tattile minima tra due centri.
Da cinque a otto al massimo per immagine. Oltre, l’immagine diventa una semina di pallini e il visitatore non ne apre nessuno. Se il tuo visual contiene dodici prodotti, mostrane otto e proponi la lista completa sotto.
Su zone leggibili. Un punto su una zona molto scura o molto testurizzata scompare. Prevedi un contorno o un’ombra per garantire la visibilità qualunque sia lo sfondo.
Il problema delle coordinate
Difficoltà tecnica principale, ed è sottovalutata.
Un punto posizionato a 340 pixel dal bordo sinistro su un’immagine di 1200 pixel finisce nel posto sbagliato non appena l’immagine viene mostrata a 380 pixel su un telefono.
La regola: memorizza le coordinate in percentuale della larghezza e dell’altezza, mai in pixel. Il punto resta al suo posto qualunque sia la dimensione di visualizzazione.
Seconda trappola: il ritaglio. Se la tua immagine è ritagliata diversamente secondo il formato di schermo, un’immagine larga su computer e quadrata su mobile, i punti calcolati sull’una sono sbagliati sull’altra.
Due risposte possibili. Usare la stessa immagine ovunque, semplicemente ridimensionata. O definire set di coordinate distinti per formato, il che raddoppia il lavoro di posizionamento.
La prima soluzione è la più semplice e basta nella grande maggioranza dei casi.
Lookbook Shoppable — Shop the Look e Hotspot CliccabiliIl lookbook shoppable che trasforma le tue foto in vendite€79.00
Il comportamento tattile
È ciò che decide l’uso reale, dato che questo formato è molto consultato su mobile.
Su computer, il passaggio del mouse mostra un’anteprima e il clic porta al prodotto. Su schermo tattile l’hover non esiste, e trasporre direttamente quel comportamento produce un’interfaccia inutilizzabile.
Tre opzioni per il tattile.
Un tocco apre l’anteprima, un secondo porta al prodotto. Comportamento corrente, con l’inconveniente di richiedere due gesti.
Un tocco apre una scheda compatta con immagine, nome, prezzo e pulsante di aggiunta al carrello. Il visitatore può acquistare senza lasciare l’immagine, che è il miglior comportamento commercialmente.
Un tocco porta direttamente al prodotto. Rapido, ma fa perdere il contesto dell’immagine, il che è un peccato su un outfit completo.
La seconda opzione è quella che converte meglio, perché permette di comporre più acquisti dalla stessa immagine.
Due precisazioni di implementazione. L’area tattile deve essere più ampia del punto visibile, almeno quarantaquattro pixel di lato. E la chiusura dell’anteprima deve essere possibile con un tocco all’esterno, non solo su una piccola croce.
L’accessibilità
Punto sistematicamente trascurato su questo formato, eppure risolvibile in poche righe.
Un’immagine con zone cliccabili pone tre questioni.
L’immagine stessa deve portare un testo alternativo che descriva la scena, non la lista dei prodotti. «Soggiorno con divano grigio, tavolino in rovere e lampada da terra» basta.
Ogni punto deve essere un elemento interattivo con nome, che porta il nome del prodotto che designa. Un punto senza etichetta è un pulsante muto per un lettore di schermo.
La navigazione da tastiera deve permettere di raggiungere ogni punto in un ordine logico, e di aprire l’anteprima con il tasto di attivazione.
Aggiungi un elemento che risolve tutto: una lista testuale dei prodotti sotto l’immagine. Serve i lettori di schermo, gli utenti da tastiera, i motori e i visitatori che preferiscono una lista. È il complemento più redditizio di questo dispositivo.
Cosa vedono i motori
Gli hotspot sono costruiti da script e il loro contenuto non è necessariamente leggibile.
Tre conseguenze pratiche.
I link verso i prodotti devono essere veri link nel codice, non elementi cliccabili gestiti solo da script. Altrimenti perdi un collegamento naturale tra la tua pagina d’ambiente e le tue schede.
Il testo alternativo dell’immagine porta l’informazione sulla scena, il che aiuta la ricerca di immagini.
La lista sotto l’immagine, citata sopra, rende il contenuto interamente leggibile senza dipendere dal rendering di script.
Le prestazioni
Un’immagine di lookbook è generalmente grande e pesante. Tre precauzioni.
Servire la dimensione giusta secondo lo schermo, con formati adattivi. Un’immagine di 2400 pixel su un telefono è puro spreco.
Dichiarare le dimensioni per riservare lo spazio ed evitare che la pagina salti quando arriva l’immagine.
Caricare i punti dopo l’immagine, ma riservare la loro posizione fin dall’inizio perché non appaiano sfalsati.
Punto complementare: se hai più immagini di lookbook sulla stessa pagina, carica solo la prima immediatamente e differisci le successive.
Il contenuto dell’anteprima
Cinque elementi, non di più.
La miniatura del prodotto, che conferma visivamente di cosa si tratta.
Il nome, completo ma corto.
Il prezzo, con la menzione di indisponibilità se del caso.
Il pulsante di aggiunta al carrello, o di selezione della taglia se il prodotto ha varianti.
Il link verso la scheda completa, per chi vuole saperne di più.
Sui prodotti con varianti si pone la questione della taglia. Due approcci: aprire un selettore nell’anteprima, o rimandare alla scheda. Il primo converte meglio sui prodotti semplici da scegliere, il secondo evita errori sui prodotti dove la scelta richiede riflessione.
La manutenzione
Aspetto spesso scoperto dopo qualche mese.
Un’immagine di lookbook invecchia con il suo catalogo. Tre situazioni da trattare.
Il prodotto è esaurito. Il punto deve restare, con la menzione di indisponibilità ed eventualmente un avviso di ritorno in stock. Eliminarlo lascia un buco nell’immagine senza spiegazione.
Il prodotto è ritirato definitivamente. Due opzioni: togliere il punto, o reindirizzarlo verso un prodotto equivalente con una menzione esplicita.
L’intera immagine diventa obsoleta. Una collezione passata. Prevedi una data di fine per immagine, o come minimo una revisione periodica.
Un controllo utile, da automatizzare: elencare i punti che puntano a prodotti inattivi o eliminati. Su un negozio che ha accumulato venti lookbook, questa lista si riempie in fretta.
Misurare
Tre indicatori.
Il tasso di interazione con i punti, rapportato alle visualizzazioni dell’immagine. Ti dice se il dispositivo è compreso e individuato.
Il numero di prodotti diversi aperti per sessione. È l’interesse proprio del formato: un visitatore che ne apre tre compone un outfit.
Lo scontrino medio delle sessioni passate da un lookbook, confrontato con le altre. È lì che il formato si giustifica o meno.
Il modulo Lookbook Shoppable per PrestaShop mette in piedi questo dispositivo su PrestaShop 8 e 9: posizionamento dei punti in coordinate relative per restare esatti a tutte le dimensioni, scheda compatta con aggiunta al carrello al tocco, lista testuale dei prodotti sotto l’immagine per l’accessibilità e la SEO, e rilevamento dei punti che puntano a prodotti inattivi.
