UI Design, User Interface Design, in italiano progettazione interfaccia utente, è quella cosa che rende un gruppo di pagine web un vero luogo d’incontro tra uomo e azienda, il cosiddetto punto di interazione visivo.

Una precisazione da fare subito è cosa intendiamo con UI (Design), User Interface, da non confondersi, come spesso accade, con la UX, User Experience. Se la UI è il punto di interazione visivo, cioè l’insieme visuale di tutti gli elementi che concorrono all’interfaccia vera e propria, la UX è l’aspetto meccanico di come devono avvenire le interazioni tra l’utente e gli oggetti.

Premessa: per un corretto UI web design, si devono prediligere linguaggi e stili che possano rendere coerenti la Brand Identity dell’azienda, Qui trovi un mio articolo centrato sull’identità di marchio, asse fondamentale di tutta l’impalcatura comunicativa e di marketing.

E la chiave di ciò è pensare innanzitutto al tuo utente/cliente, soprattutto e sempre.

Il web design, come lo intendiamo oggi, è una disciplina relativamente nuova e deve molto allo HCI Human-Computer Interaction. Tanto che i punti che tratterò di seguito sono tratti proprio dalla ricerca in ambito HCI.

Conosci i tuoi utenti/clienti

Devi sapere chi sono i tuoi utenti/clienti, ciò significa conoscere tutti i dati demografici che le tue App di analisi possono recuperare, ma soprattutto sapere di cosa hanno bisogno e cosa impedisce loro di raggiungere i propri obiettivi .

Raggiungere quel livello di empatia richiede più che un’attenta analisi delle statistiche. Richiede conoscere le persone che utilizzano il sito Web. Significa parlare con loro, guardarli mentre usano il (tuo) prodotto (e forse altri) e fare loro domande come “Cosa ne pensi di questo design?”

Quali sono i loro obiettivi? Cosa impedisce loro di raggiungere questi obiettivi? In che modo un sito Web può aiutarli a superare o aggirare tali sfide?

Non smettere mai di conoscere i tuoi utenti/clienti. In fondo i desideri sono solo esagerazioni concettuali di bisogni reali.

Come le persone utilizzeranno la UI

Prima di progettare la tua web UI, devi definire come (dove) le persone la useranno. Sempre più i dispositivi mobili, cioè quelli touch-based, affollano le nostre case, scrivanie e auto, non sottovalutare mai questo aspetto perché è uno dei pilastri del UI Design contemporaneo.

Esempio: L’esperienza utente dell’App Tinder è letteralmente a portata di swipe, provala e capirai quanto è basata sull’impulsività dell’azione.

Tutti usano siti Web e App in due modi: direttamente (interagendo con gli elementi dell’interfaccia del prodotto) e indirettamente (interagendo con gli elementi dell’interfaccia utente esterni al prodotto).

Esempi di interazioni dirette

• ‍Tapping pulsante
• Swiping un elemento Card
• Dragging e dropping un oggetto

Esempi di interazioni indirette

• Pointing e clicking con il mouse
• Utilizzo degli shortcuts
• Typing in un campo form
• Drawing con una tavoletta Wacom

Chi sono i tuoi utenti/clienti e quali dispositivi usano dovrebbe incidere profondamente sulle tue decisioni come UI Web Designer.

Esempio: Design UI significa dare il giusto progetto alle persone giuste, persone anziane avranno una limitata manualità mentre programmatori o gli scrittori utilizzano principalmente la tastiera.

Aspettative

Le interazioni con un sito web o una App portano a effetti pratici che l’utente deve conoscere e che avranno delle conseguenze. Bastano pochi click per spendere dei soldi o inserire commenti denigratori, ecco queste “azioni” sono anche portatrici d’ansia per lo stesso utente.

Ecco perché devi sempre informare, preventivamente e correttamente, l’utente/cliente su cosa accadrà una volta cliccato il determinato pulsante. Tutto questo richiede una pianificazione del design visuale e del copy.

Definire le aspettative con il design visuale

• Evidenziando il pulsante che corrisponde all’azione desiderata.
• Utilizzare un simbolo ampiamente compreso (cestino per il pulsante Elimina, un segno + per aggiungere qualcosa o una lente per la ricerca) in combinazione con il giusto copy.
• Scegliere colori con un significato rilevante (verde per un pulsante “VAI” e rosso per “STOP”)

Definire le aspettative con il copy

• Testo comprensibile e chiaro su pulsanti.
• Testi chiari che indichino le azioni da intraprendere in tutte le fasi.
• Fornire warnings e richieste di conferma.

Per azioni dalle conseguenze irreversibili, come eliminare definitivamente qualcosa, bisogna sempre avere una doppia sicurezza, cioè chiedere sempre due volte se si è sicuri.

Prevenire gli errori

Le persone commettono errori, ma non dovrebbero (sempre) subirne le conseguenze. Esistono due modi per ridurre l’impatto dell’errore umano:

• Prevenire gli errori prima che si verifichino.
• Facilitare la soluzione degli errori una volta commessi.

Si possono vedere molte tecniche di prevenzione errori ad esempio nell’e-commerce e nella progettazione di moduli form contatto. Noterai che i pulsanti rimangono inattivi fino a quando non compili tutti i campi o viene segnalato un indirizzo email incorretto se non inseriamo il simbolo @.

Prevenire gli errori è meno frustrante che cercare di risolverli dopo.

Detto questo, nessuno è infallibile e a volte l’imponderabile errore avviene. Capirai l’importanza del messaggio di errore e del copy dettagliato.

Quando scrivi i messaggi di errore, assicurati che facciano due cose:

• Spiega il problema. Ad esempio, “Hai detto di essere nato su Marte, che gli umani non hanno ancora colonizzato.”
• Spiega come risolverlo. Ad esempio, “Per favore, inserisci un luogo di nascita qui, sulla Terra.”

Nota: Tieni a mente sempre questa frase “Puoi sempre ripristinare gli elementi eliminati andando nel Cestino e facendo clic su Ripristina”.

Il principio di anticipare l’errore utente è chiamato principio poka-yoke. Poka-yoke è un termine giapponese che vuol dire “a prova di errore”.

Dai un feedback, veloce!

Nel mondo reale, l’ambiente ci fornisce feedback continui, parleremo e qualcuno ci risponderà (a volte), accarezzeremo il gatto e farà le fusa o soffierà arrabbiato (a seconda del suo umore).

Troppo spesso, le interfacce digitali sia per PC che per mobile non riescono a dare il giusto feedback, lasciandoci sospesi e incerti, chiedendoci se dovremmo ricaricare la pagina, riavviare il tutto o semplicemente lanciarlo dalla finestra.

Quindi metti sempre un’animazione di caricamento, fallo il mondo te ne sarà grato. Anima i pulsanti, utilizza i benedetti “hover” e “active”, l’importante è che si percepisca che qualcosa sta succedendo in quel momento. E dammi un high-five virtuale quando faccio qualcosa di giusto!.

Assicurati solo che tutto succeda velocemente, e ricorda che qualsiasi ritardo superiore a 1 secondo viene interpretato come interruzione. Oltre i 10 secondi meglio non saperlo. Dati accurati rivelano che mediamente nessuno è disposto ad aspettare oltre i 3 secondi, o rispondi o tanti saluti al tuo sito web.

Piccolo trucco: Se la tua pagina ha un caricamento lungo ma inferiore ai 5 secondi non usare la classica progress bar, farà sembrare il caricamento ancor più lungo. Il trucco è visualizzare qualcosa che non implichi accenni al progresso, tipo la pinwheel (per molti la pinwheel of death) su Mac OS o qualsiasi animazione, non troppo pesante, che renda il momento allegro, sempre in linea con il visual generale del sito web.

Pensa attentamente al posizionamento e alle dimensioni degli elementi

La Fitts’ Law, un principio fondamentale della Human-Computer Interaction (HCI), stabilisce che:

Il tempo necessario per acquisire un bersaglio è in funzione della distanza e della dimensione del bersaglio.

In altre parole: più qualcosa è vicino e/o più grande, più velocemente puoi posizionare il cursore (o il dito) su di esso.

Questo ovviamente comporta una serie di implicazioni per l’interazione e le tecniche di progettazione della UI, ma tre delle più importanti sono:

• Crea pulsanti e altri “click targets” (come icone e collegamenti testuali) abbastanza grandi, visibili e facilmente cliccabili. Particolarmente importanti sono la “typography”, i “menu” e altri “link lists”, spazio insufficiente creerà click indesiderati (ricorda quando non riesci a fare un tap corretto sul tuo smartphone.
• Rendi i pulsanti per le azioni più comuni, grandi e visivamente più importanti.
• Posiziona la barra di navigazione (e altri elementi visivi interattivi comuni, come la ricerca) sui bordi o sugli angoli dello schermo. Questo potrebbe sembrare controintuitivo, ma funziona perché riduce la necessità di precisione.

Mentre pensi a dove posizionare e alle dimensioni degli elementi grafici e tipografici, tieni sempre presente la tua interaction model. Se il tuo sito web per esigenze di design o copy si naviga orizzontalmente anziché verticalmente, dovrai considerare come e dove indurre i tuoi utenti a interazioni non lineari.

Non ignorare gli standard

Essendo noi designer tipi altamente creativi, tendiamo ad amare, interpretare e reinventare cose (spesso a caso), ma non è sempre una buona idea.

Perché? Perché una versione rinnovata di un’interfaccia familiare aggiunge quello che in gergo si chiama “cognitive load”. Far riflettere troppo le persone su un processo già appreso non è mai una buona idea se vuoi che restino sul tuo sito web. Ovviamente, puoi reinventare tutto se lo desideri, ma solo se migliora il design in maniera efficace.

Esempio: Alcuni anni fa la App Pocket modificò la posizione del pulsante “archiviazione” nella sua interfaccia Android. Fino all’autunno del 2013, il pulsante “archiviazione” era in alto a sinistra dello schermo, proprio dove le specifiche Android indicavano il posizionamento del pulsante “Su”.

Pocket in realtà cercava di focalizzare l’esperienza utente sulla lettura del contenuto e non di duplicare un controllo hardware, ma il posizionamento incoerente causò malumori tra gli utenti, spesso chiudevano accidentalmente l’articolo che stavano leggendo, invece di tornare alla lista di lettura come previsto.

Quel piccolo cambiamento ha aumentato la probabilità che i nuovi utenti continuino a utilizzare la App Pocket del 23%.

Rendi le tue interfacce facili da imparare

Tanto è semplice un concetto, una cosa, un passaggio, tanto più facile sarà da ricordare a breve termine.

Pertanto, quando possibile, limitare il numero di passaggi che una persona deve ricordare durante l’utilizzo della UI. È possibile facilitare l’apprendimento di utilizzo frammentando le informazioni, ovvero suddividendole in blocchi più piccoli, fidati funziona sempre.

Law of Conservation of Complexity di Tesler, ci dice che l’interfaccia utente dove essere il più semplice possibile. Facile a dirsi ma difficile a farsi ma se volete il miglior esempio possibile basta guardare vicino, il menu di navigazione di Microsoft Word è uno dei migliori esempi di frammentazione e semplificazione in giro (apritelo subito).

La maggior parte delle persone utilizza Microsoft Word in modo basilare, pochi lo fanno in versione Pro, ma tutti incredibilmente aprono l’identica UI, tutti incredibilmente trovano quello che cercano (quasi sempre) proprio perché la stratificazione del menu è oggetto di studio da decenni.

Ciò ha portato a un concetto chiamato “progressive disclosure”, dove le funzionalità avanzate sono nascoste su interfacce secondarie.

Ormai lo vedi spesso nelle Home dei siti web come i magazine online o gli e-commerce multi brand, dove brevi testi introducono il prodotto, un articolo, o una serie, per poi rimandare a pagine informative specifiche (questa è anche la best practice per mobile UI, in cui la navigazione è sempre una sfida).

Suggerimento: evitare di utilizzare “ulteriori informazioni” o testi non specifici in modo simile nei collegamenti e nei pulsanti. Questo uso errato non dice agli utenti quali “informazioni avrà in più”. Spesso, le persone semplicemente escono dalle pagine dove “ulteriori informazioni” viene ripetuto senza un reale focus sull’argomento da approfondire.

Semplifica il processo decisionale

Ovunque i siti  web ci urlano: I “banner” si espandono improvvisamente per diventare annunci a tutto schermo. I “modal pop-up” ci implorano di iscriverci a blog e newsletter. I video nel mezzo degli articoli ci costringono a perdere secondi preziosi secondi di lettura. Per non parlare dei “widgets”, i “flyouts”, i “tooltips” …

A volte ci vorrebbe più calma e la Hicks’ Law da a tutti un motivo per riprenderci del tempo.

L’idea è semplice quanto il risultato: più opzioni di interfaccia utente si presenta a un utente, più diventa difficile per loro prendere una decisione.

Ciò influisce su quasi tutto ciò che costruiamo:

• Layout generali
• Menu di navigazione
• Pagine prezzi
• Blog indexes
• Feeds di contenuti

L’elenco continua. Ma il risultato è: più semplice rendiamo i nostri progetti, più veloce e facile sarà per gli utenti prendere le decisioni che vogliamo prendano.

Questo è esattamente il motivo per cui le landing pages e le email (non-newsletter) devono avere solo una call to action!.

Suggerimento: a volte desideri che gli utenti rallentino e prendano in considerazione più opzioni. Pinterest, Dribbble e molti blog funzionano davvero bene per il loro design a piastrella (chi ricorda “l’amata” interfaccia Metro di Microsoft?).

Leggi gli analytics

Come ultima cosa vorrei darti un input preciso su quello che bisogna fare sempre.

Capita spesso che il nostro ego dia battaglia e vinca dicendoci dolcemente quanto bella sia la nostra UI, che bellissimi effetti, che menu sfavillanti e articolati, quanta bellezza artistica…

Però una volta finiti gli autoelogi dovremmo ritornare con i piedi a terra e fare sempre una cosa importante, analizzare i dati di utilizzo con gli strumenti adatti.

Ci sono due strumenti fondamentali che svolgono due compiti importanti Google Analytics e Mixpanel.

Google Analytics ti servirà per l’aspetto socio-comportamentale come sessioni, tempi, fonti di traffico, età, sesso, ecc.., mentre Mixpanel si concentra su engagement, conversione e come trattenere il più alto numero di utenti. Ma di questi strumenti ne parleremo molto in futuro.

Io penso di aver detto le cose fondamentali, ora spetta a te cercare il giusto equilibrio per il tuo web, che sia un semplice sito vetrina o un e-commerce