Come combinare estetica e usabilità nel web design

Qual è la caratteristica principale di un ottimo design? Il segno di un grande design, che sia per un sito web, una app o un prodotto, è la possibilità di far capire a chiunque di cosa si tratta e di poterlo usare esattamente come è stato previsto. Non devono essere necessari interpreti.

Il design deve essere innanzitutto utilizzabile. Ma ciò non significa che non possa essere bello. Non si tratta di mettere in campo un calcolo a somma zero tra bellezza e usabilità nel web design.

È più qualcosa di simile all’equilibrio di Nash: tutto funziona insieme per il massimo beneficio e perdite minime.

Ecco come far accadere qualcosa di simile sul tuo sito web.

Descrivi le icone con etichette di testo

I bambini che sono usciti dalle chat room nei primi anni 2000 sono emersi dalla melma primordiale del web con un amore sviscerato per le emoji. Che nel tempo si è trasformato in un amore per le foto e per le icone.

Sfortunatamente, l’iconografia nel web design è difficile da ricordare, crea confusione e rallenta gli utenti.

In altre parole, le icone creano attrito, e l’attrito è un problema.

Ma tutti noi sappiamo che non è possibile rinunciare all’utilizzo delle icone. Quindi, se hai intenzione di usarle, tieni a mente che esse hanno bisogno di più di un livello di informazioni.

Gli indicatori di cambio di stato come il colore possono essere d’aiuto, ma nulla è migliore che utilizzare un’etichetta di testo.

LEGGI ANCHE: Come il colore di un sito web può modificare la percezione dell’utente

Ma perché le etichette di testo vicino alle icone funzionano molto meglio delle semplici icone?

Probabilmente la risposta è da ricercarsi nella natura del simbolismo. Il simbolismo richiede agli utenti di soddisfare una serie di condizioni culturali tramite esperienze precedenti per comprendere la funzione che viene trasmessa.

Quando si ha una doppia informazione (come un’icona associata ad una descrizione), si ha una migliore possibilità di innescare segnali dalla memoria semantica degli utenti.

Le icone semplici, d’altra parte, potrebbero richiedere agli utenti di sfruttare la loro memoria di lavoro notoriamente volatile, specialmente se l’icona e la funzione non sono una combinazione popolare.

Quindi, se hai intenzione di usare le icone come parte del design di un sito web per migliorare l’estetica, scatena la tua fantasia e dai ad esse un nome.

Ad ogni modo, nel web design un’immagine non vale sempre 1.000 parole.

Trattare coerentemente i segnali visivi per favorire l’usabilità nel web design

Le persone e i design eleganti del sito hanno qualcosa in comune: le persone sono molto più disposte a perdonare i problemi, se a loro piace l’aspetto.

Conosciuto come l’effetto estetico-usabilità, gli utenti metteranno in secondo piano eventuali problemi di usabilità minori se l’estetica lo compensa.

L’effetto estetico-usabilità si riferisce infatti alla tendenza degli utenti a percepire i prodotti attraenti come più utilizzabili. Le persone tendono a credere che le cose che appaiono migliori funzioneranno meglio, anche se non sono effettivamente più efficaci o efficienti.

Ma l’effetto è ancora più pronunciato quando l’usabilità e l’estetica lavorano insieme.

Quindi come è possibile farli lavorare all’unisono? La soluzione è quella di mantenere coerenti i segnali visivi.

Ricorda, lo stile è una funzione ed è un linguaggio.

Quando utilizzi il colore blu per i tuoi collegamenti, stai comunicando qualcosa all’utente: questo elemento è cliccabile e apre un’altra pagina.

E quando usi un’ombreggiatura per elevare un pulsante sopra la pagina, comunichi che si tratta di un’area importante e interattiva.

Ma cosa succede se prendi lo stesso effetto ombra e lo applichi alle tue immagini nel mezzo di un articolo che, presumibilmente, non si collega a nulla?

In questo caso l’incoerenza invalida ciò che comunica su entrambe le estremità. Questo obbliga gli utenti ad imparare più tipologie di relazioni rispetto a quelle che dovrebbero avere per poter utilizzare il tuo sito web.

E dal punto di vista della bellezza estetica, la coerenza del design all’interno e tra i marchi produce i maggiori benefici con la minima quantità di rischi.

Medium è uno dei miei esempi preferiti in termini di coerenza del design.

I titoli hanno sempre le stesse dimensioni, i sottotitoli anche, il font è sempre lo stesso e le icone anche.

Non importa quale è la prima pagina che visiti o dove vai successivamente, in Medium hai sempre una esperienza consistente.

L’unica variazione che puoi incontrare è il colore, ma anche questa è ridotta al minimo.

In Medium saprai sempre quali sono gli elementi e come interpretarli perché sono gli stessi in tutto il sito. E questo lo rende meravigliosamente utilizzabile.