it
English Español Deutsch Français Italiano Português (Brasil) Русский 中文 日本語
Invia il post
Vai al Blog
Amplia le tue conoscenze:
Amplia le tue conoscenze:
User Experience
Enrico Maioli

UI: 5 errori di design e usabilità - L'esempio pratico delle chiavi dell'auto

99
Wow-Score
Il Wow-Score mostra il livello di interazione del posto di un blog. Si calcola sulla correlazione tra il tempo di lettura attivo degli utenti, la loro velocità di scrolling e la lunghezza dell'articolo.
Enrico Maioli
UI: 5 errori di design e usabilità - L'esempio pratico delle chiavi dell'auto

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.

Chiavi auto, mockup di mobile UI e mockup UI su sito web Chiavi auto, mockup di mobile UI e mockup UI su sito web. Mockup da 100Wireframes.com

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

UI e UX: l'esperienza mobile

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

Errore 1 di UI: Pittogrammi troppo simili sul telecomando Pittogrammi troppo simili sul telecomando

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:

Soluzione al primo errore di User Interface per le chiavi auto Pittogramma con gancio visibilmente aperto, pieno e vuoto. Toggle e interruttori bipolari.

  • 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

Icone confuse nelle interfacce digitali Share, back, reply, forward, undo? Con etichetta è meglio.

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!

UI: l'importanza di seguire convenzioni e pattern comuni Usa convenzioni e pattern comuni

Consigli per migliorare la UI: usare le text labels A sinistra Mobile Tips by Google. A destra la UI di iTunes.

2. Materiali inadatti all’uso

Chiavi auto: plastica e metallo

Errore numero 2 nella User Interface: sbagliare i materiali

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.

UI dell'app Calendario o delle Note in iOS 6 Lo scheumorfismo sull'app del calendario in iOS 6

Lo scheumorfismo sta tramontando. Resta necessario ridurre l’ambiguità, ancorando il design di simboli ad oggetti reali e interazioni esistenti.

Design di simboli: il rimando ad oggetti reali per le User interface Diversi “materiali” per la stessa funzione

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

Errore 3 di UI: le dimensioni delle icone Il pulsante Chiudi ha un pittogramma minuscolo

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)

L'esperienza da mobile influisce sulla UI? Il sito web della scuola non è progettato per mobile… pinch to zoom

Problemi di UI: icone da mobile troppo piccole e non facili da usare App di una nota banca: pulsante back o torna ai messaggi?

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

Errore 4 di UI: icone incomprensibili

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

Un buon esempio di User interface riuscita: semplice e chiara

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.

Facebook: esempio di UI sbagliata ABC - Facebook website UI desktop, localizzata. D. Facebook app UI. Notifiche col globo o col campanello?

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

Un dettaglio della UI di Spotify Sopra: Un dettaglio della UI di Spotify. Sotto: icona di palla che rimbalza e vecchio logo di FoursquareIl colore è un buon modo per aggiungere significato, ma molte persone hanno difficoltà sui colori o sul contrasto, quindi il colore da solo non basta.

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

Errore 5 di UI: troppe interazioni per concludere un processo

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.

Riscontro sulla User interface: le persone vogliono fare prima! Le persone vogliono fare prima!

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

  1. Un esempio clamoroso è l’avvio degli smartphone con codice, superato da interfacce con impronta digitale e poi da riconoscimento facciale.
  2. 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.
  3. Le interfacce vocali - in auto è più facile dettare che scrivere.
  4. Progetto web realizzato da Intera.it: il suggerimento nelle interfacce di ricerca (molto utile su nomi complessi e difficili da ricordare).

Esempio di UI che funziona da Intera.it

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.

Consiglio per creare una User Interface efficace

Ti è piaciuto l'articolo? Hai indovinato a cosa serve il pulsante bagagliaio x2?

Condividi e commenta qui sotto, risponderò a ogni dubbio!

Enrico Maioli
Maestro

Un veterano della community.

Amo imparare e cavalcare il cambiamento. Amo aiutare le persone a costruire e scoprire cose che funzionano. Per questo il mio mestiere, dal 1998, è progettare su Web. Designer e Formatore con la passione per Munari, Frank Miller, Hugo Pratt e Rodari. Costruisco le Idee con metodo, innaffio la Bellezza per farla fiorire. Osservo le persone per costruire processi ben oliati: Value Proposition + Design & User Experience = web marketing che gira. Ho lavorato assieme a Gino Paoli, Ferrero, Università di Padova, Parlamento Europeo, Fiera Roma, CNA.
Amplia le tue conoscenze:
User Experience
Invia feedback
Il tuo feedback deve contenere almeno 3 parole (10 caratteri).

Utilizzeremo questa e-mail solamente per rispondere al tuo feedback. Informativa sulla privacy

Grazie per il tuo feedback!