Ogni sito web deve saper catturare l’attenzione degli utenti, fornendo le informazioni che cercano in maniera semplice ed efficace. Ecco perché user experience e user interface sono fondamentali.
Ogni sito web è un mondo con precise regole. Se è vero che lo UX Designer si occupa di tutta la ricerca e l’analisi dell’esperienza derivante dal concreto utilizzo del prodotto digitale, lo UI designer è il professionista che crea il ponte di collegamento che permette all’essere umano di relazionarsi con esso. Il designer di interfacce traduce quindi l’esperienza in layout di pagine web/app, adatte a essere consultate dagli utenti e in linea con l’obiettivo di marketing definito con gli stakeholders.
Proprio per questo non esiste buona user experience senza una buona user interface.
Trasmettere valore? Questione di design… ma non solo
Non dobbiamo dimenticare inoltre che quando si parla di design uno degli aspetti più importanti è dato dal valore percepito di quello che si realizza e che, anche se la parte di ricerca e progettazione è fondamentale, spesso la parte visuale è quella che viene apprezzata di più dai non addetti ai lavori.
Per trasmettere questo valore al meglio all’utente finale, l’interfaccia del sito web è proprio lo strumento più adatto. Come?
Facendo in modo che l’interfaccia possa assolvere ai suoi compiti:
- far trasparire all’utente solo le parti rilevanti ai fini dell’obiettivo
- nascondere la complessità del funzionamento interno del sistema
- essere facile da imparare, comoda da usare
- far sentire l’utente a suo agio
Esistono delle regole che chi disegna dovrebbe tenere come una checklist da seguire per portare a termine il proprio lavoro al meglio. Quello che segue vuole essere una lista di 12 punti indispensabili, un how to per disegnare interfacce intuitive e semplificare il compito degli utenti.
1. Pensa e disegna responsive
Tra settembre 2016 e marzo 2017 il numero di utenti che accede a internet tramite device mobili è superiore al numero di persone che naviga solo da desktop (25% vs 24%, rilevazione comscore.com). Non contemplare la possibilità dell’ottimizzazione dei contenuti per mobile è essere quindi professionalmente anacronistici. Quello che non si deve dimenticare è progettare il sito web non solo per desktop, ma per ogni device che ha modalità di utilizzo e gesture proprie.
2. Semplifica la navigazione del sito web raggruppando logicamente gli elementi
Raggruppare gli elementi correlati è un modo fondamentale per aumentare l’usabilità. Oggetti correlati o con significato simile dovrebbero essere posizionati in prossimità gli uni dagli altri per rispettare la logica e generare minore attrito cognitivo. Impiegare molto tempo per cercare delle funzionalità spesso è frustrante.
3. Manipolazione diretta
Quando si visualizzano elenchi di dati di solito vogliamo consentire all’utente di compiere un’azione con gli elementi della lista. Cliccando su un elemento esso può essere manipolato (modificato, cancellato, rinominato, ecc). Un altro esempio di manipolazione diretta potrebbe essere: fare clic su un elemento (a esempio un campo testo con un indirizzo), che si trasforma in un campo modificabile.
I vantaggi sono:
- Operazioni rapide, incrementali e reversibili;
- Facilità nell’apprendimento e nella memorizzazione;
- Possibilità di esplorazione del sistema;
- Maggiore importanza al riconoscimento rispetto al ricordo;
- Feedback immediato delle azioni eseguite;
- Minimizzazione degli errori.
4. Principio di consistenza nel design dell’interfaccia
Le call to action del sito web devono essere chiare, precise e riconoscibili, quelle che possiedono la stessa funzione devono avere lo stesso stile all’interno dello stesso sito.
Bisogna sempre progettare anche gli ‘stati’ dei bottoni, per esempio gli stati di “hover” (quando il mouse passa sopra all’oggetto) e “active” (al click).
Il testo contenuto all’interno del sito web deve essere quanto più chiaro e parlante rispetto all’interazione. Anche i link all’interno del testo devono essere riconoscibili dal resto del paragrafo con underline o un colore diverso.
5. I form devono avere solo informazioni necessarie
Gli esseri umani sono pigri, soprattutto per la compilazione dei campi di un modulo. Ogni campo inutilmente ripetuto, o valutato come superfluo, fa aumentare la possibilità che l’utente decida di non registrarsi.
Ricordati che non tutti gli utenti digitano alla stessa velocità, qualcuno riscontra particolare difficoltà o lentezza, inoltre riempire un form da mobile è ancora più impegnativo. Chiediti perciò se ogni campo sia davvero necessario. Inoltre non dimenticare mai di segnalare l’obbligatorietà con l’asterisco, questo eviterà inutili reinserimenti dopo aver generato un errore per un campo non compilato correttamente.
6. Esponi le opzioni
In ogni menu dropdown che si utilizzi, si nasconde un insieme di azioni all’interno, che richiedono lo sforzo di essere scoperte. Se queste opzioni sono al centro del percorso per ottenere informazioni utili o compiere azioni importanti, allora si potrebbe prendere in considerazione la possibilità di renderle esplicite. Prova a utilizzare dropdown solo per menu complessi o per opzioni di scelta assolutamente prevedibili, per esempio un calendario o riferimenti geografici.
7. Gerarchia visiva del sito web
Una buona gerarchica visiva separa elementi primari da elementi secondari. È il risultato di allineamenti, prossimità, colori, toni, indentazione del testo, grandezza del font, grandezza degli elementi, padding, spacing, etc.
Quando il linguaggio visuale rispetta la gerarchia ed è applicato correttamente, avremo una maggiore leggibilità delle informazioni e l’attenzione dell’utente sarà focalizzata su quello che il designer o il content manager ha deciso di enfatizzare, il tempo passato nella pagina sarà probabilmente più alto e le informazioni catturate dall’utente maggiori.
La gerarchia visiva è così importante anche per dare giusto peso alle informazioni fondamentali: forse un errore madornale come quello della cerimonia degli Oscar poteva essere evitato 😉
8. Form follow function
Le icone e tutti gli altri pattern a cui l’utente è abituato, come a esempio gli slider, la paginazione, gli effetti di mouseover, le call to action, le frecce che ci avvertono che c’è un sottomenu e le label chiare, facilitano la fruizione del sito. L’imperativo è: non far pensare il tuo utente, ma facilita tutte le sue mosse.
9. Web font
Leggere su un monitor è più difficile che leggere sulla carta: il testo non è stabile per i refresh della pagina ed è retroilluminato. Inoltre data la postura che assumiamo di fronte a uno schermo, l’occhio ha bisogno di un’ancora visiva per leggere in modo più confortevole, motivo per il quale i paragrafi giustificati <text-align: justify;> dovrebbero essere evitati sempre.
Fondamentale per garantire una buona leggibilità è anche il corpo del testo che non dovrebbe essere mai al di sotto dei 12px: considera che il limite minimo per il quale la leggibilità è compromessa anche a chi non ha problemi di vista è 9px.
Il font che sceglierai sarà il tone of voice del sito: la sua scelta quindi non va valutata unicamente dal punto di vista estetico, ma anche funzionale. Prediligi font con una buona leggibilità e font nati per essere font per web perché avranno una randerizzazione migliore.
Riassumo gli aspetti da considerare:
- la leggibilità viene prima di tutto (meglio scegliere font nati per il web)
- font size: maggiore uguale a 12px
- il font deve
- contenere tutti i caratteri di cui avete bisogno (controllate tutte le lettere accentate)
- essere liberamente utilizzabile o acquistabile
- essere di buona qualità e avere sia il maiuscolo che lo stampatello
- gestire correttamente il kerning (letter-spacing)
- essere disponibile in diversi formati (per una compatibilità cross-browser è bene fornire il font non solo nel formato TTF, ma anche EOT, WOFF e SVG)
10. Vettori
Le immagini vettoriali sono create da linee e curve (vettori). Hanno la particolarità di risultare sempre in alta qualità anche a diverse risoluzioni, non perdendo in definizione.
Le immagini bitmap sono invece create da pixel inseriti all’interno di un’area. Quando si ridimensiona una bitmap, l’immagine potrebbe risultare “sgranata” perdendo qualità, questo perché i pixel che le compongono sono fissati su una griglia di dimensioni fisse. Per questo le icone dovrebbero sempre essere caricate come file vettoriali: questo ti permetterà di avere un’unica icona che possa essere più grande per mobile e tablet, dati gli schermi retina, senza perdere in definizione.
11. Microinteraction
Le micro interazioni sono piccoli, ma fondamentali dettagli di design, azioni che aiutano l’esperienza utente a interagire con il sito o con l’app. Le micro interazioni, se progettate e usate bene, possono:
- Incrementare la relazione tra utenti e prodotto
- Migliorare la percezione di un’azienda/progetto
- Creare interazioni naturali e immediate
- Mantenere il focus sull’empatia nel design
- Rendere la nostra vita più facile
12. Gestione degli errori
The last but not least!
Il designer, come già detto, deve analizzare ciò che gli utenti sono soliti fare, realizzando prodotti digitali che utilizzano pattern comuni e garantire che l’interfaccia realizzata abbia elementi di facile accesso, comprensione e uso per facilitare le azioni degli utenti stessi e minimizzare gli errori. Ogni azione deve essere reversibile e lasciare all’utente la certezza di poter modificare e riparare a ogni suo errore.
Ora non ti resta che utilizzare il design per guidare le persone all’interno di interfacce quanto più semplici ed intuitive.
Ricordati che l’esperienza dell’utente dipende in buona parte da te, perché egli stesso viene a contatto con il design che è contenuto, ma anche forma… e questi due aspetti concorrono insieme al successo di un progetto; infine aiuterai l’azienda a differenziarsi sul web.
