Gli elementi strategici del web: la gerarchia visiva (diagramma 1)

Posted on

In un mondo sempre più connesso, i siti web sono i mezzi principali per trasmettere la propria immagine in rete sia per le aziende che per le persone. Quando si naviga accade molto spesso che uno dei pericoli più fastidiosi sia quello di avere a che fare con siti o pagine web che non corrispondono alle nostre aspettative estetiche, né tanto meno pratiche. Il fraintendimento, la confusione e la seccatura sono spesso dietro l’angolo, sotto un link che non funziona, una pagina che si carica troppo lentamente, o semplicemente forme geometriche, colori e caratteri che stonano gli uni con gli altri.
L’usabilità è quell’insieme di caratteristiche che permettono ad un sito web di possedere qualità come efficacia, efficienza e soddisfazione da parte degli utenti finali.

Il suo primo requisito è una buona gerarchia visiva.

L’occhio umano obbedisce a routine esperienziali che lo portano ad analizzare ciò che vede, definendo analogie e distinzioni, componendo e scomponendo forme in base alla loro dimensione o tonalità, comparando costantemente tutti gli elementi che incrociano il suo spettro visivo. In pratica crea relazioni a seconda di determinate consuetudini “visive” che lo portano a concentrare la propria attenzione su certi elementi piuttosto che altri.
Un moderno sito web si definisce efficace dal punto di vista visivo quando riesce a comunicare immediatamente, con semplicità e accortezza, tutte le informazioni principali che vuole trasmettere, garantendo allo stesso tempo un’esperienza di navigazione pratica ed efficiente.

 Ecco gli elementi fondamentali di una buona gerarchia visiva.

 v  Contrasto tra un elemento ed un altro, ovvero la prima differenza che aiuta a distinguere gli elementi e far concentrare l’utente sugli elementi a cui vogliamo dare risalto. Si può ottenere per dimensione (un elemento più grande attirerà un’attenzione maggiore rispetto ad uno piccolo) o per colore (colori troppo sgargianti possono destabilizzare e corrompere il tono generale del sito).

Ripetizione, l’associazione di una regola ad un gruppo di elementi che svolgono la stessa azione contribuisce a quegli elementi un significato comune e condiviso.

Allineamento, ovvero la gestione degli spazi. Tutti storciamo il naso quando ci troviamo difronte ad una pagina web dove manca una corretta delimitazione e gestione dei diversi elementi che la compongono. L’utente non si lamenterà mai di una pagina ben strutturata: l’allineamento di tutti gli elementi garantisce ordine al flusso comunicativo.

Vicinanza, ovvero ciò che crea le sotto-gerarchie che danno significato agli elementi visivi.

Il primo diagramma per posizionare alla meglio gli elementi della nostra pagina web è quello di Gutemberg. Questo divide il layout in quattro aree, e si scopre particolarmente adatto a pagine ricche di testo:

 Aree-interesse-WEb