Il difficile apprendimento della lingua dell'interfaccia utente

Sicuramente ti sei già trovato a spiegare un'interfaccia che sembra ovvia a qualcuno che con il digitale era un po' meno a suo agio di te. È come se non parlassi la stessa lingua, penso che lo parli letteralmente.

La creazione del linguaggio dell'interfaccia utente

All'inizio delle moderne interfacce uomo/macchina (quelle con un minimo di consapevolezza ergonomica), volevamo rendere la loro comprensione il più semplice possibile trasponendo graficamente il mondo fisico in un'immagine digitale.
Ecco perché il skeuomorfismo e il realismo sono i primi stili grafici ad essere emersi.

Interfaccia di manipolazione del suono
Interfaccia di manipolazione del suono
Piuttosto intuitivi, ma neanche scontati, questi stili presentano già un livello di astrazione, ad esempio il disegno di un floppy disk rappresenta la funzione di salvataggio.

Il rischio della semplificazione

Per motivi di chiarezza, evidenziando il contenuto, ma anche la demarcazione, è stato sviluppato il design piatto.
Il problema con il design piatto era ed è sempre una mancanza di chiarezza su ciò che è interattivo o meno. Manca ancora un codice comune che dice "questo pulsante è uno"; questo senza che assomigli a un pulsante fisico.
Le interfacce di design piatto a volte ci offrono solo indizi, tracce di quali potrebbero essere questi elementi. Ciò si traduce nella necessità di più tempo e fatica per l'utente per orientarsi (deve analizzare il contesto, il testo, la posizione). Molte azioni eseguite dall'utente sono quindi rischiose ed esplorative, come questa ottimo articolo spiegare gli effetti a lungo termine del design piatto sul comportamento degli utenti.

Design piatto 2.0

La seconda generazione di design piatto (come il design dei materiali) torna a questo eccesso di semplificazione dell'interfaccia. In particolare aggiungendo ombre e animazioni artificiali che danno più significato alle diverse componenti.

Anche se questo design piatto 2.0 porta grandi progressi, siamo ancora lontani da un risultato completamente soddisfacente e presenta ancora alcuni vecchi difetti.

l5 Ltd

Evoluzione pittografica

L'evoluzione pittografica è un buon punto di riferimento per l'evoluzione di questo linguaggio dell'interfaccia utente.

Possiamo tracciare un parallelo piuttosto interessante con l'evoluzione della scrittura.
ecriture
Geroglifici in ieratico
Il problema di questa evoluzione è che la comprensione di questi segni è sempre meno intuitiva e richiede apprendimento.

Piccolo inserto semiotico

Per chi non lo sapesse, lasciate che vi parli velocemente della semiotica.
La semiotica è lo studio del processo del significato, cioè della produzione, codificazione e comunicazione dei segni. Un campo di studio molto ricco se applicato alle HMI in generale e al dominio web. La semiotica nasce dal lavoro di Charles Sanders Peirce.
Definisce 3 tipi di segni:

  • L'icona, che si riferisce all'oggetto significato attraverso una somiglianza con esso. Così, in fotografia o in pittura, il ritratto (icona) si riferisce al soggetto (oggetto). Anche evocare un colore attraverso un oggetto (rubino, smeraldo, zaffiro) è un processo iconico;
  • L'indice osserva una relazione diretta di contiguità con il suo oggetto. Ad esempio, un'impronta di una zampa indica la presenza di un animale.
  • Il simbolo si riferisce all'oggetto per mezzo di una convenzione culturale basata su un'associazione di idee o valori. La bilancia e la spada sono quindi due distinti simboli di giustizia, entrambi legati a valori culturali molto forti: equità per la bilancia e rigore per la spada.

Dall'icona al simbolo

Ho l'impressione che in termini di design dell'interfaccia stiamo scivolando sempre di più dall'icona verso il simbolo guarda verso l'indice, creando così un proprio linguaggio.
Il motivo di questo processo è che il simbolo è più veloce da leggere e può significare molto di più dell'icona, ma SOLO SE tutti hanno imparato a parlare la stessa lingua. Questo è l'intero problema.
I pittogrammi e altri elementi dell'interfaccia iniziano ad avere un livello di astrazione tale da poter essere interpretati in modi diversi da persone diverse o da non essere compresi affatto.
Ad esempio, i progettisti dei seguenti pittogrammi si aspettano che li comprendiamo senza sforzo.

style_icons_system_human_contenuto2
Pittogrammi dalle specifiche di progettazione dei materiali di Google
Pittogramma di un lucchetto, un cestino sulla casa di Apple
Pittogramma di un lucchetto di un carrello a casa di Apple

Dopo il design dei materiali?

Sulla base di queste osservazioni, come possiamo migliorare la grafica e il design delle nostre interfacce?
Ecco alcune strade da esplorare:

  1. Apple ha deciso di rimuovere le icone e sostituirle con semplici parole per l'interfaccia di Apple TV
  2. Le raccomandazioni sulla progettazione dei materiali sono per la maggior parte molto rilevanti, tuttavia soffrono di alcuni difetti che potrebbero essere corretti
    • A volte le animazioni non necessarie possono distrarre e diventare noiose
    • Gli elementi cliccabili possono essere difficili da distinguere
    • Tutte queste animazioni richiedono molta potenza hardware (ombre, animazione, ....)
    • L'uso eccessivo di colori sgargianti e immagini geometriche con linee al di fuori della griglia può distrarre
  3. Infine, occorre trovare un buon equilibrio tra semplificazione e complessità nell'interfaccia e nei pittogrammi. Questo punto è spiegato molto bene in questo articolo.

 
Questo articolo è basato sulle grandi tendenze del web design. Molti grafici stanno già tenendo conto dei vantaggi e degli svantaggi di queste tendenze creando interfacce perfettamente adatte agli utenti. Possiamo anche qualificare le mie osservazioni sul fatto che il design dei materiali è abbastanza rilevante per gli utenti abituati ai "codici" di queste interfacce. Mi è sembrato comunque interessante parlare dell'evoluzione di questo linguaggio e della distanza crescente tra il livello di certi utenti e quello imposto da certe interfacce.
Grégoire, scienziato UX @UXRepublic