Checklist di 5 errori comuni di design che impediscono una buona usabilità e una UX soddisfacente
Molti prodotti di uso comune hanno problemi nell'interfaccia (User Interface – brevemente UI).
In questo articolo paragono i problemi di UI delle chiavi dell’auto alle interfacce di prodotti web e digitali.
Chiavi auto e piattaforme web: cosa hanno in comune?
Le caratteristiche desiderabili delle chiavi auto sono:
-
che siano portatili e leggere - devono stare dentro alla tasca
-
che siano resistenti: i tasti vengono premuti 2-3 volte al giorno, circa 700 volte / anno. Estratte e riposte in tasche o borse 700 volte all’anno
-
che siano facili da usare
Caratteristiche utili in un telecomando per auto
Analizziamo l’esperienza utente con le chiavi auto. Spesso il pulsante radio Apri/chiudi viene usato camminando da e verso l’auto. Magari con le chiavi in tasca.
Quindi una delle caratteristiche utili che dovrebbe avere un telecomando per auto è quella di poter distinguere al tatto il tasto per aprire da quello per chiudere l'auto, senza dover interrompere il cammino e guardare il pulsante. 700 volte all’anno.
Caratteristiche utili in un’interfaccia web e digitale
Le caratteristiche desiderabili di un’interfaccia sono:
-
trovare quello che serve (strategia, architettura dei contenuti)
-
contenuti e funzioni comprensibili (proposta di valore, copy, UI design)
-
facile da usare (usabilità e UI)
L’esperienza utente e il contesto d’uso di un’interfaccia web
Spesso chi progetta un sito web lo fa da desktop e il committente lo giudica da desktop (a volte addirittura da stampe su carta!). Invece, oltre il 50% dei visitatori usa il sito da mobile (sì, anche nel tuo sito B2B).
Quindi l’esperienza d’uso si svolge in uno scenario:
-
in cui c’è poca banda
-
su uno schermo piccolo
-
in outdoor con riflessi sullo schermo
-
con l’uso di un touchscreen
-
in movimento (per esempio in auto)
E solitamente chi consuma contenuti da mobile si aspetta risposte rapide e rilevanti, per bisogni immediati (per approfondire il tema Mobile UX guarda il webinar registrato con SEMrush nella maratona su Mobile Marketing).
Nelle chiavi dell'auto e nelle interfacce web, riscontriamo uno stesso problema:
Così come ogni produttore di auto si ostina a realizzare i propri telecomandi in modo arbitrario, anche chi progetta le interfacce di prodotti digitali dimentica spesso l'utente finale. L’interfaccia di questi due prodotti spesso non corrisponde alle semplici, ovvie, palesi, necessità degli utenti.
Quali sono gli errori di design e usabilità più comuni, tanto nella progettazione di oggetti quanto in quella di interfacce web come siti e App?
Vediamone 5:
1. Funzione opposta, design simile: icone confuse sui pulsanti
Icone confuse nelle chiavi auto
Nelle chiavi auto il tasto Apri e il tasto Chiudi sono pressoché identici al tatto. Unica differenza è la posizione: uno sopra, uno sotto. Si distinguono alla vista solo grazie al disegno di un lucchetto aperto e di uno chiuso.
Beh, si distinguono… i due pittogrammi hanno una forma identica al 98%. Si può fare meglio? Io azzarderei questo:
-
lucchetto aperto e chiuso, opposti con pieno e vuoto
-
gancio visibilmente aperto
Altra ipotesi da non scartare è l’interruttore bipolare invece di un pulsante. Una leva fisica che è in posizione aperto o chiuso. Si fa anche nelle interfacce digitali (vedi iOS on/off toggle).
Icone confuse nelle interfacce digitali
Nelle UI capita la stessa cosa. Le funzioni back, undo, share e reply vengono spesso rappresentate con frecce molto simili tra loro.
Usare questi simboli vicini tra loro, senza etichetta (text label) incrementa il carico cognitivo dell'utente, il dubbio, la frustrazione.
Takeaways:
-
Non usare icone simili e vicine tra loro, per funzioni diverse
-
Usa le etichette, se possibile (text labels)
- Usa convenzioni e pattern comuni: fai ricerca!
2. Materiali inadatti all’uso
Chiavi auto: plastica e metallo
Le mie chiavi vengono estratte e riposte 700 volte/anno. Si impegnano a graffiare il mio smartphone, a scivolare in pozzanghere o tombini.
Se la scelta del materiale è inadeguata cadono a pezzi (vedi chiave di sinistra) e scivolano. Se il materiale è corretto le chiavi non scivolano, e aggiungono informazioni tattili preziose (vedi chiave a destra). Il materiale quindi ha 2 funzioni principali:
-
sostenere e strutturare il prodotto
-
dare un feedback percettivo tattile
Il materiale su web e digital: "toccare con gli occhi"
Lo scheumorfismo è un metodo per collegare l’idea di un oggetto a un’altra. L'esempio più celebre è il caso delle interfacce di iOS 6. Vedi ad esempio la UI dell'app Calendario o delle Note. L'idea era di aiutare le persone abituate all'uso di calendari e taccuini reali, accompagnandoli nel mondo digitale bidimensionale e senza texture dei dispositivi touchscreen.
Lo scheumorfismo sta tramontando. Resta necessario ridurre l’ambiguità, ancorando il design di simboli ad oggetti reali e interazioni esistenti.
Non è un caso se il sistema di design sviluppato e promosso da Google si chiama material design. Un visual language in cui oggetti e interazioni digitali si basano sui materiali del mondo reale.
Quindi è importante verificare se all'interazione (mouse over, click, tap) corrisponde un feedback visivo.
Ad esempio nelle UI con modifica del testo, il mouse over (il tocco) del puntatore sui testi attiva un feedback. Il click attiva altre interazioni o animazioni.
Mailchimp web UI: editing feedback
Campaign Monitor web UI: editing feedback
Giphy.com web UI toggle button
Takeaways:
-
Il tocco sul materiale è sostituito da interazione, animazione, feedback visivi
-
Per ogni operazione compiuta è necessario dare un feedback all'utente, facile da comprendere e tempestivo
-
Usa un design system strutturato come material design o iOS UI
Tools:
3. Dimensioni ed efficienza d’uso: le dimensioni contano!
Ahhhh, fallo più piccolo il pittogramma di lucchetto chiuso!
Il logo invece è bello grande, non sia mai che mi dimentico di che marca è la mia auto.
In questo telecomando la mancanza di coerenza tra funzione Aperto e Chiuso è siderale:
-
APRI – tasto grande con icona lucchetto
-
CHIUDI – tasto tondo con logo auto e micro-icona lucchetto
Usabilità e dimensioni dei controlli nelle UI
Il problema si verifica più spesso nelle UI per mobile, dove emerge l’incompetenza dei designer (e del committente) a comprendere il contesto. Come abbiamo già detto, l’esperienza d’uso con smartphone si svolge:
-
su schermo piccolo
-
in outdoor con riflessi sullo schermo
-
con touchscreen
-
in movimento (per esempio in auto)
Nell'app della banca le icone in alto a destra rappresentano funzioni diverse: troviamo un tasto back (freccia) accanto a un tasto messaggi/notifiche (busta). Gli errori qui sono:
-
dimensioni troppo piccole per funzioni così importanti
-
dimensioni troppo piccole per un pollice umano
-
i due tasti sono troppo vicini - sembra “Torna ai Messaggi”. Tanto più che il controllo sopra, il back di iOS, è “Torna a Cerca”
Ogni volta che uso l’app e voglio tornare alla pagina precedente, finisco sugli INUTILI messaggi.
La mia UX si riassume in una parola: F@#*l§!
Takeaways:
-
Le aree touch su mobile devono avere dimensioni di almeno 9 mm x 9 mm
- Se un'icona è vicina ad altri elementi touch, circondala di spazio “inattivo”
-
Usa convenzioni e pattern comuni
-
Content strategy: valuta i contenuti prioritari, non mettere tutto nella top navigation
Puoi approfondire il tema di accessibilità su mobile sul sito di w3c.
4. Semantica, semiotica, significati e simboli: icone incomprensibili
Icone incomprensibili sulle chiavi
Stesse chiavi di prima. Il pulsante sotto è un enigma. “x2”: Cos’è?
Tutti i telecomandi auto condividono (per fortuna) le stesse funzioni. Per questo immagino che il tasto serva per aprire il bagagliaio.
Ma “x2” e “bagagliaio”... mi fanno pensare che forse non rappresenta il “bagagliaio”.
Questo mi fa sentire stupido.
Vi invito a commentare e tentare di indovinare (senza cercare il manuale!).
Le chiavi qui sopra sono un buon esempio di forme con un significato:
- i pulsanti Apri e Chiudi si possono distinguere al tatto, uno concavo l'altro convesso
- i pittogrammi sono ancora troppo simili ma sono molto grandi, ben leggibili. Anche il simbolo del pulsante bagagliaio è comprensibile
- i pulsanti sono colorati. Tondo giallo per le luci. Triangolo rosso è perfetto – non ha bisogno di spiegazioni
Usabilità delle Icone sul web
Per definizione le icone sono rappresentazioni di un oggetto, una funzione, un’azione, un’idea. Se non sono immediatamente chiare per l’utente, sono un inutile disegnino che impedisce di completare un'attività.
Riconoscimento è meglio di memorizzazione. Per una persona la comprensione di un’icona è basata sulle esperienze precedenti (anche dal mondo reale!).
Esempi di UI sbagliate
1. L'incoerenza della UI di Facebook tra desktop e mobile
Icona notifiche:
Su desktop il mondo (?!) – pessimo.
Su mobile la campanella – bene.
Nella UI desktop il collegamento di significato tra la funzione notifiche e il simbolo del globo è inconsistente. Tanto che le persone cercano di capirlo chiedendo a Google.
Non basta: il FAIL si manifesta anche nella necessità di localizzare le icone.
2. UI di Spotify app su Mac
Altro esempio sbagliato: la freccia in basso va bene per rappresentare un drop down menu.
Peccato che quando hanno aggiornato l'app hanno pensato bene di aggiungere un pallino. Non ROSSO come fanno tutti, ma BLU. Quindi io ci vedo:
-
una palla che rimbalza
-
la vecchia icona/logo di Foursquare
Affianca al colore una forma, un segno semplice per ottenere un buon risultato.
Takeaways:
Le icone devono essere facili da riconoscere e da ricordare:
-
semplici e schematiche. Per rendere veloce il riconoscimento meglio pochi segni, pochi dettagli: LESS (details) IS MORE (quick to master)
-
usa colore e forma insieme, ad esempio un triangolo rosso
-
verifica con la Regola dei 5 secondi: se non è comprensibile in pochi istanti, non funziona
Per il 5-second test ti consiglio il tool (gratuito) Usabilityhub.
5. Processi lunghi e inefficienti
Meno interazioni per avviare l’auto
L’esperienza d’uso delle chiavi varia in base all’uso dell’auto. Con una media di uso dell’auto di 2 volte al giorno, si arriva a 700 avvii dell’auto in un anno.
Nel telecomando di sinistra, premendo un bottone in metallo, si estrae meccanicamente la chiave. In quello di destra (finalmente un design usabile!) si supera la chiave fisica in metallo con un monoblocco in plastica.
I vantaggi di avere meno interazioni:
-
meno complessità
-
meno attrito
-
meno cose che si rompono
Per questo i produttori di auto ora stanno progettando in termini di UX e non più di features sul prodotto, ideando sistemi di accesso all'auto e avviamento keyless.
UI con meno interazioni su web e dispositivi
La necessità di minore interazione decolla se l’uso è frequente. Le scorciatoie (shortcuts) consentono di realizzare lo stesso compito più velocemente con metodi alternativi. Sono utili per utenti esperti, quando avviano un processo in modo frequente e ripetuto.
Esempi di interazione più rapida nel digital
- Un esempio clamoroso è l’avvio degli smartphone con codice, superato da interfacce con impronta digitale e poi da riconoscimento facciale.
- Le gestures su smartphone: sulla app di Facebook per tornare indietro puoi usare il pulsante con la freccia back o lo swipe col dito a destra.
- Le interfacce vocali - in auto è più facile dettare che scrivere.
- Progetto web realizzato da Intera.it: il suggerimento nelle interfacce di ricerca (molto utile su nomi complessi e difficili da ricordare).
Dispositivo di shortcut per utenti esperti dell'app di Tinder :-0
Takeaways:
-
Le scorciatoie sono utili se l'operazione è frequente e ripetuta
-
Aggiungi shortcuts senza eliminare i processi base
-
Vuoi essere originale e disruptive? Risolvi gli attriti delle persone
User Interface: Recap e conclusioni
1. Design diverso per funzioni diverse. Usa icone chiare con text labels.
2. Usa materiali coerenti. Su web e digital si tocca con gli occhi, usa feedback visivi.
3. Dimensioni. Progetta i controlli con giuste dimensioni e spazio inattivo.
4. Significati e simboli. Usa icone riconoscibili in 5 secondi.
5. Processi rapidi per gli esperti. UI con meno interazioni e shortcuts.
User Interface senza user?
Il design è per gli utenti, quindi le interfacce vanno verificate sull’uso delle persone. Migliore è l’usabilità della UI, migliore è la UX dei tuoi prodotti.
Devi tenere in considerazione che maggiore sarà la soddisfazione delle persone nell’usare il tuo prodotto, più spesso verrà usato e consigliato.
Il design dell’interfaccia ha lo scopo preciso di guidare gli utenti in un processo in modo naturale e intuitivo. Usabile, quindi piacevole e soddisfacente.
Ti è piaciuto l'articolo? Hai indovinato a cosa serve il pulsante bagagliaio x2?
Condividi e commenta qui sotto, risponderò a ogni dubbio!