UX & Coding

Progressive Disclosure nel Web Design

"Un modello di progettazione che permette di ottenere interfacce funzionali ed usabili anche in presenza di sistemi complessi"

La Progressive Disclosure è una tecnica di design utilizzata nello studio dell’interazione con gli utenti: ha lo scopo di aiutare a mantenere l’attenzione riducendo la percezione di disordine, la confusione e il carico di lavoro sovraccarico.

In presenza di una eccessiva serie di azioni disponibili gli utenti possono paralizzarsi. Un gran numero di scelte aumenta lo sforzo necessario a comprenderle.

Questo metodo migliora l’usabilità presentando solo i dati minimi realmente necessari per la prosecuzione o la conversione.

È la strategia per gestire le informazioni che basa la sua efficacia sul mostrare quelle più complesse solo quando l’utente le richiede.

Molteplici soluzioni per problemi differenti

Spesso in fase di progettazione c’è la tendenza a raggruppare tutte le informazioni e le funzionalità contemporaneamente perché è più laborioso organizzarle in gruppi differenti. È semplice farlo quando si designa l’interfaccia, ma non è efficace nelle realtà.

Esistono svariati approcci per prevenire punti di blocco o più semplicemente per non intimorire l’utente con un carico di informazioni eccessivo.

Una delle attività più complesse nella progettazione web è l’architettura di navigazione.

Una navigazione ben concepita segue la logica della piramide invertita, uno stile di presentazione in cui vengono mostrati i concetti più importanti per primi mentre il resto dei contenuti viene raccontato attraverso approfondimenti progressivi.

I Mega Menu consentono di nascondere la navigazione, le informazioni e le funzionalità meno prioritarie fino a quando gli utenti non le richiedono.

Navigazione Mega Menu
Concept di navigazione progressiva su desktop e mobile (demo su CodyHouse)

Come una piramide invertita, si inizia da un’area più ampia che diventa mano a mano più stretta. È il modo in cui nel mondo editoriale vengono scritte le notizie.

Sui device mobile e nelle applicazioni, anche a causa degli spazi più limitati, spesso viene utilizzato questo criterio progettando menu che si sviluppano orizzontalmente e che danno la sensazione di proseguimento.

Navigazione su iOS

È la valida alternativa al fornire una lunga lista di collegamenti che gli utenti dovrebbero scorrere e comprendere, indipendentemente dal contenuto che stanno cercando. Non tutti hanno bisogno di accedere al singolo dettaglio ed è quindi importante soddisfare tutte le esigenze.

Più informazioni solo quando necessarie

Nel design di un’interfaccia spesso sia ha a che fare con decine di funzionalità che permettono di personalizzare l’esperienza di utilizzo o per eseguire molteplici azioni più o meno articolate.

Informazioni importanti o funzionalità complesse che richiedono spiegazioni possono essere nascoste a patto che ci sia una chiara segnalazione per raggiungerle velocemente.

Tooltip
Le interazioni secondarie sono mostrate solo quando vengono richieste

Sistemi di interazione come tooltip, overlay e popover o di micro interazione come gli stati hover aiutano a mostrare suggerimenti o la transizione ad uno stato successivo.

Garantiscono una rapida reperibilità delle informazioni che possono essere organizzate in aree logiche visualizzate solo su una richiesta specifica.

Overlay introduttivi

Ogni volta che l’interfaccia subisce cambiamenti è molto importante dare indicazioni chiare su come possano essere raggiunte le funzioni più importanti.

Se le funzioni principali sono facilmente reperibili, gli utenti saranno soddisfatti dalla interazione e continueranno a navigare. La Progressive Disclosure può essere usata per rivelare le informazioni giuste, esattamente quando l’utente ne ha bisogno.

Overlay
Le funzionalità principali possono essere illustrate al primo accesso

Un tour didattico di un’applicazione è un ottimo esempio di come minimizzare il tempo di apprendimento dell’utilizzo di un interfaccia dando priorità alle indicazioni principali.

Identificazione dei profili

Ogni utente ha esigenze diverse e conoscere i segmenti del proprio pubblico permette di comprendere in quali modi possono arrivare alle stesso obiettivo percorrendo strade differenti.

Non tutti gli utenti di un e-commerce vogliono registrarsi, altri hanno già un account e intendono solo accedere per concludere l’acquisto.

Checkout

Presentare poche scelte, che devono essere molto chiare, consente agli utenti di ignorare i percorsi o le funzionalità che non sono utili in quel momento.

Inoltre permette l’organizzazione dell’interfaccia in step che avranno come obiettivo quello di aiutare a portare a termine precisi compiti (es. inserimento indirizzo, scelta modalità di pagamento).

Molti contenuti, poco spazio

Gli elementi che si aprono e chiudono come accordion o tab possono essere molto utili quando si tenta di visualizzare molte informazioni, ma solo alcune di esse sono utili a qualsiasi persona.

Sono utilizzati spesso nelle pagine di assistenza o per raggruppare una quantità elevata di contenuti testuali che difficilmente troverebbe collocazione.

Accordion
Concept di accordion (da su CodeMyUI)

Il loro vantaggio è quello di fornire una rapida panoramica di tutto quello che c’è disponibile delegando all’utente la scelta di cosa leggere e cosa ignorare.

Interfacce semplici per compiti difficili

La Progressive Disclosure è un potente modello di progettazione in grado di mantenere l’interfaccia utente pulita e ordinata e di aiutare le persone a gestire la complessità delle applicazioni senza creare confusione o frustrazione.

Per ottenere una User Experience che funziona, è necessario mantenere la corretta separazione tra le funzionalità principali e secondarie.

Bisogna far intuire cosa ci sarà dopo un’interazione mantenendo la struttura iniziale senza un numero eccessivo di scelte.

Aggiungi un commento

UX & Coding

Articoli recenti

Newsletter

Inserisci la tua email per restare aggiornato sulle ultime novità.