Il filtro nelle app. Concetti UX, UI patterns e linee guida per il design

• Lev Manovich, The Language of new media.

Trovare informazioni è sempre stato difficile; ancora oggi ciascuno di noi dedica molto tempo a questa attività, sui nostri smartphone o computer. Eppure su Internet una quantità infinita di informazioni sono a nostra disposizione, apparentemente così facili da raggiungere: però sono troppe.

E quindi le filtriamo. La metafora del filtro ci accompagna su app e siti ecommerce: è un’esigenza diffusa da parte dell’utente, una funzione diffusa sulle varie piattaforme.

Il filtro nel mondo del design delle interfacce è considerato un pattern, ovvero una soluzione generalizzabile ad un problema ricorrente. Possiamo quindi dire che la comunità dei designer ha identificato un modo standard, accettato, consolidato di progettare i filtri, almeno in un contesto come quello delle mobile app? Assolutamente no. Basta poco per verificare quanto siano disomogenee le soluzioni a livello di user experience (UX) e user interface (UI). Come mai?

Abbiamo deciso di scomporre il problema per analizzarlo. Abbiamo osservato da vicino e classificato i pattern più frequenti e le best practice; abbiamo analizzato pregi e difetti, rilevando come diverse soluzioni in realtà sembrano rispondere a problemi diversi. La metafora del filtro, apparentemente unificatrice e chiarificatrice, nasconde una complessità di obiettivi differenti.

L’articolazione delle concetto di filtro, basata sul modello a 7 stadi di Norman, ci ha permesso di analizzare nel dettaglio le fasi dell’interazione fra l’utente e il sistema e quindi dell’operazione di filtraggio: a ciascuna fase associamo delle best practices. Analizzando i micropattern nascosti dentro il pattern “filtro”, abbiamo tentato di individuare linee guida che aderiscono agli specifici obiettivi delle persone piuttosto che riprodurre in maniera acritica e standardizzata la funzione di filtraggio.

Siamo circondati da informazioni, e costantemente ci troviamo a doverne selezionare una porzione: la nostra capacità di elaborazione è limitata. Questa selezione è spesso guidata da processi attentivi, che permettano di spostare la nostra attenzione su alcune informazioni presenti nell’ambiente piuttosto che su altre; ciò avviene su vari livelli percettivi e sensoriali: filtriamo informazioni visive, uditive, etc.

Tipicamente, questo processo viene rappresentato con la metafora di filtro: come un filtro intelligente, lascia passare solo gli stimoli rilevanti. È un processo apparentemente “passivo”, una reazione neurofisiologica del cervello a stimoli esterni o interni sensoriali, influenzata dalla quantità di risorse cognitive a disposizione.

La metafora di filtro è largamente utilizzata anche nelle interfacce digitali, dove c’è la necessità di rappresentare, soprattutto visivamente, dei concetti o delle funzioni astratte. Quando applichiamo la metafora del filtro ad un’interfaccia però, non ci riferiamo allo stesso processo cognitivo descritto sopra. La situazione è un po’ diversa per una serie di aspetti:

• La quantità di informazioni presenti nel web e a cui è possibile accedere è potenzialmente illimitata;
• Il tipo di informazioni accessibili è diverso rispetto ad un contesto ecologico, e vincolato dal modo in cui sono presentate (ad esempio visivamente, tattilmente, etc.)

Queste variabili (quantità e tipologia di informazioni), condizionano il modo in cui dobbiamo filtrare le informazioni nel mondo fisico o su un’interfaccia digitale: si tratta di sforzi cognitivi molto diversi.

Filtrare informazioni in un ambiente digitale consente di scegliere selettivamente e coscientemente la tipologia di informazione o la sua salienza, sulla base dei nostri interessi. Almeno, così ci piace pensare.

Contrariamente, in un contesto ecologico questa selezione è spesso guidata da decisioni non del tutto coscienti.

Ma come scegliamo di filtrare e ri-filtrare delle informazioni? A quale logica, l’utente si affida per fare una ricerca avanzata?

Ci possono essere tre modi secondo cui un filtro può funzionare, e per rappresentarli possiamo affidarci alla logica Booleana. Da un punto di vista strettamente razionale, è possibile filtrare delle informazioni sulla base dell’unione di due o più criteri (OR), sulla base dell’intersezione di due o più condizioni (AND) oppure sulla base dell’operatore logico NOT, ovvero la negazione delle condizioni (vedi Figura 1. Operatori logici).

Figura 1. Operatori logici

È bene tener in considerazione, che pur quanto gli operatori logici appaiano chiari, spesso l’utente nella quotidianità non si sofferma sulla differenza fra l’approccio OR ed AND nel concatenare i filtri.

Se su un sito e-commerce applico i filtri “abito” – “blu” – “taglia 48”, mi aspetto di trovare solo gli abiti blu di taglia 48. Ma se su quotidiano online applico i filtri “cronaca” – “sport” , troverò solo la cronaca sportiva? O il doppio elenco di cronaca e sport? È corretto chiamarlo “filtro”?

La standardizzare delle azioni o delle funzioni proposte all’utente aiuta l’usabilità, l’apprendibilità e la memorabilità. Il concetto di pattern fu ideato da Christopher Alexander per simboleggiare una soluzione ad un problema ricorrente: una porta è un pattern perché può essere la soluzione al problema di uscire fuori da un edificio[1]. Analogamente, il termine pattern si è molto diffuso nel mondo del design delle interfacce, per cui proliferano online le librerie di UX e UI patterns. Non sono solo indicazioni progettuali, ma anche strumenti per accelerare le decisioni progettuali sulla base di “quello che fanno gli altri.”

Durante il corso degli anni, funzionalità importanti che ritroviamo in numerose mobile app o siti web si sono consolidate in una grammatica consolidata, in modo da aiutare il designer ma anche l’utente.

Ma fino a che punto è utile aderire a queste soluzioni standard? In particolare, nella progettazione di un sistema di filtri, problema così ricorrente, ha senso identificare soluzioni ad hoc?

I vari UI patterns e best practice diffuse nella comunità professionale sembrano in realtà contraddire lo stesso spirito di queste “raccolte”: l’elevato numero di libraries di patterns suggerisce una direzione opposta alla soluzione generalizzata ad un problema. Se è così difficile definire un “modo giusto” di progettare un filtro, probabilmente il problema sta nella definizione del concetto di filtro: che cambia a seconda del tipo di contenuto e di industry.

Per fare chiarezza sulla funzione di filtro nel mondo delle mobile app sono state prese in considerazione 29 mobile app, appartenenti a diverse categorie di contenuto (vedi Tabella 1 – App analizzate e classificazione).

App analizzate e classificazione

Al fine della nostra analisi, la metafora del filtro è stata scomposta. Sono stati individuati quegli elementi dell’interazione fra l’utente e l’interfaccia che giocano un ruolo nel portare a termine l’obiettivo di filtrare un contenuto.­­­

1.1 Come accedo al filtro

­­­­Un primo aspetto del problema è l’accessibilità alla funzionalità di filtro. La modalità con cui si accede ad una funzionalità è alla base dell’efficienza di tale funzione. Se l’utente non riesce ad accedere ad una funzione importante come quella di filtrare una lunga lista di informazioni, l’esperienza dell’utente sarà minima, negativa e aumenterà le possibilità che quell’utente non ritorni mai più su quell’app.

Di conseguenza il problema di accessibilità ai filtri può essere scomposto ulteriormente.

Figura 2. Varie rappresentazioni di filtro

1.1.1 Rappresentazione della funzione filtro

Un aspetto da dover tenere in considerazione quando si progetta un’interfaccia grafica è come rappresentare una funzionalità. Molte linee guida suggeriscono di optare per una visualizzazione combinata, ovvero di includere icona + label, piuttosto che la sola icona o la sola label.

L’opzione di utilizzare la sola icona non è consigliabile: il significato può essere frainteso. Inoltre, non vi è un’icona davvero standard per la funzionalità di filtro, che ha raggiunto la popolarità ad esempio del famoso hamburger menu. Le icone più usate nel mondo delle app sono l’imbuto (vedi Booking) oppure lo slider (vedi Zalando). Ad esempio l’icona dello slider viene utilizzata da alcune app (come nell’esempio sotto di Cinema Time) per accedere alle impostazioni.

Figura 3 – Cinema Time

1.1.2 Disposizione dell’accesso alla funzione filtro

Un ulteriore aspetto da tenere in considerazione quando si progetta un’interfaccia grafica è: dove disporre questa funzionalità?

Nelle mobile app l’opzione di filtro è di solito in alto a destra. Nel tempo gli utenti hanno imparato a riconoscere questo comportamento e probabilmente lo attendono in quella posizione: si trova in alto e a destra nell’80% delle app analizzate.

In altri casi, soprattutto per le app di viaggio e cibo, si trova invece in basso. Tipicamente, le app che collocano in basso l’accesso alla funzionalità di filtro, posizionano il filtro a fianco della mappa. Questo tipo di configurazione, mette l’utente nella condizione di filtrare le informazioni in base alla loro reale collocazione geografica (vedi Figura 4. TripAdvisor e Open table posizionano in basso l’acceso ai filtri).

Altre app includono il filtro nel “search”: nel momento in cui l’utente effettua una ricerca gli viene richiesto di compilare o selezionare dei campi in modo da ottenere sin dall’inizio risultati “filtrati” sulla base dei criteri di suo interesse. Una volta che l’utente avrà definito i criteri per la sua ricerca, non potrà accedere di nuovo ai “filtri” per modificare tali criteri, ma dovrà eseguire da capo una nuova ricerca. In altre parole la funzionalità di filtro non ha una collocazione autonoma all’interno dell’interfaccia, ma si interseca a quella di ricerca . Questo comportamento è riscontrabile su app come segugio.it, immobiliare.it, dove un database sterminato di opzioni deve essere piegato alle esigenze dell’utente per essere “navigabile”.

Figura 4. TripAdvisor e Open Table posizionano in basso l’acceso ai filtri

1.2.1 Visualizzazione delle opzioni del filtro

Il modo in cui l’utente visualizza le opzioni di filtraggio è un ulteriore aspetto di cui tenere in considerazione. Le modalità più utilizzate sono due: per mezzo di una finestra modale (pop-up) o in una nuova pagina.

La maggior parte delle app analizzate (23) opta per la visualizzazione dei filtri attivabili in una nuova pagina, mentre la restante parte (6) utilizza un “pop-up”.

Figura 5. Amazon usa una visualizzazione con una finestra “modale”

Figura 6. Skyscanner usa una visualizzazione con una nuova schermata

Il vantaggio dell’utilizzo del pop-up è quello di permettere all’utente una visualizzazione simultanea fra le scelte di filtraggio e il feedback sui risultati. Da un punto di visto cognitivo, questa scelta è da considerare molto apprezzabile, in quanto l’utente ha un feedback diretto e puntuale fra le azioni che compie e gli effetti che queste causeranno.

La scelta del pop-up, con la conseguente co-presenza di azione e feedback, è particolarmente frequente nelle app della categoria “shopping”.

1.2.2 Relazione fra “ordina” e “filtra”

Molti siti o mobile app tendono ad inserire la funzionalità di ordinamento all’interno della funzionalità di filtro. Non è una soluzione particolarmente corretta da un punto di vista logico, in quanto ordinare e filtrare informazioni sono due azioni distinte che producono un diverso risultato. Ordinare significa disporre secondo un certo criterio tutti gli elementi di un insieme. Ci possono essere numerosi modi di ordinare: in ordine alfabetico, per prezzo crescente, etc.

Diversamente, filtrare significa visualizzare solo alcuni elementi di un dato insieme. Anche in questo caso possono essere molteplici i criteri secondo cui filtrare: ad esempio vedere tutti i capi di abbigliamento di colore rosso.

Nonostante ciò, l’inclusione della funzionalità ordina all’interno della funzione filtra è molto frequente, e molti ritengono che questa modalità sia apprezzata dall’utente, perché considererebbe le due funzioni associate. Si suggerisce di integrare le due funzioni soprattutto quando la categoria semantica su cui filtrare coincide col criterio di ordinamento: filtrando per un certo range di prezzo, può aver senso ordinare i risultati per prezzo.

Dall’analisi eseguita sulle 29 app è emerso che:

• 10 app includono la funzionalità di ordinamento sotto la funzionalità di filtro
• 12 app non includono la funzionalità di ordinamento sotto la funzionalità di filtro
• 7 app non presentano la funzionalità di ordinamento

Figura 7. Zalando mantiene separate le due funzionalità

Figura 8. Yoox include la funzione di ordinamento dentro quella di filtro

1.2.3 Organizzazione dei filtri in ordine di importanza

Filtrare delle informazioni significa sceglierne alcune, scartarne altre. Per questo motivo, il modo in cui i criteri per la scelta di tali informazioni dovrebbero seguire una gerarchia, ovvero, è una buona pratica organizzarli secondo l’importanza e alla priorità che potrebbero avere per la ricerca. Per realizzare questa gerarchia è consigliabile posizionare i criteri di filtraggio più importanti nei primi posti, in modo tale che su questi vi sarà posta più attenzione da parte dell’utente.

Come stabilire però l’importanza dei criteri del filtro? Questa decisione può essere operata da due fonti: dal progettista del servizio/app o dall’utente. Chi ha disegnato il servizio può definire una gerarchia che influenzerà poi il modo in cui l’utente applicherà i filtri, considerando che maggiore attenzione verrà posta sui parametri iniziali, piuttosto di quelli posti nelle ultime posizioni. Ma allo stesso tempo è vero che l’utente sa cosa vuole filtrare sulla base di ciò che ha bisogno. Quindi l’altra opzione è proporre una gerarchia sulla base del modello mentale dell’utente.

In questo secondo approccio, assume molta importanza l’etichetta utilizzata per tale criterio.

La maggior parte delle app presenta una lista “statica” delle categorie su cui filtrare, ciò significa che per qualsiasi ricerca che l’utente farà si troverà sempre a dover filtrare secondo categorie prestabilite. App di e-commerce come Amazon ed Ebay adattano le categorie di filtraggio e la relativa label in base alle azioni fin qui condotte dall’utente, ricostruendo dinamicamente la struttura dei filtri a seconda della posizione nel processo di navigazione.

Figura 9. Amazon – filtro diverso a seconda della ricerca fatta

1.2.4 Promote important filter

È considerata una best practice mettere in evidenza e facilitare l’accesso ai filtri più importanti. Questo è particolarmente vero nel caso in cui la funzionalità di filtro permette di filtrare le informazioni secondo molti criteri. La scelta dei criteri di filtraggio da promuovere deve essere basata sia sugli obiettivi di business che su quelli dell’utente. Il modo in cui i filtri più importanti possono essere enfatizzati sono molteplici: possono essere visualizzati in maniera separata dagli altri filtri, collocati nelle posizioni più alte, identificati da un colore diverso.

Figura 10. Foursquare- adotta la best practice di promot important filter

1.2.5 Visualizzazione dei filtri attivabili

Per la visualizzazione dei filtri attivabili richiamiamo il concetto di “affordance” (Gibson, 19[2]. Con il termine affordance, Gibson voleva enfatizzare che le caratteristiche fisiche degli oggetti invitano ad un’azione, come ad esempio una pietra invita ad essere afferrata o un maniglione antipanico invita ad essere spinto[3].

Ugualmente il concetto di affordance può essere applicato anche alle caratteristiche degli elementi presenti in un’interfaccia: il modo in cui è rappresentato un tasto può invitare o meno l’utente a compiere un’azione, come un click.

Nel nostro caso, una lista di criteri su cui filtrare deve richiamare ed invitare l’utente a fare delle azioni. I criteri di filtraggio possono essere visualizzati con un colore più opaco (esempio: just eat), come se fossero disabilitati, e richiamano quindi all’azione del tap per abilitarli; uno switch invita l’utente a muoverlo (esempio: tripadvisor), un tasto invita l’utente a premere, lo slider invita l’utente a selezionare un range (come nel caso di Zalando).

Figura 11. Just eat – selezione

Figura 12. Tripadvisor -switch

Figura 13. Zalando – bottone e slider

1.3 Ho filtrato. E adesso? Il feedback, e le eventuali azioni successive

Applicare un filtro implica una modifica della visualizzazione dei contenuti. Di conseguenza l’utente si aspetterà di vedere un cambiamento, ovvero si aspetta di visualizzare solo le informazioni e gli elementi di suo interesse.

Tutte le app analizzate soddisfano questa assunzione e questo va a confermare il funzionamento e l’efficienza della funzione del filtro.

1.3.1 Visualizzazione dei filtri attivi (il feedback è chiaro?)

Quando si applicano dei filtri alla nostra ricerca, non è sufficiente visualizzare solo le informazioni da noi richieste: è necessario anche sapere costantemente quale genere di informazioni abbiamo filtrato. In altre parole un’interfaccia dovrebbe sempre restituire un feedback a seguito dell’azione eseguita dall’utente, a maggior ragione quando ciò che si sta visualizzando è solo una parte di un insieme più ampio.

Ma perché dovrebbe essere così importante fornire dei feedback a seguito delle azioni dell’utente? L’utente non dovrebbe sapere quali azione ha compiuto? Nonostante le grandi capacità che riteniamo di possedere, come tenere a mente un gran numero di informazioni o fare più cose nello stesso momento, in realtà abbiamo una tendenza innata a sopravvalutare le nostre capacità. Infatti il multitasking è particolarmente faticoso, e non riusciamo nemmeno a tenere a mente un gran numero di informazioni contemporanee. Secondo la celebre legge di Miller, al netto delle numerose variabili che possono influire, dovremmo far riferimento a un numero compreso tra 5 e 9 informazioni. Di conseguenza un utente che ha selezionato ad esempio 5 criteri di filtraggio, dopo aver visualizzato e letto i dettagli di almeno 3 prodotti, probabilmente non ricorderà più quali filtri aveva selezionato pochi minuti prima. E a quel punto, non saprà se aveva effettivamente selezionato correttamente la fascia di prezzo o il brand del prodotto che sta cercando.

Risulta quindi una buona scelta fornire dei feedback ben evidenti su ciò che viene selezionato; questo servirà anche ad alleggerire la memoria di lavoro, oltre a creare una situazione in cui l’utente sente di aver tutto sotto controllo.

Il feedback può essere dato su due livelli: un feedback immediato sulla selezione del filtro (a conferma dell’azione della selezione: per quali criteri ho scelto di filtrare) e un feedback permanente nella pagina in cui sono presenti i contenuti (come promemoria dei filtri applicati: per quali criteri ho filtrato).

Sono numerose le soluzioni per comunicare un feedback immediato all’utente sulla selezione fatta; alcune app prevedono una spunta a fianco della casella selezionata (Zara), altre un cambiamento di colore (Kayak).

Figura 14. Zara

Figura 15. Kayak

Anche il feedback presente nella pagina dei contenuti può esser proposto in modi diversi: alcune app mostrano il numero di filtri che sono stati applicati, vicini alla modalità di accesso al filtro, come nel caso di Kayak.

Altre app ancora, dopo aver selezionato i filtri, mettono in evidenza l’etichetta del filtro selezionato nella pagina dei risultati, come nel caso di Vivino. Tendenzialmente questo è il miglior modo per dare il feedback all’utente, molto chiaro e costantemente visibile.

Figura 16. Vivino -feedback con etichetta

Figura 17. Kayak – feedback numerico

Come già indicato, la scelta di mostrare i filtri in una modale ha un vantaggio in termini di feedback: il pop-up si sovrappone ad una parte del contenuto, e molte app come Amazon, Ebay e Zara mostrano simultaneamente il cambiamento del contenuto sottostante sulla base dei filtri che l’utente sceglie.

1.3.2 Rimuovere i filtri attivi e selezionarne di nuovi

Durante una ricerca avanzata, l’utente può avere la necessità di modificare i propri criteri di ricerca, sia perché ha commesso degli errori durante la selezione di questi, sia perché ha selezionato dei parametri troppo restrittivi che non hanno soddisfatto la ricerca, oppure semplicemente perché l’utente ha cambiato idea. Di conseguenza, per una buona UX, l’utente dovrebbe essere facilitato nella rimozione dei vecchi filtri e nella selezione di nuovi.

Alcune delle app analizzate richiedono all’utente di accedere nuovamente alla sezione dei filtri, deselezionare i vecchi, selezionare nuovi e confermare la propria decisione; questa serie di passaggi richiede un maggior numero di interazioni (intese come numero di click o tap) e un maggior tempo per raggiungere il proprio obiettivo. Altre app mostrano in evidenza i filtri che sono stati selezionati, permettono all’utente di rimuovere il filtro o selezionarne di nuovi in una maniera più immediata, con un minor numero di interazioni e un minor tempo di impiego al fine di raggiungere l’obiettivo. È il caso di Yoox, che permette di rimuovere ogni singolo filtro e di selezionarne di nuovi, senza dover riaccedere necessariamente alla pagina dedicata ai filtri.

Figura 18. Yoox

1.4 L’estensione temporale del processo di filtro. Filtro permanente e filtro customizzato

I filtri “permanente” o “customizzato” sono raramente ritrovabili e difficili da trovare nelle app, e la maggior parte di quelle analizzate non presenta queste opzioni.

Sono due concetti tra loro tendenzialmente associati: un filtro personalizzabile dovrebbe essere anche permanente (in un intervallo di tempo variabile) e viceversa; la permanenza di un filtro può essere considerato una personalizzazione, in quanto è rimasto stabile sulle basi delle scelte operate dall’utente.

A questo scopo, sono state considerate in questa analisi le app che utilizzano come “filtro permanente/personalizzato” i risultati di una ricerca strutturata.

Infatti, Booking, Airbnb o Trivago memorizzano i parametri della ricerca come il luogo, le date e il numero di viaggiatori; ciò non accade però nel momento in cui si vuole fare una ricerca avanzata e quindi utilizzare la funzionalità di filtro

Figura 19. Booking

Figura 20. Air bnb

Figura 21. Trivago

Zalando invece suggerisce all’utente una serie di filtri che sono stati applicati in precedenza, per quella tipologia di ricerca/prodotto, recuperando una “memoria” di un filtro personalizzato.

Facile.it invece adotta una strategia differente: gli utenti di ritorno che riaccedono all’app, visualizzeranno la ricerca precedente con tutti i filtri applicati.

Figura 22. Zalando

Figura 23. Subito.it

La funzionalità di filtro può essere scomposta ed analizzata per orientare in maniera più efficace le decisioni progettuali. Seguendo il modello a 7 stadi proposto da Donald Norman, è possibile scomporre il problema in termini di esecuzione delle azioni e della valutazione delle conseguenze sul sistema.

Infatti, il ciclo di feedback inizia nel momento in cui l’utente forma uno scopo, da cui successivamente formerà e pianificherà un’intenzione che poi concretizzerà con l’azione vera a propria. Una volta compiuta l’azione l’utente percepirà ed interpreterà lo stato del mondo, che lo renderà capace di valutare se ha raggiunto o meno il suo scopo iniziale. Nell’ottica di questo ciclo di feedback è possibile considerare alcuni degli aspetti dell’interfaccia esposti precedentemente come necessari per la riuscita dell’interazione fra l’utente e il sistema.

Modello a 7 stadi di Norman per orientare la progettazione di un sistema di filtri

Cerchiamo dunque di associare il modello a 7 stadi di Norman e in che modo questo può orientare la progettazione di un sistema di filtri.

1. Formare uno scopo

In questo stadio l’utente dovrà mettere a fuoco lo scopo: effettuare una ricerca avanzata per trovare esattamente ciò che sta cercando, nel minor tempo possibile. Di conseguenza, dovrà stabilire l’obiettivo di filtrare i contenuti. Già in questa fase preliminare si pone un primo problema: l’utente vuole filtrare dei contenuti e quindi lo farà affidandosi alla funzione di “filtro” o scrollando e usando quella di “ordina”? Difatti queste solitamente sono integrate in un’unica funzionalità.

2. Formare un’intenzione

Una volta che l’utente ha formato uno scopo, procede con la formazione di un’intenzione, quindi l’utente sentirà la necessità di affidarsi a qualche funzionalità presente nell’interfaccia che ha di fronte. Per facilitare la formazione dell’intenzione, per l’utente dovrà essere ben visibile e ben accessibile la funzionalità di filtro; di conseguenza risulta importante il modo in cui il filtro è rappresentato, dove è collocato e se vi sono dei filtri in evidenza.

3. Specificare l’azione

L’utente procederà con una pianificazione delle azioni che farà per raggiungere il suo scopo: vedo la voce “filtro” in alto a destra, ci clicco sopra, accedo ai filtri, seleziono quelli di mio interesse.

4. Eseguire l’azione

L’utente procede con l’esecuzione delle azioni che aveva pianificato precedentemente. Anche in questa fase ci sono degli elementi dell’interfaccia da dover tenere in considerazione, come la visualizzazione dei filtri attivabili e delle modalità di attivazione dei criteri di filtraggio.

5. Percepire lo stato del mondo

L’utente vede che qualcosa è cambiato nella sua interfaccia, la lista dei prodotti è diversa, ci sono meno elementi, e anche alcuni elementi grafici sono cambiati. Fornire dei feedback chiari è fondamentale per ottimizzare l’esperienza utente.

6. Interpretare lo stato del mondo

L’utente dopo aver percepito che degli elementi e dei contenuti sono cambiati, dovrà capire ed interpretare se i filtri selezionati sono stati applicati. Anche in questo caso dei feedback chiari e ben visibili sono di supporto all’interpretazione dello stato del mondo.

7. Valutare il risultato

La fase della valutazione è molto importante, perché in questo stadio l’utente potrà dire se ha raggiunto oppure no il suo scopo e se ne è soddisfatto.

Se l’utente non ha raggiunto il suo scopo iniziale o non ne è soddisfatto, o ancora capisce che deve definire un nuovo scopo, risulta importante dover rimuovere i filtri attivati e selezionarli di nuovi. Queste azioni dovrebbero essere semplici e rapide.

Il lavoro che abbiamo svolto aveva l’obiettivo di analizzare e studiare le soluzioni più diffuse per la progettazione dei sistemi di filtro, per poi poter definire le caratteristiche e UI patterns possibilmente applicabili a una molteplicità di contesti.

Definire il modello internazionale fra l’utente e il sistema (nel nostro caso la funzione di filtro nelle mobile app) ci ha permesso di suggerire UI patterns più precisamente centrati sulle esigenze dell’utente. Tentando di generalizzare alcune conclusioni, possiamo affermare che

• La combinazione icona + label appare la scelta migliore per evitare equivoci, non essendo consolidata una modalità di rappresentazione puramente grafica;
• È probabile che l’utente si aspetti il filtro collocato in alto a destra;
• Mettere in evidenza i filtri più importanti (promote important filter) può facilitare la pianificazione delle azioni per il filtraggio;
• La logica secondo cui funziona il filtro (AND, OR, NOT) dovrebbe essere trasparente all’utente;
• La visualizzazione dei filtri all’interno di una modale piuttosto che in nuova pagina, permette simultaneamente di applicare dei filtri e osservare un cambiamento del contenuto in background;
• L’affordance è importante: ogni criterio di filtraggio deve invitare ad eseguire un’azione.
• Il feedback immediato è importante: l’utente deve sapere che il sistema ha riconosciuto la sua azione, quindi è necessario prevederlo nelle micro-interazioni di selezione (spunte, cambiamento di colore, slider, etc.);
• È consigliabile mostrare un feedback riguardo ai filtri attivati, ben visibile nell’interfaccia. L’opzione più esplicita è un’etichetta che identifica il filtro attivo;
• Mettere in evidenza i filtri attivati permette di selezionarli o deselezionarli, rendendo l’interazione più dinamica, facile ed immediata.

[1] Alexander, C. (1977). A pattern language: towns, buildings, construction. Oxford university press.

[2] Gibson, J. J. (1977). The theory of affordances. Hilldale, USA, 1, 2.

[3] Tale concetto fu portato all’attenzione della comunità dei designer da Norman, che poi ne ha discusso le criticità, e lo ha tendenzialmente sostituito con quello di signifiers.