Il design della navigazione | Usabile.it

Usabile.it

usabilità, accessibilità e interaction-design per il web

home » Articoli » Il design della navigazione

8/01/2002

Il design della navigazione

[di Maurizio Boscarol]

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:

  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:

Esame della home page di adobe.com, con diverse sezioni evidenziate

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

Articoli correlati:

torna su Torna su