UI Designer Omnibus 1/2
Tutto quello che ti serve sapere per diventare un UI Designer, dagli obiettivi da perseguire fino alle metodologie da applicare
Cosa si cela dietro un’interfaccia gradevole, semplice e chiara? Tre parole: User Interface Design, quella disciplina che sviluppa le interfacce utente di macchine e software; in generale, qualsiasi dispositivo elettronico.
Lo UI Designer è una guida, responsabile di un progetto nella sua fase intermedia; ne restituisce il concept a chi non lo conosce. In questo articolo, analizzeremo questa professione nel dettaglio, cominciando da questi punti:
1. Mansioni — 2. Requisiti — 3. Profilo — 4. Atomic Design
Ecco tutto quello che avresti sempre voluto sapere sulla figura dell’UI Designer e che non hai mai avuto il coraggio di chiedere. Cominciamo!
1. Mansioni
Cominciamo da ciò di cui ti dovrai occupare. Ti concentrerai sull’interfaccia, ponte fra prodotto ed essere umano, e su come essa suonerà all’utente.
Cosa farai come UI Designer?
- Progetterai la parte visuale di un prodotto digitale, web, app, smartwatch o tv che sia. Ciò che l’utente vedrà (e non vedrà), dipenderà da te.
- Guiderai l’utente con chiarezza e precisione nel trovare ciò che cerca, unicamente attraverso l’interfaccia. Per alcuni prodotti poi, ciò che il fruitore toccherà o digiterà sarà ancora più importante di ciò che vedrà.
Tutti hanno bisogno di essere presi per mano all’inizio… Ma non vogliamo che sia troppo evidente, giusto? Sarà tua premura agevolare la curva di apprendimento, anticipando le domande e dando l’impressione di star procedendo senza ostacoli e con le proprie forze.
Quando fai una cosa bene, nessuno si accorgerà che tu abbia fatto realmente qualcosa.
Testerai i tuoi progetti (prototipazione), provandoli su dispositivi reali, in modo da identificare rapidamente i difetti di progettazione.
Pensa un momento all’app che usi più spesso: è bella da vedere e facile da scorrere, giusto? Quanto tempo hai impiegato a utilizzarla? Qualche minuto appena, scommettiamo. Merito di chi si è invece speso per settimane — a volte mesi — per svilupparla. Ma come ha fatto?
2. Requisiti
Mestiere teorico quanto pratico, il progettista di interfacce traduce ogni azione e modus operandi in un segno visibile. Che metodi usa?
Che competenze sono necessarie, per un UI Designer?
- Conoscenze basilari di psicologia. Eh sì, come ti dicevamo poco fa, dovrai sempre considerare modelli mentali e sensibilità altrui. Cosa può essere percepito in un secondo istante? Cosa sarebbe meglio non fosse (mai) visto? Dove si andrà, qualora si riscontrassero difficoltà?
- Conoscenze base di marketing e di strategie di business;
- Conoscenze degli standard e dei pattern specifici dei supporti digitali (web, mobile, smartwatch, tv), per operare a livello responsivo;
- Conoscenze di visual, interaction e motion design;
- Capacità di calarsi nei panni dell’UX Designer e tradurne graficamente l’operato;
- Svolgimento di User Research — ossia lo studio di bisogni, motivazioni e comportamento — insieme a UX Designer e UX Researcher;
- Impiego di tecniche per ottimizzare il flusso di lavoro (workflow) di tutto il team, come il design sprint;
- Definizione del giusto tono di voce e delle frazioni di testo (microcopy, per esempio le CTA), allineandosi a brand e Content Strategy;
- Utilizzo di elementi di Atomic Design in funzione dell’accessibilità;
- Produzione di elaborati (derivables) quali mockup, moodboard, guide di stile, draft, wireframe e prototipi avanzati.
Sarai spesso affiancato da altri professionisti, ognuno con diversi compiti e conoscenze, ma tutti operanti nella stessa direzione. Prima di relazionarti con gli utenti, dovrai farlo con loro, tramite qualità più sociali che tecniche.
3. Profilo
Il tuo passatempo preferito è scontornare capelli su Photoshop? (buon per te) Vuoi sempre avere l’ultima parola sul font da usare? Inutile negarlo, progettare interfacce è la tua vocazione. Ma — per ora — non il tuo lavoro. E forse ti starai chiedendo che esperienze hanno vissuto coloro per cui questo lavoro è già realtà. Qual è il loro carattere, oltre a quello tipografico preferito (sì, lo abbiamo tutti 😄)?
Come agisce un UI Designer?
- Sperimentatore: ha scoperto un interesse verso qualcosa di cui non conosceva l’esistenza, e si spende per assemblare layout sempre freschi;
- Esploratore 🔍: sempre sul pezzo ma fedele a sé. Non si perde mai una tendenza, pur non adeguandosi necessariamente alla moda;
- Imprenditore: consapevole che i suoi elaborati dovranno uscire sul mercato, lavora per gli occhi di chi ne usufruirà nel tempo;
- Polipo 🐙: ha sempre le mani in pasta in più progetti, spesso affidati da qualche collega. Si specializza in alcuni aspetti peculiari, preferendo — per esempio — l’animazione 3D alla definizione delle CTA;
- Studioso: vede la vita come una fonte inesauribile di lezioni e suggestioni. Non si arrende mai, con la certezza che col tempo migliorerà sempre più.
Un sognatore insomma, ma con i piedi ben ancorati a terra. O meglio, le mani ancorate alla tastiera. E a tal proposito, è il momento di parlare di atomi.
4. Atomic Design
“E mo’ che c’entrano gli atomi?”. Niente fisica nucleare, promesso. L’Atomic Design è una metodologia (2013) atta a rendere le interfacce un’insieme coeso e coerente. Alla base vi è il concetto di gerarchica: ogni elemento (atomo, in quanto indivisibile) della UI ne segue una, dal testo alle immagini.
Accostarsi a una gerarchia dà priorità ai contenuti, organizzati in molecole, organismi e così via, tramite dimensioni, posizionamenti, colori, ecc. Cosa deve saltare all’occhio non dipende solo dagli utenti e dal loro contesto, ma prima di tutto da te. Analizziamo sinteticamente i diversi atomi.
Griglie
Spauracchi per i principianti, armi affilate per i più navigati. Scoraggiati, alcuni le evitano, preferendo modelli più liberi, ignorando che consistenza e vero potenziale del layout nascono proprio dal limite. Una griglia efficace mantiene pulizia visiva, facilitando chi la progetta e chi usufruisce dell’UI. Gli esperti sanno quando e come infrangerle, perché consapevoli dei risultati.
Spazio
Non solo è un elemento realmente modulabile, ma anche il più ricorrente, a prescindere da immagini e testi; è essenziale nel processo di gerarchizzazione quanto dovranno esserlo le tue UI. Ricorda: Less is more.
Tipografia
L’arte di organizzare il carattere tipografico consiste, a livello basilare, nel combinare testo, spazio e pesi, per incrementare leggibilità e impatto visivo.
Colori
L’elemento più efficace e immediato, soggetto però a preferenze — dettate anche da genere ed età — e significati culturali specifici. Secondo lo studio “Impatto del colore sul marketing”, fino al 90% dei giudizi rapidi sui prodotti si basa sul solo colore.
Il rapporto tra marchi e colore dipende anche dalla percezione della loro appropriatezza. Esempio: per Amazon figurano il nero — simbolo di professionalità — e l’arancione, che lo bilancia con la sua vitalità. Il risultato è un brand affidabile, pronto a consegnare col sorriso, come nel logotipo.
Microinterazioni
La UI non è un flusso unico e lineare — né per l’utente né per il progettista — ma scomponibile in numerosi passaggi, detti microinterazioni. Sono brevi azioni che richiedono contributi più manuali e condizionano l’esperienza complessiva. Ogni volta che sincronizzi i tuoi dati, cambi un’impostazione o effettui il login…
Sono ovunque, anche negli elettrodomestici. Un momento di dialogo silenzioso fra progettisti e utenti, che imparerai a tradurre nel giusto mix di atomi, bottoni e relative CTA (Call To Action), richiami espliciti all’azione.
Accessibility
Risultato complessivo della metodologia. La facilità di accesso (e quindi utilizzo) è alla base User Experience (UX), pertanto verrà approfondita quando parleremo dell’UX Designer. Tuttavia rappresenta forse il punto d’incontro più importante fra UI e UX, quindi ne accenneremo ora.
Un’interfaccia accessibile porta a tre risultati principali:
- Acquisizione di familiarità e competenza durante il primo contatto;
- Raggiungimento di obiettivi nel minor numero di passaggi. Scorrere molte pagine e cliccare troppe volte scoraggia l’utente e lo porta altrove;
- Richiamo per visite successive. Imparata una volta, la procedura deve dimostrarsi altrettanto — o più — facile anche dopo mesi.
Ripensiamo ad Amazon, il quale punta tutto sui primi secondi dall’accesso. Navigazione rapida, vendita rapida. Poche pagine, tanti articoli correlati e consigli.
Naturalmente, non è che l’inizio. Se desideri approfondire i principi di questa metodologia, ti diamo appuntamento nei prossimi articoli.
Ma non finisce qui. Per scoprire come si forma un UI Designer (e quanto guadagna!), non perderti il seguito di quest’analisi la prossima settimana!
That’s it! This is Digital Experience.
Se pensi anche tu che questo articolo sia una digital experience, lasciaci qualche 👏 claps 👏👏👏 e condividilo con la tua rete! 😊
TIDE è una community fatta da giovani esperti digital.
Hai una Digital Experience da raccontare? Proponi subito il tuo articolo, scrivendoci su thisisdigitalexperience@gmail.com
