Lo scopo principale degli strumenti di navigazione di un sito, come
abbiamo visto, è 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:
- 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… - 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:
- Economia visiva: non vi sono orpelli inutili
- Completezza: tutto è catalogato e raggiungibile in qualche
modo - 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:
- 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. - 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. - 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