Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Dove sono?

La navigazione è la base di ogni buon sito. Tre semplici linee guida da Derk Powazek.
La navigazione è la base di ogni buon sito. Tre semplici linee guida da Derk Powazek.
Link copiato negli appunti

Questa è la traduzione dell'articolo Where am I? di Derek Powazek, pubblicato originariamente su A List Apart l'8 agosto 2006. La traduzione viene qui presentata con il consenso dell'editore (A Lista Apart Magazine) e dell'autore.

Può sembrare strano parlare di una cosa tanto scontata come la "navigazione" dopo 11 anni di web. Eppure, se siete dei web designer, ci sono molte probabilità che abbiate fatto degli errori in un ambito così cruciale. Anch'io li ho fatti. Ricominciamo allora dalle basi.

Su un sito web, "navigazione" non significa solo "link", "collegamenti". La navigazione, come la maggior parte degli elementi di un sito, riguarda la comunicazione con gli utenti. Un buon sistema di navigazione racconta una storia, e le buone storie hanno un inizio, uno svolgimento e una fine.

La navigazione consiste di tre parti. Sono usate per comunicare all'utente qualcosa sul suo passato, sul suo presente e sul suo futuro. Un buon schema di navigazione globale dovrebbe immediatamente rispondere alle tre principali domande che ogni utente ha in mente quando visita una pagina:

  1. Dove sono? (Il presente)
  2. Dove posso andare? (Il futuro)
  3. Dove sono stato? (Il passato)

Ecco un piccolo test. Andate su una pagina a caso su internet. Una pagina interna, non una homepage. Verificate a questo punto se siete in grado di rispondere alle tre domande senza guardare l'URL e senza passare i mouse sui link per vedere dove portano. Verificate se potete raccontare il vostro presente, passato e futuro semplicemente attraverso gli elementi visuali. Anche nel magico mondo del Web 2.0 la maggior parte dei siti falliscono su questo aspetto.

Perché è importante?

Diversi studi dimostrano un fatto incontrovertibile. Se un sito è usato per vendere qualcosa o per convincere gli utenti a tornarci di nuovo, la navigazione è il fattore chiave che gli utenti usano per decidere se quel sito merita o no la loro fiducia. E la fiducia è un elemento critico: dareste il vostro numero di carta di credito ad un commerciante di strada che sembra essere appena uscito da un bidone della spazzatura?

Anche se il vostro sito non ha come obbiettivo quello di vendere cose, la fiducia che saprete stimolare influenzerà il modo in cui siete percepiti, e farà decidere all'utente se salvare l'indirizzo nei bookmark, tornare un'altra volta, chiudere la finestra o non tornare mai più.

Tre semplici linee guida

Quelle che seguono sono tre linee guida sperimentate e facili da implementare per realizzare un buon sistema di navigazione.

Uno: Non linkare mai la pagina corrente

L'altro giorno guidavo in autostrada. Ero sulla 120, in direzione nord, seguivo alla lettera le indicazioni di Mapquest. Dicevano di uscire dalla 120 e poi di girare a destra sulla 120. Cosa? Io pensavo di essere già sulla 120! Mi sono forse perso?

Non posso parlare della progettazione del sistema autostradale californiano, ma possiamo senz'altro evitare problemi simili per un sito web.

Ricordate, la navigazione racconta una storia. Quando l'utente passa con il mouse sopra un link e appare la manina, quest'ultima dice: "Puoi andare in questo posto. Cliccami per arrivarci."

Quando l'utente clicca, la sua aspettativa è che accada qualcosa o di essere portato in un altro posto. Se ciò non accade, è un'esperienza negativa, che produce incertezza e dubbio. La fiducia nei vostri confronti ne esce scalfita.

È incredibile constatare quanti siti commettono errori rispetto a questo punto. Persino Flickr, spesso citato come esempio positivo di buone esperienze in fatto di usabilità e vincitore dell'edizione 2006 dei Webby Award per la navigazione, sbaglia. Date un'occhiata al link verso la homepage sulla homepage. Cosa può fare quel collegamento se non confondere l'utente?

Ora, io so che i ragazzi di Flickr non vogliono certo rendere confusa la loro navigazione. E allora perché lo fanno? Personalmente darei la colpa ai sistemi di gestione dei contenuti. Nella maggior parte dei casi hanno un template per la navigazione globale, giusto per semplificare la modifica e velocizzare l'implementazione di modifiche su tutto il sito. Realizzare una serie di dichiarazioni tipo if/then per cambiare i link presenti in una specifica pagina richiede sicuramente del tempo. Ma ne vale la pena. Modificare un semplice elemento della navigazione globale facendolo diventare puro testo, senza link, rendendolo riconoscibile (indicazione visuale della pagina corrente), eviterà la confusione che deriva dal click sul collegamento che ti porta dove già ti trovi.

Un possibile eccezione per questa linea guida potrebbe essere rappresentata per i link interni (ancore). Come sapete, questo tipo di link non indirizzano l'utente su una nuova pagina, ma su una sezione specifica di quella corrente. Può essere però ugualmente fonte di confusione, per cui andrebbero usati con cautela. Il problema nasce dal fatto che quasi sempre i link hanno lo stesso aspetto, sia che si tratti di collegamenti verso altre pagine, sia che si tratti di ancore. Una soluzione semplice consiste nel modificare l'aspetto delle ancore con i CSS. Un'altra opzione è di non usarli a meno che non sia strettamente necessario.

Due: Mostrare dove ci si trova

Come la prima linea guida, anche questa consiste nel fornire all'utente una traccia evidente rispetto al dove si trova, dovunque si trovi. Se la navigazione ricorda ai visitatori dove si trovano, essi non avvertiranno mai il panico tipico delle situazioni in cui ci si chiede "Mi sono perso?".

Nella pratica significa che quando è sulla pagina principale di una sezione (sito.org/sezione), l'elemento della navigazione globale che indica quella sezione dovrebbe non essere rappresentato da un link e dovrebbe essere evidenziato visivamente in modo tale che si capisca immediatamente dove ci si trova.

Poi, quando l'utente naviga verso una pagina interna di quella sezione (sito.org/sezione/pagina), l'elemento della navigazione globale per quella sezione dovrebbe tornare ad essere un link (perché ora il link ha di nuovo una sua funzione), ma non dovrebbe essere identico a come era in homepage (perché ora ci si trova in quella specifica sezione).

Tre: Pensare prima di linkare

Se state pensando di chiamarmi Capitano Ovvio per le due precedenti linee guida, amerete quest'ultima. Pensate a tutti i link presenti nel vostro schema di navigazione globale. Chiedetevi: "Gli utenti hanno davvero bisogno di tutti questi link ogni volta che visitano il sito?"

L'aver scelto di indicare una pagina come elemento principale di una directory non significa che essa debba essere rappresentata nella navigazione globale. E se così è, ciò che state comunicando all'utente è: "Questa cosa che vedi rappresenta tutto ciò che puoi fare su questo sito".

Insomma, riflettiamo sempre con attenzione. Pensiamo a ciò che inseriamo nella navigazione gobale come a qualcosa che descrive il nostro sito. Assicuriamoci che essa racconti davvero la storia che vogliamo raccontare.

Mi rendo conto che ciò solleverà domande più che dare risposte. Dovrebbe essere il link "Home" una parte della navigazione globale? Dovremmo tenerci sotto al limite dei cinque item? E che fare riguardo all'uso di menu a tendina? Dovremmo usare o no un sistema a tab? Molte domande, una risposta: "Dipende". Progettate il sito per gli utenti che avete e volete. Poi, testate, testate, testate.

Riassumiamo

Ecco una serie di esempi pratici.

Figura 1 - Esempio di menu di navigazione globale sulla home page del sito awesomeness.org
Figura 1 - Esempio di menu di navigazione globale
Figura 2 - Passaggio con il mouse sul link Section Two in homepage: la sottolineatura evidenzia che si tratta di un link
Figura 2 - Mouse su elemento Section Two
Figura 3 - Navigazione globale su una delle sezioni principali (awesomeness.org/section). Si noti che ora "Section Two" non Ë pi? un link ed Ë collegato visivamente al corpo della pagina, comunicando che ad essa appartiene.
Figura 3 - Esempio di menu di navigazione globale a livello di sezione
Figura 4 - Navigazione globale su una pagina interna della sezione (awesomeness.org/section/page). La tab mostra dove ci troviamo, ma il blue indica che possiamo cliccare e tornare alla pagina principale della sezione.
Figura 4 - Esempio di menu di navigazione globale interna alla sezione
Figura 5 - Passaggio del mouse su un link della pagine di sezione
Figura 5 - Passaggio del mouse su un link della pagine di sezione

In tutti gli esempi visti, il linguaggio visuale è consistente. La tab specifica "Ti trovi qui" ed è immediatamente comprensibile. La sottolineatura è sempre presente in stato di hover. Il blue indica che una parola è un link ed è cliccabile.

Ci sono ovviamente molti modi per rappresentare questi concetti. Qui abbiamo voluto mostrare come approcciare il problema.

Se state provando ad implementare qualcosa di simile sul vostro sito ma non potete perché una certa pagina può appartenere a diverse sezioni nello stesso tempo, allora avete ufficialmente Grossi Problemi. A quel punto, dovrete pensare ad altre metafore visuali rispetto alle tab e ripensare l'architettura dell'informazione del sito.

La navigazione è una specie di cavallo da lavoro del web design, serve a molto ma meriterebbe più attenzione. Quando le persone visitano il vostro sito sono come turisti in un paese straniero. Se volete che si trovino bene, dovete fare in modo che possano andare dove desiderano e sapere dove si trovano. Se hanno una buona esperienza, torneranno. Ma se li lasciate soli e confusi, beh, non aspettatevi che spendano tanti soldi nel negozio di souvenir.

Ti consigliamo anche