Navigazione a schede: quando usarla e come ottimizzarla

Una delle mie citazioni UX preferite viene da Chikezie Ejiasi, Head of Studio and Design Systems di Google.

Ha scritto: “La vita è colloquiale. Il web design dovrebbe essere allo stesso modo. Sul web stai parlando con qualcuno che probabilmente non hai mai incontrato, quindi è importante essere chiari e precisi. Pertanto, una navigazione ben strutturata e un'organizzazione dei contenuti vanno di pari passo con una buona conversazione.

La navigazione a schede può essere chiara e precisa? Certo che sì, il che lo rende una valida forma di navigazione e organizzazione dei contenuti.

Ciò che conta, come per la maggior parte delle cose relative alla UX, è come la implementi e come la ottimizzi.

Cos'è la navigazione a schede?

La navigazione a schede è uno stile di navigazione e interfaccia utente in cui le informazioni sono organizzate in schede, che separano il contenuto in diverse sezioni.

Generalmente, osservando le navigazioni a schede, noterai alcune caratteristiche comuni:

1. Angoli delle linguette arrotondati;
2. Separazione delle schede, che si tratti di spazio o di una singola riga;
3. Effetti al passaggio del mouse sulle schede;
4. Gradiente per aggiungere profondità e dimensione alle schede.

La navigazione a schede si basa sulla metafora della cartella, che dovrebbe essere familiare a chiunque lavori in un ufficio o guardi la televisione. Proprio come spiega Mifsud di UsabilityGeek…

Justin Mifsud, Geek dell'usabilità :

“Nella terminologia dell'interfaccia utente, le metafore sono idee o oggetti utilizzati per facilitare la familiarità tra l'utente e l'applicazione.

L'uso delle schede nell'interfaccia utente è un'eccellente metafora poiché sembrano divisori di schede del mondo reale in file o schede su cartelle in un cassetto di file.

Pertanto, è più intuitivo per gli utenti sapere che queste schede dividono il contenuto in sezioni e, proprio come nella vita reale, raggiungere la scheda (emulata sul Web facendo clic su una scheda) mostrerà il rispettivo contenuto. (tramite UsabilityGeek)

Poiché la metafora è così comune, è importante prestare attenzione all'implementazione. Le navigazioni a schede hanno un prototipo efficace, quindi devono apparire e funzionare esattamente come previsto.

Come ogni buon sistema di navigazione, le schede ti consentono di:

• Separare in modo significativo il contenuto in diverse sezioni;
• Mostra alle persone quali contenuti sono disponibili per loro e come possono accedervi;
• Mostra alle persone, visivamente, dove si trovano all'interno del tuo sito.

Quando è una buona idea utilizzare la navigazione a schede?

In generale, è una buona idea utilizzare la navigazione a schede quando...

• Hai da due a nove diverse categorie di contenuti.
• I nomi delle categorie sono relativamente brevi e prevedibili, sia in termini di posizione che di copia (ovvero corrispondono al prototipo).
• È improbabile che il numero di categorie cambi regolarmente.
• Le categorie sono di natura simile; ha senso logico che siano tabulati insieme.
• Le categorie rientrano in un'unica riga.

Come spiega Jakob Nielsen di Nielsen Norman Group, quando la navigazione a schede diventa così complessa da richiedere più righe, iniziano a sorgere problemi...

Jakob Nielsen, Nielsen Norman Group :

“Righe multiple creano elementi dell'interfaccia utente che saltano, che distruggono la memoria spaziale e quindi rendono impossibile per gli utenti ricordare quali schede hanno già visitato.

Inoltre, più righe sono un sicuro sintomo di eccessiva complessità: se hai bisogno di più schede di quante ne possano stare in una singola riga, devi semplificare il tuo design. (tramite NN/g)

Più righe creano anche problemi di gerarchia visiva. Quando c'è una seconda riga, potrebbe segnalare all'utente che le schede nella seconda riga sono sottocategorie o, almeno, meno importanti delle schede nella prima riga.

In generale, non è una buona idea utilizzare la navigazione a schede quando:

• Vuoi che le persone confrontino i contenuti contemporaneamente. Questo mette a dura prova la memoria e aumenta notevolmente il carico cognitivo.
• Ti ritrovi a pensare di aggiungere un collegamento in stile "Altro...".

Naturalmente, queste sono solo linee guida di base. Potresti abbinare tutte le regole "dovresti usarlo" e scoprire che non funziona per il tuo pubblico. Alla fine è qualcosa che dovrai testare.

Ricorda, puoi utilizzare la tua analisi digitale per capire se la tua navigazione a schede sta creando problemi ai tuoi visitatori. Da lì, puoi apportare modifiche per risolvere i problemi o sperimentare un nuovo tipo di navigazione.

La polemica

Mentre gli studi di design moderni hanno molti siti simili a questo...

…alcune persone usano la navigazione a schede come navigazione principale.

Come ha raccontato anni fa Luke Wroblewski di Google, Amazon ha davvero aperto la strada a questa tendenza...

Luca Wroblewski, Google :

“Nel 1998, il sito aveva due categorie di primo livello: libri e musica.

Con l'aggiunta di ulteriori categorie (come video e regali), il sistema di schede orizzontali si è adattato abbastanza bene e ha creato una buona opportunità per differenziare le categorie di prodotti attraverso il colore. (tramite LucaW)

Ecco uno sguardo a come Amazon utilizzava la navigazione a schede nei giorni precedenti...

Man mano che il sito cresceva in popolarità, aumentava anche il numero di schede di cui Amazon aveva bisogno...

Nel 1999, Jakob lo definì "un cattivo design e un abuso della metafora della linguetta":

Ritengo che le schede sarebbero utilizzate meglio per passare da una visualizzazione alternativa (ma correlata) piuttosto che per navigare verso posizioni non correlate.

Dovresti utilizzare le schede per alternare le visualizzazioni all'interno dello stesso contesto, non per navigare in aree diverse. Questo è il punto più importante, perché rimanere fermi mentre si alternano le visualizzazioni è il motivo per cui abbiamo le schede in primo luogo

Jacob Nielsen

Tuttavia, molti siti hanno seguito l'esempio di Amazon e la definizione di navigazione a schede ha iniziato a cambiare rispetto al "passaggio tra viste alternative" di Nielsen.

Sebbene l'utilizzo della navigazione a schede come sistema di navigazione principale sia passato un po' di moda, può funzionare. Come per la maggior parte delle cose, la tua preoccupazione principale non dovrebbe essere ciò che dice Nielsen sulla navigazione a schede, ma ciò che dice il tuo pubblico.

Lo trovano difficile da usare? Stanno navigando correttamente nel tuo sito? Riescono a trovare gli elementi più importanti del tuo sito? Condurre test di usabilità per essere sicuri.

Come implementare la navigazione a schede

Air Canada, insieme alla maggior parte delle principali compagnie aeree, utilizza bene la navigazione a schede...

Quando implementi tu stesso la navigazione a schede (a qualsiasi livello), ecco alcune cose da tenere a mente:

• Innanzitutto, progetta l'architettura dell'informazione (IA) del tuo sito in modo da poter prendere decisioni più intelligenti relative alle schede.
• L'intera scheda dovrebbe essere cliccabile, non solo il nome della categoria (testo).
• Non utilizzare una scheda "home", anche se utilizzi la navigazione a schede per l'intero sito. Invece, fai in modo che il tuo logo porti i visitatori alla home page.
• La scheda deve essere collegata all'area del contenuto che controlla in modo che l'ambito della scheda sia chiaro.
• I nomi delle categorie dovrebbero essere lunghi una o due parole e scritti in un inglese semplice. Evita di usare tutto maiuscolo in quanto rende le schede più difficili da leggere.
• Non impilare più righe di schede. Se necessario, utilizzare invece le sottocategorie (ovvero una seconda barra orizzontale sotto le schede). Se utilizzi le sottocategorie, assicurati che ci sia una connessione visiva tra la scheda selezionata e la barra delle sottocategorie sottostante. Assicurati che la quantità di sottocategorie che utilizzi non sia eccessiva; condensare e semplificare.
• La scheda selezionata deve essere contrassegnata in modo ben visibile per indicare la posizione corrente. Tuttavia, le schede non selezionate non dovrebbero essere così disattivate da essere dimenticate o trascurate.
• È necessario mantenere un ordine di tabulazione coerente da una pagina all'altra in modo che l'utente comprenda appieno come le tabulazioni si relazionano l'una con l'altra.

Jakob spiega perché questo tipo di coerenza è importante...

1. Riconoscibilità. Quando qualcosa sembra sempre uguale, sai cosa cercare e sai cos'è quando lo trovi.

2. Prevedibilità. Quando qualcosa funziona sempre allo stesso modo, sai cosa accadrà quando agisci di conseguenza.

3. Potenziamento. Quando puoi fare affidamento sulla tua conoscenza passata di tutte le funzionalità disponibili, puoi facilmente comporre una serie di azioni per raggiungere il tuo obiettivo.

4. Efficienza. Non c'è bisogno di perdere tempo a imparare qualcosa di nuovo o preoccuparsi dell'effetto di funzionalità incoerenti.

Jacob Nielsen

Esempi di navigazione a schede fatta bene

Il modo migliore per comprendere la navigazione a schede, soprattutto perché può essere utilizzata in tanti modi diversi, è guardare alcuni esempi.

1. Collezione d'arte dell'album

Album Art Collection è un esempio piuttosto popolare di navigazione a schede...

Qui sono interessanti due cose...

1. La navigazione è verticale, non orizzontale.
2. La navigazione include icone.

In genere, troverai navigazioni a schede presentate orizzontalmente. Ciò è in parte dovuto ai prototipi di progettazione. Poiché è comune, le persone tendono a cercare le navigazioni nello spazio orizzontale sotto il logo.

Ovviamente, ciò non significa che sei limitato a utilizzare quello spazio per la navigazione. Assicurati solo di utilizzare i test utente. Non vuoi spostare la tua navigazione per motivi stilistici per influire sulla facilità d'uso del tuo sito.

Si noti che mentre Album Art Collection utilizza le icone di navigazione, non abbandonano le descrizioni basate sul testo. Il test di usabilità delle icone è un articolo a sé stante, ma il più delle volte le descrizioni basate su testo sono più utilizzabili delle sole icone. Jacob Gube di Six Revisions spiega...

Jacob Gube, Sei revisioni :

"Evita di utilizzare le icone per sostituire il testo del controllo a schede perché i simboli possono significare cose diverse per persone diverse: la scommessa più sicura è utilizzare il testo normale per descrivere le informazioni del riquadro." (tramite Smashing Magazine)

2. La Fatturatrice

La Invoice Machine è la tua navigazione a schede di base come esempio di navigazione principale...

Tuttavia, includono una scheda "Home", che è ridondante. Nota come la scheda selezionata viene portata avanti e le schede sono collegate all'area del contenuto.

3. Tampone

Buffer è stato uno dei miei esempi preferiti di navigazione a schede. In passato, avevano un'offerta per i privati ​​e un'offerta per le aziende, quindi usano le schede per separare i loro contenuti below the fold.

Qui è stato l'inizio del contenuto per gli individui...

Ed ecco l'inizio dei contenuti per le aziende...

Ciò ha permesso loro di parlare a due pubblici diversi senza creare un sito o un'esperienza completamente separati.

Successivamente, la pagina del prodotto di Buffer ha subito profondi cambiamenti, con Pubblica, Rispondi e Analizza tra le altre offerte (tutte abbastanza autoesplicative). Ecco la navigazione a schede che hanno utilizzato per le loro pagine:

A parte i diversi piani tariffari, queste schede basate sui prodotti mostravano una testimonianza diversa, pertinente al prodotto nella scheda:

Come spiega David Leggett di UX Booth, la navigazione a schede è rilevante oltre i livelli di navigazione primario e secondario. Possono anche essere usati below the fold, come nel caso di Buffer...

David Leggett, stand UX :

“Le schede non devono essere limitate ai livelli di navigazione primario e secondario. Se forniscono a un utente la possibilità di passare da un'area all'altra dello stesso contenuto, possono rivelarsi piuttosto utili.

In combinazione con la tecnologia che cambia contenuto senza ricaricare una pagina, può infondere una sensazione tangibile all'utente finale che naviga nella pagina. (tramite UX Booth)

3 best practice da ricordare

Prima di sperimentare la navigazione a schede o decidere che non funziona per te, considera questi tre fattori: accessibilità, suddivisione in blocchi e velocità.

1. L'accessibilità è importante

Vuoi che il tuo sito sia accessibile a persone con disabilità o limitazioni. Per farlo con la navigazione a schede, dovrai...

• Consenti alle persone di navigare tra le schede utilizzando il tasto "Tab" sulla tastiera.
• Consenti alle persone di selezionare una scheda utilizzando il tasto "Invio" sulla tastiera.
• Indica quale scheda è selezionata utilizzando un metodo alternativo. Ad esempio, puoi includere un attributo title con la parola "attivo".

Rendere il tuo sito più facile da usare per più persone non danneggerà mai le conversioni.

2. Il chunking è importante

Con la navigazione a schede, il modo in cui decidi di organizzare e suddividere i tuoi contenuti è incredibilmente importante. Ecco perché la mia prima raccomandazione di implementazione sopra riguardava l'architettura delle informazioni del tuo sito.

Justin spiega perché una corretta organizzazione è vitale...

Justin Mifsud, Geek dell'usabilità :

“Le schede dividono il contenuto in sezioni significative che occupano meno spazio sullo schermo. A questo proposito, gli utenti possono accedere facilmente al contenuto che gli interessa (piuttosto che avere tutto il contenuto nei paragrafi).” (tramite UsabilityGeek)

Considera tutti i contenuti che vorresti sul tuo sito. Quindi, raggruppa il contenuto in quattro o cinque bucket. Probabilmente sarai in grado di ripetere questo esercizio e finire con due o tre secchi diversi. Va bene. Conduci test utente per vedere quali persone rispondono e navigano meglio.

Soprattutto, vorrai assicurarti...

1. I tuoi contenuti sono raggruppati in modo logico, previsto e chiaro per i visitatori.
2. L'ordine delle tue schede è significativo e logico.
3. Le tue schede seguono i prototipi esistenti. Ad esempio, i siti SaaS sono spesso suddivisi in blocchi in un modo specifico mentre i siti di e-commerce sono spesso suddivisi in blocchi in un altro.

3. La velocità conta

Abbiamo scritto più e più volte sull'importanza della velocità. Quindi, non dovrebbe sorprendere che anche la velocità abbia un ruolo nell'efficacia della navigazione a schede.

Jacob lo spiega abbastanza bene...

Jacob Gube, Sei revisioni :

“Uno scopo dell'utilizzo delle schede dei moduli è consentire una presentazione rapida e interattiva dei contenuti. Per questo, dovresti provare a fare in modo che i contenuti del riquadro inattivo siano scritti in linea nel documento HTML, quindi utilizzare CSS e JavaScript per modellare e nascondere visivamente il riquadro, il che è più rapido rispetto al richiedere il ricaricamento di una pagina o la richiesta di dati di origine remota.

Evita di ricaricare la pagina quando passi da un riquadro all'altro perché ciò ritarda notevolmente la navigazione tra i riquadri. Il contenuto caricato in remoto utilizzando Ajax può essere un'opzione per le informazioni del riquadro dinamico e localizzato in remoto, ma rappresenta una sfida per gli utenti di screen reader che potrebbero non essere a conoscenza dei nodi inseriti in modo asincrono dal DOM nell'albero del documento. (tramite Smashing Magazine)

Questo consiglio non si applica a coloro che utilizzano la navigazione a schede come navigazione principale, ma coloro che utilizzano la navigazione a schede come Air Canada e Buffer dovrebbero prenderne nota.

Conclusione

La navigazione a schede può assolutamente portare a "una buona conversazione" con i tuoi visitatori. Se implementato correttamente, è abbastanza chiaro e preciso da dire ai tuoi visitatori: esattamente dove si trovano, esattamente cosa è a loro disposizione ed esattamente come possono accedere a ciò che è a loro disposizione.

Con l'aiuto dei test di usabilità e dell'ottimizzazione, quella conversazione migliora ancora di più.

Come con qualsiasi cosa, tuttavia, assicurati di condurre la tua ricerca (in questo caso, la tua ricerca sull'architettura dell'informazione) e testare, testare, testare.

In sintesi…

1. La navigazione a schede può essere utilizzata come sistema di navigazione principale e oltre i livelli di navigazione principale o secondario.
2. Prova la navigazione a schede quando hai da due a nove categorie solide e simili con nomi brevi che si adattano a una singola riga.
3. Non provare la navigazione a schede quando vuoi che le persone confrontino i contenuti o ti ritrovi a pensare di aggiungere un link "Altro...".
4. Puoi seguire le migliori pratiche di implementazione, ma...
5. Ciò che conta sono i tuoi dati. I tuoi visitatori hanno difficoltà a navigare nel tuo sito con la navigazione a schede? Conduci test di usabilità per scoprirlo.
6. Risolvi i problemi che si presentano. Oppure, se ci sono molti problemi costosi, considera un altro sistema di navigazione.
7. Accessibilità, suddivisione in blocchi e velocità contano quando si tratta di navigazione a schede, quindi presta molta attenzione.

Stai lavorando a qualcosa relativo a questo? Pubblica un commento nella comunità CXL !