Alla “ricerca” dell’esperienza utente per(duta) smartphone

Leave a comment
Architettura dell'Informazione / Mobile / TUTTI I POST
smartphone AI

Oggi parliamo di ricerca tutt’altro che perduta per smartphone.
La ricerca importantissima nella navigazione per schermi ridotti va progettata bene, meglio di ogni altra funzionalità. Il perchè è nella navigazione che tutti noi sperimentiamo ogni giorno sui nostri telefoni.

Negli spazi ridotti la navigazione intesa come browsing risulta molto complessa. Riuscire a creare architetture fluide, ma spesso necessariamente gerarchiche non semplifica l’esperienza utente. Quando la mole di informazioni è molto ingente è necessario offrire alle persone vari modi per raggiungere ogni singolo contenuto.
Tra questi un posto importante lo occupa la ricerca in tutte le sue declinazioni di ordinamento e filtri.

mobile-ui-search-bar-designs-07

Su schermi ridotti la ricerca non può essere improvvisata.

Quando parliamo di schermi ridotti come quelli degli smartphone neanche il search ci assicura un’esperienza utente facile immediata perché ci dobbiamo misurare con tutte le difficoltà ergonomiche del caso. Nel box della ricerca dobbiamo digitare uno o più termini misurandoci con tasti molto piccoli e con una visibilità decisamente ridotta.
Gli errori di digitazione sono dietro l’angolo e gli eventuali raffinamenti del risultato possono essere davvero complessi da attuare.

Vediamo in sintesi cosa possiamo scegliere e attuare nei nostri prodotti per smarphone in fatto di ricerca:

  • Il cerca esplicito
  • L’auto-completamento
  • La ricerca dinamica
  • La ricerca contestuale
  • Il salvati & recenti
  • I risultati della ricerca
  • Il form e i filtri.

Il cerca esplicito

Il box della ricerca invita ad un’azione esplicita, bisogna individuare dove inserire la parola magica e quindi lanciare la ricerca.

Proprio per i motivi che abbiamo detto sopra la ricerca deve essere offerta in una modalità estremamente intuitiva. Se offriamo un box nella prima schermata tendiamo ad orientare l’utente su questa scelta come fa booking.com, oppure la ricerca viene inserita in alto a destra in forma iconica come nel caso di Airbnb oppure nel menu in basso sempre con l’immancabile lente (vedi Etsy). In questi due ultimi casi viene chiesto all’utente un tap in più, ma la scelta dipende molto dal prodotto che stiamo comunicando.

Edreams adotta una soluzione ancora diversa un tab centrale che invita alla ricerca con una label esplicita: “trova la destinazione“.
In tutti questi casi una volta digitato il termine possiamo trovare due differenti situazioni per mettere in moto l’interazione: si fa tap direttamente dalla tastiera (Vai) oppure si clicca sul tasto Cerca, Ok, Go o Vai in evidenza sotto al termine digitato.

Quali sono le azioni che facilitano l’esperienza utente di questa prima fase?

cerca esplicito

Il cerca deve essere molto visibile

Sicuramente mettere il box o il tasto della ricerca molto riconoscibili. La scelta di metterlo in alto a destra è sicuramente meno felice perché meno visibile e meno ergonomico (meno raggiungibile dalla mano sullo smartphone).
Se optate per un’icona tenete conto che la tendenza è quella di accompagnarla con il termine cha rappresenta (cerca). Probabilemnte per la ricerca questo può risultare superfluo (la casetta per la Home e la lente per il Cerca sono tra le icone più conosciute) ma è necessario uniformare tutte le icone che vorrete offrire.
Tra le altre accortezze orientate alla user experience ci sono sicuramente la possibilità di annullare la ricerca e quella di dare un feedback della ricerca in corso.

L’auto completamento


Tra gli strumenti più utili e pratici in assoluto che cerchiate su smartphone o su desktop c’è l’auto-completamento della parola che state digitando.

Mentre si scrive un termine emergono un insieme di possibili risultati, basta toccarne uno a scelta e la ricerca verrà eseguita.
Se il sistema non offre possibili soluzioni completeremo la digitazione della nostra parola e tapperemo invio per dare inizio alla ricerca.

bookingCome tutte le funzionalità del mobile dobbiamo però prestare attenzione ad una progettazione. Non basta fornire suggerimenti di auto-completamento, dobbiamo anche fare in modo che le persone li annullino facilmente se non corrispondono all’informazione desiderata.
Il suggerimento deve potersi eliminare facilmente, il popup proposto deve essere abbastanza grande e la X della cancellazione agilmente tappabile.
Linkedin organizza i risultati del completamento dividendoli tra persone delle propria rete e persone al di fuori della rete con il nome che inizia per le lettere che state digitando.

La ricerca dinamica

Questo è il modello più avanzato del completamento automatico.

figure4_parallel_wireframe

La ricerca lavora necessariamente su più schermate.

Oltre a lavorare sulle lettere digitate offrendo una rosa di risultati che aumentano via via si aggiungono altri risultati che non corrispondono alla parola digitata ma che danno senso al risultato. L’algoritmo dietro questa ricerca lavora su più piani, descrittori più tag semantici a cura del redattore.
Questo modello di ricerca dinamico viene utilizzato per perfezionare o segmentare un elenco esistente e visibile degli oggetti. In questo modo si si agisce sul raffinamento delle liste prodotte in maniera da restituire cluster di contenuti visibili all’utente che poi possa granularizzare in base alle proprie esigenze. È un ottimo sistema quando i dati sono molti e abbastanza omogenei per essere segmentati ulteriormente.

Yoox offre due possibilità di raffinamento della ricerca per parola chiave: mentre ancora la si digita si aprono sotto le sottocategorie per un risultato più ristretto (sandali, forse vuoi Sandali estivi o Sandali T-bar?) poi una volta tappato l’invio è possibile scegliere uno o più filtri dal un menu a cascata.

Il cerca contestuale

Quando i risultati sono davvero numerosi per le schermate degli smartphone diventa necessaria una segmentazione a monte, da subito.

Ecco allora che ci sono due possibilità: possiamo utilizzare il cerca in maniera contestuale alla sezione dove ci troviamo (es. in una app di cucina se ci troviamo nella sezione Piatti freddi digitando la parola “polpette” il sistema cercherà solo tra le ricette di polpette fredde).

Esty lascia il box della ricerca sempre presente molto visibile e apre a scroll l’elenco delle categorie, in questo modo scegliendo la categoria Bambole e scrivendo in ricerca “vestiti” il risultato sarà assolutamente contestualizzato.

stylect_ok

Stylect punta tutto al salvataggio e raffinamento sui prodotti preferiti

I salvati & recenti

Questa è una di quelle funzionalità che possono fare la differenza a livello di user experience. La ricerca abbiamo visto come appare un procedimento complesso sugli schermi piccoli, in tutte le interazioni su smartphone la possibilità di un tap sbagliato è altissima, dunque le persone vanno aiutate in ogni modo anche permettendogli di memorizzare le cose che gli sono piaciute.

In genere per salvare un oggetto nella propria lista bisogna essere registrati e questa è l’unica moneta chiesta in cambio agli utenti che d’altro canto potranno ricevere informazioni e feedback rispetto alle scelte fatte.

Yoox avverte quando il prodotto salvato nella lista è in esaurimento, mentre Zite e Stylect hanno costruito la propria architettura proprio sulle scelte che fa l’utente. Entrambe le app su argomenti diversissimi (Zite con articoli e Stylect con scarpe) selezionano una scelta mirata di nuove proposte sugli oggetti che abbiamo salvato in precedenza, riuscendo a raffinare a monte le liste da offrirci, a valle c’è la ricerca che abbiamo fatto e le cose che ci sono piaciute.

I risultati della ricerca

Una volta che viene eseguita una ricerca i risultati possono essere visualizzati nella stessa schermata o su una schermata dedicata ai risultati. Questi ultimi possono essere visualizzati in una tabella o ad elenco, su una mappa o satellite, o come immagini in miniatura.

epi_ok

Epicourius permette un raffinamento della ricerca libera a più livelli.

Le opzioni di visualizzazione dipendono dal prodotto ricercato e dal numero di risultati che si vogliono offrire. Kayak e Foursquare mostrano i risultati in una tabella. Airbnb mostra i risultati in una lista e offre la possibilità di guardare anche la mappa. Zappos offre una visualizzazione elenco e in aggiunta un carousel alternativo per navigare i risultati di ricerca. Nell’attesa del caricamento di tutti i risultati una buona esperienza utente ne offre alcuni mentre si segnala il caricamento nella pagina degli altri (lazy loading), in modo da rendere meno sgradevole l’attesa. Questa soluzione è sicuramente più orientata all’esperienza utente della paginazione dei risultati.

Alcune applicazioni offrono i principali risultati per accedere agli altri è necessario tappare sul bottone “per maggiori risultati”.

L’ordinamento dei risultati


Prima di tutto bisogna sempre dichiarare il numero dei risultati, la persona che li naviga in questo modo potrà scegliere quanto e come esplorarli. Poi è importante scegliere l’ordinamento predefinito per la visualizzazione dei risultati di ricerca.
Non esiste l’ordinamento perfetto, ma il giusto mix tra buonsenso e bisogni degli utenti.

Yoox sceglie il proprio in base al marketing e permette ai clienti di riordinare per altre categorie (prezzo, brand, etc.). Oltre a ricordare la parola cercata e dare la possibilità di azzerarla la schermata di risultati segue con due differenti menu a tendina (Mostra filtri e Ordina per) dando la possibilità di raffinare e ordinare in parallelo la ricerca.

Epicurious offre una soluzione molto interessante: una volta inserita la parola chiave nel box di ricerca appare un bottone con il numero di ricette trovate (view 6 recipe results), poi è possibile tappare una tra le categorie di raffinamento proposte (es. piatti di stagione o piatti dietetici) e scegliere uno tra gli ingredienti proposti in associazione (mela, banana, etc). Scegliendo e tappando di nuovo riappare il nuovo numero, più basso, di ricette e solo allora si arriva ai contenuti finali.

I form e i filtri di ricerca

Anche qui non esiste la migliore delle soluzioni ma quella che più si avvicina ai bisogni degli utenti. Per questo è importante fare ricerca prima e testare durante e dopo la progettazione.
Alcune applicazioni si presentano con il box di ricerca già visibile in home, altri optano per una schermata dedicata con i punti di accesso che abbiamo visto all’inizio dell’articolo.

Una volta digitata la parola i filtri e i risultati possono apparire nella stessa schermata o essere rappresentati da link che aprono altre pagine. Oppure, caso meno diffuso, possono essere contenuti in un pop-up come fa Tripadvisor.

Conclusioni


Qualunque soluzione si adotti la differenza è nel coinvolgimento attivo delle persone a cui è destinato quel prodotto. Nella fase di indagine si possono scoprire elementi davvero sorprendenti come il fatto che i vostri clienti non vogliono tutte le opzioni che state immaginando. Magari hanno bisogno di meno o invece necessitano solo un rilascio graduale. Dipende. Accogliete senza preconcetti tutto quello che vorranno dirvi le persone analizzatelo, costruite sopra il vostro progetto e siate pronti a rimetterlo in discussione testando.
Il testing è un altro momento importante che potrete fare in economia e praticità su carta e poi con maggiore definizione a schermo. Scoprirete altre cose, correggerete, integrerete e arriverete alla meta con un buon prodotto finale.

Tutto il tempo, la fatica e il denaro che avrete impiegato in questa fase acquisterà magicamente un senso. È la UX.

Per saperne di più scaricate il Bento book:

Progettare in grande per schermi piccoli. Free ebook

 


Riferimenti


Prima di mai provato a progettare un interfaccia di ricerca per qualsiasi piattaforma, acquistare e leggere questi due libri:

>> Search design pattern: design for discovery di Peter Morville e Jeffery Callender

>> Practical Ecommerce Search: UX Strategies for Success di Greg Nudelman.

Condividi suShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Lascia un commento