Mobile User Experience

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.

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. 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


Mobile Navigation, by Suzey L.

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. 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. 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?)


2. Cards: presentazione dei contenuti at a glance


Cards by Suzey L.

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.

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. 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:

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

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

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

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

  • 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.

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).


Empty States by Suzey L.

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.

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.

14 visualizzazioni