{"id":419,"date":"2013-11-19T10:28:08","date_gmt":"2013-11-19T09:28:08","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/flat-ui-e-form\/"},"modified":"2013-11-19T10:28:08","modified_gmt":"2013-11-19T09:28:08","slug":"flat-ui-e-form","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/flat-ui-e-form\/","title":{"rendered":"Flat UI e form"},"content":{"rendered":"

Questo articolo tratta due importanti parole di quattro lettere che cominciano con “F”: “flat” e “form”.<\/p>\n

Sebbene alcuni sostengano che le interfacce utente flat siano semplicemente una moda o l’ovvia risposta ai trend skeumorfici, molti designer hanno adottato l’approccio flat perch\u00e9 la riduzione di stili visuali (quali i gradienti, le drop shadow e i bordi) crea interfacce che sembrano pi\u00f9 semplici e pi\u00f9 pulite.<\/p>\n

Il problema \u00e8 che la maggior parte delle flat UI sono create ponendo l’attenzione sul passaggio di contenuto, prestando pochissima attenzione ai componenti transazionali e interattivi (ossia delle form).<\/p>\n

\n

Le form sono importanti<\/h2>\n

Quando parlo di form, intendo qualunque interazione in cui venga scambiata dell’informazione per ricevere un prodotto o un servizio<\/strong>, il che include qualsiasi cosa, dall’internet banking al commercio su mobile, dalla registrazione all’uso di una nuova app per il tablet fino a fare una ricerca sul web.<\/p>\n

Rispetto al design, i bisogni degli utenti nei confronti delle form possono essere molto diversi dai bisogni degli utenti verso il contenuto<\/strong>, come riassunto nella seguente tabella:<\/p>\n\n\n\n\n\n\n\n\n
Form<\/th>\nContenuto<\/th>\n<\/tr>\n
Task completion<\/td>\nExploration e task completion<\/td>\n<\/tr>\n
Utenti \u201cconcentrati sul campo\u201d<\/td>\nUtenti non \u201cconcentrati sul campo\u201d<\/td>\n<\/tr>\n
Spesso solo un entry ed exit point<\/td>\nMolti possibili entry ed exit point<\/td>\n<\/tr>\n
Concetti di \u201csuccesso\u201d e \u201cfallimento\u201d \t\t\t\tchiaramente definiti<\/td>\nConcetti di \u201csuccesso\u201d e \u201cfallimento\u201d variano<\/td>\n<\/tr>\n
Spesso utilizzato una sola volta<\/td>\nSpesso visitato molte volte<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Innanzitutto, le form riguardano il completamento dei task<\/strong>. Sono sicura di essere una delle rarissime persone al mondo che controlla davvero le form per divertimento, tutte le altre persone (dotate di ragione) vogliono semplicemente riempirne i campi per registrare la propria auto o comprare delle nuove scarpe. Con il contenuto, invece, finire un task non \u00e8 sempre una priorit\u00e0. A volte vogliamo solo navigare senza un punto preciso in mente (Wikipedia, mi riferisco te.).<\/p>\n

Le persone hanno un approccio diverso al completamento dei task rispetto a tale esplorazione. Osservate una persona che riempie una form e vedrete che “zoomm” nei campi, facendo riferimento alle istruzioni, ai suggerimenti e perfino alle etichette dei campi o alle domande solo se ce n’\u00e8 bisogno. C’\u00e8 un ordine: un punto da cui iniziare e uno dove finire e alla fine (di solito) si sa se si ha avuto successo o si \u00e8 fallito.<\/p>\n

Al contenuto, d’altro canto, si pu\u00f2 spesso accedere attraverso una serie di percorsi e risorse diverse, e le persone vi si muovono e ci si concentrano in vari modi. L’idea di successo \u00e8 ancora rilevante ma cambia a causa della diversit\u00e0 dei casi d’uso.<\/p>\n

Il focus sul task completion significa anche che un utente probabilmente riempir\u00e0 una form solo una volta, mentre al contrario il contenuto ad essa collegato potrebbe essere visitato pi\u00f9 volte. Di conseguenza, c’\u00e8 una scarsa possibilit\u00e0 che un utente impari il linguaggio visuale di una form (ad esempio, che non ci sono pulsanti ma solo link).<\/p>\n<\/div>\n

\n

Flat equivale a meno informazioni<\/h2>\n

Quindi, le form e i contenuti sono distinti. Cosa c’entra tutto ci\u00f2 con le flat UI?<\/p>\n

Il problema \u00e8 che nella corsa verso la semplicit\u00e0, le flat UI potrebbero essersi spinte troppo<\/em> in l\u00e0. Con il contenuto, cose come le drop shadow, i gradienti e i bordi potrebbero essere niente pi\u00f9 che inutili “abbellimenti<\/a>“. Quando leggiamo una notizia su pi\u00f9 pagine, non importa che il meccanismo per andare alla pagina successiva sia un pulsante piuttosto che un link. Con le form, invece, \u00e8 molto pi\u00f9 importante fare distinzione tra un pulsante o un link.<\/p>\n

Prendiamo l’esempio delle azioni “invia” e “cancella” di una form. Chiaramente queste azioni hanno risultati molto differenti e vogliamo che gli utenti scelgano rapidamente e facilmente quello che devono usare. Questo \u00e8 il motivo per cui io e altri, incluso il rispettabile designer Luke Wroblewski, raccomandiamo di presentare l’azione primara (invia) come un pulsante e quella secondaria (cancella) come link. Il visual design non fornisce solo l’estetica: comunica la differenza di funzionalit\u00e0 e la priorit\u00e0 relativa.<\/p>\n

La seguente form di Klout<\/a>, d’altro canto, dimostra la perdita di informazioni che spesso avviene con le flat UI. Mettere \u201ccancella\u201d prima di \u201cinvia\u201d \u00e8 un dark pattern<\/a> piuttosto subdolo, ma mettiamo un attimo da parte questa questione. L’approccio flat UI usa come stili sia per l’azione sia per quella secondaria dei link, con lo stesso colore per testo e sfondo: questi rallentano gli utenti, perch\u00e9 devono prestare pi\u00f9 attenzione prima di agire.<\/p>\n

<\/p>\n

Immaginate quanto sarebbe pi\u00f9 usabile questa form se la differenza delle azioni fosse comunicata attraverso il visual design (di nuovo, tralasciando il dark pattern).<\/p>\n

<\/div>\n<\/div>\n
\n

I tre modi pi\u00f9 eclatanti in cui le form flat falliscono<\/h2>\n

L’esempio della form di Klout di prima dimostra bene i tre modi principali in cui le form con UI flat spesso non riescono a creare un’esperienza user-friendly:<\/p>\n

    \n
  1. mancanza di affordance (affordance \u00e8 quanto il design di un oggetto, fisico o digitale che sia, suggerisce il proprio utilizzo, come una sedia che vi invita a sedervi)<\/li>\n
  2. insufficiente distinzione tra<\/em> gli elementi della form (ad esempio, campi vs. etichette vs. istruzioni vs. pulsanti)<\/li>\n
  3. insufficiente gerarchia all’interno<\/em> delle categorie degli elementi della form (ad esempio, pulsanti primari vs. pulsanti secondari)<\/li>\n<\/ol>\n

    Le azioni \u201ccancel\u201d e \u201csubmit\u201d su Klout non hanno affordance perch\u00e9 il loro design non invita all’interazione appropriata. Apparirebbero cliccabili se avessero la forma di un pulsante (sono azioni, dopo tutto) o se fossero almeno sottolineati (l’affordance convenzionale per i link sul web).<\/p>\n

    Gli elementi della form sono anche parzialmente indifferenziati: l’unica cosa che separa visualmente i link cliccabili dal testo non cliccabile \u00e8 il colore.<\/p>\n

    Per quel che riguarda la gerarchia all’interno dei link, l’esempio di Klout \u00e8 particolarmente interessante. Apparendo per primo, \u201ccancel\u201d \u00e8 pi\u00f9 prominente rispetto a \u201csubmit\u201d (da qui il dark pattern: c’\u00e8 una convenzione stabilita e un’associazione psicologica innata che porta le persone ad aspettarsi che quello che viene prima \u00e8 l’opzione pi\u00f9 comune). Ma oltre a questa sottile distinzione, i due link hanno esattamente lo stesso stile. Tuttavia, non sono equivalenti (indipendentemente se vedete la form dal punto di vista di Klout o dell’utente).<\/p>\n

    Quindi, come evitare questi tranelli pur mantenendo una flat UI? Il trucco sta nell’aggiungere sufficiente decorazione visuale per convogliare l’affordance, gli elementi della form e la gerarchia<\/strong>. Potete fare questo concentrandovi sugli elementi pi\u00f9 importanti della vostra form: campi<\/strong> e pulsanti<\/strong>, che sono il fulcro dell’interazione delle form.<\/p>\n<\/div>\n

    \n

    Messa a punto del design dei campi e dei pulsanti<\/h2>\n

    Farete grandi passi avanti nel rendere la vostra form flat usabile se renderete i campi un po’ “infossati”<\/strong> e i pulsanti un po’ “rialzati”<\/strong>. Tali scelte di design danno affordance e differenziano gli elementi della form.<\/p>\n

    Lo screenshot sottostante, preso dal processo di acquisto dello speaker Lowdi<\/a>, mostra cosa succede se non si riesce a fare quanto appena descritto: il design sia del campo quantit\u00e0 sia del pulsante acquista \u00e8 cos\u00ec piatto da non invitare all’appropriata interazione. Senza un’attenta ispezione, gli utenti non realizzeranno che possono cambiare la quantit\u00e0 e faranno fatica a trovare cosa cliccare per procedere verso il prossimo step.<\/p>\n

    <\/div>\n

    Ecco come distinguere e dare affordance ai campi e ai pulsanti:<\/p>\n\n\n\n\n\n
    Cosa fare<\/th>\nCome farlo<\/th>\n<\/tr>\n
    Far s\u00ec che i campi appaiano infossati<\/strong><\/td>\n\n
      \n
    • Dare ai campi un bordo o un’ombreggiatura inset, anche se solo di 1px<\/li>\n
    • Eliminare il colore di sfondo<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n
    Far apparire i pulsanti sollevati<\/strong><\/td>\n\n