User Interfaces Design

Interfacce Utente - Organizzazione di Contenuti

Carmine Dodaro - Università della Calabria

Organizzazione dei Contenuti

Organizzazione di Contenuti

I contenuti devono essere organizzati in modo coerente con le aspettative degli utenti, seguendo due principi di base:

• Le categorie di contenuti devono essere distinte senza sovrapposizioni.
• L’informazione contenuta nel software deve essere complessivamente completa, quindi deve contenere tutto ciò che l’utente si aspetta di trovare.

Organizzazione del Contenuto

L’organizzazione dei contenuti è utile quando si devono mostrare grosse quantità di dati (ad esempio in tabelle), oppure nel caso di ricerche, filtri, navigazione, ordinamento, ecc. I metodi principali sono:

• Alfabeto: organizzare liste, nomi, ecc. in ordine alfabetico (da A a Z o da Z ad A). Può anche contenere numeri se necessario, dove i numeri precedono le lettere. Utile per il default di liste o menu di elementi.
• Numerico: ordine in base a qualche criterio numerico (prezzo, dimensione, voto, ecc.).
• Tempo: ordine temporale, quindi data, orario, o durata. Include anche sequenze di azioni.
• Posizione: ordine in base a criteri geografici o spaziali. Include organizzazioni gerarchiche (ad esempio stato, regione, città, ecc.) e sia per distanza da un punto di interesse.
• Gerarchico: ordine in base a un criterio gerarchico con elementi che hanno una relazione genitore-figli. Ad esempio, i file sono spesso mostrati in ordine gerarchico.
• Categorie o Tipologia: ordine in base a categorie o tipologie in comune per un insieme di elementi. Ad esempio, organizzazione dei libri per genere.

Organizzazione di Obiettivi e Workflow

Nel caso di interfacce il cui scopo è raggiungere un obiettivo oppure in cui si debba seguire un flusso di lavoro è opportuno seguire delle linee guida generali:

• Gli elementi che sono utilizzati spesso devono essere chiaramente visibili ed evidenziati.
• Gli elementi che sono utilizzati raramente possono essere nascosti o accessibili solo navigando. Rientrano tra questi elementi le impostazioni o i menu di aiuto.
• Dividere i processi più onerosi in sequenze di passi. Ad esempio, si può pensare a un sistema tipo wizard per andare avanti e indietro, con una chiara indicazione all’utente sullo stato attuale. Inoltre, è sempre opportuno considerare il livello degli utenti, in caso di utenti esperti potrebbe essere più efficiente lasciare autonomia, mentre per i nuovi utenti è utile aggiungere sistemi di aiuto.

Struttura dei testi

Struttura dei Testi

Linee guida per la gestione dei testi:

• È importante effettuare un lavoro di sintesi, ma in alcuni casi è inevitabile avere testi lunghi.
• Chi legge è in cerca di riferimenti: se si cerca un prodotto non è detto che si vogliano tutte le informazioni, magari si vuole sapere solo il prezzo o la disponibilità.
• Gli utenti spesso leggono usando il cosiddetto scanning. In questo caso gli utenti cercano titoli, parole in grassetto o in corsivo, o testo colorato. Se si evidenziano le parole chiave si semplifica questo processo.
• Il testo va diviso in paragrafi brevi e omogenei con un solo concetto per paragrafo.
• Le persone notano i testi scritti in forma di domanda/risposta, gli elenchi puntati/numerati e altre forme grafiche che permettono al testo di emergere.

Contenuto dei Testi

Il contenuto dei testi è importante quanto la struttura (UX Writing):

• Usare parole e verbi semplici, possibilmente nella forma attiva. Non mescolate pronomi possessivi diversi nello stesso contesto.
• Evitate frasi o termini non adatti agli utenti della vostra interfaccia, ad esempio quelli sensibili.
• Essere originali non è sempre la scelta giusta. Gli utenti sono abituati a uno standard di parole, quindi è importante non forzarli a imparare nuovi elementi per usare la nuova interfaccia.
• Evitate parole troppo tecniche o non di uso comune.
• Cercate di usare parole che siano politicamente corrette ed evitate di utilizzare il genere se non è necessario.
• Anche cambiare poche parole può avere un grosso impatto.

Google I/O 2017. Cambiare “Book a room” in “Check availability” ha portato a un aumento del 17% del coinvolgimento.

Schermate

Schermate

Tipicamente possiamo osservare 4 diversi tipologie di schermate:

• Riepilogo: Mostrano una lista di elementi.
• Focus: Mostrano un singolo elemento, come una mappa, un libro, un video, ecc.
• Creazione: Permettono di creare qualcosa.
• Azione: Facilitano l’esecuzione di un task.

Schermate di riepilogo

Alcune considerazioni da tenere a mente quando si considera il design di queste schermate:

• Qual è la quantità di dati da mostrare?
• Qual è lo spazio a disposizione per mostrare il contenuto?
• L’organizzazione è gerarchica o diretta?
• Come sono ordinate le informazioni? L’utente può cambiare in modo arbitrario l’ordine?
• L’utente può ricercare all’interno del contenuto o filtrare il contenuto?
• Che tipo di informazioni devono essere mostrare con ogni elemento?

Schermate Focus

In questa tipologia di schermate è importante che il contenuto sia in risalto, possono essere presenti dei pulsanti di navigazione ma devono essere meno evidenti.

Riproduzione a tutto schermo su youtube:

• Il focus è sul video.
• I pulsanti in alto e in basso sono visibili solo muovendo il mouse e spariscono dopo qualche secondo.
• I pulsanti non interferiscono con la fruizione del video.

Schermate di creazione

Queste schermate permettono di creare o aggiornare oggetti digitali. Ad esempio, questa tipologia di schermate sono comuni nell’ambito degli editor di testo o di immagini, per lo sviluppo del codice, ecc. In genere abbiamo due tipi di architetture:

• Uno spazio di lavoro centrale con tanti strumenti intorno. In generale, lo spazio di lavoro centrale consiste in uno spazio bianco molto grande dove l’utente può scrivere o modificare oggetti esistenti. Gli strumenti sono rappresentati da tante icone.
• Workspaces, cioè finestre che contengono diversi documenti e che permettono all’utente di lavorare in parallelo. Possono essere implementate con tab, pannelli, split window, finestre separate, ecc.

Schermate di azione

Questa tipologia di schermate comprende le interfacce che servono per compiere un’azione. Le azioni possono essere diverso tipo:

• registrarsi,
• fare un acquisto,
• stampare,
• upload/download di elementi,
• aggiornamento delle impostazioni,
• ecc.

Per queste schermate si utilizzano spesso le Form.

Navigazione

Navigare tra i contenuti

Alcuni tipi di navigazione:

• Navigazione globale
• Navigazione di aspetti non legati all’applicazione
• Navigazione per contenuto correlato

​

Un aspetto importante della realizzazione di interfacce grafiche è nella navigazione tra i contenuti:

• Come fanno gli utenti a conoscere la loro posizione all’interno del sistema?
• Quale sono le prossime schermate che possono visitare da quella attuale?
• Come possono arrivare a tali schermate?

Lo scopo della navigazione è di aiutare gli utenti a conoscere e capire le informazioni relative allo spazio in cui si trovano.

​

Navigazione globale

È presente nella maggioranza di siti e applicazioni. Di solito ha la forma di menu, tab, barre laterali, ecc.

​

Navigazione di aspetti non legati all’applicazione

In molte applicazioni è presente un sistema di navigazione per alcuni aspetti che non sono propriamente legati alla fruizione dell’applicazione in sé. Un tipico esempio è la navigazione di aspetti legati alle informazioni personali degli utenti o alle impostazioni.

​

​

Navigazione per contenuto correlato

Collegamenti ad altre schermate che sono concettualmente vicine al contenuto attuale. Nel momento in cui l’utente interagisce con l’applicazione, questi collegamenti presentano delle opzioni che possono essere immediatamente rilevanti per l’utente.

Un esempio tipico è la sezione “Articoli correlati” su siti/applicazioni di informazione oppure “Acquisti simili” su siti/applicazioni di e-commerce.

Inoltre, è possibile usare i tag, cioè delle parole chiave, scelte dall’utente oppure inserite nel sistema, che permettono di visualizzare contenuti correlati per argomento.

​

​

Linee guida per la progettazione della navigazione

La navigazione di un’applicazione deve essere progettata accuratamente: quali opzioni di navigazione mostrare, come chiamarle, quando e dove viene mostrata la navigazione all’interno dell’UI, ecc.

• Separare la navigazione dall’interfaccia vera e propria. In generale, ci sono diverse convenzioni su dove inserire la navigazione, ad esempio la navigazione globale è in genere in alto o su un lato.
• Considerare il carico cognitivo. Navigare un sito o un’applicazione richiede uno sforzo di adattamento (anche se minimo), in generale se ci sono troppe opzioni l’utente potrebbe avere difficoltà a orientarsi. Inoltre, la pagina che l’utente vuole visitare deve caricarsi il più velocemente possibile.
• Mantenere brevi le distanze. Domandarsi sempre quante azioni (click, tap, ecc.) sono necessarie per raggiungere un punto dell’applicazione da un altro punto.
• Mantenere nella barra di navigazione globale gli elementi più utilizzati. Gli strumenti utilizzati di meno possono essere organizzati in aree.
• Se possibile, mantenere le azioni semplici e dipendenti tra di loro (ad esempio compilare una form di registrazione) in un’unica pagina, senza sottolivelli.

​

​

Modelli di navigazione

Esistono diversi modelli di navigazione:

• Modello a hub
• Modello fortemente connesso
• Modello gerarchico o ad albero
• Modello a step
• Modello piramidale
• Navigazione flat o assente

​

​

Modello a hub

In questo modello è presente una schermata centrale (hub), ad esempio l’home screen, e tante piccole schermate collegate a questa.

L’utente:

• interagisce con la schermata principale;
• viene reindirizzato alle schermate secondarie per svolgere l’azione specifica;
• quando ha terminato, torna indietro all’hub.

​

​

Hub

Pagina

3

Pagina

4

Pagina

1

Pagina

2

Modello fortemente connesso

In questo modello ogni schermata è collegata a tutte le altre. Può essere presente una pagina iniziale, ma ogni pagina ha un collegamento a tutte le altre. Ad esempio, perché esiste una navigazione globale che permette di accedere a tutte le pagine.

Pagina

3

Pagina

4

Pagina

1

Pagina

2

Modello gerarchico o ad albero

In questo modello esiste una gerarchia di schermate, partendo da una schermata home (o radice) da cui si possono raggiungere le sottocategorie.

Home

Categoria

1

Categoria

2

Categoria

3

1a

1a

3a

2a

3a

3b

Modello a step

In questo modello esiste una sequenza di schermate, dove si può raggiungere la precedente e la successiva. È il caso tipico delle presentazioni, dei wizard o dei questionari.

1

2

3

4

Modello piramidale

È una variante del modello a step dove esiste una schermata principale a cui ogni pagina si collega direttamente. È tipico di alcuni siti internet in cui ci sono delle storie, come Facebook o Instagram.

1

2

3

4

Hub

Navigazione flat o assente

È importante sottolineare che, sebbene la navigazione sia spesso uno strumento utile, non è sempre richiesta.

Ci sono delle applicazioni, come excel, eclipse, photoshop, ecc. dove gli utenti hanno una grossa varietà di strumenti subito visibili e utilizzabili. In questo caso non c’è una vera e propria navigazione all’interno dell’interfaccia, o è limitata ad aspetti di configurazione.

Regole da seguire

• Quando si realizzano applicazioni che hanno tanti utenti occasionali e poco frequenti, utilizzare pochi punti di accesso, in modo da rendere chiaro il punto di partenza.
• Quando avete una pagina il cui scopo è di essere solo una tabella di contenuti, utilizzare una lista di collegamenti senza altri contenuti particolari (es. forum di discussione o https://www.craigslist.org).
• Utilizzare le finestre modali (schermate senza navigazione con la possibilità di compiere azioni specifiche, es. conferma di qualcosa, compilare dei brevi campi, ecc.) per le azioni brevi di un’azione più complessa, oppure per mostrare messaggi di errore. Ad esempio, una finestra modale potrebbe essere utile per gestire un pagamento su paypal durante l’acquisto di un prodotto o per richiedere l’inserimento di username e password per una qualche azione.
• Permettere agli utenti di accedere velocemente (ad esempio salvando dei collegamenti) a pagine o stati particolari dell’applicazione, soprattutto quando è molto complesso raggiungere lo stesso punto.
• Mostrare sempre una via d’uscita chiara che permetta di spostarsi indietro o in una schermata nota.
• Mostrare un qualche indicatore del progresso per le azioni più complesse, soprattutto in caso di navigazione a step.
• Utilizzare delle animazioni per le transizioni da una schermata all’altra, in modo da rendere naturale il passaggio.

Esempio Sidebar

• Usare il logo.
• Aggiungere le icone.
• Rendere chiaro qual è la schermata corrente.
• Si possono differenziare gli elementi in gruppi.
• Collassare gli elementi per schermate piccole con tooltip.

Source: https://getbootstrap.com/docs/5.0/examples/sidebars/

Layout

Layout

Per layout si intende la disposizione degli elementi all’interno della schermata.

Gli elementi principali di un layout sono:

• Gerarchia visiva: i contenuti più importanti dovrebbero essere quelli più visibili e quelli meno importanti i meno visibili. In generale, gli utenti dovrebbero capire la struttura informativa dal layout.
• Flusso visivo: gli utenti visualizzano i contenuti con una tecnica di scanning. È importante guidare gli utenti a osservare i punti più importanti di una pagina (call to action).
• Display dinamici: in genere si deve tenere in considerazione che i dispositivi da cui si potrebbe utilizzare un’applicazione, o specialmente un sito, possono avere dimensioni diverse dello schermo.

Gerarchia visiva

Cosa fa apparire un contenuto come più importante di un altro?

Dimensione

Gerarchia visiva

Cosa fa apparire un contenuto come più importante di un altro?

Colori (sia degli elementi che dello sfondo)

Gerarchia visiva

Cosa fa apparire un contenuto come più importante di un altro?

Densità

Layout e psicologia

Alcuni principi Gestalt:

• Prossimità: gli elementi vicini tra di loro sono associati.
• Similarità: gli oggetti che hanno forma, dimensione o colore simili sono percepiti come legati.
• Continuità e Completamento: il cervello tende a seguire le linee e le curve formate dall’allineamento degli elementi e a completare linee e forme anche se non sono esplicitamente disegnate.

Cards

Un elemento di layout molto diffuso consiste nelle cards.

Sono molto utili per separare contenuti eterogenei, per mostrare notizie, interazioni social, foto o video, ecc.

Cards

Regole generali:

• La card dovrebbe includere solo informazioni importanti, piuttosto che tutti i dettagli.
• È opportuno separare visivamente i vari elementi grafici.
• Evitare i link all’interno.
• Differenziare esteticamente i pulsanti.
• Non utilizzare separatori per gli elementi.

Consigli estetici:

• Usare i bordi arrotondati.
• Aggiungere un bordo leggero oppure una leggera ombra.
• Lasciare ampi spazi bianchi, dove per spazio bianco si intende uno spazio senza contenuto.

Stili ed estetica

Stili ed estetica

La gradevolezza estetica ha un ruolo cruciale nel successo di un’applicazione o di un prodotto. Un buona interfaccia grafica deve adottare degli stili e dei parametri estetici appropriati.

Punti cruciali:

• Il design degli elementi permette di comunicare l’informazione corretta?
• L’utente è in grado di capire le azioni che può compiere all’interno di una schermata?
• Gli oggetti si comportano per come sembrano?
• Gli elementi visivi sono consistenti? Le stesse icone permettono di compiere le stesse operazioni? La lingua che si utilizza è uniforme?
• Gli elementi sono allineati tra di loro? Il testo è formattato in modo uniforme?
• I colori sono utilizzati in modo appropriato?

Colori

I colori sono molto importanti in una qualsiasi interfaccia grafica, perché sono uno degli elementi percepiti immediatamente dall’utente. Alcune regole di base:

• Il testo chiaro va su sfondo scuro e viceversa.
• Evitare di riferirsi ai colori per compiere delle azioni (es. clicca sul pulsante rosso). In caso che si voglia utilizzare il colore per evidenziare qualcosa, è buona norma utilizzare anche una forma diversa o un font diverso, per agevolare le persone che non riescono a distinguere i colori.
• Alcune combinazioni di colori andrebbero evitate (es. perché affaticano la vista).
• I colori sono spesso utili per evocare sensazioni, ma bisogna fare attenzione perché lo stesso colore può indicare cose diverse in culture diverse.
• La “dark mode” è spesso più indicata per leggere a lungo, ma è meno indicata per la stampa di contenuto.
• Un alto contrasto evoca tensione, forza, coraggio. Un basso contrasto evoca calma.
• Una saturazione più alta evoca energia e brillantezza, ma allo stesso tempo affatica la vista.

Una guida dal mondo android: https://material.io/design/color/the-color-system.html

​

Schema di colori

Si possono utilizzare diversi schemi di colori:

• Monocromatico, è uno schema semplice, perché utilizza un solo colore con diverse gradazioni e quindi riduce la difficoltà della scelta e dona un aspetto bilanciato all’applicazione.
• Colori analoghi, è uno schema che prevede l’uso di colori simili tra loro e permette di donare un aspetto di calma e una visualizzazione piacevole.
• Colori complementari, è uno schema che prevede l’uso di due colori distanti tra loro e permette di dare enfasi a un particolare oggetto.
• Colori complementari divisi, è simile allo schema complementare ma usa tre colori.
• Schema a triade, si usano tre colori equidistanti.
• Schema a rettangolo o “tetradico”, si usano quattro colori disposti in coppie complementari.

Per la composizione dei colori useremo il concetto di Hue Saturation Value (HSV), tradotto come tonalità, saturazione e valore. Spesso è anche chiamato Hue Saturation Brightness (HSB), tradotto come tonalità, saturazione e luminosità. Inoltre, faremo riferimento alla ruota del colore (color wheel in inglese).

Link utili:

• https://color.adobe.com/create/color-wheel
• https://www.canva.com/colors/color-wheel

Schema monocromatico

Lo schema monocromatico prevede l’uso di un unico colore con diverse variazioni. Suggerimenti:

• Cercare “colour picker” su google.
• Selezionare il colore che si desidera.
• Cambiare l’ultimo valore di HSV (la luminosità) per ottenere diverse gradazioni del colore scelto.
• Selezionate 3 diverse gradazioni distribuendo l’uso nell’applicazione in modo che un colore appaia nel 60% dell’interfaccia, il secondo nel 30% e il terzo nel 10%.

​

​

​

HSV(217,73,96)

HSV(217,73,46)

HSV(217,73,16)

Schema monocromatico: esempio

Primo colore: 60%

Secondo colore: 30%

Terzo colore: 10%

Colori analoghi

I colori analoghi sono gruppi di tre colori vicini nella ruota del colore. Suggerimenti:

• Cercare “colour picker” su google.
• Selezionare il colore che si desidera.
• Cambiare il primo valore di HSV (la tonalità) di -30 e +30 per ottenere colori analoghi.

​

​

HSV(187,72,96)

HSV(217,72,96)

HSV(247,72,96)

Colori analoghi: esempio

Colori complementari

I colori complementari sono gruppi di due colori opposti nella ruota del colore. Suggerimenti:

• Cercare “colour picker” su google.
• Selezionare il colore che si desidera.
• Cambiare il primo valore di HSV (la tonalità) di -180 o di +180 per ottenere il colore complementare.
• Si può regolare la luminosità per creare versioni dark/light del colore.

​

​

HSV(37,72,96)

HSV(217,72,96)

Colori complementari: esempio

​

Colore principale HSV(217,72,96): sfondo del pulsante Visualizza

Colore principale dark HSV(217,72,36): testo header

Colore principale “medio” HSV(217,72,56): colore testo

Colore opposto HSV(37,72,96): sfondo dell’immagine

Colore opposto dark HSV(36,72,36): bordi e testo del pulsante Scarica

​

Colori complementari divisi

Questo schema è simile a quello dei colori complementari, dove il colore opposto viene diviso ulteriormente in due colori. Suggerimenti:

• Cercare “colour picker” su google.
• Selezionare il colore che si desidera.
• Cambiare il primo valore di HSV (la tonalità) di -180 o di +180 per ottenere il colore complementare.
• Cambiare il primo valore di HSV (la tonalità) di -30 e +30 al colore complementare per ottenere due altri due colori.

​

HSV(7,72,96)

HSV(217,72,96)

HSV(67,72,96)

Colori complementari divisi: esempio

Schema a triade

Questo schema è una variante dei colori complementari divisi, dove però i colori sono distribuiti equamente nella ruota dei colori. È preferibile usare un colore dominante e gli altri due per dare enfasi a qualcosa. Suggerimenti:

• Cercare “colour picker” su google.
• Selezionare il colore che si desidera.
• Cambiare il primo valore di HSV (la tonalità) di -120 e di +120 per ottenere altri due colori.
• Si può anche cambiare l’ultimo valore di HSV (la luminosità) per ottenere un contrasto migliore.

​

HSV(97,72,96)

HSV(217,72,96)

HSV(337,72,96)

Schema a triade: esempio

I colori del pulsante “ordina subito” e del blocco “regalo per te” hanno una luminosità del 66% per donare più contrasto.

​

Schema a rettangolo

Questo schema usa 4 colori, di cui 2 coppie sono complementari e 2 coppie sono analoghi. Suggerimenti:

• Cercare “colour picker” su google.
• Selezionare il colore che si desidera.
• Cambiare il primo valore di HSV (la tonalità) di -30 o di +30 per ottenere un altro colore.
• Cambiare il primo valore di HSV (la tonalità) di -180 o di +180 di entrambi i colori scelti per ottenere i colori complementari.
• Si può anche cambiare l’ultimo valore di HSV (la luminosità) per ottenere un contrasto migliore.

​

• C1 e C2; C3 e C4 sono analoghi.
• C1 e C3; C2 e C4 sono complementari.

​

C2 - HSV(187,72,96)

C1 - HSV(217,72,96)

C3 - HSV(37,72,96)

C4 - HSV(7,72,96)

Schema a rettangolo: esempio

Gradienti

I gradienti sono molto utili nelle schermate grandi per aiutare gli utenti a focalizzarsi su una specifica azione. Suggerimenti:

• Cercare “colour picker” su google.
• Selezionare il colore che si desidera.
• Cambiare il primo valore di HSV (la tonalità) di -X o di +X, dove X può essere un numero tra 20 e 40.
• Cambiare l’ultimo valore di HSV (la tonalità) di -Y o di +Y, dove Y può essere un numero tra 5 e 15.
• Scegliere lo stile del gradiente (orizzontale, verticale, obliquo, circolare, ecc.)

HSV(247,72,91)

HSV(217,72,96)

Gradienti: esempio

Tipografia

• Typeface: un tipo particolare di design del carattere, es. Arial o Times New Roman.
• Font: una particolare dimensione e stile di una typeface, es. Arial corsivo 12pt. Spesso la parola font è erroneamente utilizzata come sinonimo di typeface.
• Serif versus Sans Serif:
• i typeface di tipo Serif hanno linee e curve alla fine delle lettere. Sono quelli storicamente più utilizzati e in generale danno una sensazione di eleganza, confidenza e serietà. Sono in genere utilizzati per i testi lunghi e per la stampa. Un esempio è Times New Roman.
• i typeface di tipo Sans Serif trasmettono un senso di modernità e di informalità. Un esempio è Arial. Secondo alcuni studi, Arial è un carattere che viene letto bene da persone con dislessia.
• Monospace: lettere che occupano lo stesso spazio indipendentemente dal larghezza del carattere.
• 999999 (monospace) - 999999 (non monospace)
• 111111 (monospace) - 111111 (non monospace)
• Dimensione: In genere si utilizzano 12 pt per i testi, sotto i 10 pt la leggibilità si riduce. È buona norma fornire una dimensione standard (es. 12 pt) e permettere all’utente di configurarla.

Tipografia

• Si possono anche combinare typeface diversi (es. per il titolo e per il testo), ma è preferibile che non siano simili tra loro.
• Allineamento del testo: spesso si utilizza il testo allineato a sinistra. Si possono utilizzare i testi centrati per attirare l’attenzione ma sono difficili da leggere. I testi allineati a destra o giustificati si utilizzano poco nelle interfacce grafiche.
• Attenzione a numeri e lettere: uno e elle in alcuni typeface sono simili, così come zero e o.
• 1, l (Times New Roman) - 1, l (Arial) - 1, l (Courier New) - 1, l (Georgia)
• 0, O (Times New Roman) - 0, O (Arial) - 0, O (Courier New) - 0, o (Georgia)
• Approfondimento: https://geniusee.com/single-blog/font-readability-research-famous-designers-vs-scientists.
• Un typeface open per migliorare la lettura nel caso di persone con dislessia: https://opendyslexic.org.
• Alcuni font scaricabili (già visti per JavaFX): https://fonts.google.com

Immagini

Le immagini sono uno strumento importante per una qualsiasi interfaccia. Alcune considerazioni:

• Se si utilizzano dei volti umani, bisogna assicurarsi che stiano guardando nella direzione in cui si vuole attirare l’attenzione.
• Non esagerare con i cliché (es. persone che sorridono, professionisti in giacca e cravatta, ecc.).
• Le immagini di repertorio (cioè acquistate o messe a disposizione gratuitamente) vanno bene, ma un’immagine realizzata appositamente per l’applicazione ha tipicamente un impatto maggiore.

"Artificial Intelligence & AI & Machine Learning" by mikemacmarketing is licensed with CC BY 2.0. To view a copy of this license, visit https://creativecommons.org/licenses/by/2.0/.

Icone

Le icone sono delle piccole immagini che si possono utilizzare in combinazione del testo (o in sostituzione del testo) per esprimere un’idea o denotare una funzionalità. Suggerimenti:

• Utilizzare le convenzioni che sono ampiamente utilizzate da altre applicazioni o sul web.
• Le icone utilizzate devono avere tutte lo stesso stile grafico (es. stessa dimensione, stessa consistenza, ecc.)
• Se possibile utilizzare le icone in combinazione con il testo e non da sole.

Es. Modalità Notturna

• Le icone usate sono prese da https://fontawesome.com/ dove si possono trovare icone gratuite e a pagamento.
• Altre icone che si possono utilizzare: https://fonts.google.com/icons?selected=Material+Icons.

Stili

Ci sono diversi stili visivi nel design, alcuni di questi sono:

• Scheumorfico: lo stile dell’interfaccia segue quello degli oggetti della realtà.
• Illustrato: dove si fa ampio uso di immagini in tutta l’interfaccia.
• Flat: interfaccia con colori di sfondo solidi e vividi, uso di elementi bidimensionali, icone semplici e comprensibili, uso di typeface sans serif.
• Minimalista: stile che punta a mantenere al minimo gli elementi nella schermata.

Liste di elementi

Liste di elementi

Una delle cose più comuni di un’interfaccia grafica è mostrare delle liste di elementi in un’interfaccia grafica. Per elemento si intende:

• Articoli
• Eventi
• Immagini
• Mappe
• Testo semplice
• Video
• Ecc.

Liste di elementi

Osservazioni da fare:

• L’utente deve essere in grado di vedere l’intera lista di elementi oppure un sottoinsieme?
• Gli elementi sono mostrati in ordine casuale oppure hanno un ordine?
• L’utente deve poter ordinare gli elementi o filtrarli?
• L’utente può eliminare o aggiungere elementi all’interno della lista?
• L’utente può muoversi da un elemento al successivo oppure deve tornare indietro nella lista dopo ogni azione?

Liste di elementi

Quando l’utente seleziona un elemento all’interno di una lista, come mostrare i dettagli dell’elemento selezionato?

​

Split View, la schermata non cambia, i dettagli dell’elemento vengono mostrati all’interno della lista stessa.

Liste di elementi

Quando l’utente seleziona un elemento all’interno di una lista, come mostrare i dettagli dell’elemento selezionato?

​

Singola-finestra, i dettagli dell’elemento occupano lo spazio della lista.

Liste di elementi

Quando l’utente seleziona un elemento all’interno di una lista, come mostrare i dettagli dell’elemento selezionato?

​

Inlay, l’elemento è mostrato all’interno della lista stessa. La lista si espande per mostrare i dettagli dell’elemento.

Liste di elementi

Come mostrare una lista con immagini, video, testo?

​

Cards: Immagini combinate con testo.

Liste di elementi

Come mostrare una lista con immagini, video, testo?

​

Griglia di Thumbnail: vengono mostrare piccole preview delle immagini.

Liste di elementi

Come mostrare una lista con immagini, video, testo?

​

Carosello: è un’alternativa alla griglia di thumbnail dove c’è un oggetto in primo piano e delle frecce per scorrere all’interno della lista.

Liste di elementi

Come mostrare una lista con tanti elementi?

• Pagination: i risultati sono divisi in blocchi di pagine, con un certo numero di risultato per pagina.
• Scroll Infinito: è tipico delle applicazioni mobile. I risultati sono caricati in blocco, quando l’utente sta per raggiungere la fine dei risultati caricati, il sistema automaticamente carica un altro blocco.

Liste di elementi

Come mostrare una lista con elementi organizzati in categorie o gerarchicamente?

• Se è presente una struttura con un solo livello di categorie (cioè senza sottocategorie), si possono mostrare delle sezioni con titoli, una sezione per ogni categoria. In questo caso si può anche consentire l’ordinamento all’interno di una singola categoria.
• Se è presente una struttura più complessa, si può optare per una visualizzazione ad albero, dove si può cliccare su una categoria per visualizzare le sottocategorie.

Liste di elementi: suggerimenti

Quando una lista ha un ordine alfabetico o numerico (es. una rubrica telefonica), potrebbe essere utile aggiungere un modo di navigare utilizzando le lettere.

Nel caso della presenza di un campo di ricerca o di filtro, prevedere un testo nel caso di lista vuota.

Se l’utente può aggiungere elementi alla lista, prevedere la presenza di un pulsante in fondo alla lista per aggiungere velocemente un elemento. Questo è molto importante nel caso in cui il risultato di una ricerca sia vuoto.

​

​

Schermata Netflix nel caso in cui non ci siano elementi nella mia lista.

Visualizzare dati complessi

Visualizzare dati complessi

La visualizzazione di dati complessi è una disciplina a sé all’interno della realizzazione di interfacce grafiche.

Da un punto di vista grafico si possono utilizzare diversi elementi: tabelle, grafici, mappe, diagrammi, ecc. Tuttavia lo sforzo maggiore è richiesto nella progettazione degli elementi da visualizzare:

• Come sono organizzati i dati?
• Come sono collegati tra di loro?
• Gli utenti possono espandere la visualizzazione?
• Gli utenti possono riorganizzare i dati per mostrarli in modo diverso?
• Gli utenti possono selezionare solo una porzione dei dati a cui sono interessati?

​

Organizzazione dei dati

In genere i dati vanno mostrati utilizzando un modello organizzativo:

• Lineare: i dati sono mostrati seguendo una sequenza (es. una lista).
• Tabellare: i dati sono mostrati in forma di tabella.
• Gerarchico: i dati sono mostrati in forma di albero.
• A rete: i dati sono mostrati in un rete interconnessa (es. un grafo o un diagramma di flusso).
• Geografico: i dati sono mostrati in forma spaziale (es. una mappa).
• Testuale: i dati sono mostrati utilizzando una nuvola di parole.

La scelta del modello organizzativo comunica all’utente la forma che si vuole associare ai dati da mostrare.

Evidenziare i dati

Quanti di questi numeri sono superiori a 1?

​

Evidenziare i dati

Nel caso precedente, il carico cognitivo del cervello aumenta insieme al numero di opzioni. In questo caso, gli occhi devono scorrere tutti gli elementi e valutare ogni singolo numero.

Esistono diverse tecniche per velocizzare il processo di riconoscimento.

​

​

Evidenziare i dati

Si può utilizzare lo stile.

​

Evidenziare i dati

Si possono utilizzare i colori.

​

Evidenziare i dati

Si può utilizzare la dimensione del testo.

​

Evidenziare i dati

All’interno dei grafici si possono utilizzare colori e simboli diversi.

​

Esplorazione dei dati

Una buona navigazione dovrebbe permettere agli utenti di concentrarsi sui punti di interesse. Ci sono diverse tecniche per esplorare i dati:

• Scroll e panoramiche, da utilizzare quando i dati non possono essere mostrati tutti insieme.
• Zoom, da utilizzare per modificare la scala con cui visualizzare i dati.
• Apertura e chiusura dei punti di interesse, chiudere e aprire alcune porzioni dei grafici.

​

Ricerca e filtro dei dati

La ricerca e il filtro all’interno dei dati è fondamentale, una buona interfaccia di filtro o di ricerca:

• Deve rispondere il più velocemente possibile alle azioni degli utenti. Ma non è necessario reagire a ogni singola digitazione dell’utente se questo rallenta troppo le performance.
• Deve permettere agli utenti di raffinare la ricerca, aggiungendo nuovi filtri, fino a che non si ottengono i risultati desiderati.
• Deve mostrare i risultati contestuali ai dati che sono mostrati. Ad esempio, se si ricerca all’interno di una categoria, i risultati devono essere inerenti alla categoria.
• In alcuni casi, deve offrire combinazioni complesse di azioni affinché gli utenti possano effettuare ricerche più dettagliate.

​

Input dagli utenti: Form e Controlli

Form

Nella realizzazione dei form è opportuno tenere a mente i seguenti principi:

• Minimizzare il tempo e lo sforzo richiesto all’utente per compilare il form. Ad esempio, se si richiede il codice fiscale, è inutile richiedere la data di nascita, ma si può precompilare.
• Fare in modo che l’utente capisca con precisione lo scopo del form.
• Minimizzare il numero di elementi grafici, mantenere il form semplice, pulito e orientato all’obiettivo.
• Raggruppare gli elementi del form in sezioni, quando è possibile.
• Permettere di mostrare/nascondere le sezioni in caso di form lunghe e complesse. Le sezioni opzionali potrebbero essere nascoste di default.
• Gli elementi all’interno del form devono essere allineati verticalmente per evitare di affaticare la vista.

​

​

​

Form

• Indicare chiaramente i campi richiesti e quelli opzionali. Ad esempio usando un asterisco (*) o, ancora meglio, indicare ciò che è opzionale.
• Usare sempre etichette, istruzioni, aiuto, esempi comprensibili agli utenti.
• Utilizzare i controlli grafici appropriati per l’elemento che si vuole l’utente inserisca. Se mostrate un’area di testo, l’utente assumerà di poter aggiungere tante linee.
• Se un campo richiede una formattazione particolare (es. la data), rendere esplicito il formato richiesto. Nel caso delle date è preferibile un sistema di scelta grafico per selezionarle.
• Effettuare la validazione dei campi appena possibile (ma non durante la digitazione) per prevenire errori. Negli errori è opportuno mostrare i campi che li hanno generati, magari cambiando il colore in rosso con una spiegazione di fianco.
• Quando un utente ha completato il form, è importante informare dell’avvenuta ricezione e di cosa succederà dopo.

​

Messaggi di errore

Messaggi di errore

La progettazione dei messaggi di errore è fondamentale nella realizzazione di una UI. Alcune regole:

• Il miglior messaggio di errore è quello che non appare, l’ideale sarebbe di prevenire i possibili errori. Tuttavia, quando non si riesce è importante saper gestire i messaggi di errore, perché questi ultimi possono cambiare la percezione sul sistema.
• I messaggi devono essere educati, concisi, consistenti e costruttivi. Non bisogna tentare di essere divertenti.
• I messaggi di errore devono essere orientati all’utente e non al sistema. Si possono eventualmente aggiungere al testo dei codici numerici e dei pulsanti per segnalare l’errore.
• In alcuni casi è opportuno prevedere una soluzione al problema. Esempio: il messaggio "Password sbagliata." potrebbe mostrare anche un pulsante per reimpostarla.
• Se si sta compiendo un’operazione particolarmente delicata o irreversibile è opportuno richiedere una conferma.

Esempi: google moduli

Esempi: github.com

Esempi: Mail

Apple

Gmail