Navigazione a tab: quando e come implementarla
Cosa troverai in questo articolo. La navigazione a schede può essere una scelta perfettamente in linea con la SEO e aiutare gli utenti a convertire a patto che i contenuti al suo interno siano segmentati in maniera logica, presentati in maniera chiara e priva di ambiguità, e resi adeguatamente veloci da caricare tramite alcune accortezze a livello di sviluppo. Le correnti best practice riguardano anche l’adozione di alcune piccole modifiche che rendano questo tipo di navigazione perfettamente fruibile anche da chi usa la tastiera per interagire con il sito web. Sebbene test di usabilità ad hoc possano talvolta contraddire le tendenze generali, vi sono poi alcuni principi che nella maggior parte dei casi si rivelano più spesso validi, come l’implementazione di una barra di navigazione orizzontale e non laterale.
Indice
Quali sono le best practice in termini di UX e conversioni per l’implementazione della navigazione a schede su un sito web? In questo articolo troverete tutti i consigli che cercate!
La navigazione a schede è in linea con la SEO?
Tutto farebbe pensare che la navigazione a tab (o a schede che dir si voglia) sia perfettamente in linea con l’idea di rendere i contenuti di un sito web facilmente fruibili agli utenti, perché segmenta le informazioni in blocchi coesi e coerenti, chiari graficamente, con cui è semplice interagire. In pratica, il manuale della SEO perfetta, a patto che tutto ciò che è contenuto all’interno delle schede sia visibile nel codice HTML e dunque leggibile da Googlebot e dagli spider degli altri motori di ricerca. Allora perché per molto tempo proprio gli esperti SEO hanno guardato con circospezione, se non con sospetto questo tipo di navigazione?
La controversia che circonda, in ambito SEO, l’uso di tab per la navigazione dei contenuti in una pagina web, deriva, ovviamente, dagli usi errati che ne sono stati fatti. Si tratta infatti di un tipo di navigazione che può essere adottato con successo se si verificano una serie di condizioni fondamentali: un numero di categorie navigabili non superiore a 8-9 o comunque allineabili su un’unica riga, che difficilmente dovranno essere modificate a breve termine, le cui etichette corrispondano a parole brevi e chiare, ma che soprattutto siano simili fra loro, fattore che giustifica il loro raggruppamento in tab.
Gestione errata dei tab e problemi di UX
Ognuno di questi criteri è, in effetti, determinante. Se prendiamo l’esempio del numero di righe su cui dovrebbero essere disposte le tab, e immaginiamo di avere una situazione contraria a quella ideale e cioè schede disposte su più righe, possiamo subito individuare diversi problemi di UX: schede allineate su più righe confonderanno infatti l’utente facendogli pensare che i contenuti sulla seconda riga rappresentino sotto-categorie di quelli sulla prima riga e che dunque siano meno importanti.
Ci sono poi opinioni contrastanti sul fatto di poter usare la navigazione a schede anche come navigazione principale di un sito: c’è, infatti, chi sostiene che questo tipo di impiego sia in contrasto con la natura stessa della navigazione a schede, che dovrebbe servire lo scopo di alternare punti di vista diversi rimanendo sempre nello stesso luogo virtuale (pensate ai siti di prenotazioni viaggi, dove le schede corrispondono a servizi come “Voli”, “Voli+Hotel”, “Noleggi auto” etc., tutti relativi allo stesso viaggio), non quello di navigare fra punti completamente scollegati fra loro. Come sempre ci sono eccezioni, per cui se pensate che questo tipo di navigazione possa fare al caso vostro, mettetelo alla prova con test di usabilità e valutatene in coscienza i risultati.
Consigli per l’implementazione corretta delle tab
Se avete deciso di procedere con l’implementazione di una navigazione a tab, ci sono alcuni consigli che vi sentiamo di offrirvi:
- Innanzitutto, tutta l’area della scheda dovrebbe essere cliccabile, non solo il testo dell’etichetta di categoria. Analogamente, la scheda dovrebbe essere collegata all’area del contenuto che comanda in modo tale da rendere chiaro all’utente l’utilizzo che ne deve fare. Inoltre, la scheda selezionata dovrebbe essere differenziata graficamente dalle schede non attive in quel momento in modo da rendere inequivocabile all’utente la sua posizione all’interno del sistema di navigazione;
- Date un ordine significativo e logico alle schede, affidandovi a quello prototipico all’interno del vostro settore di riferimento; questa uniformità, che potrà sembrarvi noiosa e frustrante, funziona perché incontra le aspettative del target di riferimento ed è probabilmente già stata messa alla prova in infiniti test di usabilità;
- All’interno di ogni scheda, mantenete il più possibile invariato l’ordine delle informazioni fornite o richieste; questo permette all’utente di costruirsi un manuale d’uso interno sul modo corretto di interagire con il vostro sito, che non dovrà imparare da zero ogni qualvolta cambi pagina o scheda e che dunque ridurrà il suo carico cognitivo e aumenterà il suo senso di efficacia, rendendolo più incline alla conversione o comunque riducendo il tempo a lui necessario per raggiungere la conversione stessa;
- Per tornare alla pagina principale del sito, evitate di implementare una scheda “Home” anche nel caso in cui utilizziate le schede come navigazione principale del sito web: questa funzione verrà semplicemente svolta dal logo posto in alto a sinistra di ogni pagina del vostro sito web;
- Utilizzate etichette brevissime, di massimo una o due parole ciascuna, per le intestazioni delle schede, evitando ambiguità di significato: questo è uno di quei casi in cui dovete sedare il vostro estro creativo e far sì che i vostri utenti non abbiano il minimo dubbio su cosa aspettarsi;
- Evitate le righe multiple, come già detto, limitando le schede a un’unica riga. Se questo non è possibile, optate per sub-categorie che siano differenziate graficamente in modo evidente dalle categorie principali. Cercate, comunque, di semplificare il più possibile, rimuovendo dalla navigazione tutto ciò che è ridondante.
La navigazione a schede può essere adattata a una molteplicità di formati – orizzontale o verticale, con etichette in formato testo o icona e così via -, la cui scelta non può però essere relegata al gusto personale ma deve originare da accurati studi di usabilità. In linea generale, un design orizzontale ed etichette testuali si rivelano più efficaci.
La velocità di navigazione è poi essenziale per garantire un’esperienza fluida e soddisfacente; per questo, quando non si tratta di navigazione principale del sito, bisognerebbe evitare di produrre un nuovo caricamento di pagina ogni volta che si passa da una scheda all’altra: l’opzione più sicura è quella di avere i contenuti inattivi sempre visibili nell’HTML ma usare CSS e JavaScript per nasconderli visivamente.
Infine, un occhio di riguardo va sempre prestato anche agli utenti con disabilità per garantire la corretta accessibilità del sito a tutti, ad esempio permettendo la navigazione fra le schede utilizzando i tasti “Tab” e “Invio” della tastiera rispettivamente per navigare e per selezionare.
Coming soon:
La prossima settimana, sul blog di Seed, parleremo di bias di ancoraggio e come si decidono i prezzi online. Venite a leggerci!
