"Search by Look": cos'è e come implementiamo questa funzione in un sito

In uno dei nostri ultimi progetti abbiamo utilizzato la funzione "Search by Look" nei prodotti per rendere più coinvolgente e intuitiva la navigazione, guidata dall'interesse della persona che guarda un determinato sito.

Che cos'è il "Search by Look"?

La funzione "Search by Look" consiste nella visualizzazione di uno o più prodotti all'interno di un'unica immagine ambientata. Sull'immagine sono presenti alcune zone cliccabili (hotspot), evidenziate da un segnaposto e posizionate in corrispondenza dei vari prodotti. Una volta cliccate, permettono di avere ulteriori informazioni su quello specifico prodotto (ad esempio tramite l'apertura di un box informativo, oppure portando l'utente direttamente alla scheda prodotto). Nel caso di un e-commerce, inoltre, potrebbe esserci anche un link "Aggiungi al carrello".

Il vantaggio principale di questa funzione è che rende più veloce per chi naviga trovare il prodotto giusto per sé perché non deve fare ricerche testuali oppure visionare decine di pagine di prodotti a cui non è interessato. Inoltre, può visionare i prodotti inseriti direttamente nel loro ambiente assieme ad altri prodotti e così farsi un'idea realistica della loro resa, delle loro dimensioni, dell'impatto visivo.

Come abbiamo implementato questa funzione per Dall'Agnese

Per il nostro cliente Dall’Agnese S.p.A., azienda di arredi di design Made in Italy per la zona giorno e la zona notte, abbiamo deciso di utilizzare il Search by Look in due differenti modalità:

• Nelle varie sezioni "Ambienti" (Soggiorno, Guardaroba, Ingresso, Studio). Per ogni sezione sono presenti più foto con all'interno diversi prodotti. In questo modo l'utente può visionare gli ambienti che gli interessano e ottenere subito maggiori informazioni sui prodotti che catturano la sua attenzione.
• Nelle schede prodotto, per gli abbinamenti consigliati. In questo modo l'utente può visionare il prodotto a cui è interessato inserito in un contesto reale con altri prodotti della stessa azienda.

I vari hotspot dovevano essere posizionati sopra l'immagine con precisione, esattamente sul prodotto corrispondente. Il posizionamento doveva avvenire tramite coordinate X (distanza dal bordo sinistro dell'immagine) e Y (distanza dal bordo superiore). Abbiamo deciso di utilizzare le percentuali, piuttosto che i pixel, in quanto volevamo che questa funzione potesse funzionare con tutte le risoluzioni degli schermi, su tutti i device.

Per riuscire a recuperare queste coordinate, abbiamo creato un'interfaccia in HTML, PHP e MySQL che permette di caricare un'immagine. Una volta caricata si può cliccare su un punto all'interno di questa. Al click, tramite un codice Javascript, vengono restituite le coordinate. Fatto ciò, si può cliccare su un pulsante per salvare i valori dell'hotspot. Questo sistema automatico assicura completa autonomia alla persona che gestirà gli aggiornamenti del sito per il nostro cliente: una volta caricata l'immagine, in pochi click potrà posizionare gli hotspot nei punti giusti e caricare il tutto sul sito.

Nella stessa interfaccia abbiamo creato una pagina con tutte le immagini caricate, dove all'interno di ogni immagine sono presenti i vari hotspot inseriti con le loro coordinate visibili.

Le foto sono state poi caricate dal cliente nel software On Page, che viene utilizzato per gestire tutto ciò che riguarda i prodotti. Assieme alle foto, venivano inserite anche le coordinate dei vari hotspot ricavati dalla nostra interfaccia e alcune informazioni sui prodotti. Tutti questi dati sono stati passati a WordPress tramite un plugin. Su WordPress, attraverso un template dinamico creato ad hoc, recuperavamo i dati inseriti per farli quindi visualizzare attraverso variabili PHP.

In questo modo, in automatico, potevamo far comparire nelle schede prodotto e nelle varie sezioni "Ambienti" le immagini con gli hotspot presenti.

Hai altre domande sulla funzione Search by Look o vorresti poterla usare in un sito? Contattaci!