Principi di progettazione dell'UX mobile

Pubblicato: 2022-03-11

Un buon design è un buon design, giusto? Vero, ma ci sono considerazioni specializzate che entrano in gioco a seconda del mezzo per quel progetto. I principi di progettazione per qualcosa come un'app creata per essere eseguita su un computer desktop sono generalmente leggermente diversi dalle convenzioni di progettazione UX mobile più efficaci.

Anche all'interno di una categoria ombrello come "design UX mobile" ci sono differenze tra la progettazione di un'app e la progettazione di un sito Web mobile. Quando gli utenti scaricano un'app, non vogliono solo la versione mobile del sito web. Vogliono un'esperienza unica che giustifichi il tempo speso per scaricare l'app (così come lo spazio che occupa sul telefono). Gli utenti non si fanno scrupoli a eliminare un'app che non ritengono utile: il 75% dei download di app viene aperto solo una volta.

Il design mobile, in generale, non può essere trascurato. In tutto il mondo, più persone accedono a Internet dai loro dispositivi mobili e tablet che dai computer desktop. Ignorare quegli utenti non è più qualcosa che i designer di UX possono giustificare. È importante che i progettisti di dispositivi mobili considerino le migliori pratiche di UX mobile in ogni fase del processo di progettazione.

Metti l'utente al primo posto

Questo dovrebbe essere ovvio, ma in qualsiasi progetto di design, l'utente dovrebbe sempre essere al primo posto e le esigenze dell'utente sono ancora più importanti (e più specifiche) sui dispositivi mobili. Se i designer non soddisfano le esigenze degli utenti mobili, questi utenti passeranno molto rapidamente ad altri siti Web, app o distrazioni.

Di seguito sono elencate alcune cose che i designer possono fare per soddisfare le esigenze specifiche degli utenti mobili.

Best practice per l'UX mobile: metti l'utente al primo posto
Metti sempre l'utente al primo posto nella progettazione di qualsiasi esperienza mobile.

Rendi la navigazione intuitiva

La navigazione su siti e app mobili deve essere più intuitiva rispetto a quella su siti desktop. Gli utenti devono essere in grado di identificare immediatamente come aggirare un'app mobile o un sito web. Ciò può essere ottenuto attraverso modelli di progettazione riconoscibili (come menu di hamburger) e icone riconoscibili (un'icona "home" per la schermata iniziale, un fumetto per la messaggistica, ecc.).

Modelli di design mobile: icone intuitive
L'uso di icone intuitive (una luna per "dormire", mani in preghiera per "meditare", ecc.) è ancora più facile da usare quando sono incluse le etichette delle icone.

Se gli utenti devono pensare a come navigare, è più probabile che si disimpegnino dal sito Web o chiudano l'app e cerchino una soluzione più semplice.

Crea un'esperienza senza interruzioni su tutti i dispositivi

Indipendentemente dal fatto che un utente acceda ai contenuti su un'app, un sito Web mobile o un sito Web desktop, la transizione tra l'utilizzo di questi ultimi deve avvenire senza interruzioni. Gli elementi di design dovrebbero rispecchiarsi l'un l'altro (i designer non dovrebbero usare il blu per l'app e il rosso per il sito web, ad esempio).

Un'esperienza senza interruzioni non solo semplifica le cose per le persone che utilizzano un sito Web o un'app, ma crea anche fiducia con il marchio.

Principi di progettazione dell'UX mobile: transizione senza interruzioni tra i dispositivi
La transizione tra l'utilizzo di un'app o di un sito Web su dispositivi diversi dovrebbe avvenire senza interruzioni.

Concentrati sugli obiettivi dell'utente

Gli obiettivi che una persona ha su un'app mobile o su un sito Web sono probabilmente diversi da quelli che ha su un sito desktop completo. Ad esempio, su un'app di un ristorante, è probabile che un visitatore desideri fare solo una manciata di cose: visualizzare il menu, effettuare una prenotazione o ottenere indicazioni stradali. Nella maggior parte dei casi non stanno cercando la cronologia completa dell'attività sul proprio telefono cellulare: quel tipo di contenuto può essere nascosto nei menu o nei sottomenu.

Pensa a ciò che un utente vuole effettivamente fare su un'app mobile. Una cosa importante che i progettisti spesso trascurano è la richiesta di un accesso per le attività di base. Le app bancarie, ad esempio, spesso richiedono un accesso per fare qualsiasi cosa sull'app. Ma attività come trovare la posizione dell'ATM più vicino non richiedono l'accesso dell'utente. Rendere queste funzionalità di facile accesso è un ottimo modo per migliorare l'esperienza utente.

Principi di progettazione delle app mobili: semplificare le cose per l'utente
Questa cooperativa di credito locale consente alle persone di cercare posizioni senza l'onere di registrarsi prima.

Consenti personalizzazione

Per le app mobili, la personalizzazione è fondamentale per migliorare l'esperienza dell'utente. La personalizzazione può anche aiutare a raggiungere gli obiettivi di marketing. È un vantaggio per tutti gli stakeholder coinvolti.

La personalizzazione dovrebbe spingere gli utenti verso i contenuti che stanno cercando e lontano dai contenuti per loro irrilevanti. Può anche eliminare le distrazioni sul sito, semplificare componenti come il processo di acquisto e assicurarsi che i messaggi di marketing siano sincronizzati con ciò che il visitatore desidera effettivamente.

Principi UX: Consenti la personalizzazione dell'utente
L'app per il fitness Strava carica automaticamente il tipo di sport utilizzato più di recente per l'utente, ma semplifica anche il cambio sport (mettendo le opzioni più probabili in alto).

Tuttavia, troppa personalizzazione può essere una trappola facile in cui cadere. Il livello di personalizzazione deve corrispondere al livello di fiducia che un utente ha con l'app e l'azienda. Quante volte le persone si sentono sconcertate o strane quando un sito Web mostra annunci per qualcosa a cui stavano pensando (o parlando) ma non hanno nemmeno cercato? Certo, è solo la natura predittiva degli algoritmi pubblicitari avanzati, ma quel livello di personalizzazione può comunque lasciare i visitatori in apprensione.

Rendi sempre le cose più facili

Quando una persona visita un sito Web o un'app su un dispositivo mobile, desidera completare l'attività in questione il più rapidamente possibile. Spetta al progettista rendere il completamento delle attività necessarie il più semplice possibile. Eliminare tutto ciò che non è assolutamente vitale per ogni attività è un ottimo punto di partenza. Anche semplificare le attività necessarie su un'interfaccia mobile è fondamentale.

Ad esempio, molte app e siti di eCommerce ora offrono un'opzione fotocamera per l'inserimento dei dati della carta di credito. Invece di digitare il numero di una carta, gli acquirenti possono puntare la fotocamera verso la carta di credito e l'app leggerà automaticamente il numero.

Altre cose come specificare il tipo di input nei campi del modulo (in modo che, ad esempio, quando un indirizzo e-mail è l'input previsto, il simbolo @ e ".com" vengono visualizzati nella schermata principale della tastiera).

Buone pratiche di inserimento

Una buona onboarding è essenziale per le app mobili. Ma la definizione di "buono" varia notevolmente tra i diversi tipi di app. Le app semplici da usare, come elenchi di cose da fare o browser Web, richiedono un'integrazione minima. Un paio di schermate iniziali che sottolineano le caratteristiche uniche sono tutto ciò di cui la maggior parte degli utenti avrà bisogno per iniziare.

Principi di progettazione delle app mobili: buona onboarding
Masterclass ha un eccellente flusso di lavoro di onboarding per i nuovi utenti, mostrando alcune delle funzionalità chiave e offrendo agli utenti la possibilità di vedere di più o di accedere.

Ma le app più complesse, come quelle per i servizi finanziari o la gestione dei progetti, richiedono un'integrazione più completa.

Usa i gesti consolidati

Questo dovrebbe essere ovvio, ma i designer di dispositivi mobili devono considerare i gesti consolidati a cui le persone sono già abituate a utilizzare sui propri dispositivi. Cose come pizzicare per ingrandire o scorrere sono diventate intuitive per la maggior parte degli utenti e dovrebbero essere utilizzate quando possibile.

Best practice per l'esperienza utente mobile: utilizza i gesti consolidati
I designer dovrebbero usare gesti consolidati con cui le persone hanno già familiarità quando possibile.

Nei casi in cui un designer decide di deviare da un gesto stabilito, è importante suggerire agli utenti questa deviazione, sia durante il processo di onboarding sia quando il caso d'uso appare per la prima volta.

Progettazione del layout mobile

La progettazione di layout mobili non è del tutto diversa dalla progettazione di qualsiasi altro tipo di layout, ma ci sono alcune considerazioni che i progettisti devono tenere in considerazione.

Una delle considerazioni più importanti è la dimensione dei target touchscreen. Mentre un mouse o un trackpad possono fare clic con la massima precisione, i polpastrelli sono molto meno precisi. Idealmente, i target dovrebbero essere 7-10 mm sullo schermo di un dispositivo mobile. Ciò consente con un dito di toccare il bersaglio senza dover mirare troppo attentamente.

Un'area correlata da considerare sono i controlli della posizione delle mani e la "zona del pollice" sui dispositivi mobili, l'area dello schermo di un telefono a cui è possibile accedere facilmente con il pollice quando una persona tiene il telefono con una mano. Mettere la maggior parte dei contenuti interattivi (e in particolare gli inviti all'azione) in questa zona è fondamentale per creare un'esperienza utente positiva.

Design Mobile UX: prendi in considerazione la zona del pollice
La "zona del pollice" è un aspetto importante da considerare nella progettazione dell'esperienza utente mobile. (Immagine di LukeW)

È importante che i progetti mobili eliminino quanto più disordine possibile. Il minimalismo è amico di un designer quando si tratta di app mobili. Cercare di stipare tutto in un'interfaccia utente desktop in uno schermo che è una frazione delle dimensioni rende il design angusto e può essere opprimente.

Concentrarsi sugli obiettivi, ridurre al minimo le opzioni di navigazione (menu e sottomenu possono aiutare in questo) e in generale eliminare qualsiasi elemento che non è essenziale per consentire agli utenti di fare ciò che devono fare creerà un'interfaccia utente più snella e facile da usare.

Modelli UX mobili: design minimalista
L'app mobile di Google ha un design minimalista che elimina tutti gli elementi non necessari.

Pur eliminando il disordine sullo schermo, i designer devono essere sicuri di non trascurare alcune considerazioni chiave sul design. Una di queste considerazioni è assicurarsi che vari elementi di design abbiano un contrasto sufficiente. Le persone spesso guardano i propri dispositivi mobili in condizioni non ideali. Cose come la luce solare intensa possono rendere gli elementi su uno schermo difficili da vedere, ma un contrasto elevato aiuta a rendere gli elementi più visibili.

La tipografia è un'altra considerazione chiave. È importante avere una chiara gerarchia tipografica in un design mobile. I titoli e le intestazioni dovrebbero essere facili da individuare e i caratteri, in generale, dovrebbero essere più grandi. A nessuno piace guardare lo schermo per cercare di leggere grandi blocchi di testo sul telefono. Intestazioni chiare, elenchi puntati o numerati e paragrafi brevi rendono il testo mobile più leggibile.

Un'ultima considerazione sull'interfaccia utente è l'uso di transizioni e animazioni. Un'animazione può essere un segnale importante per un utente che qualunque azione abbia appena intrapreso ha fatto qualcosa. Le animazioni e le chiare transizioni tra schermate o funzioni in un'app mobile sono elementi chiave di feedback che creano un'esperienza utente più soddisfacente.

Best practice per l'esperienza utente mobile

Tutto quanto sopra è una considerazione importante quando si progettano app e siti Web mobili. Ma ci sono ulteriori best practice per l'UX mobile da seguire per garantire la migliore esperienza utente possibile.

Concentrati sulla velocità

Nonostante la diffusa disponibilità di dati 4G, le reti mobili sono ancora generalmente più lente dei servizi wifi o banda larga. E in molte parti del mondo, il 4G non esiste e gli utenti mobili sono bloccati con 3G o velocità dati inferiori.

Mobile UX design: non tutti hanno la tecnologia più recente
Non tutti coloro che utilizzano un'app mobile o un sito Web avranno la connessione di rete più veloce o anche i dispositivi più recenti.

Ciò significa che i siti Web mobili e in particolare le app mobili devono essere veloci. L'inclusione di contenuti in un'app che non deve essere scaricata ogni volta che l'app viene caricata renderà l'app più veloce. Così come il caricamento del contenuto solo quando diventa necessario (sebbene anticipare il contenuto che sarà necessario e precaricarlo può far apparire un'app più veloce all'utente).

È un atto di equilibrio tra il non caricamento di contenuti che non verranno utilizzati (e l'utilizzo di dati) e la creazione della percezione della velocità precaricando i contenuti di cui probabilmente gli utenti avranno bisogno in seguito.

Un modo per creare l'illusione della velocità e calmare gli utenti impazienti consiste nell'utilizzare i segnaposto fino al caricamento del contenuto. L'app mobile di Facebook fa questo, con quello che in effetti sembra essere un lucido wireframe che viene caricato non appena l'app si apre, tenendo spazio per i post che vengono caricati durante il download. Questa schermata di transizione segnala agli utenti che sta accadendo qualcosa con il contenuto prima che venga effettivamente caricato.

Fornire feedback agli utenti

Fornire feedback agli utenti mentre eseguono azioni su un'app mobile è un aspetto importante di un'esperienza utente positiva. Come accennato in precedenza, le animazioni e le transizioni sono un modo per fornire feedback.

Il feedback tattile e audio è possibile anche con i dispositivi mobili. Fornire feedback sul tocco quando vengono eseguite determinate azioni è particolarmente popolare con i giochi per dispositivi mobili e anche con i messaggi di errore. Il feedback audio è popolare con le funzioni su tutti i tipi di app. Tuttavia, i progettisti non dovrebbero fare affidamento sul feedback audio poiché così tante persone mantengono il telefono silenziato in ogni momento.

Riduci al minimo l'immissione di dati

Un'altra best practice fondamentale per l'esperienza utente mobile consiste nel ridurre al minimo la quantità di input di dati richiesta. Questo è stato accennato in precedenza, ma più dati una persona deve inserire in un'app mobile, più è probabile che abbandoni l'attività.

La compilazione di un modulo con quattro o cinque campi potrebbe non essere un grosso problema su un computer desktop o laptop, ma su un dispositivo mobile, quei quattro o cinque campi potrebbero essere sufficienti per allontanare un utente, soprattutto se non può vedere il proprio scopo. Assicurati che ogni singolo campo di un modulo compilato su un dispositivo mobile sia necessario. Elimina quelli che non lo sono.

Questa è un'area in cui dare alle persone la possibilità di utilizzare uno dei loro account esistenti (come un account Facebook, Google o Twitter) invece di registrarsi da zero può migliorare notevolmente le conversioni. Quando un utente deve solo fare clic per autorizzare l'accesso anziché compilare un modulo per una nuova registrazione, è più probabile che lo faccia. Basta non fare affidamento esclusivamente su queste app secondarie: alcuni utenti sono ancora diffidenti nel collegare i propri account e impiegheranno del tempo per compilare un modulo.

Mobile UX: semplifica la registrazione degli utenti
L'app di gestione dei progetti Podio consente ai nuovi utenti di registrarsi facilmente con un account Google o ShareFile.

Conclusione

Seguendo questi principi di progettazione dell'esperienza utente mobile consolidati creerà un'esperienza utente complessiva migliore per le persone che visitano un sito mobile o utilizzano un'app mobile. I designer hanno solo pochi secondi per attirare l'attenzione delle persone prima che abbandonino un'app o un sito a favore di uno più intuitivo, intuitivo o snello.

I fantastici design per dispositivi mobili stanno diventando sempre più comuni e il livello è stato ulteriormente alzato in termini di ciò che gli utenti si aspettano dalle loro app mobili. I designer non possono più considerare il design mobile come un ripensamento e devono invece dedicarvi tanto tempo, considerazione e risorse quanto fanno per i progetti su altri formati.

• • •

Ulteriori letture sul blog di Toptal Design:

  • Mobile UX Design: procedure consigliate, vincoli e collaborazione con gli sviluppatori
  • Conserva gli utenti con queste ispirazioni per l'onboarding delle app mobili
  • La guida fondamentale all'usabilità mobile
  • Principi euristici per interfacce mobili
  • UX di eCommerce per l'esperienza mobile