Gerarchia visiva

La gerarchia visiva è la disposizione degli elementi su uno schermo in modo che la loro importanza relativa risulti immediatamente evidente prima ancora di leggerli. Essa è determinata da dimensioni, spessore, colore, contrasto, spaziatura, posizione e raggruppamento, e stabilisce l'ordine in cui l'attenzione si muove all'interno di una pagina. Poiché le persone tendono a scorrere velocemente lo schermo anziché leggerlo attentamente, la gerarchia è spesso l'unica forma di comunicazione che si verifica prima di decidere se rimanere o abbandonare la pagina.

Una gerarchia efficace risponde a tre domande nei primi istanti del caricamento di una pagina: di cosa tratta questa pagina, cosa posso fare qui e dove posso guardare ora. Quando la gerarchia è chiara, un visitatore che scorre la pagina senza leggere un'intera frase può comunque orientarsi correttamente. Quando è piatta, ogni elemento compete alla pari, l'occhio non ha un percorso da seguire e il visitatore deve leggere per capire, cosa che molti non faranno.

La gerarchia si crea tanto attraverso la moderazione quanto attraverso l'enfasi. Dare risalto a qualcosa implica necessariamente rendere meno evidenti altre cose, ed è per questo che la gerarchia si degrada inevitabilmente nelle organizzazioni in cui più soggetti interessati rivendicano ciascuno uno spazio sulla pagina. Il meccanismo è ben documentato: ogni trimestre viene promosso un elemento diverso, nulla viene mai declassato e, dopo due anni, la pagina presenta sei punti focali in competizione tra loro e nessuna gerarchia. Ripristinarla richiede una decisione esplicita sulla priorità, che sia di natura organizzativa piuttosto che visiva.

Lo spazio bianco è lo strumento più costantemente sottovalutato a nostra disposizione. Lo spazio attorno a un elemento lo isola e ne aumenta l'importanza percepita, mentre lo spazio tra i gruppi comunica che si tratta di elementi distinti senza bisogno di un bordo o di un titolo. Le richieste di ridurre lo spazio bianco per inserire più contenuti nella parte visibile della pagina (above the fold) di solito danneggiano la gerarchia della pagina più di quanto non facciano i vantaggi in termini di contenuto aggiuntivo, perché una pagina densa non comunica nulla rapidamente e una pagina che non comunica nulla rapidamente viene ignorata o abbandonata.

La gerarchia non è puramente visiva e trattarla come tale crea problemi di accessibilità. La struttura semantica di una pagina, espressa attraverso i livelli di intestazione, i punti di riferimento e l'ordine di lettura, è la gerarchia che le tecnologie assistive trasmettono e dovrebbe corrispondere a quella visiva. Una pagina in cui l'elemento visivamente dominante è contrassegnato come un div senza stile, o in cui i livelli di intestazione sono scelti per il loro aspetto piuttosto che per il loro significato strutturale, presenta una gerarchia diversa agli utenti di screen reader rispetto agli utenti vedenti.

La gerarchia deve anche resistere a contenuti reali, ed è proprio in questo ambito che la maggior parte dei design fallisce dopo il lancio. Un layout che risulta chiaro con un titolo di sei parole e un'immagine di prodotto accuratamente selezionata si comporta in modo diverso con un titolo di quaranta parole, un'immagine mancante, un nome di prodotto lungo e tre badge promozionali applicati da un team di merchandising. Progettare con una gamma realistica di contenuti, includendo le stringhe più lunghe plausibili e i dati meno lusinghieri, piuttosto che con esempi idealizzati, è ciò che impedisce a una gerarchia di crollare nella prima settimana di utilizzo. Questo è anche un argomento a favore di una regolamentazione dei meccanismi che consentono a chi non si occupa di design di aggiungere enfasi, poiché la possibilità illimitata di applicare badge, banner e stili di evidenziazione verrà, col tempo, sfruttata fino a quando l'enfasi non avrà più alcun significato.

Verificare la gerarchia è semplice e raramente viene fatto. Un test di cinque secondi rivela cosa le persone effettivamente ricavano da una prima impressione. Un test con gli occhi socchiusi, in cui il design viene sfocato fino a quando rimangono solo forme ampie, rivela se sopravvive un singolo punto focale. Leggere la pagina solo come schema di intestazione mostra se la struttura ha senso senza stile visivo. Questi controlli sono standard in un Audit dell'esperienza utentee codificando le regole risultanti come un sistema definito di scala di tipo, scala di spaziatura e enfasi in progettazione del prodotto Il lavoro è ciò che impedisce alla gerarchia di erodersi nuovamente con la creazione di nuove pagine.