Bad Design vs. Good Design: 5 Esempi da cui possiamo imparare

Guardare esempi di cattivo design insieme a contro-esempi di buon design non è solo divertente, ma trae anche importanti lezioni per i designer. Mettono in evidenza le insidie che i designer devono evitare e ci fanno capire come tradurre le teorie del design in soluzioni che funzionano nel mondo reale. Jared Spool, scrittore, ricercatore ed esperto di usabilità americano, una volta disse: “Il buon design, quando è fatto bene, diventa invisibile. È solo quando è fatto male che lo notiamo”. Quindi, diamo un’occhiata a cinque esempi di design palesemente cattivo, facciamo luce su come il buon design lo fa funzionare, e distilliamo alcune lezioni in modo che tutti noi possiamo creare esperienze grandiose e invisibili per i nostri utenti.

Sovraccarico di informazioni

Il Male: Segnali di parcheggio a Los Angeles

I segnali di parcheggio a Los Angeles (LA) sono stati l’epitome del sovraccarico di informazioni per decenni. Sono sempre stati notoriamente difficili da capire, perché le regole del traffico sono complesse, con la conseguente necessità di trasmettere molte informazioni in una piccola area.

Quanto sono confusi questi segnali? Tradizionalmente, molto-guardate questo esempio degli anni 2010:

Autore/titolare del copyright: Jorge Gonzalez. Condizioni di copyright e licenza: CC BY-SA 2.0

Per quanto riguarda i segnali di parcheggio di Los Angeles, questo esempio è già abbastanza semplice.

Immagina di essere un guidatore lungo questa strada un martedì mattina alle 9. Puoi parcheggiare in questo punto? Quella che sembra una domanda semplice richiede un sacco di elaborazione mentale per rispondere.

Come designer, ci troviamo spesso di fronte a situazioni in cui dobbiamo progettare un sacco di informazioni da visualizzare in un piccolo spazio. I cartelli di parcheggio a Los Angeles potrebbero essere un caso estremo, ma molte volte progettare per applicazioni mobili significa affrontare gli stessi problemi. C’è una via d’uscita, sia per i cartelli di parcheggio che per i designer in generale?

Il Bene: Nikki Sylianteng’s Parking Sign

Progettare un cartello per mostrare tutte le informazioni, pur essendo facile da capire, sembra un compito impossibile. Ma è esattamente quello che ha fatto la designer di Brooklyn Nikki Sylianteng.

Autore/Titolare del copyright: Nikki Sylianteng. Termini di copyright e licenza: CC BY-NC-SA 4.0

Il segnale di parcheggio proposto da Nikki è stato infine utilizzato a Los Angeles come parte di una prova.

Parte del motivo per cui il design1 di Nikki funziona bene è che è incentrato sull’utente: Nikki ha capito che gli automobilisti vogliono semplicemente sapere se possono parcheggiare in un posto. Sì o no – questo è tutto ciò di cui gli automobilisti hanno bisogno, e questo è tutto ciò che il segnale di parcheggio mostra.

Il suo design ha anche fatto uso di immagini, piuttosto che di testo, per trasmettere informazioni. Il risultato è incredibilmente intuitivo: verde per OK, rosso per No Parking. È anche progettato per i daltonici, con strisce per il divieto di parcheggio.

Ora, quando si guarda il cartello, si sa che il martedì alle 9 del mattino, il parcheggio non è consentito. Le barre mostrano cosa c’è a colpo d’occhio – semplice.

Lezioni apprese: Best Practice

• Capire di cosa hanno bisogno i tuoi utenti, poi progettare in base a questo. Questo aiuta a ridurre il sovraccarico di informazioni.
• Hai molte informazioni da trasmettere ai tuoi utenti? Prova a usare le immagini invece del testo. Scopri di più sulla visualizzazione dei dati qui.

Mystery Meat Navigation

The Bad: LazorOffice.com

Conosciuta nel 1998 da Vincent Flanders di Web Pages That Suck2, la Mystery Meat Navigation (MMN) si riferisce ai casi in cui la destinazione di un link non è visibile finché l’utente non ci clicca sopra o punta il cursore. Il termine “carne misteriosa” era un riferimento alla carne servita nelle mense delle scuole pubbliche americane che sono così lavorate che il loro tipo esatto non è più distinguibile.

MMN è brutto perché riduce la scopribilità degli elementi di navigazione. Questo aggiunge carico cognitivo agli utenti, perché ora devono indovinare come navigare o cosa fa un clic su qualcosa.

Mentre la maggior parte dei MMN si trova nei siti web più vecchi, sono sorprendentemente prevalenti nei siti moderni. Prendete Lazor Office, un’azienda di design che crea case prefabbricate, per esempio.

Autore/Titolare del copyright:Lazor Office, LLC. Termini e licenza del copyright: Fair Use

LazorOffice.com ha una griglia di immagini MMN sulla sua home page. Come potete vedere, questo tableau dà poche indicazioni su dove andare. Invece, nove immagini stanno ferme, lasciando alcuni di noi a riflettere su un enigma piuttosto che interagire con una pagina.

Sotto la piega della loro home page, una griglia di miniature di immagini giace in attesa. Sono cliccabili? Beh, sì – se si sposta il cursore del mouse su un’immagine, questa si trasforma in un puntatore. Ma cosa succede quando si clicca su un’immagine?

“Clicca per scoprirlo!” non è mai una buona soluzione di User Experience (UX). È probabile che i tuoi utenti abbandonino la navigazione e trovino una soluzione alternativa nel sito di un concorrente.

Il Bene: Schede del corso sul sito della Interaction Design Foundation

Per fortuna, i problemi di MMN sono facili da risolvere. La chiave è essere consapevoli che bisogna etichettare chiaramente i link. Aggiungendo semplicemente “View project” che appare al passaggio del mouse migliorerà l’usabilità della pagina di Lazor Office di cui sopra.

Autore/Titolare del copyright: Interaction Design Foundation ApS. Termini di copyright e licenza: Fair Use

Le nostre schede dei corsi sono poco misteriose come link.

Per le schede dei corsi della Interaction Design Foundation, non solo abbiamo “View Course” in fondo ad ogni scheda per indicare l’azione che avverrà, ma abbiamo anche uno stato hover con il testo “Go to course”. Molti siti web seguono una convenzione simile, e dovresti farlo anche tu, per massimizzare l’usabilità del tuo sito web.

Lesson Learnt: Best Practice

Etichetta sempre i tuoi link! Non vi piacerebbe mangiare carne misteriosa – e allo stesso modo, ai vostri utenti non piacerebbe cliccare su link misteriosi.

Aggiungimento di attrito alle azioni dell’utente

Il male: iFly50.com

Come designer, dovremmo aggiungere attrito alle azioni dell’utente con estrema cautela, a meno che lo scopo sia quello di dissuadere gli utenti dal compiere quell’azione. A volte, tuttavia, potremmo anche involontariamente aggiungere attrito alle azioni dell’utente (per lo più per motivi estetici o di novità) che risultano in una UX dannosa.

Un esempio è iFly50.com, creato per l’anniversario della rivista iFly di KLM. iFly 50 è un sito web a scorrimento verticale che mostra 50 destinazioni di viaggio, e in alcune destinazioni (come quella qui sotto), un pulsante vicino al fondo chiede agli utenti di cliccare e tenere premuto per alcuni secondi per visualizzare altre foto.

Autore/Titolare del copyright: Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines). Termini di copyright e licenza: Fair Use

iFly 50 si aspetta che i suoi utenti clicchino e tengano premuto per qualche secondo ogni volta che vogliono vedere altre foto.

L’atto di aggiungere qualche secondo di frizione ad ogni azione può risultare in una UX tremendamente peggiore. Immaginate se, invece di cliccare per caricare una pagina istantaneamente, ora dovete cliccare e tenere premuto per due secondi per ogni link che cliccate nel vostro browser. Smetterete di esplorare internet dopo qualche click e attesa.

Molte volte, noi designer tendiamo a farci trasportare dai nuovi stili di interazione o azioni, ma è fondamentale che esercitiate sempre cautela quando il vostro design potrebbe aggiungere attrito alle azioni degli utenti. La maggior parte delle volte, le convenzioni provate e testate (per esempio, semplici clic o strisciate) funzionano perfettamente.

Il buono: Scorrimento elastico su iOS

Interessante, aggiungere consapevolmente attrito alle azioni dell’utente può risultare in un grande design. Una delle invenzioni più popolari di Apple nel suo sistema operativo mobile, iOS, è la creazione dello scorrimento elastico, dove in certe situazioni (come alla fine di una pagina web) lo scorrimento diventa sempre più difficile.

Autore/titolare del copyright: Interaction Design Foundation ApS. Condizioni di copyright e licenza: Fair Use

Nello scorrimento elastico di iOS, l’attrito è deliberatamente aggiunto in alcune situazioni.

Lo si può vedere in azione qui sopra, dove si verifica un maggiore attrito quando l’utente scorre fino alla fine della pagina web. L’attrito è stato aggiunto per indicare le situazioni in cui lo scorrimento non è più consentito: e l’effetto è un’esperienza intuitiva.

Lettura imparata: Best Practice

Evitare il più possibile di aggiungere qualsiasi tipo di attrito alle azioni dell’utente – e implementarlo attentamente quando non si hanno alternative.

Design “intelligente” che ignora l’usabilità

Il male: Bolden.nl

A volte, i design intelligenti possono essere dannosi per l’UX. Ciò che rende questo errore più pericoloso è che noi designer amiamo i design intelligenti. Sono piccole meraviglie grafiche che portano un sorriso sui nostri volti. Purtroppo, la maggior parte degli esseri umani non sono designer. Ancora più triste, non tutti i design intelligenti sono buoni design, specialmente quando creano problemi di accessibilità, scopribilità o usabilità.

Prendiamo il sito web dello studio di sviluppo e design strategico olandese Bolden, per esempio:

Autore/titolare del copyright: Bolden. Termini di copyright e licenza: Fair Use

Si può capire cosa sta cercando di dire la loro home page? No? Beh, questo perché dovrai spostare il tuo mouse nell’angolo della pagina per vedere correttamente i messaggi.

Autore/Titolare del copyright: Bolden. Termini di copyright e licenza: Fair Use

È un design intelligente? Sì, sicuramente. Ma è un cattivo design? Assolutamente!

Questo è un grande esempio di progettazione per il designer, piuttosto che per l’utente: il sito web ha seriamente ridotto la leggibilità dei suoi titoli nella determinazione dei suoi creatori di fornire un design innovativo. Chiunque l’abbia progettato ha anche lasciato fuori il testo per dire agli utenti che devono muovere il mouse verso gli angoli, il che significa che la scoperta dei titoli si basa sul caso. Inoltre, anche quando il titolo viene rivelato, il contrasto tra il testo e lo sfondo è povero al punto che si può ancora vedere il testo sovrapposto. Tutto questo si aggiunge per creare un sito web poco amichevole per l’utente.

Il buono: CultivatedWit.com

Il sito di Cultivated Wit è un ottimo controesempio di come un design intelligente non debba necessariamente mettere a dura prova l’usabilità.

Autore/Titolare del copyright: Cultivated Wit. Termini di copyright e licenza: Fair Use

La homepage di Cultivated Wit mostra un gufo illustrato.

Nella homepage di Cultivated Wit, l’illustrazione del gufo fa l’occhiolino quando il mouse ci passa sopra:

Autore/Titolare del copyright: Cultivated Wit. Termini e licenza del copyright: Fair Use

Sorpresa! Il gufo ti fa l’occhiolino quando gli punti il cursore. Notate anche la saggia allocazione degli spazi bianchi.

La differenza chiave qui è che questo non forma una parte essenziale del sito, quindi non diminuisce l’usabilità anche se l’utente non scopre questo intelligente elemento di design.

Inoltre, hanno una chiara freccia rivolta verso il basso per suggerire che qualcosa si trova sotto la piega. E quando scorri verso il basso, vedrai questo:

Autore/Titolare del copyright: Cultivated Wit. Termini e licenza del copyright: Fair Use

E i siti web possono essere intelligenti senza sacrificare l’UX.

La copia (che è leggibile e ha un buon contrasto) crea un senso di arguzia – non diverso da quello che Bolden stava cercando di ottenere – senza diminuire l’UX del sito. L’unico piccolo problema è il testo “Join our email club” dovrebbe essere più visibile, ma preso nel suo insieme, il sito di Cultivated Wit è un grande esempio di fornire un design intelligente senza creare una scarsa UX.

Lesson Learnt: Best Practice

Il design intelligente dovrebbe sempre essere reso il più infallibile possibile, e/o testato su utenti reali. A volte, i design intelligenti possono ritorcersi contro e danneggiare l’usabilità.

Animazioni superflue

Il male: PayPal Receipt Concept su Dribbble

Le animazioni sono un elemento cruciale dell’interaction design, ma dovrebbero sempre servire uno scopo. Non dovrebbero mai essere fatte per il bene dell’animazione. Sfortunatamente, i designer tendono ad avere una storia d’amore con le animazioni, in parte perché le animazioni sono così divertenti da creare che potremmo non sapere quando fermarci.

Il concetto di animazione di Vladyslav Tyzun per una ricevuta email di PayPal, postato su Dribbble, è un esempio di animazione fatta male:

Autore/titolare del copyright: Vladyslav Tyzun. Termini di copyright e licenza: Fair Use.

L’animazione è carina, ma superflua. In totale, ci vogliono ben 3,5 secondi per vedere i dettagli della transazione. Una semplice dissolvenza della ricevuta sarebbe più elegante, e poiché richiede meno tempo, meglio anche per l’utente.

Questo problema diventa pericoloso quando i designer sembrano non averne mai abbastanza di animazioni. A partire dal 2016, l’animazione di Vladyslav avrebbe ricevuto più di 500 like e 8.000 visualizzazioni. Questo mostra un apprezzamento fuorviante che i designer hanno verso l’animazione per il bene dell’animazione. Avere un’idea della tendenza del designer a preferire le epopee in picchiata rispetto a rappresentazioni più dirette e catturarsi prima di cedere alle animazioni vi farà risparmiare un sacco di tempo ed evitare molti mal di testa. Ricordate, gli utenti vengono sui siti per uno scopo: vogliamo mostrare loro ciò che stanno cercando in un breve spazio e tempo, non trattenerli in un gran tour della galleria.

Il buono: L’animazione di Stripe Checkout

Quando facciamo animazione di proposito, tuttavia, i risultati possono essere grandiosi. Guarda l’animazione di Stripe Checkout quando l’utente riceve un codice di verifica:

Autore/Titolare del copyright: Stripe, Inc. Condizioni di copyright e licenza: Fair Use.

Stripe usa animazioni per far sembrare le cose più veloci di quanto non siano: fornisce agli utenti aggiornamenti (come “Inviato”) anche se potrebbero non aver ancora ricevuto l’SMS. Questo evita che gli utenti si sentano frustrati per aver dovuto aspettare, e fornisce la garanzia che un SMS sta arrivando proprio ora.

Rachel Nabors, un’esperta di animazioni web invitata al W3C, suggerisce cinque principi da tenere a mente quando si progettano le animazioni3:

1. Animate deliberatamente: pensate ad ogni animazione prima di crearla.
2. Ci vogliono più di 12 principi: I 12 principi di animazione della Disney funzionano per i film, ma non necessariamente per i siti web e le app.
3. Utile e necessario, poi bello: l’estetica dovrebbe passare in secondo piano rispetto alla UX.
4. Vai quattro volte più veloce: le buone animazioni sono discrete, il che significa che corrono veloci.
5. Installa un kill switch: per le animazioni grandi come gli effetti paralessi, crea un pulsante di opt-out.

Lesson Learnt: Best Practice

Fate sempre in modo che la vostra animazione abbia uno scopo: troppo può uccidere la UX di un prodotto. La bellezza deve avere il suo peso ed essere funzionale.

The Take Away

Non è divertente guardare esempi di cattivo design? Per fortuna, è anche educativo. Ecco le lezioni chiave e le migliori pratiche dai cinque esempi di design buono e cattivo:

1. Capire di cosa hanno bisogno i tuoi utenti, poi fornire quelle informazioni.
2. Se hai molte informazioni da trasmettere, prova a usare le immagini invece del testo.
3. Etichetta sempre i tuoi link! Agli utenti non piacciono i link misteriosi.
4. Evitate di aggiungere qualsiasi tipo di attrito alle azioni dell’utente, a meno che non abbiano lo scopo di dissuadere l’azione.
5. Testate i vostri design intelligenti e includeteli con cautela.
6. L’animazione è come le parolacce. Se ne fai un uso eccessivo, perde tutto il suo impatto.4

La prossima volta che ti acciglierai davanti a un esempio di cattivo design, fermati a pensare: cerca di capire perché il design è fallito, trova esempi di design che hanno fatto le cose per bene, e prendi nota mentalmente della lezione che hai imparato. E poi condividi l’amore: condividi la tua lezione con altri designer nel nostro forum di discussione!