Comprensione dei gesti per la progettazione dell'interfaccia utente

Pubblicato: 2021-03-29

Toccare, scorrere, trascinare, premere a lungo: questi sono solo alcuni dei gesti che hanno dominato le nostre esperienze digitali. Gli iPhone touchscreen hanno introdotto i gesti mobili anni fa e da allora non ci siamo più guardati indietro.

I gesti influenzano il modo in cui interagiamo con le interfacce, inclusi telefoni, laptop e iPad. Ma non dobbiamo guardare lontano per trovare un'interfaccia gestuale oltre i nostri dispositivi di lavoro e di intrattenimento. Non è più raro usare i gesti quando si interagisce con gli schermi delle auto o i lavandini del bagno.

Le interfacce utente naturali (NUI) sono così naturali per gli utenti che l'interfaccia sembra, e talvolta è, invisibile, come un'interfaccia touch screen. Alcuni NUI utilizzano persino il controllo gestuale, consentendo agli utenti di interagire con l'interfaccia senza contatto fisico diretto. BMW ha recentemente rilasciato una funzione di controllo gestuale che offre agli utenti il ​​controllo touchless sul volume dell'auto, sulle chiamate e altro ancora.

I gesti stanno diventando sempre più comuni nella progettazione dell'interfaccia utente e svolgono ruoli sempre più complessi nella nostra vita quotidiana.

Con l'avanzare della tecnologia, i progettisti e le aziende di UX e UI dovranno adattarsi. Non è necessario conoscere tutte le complessità tecnologiche o avere una conoscenza approfondita dell'intelligenza informatica. Tuttavia, dovresti avere una conoscenza di base delle capacità, delle funzioni e delle migliori pratiche di progettazione per la tecnologia dei gesti.

Ciò che rende un buon gesto

Allora, cosa sono i gesti?

I gesti sono un modo per comunicare. Abbiamo usato a lungo i gesti delle mani e i cenni della testa per aiutare a trasmettere il significato e ora i gesti svolgono un ruolo nella comunicazione con le interfacce utente.

I buoni gesti forniscono una comunicazione efficace ed efficiente che si allinea con il nostro modo di pensare. I nostri pensieri e le nostre conoscenze influenzano il modo in cui parliamo e influenzano il nostro uso dei gesti, specialmente nella progettazione dell'interfaccia utente. Considera quanto è più facile per le giovani generazioni che crescono attorno alla tecnologia moderna cogliere i gesti o come l'atto di scorrere imita spingere o cancellare qualcosa. Ecco perché la comprensione dei tuoi utenti è essenziale, anche nella progettazione dei gesti.

I gesti attraversano la barriera tra il regno fisico e quello digitale, permettendoci di interagire con i media digitali con i nostri corpi. In un certo senso, rende più divertente l'utilizzo delle applicazioni digitali, ma questo non è sufficiente per rendere un gesto buono.

Un buon gesto di movimento migliora l'usabilità rendendo le applicazioni più facili da usare in tutti i contesti. I gesti ben progettati hanno una curva di apprendimento più breve perché si sentono naturali e sono facili da cogliere. Per citare Bill Gates:

“Fino ad ora, abbiamo sempre dovuto adattarci ai limiti della tecnologia e conformare il modo in cui lavoriamo con i computer a una serie di convenzioni e procedure arbitrarie. Con NUI, i dispositivi informatici si adatteranno per la prima volta alle nostre esigenze e preferenze e gli esseri umani inizieranno a utilizzare la tecnologia nel modo più comodo e naturale per noi".

Vantaggi della tecnologia dei gesti

L'ampio uso delle interfacce gestuali è dovuto ai numerosi vantaggi che ne derivano. Tre dei vantaggi più significativi dei gesti sono interfacce più pulite, facilità d'uso e un migliore completamento delle attività.

1. Interfacce più pulite

Gli esseri umani consumano più contenuti che mai, le aziende utilizzano più dati e la tecnologia continua a fornire più servizi. Con questo aumento dei contenuti, è facile che interfacce e display appaiano disordinati. I designer possono utilizzare i gesti per ridurre il numero di elementi visivi, come i pulsanti, che occupano spazio.

2. Facilità d'uso

Come discusso in precedenza, le interazioni diventano più naturali con un'interfaccia basata sui gesti. La facilità dei semplici gesti delle mani ci consente di utilizzare la tecnologia con il minimo sforzo alla massima velocità.

3. Miglioramento del completamento delle attività

I tassi di completamento delle attività e i tassi di conversione aumentano quando un utente deve fare meno per completare un'attività. È più probabile che tu finisca un'attività quando richiede meno sforzo. Un'interfaccia utente basata sui gesti sfrutta questo aspetto rendendo le attività semplici e veloci. Possono anche ridurre il numero di passaggi necessari per completare un'attività.

Tipi di gesti nella progettazione dell'interfaccia utente

Il design per il tocco ha portato allo sviluppo di molti tipi di gesti, i più comuni dei quali sono toccare e scorrere. Esistono tre categorie di gesti:

  1. Gesti di navigazione (per navigare)
  2. Gesti d'azione (per agire)
  3. Trasforma i gesti (per manipolare i contenuti)

Di seguito sono riportati alcuni dei gesti più comuni tra le interfacce con cui tutti (o quasi) gli utenti hanno familiarità, anche se non consapevolmente. Citiamo gli schermi, ma puoi sostituire lo schermo con un touchpad o qualsiasi altra interfaccia gestuale.

Rubinetto

Un gesto di tocco è quando tocchi lo schermo con un dito per aprire o selezionare qualcosa, come un'app o una pagina. Ecco un suggerimento: progetta elementi dell'interfaccia selezionabili in modo che l'intera casella o riga sia selezionabile, non solo il testo. Dare agli utenti più spazio aumenta l'usabilità.

Tocca due volte

Il doppio tocco è quando si tocca lo schermo due volte di seguito in stretta successione. Molte applicazioni utilizzano questo gesto per ingrandire, ma su Instagram gli utenti possono toccare due volte una foto per apprezzarla.

Scorri

Lo scorrimento comporta lo spostamento del dito sullo schermo in una direzione, toccando un lato e sollevando il dito dall'altro. I gesti di scorrimento vengono spesso utilizzati per scorrere o passare da una pagina all'altra. Tinder usa lo scorrimento a destra per abbinare un profilo e lo scorrimento a sinistra per passarne uno.

Scorrimento con più dita

Puoi anche eseguire un gesto di scorrimento con due o tre dita. Questa è una caratteristica comune sui touchpad dei laptop che utilizzano scorrimenti con due e tre dita per azioni diverse.

Lagna

Il trascinamento utilizza lo stesso movimento generale di uno swipe, solo che muovi il dito più lentamente e non lo sollevi finché non hai trascinato l'oggetto dove vuoi che sia. Utilizzi il trascinamento per spostare un elemento in una nuova posizione, ad esempio quando riorganizzi le app del telefono.

Scappare

Come lo scorrimento, un gesto di lancio è quando muovi il dito sullo schermo ad alta velocità. A differenza di un trascinamento, il tuo dito non rimane in contatto con un elemento. Le avventure sono spesso usate per rimuovere qualcosa dalla vista.

Premere a lungo

Una pressione prolungata è quando tocchi lo schermo ma tieni premuto il dito più a lungo del solito. Le pressioni prolungate aprono le opzioni di menu, ad esempio quando tieni premuto il testo per copiarlo o tieni premuta un'app per eliminarla.

Pizzico

Uno dei tanti gesti con due dita, un pizzico è quando tieni due dita separate sullo schermo e poi le trascini l'una verso l'altra con un movimento di pizzicamento. I gesti di pizzico sono spesso usati per rimpicciolire dopo aver eseguito lo zoom avanti. A volte presentano una vista di tutte le schermate aperte ai fini della navigazione.

Pinch-Open o Spread

Un gesto di pizzicare o allargare è l'opposto di un pizzico. Tieni le due dita vicine e poi le allarghi. La diffusione, come il doppio tocco, viene generalmente utilizzata per ingrandire.

Rotazione

Per eseguire una rotazione, premi sullo schermo con due dita e ruotale con un movimento circolare. Il miglior esempio di rotazione è quando giri la mappa su Google Maps per vedere cosa c'è intorno a te.

Progettare i gesti 101

Usa ciò che le persone sanno

I gesti esistono da un po' di tempo, quindi per la maggior parte dei gesti esistono linee guida generali.

E nella maggior parte dei casi, ci sono regole che vorrai seguire quando progetti i gesti per un'interfaccia. Quando crei un'app, ad esempio, dovrai considerare su quali interfacce gli utenti utilizzeranno la tua app. È possibile che gli utenti scarichino la tua app su telefoni Android e Apple, che utilizzano già gesti specifici del prodotto. Dovrai valutare i gesti delle interfacce del tuo prodotto e decidere come sfruttarli o se vale la pena aggiungere gesti con cui gli utenti non hanno familiarità.

Ecco alcune utili linee guida sui gesti e sui movimenti per le interfacce dei prodotti più diffusi.

  • Linee guida per i gesti di Google
  • Linee guida per i gesti Microsoft
  • Linee guida per i gesti di Apple
  • Linee guida per i gesti Android

Quando si progettano interfacce utente basate su gesti, è buona norma attenersi a ciò che gli utenti sanno. Puoi diventare creativo se necessario, ma un livello di coerenza tra gesti e interfacce aiuta a mantenerli intuitivi per gli utenti, aumentando l'usabilità del tuo prodotto.

Se pensi che sia in arrivo un nuovo gesto, devi testarlo ampiamente prima di implementarlo. Condurrai una serie di metodi di ricerca degli utenti per testare l'usabilità, l'efficacia, le curve di apprendimento e la soddisfazione degli utenti con un gesto prima di rilasciarlo al pubblico.

Hai la possibilità di riutilizzare un gesto noto per uno scopo diverso, ma ancora una volta dovresti testare l'efficacia di questa strategia in anticipo. Il vantaggio qui è che gli utenti hanno almeno familiarità con il movimento.

Prendi, ad esempio, l'uso da parte di Instagram del doppio tocco per mettere mi piace o "mettere a cuore" un post. Un doppio tocco viene solitamente utilizzato per ingrandire, ma funziona bene per lo scopo di Instagram. È anche un ottimo studio sull'efficienza: toccare il cuore sotto un palo richiede un tocco in meno ma più mira. Il metodo alternativo del doppio tocco consente agli utenti di scorrere più velocemente poiché hanno l'intera immagine a cui mirare ed è intuitivo toccare l'oggetto che ti piace.

I designer hanno iniziato a sviluppare un linguaggio di progettazione con mani, cerchi e frecce per comunicare l'intento dei gesti a sviluppatori di prodotti e strateghi. Questo linguaggio è quasi universale con una deviazione minima.

Diagramma con esempi di gesti dell'interfaccia utente.

Diagramma con esempi di congettura dei gesti dell'interfaccia utente.

Pensa fuori dallo schermo

I gesti esistono negli scenari quotidiani al di fuori dell'uso del telefono e del laptop. Un numero crescente di bagni pubblici ha installato lavandini sensibili al movimento, essiccatori d'aria e distributori di asciugamani di carta. Questi dispositivi prevengono anche la diffusione di germi, una caratteristica elegante durante la stagione influenzale. Nel frattempo, le auto a guida autonoma vengono applicate con la tecnologia di riconoscimento dei gesti per migliorarne l'efficacia e la sicurezza.

Ma puoi comunque diventare creativo con i gesti del telefono mentre pensi fuori dallo schermo. I dispositivi utilizzano la rotazione e l'agitazione come metodi di interazione da anni ormai. Ad esempio, "Shake to Undo" di Apple offre agli utenti la possibilità di annullare un'azione scuotendo il telefono. E ormai, probabilmente hai familiarità con la rotazione degli schermi orizzontalmente per guardare un video a schermo intero.

Finché vengono testate per prime, le tecnologie dei gesti creativi possono portare i prodotti oltre e aumentare l'usabilità.

Gesti e accessibilità

I gesti, come tutte le cose, dovrebbero essere accessibili. Per accessibilità si intende rendere un prodotto accessibile e fruibile a tutte le persone in tutti i contesti, comprese le persone con disabilità. I gesti devono aderire alle migliori pratiche di progettazione accessibili per contribuire a un ambiente equo, rispettare l'Americans With Disabilities Act (ADA) e consentire a tutti coloro che potrebbero trarre vantaggio dal tuo prodotto di utilizzarlo.

Oltre ad assicurarsi che i gesti dell'interfaccia siano accessibili, vale la pena considerare come utilizzare i gesti per migliorare l'accessibilità. Apple si è resa conto che gli schermi piatti e privi di texture dell'iPhone rappresentavano un ostacolo per gli utenti non vedenti. Quindi, hanno utilizzato la loro interfaccia basata sui gesti per creare gesti aggiuntivi basati sull'accessibilità che aiutano gli ipovedenti a utilizzare i loro prodotti.

Non dimenticare UX

È comune utilizzare i termini UX e UI in modo intercambiabile, ma si tratta di una pratica imprecisa. UX sta per esperienza utente e si occupa delle percezioni e delle emozioni dell'utente durante l'interazione con un prodotto. UI sta per interfaccia utente e coinvolge gli elementi di un prodotto con cui un utente interagisce. L'interfaccia utente è un elemento importante della progettazione dell'esperienza utente. Se sei interessato a saperne di più su ciascuno e sulle loro differenze, consulta la nostra guida su UX vs UI Design.

Il punto qui è che UX e UI sono diversi, ma è fondamentale considerare l'esperienza dell'utente durante la progettazione delle interfacce. I gesti dell'interfaccia utente che sono divertenti ma inutili o interessanti ma hanno una scarsa usabilità sono il risultato di designer e sviluppatori che si sono dimenticati dell'UX.

Indipendentemente dal numero di test che hai eseguito, dai agli utenti la possibilità di rimuovere determinate funzionalità dei gesti. Toccare è un gesto fondamentale del touch screen che tutti conoscono, ma alcuni gesti non sono cruciali per il funzionamento di un prodotto ed esistono solo per renderlo più utilizzabile. A volte, gesti come questi infastidiscono gli utenti che non li conoscono o attivano il gesto senza volerlo.

Ad esempio, su un Mac, facendo scorrere due dita verso sinistra o verso destra sul touchpad, il browser web viene inviato indietro o in avanti di una pagina. Molti utenti fanno questo gesto per caso e sono frustrati quando la pagina continua a cambiare. Quindi, Apple offre agli utenti la possibilità di disabilitare questa funzione e molte altre.

Perfeziona l'onboarding degli utenti

L'onboarding degli utenti migliora l'uso di successo di un prodotto insegnando agli utenti come utilizzarlo. Pensa a un nuovo programma che, alla prima apertura, ti guidi attraverso tutte le funzioni o i passaggi per utilizzarlo.

L'onboarding dell'utente è importante per i gesti tattili perché sono spesso nascosti e facili da perdere, soprattutto se un utente non ha familiarità con un gesto o non ha esperienza con esso in quel contesto. Se non sanno che possono usarlo o come usarlo, non lo faranno.

Quando si esegue l'onboarding di un utente, si vuole essere brevi, insegnare una cosa alla volta e seguire la curva di apprendimento che ha dimostrato di funzionare meglio nei test. Tutorial lunghi ed elenchi passo-passo sono noiosi, meno interattivi e spesso vengono saltati.

Abbraccia il futuro delle interfacce gestuali

I gesti sono già qui. Esistono nel presente, rendendosi utili nella nostra vita quotidiana. Per gli utenti, questi gesti possono vivere nel loro subconscio mentre scorrono e toccano due volte senza pensarci. Product designer, sviluppatori e strateghi devono comprendere i gesti a un livello più intimo.

Il design per il tocco è una parte in crescita del settore. I gesti esistono nei bagni e nelle auto: chissà cosa c'è dopo? Abbraccialo. Un prodotto più utilizzabile è un prodotto efficace.

Hai domande o vuoi aggiornare UX e UI dei tuoi prodotti? Siamo felici di parlare. Basta raggiungere.