Il design perfetto della casella di ricerca per il tuo eCommerce

Hai mai navigato in un negozio online o in un Marketplace con l'intenzione di cercare un prodotto e non sei riuscito a trovare la casella di ricerca? Siamo sicuri di averlo fatto.

Inutile dire che più risalto dai alla ricerca su sito sulla tua home page , più è probabile che la tua ricerca su sito venga utilizzata. Ciò significa che invece di passare attraverso diverse categorie sul tuo sito eCommerce, i tuoi visitatori utilizzeranno direttamente la Ricerca nel sito per trovare il prodotto che desiderano più velocemente, senza dover perdere tempo a cercare cose di cui non hanno bisogno.

Quindi, nei settori in cui la ricerca è il modo più comune per trovare i prodotti, può essere una buona idea “promuovere” il campo di ricerca con un design accattivante e posizionarlo in una posizione strategica, soprattutto nella home page.

Navigazione di categoria

Questo è in genere il caso di siti Web di confronto dei prezzi più mirati, a condizione che l'utente conosca il marchio e il modello esatti del prodotto che sta cercando di acquistare (in altre parole, sappia esattamente cosa vuole, anche prima di visitare il tuo sito e-commerce).

D'altra parte, nei settori in cui gli utenti preferiscono navigare per categoria (perché non conoscono il prodotto esatto che desiderano, il suo nome o come è scritto) o con una gerarchia di siti Web piatta, un design del campo di ricerca meno evidente può essere utilizzato per incoraggiare la navigazione per categoria anziché per ricerca.

Ad esempio: i settori della moda e dell'home decor , in particolare, favoriscono fortemente la navigazione per categoria, sia in termini di preferenza iniziale degli utenti che di successiva percentuale di successo (tasso di conversione post-ricerca).

Quando si tratta di progettazione e implementazione, ci sono un'ampia gamma di modi per far risaltare il campo di ricerca all'interno del progetto generale. Pertanto, il formato esatto da utilizzare varia da un sito Web all'altro, a seconda in gran parte del contesto in cui appare il campo di ricerca (in altre parole, il design generale del sito Web).

Elementi di design del campo di ricerca

Esistono più elementi di progettazione del campo di ricerca che possono essere utilizzati per farlo risaltare, a seconda del grado in cui si desidera incoraggiare gli utenti a utilizzare la funzione di ricerca. I tre elementi principali del design della casella di ricerca che tendono ad avere il maggiore impatto sono:

Posizione

Dai un'occhiata ad Amazon nell'immagine qui sotto. Come puoi vedere, è nell'interesse di Amazon che tu effettui ricerche nel suo mercato, poiché vende di più e può guidarti meglio quando usi la sua ricerca su sito piuttosto che navigare per categorie.

A causa dei milioni di prodotti che ha e, tenendo conto che gli utenti normalmente sanno già che tipo di prodotto desiderano una volta che visitano il suo sito Web, mettono la Ricerca nel sito in una posizione preferenziale, proprio al centro e occupando praticamente l'intero larghezza dello schermo.

Inoltre, se vuoi dare risalto a Site Search e incoraggiare gli utenti a utilizzarlo, deve funzionare correttamente. In altre parole:

• Mostra i risultati all'istante: non puoi avere una ricerca su sito che impiega troppo tempo a caricare i prodotti una volta che sono stati cercati.
• Elenca i risultati nell'ordine che preferisci : tieni presente che, più in alto e a sinistra, più i risultati saranno rilevanti per i tuoi visitatori.
• Qualità dell'immagine decente: nessuna immagine pixelata, per favore!
• Mostra le specifiche del tuo prodotto : taglie, sconti o promozioni, colori disponibili... Tutto all'interno della tua ricerca.
• Offri agli utenti la possibilità di aggiungere al carrello all'interno di Site Search stessa: in modo che possano acquistare più prodotti senza dover fare avanti e indietro tra Site Search e il carrello.

I tuoi stili di ricerca sul sito

È della massima importanza che, una volta cliccata la casella di ricerca, l'immagine del tuo sito web sia rispettata. Per questo, è necessario prendere in considerazione un certo numero di elementi.

• Colori : dovresti usare gli stessi colori aziendali del tuo sito web. Prova anche ad aggiungere il logo da qualche parte nella Ricerca su sito.
• Font : Il font è un altro elemento importante; usa gli stessi caratteri che usi sul tuo sito web, per numeri, titoli, pulsanti...
• Pulsanti : cerca di avere gli stessi stili dei pulsanti del tuo sito Web nei pulsanti acquista o " aggiungi al carrello ".
• Altri elementi: come sconti, confini , utilizzo delle stesse categorie che hai sul tuo sito eCommerce...

Misurare

Rendendo il campo di ricerca relativamente piccolo, la sua prominenza visiva è significativamente ridotta. Una cosa che fanno molti negozi online che cercano di aumentare l'utilizzo di Ricerca su sito è aumentare il contrasto tra l'intestazione e la Ricerca su sito. Ad esempio, Amazon , come abbiamo visto sopra, ha l'intestazione in nero, ma la ricerca nel sito è centrata e in bianco.

Quando combini dimensioni, posizione e contrasto, fai risaltare davvero la casella di ricerca, incoraggiando la ricerca come modo preferito per cercare i prodotti sul tuo sito di eCommerce. Tuttavia, ciò richiede una ricerca sul sito intelligente come Doofinder per ridurre la frequenza di rimbalzo. In caso contrario, questa può diventare un'arma a doppio taglio.

Design della casella di ricerca sulla home page

Sulla home page in particolare, il design della casella di ricerca è ancora più importante, poiché la maggior parte degli utenti tende a elaborare la propria strategia di ricerca del prodotto non appena visita il sito Web.

Secondo i dati del Baymard Institute , il 60% degli utenti utilizza immediatamente la ricerca come prima strategia sulla home page di un sito Web mobile. Pertanto, più accattivante è il design del campo di ricerca sulla home page, più utenti lo prenderanno come un incentivo a cercare piuttosto che navigare per categoria.

Inoltre, è una buona idea dare a Site Search un ulteriore tocco visivo sulla home page, a condizione che tu voglia incoraggiare la navigazione in Site Search rispetto alla navigazione per categoria.

Un design differenziato di ricerca su sito per la home page può essere realizzato in molti modi: da bordi del campo di ricerca più audaci, un colore di sfondo più contrastante, una casella più grande e una dimensione del carattere, un pulsante "ricerca" più vivace... E forse anche rendere attivabile la tastiera del campo per impostazione predefinita. Qualsiasi modifica al design che faccia risaltare il campo di ricerca da solo, senza cambiarne sostanzialmente la posizione o lo stile visivo, lo aiuterà a distinguersi.

In questo modo, il campo di ricerca rimane completamente riconoscibile senza distogliere l'attenzione dalle altre pagine, ma ti darà un ulteriore contrasto visivo sulla home page.

Questo contrasto visivo aggiuntivo non dovrebbe arrivare al punto di promuovere la ricerca come " l'unica opzione " sul sito Web, ma dovrebbe aiutare gli utenti a visualizzare più facilmente il campo di ricerca quando visitano il sito Web.

Come sai... La home page presenta spesso molti elementi grafici ed elementi visivi diversi che si contendono l'attenzione dell'utente, il che significa che, ciò che nelle pagine successive (come pagine di categoria, elenchi di prodotti o pagine di prodotti) potrebbe essere un campo di ricerca dominante, potrebbe non essere sufficiente per la home page.