Quante volte abbiamo sentito queste due sigle UX e UI? Si tratta di concetti attinenti alla progettazione di interfacce software, a quella dei siti web e a tutti gli svariati campi che hanno a che fare con l’interazione degli utenti con dei prodotti. Ma nel dettaglio, cosa sono esattamente?

UX Design sta per User Experience Design ed è una disciplina che studia e progetta l’esperienza degli utenti e le loro sensazioni quando usano o guardano un determinato prodotto, interfaccia web, brand ecc. La UX Design, tramite determinate tecniche, studia come far vivere all’utente un’esperienza positiva, accessibile e fruibile in modo semplice.

UI Design invece significa User Interface Design e indica la progettazione o disegno di un’interfaccia per l’utente affinché possa relazionarsi con il prodotto.

I professionisti UX e UI lavorano in successione su un progetto web: lo UI Designer si occupa di disegnare le interfacce web invece lo UX Designer ne fa il test e corregge gli elementi, i colori ecc. affinché siano facili da usare e accessibili a tutti.

Da queste brevi considerazioni emerge la differenza di competenza e ruolo delle due figure professionali, entrambe parimenti essenziali per la riuscita di un buon prodotto digitale.
In questo articolo elencherò alcune best practices base che andrebbero rispettate affinché un’interfaccia web sia funzionale e facile da usare.

Semplicità: cerca di rispettare gli standard

Negli ultimi anni si sono affermati degli elementi standard nei siti web: se un elemento è ricorrente e gli utenti lo usano con successo non cambiarlo! Un menu “hamburger”, ad esempio, spesso è realizzato allo stesso modo su vari siti, per cui l’utente è abituato a quella interfaccia. In tali casi è opportuno conservare lo standard già esistente: sarebbe inutile reinventare la ruota! (o meglio nel nostro caso cambiare il design). Quando sappiamo che un elemento grafico è realizzato a regola d’arte possiamo riutilizzarlo senza reinventare il design da capo.
Inoltre è necessario rimanere in standard anche sul posizionamento di esso nell’interfaccia: il menu principale del sito dovrebbe stare in alto a destra o a sinistra, non metterlo mai messo in basso!

Elementi standard vs creatività

La creatività spesso porta i designers in un vicolo cieco: progettano interfacce molto personalizzate e particolari, con i colori del brand del cliente, con elementi che si muovono, cornici e bordi particolari ecc. Attenzione a non essere troppo creativi, però, altrimenti si ripropone il problema di prima: l’utente non riesce a trovare agevolmente un elemento perché ad esempio rappresentato da qualcosa che non si associa alla funzionalità nella comune esperienza. Pensa da utente e non da grafico o UI Designer.

Conosci il tuo pubblico

L’interfaccia a chi è destinata? Un pubblico giovane, adulto o anziano? Sono domande fondamentali per la progettazione di un’interfaccia perché alcuni utenti non riescono ad identificare subito gli elementi, se questi sono particolari o fuori standard. Se il pubblico è anziano bisogna prestare maggiore attenzione a garantire un’adeguata dimensione dei caratteri. E’ importante anche la distribuzione e l’uso dei colori. Se abbiamo un target di daltonici vedranno poco e niente della nostra tavolozza di colori particolari e creativi.

Gerarchia visuale

Gli elementi di un’interfaccia web andrebbero disposti in modo gerarchico: in altre parole, se voglio dare importanza a un titolo, lo inserirò grande al centro dello schermo. Gli elementi che seguiranno quel titolo saranno mano mano più piccoli e divisi nella griglia e quindi attireranno meno attenzione. Si dovrebbe creare appunto una gerarchia di importanza dei contenuti disposti su una griglia base.

Guida gli utenti allo scopo

La pagina da creare deve essere progettata in base allo scopo per cui è stata creata. Un esempio chiarirà il concetto.
Se la tua pagina ha l’obiettivo di far iscrivere gli utenti ad un servizio, la proposta di iscrizione deve comparire già all’inizio e mano mano che gli utenti scendono nella pagina, essa si arricchisce progressivamente fornendo informazioni e ricordando di iscriversi. Arrivati in fondo si dovrebbe posizionare la form di iscrizione con un pulsante molto grande, magari con effetto ingrandimento per ricordare ancora la call to action. E’ importante evidenziare le call to action e lo scopo di quella pagina in modo che gli utenti possano individuare che cosa fare su una pagina web a colpo d’occhio.

Siti fruibili anche da mobile

La progettazione delle interfacce web è essenziale da mobile, se si considera che al giorno d’oggi la consultazione dei siti e in generale dei prodotti digitali avviene per lo più da mobile. Bisogna assicurare una perfetta visualizzazione dallo smartphone, evitando elementi sovrapposti e in generale tutte le incongruenze che impediscono una semplice visualizzazione della pagina. Fai un test della visualizzazione anche su vari browser degli smartphone in modo da evitare errori o non fruizione dei contenuti da parte degli utenti.

Rimuovi le istruzioni ridondanti e non necessarie

Mi è capitato di vedere delle form con i campi username e password con i placeholder all’interno e sopra la scritta “Per entrare inserisci username e password”: in questo caso il testo è una ridondanza perchè si intuisce subito che in quel caso bisogna inserire delle credenziali anche dalle scritte placeholder. Questo è un principio fondamentale per evitare di spiegare cose semplicissime e per ottimizzare gli spazi.

Bilancia la visuale

In un’interfaccia web con vari elementi da due o più colonne si dovrebbe mantenere la disposizione degli elementi sempre bilanciata: se ci sono n elementi nella prima colonna, ci devono essere n elementi anche nella seconda.

Gestione degli elenchi semplice

La visualizzazione di dati e filtri deve essere semplificata soprattutto negli e-commerce: gli elenchi a discesa, le categorie ecc. non dovrebbero contenere una grande quantità di informazioni ma solo quelle fondamentali per eseguire una scrematura dei risultati e dirigere quindi l’utente sul prodotto desiderato.

Sicuramente il risultato dipende molto dalle funzionalità specifiche della pagina ma seguire delle best practices già è una buona base di partenza.