
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
La navigazione è la base di ogni buon sito. Tre semplici linee guida da Derk Powazek.
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:
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.
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ù.
Quelle che seguono sono tre linee guida sperimentate e facili da implementare per realizzare un buon sistema di navigazione.
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.
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).
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.
Ecco una serie di esempi pratici.
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.
Se vuoi aggiornamenti su Dove sono? inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Il progetto DVLUP, i nuovi device Nokia Lumia e la migrazione Android su Nokia X.
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Architettura dell’informazione e design: come coniugare al meglio due attività che potrebbero entrare in conflitto
Consigli e strategie per costruire siti adatti all’apprendimento online
Lo sviluppo di servizi Web 2.0 e l’affermarsi di progetti aziendali che costituiscono l’evoluzione delle tradizionali Intranet sembrano avere ormai definitivamente sancito l’importanza della “costruzione” collettiva della conoscenza
Tailwind CSS è un framework CSS che si propone come alternativa a soluzioni più tradizionali ed abbondantemente diffuse come Bootstrap o w3.css. Rispetto a questi ultimi, Tailwind CSS si contraddistingue per l’approccio diverso, non più basato su classi che realizzano elementi già preconfenzionati, bensì sfruttando una serie di classi di utility per implementare le nostre idee direttamente nelle pagine HTML.