UX: User Experience* o esperienza utente
La migliore “funzione di ricerca” sui cellulari è una scommessa da vincere. Quest’anno, prima che il COVID colpisse l’Europa e le Americhe, il 66% degli utenti di internet ha utilizzato un telefono cellulare o un tablet per fare degli acquisti.
Gli utenti sono pieni di risorse e giustamente esigenti. Con così tanta scelta di brand e prodotti disponibili, si aspettano che la funzione “ricerca” nelle app sia veloce, reattiva e facile da usare. Ma raggiungere questo obiettivo non è così facile.
Schermi piccoli, tastiere virtuali ancora più piccole e problemi di connessione rendono il sistema di ricerca sul formato mobile molto diverso rispetto al desktop. Fortunatamente esistono buone tecniche per l’esperienza utente sui dispositivi mobile, come per esempio la barra di ricerca dell’app o l’interfaccia utente dei risultati di ricerca, soluzioni che puoi implementare per costruire una funzione di ricerca di grande qualità.
3 elementi chiave per una perfetta esperienza utente di ricerca sui mobile
1. La barra di ricerca per dispositivi mobili (e le alternative)
Questo passo è semplice ma fondamentale: valutare dove inserire la funzione di “ricerca” in base alle esigenze dell’utente. Abbiamo tre opzioni: la barra di ricerca a tutta lunghezza, parte della barra delle schede o una semplice icona.
La barra di ricerca a tutta lunghezza appare di solito sulla schermata principale, consentendo accesso immediato alla funzione di ricerca. Se il tuo prodotto o la tua app hanno come obiettivo quelli di consentire agli utenti un accesso facile e veloce a più contenuti, allora la barra di ricerca mobile completa è la soluzione ideale. La ricerca diventa il centro dell’interazione con i contenuti o prodotti, e prende il sopravvento sullo schermo una volta che gli utenti iniziano a digitare. Se si utilizza la barra di ricerca completa, assicurati che la ricerca sia ben visibile!
La tab bar* è la soluzione quando la ricerca non è il punto di accesso principale per i contenuti, ma si vuole comunque dare agli utenti un facile accesso alla funzione di ricerca, indipendentemente da dove si trovano nell’app. Spotify, ad esempio, privilegia gli scaffali di contenuti con consigli e liste nella schermata iniziale, ma quando l’utente desidera una melodia specifica, ha un accesso rapido alla ricerca.
L’icona di ricerca contestuale è l’approccio più flessibile: il pulsante per la ricerca viene visualizzato nella parte dell’app in cui ha più senso ed è più utile per l’uso. Tuttavia, è anche un grande compromesso, in particolare nell’e-commerce, questo perché il modello scelto determina quanto gli utenti interagiranno con la ricerca stessa (e gli utenti della funzione ricerca generano conversioni in modo più efficace).
2. La schermata di ricerca intermedia
Una volta che abbiamo stabilito dove inizia la ricerca per l’utente, l’elemento successivo dell’interfaccia utente da progettare e da ottimizzare è la schermata di ricerca. Questa schermata serve come collegamento tra la visualizzazione principale “non di ricerca” e la successiva pagina dei risultati di ricerca. La schermata di ricerca viene visualizzata non appena l’utente tocca il testo inserito nel campo di ricerca o l’icona di ricerca, dicendo all’app: “Sto cercando qualcosa e mi aspetto di ricevere informazioni utili”.
Come sappiamo, ogni tocco è un’azione in più, quindi sarà opportuno gratificare gli sforzi dell’utente. Ecco tre opzioni di progettazione che utilizzano la schermata di ricerca per guidare la richiesta dell’utente:
Ricerche recenti: quando un utente cerca un prodotto, è molto utile offrirgli la possibilità di dare un rapido sguardo alle ricerche precedenti per un confronto o come promemoria.
Ricerche di tendenza: in questa schermata viene mostrato all’utente ciò che gli altri utenti stanno cercando maggiormente nell’app. Questo aiuta l’acquirente occasionale o non ispirato a scoprire facilmente i contenuti facendo clic su un suggerimento.
Categorie: questa schermata di ricerca guida l’utente con una serie di opzioni di filtro per definire e perfezionare la ricerca, velocizzando e semplificando notevolmente il processo di ricerca.
Suggerimenti
Con i suggerimenti legati alla “ricerca”, l’utente non vede subito i risultati. Quando digita una richiesta, gli viene mostrata una serie di dati più complessi, popolari o rilevanti in base all’input. Ad esempio, se l’utente digita “iPhone”, i suggerimenti visualizzati potrebbero essere “custodia per iPhone”, “cavo iPhone, “caricabatterie per iPhone “, ecc.
Un grande esempio di uso dei suggerimenti di ricerca è la ricerca attraverso un enorme set di dati. Amazon ne è un ottimo esempio: gli utenti possono lasciarsi confondere dalla quantità dei risultati di ricerca — guidarli con le query suggerite velocizza il tempo che impiegheranno a raggiungere i contenuti rilevanti e quindi accelerano l’acquisto.
Risultati immediati
Un’altra opzione è quella di ottenere i risultati effettivi ad ogni tocco di un tasto e visualizzarli nella pagina dei risultati. Questo approccio è più efficace quando il set di dati è limitato e l’utente ha un’idea più precisa di ciò che sta cercando. Nell’esempio di Spotify, a causa della natura del prodotto, i risultati della ricerca saranno limitati al genere degli album, delle canzoni, delle playlist e degli artisti — il che renderebbe i suggerimenti di ricerca complicati e controproducenti.
Suggerimento bonus: un buon approccio, come nell’esempio di Spotify, è mostrare un numero limitato di risultati per tipo di contenuto (5 artisti, 5 band, etc). I risultati più rilevanti appariranno nei “primi” 5, offrendo all’utente una rapida panoramica, inoltre si può aggiungere un pulsante “mostra di più” per consentire all’utente di approfondire per categoria.
Combinazione: suggerimenti di query* e risultati immediati
L’ultima opzione da considerare è la combinazione di entrambe le strategie. Combinazione che funziona benissimo quando si dispone di un set di dati molto ampio e si desidera guidare l’utente con suggerimenti, e si è anche in grado di determinare se si è verificata una buona corrispondenza. Nell’esempio del Google Play store, vediamo un risultato istantaneo reale sopra i suggerimenti di query multiple.
Questa è un’ottima strategia, in quanto ci sono milioni di app che un’altra query potrebbe soddisfare, ma anche un alto grado di fiducia che la query “airbnb” corrisponderà a un risultato concreto e immediato.
3. La schermata dei risultati della ricerca mobile
La componente finale e decisiva della UX di ricerca mobile è la schermata in cui agli utenti vengono presentati i loro risultati di ricerca. Analizziamo le migliori pratiche per questo fondamentale aspetto.
Best practice per la user experience della ricerca mobile
L’obiettivo finale della UX della funzione ricerca mobile, è quello di fornire all’utente un’esperienza veloce, intelligente e semplice. Siamo tutti viziati dal motore di ricerca ad altissime prestazioni di Google e dalle funzionalità di suggerimenti automatici, personalizzazione e consigli di Amazon. Questo rende indispensabile la ricerca ovunque — anche sul web mobile e nelle applicazioni di ricerca — per soddisfare le aspettative degli utenti, stabilite dai grandi produttori.
Gli ostacoli ad un’ottima UX mobile
1. Schermi minuscoli
La maggior parte delle difficoltà nello sviluppo dell’interfaccia utente di ricerca mobile deriva dalla limitazione dello spazio sullo schermo per la visualizzazione delle informazioni. Un errore comune è quello di voler visualizzare tutti i dati, così come è possibile fare da desktop. Con il mobile, la regola numero 1 per la visualizzazione dei dati è “meno è meglio”.
Quanti risultati si visualizzano e quante informazioni sono disponibili per ogni risultato è la differenza tra il sovraccarico di informazioni e una buona esperienza utente.
2. Inserimento di informazioni fisicamente più difficili
È vero, siamo nell’era della ricerca vocale, ma la maggior parte degli utenti continuano a battere sulle loro minuscole tastiere con 2 pollici anziché 10 dita, ogni tocco diventa sempre più complicato. Le tastiere virtuali sono affollate, scomode e inclini a generare errori, causando un’alta probabilità di frustrazione all’utente per la mancanza di risultati. Oltre a questo, il cellulare viene spesso utilizzato in condizioni non ottimali come, su un treno traballante o mentre si cammina. Quindi l’inserimento di informazioni sull’interfaccia utente del nostro telefono, è inevitabilmente e drasticamente compromesso.
3. Inserimento di informazioni più complesse
Le applicazioni si sforzano di fornire un‘esperienza utente il più fluida possibile, con un minimo di tocchi, scroll e input. Purtroppo la ricerca non è così semplice. Gli utenti della ricerca devono prima pensare a una richiesta appropriata, poi digitarla e poi riformularla, è evidente che questo processo non potrà mai essere un’azione che si concretizza con un solo tap.
4. Rete, o la sua assenza
La copertura della rete raramente è perfetta, anche nelle città più trafficate. I progettisti e gli sviluppatori di dispositivi mobile devono prevedere che l’utente possa essere offline e quindi progettare l’esperienza di conseguenza.
Vediamo ora come superare questi ostacoli. Tutto si basa sulla validità del progetto, sulla facilità d’uso e sulla gestione intelligente di una larghezza di banda e una connessione non ideali. Di seguito alcune best practice per ciascuno di questi elementi.
Le migliori pratiche di UX design per la schermata dei risultati della ricerca mobile
Best practice 1: visualizza i risultati di ricerca nel modo giusto
Iniziate a capire come i vostri utenti navigano nel vostro sito. Per gli articoli che selezionano visivamente — come scarpe o vestiti — dovreste visualizzare i risultati della ricerca come immagini ingrandite.
Per i risultati di ricerca particolarmente esigenti in termini di specifiche, come i ristoranti, la strategia migliore è quella di visualizzare un elenco con dettagli come prezzo, distanza e valutazioni.
Anche se è possibile utilizzare un mix di entrambi, individuare come i tuoi utenti effettuano la ricerca ti guiderà nella scelta della giusta interfaccia di ricerca.
Best practice 2: filtro che riduce la confusione sullo schermo
Fornire opzioni di filtro è un must nelle esperienze di ricerca avanzate. Poiché è difficile includere sia i filtri che i risultati della ricerca nella stessa visualizzazione senza riempire lo schermo, cerca modi efficaci per limitare la confusione, pur fornendo un’efficace set di filtri.
Amazon fornisce una barra di filtri a scorrimento, integrando così un numero impressionante di opzioni di filtro:
Le buone esperienze di ricerca con i filtri hanno una cosa in comune: forniscono un riscontro quando l’utente applica un filtro. Ad esempio, l’applicazione Airbnb ha un pulsante nella parte inferiore dello schermo che adegua il numero di risultati ogni volta che cambi un filtro.
Pratica 3: Mostra solo i risultati più rilevanti
Mentre sul desktop ci si può permettere di non avere il risultato più rilevante in alto — poichè l’utente alla fine lo troverà — la stessa cosa non accade sui dispositivi mobili. Infatti a causa dello spazio limitato, solo i primi risultati di ricerca sono visibili all’utente, e per questo motivo è meglio che siano pertinenti.
La pertinenza viene valutata al meglio prendendo in considerazione sia le regole di classificazione testuali che quelle di business; potete saperne di più qui.
Buone pratiche d’uso
Miglior best practice n.1: riconoscere gli errori di battitura
Come abbiamo notato nella sezione dedicata agli ostacoli, è facile per l’utente fare degli errori di battitura. Quindi è importante che i risultati della ricerca abbiano una sorta di meccanismo di tolleranza agli errori di battitura. Anticipare le intenzioni dell’utente e correggere i suoi errori ridurrà sostanzialmente le sue frustrazioni.
Best practice n.2: lascia che siano loro a scansionare i risultati
Ad alcuni utenti piace leggere tutto sullo schermo, ma la maggior parte di noi preferisce poter fare una selezione, soprattutto quando navighiamo senza sapere esattamente cosa stiamo cercando. È compito di un grande UX di ricerca mobile aiutare gli utenti ad effettuare la ricerca — e il modo migliore per farlo è quello di evidenziare.
Evidenziare aiuta l’utente a capire perché sta ottenendo risultati o suggerimenti specifici. Ci sono due usi efficaci dell’evidenziazione:
- Quella standard corrisponde esattamente alla domanda. Questo è ottimo per l’utente per capire perché la sua query corrisponde ad un risultato, e viene utilizzato al meglio quando mostra risultati istantanei.
2. Quella invertita mette in risalto tutto tranne la query di ricerca. Un ottimo esempio è quello dei suggerimenti di ricerca, in cui è possibile rendere facile per l’utente identificare le differenze tra i suggerimenti.
Migliori pratiche
Best practice n.1: velocizza la ricerca
Anche se è ovvio dobbiamo dirlo, una buona esperienza di ricerca deve soddisfare le aspettative di velocità dell’utente. Google ha impostato la barra alta, e le applicazioni devono adeguarsi.
Best practice n.2: gestire una scarsa connettività
Mentre usano il cellulare, gli utenti sono in movimento, e spesso c’è una scarsa connessione. L’esperienza di ricerca deve adattarsi a queste circostanze nel miglior modo possibile così da garantire all’utente un’esperienza fluida e gradevole.
Quando la connessione è lenta, una buona idea è quella di mostrare alcuni indicatori di avanzamento: rotelle, icone di caricamento o barre di avanzamento. Un altro modo per gestire le aspettative dell’utente è quello di mostrare uno schermo con dei segnaposto:
Questo dà all’utente un senso di avanzamento e di riscontro. Un’altra tattica è quella di implementare il “caricamento lento” (lazy loading), in cui dare priorità a determinati tipi di contenuti rispetto ad altri, e recuperarli separatamente.
Comunque, il timore della mancata disponibilità della rete ad un certo punto sarà evidente all’utente, e questo, oltre a mostrare il pulsante di “riprova”, deve essere gestito in modo corretto. Un modo semplice per risolvere questo problema è quello di mettere in cache i migliori risultati offline, e quindi offrire un’esperienza di ricerca locale di base. Un altro modo è quello di fornire sul dispositivo un motore di ricerca agile avanzato, che sia in grado di fare la maggior parte delle cose che farebbe online. Questo però richiede molte competenze, risorse e tempo.
Cos’altro?
La decisione su come guidare l’utente nell’esperienza di ricerca mobile dipende da molti fattori:
- le dimensioni e la complessità del tuo set di dati
- la conoscenza che ti aspetti che il tuo utente abbia sul set di dati che sta cercando
- il tuo desiderio di trovare un equilibrio tra la scoperta e l’intento nell’esperienza di ricerca
Oggi abbiamo trattato gli elementi più importanti della ricerca per dispositivi mobili: dal posizionamento dell’inserimento di testo, alla schermata di ricerca e ai risultati. Integra questi consigli con l’analisi della ricerca (in modo da sapere cosa gli utenti cercano e su cosa fanno più clic), con gli A / B test sulla configurazione della schermata dei risultati di ricerca e gli utenti faranno clic e acquisteranno più velocemente.
Per ulteriori letture, consigliamo questi eccellenti articoli di UX Planet e Smashing Magazine.
atoms: we design for Humans
Glossario
*UX (User experience): è un termine utilizzato per definire la relazione tra una persona e un prodotto, un servizio o un sistema.
*Tab bar o navigazione a schede: consente di navigare più pagine web contemporaneamente, mantenendo però il tutto all’interno di una sola finestra, per semplificare la navigazione e consumare meno risorse di sistema.
*Query o query di ricerca: sono un insieme di parole chiave (keywords) attraverso le quali un utente esprime un’intenzione di ricerca.
