Le Tabs rappresentano una delle soluzioni più usate nel design delle interfacce di navigazione nelle pagine web, utili per fornire accesso a diversi moduli di contenuti. Come avviene per le etichette nella vita reale, informaticamente parlando le tab permettono di passare facilmente su una diversa schermata o ad un insieme di dati alternativo, con un semplice click.

Ma proprio come per ogni altro componente del design dell'interfaccia, le tabs richiedono molta attenzione ai dettagli di progettazione per essere realmente efficaci.

In particolare, attraverso la comprensione della loro natura e della loro funzione, e analizzando al contempo gli errori più comuni fatti su altri siti web e progetti, si possono capire davvero i principali rischi che si corrono quando si vogliono adottare le tabs dentro una strategia di design per la navigazione.

Jakob Nielsen, guru mondiale dell'usabilità, offre qui un ottimo insieme di linee guida da seguire nella progettazione della navigazione mediante tabs, in grado di essere tanto efficace quanto usabile. Si focalizza sulla dimostrazione di esempi tratti dalla vita reale che ben si adattano a quanto richiede l'usabilità mostrandone al contempo anche le limitazioni tipiche e gli ostacoli in cui tali soluzioni fanno incorrere.

Ecco la sua guida dettagliata per progettare tabs per la navigazione efficaci, in grado di fornire all'utente la massima usabilità possibile.

Introduzione di Robin Good

Usare Correttamente Le Tabs

di Jakob Nielsen

Sintesi dell'articolo:
Le 13 linee guida per il design del controllo dei tab sono seguite da Yahoo Finance, ma l'usabilità soffre a causa di un uso forse esagerato di AJAX e di difficoltà nella personalizzazione.

Controlli tab in alto a sinistra e al centro, a destra della homepage di Yahoo Finance.

E' un piacere raro passare attraverso una interfaccia utente sul Web che utilizza i controlli di dialogo correttamente. Anche quando è semplice come i bottoni radio e i checkbox la metà delle volte sono errati. Per non parlare dei drop-down menu, di cui si abusa orribilmente, o delle scrollbar artigianali che imbruttiscono molti siti fatti in Flash.

Yahoo Finance recentemente ha lanciato un redesign della homepage che utilizza correttamente i tabs, come mostrano le seguenti aree che presentano tabs in due parti diverse della pagina:

Linee Guida Per L'Usabilità Dei Tab

Principali barre di navigazione della homepage di Yahoo Finance.

Questo design segue tutte le 13 linee guida previste per i tab:

1. Usa i tabs per alternare le diverse schermate nell'ambito dello stesso contesto (non per navigare in aree diverse --un errore molto comune introdotto da Amazon.com).

2. Spezza logicamente il contenutodietro i tabs in modo che gli utenti possano facilmente capire cosa troveranno quando selezionano un dato tab. (La scelta della carta è una delle opzioni della ricerca che si occupa di questi problemi di "mini-IA". Se non trovi raggruppamenti ben distinti, allora vuol dire che le tabs sono l'interfaccia di controllo sbagliata per gestire il tuo contenuto.)

3. Tipicamente, gli utenti non hanno necessità di vedere contemporaneamente contenuto mediante tabs multiple. Se le persone hanno bisogno di comparare le informazioni dietro diversi tabs, allora devono tornare indietro e aggiungere altro carico sua loro memoria a breve termine e l'usabilità di livello più basso comparata al design posiziona ogni elemento in un'unica grande pagina.

4. Le tabs sono naturalmente parallele , almeno per gli utenti americani (per gli utenti internazionali, sarebbe meglio avere una tab per il "Nord America" o per le "Americhe" ed in parallelo le tab per "Europa" ed "Asia").

5. La tab selezionata viene evidenziata. Qui, è evidenziata dalla sua mancanza di colore, che funziona bene quando abbiamo meno di 3 tabs. (Con solo 2 tabs, sarebbe difficile dire quale delle due è stata selezionata.)
   • In aggiunta a questa messa in evidenza, puoi segnare la tab attuale per dimensione, con una etichetta in grassetto, una icona, o facendola apparire davanti alle altre tab.

6. Le tabs non selezionate sono chiaramente visibili e leggibili, rimandando poi l'utente alle opzioni aggiuntive. Se le tab non evidenziate si confondono troppo con lo sfondo, c'è il rischio che gli utenti non scoprano nemmeno le funzionalità nascoste.

7. La tab attuale tab è connessa con l'area di contenuto, proprio come se stessimo maneggiando delle carte fisiche negli organizzatori di documenti mediante l'indice (le tab) poste in alto che li organizzano. Questo da enfasi al pannello che viene mostrato ed aiuta anche l'utente a capire quale tab ha selezionato quando ci sono solo 2 tabs. Avere lo stesso colore delle tab selezionate e dell'area del pannello rinforza la connessione tra i due e supporta l'uso della messa in evidenza inversa.

8. Le etichette sono brevi ed utilizzano linguaggio semplice, piuttosto che termini complessi. le etichette dei tab devono essere di solito di 1-2 parole. Etichette brevi sono molto più leggibili velocemente; se hai bisogno in generale di etichette più lunghe, è segno che le scelte sono troppo complicate per un controllo mediante tab.

9. Le etichette sono l'esempio più immediato dell'uso dello stile maiuscolo per i titoli: ogni prima lettera di ogni parola viene messa in maiuscolo. L'esempio sbagliato è utilizzare ALL CAPS/tutte le lettere maiuscole, che raramente può essere considerata una buona idea perchè è difficile da leggere. La leggibilità non è importante solo per parole singole e brevi, ma --come stabilisce la linea guida #20 per l'usabilità delle homepage -- devi scegliere un solo stile per il maiuscolo e seguirlo.
   • Le linee guida della Microsoft Vista User Experience raccomandano il sentence case (in cui si mette maiuscola solo la prima lettera della prima parola), mentre per Apple, le Human Interface Guidelines raccomandano la messa in maiuscolo come stile dei titoli. In questo caso (facendo un gioco di parole), io sto con Apple, ma sinceramente, non è importante, basta che utilizzi sempre un unico stile. (Evita il tutto maiuscolo o tutto minuscolo nelle etichette, invece.)

10. C'è solo una linea di tabs. Rughe multiple creano salti degli elementi della UI, che distruggono la memoria spaziale e rendono impossibile agli utenti ricordare quale tab hanno già visitato. Ancora, ovviamente, le righe multiple sono sicuramente un sintomo di eccessiva complessità: se ti servono molte tab, oltre a quelle che stanno su una sola riga, devi sicuramente semplificare il tuo design.

11. La riga contenente le tabs va in alto sul pannello -- non lateralmente o in basso dove gli utenti non riescono a guardare, spesso.

12. Lo scopo che va controllato mediante le tabs deve essere ovvio dal lato del visual design. Metaforicamente, usare le tabs è come scorrere col dito sulle carte dell'indice dei documenti in un cassetto di un vecchio ordinatore di documenti, perciò gli utenti devono poter dire al primo sguardo cosa costituisce "l'indice dei documenti" (ad esempio, le tab il pannello...).

13. Una rapida risposta assicura che il click su una nuova tab immediatamente porta al pannello corrispondente. Questo probabilmente si raggiunge con l'uso di AJAX, ma le tecniche di programmazione non sono importanti. Quello che è importante è agire perchè l'azione sia abbastanza veloce (idealmente <0.1 secondi) in modo che le persone possano sentire che c'è una connessione fisica tra il loro click del mouse e l'apparizione del pannello scelto.

Mentre le tabs nel corpo principale della pagina vengono usate correttamente, le tabs della barra di navigazione globale in alto sulla pagina spesso non lo sono:

Le Tabs dovrebbero essere riservate per permettere agli utenti di cambiare le videate rimanendo nello stesso posto. Ancora, il sottile triangolo tra ogni etichetta rappresenta un menù pull-down, che è fortemente non-standard come widget che va integrato con le tabs.

Consistenza

Yahoo Finance è in generale adeguata ad una importantissima linea guida: essere consistenti. La pagina contiene aree diverse con tabs, e non tutte sembrano funzionare allo stesso modo (eccetto la barra di navigazione globale, come già scritto in precedenza).

Strano a dirsi, però, c'è un quarto controllo tab proprio in basso in fondo alla pagina; qui i tab sono di un colore diverso. In generale, questi controlli tab che deviano dalle linee guida sembrano gli stessi degli altri tre tipi, perciò non dovrebbero causare ulteriori problemi di usabilità. Ad ogni modo, sono troppo in basso nella pagina che molti utenti non la faranno neanche scorrere tutta per vederli.

La Consistenza è importante nella progettazione dei controlli GUI perchè quello che percepisce l'utente in termini di padronanza dell'interfaccia funziona in molti modi:

• Riconoscibilità. Quando qualcosa presenta sempre lo stesso aspetto, sai subito cosa cercare e dove trovarla.

• Predittibilità. Quando qualcosa funziona allo stesso modo, conosci cosa accade quando tu compi azioni su di essa.

• Miglioramento. Quando puoi appoggiare sulle tue conoscenze passate tutte le funzionalità disponibili, puoi facilmente comporre un insieme di azioni utili a raggiungere il tuo obiettivo.

• Efficienza. Non c'è bisogno di perdere tempo ad apprendere qualcosa di nuovo o a preoccuparsi degli effetti di funzionalità inconsistenti.

L'uso esagerato di AJAX

E' un bene quando un click su un tab ha effetto immediato, cambiando l'area del pannello senza il caricamento completo della pagina. Ma non tutti gli aggiornamenti dentro la pagina stessa vanno bene.

Sulla pagina di Yahoo Finance, le stock quotes vengono aggiornate in tempo reale e ogni cambiamento è annunciato da un flash di colore dietro il numero coinvolto. Il flash constante per tutta la schermata stanca abbastanza velocemente, specialmente per il numero del volume, che cambia continuamente.

Proprio perchè tu puoi fare qualcosa non significa che tu quella cosa poi la devi sempre applicare. Si, è una linea guida per guidare l'attenzione degli utenti sugli aggiornamenti della pagina, ma serve solo quando gli utenti hanno necessità di essere avvisati. In questo caso, tutti gli utenti hanno bisogno di sapere quali sono i numeri attuali (di quello specifico momento della consultazione) e invece si trovano davanti a continui aggiornamenti.

Un sistema di trading per i day traders dovrebbe funzionare diversamente. In quello scenario scenario, gli utenti si che hanno necessità di monitorare continuamente le tendenze del mercato per le azioni multiple, e il cambiamento di colore nella loro visione periferica li avvisa in tempo reale anche delle piccolissime opportunità di trading.

Su una homepage di un portale finanziario, comunque, gli utenti devono leggere velocemente una serie di titoli e di storie. Se vogliono fare del trading, devono andare sul loro sito per il brokering, e quindi non traggono alcun vantaggio di queste operazioni rapide da dover tenere sotto controllo. Poche persone si siedono davanti a questa pagina per verificare i cambiamenti che avvengono di secondo in secondo; l'intermittenza rallenta e distrugge oltre che distrae gli utenti dal contenuto che cercavano quando sono arrivati sul sito.

Difficoltà di personalizzazione

Opzioni di personalizzazione per una parte della pagina di Yahoo Finance.

Yahoo Finance permette ai suoi utenti la personalizzazione della Sintesi Del Mercato e le tabs per mostrare i loro set di indici preferiti. Sfortunatamente, la schermata per la personalizzazione è abbastanza complessa:

Una tabella accompagna la prima voce in una lista puntata e numerata, ma questo non è abbastanza ovvio per l'utente. Se gli utenti vogliono cambiare la tabella di default, devono comprendere che devono cambiare l'ordine degli elementi nella lista delle quotazioni. Il minimo era che ci fossero almeno le istruzioni che lo spiegassero. Ancora meglio, la pagina dovrebbe offrire un insieme di bottoni radio accanto ai simboli dell'indice ed avere i bottoni radio selezionati che determinano quale simbolo inserire nella tabella.

Ancora, gli esperti di investimento conoscono bene i simboli dei ticker per gli indici che vogliono tracciare, ma sono molto deboli per i terminali finanziari di Bloomberg. La maggior parte degli utenti di Yahoo Finance non sa che tipologia inserire in questo form. Sarebbe abbastanza buono che la pagina fornisse un link alla funzionalità corrispondente ad un determinato simbolo (con un aiuto in tempo reale). In ogni caso, dato che questa pagina presenta altre funzioni, sarebbe meglio solo elencare i circa 30 simboli più comuni sulla destra della pagina. Gli utenti potrebbero selezionare il simbolo solo cliccandolo, piuttosto che doverlo digitare (cosa che produce molti più errori).

(E' bene che l'interfaccia di personalizzazione sia offerta su una pagina separata invece che essere divisa in un livello di sovrapposizione in stile AJAX sulla pagina principale. A volte l'usabilità beneficia dal focalizzare l'attenzione sull'attenzione degli utenti sullo stesso argomento e così permette lo spazio necessario per tutte le funzionalità a supporto.)

Scelgo di personalizzare questa pagina perchè mi mostra i Dow index per default. Ogni libro sugli investimenti che io ho letto dice che S&P 500 è l'indicatore migliore per lo USA stock market, perciò è ovvio che è quello che voglio vedere subito. (Nell'interesse e nella apertura completa, S&P è stato uno dei clienti che ci ha fatto consulenza, ma non è per questo che preferisco il loro indice. Lo preferisco perché su una media di 500 stocks rende una immagine più ampia di una media di 30 stocks.)

Forse Yahoo dovrebbe utilizzare S&P 500 come tabella di default sin dall'inizio della navigazione, evitandomi di dover entrare nella schermata di personalizzazione. Comunque, mentre S&P 500 è teoricamente il migliore, molti fanno pressioni per il Dow, perciò gli investitori più giovani lo capiscono meglio.

La Ricerca Etnografica Ci può dire molto di più su quello che le persone pensano di investimenti e indici di stock, ed è abbastanza possibile che Yahoo faccia ricerca ed abbia buoni motivi per mantenere il Dow di default. Non ne ho trovato una ragione in particolare (i nostri studi sugli investitori si focalizzano sull'uso delle sezioni di investor relations (IR) dei siti corporate), ma credo che Yahoo abbia fatto la scelta giusta e che la maggior parte degli utenti preferisca vedere il Dow di default.

Mentre la personalizzazione di Yahoo ha i suoi problemi di usabilità, la pagina non fa buon uso della personalizzazione, che è difficoltosa per l'utente. (L'articolo che ho scritto sui problemi di personalizzazione 9 anni fa è ancora valido. la personalizzazione migliora così lentamente ed è uno dei motivi per cui bisogna essere scettici riguardo tutti i nuovi appelli al miglioramento rapido e alla personalizzazione della tecnologia.)

tra le funzioni di personalizzazione della pagina vi è un elenco (che non mostriamo qui) delle quote attuali di molti stocks che l'utente può desiderare di controllare. L'interesse recente è un buon dato proxy per l'interesse attuale, e permette all'utente di interessarsi agli stocks controllati di recente.

Il nuovo design della homepage di Yahoo Finance ha le sue debolezze, ma il larga parte è eccellente. Sono particolarmente contento di vedere in atto un tale uso corretto ed efficace delle tabs (escludendo la navigazione complessiva).

Articolo originalmente scritto da Jakob Nielsen e pubblicato il 17 Settembre 2007 con il titolo "Tabs, Used Right" su Useit.com. Versione Italiana a cura di Caterina Policaro - per un feedback editoriale scrivi a Robin.Good[at]masternewmedia.org.

L'autore

Jakob Nielsen, Ph.D., è un Esperto di Usabilità e il responsabile del Nielsen Norman Group che ha fondato insieme a Dr. Donald A. Norman (in precedenza VP di ricerca presso Apple Computer). Fino al 1998 è stato Ingegnere Emerito per la Sun Microsystems. Il Dr. Nielsen ha fondato il movimento per la "discount usability engineering" per favorire i cambiamenti rapidi ed economici delle interfacce utenti ed ha inventato diversi metodi per l'usabilità , inclusa la valutazione euristica.

Suggerimenti più pragmatici sull'usabilità sono coperti nei suoi tutorial quotidiani su Page-Level Building Blocks for Application Usability e su Dialogue and Workflow Design presso la conferenza sulla User Experience 2007 tenutesi a Las Vegas ed a Barcelona.