La progettazione della User Experience è un processo estremamente complesso che non può essere ridotto a una semplice questione estetica. Si tratta di un ecosistema che si fonda su diversi approcci e discipline che devono lavorare in perfetta armonia: tra queste troviamo il design della comunicazione, il branding, il marketing, la human-computer interaction e lo human factor. Questa varietà di sguardi che convivono nel campo della UX Design lascia emergere chiaramente la complessità che caratterizza oggi la progettazione per siti web e app.
Per dare ordine a questo processo, un punto di riferimento imprescindibile è il lavoro di Jesse James Garrett, autore del celebre libro “The Elements of User Experience”. Garrett ha proposto uno schema diventato iconico, utile per suddividere la progettazione della UX in fasi logiche. Questo modello procede lungo un continuum che va dalla fase più astratta (la base) a quella più concreta (la superficie). Analizzare questi diversi livelli è fondamentale per comprendere come ogni decisione presa all’inizio influenzi drasticamente il risultato finale percepito dall’utente.
I 5 livelli dello schema di Garrett
1. Strategy (Strategia)
Il primo passo da compiere, il livello più basso e astratto, consiste nell’analizzare i connotati generali del prodotto che si intende creare. In questa fase non si parla di bottoni o colori, ma di obiettivi. Di cosa si occupa l’app o il sito, a chi si rivolge e, soprattutto, perché gli utenti dovrebbero utilizzarla: sono tutte domande che necessitano di una risposta chiara durante questo stadio. La strategia deve conciliare gli obiettivi di business con i bisogni reali degli utenti, definendo la rotta per tutto lo sviluppo successivo. Senza una solida base strategica, l’intero progetto rischia di essere tecnicamente perfetto ma del tutto inutile per il mercato.
2. Scope (Ambito)
Successivamente, si passa a chiarire nel concreto gli elementi che soddisfano gli scopi appena definiti nella fase strategica. Si tratta, in sostanza, di definire i requisiti funzionali e di contenuto. I requisiti funzionali sono costituiti dalle funzioni interne all’app o al sito, che corrispondono agli obiettivi pratici immaginati per il prodotto (ad esempio, un sistema di prenotazione o un carrello acquisti). I requisiti di contenuto, invece, sono dati dalle informazioni e dai media che completeranno e arricchiranno l’interfaccia. Definire il perimetro del progetto evita che quest’ultimo diventi eccessivamente complesso o che manchi di elementi essenziali.
3. Structure (Struttura)
La fase “Structure” consiste nel mettere in ordine gli sviluppi ottenuti nel gradino precedente, dando forma e gerarchia alle funzioni e ai contenuti previsti. In questo momento del processo si definiscono le modalità e i tragitti con cui un utente naviga sulla piattaforma. Per questo motivo, la fase di struttura è suddivisa in due componenti fondamentali:
Interaction Design: riferita all’organizzazione delle funzioni e al loro livello di priorità, ovvero come il sistema risponde alle azioni dell’utente.
Information Architecture: relativa invece all’organizzazione logica dei contenuti, assicurando che l’utente trovi ciò che cerca senza sforzo. Questa fase è il cuore dell’usabilità: una architettura dell’informazione disordinata rende vano anche il miglior design visivo.
4. Skeleton (Scheletro)
Con lo “Skeleton” si entra nella prima fase in cui si costruisce operativamente l’apparato visivo con cui l’utente si relazionerà concretamente. È qui che vediamo per la prima volta in azione l’Interface Design. In questa fase vengono prodotti i primi wireframes delle schermate, ovvero bozzetti strutturali privi di colori o immagini definitive, utili per lavorare sul Navigation Design. Si definisce la struttura visiva di navigazione sulla piattaforma, includendo il posizionamento dei tasti, delle funzioni principali e dei blocchi di testo. Lo scopo è ottimizzare la disposizione degli elementi per favorire una navigazione fluida, un concetto che approfondiamo spesso quando parliamo di User Interface Design.
5. Surface (Superficie)
In quest’ultima fase, la più concreta, si passa alla definizione degli aspetti grafici definitivi come il layout, i colori, il typeface (caratteri tipografici) e tutti gli elementi visuali. È importante sottolineare che non si tratta di pura estetica: il Visual Design dell’app o del sito influenzerà notevolmente l’esperienza d’uso dell’utente, determinando il livello di engagement e la facilità di lettura. Una superficie curata deve rendere giustizia a tutto il lavoro invisibile svolto nei livelli inferiori. La qualità dei media content utilizzati in questa fase è determinante per la credibilità del brand.
L’applicazione pratica del modello
Il modello di Garrett ha contribuito notevolmente, nella storia della User Experience, a chiarificare molti dei punti chiave del processo di progettazione. Tuttavia, deve essere inteso come un canovaccio flessibile: se utilizzato senza la necessaria elasticità, rischia di diventare una gabbia che soffoca la creatività o rallenta lo sviluppo. Ogni progetto è diverso e non esiste una formula rigida che valga per ogni occasione, per ogni sito web o per ogni app.
L’integrazione di questi livelli deve avvenire in modo fluido. Ad esempio, le decisioni prese nella fase di “Structure” devono essere validate attraverso la User Research per assicurarsi che i tragitti di navigazione ipotizzati corrispondano ai modelli mentali reali degli utenti. Inoltre, una superficie ben progettata deve saper valorizzare la visualizzazione grafica dei dati e i contenuti di valore, come gli expert content, rendendoli accessibili e piacevoli da consultare. In ultima analisi, lo schema di Garrett ci insegna che un’esperienza utente memorabile nasce da una pianificazione invisibile che precede sempre l’impatto visivo finale.
Domande frequenti sullo schema di Garrett
Perché lo schema di Garrett è rappresentato come una piramide o una scala?
Perché ogni livello poggia su quello inferiore. Non puoi progettare lo “Skeleton” (la disposizione degli elementi) se non hai prima definito lo “Scope” (cosa deve esserci dentro). Saltare uno dei livelli porta inevitabilmente a incongruenze strutturali che l’utente percepirà come malfunzionamenti o difficoltà d’uso.
È possibile lavorare su più livelli contemporaneamente?
Sì, nella pratica moderna dello sviluppo agile spesso i livelli si sovrappongono. Mentre si definisce la strategia, si possono già abbozzare alcuni requisiti di contenuto. L’importante è che le decisioni prese ai livelli superiori (più concreti) non entrino in conflitto con le fondamenta stabilite ai livelli inferiori (più astratti).
Qual è la fase più critica dello schema?
Sebbene tutte siano importanti, la fase di “Strategy” è la più critica: un errore di posizionamento o una mancata comprensione del target in questa fase iniziale compromette l’efficacia di tutto il lavoro successivo, indipendentemente da quanto bella sarà la “Surface” finale.
Come si collega lo schema di Garrett alla SEO?
La fase di “Structure” (Information Architecture) è fondamentale per la SEO. Una gerarchia logica dei contenuti e un sistema di etichettatura chiaro (labeling) non aiutano solo l’utente, ma permettono ai motori di ricerca di scansionare e indicizzare correttamente il sito.
Lo schema di Garrett è valido anche per il redesign di un sito esistente?
Assolutamente sì. Spesso il redesign parte proprio dall’analisi dei livelli inferiori per capire cosa non ha funzionato nella versione precedente. Potrebbe emergere che il problema non era estetico (Surface), ma strutturale (Structure) o di mancanza di contenuti rilevanti (Scope).