Cosa rende il design di un sito web veramente efficace? Una grafica accattivante, una scelta attenta dei colori, l'uso di Flash per animare un pò l'interazione con la nostra applicazione. Qualcuno potrebbe giustamente dire che queste sono scelte di design che contribuiranno ad aumentare, o ridurre, l'efficacia che il sito avrà sugli utenti. In parte è vero. Sono infatti l'usabilità e l'utilità di un sito a determinarne il successo o il fallimento, non l'aspetto.
Principi
Vediamo in ordine un insieme di principi base necessari per capire in che modo gli utenti interagiscono con i siti web. Questo ci permetterà di delineare una serie di pattern del comportamento dell'utente sulla base dei quali progettare un design veramente efficace.
1) Non farmi pensare
La prima e la più famosa regola indicata da Steve Krug sull'usabilità. Significa che, per quanto sia possibile, quando guardo la pagina di un sito essa dovrebbe essere autoesplicativa, dovrei poterla usare e interpretare senza sforzo e, appunto, senza pensarci.
2) Creare una chiara gerarchia visiva
Uno dei modi migliori per rendere una pagina facile da afferrare al volo è assicurarsi che l'aspetto delle cose sulla pagina, ovvero ogni indizio visivo, ritragga in modo chiaro e accurato le relazioni tra gli oggetti della pagina: quali cose sono correlate e quali cose sono parte di altre. In altre parole, ogni pagina dovrebbe avere una gerarchia visiva.
- più un elemento è importante, più è messo in rilievo - ad esempio i titoli più importanti sono più grandi, delineati e spaziati;
- alla correlazione logica corrisponde anche una correlazione visiva - la similarità degli elementi può essere rappresentata con uno stile visuale comune;
- gli elementi sono visivamente nidificati per mostrare cosa è parte di cosa.
Il principio della gerarchia visiva è ereditato direttamente dalla stampa e dalle sue pratiche di impaginazione dei giornali. Ogni pagina di giornale, per esempio, usa il dare rilievo, il raggruppare e il nidificare per trasmettere informazioni utili sul suo contenuto prima ancora che il lettore abbia letto una sola parola.
Ogni giorno analizziamo gerarchie visive, sia online sia su carta, ed è un fatto che accade in modo così rapido che ce ne rendiamo conto solo quando non riusciamo a farlo. Il vantaggio di una buona gerarchia è che ci risparmia la fatica di pre-elaborare la pagina, organizzando e stabilendo priorità nei contenuti in un modo che ci permetta di scannerizzarla quasi istantaneamente.
Il processo di scansione, diverso da quello di lettura, sarà più lento nelle pagine prive di gerarchia perché dovremo impiegare un maggiore sforzo cognitivo per capire come sono organizzati i contenuti e di cosa parlano.
Analizzare una pagina dalla gerarchia difettosa, dove ad esempio un titolo raccoglie sotto di sé contenuto che non c'entra nulla con esso, è come leggere una frase costruita male, obbligandoci a rallentare la nostra scansione e soffermarci sul contenuto più del dovuto.
3) Le convenzioni sono vostre amiche
Capita spesso, durante la progettazione, di dover scegliere tra innovare o seguire una convenzione. Ogni mezzo di comunicazione sviluppa le proprie convenzioni nel corso del tempo, perfezionandole. Quelle del web sono perlopiù derivate dalle convenzioni di giornali e riviste. Dietro una convenzione c'è sempre un'idea innovativa che, se funziona bene, viene imitata fino a che la sua diffusione si estende al punto di non avere più bisogno di spiegazioni, e questo processo su internet avviene molto più velocemente che su ogni altro media.
Il titolo di una pagina è solitamente scritto in un carattere forte e chiaro, il testo sottostante a un'immagine rappresenta una didascalia, mentre la convenzione metaforica dell'icona del carrello della spesa è ormai più che comune in molti siti di e-commerce. Potremmo proseguire con numerosi altri esempi, ma quello che ci interessa capire è che:
- le convenzioni sono utili quando funzionano. Se ben applicate rendono più facile all'utente passare da un sito all'altro senza uno sforzo eccessivo per capirne il funzionamento.
- i progettisti non amano le convenzioni. Di fronte a questa prospettiva, infatti, i designer tendono a voler reinventare perché sentono che il loro lavoro li chiama a dover creare qualcosa di nuovo e diverso.
4) Minimizzare il rumore
L'insidia maggiore per una pagina facile da interpretare "al volo" è il rumore visivo. Ne esistono due tipi:
- Sovraffollamento. Quando ogni elemento della pagina reclama l'attenzione dell'utente si corre il rischio di travolgerlo con un eccesso di informazioni. L'utente, frustrato, abbandona in tempi rapidi il sito.
- Rumore di fondo. Non ci sono elementi tanto forti da distrarre l'utente, ma vi è un leggero rumore visivo di fondo che logora comunque l'attenzione. Per questo motivo un design efficace è nel dettaglio della pagina. Gli utenti hanno mutevoli gradi di tolleranza alla complessità e alle distrazioni.
In fase di progettazione è meglio partire dal presupposto che tutto può essere rumore visivo.
5) Scomporre le pagine in aree ben definite
Ogni utente che arrivi sul nostro sito, dopo una veloce lettura delle diverse aree, dovrebbe essere in grado di riconoscere la funzione di ciascuna ed esclamare "questa è la navigazione", "link alle notizie principali", "i prodotti dell'azienda" e così via.
Dividere le pagine in aree ben definite è importante perché consente agli utenti di decidere in fretta su quali aree della pagina focalizzarsi e quali invece ignorare. Gli studi oculari dimostrano che queste decisioni sono prese con estrema rapidità, in pochi secondi, e che un utente difficilmente volge lo sguardo verso ciò che viene ritenuto di scarso interesse, come se non esistesse.
Un design efficace riesce a minimizzare, o addirittura eliminare, questa eventualità grazie a uno studio e ad una progettazione accurata del layout. Gli elementi d'interesse sono infatti posizionati in punti chiave del sito così che l'utente li possa trovare, e ritrovare, senza pensarci.
La tecnica della proporzione divina consente di progettare un'applicazione chiara, intuitiva, tenendo conto del processo mentale degli utenti quando visitano un sito. Analizzeremo nel dettaglio questa tecnica nella seconda parte dell'articolo.
Sezione Aurea e proporzione divina
Con sezione aurea si indica un rapporto fra due lunghezze disuguali, di cui la maggiore è medio proporzionale rispetto la minore e la loro somma, e lo stesso rapporto esiste tra la minore e la loro differenza.
In formule, indicando con a e b le due lunghezze, vale la relazione:
(a+b) : a = a : b = b : (a-b)
Questo rapporto è pari a 1.618033988749895 ≈ 1.618
Sin dal Rinascimento artisti, architetti e poi designer hanno basato il loro lavoro di progettisti su questa regola matematica che, a causa della sua frequente ripetizione in molti contesti naturali slegati tra loro, ha indotto l'uomo a cogliervi un ideale di bellezza ed armonia da riprodurre.
L'idea sottostante a questa regola era che, poiché era possibile riscontrare la sezione aurea nelle proporzioni del corpo umano, nonché in altri svariati esempi naturali, questa potesse essere la base ottimale su cui strutturare tutto l'ambiente circostante, in modo che risultasse armonico e armonizzato ad esso secondo una presupposta regola naturale, identificata appunto nella proporzione aurea.
Bene, ma cosa c'entra il web in tutto questo?
Un layout "divino"
Applicare la regola della proporzione divina per progettare sul web ci consente di creare un layout bilanciato nei rapporti di forza tra le varie sezioni e gli elementi che ne fanno parte.
Per il nostro esempio partiamo dal classico layout a 960px di larghezza, divenuto da tempo uno standard. Supponiamo di voler creare un blog, con una colonna centrale per i contenuti e una sidebar per la navigazione e i link di terze parti.
Seguendo la proporzione della sezione aurea ricaviamo la misure esatte delle colonne che compongono la griglia di base. Vediamo nel dettaglio i calcoli effettuati:
- Partendo dal valore di 960px, dividiamo per 1.62, approssimando. Il risultato è 593px.
- Sottraiamo il valore appena calcolato di 593px dal valore totale di 960px. Avremo la larghezza della sidebar: 367px.
- Se ora calcoliamo il rapporto tra 593px e 367px e il rapporto tra la loro somma(960px) e il "segmento maggiore", ovvero 593px, avremo il valore di 1.62.
Un aspetto ulteriormente interessante è che, oltre a un rapporto bilanciato tra le due sezioni principali della pagina, otteniamo anche un bilanciamento della lunghezza del testo di circa 90 lettere per riga. Una misura ottimale è stimata tra i 60 e le 80 lettere. Dunque l'ottimizzazione del layout ci consente di lavorare in modo preciso anche sulla leggibilità dei contenuti, incrementando l'usabilità generale del sito e creando un'esperienza migliore per l'utente.
La regola dei Terzi
La regola dei Terzi è una tecnica molto utilizzata in fotografia per la composizione delle immagini.
Questo postulato consiste nel dividere i lati della fotografia in tre parti uguali. Partendo da queste divisioni, si tracciano delle rette parallele alla base e all’altezza. I punti nei quali queste rette si incrociano sono i vertici di un rettangolo centrale nella presa, denominato zona aurea.
Ponendo il soggetto in prossimità di uno dei vertici della zona aurea si ritiene che l’immagine risulti più dinamica (rispetto ad una composizione che pone il soggetto al suo centro), ma armonica al tempo stesso.
Questa nuova dimensione rappresenta il centro dell'attenzione, un'area che l'occhio umano riconosce come la più importante di tutta la composizione. Per questo bisogna stare attenti, a maggior ragione, a non saturare i quattro punti di questa nuova dimensione. Se fosse questo il caso, avremmo quattro fuochi di forte interesse, con cui esisterebbe una grossa confusione compositiva.
Diventa facile capire quindi l'importanza di applicare una simile regola ad un layout di un sito web. Analizziamo un esempio reale, il sito rockatee.com.
Una grafica decisamente accattivante e ricca di elementi visuali. Il nostro occhio rischierebbe di perdersi in questo sovraffollamento di immagini e colori, però questo non accade. Analizziamo il perchè negli screenshot seguenti.
Individuiamo la zona aurea e i quattro vertici che ne definiscono la dimensione. Scopriamo in questo modo come il progettista che ha lavorato al layout abbia posizionato le aree di maggior interesse del sito in prossimità di due vertici diagonalmente opposti del rettangolo: l'area in alto a sinistra dove sono posizionati non solo il logo, come è usuale fare, ma anche una breve descrizione introduttiva del sito molto utile. Nel vertici basso a destra invece un altro elemento fondamentale, obiettivo del sito: il portfolio.
La collocazione di questi oggetti principali del layout nei due vertici opposti della zona aurea attraggono la vista dell'utente. Così, la fuga della simmetria crea un’armonia compositiva molto più interessante per l’occhio umano.
Nella maggior parte dei casi non è usabile nè possibile utilizzare tutti e quattro i punti di interesezione per evidenziare funzionalità o elementi di navigazione in un design. Usualmente uno o due sono sufficienti per organizzare e disporre le aree di maggior interesse del sito. L'angolo in alto a sinistra è riconosciuto come il più "forte", poiché l'occhio umano segue un percorso di scansione della pagina ad F.
Un utente che arriva su questa pagina proveniendo da un sito esterno, senza un'idea di cosa apparirà a breve sul suo schermo, avrà invece sott'occhio ciò di cui necessita per capire dove si trova, in che direzione può muoversi (di più, gli viene suggerita un'autostrada verso il portfolio) e di cosa parla il sito.
L'utilizzo delle regole appena illustrate, proporzione divina e regola dei terzi, dunque consente al progettista di creare un design che comunica in modo semplice, rapido ed efficace il messaggio per il quale è stato concepito.
