Il design della navigazione
di M. Boscarol (www.usabile.it)
Lo scopo principale degli strumenti di navigazione di un sito è quello di fornire all'utente indicazioni su dove è e su dove può andare.
Devono poter contenere informazioni anche sui contenuti: 'dove posso andare' significa infatti 'verso quali contenuti/servizi posso
andare'. Gli strumenti di navigazione devono quindi farsi carico di compiti di comunicazione di struttura,
contenuti e funzionalità del sito, in maniera completa e al tempo stesso flessibile. Vediamo attraverso quali
passaggi è possibile ottenere questi risultati. Al termine verificheremo i vantaggi pratici di un piano di navigazione ben riuscito con un esempio reale.
Il primo passo: decidere la struttura.
Alla base di ogni scelta di navigazione vi sono accurate decisioni che riguardano l'architettura delle
informazioni, ovvero il modo in cui avete deciso di suddividere logicamente le informazioni del vostro sito.
L'architettura informativa dà l'indispensabile struttura al vostro sito, ed è di vitale importanza riflettere bene su questo aspetto perché inciderà pesantemente su tutte le scelte successive.
Non vogliamo riassumere in un breve articolo i metodi necessari ad una buona progettazione
dell'architettura informativa. Ci limitiamo a descriverne uno dei più diffusi: il card sorting.
Secondo questa tecnica, ogni voce o unità informativa che si intende comprendere nel sito andrà scritta
su un cartoncino o un foglietto, utilizzando una descrizione verbale semplice e significativa per l'utente finale. Una semplice trasposizione delle attività aziendali in gergo manageriale può non essere una buona
idea, perché il vostro utente potrebbe non avere le competenze adatte per capire di che si tratta.
Una volta descritti tutti i contenuti sui diversi cartoncini, bisogna dare ordine al caos. In una parola:
raggruppare le voci. Il card sorting prevede che questa attività di raggruppamento venga svolta da diversi
soggetti rappresentativi dalla vostra "utenza-tipo". In realtà è più frequente che venga svolta da colleghi
o da persone di più facile reperimento... Chiedendo agli utenti di raggruppare e denominare i contenuti nella maniera per loro più significativa, comunque, vi assicurerete di evitare errori dovuti ad una visione
troppo centrata sulla vostra azienda o sui processi di management, che solitamente sono troppo specialistici per l'utenza media.
Il vantaggio di utilizzare diversi soggetti tratti dall'utenza reale è quello di verificare se il criterio di
raggruppamento utilizzato sia comune e condiviso. In caso affermativo, è molto probabile che quello sia il criterio migliore per la vostra utenza.
In caso di difformità, invece, dovrete chiedervi a cosa possano essere dovute. Forse i soggetti sono troppo disomogenei fra loro, o forse i foglietti presentano nomi di difficile comprensione. In tal caso,
dovrete rivedere il processo, meglio se con l'ausilio di un professionista.
Qualunque tecnica utilizziate, è bene non sottovalutare questa fase, perché un errore a questo punto del
processo si rifletterebbe negativamente sul prodotto finito, che sarà molto più costoso correggere.
I problemi del labeling
Una volta trovati i criteri di raggruppamento del materiale che comporrà il vostro sito, trovate i nomi giusti
per indicare i diversi gruppi. Anche siti che hanno una navigazione elementare possono presentare problemi di labeling. Ad esempio, per la sezione di Usabile che elenca tutti gli articoli pubblicati, voi quale
voce scegliereste? Indice, Archivio, Articoli, Elenco, o altro ancora?... L'indice può sembrare l'indice del
sito, l'archivio qualcosa che raccoglie documenti imprecisati, articoli in italiano può richiamare articoli in vendita, mentre elenco è decisamente generico...
Vogliamo fare un po' i pignoli, ma non troppo: non sono rari i siti ricchi di contenuti interessanti che
utilizzano label (etichette verbali) fantasiose ma ben poco significative per l'utente, che quindi non capisce assolutamente dove cercare le cose che più lo interessano. Ponete dunque l'adeguata attenzione
a questa fase.
Se il raggruppamento è stato condotto appropriatamente, vi troverete con alcune categorie concettuali
di navigazione chiare e coese. Tipicamente, potrebbero essere:
-
Categorie nelle quali sono suddivisi i contenuti o i prodotti (ad esempio: libri, cd, dvd, software, ecc...)
-
Elementi di community (forum, mailing list, newsletter, caselle e-mail, aree riservate)
-
Features del sito (helps, tour guidati, mappe del sito, contatti)
Tenete presente che in alcuni casi potreste aver bisogno di spazio per una navigazione locale o
secondaria: ad esempio, in una categoria dei prodotti potreste trovar utile inserire ulteriori suddivisioni; o ancora, potresete dover presentare informazioni accessorie e contestuali. Accertatevi di prevedere nel
layout finale lo spazio relativo.
Stabilire delle gerarchie
A questo punto inizia il processo di gerarchizzazione. Dovete decidere quale di questi gruppi di link è più
importante. In alcuni casi è possibile che non riusciate a scegliere: ad esempio in siti molto compositi come quelli delle pubbliche amministrazioni, o in siti che si sono sviluppati in maniera disomogena nel
tempo: volendo dare importanza a tutto, finite per far competere gli elementi nel catturare l'attenzione del visitatore. Ricordate: l'attenzione è una risorsa limitata!
Se non ce la fate a stabilire delle chiare gerarchie, forse è il segnale che dovete ripetere il processo di
raggruppamento e categorizzazione delle voci. Utilizzate altri criteri: da quello oggettuale a quello funzionale, per esempio. Invece di elencare i tipi di prodotti, elencate le possibili azioni che gli utenti
possono voler fare. In pratica, se utilizzando i nomi (es: alberghi, ristoranti, agriturismi, farmacie, ospedali) non ottenete un risultato sintetico, attraverso una diversa categorizzazione potreste migliorare
notevolmente la vostra navigazione (es. ospitalità, sanità, ecc.). In questa come in tutte le fasi, la cosa migliore è chiedersi di cosa può aver bisogno un utente reale visitando il nostro sito: orientate la
navigazione in maniera che sia un ausilio per le scelte d'azione dell'utente, piuttosto che perché sia onnicomprensiva dell'azienda o dell'ente. Un sito non è una brochure: non è fatto per essere guardato, ma
utilizzato con scopi precisi. Solo se non vi è niente che sia possibile fare sul sito, un approccio 'da guardare' può essere quello più adeguato.
I gruppi di voci istituzionali (relativi all'azienda o al 'chi siamo') dovrebbero essere ben distinti da quelli
relativi alle offerte o alla struttura informativa. Il che non impedisce una certa ridondanza: è possibile che
vi sia un indice complessivo dei prodotti in un gruppo di navigazione, e un elenco delle diverse categorie di
prodotti a costituire un altro gruppo. Fornire più vie d'accesso ai contenuti è normalmente un aiuto per l'utente, a patto che i criteri delle diverse categorizzazioni siano ben distinti e non si possano
confondere. Detto in maniera più semplice: non dovrebbero esserci due voci possibili per la stessa azione, ma solo due voci per arrivare allo stesso punto attravero azioni ed intenzioni differenti
. Consultare un indice è ben diverso dal cercare all'interno di una precisa categoria dei prodotti, ma in entrambi i modi posso giungere al prodotto.
Tuttavia il percorso logico che indicherà la strada delle varie pagine rimarrà sempre lo stesso (non si
modificherà a seconda della via d'accesso). Infatti il path, o 'percorso a briciole di pane' indica il posizionamento logico del file nella struttura complessiva: non la strada che l'utente ha fisicamente
seguito per arrivarci.
Strumenti di organizzazione visuale
Comunque venga scelta, la gerarchia dev'essere rappresentata in maniera visualmente significativa: non
lasciate che gruppi di navigazione diversi competano fra di loro. Gli strumenti visuali che avete a disposizione sono potenti e ben codificati. In generale interventite su: dimensioni, forme, posizionamento
relativo e colori. Ma il colore dovrebbe essere l'ultima ratio, un mero elemento di stile: il vostro layout
dovrebbe funzionare anche in grigio, solo con il posizionamento relativo e l'aspetto delle voci e dei gruppi. Vi sono regole di organizzazione percettiva che ogni buon grafico dovrebbe conoscere, e che non è
questa la sede per illustrare. Le più importanti comunque sono:
- 1. Vicinanza: è il primo criterio di raggruppamento figurale: voci vicine sono percepite come
un'unità. Attenzione però: le voci non dovrebbero essere così vicine da creare difficoltà nell'atto di cliccare! E' bene rinunciare in parte al concetto di vicinanza, piuttosto che creare menu con voci
talmente piccole e fitte che richiedano molta attenzione per essere correttamente selezionate. L'utenza media non è così abile nel manovrare il mouse, e spesso neanche l'utenza esperta...
- 2. Somiglianza: voci dall'aspetto simile sono più facilmente percepite come un gruppo. Pertanto
le voci dello stesso gruppo dovrebbero avere un aspetto simile. Evitare se possibile voci troppo più lunghe delle altre e disposte magari su due righe: contrastano l'effetto di somiglianza.
Altre regole di organizzazione percettiva vi saranno certamente suggerite da un buon grafico
web.Guardate il vostro layout: la gerarchia è chiara? Ci sono elementi che competono fra loro per rilevanza visuale? Che creano 'rumore di fondo' ostacolando la leggibilità? La loro eliminazione passa per un
buon design della navigazione, a cui l'usabilità e le regole di organizzazione figurale possono offrire un contributo realmente decisivo.
Un esempio: Adobe.com
Un progetto di navigazione particolarmente ben riuscito è il redesign (risalente alla scorsa estate) del sito www.adobe.com, opera di Hillman Curtis,
un noto Flash designer che però dimostra di essere prima di tutto un
designer tout-court. Il lavoro è tanto più significativo se consideriamo che
non è stato modificato il precedente layout (presumibilmente per non
disorientare gli utenti abituali, oltre che perché, oggettivamente, non se
ne evidenziava la necessità). La pagina si presenta così organizzata
Notiamo come la software house dedicata alle soluzioni per la grafica professionale abbia individuato dei
sistemi logicamente e visivamente ben distinti per il proprio sistema di navigazione.
Accanto al logo, nella barra nera che sovrasta le pagine, vi sono due gruppi di navigazione distinti senza
orpelli grafici (cornici, fondini), ma con il solo variare dei rapporti di vicinanza fra le voci. Vi è anche una
variazione di colore, ma è ridondante: non necessaria per la comprensione. Il primo gruppo presenta quella che potremmo chiamare la navigazione principale, istituzionale, costituita da sole 4 voci: store, products,
support e corporate. Queste 4 voci consentono un efficace instradamento degli utenti sulla base delle categorie concettuali di informazione cui sono interessati.
Il secondo gruppo consiste in tre voci (due nella versione italiana, che non presenta la traduzione di
Adobe Studio, una sezione del sito dedicata a consigli d'uso per gli utenti dei propri prodotti, una specie di magazine con compiti di community) che non sono altro che facilities del sito: Adobe Studio, ricerca e
contatti. In un sito ampio e complesso come quello della Adobe, la funzione di ricerca testuale è particolarmente importante per tutti gli utenti che abbiano esigenze molto specifiche. Da notare che, a
differenza del gruppo precedente, in questo secondo gruppo di navigazione le voci sono divise da una barra verticale ( "|" ). Un vezzo?
Tutt'altro. Si tratta di una scelta funzionale, resasi necessaria proprio per la presenza della voce "Adobe
Studio": si tratta dell'unica etichetta verbale composta di due parole! Per raggruppare le due parole in maniera che non sembrassero due link ma uno solo, si è scelta la barra verticale come spaziatore, dato
che la sola vicinanza poteva in questo caso indurre delle ambiguità.
La parte centrale della pagina è dedicata alle notizie, alle offerte, alle ultime release. Notiamo ancora
all'opera il principio di vicinanza nel rapporto fra le immagini rotonde e il testo relativo. Non si fa uso di altri
espedienti per il raggruppamento delle informazioni. Nessuna cornice, nessun fondino colorato (a parte quello che domina l'intera pagina, e che rafforza la coerenza visiva dell'insieme). Eppure non vi sono
difficoltà nell'attribuire ogni testo alla relativa immagine.
Sulla destra, infine, un'ulteriore lista di voci categoriali, che rappresentano le categorie di prodotti: per il
web design, per la stampa, l'animazione, ecc. In questo modo si presume una segmentazione degli interessi dell'utenza all'interno del più generale interesse per la grafica. Invece di scegliere la voce
'prodotti' nella barra orizzontale, si consente a chiunque di approfondire la sezione che più gli interessa.
Inoltre viene sdoppiata la voce Adobe Store (già presente nella navigazione principale): un chiaro segnale che si tratta di una sezione che sta particolarmente a cuore alla Adobe.
A parte questo sdoppiamento, è da notare che le strade per raggiungere le informazioni sono logicamente
diverso nelle tre sezioni di navigazione: secondo una rigida struttura ad albero nel primo caso, secondo
una modalità di ricerca testuale nel secondo, attraverso il tipo di prodotto nel terzo. In più, le novità sono sempre adeguatamente segnalate nella parte centrale della pagina.
Questo sistema è significativo per molti motivi, fra i quali sottolineiamo i seguenti:
- 1. Economia visiva: non vi sono orpelli inutili
- 2. Completezza: tutto è catalogato e raggiungibile in qualche modo
- 3. Ridondanza: vi sono diversi possibili modi di accedere alle stesse informazioni
L'apparente semplicità del sito Adobe è il risultato di un attento design della navigazione, che poggia su
un'accorta profilazione degli utenti e su una solida architettura informativa, pur essendo il sito composto
di svariate centinaia di pagine. L'utilizzo di espedienti di raggruppamento figurale è messo al servizio di una struttura logica, economica, efficace ed efficiente, senza trascurare uno stile figurativo elegante e
sintetico, perfettamente funzionale agli scopi del sito.
Non è tutto oro...
Il sito della Adobe presenta tuttavia alcuni problemi minori di usabilità (non di design) che potrebbero
essere risolti per migliorare definitivamente l'interfaccia. Vediamoli in dettaglio:
- 1. La tagline (lo slogan che accompagna il logo e che serve per definire l'azienda) è: "Everywhere
You Look" (ovunque guardi: è un chiaro riferimento alla fornitura di strumenti per la creazione di qualunque tipo di prodotto visuale). E' un ottimo slogan pubblicitario, ma non spiega di che si
occupa l'azienda a chi non la conosce già. E' probabile che il target Adobe non risenta di questa carenza, ma si tratta tuttavia di un aspetto che potrebbe forse essere rivisto.
- 2. Le scritte della navigazione sono costituite da immagini gif! Tale discutibile pratica è una
consuetudine deprecabile dello stesso Hillman Curtis, che la utilizza anche per il suo sito (e la porta
addirittura allo spasimo: là tutti i testi sono immagini!...), forse perché riesce a ottimizzare le gif in maniera da ottenere immagini meno pesanti del corrispondente codice. Più probabilmente, il motivo
è da ricercare nel maggior controllo sulla visualizzazione. Ma su web bisognerebbe tenere separati contenuto e visualizzazione! Se l'utilizzo di immagini per il testo può essere considerato accettabile
nel caso di titoli che abbiano una particolare cura estetica impossibile da riprodurre via html (e, per quanto riguarda l'antialiasing, anche via css), non è spiegabile quando imitano proprio i testi html
come in questo caso! Infatti le voci di menu su campo nero potrebbero essere fissate attraverso i css, garantendo maggior accessibilità e maggior standardizzazione del codice attraverso una
separazione fra forma e contenuto. La presenza degli attributi 'alt' minimizza comunque l'impatto di questo problema. Anche i testi della parte centrale della pagina sono immagini gif, mentre non lo
sono le descrizioni relativi alle voci di menu sulla destra.
- 3. Al link per la ricerca testuale è normalmente preferibile il box di ricerca, nel quale l'utente può
direttamente iniziare la ricerca, risparmiando un click. E' semmai possibile linkare una voce dedicata all'eventuale funzione di "ricerca avanzata".
Nonostante questi problemi (peraltro, insistiamo: poco o nulla rilevanti per il target specifico del sito), il
design della navigazione di Adobe rimane un ottimo esempio di organizzazione logica e visiva di un sito ampio e complesso attraverso sistemi eleganti e flessibili.
|
