6.6.1.1. Coerenza visiva e di comportamento¶

La coerenza di un’interfaccia, concretizzata attraverso standard visuali e di comportamento, fa sì che, se applicata correttamente, porti importanti benefici. In primo luogo, gli utenti utilizzano con più efficacia e facilità i percorsi che hanno già imparato a riconoscere. Potranno infatti prevedere i comportamenti del prodotto basandosi su un’esperienza pregressa. In secondo luogo, portano a una riduzione dei costi di produzione, attraverso il riuso di componenti e soluzioni di design e di codice sviluppato già pronti, che sono il risultato di discussioni e decisioni già prese e validate, favorendo anche una riduzione dei costi di supporto e assistenza agli utenti, poiché gli standard incrementano la facilità d’uso e di apprendimento in autonomia.

L’uso di componenti standard non basta però a costruire una buona interfaccia: gli standard rispondono a questioni relative a generali processi cognitivi e di percezione; essi devono essere considerati nel contesto di riferimento, che presuppone un’organizzazione logica e strutturale che può richiedere specifici comportamenti e scegliere percorsi dedicati a particolari bisogni dell’utente in quel contesto.

6.6.1.2. Lo stile¶

Lo stile visivo di una interfaccia è costituito da elementi variabili come la forma, il colore, la tipografia, l’applicazione di spazi coerenti e adatti tra tutti gli elementi e le eventuali variazioni di tutte queste caratteristiche dovute all’interazione con l’utente. Questi aspetti sono combinati insieme per creare una risposta emozionale, ovvero incidono anche su quei necessari aspetti di riconoscibilità che possono aumentare la confidenza con il servizio, e per dare solidità e coerenza all’impostazione funzionale della pagina, aiutando l’utente nella navigazione, nella ricerca e lettura delle informazioni e nella fruizione del servizio.

Lo stile è trasversale a tutti i componenti di una interfaccia: ognuno è costruito sulla base di una griglia, utilizzando ben definite combinazioni di colori, tipologie e dimensioni dei caratteri, spaziature, ombre, e così via.

6.7.2.1. Corpo del testo¶

Le dimensioni dei caratteri non devono essere utilizzate senza una logica, devono seguire una scala tipografica precisa e studiata appositamente per creare una gerarchia visiva.

La gerarchia serve a dare struttura ai contenuti per gestire al meglio la trasmissione di un messaggio e il suo impatto, e quando non viene utilizzata la comunicazione diventa meno efficace.

La dimensione del corpo del testo, con riferimento ad esempio al font Titillium Web, non può essere inferiore a 16px per uno schermo di dispositivo mobile, e inferiore a 18px per schermi più grandi.

Si possono utilizzare in casi particolari misure inferiori solo in caso di didascalie, note, o testi di secondaria importanza che per lunghezza o posizionamento nella pagina richiedano dimensioni ridotte.

6.7.2.2. Dimensionamento dei paragrafi¶

La lunghezza di un paragrafo che permetta una lettura confortevole del testo non dovrebbe superare i 75 caratteri. In caso di colonne multiple, la lunghezza può essere compresa tra 40 e 50 caratteri. Per testi a margine, la lunghezza è non dovrebbe essere inferiore ai 15 caratteri.

Un paragrafo di testo deve essere composto con allineamento a sinistra. Nei casi in cui si prevedono paragrafi a margine posti a sinistra del blocco di testo principale, il paragrafo può essere allineato a destra. L’allineamento giustificato e senza sillabazione è invece sempre da evitare per l’incongrua spaziatura delle parole e la minore leggibilità che comporta.

I paragrafi possono essere distinti applicando uno spazio verticale tra di essi o, in alternativa, usando una indentatura di misura pari a quella dell’interlinea.

L’interlinea (in inglese, leading), sia dei titoli che del corpo del testo, è calcolata tenendo conto di una immaginaria griglia di 8px, in modo da creare una sorta di “ritmo verticale” nella lettura.

6.7.2.3. Colore del testo¶

Il colore del testo deve essere tale da garantire un rapporto di contrasto minimo con lo sfondo di 4,5:1 (AA) come stabilito dalle specifiche di accessibilità.

6.7.2.4. Collegamenti¶

I collegamenti (link) ad altre aree del servizio o a siti esterni devono avere un elemento di distinguibilità rispetto al testo normale.

Pertanto, è buona norma mantenere una sottolineatura, specialmente se il link è inserito all’interno di un paragrafo. Alternativamente, si può utilizzare anche il grassetto.

6.7.3.1. Lo schema colore¶

La scelta dei colori è dettata dal materiale identitario dell’Ente o Agenzia (logo, stemma, gonfalone etc.) o comunque da elementi afferenti alla sua riconoscibilità.

In uno schema colore distinguiamo il colore base, che viene utilizzato per una percentuale maggiore rispetto agli altri colori, i colori secondari e i colori neutri (ad esempio grigi, bianco, nero).

Tra i colori secondari si dovranno definire:

• colori strettamente connessi al colore base

• un eventuale colore di risalto (chiamato accent color), utilizzato in misura minore poiché è associato a elementi che prevedono un’interazione, come pulsanti, elementi di controllo (sliders, radio, ecc.), link, campi di testo.

Si consiglia l’utilizzo di una palette costituita da non più di 5 tonalità, dove non più di 3 avranno un differente valore di colore (hue, in inglese).

La palette può essere:

• monocromatica, quando è costituita dal colore base e dalle sue variazioni in termini di saturazione e/o luminosità.

• policroma, ossia costituita da associazioni di colori con differente hue. Questo tipo di schema oltre al colore base e alle sue variazioni, comprende un colore che può essere scelto tra gli analoghi, complementari, triadici, ecc. del colore base, oppure scelto dalla gamma di colori appartenenti all’identità visiva.

6.7.3.2. La palette estesa¶

La palette può essere estesa, creando variazioni in termini di saturazione e luminosità dei colori scelti come “colore base”, da cui si possono generare tinte, ombre e toni.

Le tinte e le ombre consistono nell’aggiunta rispettivamente di bianco e di nero al colore di base, che significa variare i valori di saturazione (in inglese saturation, indicata con “S”) e luminosità (in inglese brightness, indicata con “B”).

Per esempio, dato un colore base con i valori H 93; S 100; B 50, si possono sottrarre 10 gradi di luminosità (B) per ottenere le variazioni più scure o aggiungere 10 gradi di luminosità (B) per quelle più chiare fino a un massimo di 80 gradi di luminosità.

Per ottenere le cosiddette “tinte” basta aumentare progressivamente di 4 gradi la luminosità (B) a partire da un valore di 80 e contemporaneamente diminuire la saturazione (S) di 15 gradi.

Per ottenere diversi toni è necessario diminuire contemporaneamente i valori di saturazione e luminosità di 10 gradi.

6.7.3.3. La palette delle Amministrazioni Centrali¶

Un esempio di schema cromatico costruito sui principi appena descritti è la palette realizzata con il colore base “Blu Italia” (codice esadecimale #0066CC).

Pensata per un design semplice e minimalista, è una palette costituita dalle variazioni del colore base, più le tinte neutre. Sono presenti anche colori che possiamo definire “utility colors”, ossia colori da utilizzare per i messaggi di feedback all’utente (errori o notifiche) o per la realizzazione di elementi grafici.

La palette del design UI Kit è piuttosto estesa: comprende molte variazioni in tinte, toni e ombre del colore base (il “Blu Italia”), e dei colori secondari e neutri, permettendo così una certa flessibilità di uso.

6.7.6.1. Pulsanti¶

Lo UI Kit contiene quattro tipologie di pulsanti, dal primary al quaternary, ordinati secondo una funzione gerarchica.

Tutte le azioni principali sono rappresentate dal pulsante “Primary”, a cui può essere associata una o più azioni secondarie attraverso l’uso degli altri pulsanti a disposizione.

6.7.6.2. Navigazione¶

I componenti che possiamo inserire all’interno della navigazione sono molteplici. Ad esempio, si riportano il componente “Tab” e il “Menu” per dispositivi mobili.

Nel kit sono costruite diverse varianti di “Tab” (controlli grafici di navigazione), sia le varianti per diverse dimensioni di schermo, sia per fondo chiaro e fondo scuro, con solo testo o solo icone, oppure con la presenta di entrambi.

È possibile vedere in figura il componente Tab con un esempio di applicazione nell’ambito di filtri di ricerca.

Il componente “Menu” mobile mostrato nella figura seguente ha alcune utili varianti: oltre alla differenza di sfondo, c’è anche una distinzione del menu in sezioni con o senza intestazione.

6.7.6.3. Data display¶

Nella categoria Data Display sono inseriti i componenti che hanno come funzionalità quella di mostrare informazioni in modo organizzato oppure evidenziato, come ad esempio gli “accordion” (elementi a scomparsa) o i “callout” (elementi richiamabili/attivabili con un click).

6.7.6.4. Data entry¶

Esempi di componenti appartenenti alla categoria Data entry sono i campi di tipo “Input” che si utilizzano per costruire form. Il componente è costruito in modo da poter attivare o disattivare i diversi status: normale, avvertimento, errore, successo.

L’etichetta del campo è indicativa di cosa va inserito. All’attivazione del campo con il cursore, l’etichetta si sposta in alto.

Nel componente si possono attivare oltre gli stati di feedback, gestendo colori e icone, anche i relativi messaggi.