Nello scorso articolo sulla prima parte dell’ UI Design ho introdotto i principi base di questa disciplina. Non volendo creare un post troppo lungo ho inserito solo i primi tre principi, ovvero l’equilibrio, il ritmo e la dominanza. A questi tre principi base se ne devono aggiungere altri quattro: la prossimità, l’allineamento, il contrasto e la gerarchia.
Gli altri principi dell’UI Design
Prossimità, Allineamento, Contrasto e Gerarchia
4) Partendo dalla prossimità si può subito dire che è strettamente correlata allo spazio.
Come per l’equilibrio, anche qui lo spazio risulta determinante.
Con prossimità si intende la distanza tra gli elementi usata per evidenziarne le relazioni.
Pensate ad una serie di elementi che fanno parte dello stesso gruppo per funzionalità. Il fatto che siano tutti alla stessa distanza fa si che siano percepiti uniti. Questo principio è così potente che funziona anche senza la presenza del colore.
Quando abbiamo bisogno di suddividere o raggruppare i nostri contenuti, facciamo buon uso dello spazio di prossimità.
5) Andando avanti troviamo l’allineamento, il principio che viene infranto più spesso dai giovani graphic designer.
Quando si parla di allineamento il più delle volte si fa riferimento ad una linea verticale immaginaria. Questa linea ci aiuta a sistemare i contenuti tutti dalla stessa posizione, fondamentale soprattutto quando abbiamo del testo da inserire.
I vari allineamenti possono essere a bandiera destra, sinistra, allineamento centrato e a pacchetto.
Senza giri di parole, il 90% delle volte dovrete usare la bandiera a sinistra, perché è il modo che permette una leggibilità migliore, da sinistra a destra con una omogeneità degli spazi tra le parole (è anche il modo con cui normalmente scriviamo).
L’allineamento non funziona solo con il testo ma anche con altri elementi. In un sito internet molto spesso i contenuti sono allineati ad una griglia.
Questo espediente aiuta ad organizzare meglio il tutto, rendendo il nostro sito più pulito e facile da consultare.
6) Il sesto punto riguarda il contrasto. Quest’ultimo è il principio con cui riusciamo a creare dinamismo all’interno del nostro lavoro.
Ma in che modo possiamo creare contrasto?
In due modi: attraverso il contrasto di dimensione e attraverso il contrasto cromatico.
Dico subito che il contrasto cromatico è più forte di quello di dimensione e ovviamente si possono utilizzare entrambi.
Il dinamismo è fondamentale per non creare un’esperienza utente piatta. Il contrasto lo si può immaginare come un segnale stradale che ci indica dove andare.
Pensate ad un sito che non presenta differenze di colore o dimensione tra i vari elementi.
Cosa dovrebbe fare l’utente? Non si sentirebbe perso?
Mettere un bottone (call to action = cta) di un bel colore vibrante rispetto allo sfondo in uso aiuterebbe sicuramente l’utente a capire il percorso che deve compiere.
In questo caso potremmo giocare anche con la dominanza, andando a creare uno spazio negativo maggiore intorno alla nostra cta.
7) Il settimo punto è la gerarchia.
Questo principio è strettamente correlato al contrasto.
Come posso dire cosa è più importante tra un elemento e un altro? Utilizzando il contrasto e la disposizione nello spazio.
In un impaginato ci insegnano subito che le cose più importanti devono essere viste per prima. Per questo le dobbiamo fare più grandi, in grassetto e posizionate sopra. Questo principio si vede applicato benissimo nelle pagine pubblicitarie, dove la headline è il testo più importante da visualizzare.
La gerarchia ci aiuta a ordinare le informazioni per importanza. Facciamone buon uso.
A parer mio questi sono i sette principi che bisogna imparare fin da subito per eccellere nell’arte dell’UI Design. Come tutte le regole anche queste possono essere trasgredite per un fine specifico, ma lo si può fare solo nel momento in cui le abbiamo fatte nostre.
Qui di seguito metto la schermata di un sito costruito seguendo queste poche regole. L’above the fold (ciò che si vede quando entriamo in un sito) così costruito risulta armonico e bilanciato, grazie all’applicazione dell’allineamento, della prossimità, del contrasto, della gerarchia e della dominanza.
Come detto nella prima parte, bisogna imparare a togliere più che a mettere, organizzando gli elementi per aiutare l’utente a capire dove può andare e cosa può fare nel nostro sito.
Se avete dubbi o considerazioni fatemelo sapere nei commenti.
A presto!
