Il glossario per UI designer — vol. 1

Glossario UI — Le definizioni e i termini “essenziali” nel Design di Interfacce.

Nel mondo della UI design, insieme alla comunicazione efficace, è fondamentale conoscere bene e comprendere i termini che utilizzano i colleghi per allinearsi, evitare incomprensioni e migliorare sensibilmente la riuscita di un progetto. Che tu sia un designer senior o tu stia appena iniziando il tuo percorso, l’obiettivo di questo glossario è racchiudere quelle che sono le terminologie comunemente utilizzate e consolidare le proprie conoscenze nel panorama del design.

In questa prima parte sono inclusi i primi macro blocchi del design dell’interfacce (e non solo), che coprono i principi di base (per approfondire, leggi l’articolo “CRAP: i 4 principi nel Design dell’Interfaccia Utente”) e i componenti utilizzati nella progettazione. Questa parte sarà utile per fornirti le conoscenze necessarie per comprendere poi gli argomenti più avanzati descritti nella seconda parte che seguirà questo articolo.

Definizioni di base dell’UI

In questa sezione, passeremo rapidamente dall’analisi dell’Interfaccia Utente (UI) e dell’Esperienza Utente (UX) all’esplorazione dell’Architettura delle Informazioni.

Interfaccia Utente
L’Interfaccia Utente (UI) si riferisce agli elementi visivi e interattivi di un prodotto digitale con cui gli utenti interagiscono, come pulsanti, menu e schermate. Lo scopo è creare un’esperienza utente amichevole e coinvolgente, offrendo un design intuitivo e una navigazione senza intoppi.

Esperienza Utente
L’Esperienza Utente (UX) comprende l’esperienza complessiva degli utenti e la loro soddisfazione nell’interagire con un prodotto o un sistema. Si concentra sull’usabilità, sull’accessibilità e sulla risposta emotiva per garantire un percorso all’utente che risulti positivo e significativo.

Information Architecture (Architettura delle Informazioni)
L’Architettura delle Informazioni consiste nell’organizzare e strutturare i contenuti in modo logico e user-friendly, facilitando la navigazione e la ricerca all’interno di un’interfaccia digitale e migliorando la comprensione dell’utente e l’usabilità complessiva.

Wireframe
Uno schema è una rappresentazione visiva o una bozza semplice dell’interfaccia digitale. Definisce la disposizione, la struttura e gli elementi chiave senza includere dettagli visivi specifici, consentendo la visualizzazione e la valutazione preliminare dei flussi utente.

Prototype (Prototipo)
Un prototipo è un mockup interattivo o un modello funzionante di un prodotto digitale che consente ai designer e agli stakeholder di testare e convalidare la funzionalità, le interazioni e l’esperienza utente complessiva prima dello sviluppo su larga scala, fornendo preziose intuizioni per il perfezionamento.

Usability (Usabilità)
L’Usabilità si riferisce alla facilità d’uso di un prodotto o sistema per gli utenti previsti, tenendo conto di fattori come apprendibilità, efficienza, prevenzione degli errori e soddisfazione dell’utente.

Responsive Design
Il Design Responsive è un approccio al design e allo sviluppo che garantisce che un’interfaccia digitale si adatti e ottimizzi la sua disposizione, i contenuti e le interazioni su diversi dispositivi e dimensioni dello schermo, offrendo un’esperienza utente coerente e senza soluzioni di continuità.

Accessibility (Accessibilità)
L’Accessibilità si concentra sul progettare prodotti digitali e interfacce che siano inclusivi e utilizzabili da persone con diverse disabilità, garantendo un accesso equo alle informazioni e alle funzionalità attraverso considerazioni come la compatibilità con lettori di schermo, la navigazione da tastiera e il contrasto dei colori.

Termini Base dell’UI — Componenti

I componenti nell’UI design sono gli elementi costitutivi di un’interfaccia utente. Essi rappresentano le parti visibili e interattive con cui gli utenti interagiscono. Alcuni esempi comuni includono pulsanti, menu e barre di navigazione. La progettazione, se minuziosa e accurata, di questi componenti è essenziale per creare fruizione per l’utente intuitiva e contribuiscono a creare esperienze piacevoli.

Button (Pulsante)
Un pulsante è un elemento cliccabile in un’interfaccia utente che agisce quando viene cliccato o toccato. Viene spesso utilizzato per attivare azioni come l’invio di moduli, la navigazione verso pagine diverse o l’avvio di funzioni specifiche all’interno di un’applicazione o un sito web.

Navigation Bar (Barra di Navigazione)
Una barra di navigazione è un menu posizionato tipicamente nella parte superiore o laterale di una pagina web o di un’applicazione web. Fornisce collegamenti o icone che consentono agli utenti di spostarsi facilmente tra diverse pagine o sezioni, facilitando la navigazione intuitiva e aiutando gli utenti a esplorare i contenuti in modo efficiente.

Checkbox
Una checkbox è un elemento dell’interfaccia utente che consente agli utenti di selezionare o deselezionare un’opzione da un elenco predefinito. Presenta una scelta binaria, dove gli utenti possono attivare o disattivare la casella di controllo per indicare la loro selezione, ad esempio scegliendo più elementi da un elenco o abilitando impostazioni specifiche.

Dropdown Menu o Select (Menù a tendina)
Un menu a tendina è un elenco di opzioni visibili quando gli utenti interagiscono con una zona o un pulsante designati. Fornisce un modo compatto e organizzato per visualizzare una serie di scelte, consentendo agli utenti di selezionare un’opzione dall’elenco facendo clic o toccando su di essa.

Tooltip
Un tooltip è un piccolo messaggio informativo che appare quando gli utenti passano il mouse sopra o cliccano su un elemento, tipicamente accompagnato da testo descrittivo. Fornisce contesto aggiuntivo, spiegazioni o istruzioni per aiutare gli utenti a comprendere lo scopo o la funzionalità dell’elemento associato.

Radio Button
Un radio button è un elemento dell’interfaccia utente che consente agli utenti di selezionare un’unica opzione da un gruppo di scelte mutualmente esclusive. Presenta un insieme di opzioni in cui può essere selezionata solo una alla volta, tipicamente rappresentate da piccoli cerchi o bottoni.

Slider
Un slider è un componente dell’interfaccia utente che consente agli utenti di regolare un valore all’interno di un intervallo predefinito trascinando una maniglia lungo una traccia. Rappresenta visivamente il valore che viene modificato ed è comunemente utilizzato per impostazioni come il controllo del volume, gli slider delle immagini o l’inserimento numerico.

Modal Window (Finestra Modale)
Una finestra modale è un overlay temporaneo sopra il contenuto principale, tipicamente attivato dall’interazione dell’utente. Focalizza l’attenzione dell’utente su un compito specifico, richiedendo loro di interagire con il modale prima di accedere ad altre parti dell’interfaccia, garantendo un’esperienza utente concentrata e contestuale.

Progress Bar (Barra di Progresso)
Una barra di progresso è un indicatore visivo che mostra lo stato o il completamento di un compito. Fornisce agli utenti una rappresentazione visiva del progresso compiuto, dando loro un senso del tempo, del completamento o dei passaggi rimanenti nei processi come caricamenti di file, invii di moduli o installazioni di software.

Switch, Toggle Button o Toggle Switch
Uno Switch è un piccolo elemento di interfaccia utente che funge da interruttore per attivare o disattivare una singola impostazione. È spesso utilizzato per cambiare rapidamente tra due stati opposti, come “on” e “off”, con un semplice tocco o clic.

Tipografia

La tipografia è fondamentale nella UI design, contribuisce significativamente all’usabilità e all’estetica di un’interfaccia. Una buona scelta tipografica migliora la leggibilità, guida l’occhio dell’utente attraverso il contenuto e stabilisce una gerarchia visiva. Inoltre, la tipografia può influenzare l’umore e la percezione del marchio, rendendola uno strumento potente per comunicare il tono e i valori di un’azienda o di un brand.

Font (Carattere)
Con “font” ci si riferisce a uno stile e a un design specifico di caratteri. Include variazioni come dimensione, spessore e stile, determinando l’aspetto visivo del testo.

Typeface (Carattere tipografico)
Un carattere tipografico è una collezione di caratteri con uno stile di design ben definito e coerente. Comprende vari caratteri, stili e spessori all’interno di una famiglia specifica, fornendo un’identità visiva coesa per il testo in un’interfaccia utente.

Font Families (Famiglie di caratteri)
Le famiglie di caratteri si riferiscono a un gruppo di caratteri tipografici che condividono un’estetica di design simile. Includono varianti come regolare, grassetto, corsivo e altre, consentendo ai designer di creare una gerarchia visiva ed stabilire un tono coerente nella loro tipografia.

Font Weights (Spessori dei caratteri)
Gli spessori dei caratteri indicano lo spessore o il peso di un tipo di carattere all’interno di una famiglia di caratteri. Vanno da leggero (Light o Thin) a grassetto (Bold, Black, etc), permettendo ai designer di enfatizzare elementi specifici o creare contrasto nel testo, aggiungendo interesse visivo e migliorando la leggibilità.

Font Sizes (Dimensioni dei caratteri)
Le dimensioni dei caratteri determinano la scala relativa del testo in un design, influenzandone la leggibilità e la gerarchia. Regolando le dimensioni, i designer possono guidare l’attenzione dei lettori e creare un enfasi visiva, garantendo che le informazioni importanti risaltino mantenendo una composizione equilibrata.

Kerning
Con kerning ci si riferisce alla correzione dello spazio tra singole lettere in una parola o in un testo. Ottimizzando lo spazio tra specifiche combinazioni di lettere, migliora la leggibilità e l’armonia tipografica complessiva.

Tracking
Il tracking regola lo spazio tra i caratteri in una riga di testo. Aiuta ad ottimizzare la leggibilità e l’appeal visivo controllando lo spaziamento complessivo, garantendo che i caratteri siano distribuiti uniformemente e evitando che il testo sembri troppo compresso o troppo distanziato.

Gerarchia
La gerarchia nella tipografia si riferisce all’organizzazione visiva degli elementi di testo in base alla loro importanza e significato. Coinvolge l’utilizzo di variazioni in dimensione, spessore, colore e posizione per stabilire un ordine chiaro e guidare l’attenzione dei lettori attraverso il contenuto, consentendo una comunicazione ed una comprensione efficace.

Line Height (Altezza della riga)
L’altezza della riga, nota anche come leading, è lo spazio verticale tra le righe di testo. Influenza la leggibilità e l’estetica determinando la distanza tra le linee di base, consentendo una lettura confortevole e impedendo al testo di sembrare troppo compresso o troppo spaziato.

Serif
Il serif si riferisce a uno stile di carattere che presenta piccole decorazioni, o serif, agli estremi dei caratteri. I caratteri serif sono spesso associati a un’estetica più tradizionale e formale e sono comunemente usati per il testo principale nei materiali stampati per la loro leggibilità e leggibilità.

Sans-serif
Sans-serif si riferisce a un tipo di carattere che manca delle piccole decorazioni o “piedi” agli estremi dei caratteri. I caratteri sans-serif hanno un aspetto pulito e moderno, spesso usati per le interfacce digitali e i titoli, poiché offrono semplicità, leggibilità e un tocco contemporaneo.

Colori

I colori ricoprono un aspetto cruciale nel progettazione di interfacce: comunicano emozioni e influenzano l’umore degli utenti; migliorano la leggibilità, guidano l’attenzione attirando l’occhio così da poter veicolare la navigazione. Inoltre i colori coerenti con il marchio aumentano il riconoscimento e, se scelti con criterio e discrezione, assistono utenti con difficoltà visive, risultando quindi fondamentali in termini di accessibilità. In breve, i colori sono essenziali per creare un’esperienza utente attraente e intuitiva.

Hue (Tonalità)
La tonalità si riferisce alla proprietà che distingue un colore da un altro nello spettro dei colori ed è cruciale nella creazione di design visivamente piacevoli.

Saturation (Saturazione)
La saturazione si riferisce all’intensità o purezza di un colore. I colori altamente saturi appaiono vivaci e vibranti, mentre i colori desaturati appaiono più smorzati o sbiaditi.

Brightness (Luminosità)
La luminosità ci indica quanto è illuminato un colore: all’aumentare della luminosità, il colore appare più chiaro, di conseguenza, diminuendo la luminosità, il colore diventa più scuro fino a diventare nero.

Colori Complementari
I colori complementari sono coppie di colori opposti l’uno all’altro sulla ruota cromatica. Creano un contrasto netto e migliorano l’impatto visivo reciproco quando utilizzati insieme, portando equilibrio e armonia al progetto.

Color Palette (Palette di Colori)
Una palette di colori è un insieme di colori selezionati e utilizzati in modo coerente in un progetto di design. Include una gamma di tonalità, sfumature e toni che lavorano armoniosamente insieme per creare un’esperienza visiva coesa.

Contrasto
Il contrasto si riferisce alla differenza nelle proprietà visive tra gli elementi in un design. Coinvolge l’utilizzo di colori, luminosità, dimensioni o forme diverse per creare interesse visivo, gerarchia e leggibilità.

RGB
RGB sta per Rosso, Verde e Blu — identificano i colori primari utilizzati nelle visualizzazioni digitali. Combinando diverse intensità di questi colori è possibile creare una vasta gamma di colori sugli schermi.

CMYK
CMYK sta per Ciano, Magenta, Giallo e Nero (Chiave) — sono i colori primari utilizzati nella produzione di stampa. A differenza dei colori RGB che utilizzeremo nella progettazione di interfacce digitali, il CMYK è la combinazioni di colori che si utilizzano per stampare materiali fisici.

Principi di Usabilità

I i principi di usabilità non sono leggi, ma piuttosto sono da considerare dei concetti che, se utilizzati, garantiscono che i tuoi progetti siano intuitivi, accessibili e piacevoli.

User-Centered Design (Progettazione Centrata sull’Utente)
La “Progettazione Centrata sull’Utente” è un approccio che dà priorità ai bisogni, alle preferenze e ai comportamenti degli utenti durante il processo di progettazione. Comprendendo e incorporando i feedback e le intuizioni degli utenti, la UCD mira a creare interfacce intuitive, efficienti e che soddisfino i requisiti specifici del pubblico di riferimento.

Accessibility (Accessibilità)
L’Accessibilità garantisce che i prodotti e i servizi digitali siano progettati e sviluppati per essere utilizzabili da un’ampia gamma di utenti, inclusi quelli con disabilità sia visive che fisiche, fornendo pratiche di design inclusive e funzionalità che tengano conto delle diverse esigenze.

Error Handling (Gestione degli Errori)
La Gestione degli Errori si riferisce alla progettazione e all’implementazione di strategie per gestire gli errori e le eccezioni in modo user-friendly. Coinvolge la fornitura di messaggi di errore chiari e informativi, guidando gli utenti nella risoluzione dei problemi e minimizzando la frustrazione (nemico n.1) prevenendo o recuperando dagli errori in modo efficace.

Consistency (Coerenza)
La Coerenza nel design si riferisce al mantenimento di un’esperienza uniforme e coerente in tutta l’interfaccia, utilizzando elementi visivi, schemi di interazione e terminologia coerenti, che aiutano gli utenti a creare familiarità e comprensione, riducendo confusione e carico cognitivo.

Learnability (Facilità di Apprendimento)
La Facilità di Apprendimento si concentra sulla progettazione di interfacce che sono facili da capire e apprendere, con interazioni, istruzioni e feedback chiari e intuitivi, consentendo agli utenti di comprendere rapidamente come navigare e interagire con il sistema.

Cognitive Load (Carico Cognitivo)
Il Carico Cognitivo si riferisce allo sforzo mentale e alla capacità che gli utenti richiedono per elaborare e comprendere le informazioni presentate nell’interfaccia. I designer mirano a minimizzare il carico cognitivo semplificando compiti complessi, organizzando le informazioni in modo efficace e riducendo distrazioni superflue, consentendo agli utenti di concentrarsi sugli obiettivi e sulle attività principali.

In questo primo volume abbiamo visto come i principi di base e i componenti essenziali, combinandosi l’un l’altro, rendono le esperienze digitali e le interazioni “funzionali”, permettendo un approccio, tramite le interfacce, piacevole e intuitivo.

Nel secondo volume declineremo argomenti più avanzati, avendo consolidato una buona parte degli aspetti di base. Approfondiremo le strategie per migliorare l’usabilità, l’accessibilità e l’efficacia delle interfacce, tutto questo con il solo obiettivo di migliorarci come professionisti, rendere le collaborazioni con i colleghi più efficaci e comprendendo come le scelte strategiche possono trasformare un buon design in un’esperienza eccezionale.