Vincoli di progettazione dell'esperienza utente mobile, best practice e collaborazione con gli sviluppatori

Possiamo ottenere esperienze utente migliori seguendo le migliori pratiche di progettazione UX mobile, comprendendo i vincoli e facilitando un solido rapporto di lavoro con gli sviluppatori.

Che cos'è il design dell'esperienza utente mobile?

Un recente articolo su TechCrunch ha sottolineato che l'eCommerce mobile ha rappresentato quasi un terzo di tutte le vendite online durante il periodo delle vacanze del giorno del Ringraziamento 2018 e Digital Trends ha riportato nel 2017 che 5 miliardi di persone in tutto il mondo ora hanno un dispositivo mobile. Google ha anche annunciato che l'indicizzazione mobile-first è ora utilizzata per oltre la metà delle pagine Web nei suoi risultati di ricerca.

Le persone dipendono ogni giorno dai dispositivi mobili per comunicazioni, eCommerce, consumo di contenuti, lavoro, operazioni bancarie, indicazioni stradali e, sempre più, come unico dispositivo informatico. Inoltre, utilizzano una varietà di dispositivi come telefoni cellulari, smartwatch, tablet, phablet, dispositivi indossabili e laptop ibridi.

Il design dell'esperienza utente mobile (UX) si riferisce alla progettazione di esperienze positive durante l'uso di dispositivi mobili e dispositivi indossabili e applicazioni o servizi in esecuzione su tali dispositivi... Il design dell'esperienza utente mobile si concentra fortemente sull'efficienza e sulla rilevabilità. - Fondazione per il design dell'interazione

Per i designer UX queste tendenze dei dispositivi mobili rappresentano sia sfide che opportunità. Da un lato, dobbiamo tenere conto della varietà di dispositivi e dei modi in cui vengono utilizzati. Dall'altro, questo apre una serie completamente nuova di aree di interesse nella progettazione dell'esperienza utente e ciò significa creare esperienze positive per una generazione completamente nuova di utenti.

Migliori pratiche per la progettazione dell'esperienza utente mobile

Il design dell'UX mobile è complicato. Come affermato in precedenza, ci sono così tante cose che dobbiamo considerare, incluso l'elenco crescente di dispositivi mobili, il modo in cui le persone interagiscono con loro e il fatto che le persone desiderano esperienze coerenti e piacevoli su tutti i tipi di dispositivi.

I 25 suggerimenti per la progettazione dell'esperienza utente mobile di Google

Nel 2015, Google ha pubblicato 25 best practice per la progettazione dell'UX mobile basate su ricerche interne. Questi suggerimenti sono stati recentemente aggiornati per renderli più aggiornati. L'autore include anche un PDF scaricabile di tutti i 25 suggerimenti che è bello tenere a portata di mano per qualsiasi progetto UX mobile.

Linee guida per l'interfaccia umana di Apple

Un'altra grande risorsa da tenere a portata di mano sono le linee guida dell'interfaccia umana di Apple per la progettazione mobile. Sono facili da leggere con un bel layout e conditi con best practice, suggerimenti e principi di progettazione di Apple. Per i progettisti di UX mobile queste linee guida sono un'ottima risorsa per fornire esperienze utente di alta qualità.

Best practice aggiuntive per l'esperienza utente mobile

Ecco alcune altre best practice per la progettazione dell'esperienza utente mobile che potrebbero non essere così conosciute come quelle di Google, ma sono altrettanto importanti da tenere in considerazione per i designer di dispositivi mobili.

• Ricerca sull'esperienza utente . Ad un certo punto, potremmo sentirci inclini a entrare subito in mockup o prototipi, tuttavia, fare prima una ricerca UX adeguata è qualcosa che non può essere sottovalutato. Ricorda sempre che "non sei il tuo utente" e un'esperienza utente positiva si basa in ogni caso su una ricerca UX approfondita. Ecco la guida completa di Adobe ai metodi di ricerca UX per ulteriori riferimenti.
• Disordine . Abbiamo tutti sperimentato l'ansia di un desktop disordinato: immaginalo su un dispositivo mobile! Ogni pulsante, immagine, contenuto, ecc. aggiunto, rende le cose molto più complicate. È una buona idea eliminare tutto ciò che non è assolutamente necessario in un'interfaccia utente mobile. Un ottimo consiglio è quello di puntare al minimalismo, ma non a rischio di una buona usabilità. Questo può essere spesso ottenuto dando la priorità a un'azione principale su ciascuna schermata.
• Priorità . C'è la tendenza a provare ad aggiungere quante più funzionalità possibili. Riteniamo che tralasciare qualcosa creerà in qualche modo meno esperienza per gli utenti. Al contrario, mantieni le funzionalità altamente focalizzate in base agli obiettivi principali e perfeziona il design analizzando quali funzionalità vengono utilizzate di più, quindi sforzati di rendere tali funzionalità sia intuitive che piacevoli.
• Tocca Obiettivi . Gli utenti possono arrabbiarsi fisicamente e iniziare a colpire i loro dispositivi mobili quando toccano qualcosa e non risponde. Uno studio condotto al MIT ha scoperto che stavano toccando qualcosa che aveva un bersaglio tattile troppo piccolo. Una procedura consigliata consiste nel creare controlli, pulsanti, collegamenti, ecc. (tutto ciò che è un target touch) di almeno 7-10 mm, che è la larghezza media del polpastrello. È anche una buona idea assicurarsi che vi sia un'ampia spaziatura tra questi elementi dell'interfaccia utente.
• Testo leggibile . Poiché gran parte di ciò che fanno gli utenti si basa sul consumo di contenuti, per fornire un'esperienza coerente su tutti i tipi di dispositivi mobili, assicurati di scegliere caratteri tipografici che funzionino bene in più dimensioni e pesi. Si consigliano dimensioni dei caratteri di almeno 11 punti per ridurre l'affaticamento degli occhi. Caratteri tipografici puliti e facili da leggere come Roboto e Noto di Google o il nuovo font San Francisco di Apple sono ottime scelte da esplorare.
• Feedback sull'interfaccia utente . Le applicazioni ben progettate ci tengono informati mentre interagiamo con loro. La mancanza di un buon feedback può confondere gli utenti e indurli a chiedersi se è successo qualcosa, sta accadendo o perché è successo/non è successo. Una procedura consigliata consiste nell'utilizzare diverse forme di feedback (audio, aptico, visualizzazioni), in base all'elemento dell'interfaccia utente o allo stato corrente dell'app.
• Accessibilità . Questo è probabilmente uno degli aspetti più trascurati del design dell'esperienza utente e in particolare del design dell'UX mobile. Il 15% della popolazione mondiale soffre di una qualche forma di disabilità. Le Linee guida per l'accessibilità dei contenuti Web sono una risorsa disponibile gratuitamente e, per i designer digitali, è un "must have" come parte della loro cassetta degli attrezzi.

Vincoli di progettazione UX mobile

L'obiettivo della maggior parte dei designer di UX è fornire esperienze piacevoli e creare fantastici design che raggiungano sia la rilevabilità (quali azioni sono possibili) sia la comprensione (come dovrebbe essere utilizzato il prodotto). Con i dispositivi mobili, tuttavia, vengono introdotti alcuni vincoli dovuti alle dimensioni, alla portabilità e agli ambienti in cui vengono utilizzati questi dispositivi.

Vincoli di archiviazione

Quando si tratta di app mobili native, i progettisti devono considerare che alcuni utenti potrebbero avere vincoli di archiviazione.

Un'app mobile, al contrario di un'app Web, utilizza lo spazio di archiviazione direttamente sul dispositivo mobile. Ciò ha un impatto sulla progettazione dell'esperienza utente mobile perché introduce potenziali limitazioni sulla qualità di video, audio e immagini che possono essere utilizzate.

Per le app native, vogliamo progetti di UX mobile che tengano conto dei vincoli di archiviazione. Quando un utente incontra una limitazione di archiviazione, deve prendere decisioni difficili su cosa conservare e cosa eliminare. Crea una cattiva esperienza per l'utente quando costringiamo gli utenti a dover fare quelle scelte.

Schermate e controlli

Un altro vincolo che dobbiamo affrontare con il design dell'UX mobile è la dimensione dello schermo e i controlli sui nostri dispositivi mobili.

Gli schermi dei dispositivi mobili sono più piccoli: leggere attraverso uno spioncino aumenta il carico cognitivo e rende la comprensione circa due volte più difficile. - Jakob Nielsen, Consulente per l'usabilità del Web.

Il modo migliore per gestire schermate e controlli è eliminare il più possibile l'attrito. Ristruttura le informazioni, presta attenzione alle zone del pollice, riduci i clic (soprattutto con l'eCommerce) e presta attenzione al processo di accesso che spesso può essere frustrante.

Ambiente

Con i dispositivi mobili, ci sono fattori ambientali da considerare per la progettazione dell'esperienza utente. Gli utenti sono soggetti a disconnessioni molto più frequenti e queste situazioni devono essere considerate nell'esperienza utente complessiva. Come li riportiamo dove erano? Come possiamo assicurarci che non debbano ricominciare tutto da capo con quello che stavano facendo?

Un altro fattore ambientale sono le distrazioni. Quando utilizziamo i nostri telefoni cellulari o tablet, ci troviamo spesso in un ambiente rumoroso o affollato che rende difficile la concentrazione. Come possiamo garantire una buona esperienza utente quando le distrazioni competono per l'attenzione di un utente? Ci sono modi in cui possiamo salvare gli stati e consentire anche ai nostri utenti di salvare gli stati?

Dimensioni dello schermo ridotte, finestra singola

Un altro vincolo che i designer devono affrontare con il design dell'esperienza utente mobile è la dimensione limitata dello schermo. Per questo motivo, le persone possono vedere solo una finestra alla volta e ciò pone un'enorme limitazione all'esperienza dell'utente.

Ci sono sforzi per cercare di adattarsi al "multi-schermo" e al "multi-tasking", ma questi non sono ancora la norma e hanno i propri limiti.

La chiave per una migliore UX mobile con questo vincolo a finestra singola è che il design dovrebbe essere autosufficiente. Tutto ciò che deve essere fatto dall'utente dovrebbe essere fattibile all'interno di un'unica schermata o finestra, ovvero non dovrebbe lasciare l'app per trovare informazioni, ecc.

Quando gli utenti devono abbandonare le app o aprire nuove schermate, ciò si aggiunge al carico cognitivo generale e ciò significa che le cose diventano troppo complesse e frustranti.

Come le persone tengono i dispositivi mobili

C'è un ultimo vincolo di cui essere consapevoli: tenere i nostri gadget. In che modo le persone li tengono e cosa significa questo per il design dell'UX mobile?

Secondo una ricerca di Steven Hoober e delineata in Design for Fingers, Touch, and People, parte 2, è stato scoperto che le persone interagiscono con i loro dispositivi in ​​modo diverso a seconda di come li tengono, il che ha quindi un impatto sulla progettazione dell'esperienza utente mobile.

Le persone tengono i loro dispositivi mobili in diversi modi e cambiano continuamente posizione. Ciò ha un impatto su quali dita utilizzano e su come interagiscono con un'interfaccia utente mobile (vedi sotto). A quanto pare, gli utenti preferiscono il centro dello schermo e non amano fare clic su elementi troppo vicini ai bordi.

Ecco alcuni suggerimenti aggiuntivi per l'esperienza utente mobile dalla ricerca di Steven:

• Progetta per ogni utente e ogni tipo e dimensione di un dispositivo mobile
• Progetta per tutti i vari modi in cui le persone lavorano con i propri dispositivi
• Considera che nella maggior parte dei casi gli utenti preferiscono toccare il centro dello schermo
• Posiziona le azioni chiave nella metà centrale fino a due terzi dello schermo
• Assicurati che le dita e i pollici non oscurino il contenuto
• Gli elementi selezionabili dovrebbero essere abbastanza grandi da poter essere toccati comodamente

Lavorare con gli sviluppatori

Indipendentemente dal fatto che lavori in un ambiente UX agile/lean o meno, sono gli sviluppatori che devono interpretare e implementare i progetti che sono stati realizzati con tanta cura. È una buona idea stabilire sin dall'inizio alcune buone pratiche collaudate con gli sviluppatori per assicurarsi che i progetti siano implementati come previsto. Ecco alcuni suggerimenti e suggerimenti.

Mockup

Quando prepari e consegni i modelli, cerca di mantenere i nomi dei file semplici, coerenti e descrittivi. Ciò consentirà di risparmiare un sacco di tempo andando avanti e indietro. È anche una buona idea finalizzare tutti i modelli prima di condividerli con gli sviluppatori in modo che ricevano solo una versione di ogni schermo. Un altro consiglio per risparmiare tempo è testare tutte le interazioni con i prototipi in modo che funzionino e funzionino. Buoni strumenti per la condivisione di mockup: InVision e Marvel .

Specifiche funzionali

La maggior parte del lavoro svolto come designer UX coinvolge gli sviluppatori all'inizio del progetto e un ottimo modo per facilitare una comprensione continua del processo di progettazione e creare una migliore linea di comunicazione è creare e utilizzare un documento di specifica funzionale o un "Func -Spec.

Il documento Func-Spec è simile a un progetto creato dagli architetti, tranne per il fatto che è condiviso con gli sviluppatori durante tutto il progetto di progettazione e consente loro di capire come funzionerà un'applicazione o un sito Web (rispetto all'aspetto dell'interfaccia utente).

Di seguito è mostrato un buon esempio di Func-Spec funzionante:

copia

Di solito c'è molta copia che vive al di fuori di un mockup che deve essere comunicato agli sviluppatori. Ecco un'idea che apprezzeranno sicuramente:

Come visto sopra, il contesto aiuta lo sviluppatore a capire quando il messaggio dovrebbe apparire o scomparire. Dovrebbe far sapere allo sviluppatore cosa sta succedendo in modo che non debbano indovinare. Il messaggio è la copia effettiva che apparirà. Usa la copia reale e non incomprensibile (cioè, lorem ipsum). Gli sviluppatori non vogliono essere copywriter e vogliamo rendere le cose il più agevoli possibile per loro.

Specifiche

Questa è una delle parti più importanti della comunicazione dei progetti con gli sviluppatori. È qui che strumenti come Zeplin e InVision's Inspect brillano davvero perché si occupano di comunicare specifiche come misurazioni, guide di stile, caratteri, flusso dell'esperienza utente e come funziona ogni parte del design.

Comunicazione IRL (nella vita reale)

I designer adorano i loro strumenti. Tanto che può essere davvero facile dimenticare di alzare il telefono, avviare una videochiamata o avvicinarsi agli sviluppatori e parlare. È stato risparmiato molto tempo semplicemente incontrando gli sviluppatori dopo aver consegnato una parte di un progetto perché qualsiasi domanda o sfumatura può essere discussa sul posto. Questo viene spesso dimenticato, ma se fatto parte del normale processo di trasferimento, tutti apprezzeranno il tempo risparmiato.

Legando tutto insieme

Il cellulare non sta andando via. Nel 2016, il numero di utenti che accedono al Web da un dispositivo mobile ha superato per la prima volta l'utilizzo da desktop. Per i progettisti di UX, la maggiore adozione dei dispositivi mobili e la proliferazione di vari tipi di dispositivi renderanno la progettazione dell'esperienza utente molto più impegnativa.

Per questi motivi, l'adesione a una serie di best practice, la comprensione dei vincoli introdotti dai dispositivi mobili e la creazione di un rapporto di lavoro agevole con gli sviluppatori saranno fattori chiave per realizzare progetti che creino esperienze umane positive.

• • •

Ulteriori letture sul blog di Toptal Design:

• I principi del design e la loro importanza
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
• Esplorare i principi della Gestalt del design
• Adobe XD vs. Sketch: quale strumento UX è giusto per te?
• I 10 risultati UX utilizzati dai migliori designer