Italiano
Barra di ricerca con un campo di input di testo e un pulsante nel demoshop di Luigi's Box.
Punti chiave
- La barra di ricerca è un importante fattore di conversione: Gli acquirenti che utilizzano la ricerca hanno il 44% di probabilità in più di convertire.
- Velocità e precisione sono fondamentali: L’autocompletamento, la correzione degli errori di battitura e l’abbinamento delle query mantengono gli utenti impegnati.
- Dai priorità al design mobile-first: La barra di ricerca deve rimanere accessibile e coerente su tutto il sito.
- Personalizzazione basata sul comportamento passato: Puoi utilizzare le ricerche passate dei visitatori per rendere la loro esperienza più personale e pertinente.
La barra di ricerca è uno degli elementi interattivi più influenti su un sito e-commerce. Determina come gli acquirenti navigano nel tuo negozio e quanto velocemente trovano i prodotti. Quando le interazioni di ricerca sembrano poco chiare, limitate o frustranti, gli utenti non si adattano. Abbandonano la ricerca. Questo rende sia l’esperienza utente (UX) che l’interfaccia utente (UI) della progettazione della barra di ricerca critiche per le conversioni.
Questa guida copre le migliori pratiche pratiche per la progettazione della barra di ricerca che migliorano l’UX e l’UI della ricerca e-commerce, riducono l’attrito, supportano il comportamento reale degli acquirenti e migliorano la scoperta dei prodotti e le conversioni.
Che cos’è una barra di ricerca?
Una barra di ricerca è un componente UI che consente agli utenti di digitare una query e recuperare risultati da un sito web, un’app o un database. Di solito include un campo di input di testo e un pulsante (o un’azione da tastiera) per eseguire la ricerca.
In questo esempio dal demoshop di Luigi’s Box puoi notare che la barra di ricerca è migliorata con una funzione di completamento automatico.
Perché la progettazione della barra di ricerca è importante per l'UX e l'UI dell'e-commerce?
La progettazione della barra di ricerca influenza la velocità con cui gli acquirenti trovano i prodotti giusti e procedono verso il checkout. L’UI spinge gli utenti a interagire. L’UX garantisce che l’interazione porti a risultati rilevanti. Quando entrambi funzionano insieme, la ricerca sembra senza sforzo, supporta la scoperta dei prodotti e aiuta a convertire i visitatori ad alto intento in clienti.
Immagina di visitare un sito web che vende scarpe da ginnastica e hai il tuo cuore rivolto a un modello specifico. Navigheresti per tutto il sito web fino a trovare quel modello? Probabilmente no. È più probabile che il tuo obiettivo sia digitare il nome/tipo del modello nella casella di ricerca, premere invio e —voilà— trovare quello che stai cercando.
Una barra di ricerca intelligente su un sito web e-commerce è un elemento di progettazione sottovalutato, ma secondo la nostra ricerca personale:
44%
I clienti che utilizzano la ricerca nel sito sono il 44% più propensi a effettuare un acquisto.
40%
La funzionalità di ricerca rappresenta circa il 40% dei ricavi totali di un negozio online e in alcuni casi può raggiungere il 90%.
90%
La maggior parte dei clienti si concentra solo sui risultati della prima pagina.
14%
Circa il 14% dei clienti utilizza la ricerca su dispositivi mobili.
Ma cosa succede se la barra di ricerca non è ben ottimizzata e porta a una ricerca non riuscita? Come abbiamo scoperto, danneggia la scoperta dei prodotti e le vendite e aumenta il tasso di uscita.
Luigi’s Box exit rate after a failed search statistic
Quali sono le migliori pratiche per la progettazione dell’UI della barra di ricerca?
La progettazione dell’UI della barra di ricerca riguarda il rendere la ricerca chiara, accessibile e facile da usare.
Le seguenti migliori pratiche evidenziano gli elementi dell’UI che supportano una forte esperienza di ricerca in loco.
1. Crea un design mobile-first
Gli schermi mobili cambiano il modo in cui utilizziamo la ricerca. Gli acquirenti mobili hanno bisogno di un accesso più veloce e di un feedback più chiaro. La progettazione della barra di ricerca dovrebbe essere sviluppata tenendo a mente lo spazio dello schermo mobile. Il posizionamento dovrebbe essere visibile e facilmente accessibile con il più leggero movimento del pollice. Una barra di ricerca fissa, che rimane visibile nella parte superiore o inferiore di una pagina web mentre i visitatori scorrono, è anche un’ottima funzione per i dispositivi mobili.
Gli utenti mobili rappresentano più del 50% del traffico web mondiale, e questa cifra è in costante crescita anno dopo anno (YoY). Dato questo trend, dare priorità al design mobile-first per la tua barra di ricerca è essenziale.
2. Assicura visibilità
Una barra di ricerca difficile da individuare aumenta l’attrito e riduce l’engagement. Non far cercare ai visitatori del tuo sito web la barra di ricerca. Alcuni progettisti commettono l’errore di nascondere l’opzione di ricerca nel pulsante del menu, o non rendono il campo di ricerca sufficientemente visibile.
È importante mostrare l’intero campo di testo aperto perché nascondere la barra di ricerca dietro un’icona ne riduce la visibilità e aumenta i costi di interazione.
Assicurati che la tua barra di ricerca sia facilmente riconoscibile utilizzando un’icona di lente d’ingrandimento e posizionando un pulsante di ricerca accanto al campo di ricerca. Puoi anche migliorarne la visibilità utilizzando colori di sfondo che contrastano con il tema del tuo sito web.
3. Mantieni un design coerente su tutto il tuo sito web
Assicurati di posizionare il campo di ricerca nello stesso posto su tutto il tuo sito web.
I visitatori si aspettano che la casella di ricerca sia nello stesso luogo e abbia lo stesso aspetto della home page su cui hanno atterrato. Se non è coerente su tutto il tuo sito, può causare confusione e avere un impatto negativo sui tuoi tassi di conversione.
4. Implementa il completamento automatico
Il completamento automatico aiuta gli utenti a perfezionare le loro query prima di inviarle. A volte i tuoi visitatori potrebbero non sapere esattamente cosa stanno cercando. E alcuni utenti semplicemente non hanno voglia di digitare lunghi termini di ricerca.
La barra di ricerca con completamento automatico prevede le query degli utenti e offre suggerimenti in base al loro input iniziale, cronologia di ricerca, pagina attuale e altro.
Questa funzione apre numerose opportunità per coinvolgere i visitatori del sito web. Ad esempio, una singola query può produrre più risultati di ricerca correlati all’input, come categorie di prodotti e marchi principali. Questo riduce lo sforzo e accelera la scoperta dei prodotti.
Il completamento automatico offre un feedback rapido alle query degli utenti
Assicura istantaneamente agli utenti che sono arrivati nel posto giusto – il tuo e-shop – e stanno compiendo i passi giusti verso la ricerca del prodotto desiderato – che offri ed è in stock. Molto spesso, è anche utilizzato come una navigazione veloce per saltare direttamente alla giusta categoria di prodotti all’interno della tua struttura di categorie. La sua velocità è cruciale, poiché gli acquirenti la utilizzano anche per iterare rapidamente gli input di ricerca prima di passare all’esperienza di ricerca completa con filtri avanzati e ordinamento.
Michal Barla
CPO & Co-Founder, Luigi's Box
5. Aggiungi immagini nei risultati
Mostrare le immagini dei prodotti può aumentare le vendite, poiché i clienti spesso hanno un’idea visiva di quello che stanno cercando. Quando gli acquirenti vedono un’immagine di un prodotto nei risultati di ricerca che corrisponde alla loro immagine mentale, è più probabile che completino l’acquisto.
6. Includi testo segnaposto
Un buon testo segnaposto imposta aspettative chiare. Invece di testo generico, utilizza una copia che segnali cosa gli utenti possono cercare, come tipi di prodotti, marchi e promozioni.
Per aiutare gli utenti a comprendere i tipi di query di ricerca che possono fare, considera di includere un termine di ricerca di esempio come segnaposto nella casella di input. Questo è particolarmente utile se gli utenti possono cercare utilizzando vari parametri. HTML5 rende facile aggiungere testo segnaposto ai campi di input.
7. Mantieni la parola chiave nel campo
La parola chiave di ricerca dovrebbe rimanere visibile nella barra di ricerca dopo il caricamento dei risultati.
Inoltre, la barra di ricerca dovrebbe sempre mantenere e visualizzare la parola chiave più recente dell’utente. Questo consente agli utenti di modificare o perfezionare la loro query originale, ricercare di nuovo e trovare l’abbinamento di prodotto ideale.
Parola chiave Luigi's Box nel demo arcade del campo
Quali sono le migliori pratiche per la progettazione dell’UX della barra di ricerca?
La progettazione dell’UX della barra di ricerca va oltre l’aspetto del campo di ricerca. Dipende da quanto bene l’esperienza di ricerca supporta il comportamento reale degli acquirenti.
Ecco le migliori pratiche che possono renderla più efficace.
1. Velocità
Le persone sono occupate. Non vogliono aspettare a lungo che il tuo sito web carichi i risultati di ricerca. Questo è particolarmente vero quando si tratta di completamento automatico.
La velocità è tutto per l’esperienza utente, e se i visitatori non ottengono risultati subito, chiuderanno la finestra e compreranno da qualcun altro.
2. Qualità dell’abbinamento
L’utente non sempre ti fornirà l’abbinamento di query esatto. Potrebbe esserci un errore di battitura, un intento di ricerca mancante o contesto.
L’algoritmo dello strumento di ricerca dovrebbe essere sofisticato abbastanza da considerare tutti i fattori, riconoscere esattamente cosa sta cercando l’utente e quindi fornire abbinamenti di ricerca accurati. Una barra di ricerca che tollera e gestisce i piccoli errori migliora i tassi di successo e riduce le pagine con zero risultati.
Alcuni utenti potrebbero non utilizzare la stessa lingua del tuo catalogo di prodotti. I sinonimi e la comprensione del linguaggio naturale aiutano a tradurre i termini degli acquirenti e ad abbinare la loro query con risultati rilevanti.
3. Ricerca vocale
La ricerca vocale è un modo conveniente per gli utenti di trovare prodotti, soprattutto su dispositivi mobili, dove la digitazione può sembrare lenta o scomoda. Se sai che i tuoi clienti cercano frequentemente in movimento, la funzione di ricerca vocale può aiutarli.
Per renderlo facilmente riconoscibile, includi un’icona di microfono, all’interno o accanto alla barra di ricerca, per rappresentare la ricerca vocale.
Migliora anche la funzionalità di ricerca per gli utenti che potrebbero avere difficoltà nell’utilizzo di una tastiera a causa di limitazioni fisiche.
4. Filtri dinamici
I filtri dinamici aiutano gli acquirenti a restringere i risultati senza dover ricominciare da capo, soprattutto in cataloghi grandi. Migliorano la comodità visualizzando automaticamente filtri rilevanti personalizzati per ogni categoria di prodotto.
Ad esempio, gli acquirenti possono filtrare i bassi per il numero di corde, mentre i kit di batteria offrono opzioni di filtro completamente diverse.
I filtri dinamici cambiano anche a seconda del contesto.
Demo arcade dei filtri dinamici di Luigi's Box.
5. Barra di ricerca mobile
Poiché l’m-commerce continua a crescere, le funzioni di ricerca dovrebbero funzionare altrettanto bene sui smartphone come sui desktop.
I moduli di ricerca completamente funzionanti accessibili su siti web mobili migliorano significativamente l’esperienza per tutti gli utenti soddisfacendo le loro aspettative. L’incorporazione di funzioni avanzate come la correzione degli errori di battitura, la lemmatizzazione o il completamento automatico può fare una differenza significativa e aumentare le tue possibilità di vendere più articoli.
6. UX dei risultati di ricerca
Categorie
Aggiungi categorie per restringere i risultati di ricerca e migliorare l'esperienza utente complessiva. Ad esempio, scarpe, vestiti, accessori e altri prodotti simili possono essere suddivisi in categorie basate sul genere. Questo renderà più facile per le persone trovare i prodotti desiderati.
Risultati per pagina
Venti risultati per pagina è l'ideale. Questo ti consente di visualizzare un numero sostanziale di prodotti senza sovraccaricare i visitatori con troppe opzioni.
Descrizioni
Invece di limitarsi a elencare le specifiche, includi una o due frasi per descrivere il prodotto. Questo offre un'opportunità per usare un linguaggio d'impatto e invogliare i visitatori a fare clic.
Marchi
Il filtro dei risultati basato sul marchio ti consente di sfruttare la fedeltà al marchio già consolidata per aumentare le vendite sul tuo sito web.
7. Personalizzazione in base al comportamento precedente
Sebbene il viaggio di shopping spesso inizi con una ricerca, non sempre finisce con una vendita. La personalizzazione può rendere le interazioni della barra di ricerca più efficaci personalizzando i suggerimenti e i risultati in base al comportamento passato di ogni acquirente.
Con il software di ricerca avanzato, puoi sfruttare le query precedenti dei visitatori per personalizzare la loro esperienza. L’algoritmo di ricerca utilizza i dati dalla loro cronologia di navigazione, acquisti o comportamento, per ottimizzare il processo, presentando agli utenti i prodotti che hanno più probabilità di acquistare.
Aumenta il tasso di conversione del tuo e-shop con la ricerca personalizzata del sito di Luigi's Box powered by AI.
Cinque esempi di design efficace per barre di ricerca
In questa sezione, esamineremo cinque siti di e-commerce che dimostrano un design forte della barra di ricerca in pratica. Ogni esempio mostra come scelte consapevoli di UX e UI possono rendere la scoperta dei prodotti più veloce e intuitiva per i clienti.
1. Škoda Auto
L’e-shop di Škoda Auto non ha difficoltà a gestire una query che include la dimensione del prodotto desiderato, trovando agevolmente cerchi Karoq da 16″.
Ricerca di cerchi Karoq di dimensione 16 nell'e-shop ufficiale Škoda.
2. Acer
Il negozio Acer offre una barra di ricerca ampia che i clienti notano immediatamente. L’autocompletamento suggerisce query e prodotti popolari, mostrando suggerimenti di prodotti prima che gli utenti digitino le loro ricerche.
Ricerca con Autocomplete e query popolari su Acer e-shop.
3. 11teamsports
Un’altra barra di ricerca con suggerimenti di autocompletamento istantaneo di prodotti e query popolari. Dopo aver digitato “ars”, l’utente vede kit e merchandising della squadra di calcio Arsenal.
Autocomplete che mostra i prodotti più popolari del club di calcio Arsenal.
4. KiK
La barra di ricerca del sito web KiK è dotata di un testo segnaposto che invita il visitatore a utilizzare la ricerca per trovare i prodotti desiderati.
Ricerca di "calzini" nell'e-shop kik.de.
5. Bobcat
La ricerca di Bobcat fornisce suggerimenti di autocompletamento in modo più diretto e facilmente comprensibile. Viene fornita con query rotanti, offrendo all’utente idee su cosa cercare.
Barra di ricerca con autocompletamento sul sito Bobcat Europe.
I migliori strumenti per barre di ricerca
- Luigi’s Box
Luigi’s Box è nata come soluzione per affrontare le sfide della ricerca on-site per le aziende di e-commerce. Nel corso degli anni, ha guadagnato riconoscimento nel mercato europeo per il suo approccio innovativo. - Algolia
Fondata nel 2012 a Parigi, Algolia ha rapidamente espanso la sua presenza a San Francisco e in altre località globali. È nota per il suo approccio incentrato sugli sviluppatori e ha consolidato una posizione forte nel mercato della ricerca come servizio. - Elasticsearch
Originata come progetto secondario nel 2010 da Shay Banon, Elasticsearch è successivamente diventata il prodotto principale di Elastic, un’azienda fondata ad Amsterdam. Da allora è diventata un nome leader nelle tecnologie di ricerca open-source. - SearchSpring
Fondata nel 2007 a Colorado Springs, SearchSpring è nata come risposta alla crescente necessità di soluzioni avanzate di ricerca per l’e-commerce. Da allora ha servito numerosi marchi e rivenditori. - FactFinder
Con radici in Germania, FactFinder opera nel settore della ricerca per l’e-commerce fin dai primi anni 2000. È riconosciuta nel mercato europeo per le sue soluzioni robuste di ricerca e navigazione. - Klevu
Originaria della Finlandia, Klevu è stata fondata nel 2013. Con un focus sulle soluzioni basate sull’intelligenza artificiale, l’azienda ha ampliato la sua presenza in Europa e Nord America. - Doofinder
Fondata in Spagna nel 2011, Doofinder mirava a migliorare l’esperienza di ricerca per l’e-commerce per le aziende in tutta Europa. Da allora ha ampliato la sua base di clienti e le sue offerte. - Loop54
Con sede a Stoccolma, Svezia, Loop54 ha iniziato il suo percorso nel 2011. La focalizzazione dell’azienda sulle soluzioni basate sull’intelligenza artificiale l’ha distinta nel mercato dell’e-commerce nordico.
Ricerca nel sito con intelligenza—a budget contenuto
Non hai bisogno di un budget enorme per fornire un'esperienza di ricerca che converte. Parliamo di come ottenere una ricerca potente senza spendere troppo.
Conclusione
Un design efficace della barra di ricerca si riduce all’applicazione coerente delle giuste best practice. Posizionamento chiaro, scelte di UI consapevoli e funzionalità di UX di supporto come autocompletamento, tolleranza agli errori di battitura e personalizzazione lavorano insieme per aiutare i clienti a cercare con fiducia e trovare prodotti rilevanti più velocemente.
Presta attenzione ai dettagli, poiché questi elementi di design sono cruciali e possono fare o rovinare l’esperienza utente del tuo sito web.
Domande frequenti
Perché dovrei avere una soluzione di ricerca sul mio sito web?
Un’esperienza di ricerca solida aiuta i clienti a trovare i prodotti più velocemente e riduce il tasso di abbandono. Un design efficiente della barra di ricerca è una parte fondamentale di un’esperienza di ricerca. Fornisce ai visitatori del tuo sito web funzionalità di ricerca avanzate che utilizzano l’input dell’utente e i dati storici per fornire corrispondenze di prodotti accurate e personalizzate. Questo crea un’esperienza di acquisto fluida che diminuisce il bounce rate, migliora il tempo medio della sessione e aumenta le conversioni.
Come progettare una barra di ricerca efficace?
Un buon design della barra di ricerca dovrebbe essere mobile-friendly, visibile e coerente in tutto il sito web. La funzionalità della casella di ricerca dovrebbe essere veloce e deve offrire funzionalità potenti, come il completamento automatico, la ricerca sfaccettata, la ricerca vocale, i filtri dinamici, i risultati di ricerca personalizzati e altro ancora. Concentrati semplicemente nel rendere il processo di ricerca il più facile e semplice possibile per l’utente.
Posso creare la mia barra di ricerca?
Sì, è possibile creare una soluzione di barra di ricerca per il tuo sito web. In realtà, hai alcune opzioni. Ad esempio, puoi optare per librerie pubbliche, tecnologie open-source, Elasticsearch, plug-in, ecc. Tuttavia, se desideri uno strumento di ricerca avanzato e ad alte prestazioni che offra numerose funzioni futuristiche, Luigi’s Box è una delle scelte migliori.
UX per l’-ecommerce: le best practice
Uno store online ben progettato è molto più di un sito carino da vedere. Scopri i nostri consigli per una user experience capace di convincere i tuoi utenti a fare più acquisti.
Come creare un motore di ricerca per il tuo sito: l’ottimizzazione è la chiave del successo
Crea e ottimizza un motore di ricerca personalizzato con Luigi's Box. Migliora la UX e aumenta il coinvolgimento dei tuoi utenti.
Filip Kubelka è responsabile del product marketing di Luigi’s Box. Il suo background è nella traduzione e questo influenza il modo in cui pensa alla ricerca: la precisione conta e le parole che usi per descrivere un problema spesso rivelano se lo hai davvero compreso. Scrive delle difficoltà reali che i team e-commerce affrontano quando si tratta di search e discovery.
Altri articoli di questo autore