Semplici trucchi per migliorare il design delle interfacce

In universo sempre più ricco di alternative per l'utente, il design di un'interfaccia d'impatto diventa fondamentale per vincere la corsa con i competitor. Si tratti di un'applicazione oppure di un sito mobile, proporre un'estetica scontata, poco attraente, di difficile memorizzazione o uso, può infatti spingere il navigatore ad abbandonare il proprio servizio per dirigersi verso i caldi lidi della concorrenza. Nella maggior parte dei casi, fatta ovviamente eccezione per risultati grafici davvero drammatici, non serve riprogettare l'interfaccia ex novo per ottenere l'effetto sperato. Possono bastare dei piccoli trucchi che, per quanto contenuti, riescono a fare la differenza agli occhi dei potenziali clienti.

Naturalmente, ogni progetto grafico ha la sua identità, che deriva dal messaggio che il brand vuole lanciare all'utente, dal target di riferimento e da molti altri elementi. La scelta di un colore, di un font o di qualsiasi altro elemento grafico, di conseguenza, non può seguire leggi fisse, ma vede sempre un elemento personale.

Gerarchie con colori e stili

Quando si progetta un'interfaccia grafica, si ha spesso a che fare con l'organizzazione gerarchica degli elementi: si tratti di box, testi o immagini, è necessario differenziare questi elementi per aiutare l'utente a comprendere la progressione della navigazione. Molto spesso, però, l'eccesso di differenziazione può rendere il design pesante, poco omogeneo, nonché meno gradevole rispetto al previsto. Eppure, nella maggior parte dei casi è sufficiente agire su colori e stili, anziché sulle grandezze, per ottenere un risultato gradevole e comprensibile.

Si prenda come esempio il testo contenuto in un piccolo box d'anteprima: di norma, si sceglie una grandezza per il titolo, diminuendo progressivamente la dimensione del corpo del testo. Così facendo, però, si crea una disomogeneità che può influire in modo poco elegante sulla distribuzione degli spazi stessi del box, alternando anche l'equilibrio dello spazio negativo.

Più indicato è invece scegliere titolo e testo della stessa dimensione e della medesima famiglia di caratteri, modificando il primo con un semplice stile - un grassetto, ad esempio - o cambiandone il colore. Per far spiccare ulteriormente il riquadro, si può scegliere di attribuire al titolo un nero pieno, impostando invece un grigio lievemente più chiaro per il corpo del paragrafo.

Attenzione al grigio e al bianco

Grigio e bianco sono, con molta probabilità, i colori maggiormente scelti per evidenziare testi, pulsanti e altri elementi grafici su interfacce dallo sfondo colorato. Per quanto questa consuetudine sia diffusa, non sempre si rivela efficace per garantire omogeneità al proprio design.

Per quanto riguarda il grigio, bisogna tenere presente come questa tinta non abbia grandi chances di risaltare su sfondi colorati, poiché tende a mescolarsi con il background stesso. Più efficace, invece, è la scelta del tono su tono o, ancora, di un colore a contrasto. Discorso praticamente inverso è quello del bianco che, su molti sfondi anche in sfumatura, rischia di emergere troppo. E, fatto non da poco per i display dei più svariati dispositivi, su background scuri tende a incentivare un fastidioso effetto persistenza alla vista.

In questo caso, è sufficiente diminuire leggermente l'opacità del bianco stesso, anche in modo poco percettibile: il risultato sarà comunque pieno, ma privo dei disturbi citati.

Meno bordi

Quando si ha a che fare con box, tabelle o campi da compilare - si pensi al form per l'iscrizione a una newsletter oppure a una lista contatti per la propria applicazione di messaggistica - si è soliti evidenziare ogni singolo campo con un importante bordo o, ancora, a separare le singole righe delle liste con delle marcate linee. Questa scelta, tuttavia, appesantisce notevolmente sia la vista che l'interfaccia.

Meglio allora agire con i colori e le ombreggiature. Per una lista di contatti, ad esempio, non vi è bisogno di marcare la separazione delle righe: è sufficiente attribuire un colore per evidenziare le singole entrate al passaggio del mouse. Per i campi di un form, invece, i bordi del campo stesso potranno essere resi riconoscibili da una leggera ombreggiatura, anziché da un tratto opprimente magari spesso diversi pixel. Lo stesso vale anche per tutti gli altri elementi della grafica: si pensi a una piccola finestrella, una sorta di pop-up, che avvisa l'utente di un errore, di una nuova funzione e via dicendo.

Il box in questione non dovrà essere circondato da pesanti bordi, ma solo da una delicata ombra.

Icone racchiuse

Non capita di rado di dover inserire, all'interno del proprio design, una lista di icone per suggerire all'utente le varie funzioni disponibili. Si pensi, ad esempio, a un wizard iniziale per comprendere l'uso di un determinato servizio o, ancora, a una lista di voci all'interno di un menu ad hamburger espandibile.

Associare la singola icona al relativo testo, senza grandi elementi di separazione, non è molto efficace a livello di memorizzazione, soprattutto se l'icona e il testo stessi condividono la medesima tinta. Più indicato, invece, è rimpicciolire i simboli e racchiuderli all'interno di una forma a contrasto, quali un cerchio o un quadrato: ad esempio, si può impostare un azzurro vivace come colore del cerchio, lasciando bianca l'icona.