Mobile User Experience: a che punto siamo?

Nel 2007 con il lancio del nuovo iPhone, la qualità dell’esperienza d’uso (user experience) acquisiva un valore determinante nella scelta e nel successo di un prodotto digitale.

Illustrations by Suzey Levis

Per user experience si intende la sommatoria delle emozioni, delle percezioni e delle reazioni che una persona prova quando entra in contatto con un’azienda, un prodotto o un servizio”, Jacob Nielsen.

Da allora la User Experience (UX) è diventata un ingrediente indispensabile nella creazione di prodotti digitali: ogni interazione dell’utente con il prodotto deve essere curata nei minimi dettagli affinchè l’esperienza sia significativa, utile e piacevole.
 Ricerche e studi dimostrano ormai in modo inconfutabile che un prodotto digitale con una buona UX migliora il ROI (Return on investment) perchè:

  • aumenta le conversioni e il numero dei visitatori
  • diminuisce il tasso di abbandono
  • rafforza il brand
  • migliora il posizionamento sui motori di ricerca
  • riduce i costi di sviluppo e i costi di supporto al cliente (call center).

Lo stato dell’arte della UX dei mobile devices.

Dall’ultimo report sullo stato della Mobile Use Experience, redatto da Norman&Nielsen Group (The State of Mobile Use Experience), risulta che la UX gode di buona salute. Questo è dovuto a tre fattori:

  • abbiamo ormai alle spalle 9 anni di progettazione di interfacce per i mobile devices
  • le aziende hanno finalmente compreso che è indispensabile essere presenti anche nel mobile
  • il diffondersi del Responsive Web Design grazie al quale i siti web sono visibili e utilizzabili indipendentemente dal device in cui vengono visualizzati.

Ogni anno nascono nuove tendenze e stili come skeumorphism, flat design, accordions, tab, hamburger, cards, ecc… Vediamo qui quali aspetti, al di là delle mode passeggere, sono considerati — sulla base dei risultati delle più recenti User research (interviste, test di usabilità, questionari) — determinanti nella creazione di una valida UX:

1. Navigazione semplice e coerente

2. Presentazione dei contenuti “at a glance”

3. Interazione facile e intuibile

4. Uso sapiente delle animazioni e microinterazioni

5. Massima cura della first user experience e dell’onboarding flow

Scenario “mobile”

Prima di scendere nei dettagli, è bene ricordare quali sono le peculiarità dello “scenario mobile”. 
 A differenza di quando utilizziamo il PC, comodamente seduti a una scrivania, davanti ad uno schermo con tastiera e mouse, quando interagiamo con il telefono spesso stiamo facendo contemporaneamente altre attività come camminare, fare la spesa, parlare con qualcuno: la nostra attenzione è quindi frammentata, le sessioni possono essere brevi e interrotte di frequente.

LukeW

Altri fattori determinanti sono la dimensione dello schermo, come teniamo il telefono in mano, con quale dita navighiamo, come inseriamo i dati; tutto ciò si riflette sulle scelte progettuali che faremo.

1. Navigazione semplice e coerente

La navigazione ha un ruolo fondamentale nella progettazione delle interfacce perchè ci comunica che cosa il prodotto ha da offrirci, che cosa possiamo fare con esso e ci indica la posizione in cui ci troviamo.

Illustrations by Suzey Levis

Per costruire una buona navigazione è necessario:

a) individuare i contenuti e le funzionalità principali e quelle secondarie (prioritization is the key), organizzandoli in modo che gli utenti siano in grado di trovare da soli ciò che stanno cercando.

b) scegliere il modello di navigazione idoneo per la struttura della nostra App.: la scelta migliore risulta essere quella con le voci del menu ben visibili e non nascoste.

L’utilizzo molto frequente da parte dei progettisti di modelli di navigazioni con le voci del menù nascoste, come l’hamburger menu, ha rivelato una difficoltà da parte degli utenti nello scoprire gli argomenti della App, un tempo più lungo nel completare i task e un maggiore senso di frustrazione.

Illustrations by Suzey Levis

Un buon compromesso tra l’esigenza di mostrare le voci di menu e la limitata grandezza dello schermo è rappresentato dalla combo navigation dove sono mostrate in modo visibile e permanente le voci di menu principali e le altre, secondarie, sono accessibili tramite un‘icona specifica (che può essere anche l’hamburger icon). Inoltre in questo modo possiamo fornire all’utente il prezioso senso di orientamento permettendogli di capire in quale area si trova e quali pagine può ancora visitare.

Le voci di menu inoltre andranno collocate nella parte inferiore dello schermo (bottom navigation), questo perchè la maggioranza degli utenti utilizza il telefono con una mano sola e naviga con il pollice, quindi l’area più facilmente raggiungibile è quella in basso a sinistra. (How Do Users Really Hold Mobile Devices?)

Illustrations by Suzey Levis

2. Presentazione dei contenuti at a glance

Un’altra difficile sfida sta nel trovare il giusto compromesso tra la grande quantità di contenuti che in alcuni casi dobbiamo inserire nelle interfacce (si pensi ad esempio agli store Amazon, Yoox ecc… ) e il poco spazio che abbiamo a disposizione sullo schermo dello smartphone. 
 Una buona strategia sta nell’utilizzo delle “card”: piccoli “contenitori” di informazioni costituiti da un titolo, un’immagine e a volte poche righe di testo che costituiscono i “punti di entrata” (entry point) verso informazioni più dettagliate.
 In questo modo l’utente percepisce la qualità e la quantità delle informazioni e al tempo stesso ha la possibilità di visualizzare ulteriori dettagli solo se interessato, il tutto in modo intuitivo e veloce.

Illustrations by Suzey Levis

3.Utilizzo sapiente delle animazioni e delle microinterazioni.

Abbiamo già accennato al precario contesto in cui interagiamo con i mobile devices (scarsa concentrazione, frequenti interruzioni). Le animazioni giocano un ruolo fondamentantale di “recall” impedendo agli utenti di perdersi perchè aiutano a capire che cosa sta accadendo nell’interfaccia, suggeriscono le successive interazioni e allo stesso tempo ci divertono con piacevoli dettagli visivi.

Nick Babich

Grazie alle animazioni, l’esperienza diventa un continuum evitando brusche interruzioni e salti tra i vari “stati” della App (come il passaggio da una pagina ad un’altra o da uno status ad un altro).
 Usiamo quindi le animazioni per:

1. guidare l’attenzione dell’utente

2. aiutare a visualizzare i risultati

3. comunicare il cambio di status

4. fornire i feedback all’azione dell’utente

4. Interazione semplice e intuitiva

Interagire con il telefono può essere faticoso quando dobbiamo inserire dei testi o compilare dei form. In questo caso dobbiamo fare ogni sforzo per rendere questi compiti il più naturali possibile. Alcune strategie da adottare:

1. Chiedere solo i dati che effettivamente servono o rimandare al sito sul desktop per inserirli se sono effettivamente necessari

2. Memorizzare i dati che l’utente ha già inserito in precedenza per non farli riscrivere ogni volta

3. Far apparire la keyboard giusta: alfabetica o numerica a seconda del contesto in cui ci si trova

4. Dividere in piu step i form lunghi. É importante che l’utente focalizzi la sua attenzione su uno step alla volta.

5. Inserire una status bar per comunicare quanto manca al compimento di un task, questo tranquillizza l’utente sul fatto che sta procedendo in modo corretto e gli dà un senso di soddisfazione

5. Cura della First User Experience

In media il 70% degli utenti attivi abbandonano le App dopo 3 giorni dalla installazione. E l’80% dei rimanenti utenti abbandona la app nei successivi 30 giorni (Mobile App UX Design: Making a Great First Impression). 
 La UX può giocare un ruolo fondamentale per trattenere gli utenti in questo primo delicato periodo (da qui il nome di First UX): il segreto è offrire un’esperienza piacevole fin dall’inizio tanto da farli rimanere “appiccicati” alla App. Come?

a. Onboarding flow. Al primo lancio della App può essere utile illustrare quali sono i punti di forza della App stessa, come utilizzarla e come può soddisfare i bisogni dell’utente. Per fare questo è necessario progettare un onboarding flow breve ed efficace che non annoi. L’ideale è proporre un breve video o delle immagini animate con testi che aiutino allo scopo.

Nick Babich

b. Empty states. Al primo utilizzo le pagine vuote e inutilizzate della App causano in genere un senso di smarrimento e frustrazione. Ogni volta che l’utente visualizza una pagina “vuota” è necessario spiegare quali contenuti verranno visualizzati successivamente e quali funzioni avrà quella pagina per poi invitarlo a compiere i primi passi per usare la App. Il tutto in modo intuitivo, veloce e possibilmente anche ironico; l’ironia è un buon metodo per connettersi empaticamente con il nostro pubblico anche nei frangenti più delicati come gli empty states (Empty State: Mobile App “Nice-to-Have” Essential).

Illustrations by Suzey Levis

c. Sign in walls. Un’altra causa di abbandono delle App è la richiesta prematura e inopportuna di registrazione. Tutti noi preferiamo vedere prima ciò che il prodotto ha da offrirci, valutare se ci sarà utile o meno e, solo dopo, decidere se inserire i nostri dati ed eventualmente anche un metodo di pagamento.

Nick Babich

I cosidetti “Sign in Wall”, sbarramenti che interrompono la navigazione fino a quando non effettuiamo la registrazione, andrebbero proposti solo quando l’utente ha già visitato il nostro prodotto e quando vi è una necessità reale e comprensibile di lasciare i propri dati. Così fa You Tube: ci permette di navigare e vedere i video senza alcuna limitazione e chiede i nostri dati solo quando sono necessari per “salvare” ad esempio una playlist. Al contrario Netflix non permette di navigare il prodotto se prima non ci si è iscritti e abbiamo lasciato il numero della carta di credito.

In conclusione

Lo scenario in cui ci muoviamo è caratterizzato da uno schermo piccolo e un utente distratto. L’obiettivo fin dall’inzio è quello di far orientare l’utente, comunicargli il valore del nostro prodotto e accoglierlo avendo cura di tutte le possibili interazioni. 
Immaginiamo di creare una “conversazione” tra l’utente e il prodotto: se la conversazione è noiosa, il nostro interlocutore ci abbandonerà per andare altrove; “dialoghiamo” con il nostro pubblico offrendo informazioni utili e appropriate, rispondendo a tempo, con ritmo e utilizzando un tone of voice adatto al contesto.

Le Chat Bot. La nuova sfida della user experience nel mobile

Cosa accadrà in futuro? Lo scenario del mercato delle App è in rapido e drammmatico cambiamento e la user experience del mobile è destinata rapidamente a modificarsi e a essere ripensata.
 Negli Stati Uniti, che ci precedono nelle tendenze digitali, l’idea delle App come principale sede di interazione utente/telefono è in declino. Il mercato delle App è ormai saturo (Ricerca comScore 2016): ci sono più di 3 milioni di App negli store ma sempre meno utenti ne scaricano di nuove, in media al mese il 49% degli statunitensi non ne scarica nessuna. E di quelle installate solo poche vengono utilizzate.
 Cosa fanno quindi gli americani con i loro telefoni? Chattano. Si calcola che ogni 15 minuti utilizzino lo smartphone per scrivere o controllare i messaggi. Sono immersi in un flusso di conversazioni in Fb Messenger, WhatsApp, Snapchat.

Illustrations by Suzey Levis

Le grandi aziende si stanno attrezzando per spostare il loro business là dove ci sono gli utenti: nelle piattaforme di messagging (Whatsapp, Wechat, Facebook Messenger) e utilizzano le CHAT BOT per dialogarvi. I chat bot sono software progettati per simulare una conversazione intelligente con esseri umani tramite l’uso della voce o del testo. Quindi sono programmi che dialogano con gli utenti come se fossero esseri umani. Sono progettati per fornire informazioni sui prodotti, erogare servizi, intrattenere. Messenger ha recentemente fatto un accordo con Uber e KLM per permettere ai propri utenti di prenotare un taxi o un volo aereo tramite chat bot. Non a caso questo tipo nuovo di e- commerce viene definito Conversational commerce.

“Stiamo assistendo all’inizio di un’epoca, in cui la messaggistica è il nuovo sistema operativo, i bot sono le nuove applicazioni e il Bot Store è il nuovo App Store” (Bots, Chat, Voice, Zero UI, and the future of Mobile App).

Quali saranno i nuovi paradigmi della user experience nelle interazioni del futuro?


Grazie a Suzey per le illustrazioni.