8.2.1. Elementi di composizione¶

Gli elementi che compongono un’interfaccia utente sono fondamentali per presentare le informazioni in modo chiaro e creare un’esperienza piacevole, che attiri e mantenga l’attenzione.

I principali elementi di composizione sono:

• il layout, per organizzare gli elementi su pagina e mantenere coerenza ed equilibrio visivo tramite l’uso di griglie;

• la palette dei colori, per definire l’identità visiva del prodotto, garantire la leggibilità dei contenuti e distinguere i diversi elementi dell’interfaccia;

• la tipografia, con la selezione dei font e la gerarchia tipografica, definisce lo stile e la leggibilità del testo, differenziando titoli, sottotitoli e paragrafi;

• le icone, come rappresentazioni grafiche di azioni, funzioni o contenuti, e le loro eventuali alternative o descrizioni accessibili, che devono essere coerenti e facilmente riconoscibili per garantire una comprensione immediata.

La combinazione di questi elementi permette di creare un’interfaccia unica che, da un lato, rispetta l’esigenza di identità del prodotto e, dall’altro, guida le persone al suo utilizzo.

8.2.2. Elementi interattivi¶

Gli elementi interattivi di un’interfaccia utente consentono alle persone di interagire direttamente con il prodotto digitale, rendendo l’esperienza d’uso dinamica e coinvolgente.

• I pulsanti, per esempio, sono elementi cliccabili o attivabili che permettono di eseguire azioni specifiche sulla pagina, come “Invia” o “Annulla”. Questi devono presentare stati distinti per indicare se sono attivi, disabilitati o in hover.

• I moduli (form) rappresentano un altro elemento chiave: campi di input, checkbox e select a tendina consentono agli utenti di inserire o selezionare dati. Questi devono essere accompagnati da etichette e istruzioni chiare per prevenire confusione, ed essere accompagnati da sistemi di validazione degli errori che ne guidino la risoluzione.

• I menu di navigazione, come le barre di navigazione e le breadcrumb, guidano gli utenti attraverso le varie sezioni del prodotto, facilitando un’esplorazione semplice e intuitiva.

• I link permettono di navigare verso altre pagine o risorse e devono essere facilmente identificabili.

Questi elementi rappresentano solo una parte dei componenti interattivi utilizzabili in un’interfaccia. Quando implementati correttamente, con particolare attenzione anche al loro uso con tecnologie assistive, questi elementi non solo rendono l’interfaccia funzionale per tutte le persone, ma anche intuitiva e di facile utilizzo, migliorandone l’efficacia e l’esperienza d’uso.

8.2.3. Elementi testuali (microtesti)¶

I microtesti, in inglese microcopy, sono i testi dell’interfaccia che guidano le persone a navigare siti, app e altre esperienze digitali nel modo più intuitivo e semplice possibile. Progettare i microtesti come parte integrante dell’interfaccia è fondamentale per creare un prodotto o servizio facile da usare.

I principali tipi di microtesti per le interfacce sono:

• i testi di onboarding, che guidano alla registrazione, al primo accesso a un servizio o al primo uso di una funzionalità;

• i messaggi di errore, che informano le persone di eventuali problemi e come risolverli;

• i messaggi di conferma, che confermano di aver svolto correttamente un’azione;

• i tooltip, i testi che appaiono in sovrimpressione al passaggio del mouse, al tap o all’attivazione da tastiera, che danno maggiori informazioni sulle funzionalità di un prodotto;

• i segnaposto nei campi dei form e i messaggi di errore durante la loro validazione, per dare indicazioni chiare su come compilare senza commettere errori;

• gli empty state, ovvero i testi che indicano l’assenza di contenuti, come nei risultati di ricerca;

• i messaggi di caricamento, che spiegano alle persone cosa sta succedendo e perché si è in attesa;

• le notifiche del servizio o prodotto.

Vai al fondamento Microtesti per approfondire