Le interfacce a schede sono confuse?

Question

Stiamo progettando un sito Web e ci siamo imbattuti in alcune sfide dell'interfaccia utente che sarebbero state ben risolte con un'interfaccia a schede. Gli utenti interagiranno con diversi elementi del sito (ci sono alcune funzioni di visualizzazione/modifica/copia/incolla di base disponibili) e avere un solo oggetto in una scheda visibile alla volta semplifica un po 'le cose.

Siamo, ovviamente, completamente a proprio agio con le interfacce a schede, ma per quanto riguarda gli utenti alle prime armi? Ho cercato il web come guida e non ho trovato nulla di definitivo. Hai esperienza nel presentare un'interfaccia a schede agli utenti inesperti e hanno avuto problemi con esso? Oppure, abbiamo raggiunto il punto in cui tutti sono a proprio agio con le schede e possiamo utilizzarli senza riserve?

L'usabilità è importante, più per questo progetto che per la maggior parte. Se gli utenti ingenui sono confusi da un'interfaccia a schede semplicemente non funzionerà e dovremo trovare un altro modo.

Answer 1

Le schede stanno diventando un luogo abbastanza comune che non mi preoccuperei di utilizzarle, a condizione che vengano implementate correttamente. Assicurati di rendere la scheda attiva visivamente distinta dalle altre schede.

Inoltre, provare a creare le schede utilizzando il miglioramento progressivo in modo che il contenuto sia ancora lì con JavaScript disabilitato. Ci sono due modi principali per farlo:

1. carico ogni scheda, ma il primo che utilizzano
   AJAX. Le schede stesse dovrebbero essere i collegamenti al contenuto che recupera AJAX .
2. Conservare tutte le informazioni sulla pagina , ma nasconderlo utilizzando JavaScript. Quando si sfogliano le schede, vengono popolate dalle parti nascoste della pagina .

Una risorsa di progettazione che potrebbe essere utile è la YUI Design Pattern Library e la loro sezione su tabs.

Answer 2

Penso che finché le schede sono visibili in quanto tali è comprensibile dall'utente. Ho visto siti Web in cui presentano una barra verticale con collegamenti che fungono da schede ma non è immediatamente visibile all'utente e lo trova molto confuso.

Answer 3

Penso che le persone siano abituate alla metafora (dai raccoglitori, dagli indici delle carte e così via) delle schede. Soprattutto quelli che usano il web per un certo periodo di tempo. Penso che, se IE ha adottato una metafora, implica una comune familiarità con quella metafora.

Quindi, no, suggerirei che non stanno confondendo e suggeriscono di andare per questo. Solo, forse, pubblica una presentazione di benvenuto/prima volta (o un link di "aiuto" di rilievo a tale introduzione) sull'uso delle schede.

Answer 4

Sono tendenzialmente d'accordo con lothar e ricebowl - la gente sembra averne abbastanza familiarità in questi giorni. La cosa più importante con qualsiasi elemento della GUI è la chiarezza: l'utente deve sapere innatamente cosa succederà quando preme qualcosa (sanno che facendo clic su una scheda inattiva lo renderà attivo); e nella navigazione - deve essere ben chiaro quale scheda sono attualmente attivi. Come disse Lothar, se non è immediatamente visibile all'utente, è molto confuso. Se risolvi questi problemi, allora dovrebbe andare bene.

Answer 5

Sono stato uno sviluppatore di un'app intranet che utilizzava un'interfaccia a schede, generata con HTML e controllata da JavaScript. Questo è stato molto prima di IE7 e Firefox. In effetti, è stata anche una novità sui siti Web in generale.

Fortunatamente, uno sviluppatore precedente aveva scoperto che se lo rendevi simile a una finestra di dialogo, anche se si utilizzava uno sfondo grigio, la gente di solito capiva la metafora. Abbiamo anche caricato tutto il contenuto di tutte le schede nel caricamento iniziale della pagina e disponevamo dei pulsanti Salva/Annulla all'esterno della struttura a schede. Per questo motivo, la maggior parte delle persone ha capito immediatamente che potevano spostarsi tra le schede (abbiamo usato JavaScript per nascondere e mostrare i DIV) e Salva salverebbe le modifiche in tutte di esse.

Se si vuole deviare da una metafora così ovvia, è necessario fare degli studi di usabilità.

Answer 6

Un'interfaccia di scheda ben implementata non deve confondere gli utenti.

In linea con quello che altri hanno detto una delle cose più ipmortant da considerare con Tabs, o qualsiasi altra interfaccia di navigazione è che sia ovvio dove si trovano attualmente nello schema di navigazione.

Un altro punto importante non è quello di rompere il browser! Molte implemazioni AJAX o javascript interrompono il pulsante Indietro. Questo è un fastidio minore per alcuni e un importante inconveniente per gli altri. Assicurati di considerare il tuo pubblico di destinazione qui.

Personalmente preferisco il metodo oldschool di non precaricare tutte le schede ma avere ciascuna scheda come una propria pagina e utilizzare una metodologia di template per gestire l'interfaccia di navigazione, sia essa tabblata o in altro modo. Questo mantiene la cronologia del browser e funziona bene con o senza javascipt.

Answer 7

Sarei in disaccordo con quelli che sono a favore di schede. In un test di progettazione che abbiamo fatto per un sito web a traffico piuttosto elevato (oltre 1 milione di utenti unici al momento), abbiamo scoperto che le schede non sono state utilizzate. Le schede erano chiaramente contrassegnate, situate a destra dell'area del contenuto principale. Sulla base di questa esperienza suggerirei di trovare un'alternativa o, come statica, suggerisco di eseguire test di usabilità per capire quali funzionano.

Answer 8

Non pensare di poter decidere a priori cosa è utilizzabile e cosa no. Fare i test di usabilità

"Ci vogliono solo cinque utenti per scoprire 80 per cento dei problemi di usabilità di alto livello" Jakob Nielsen

test di Google usabilità e iniziare ad imparare. Non è difficile.

Answer 9

Nel suo eccellente libro "Do not Make Me Think" (Sensible.com), Steve Krug discute i vantaggi di utilizzare un'interfaccia a schede:

• Sono evidente
• sono difficili da perdere
• Stanno chiazza di petrolio
• suggeriscono uno spazio fisico

Egli continua a descrivere le chiavi su schede ccessful come dimostrato da Amazon.com:

• Sono stati disegnati in modo corretto
• Erano codice colore
• C'era una scheda selezionata quando si entra nel sito.

Ovviamente, fornisce i dettagli di ciascuno di questi articoli di punti elenco nel libro (non lo plotterizzerò qui). Il libro merita sicuramente una visita se si desiderano linee guida per la creazione di siti Web per principianti ed esperti.

Answer 10

Le schede, ecc. Sono solo strumenti. Come decidiamo di deporle e usarle è ciò che determina la loro efficacia.

Quello che cerco di tenere a mente è:

1) tenerselo stretto. Le cose che usiamo di più dovrebbero essere il più possibile in primo piano o vicino alla cima e seppellire il resto in base alla frequenza con cui vengono usate/regolate.

2) Abbastanza facile da usare per la mamma. Tutte le interfacce sono confuse se non sono disposte in modo chiaro e logico.

3) Organizzare come viene utilizzato, non come si pensa che abbia senso. * spesso io uso schede per rompere fasi di un processo, o per rompere settori come le opzioni di base/avanzato. Ho raggrupparli in base alla somiglianza o di utilizzo a seconda di ciò che funziona meglio

4) Tenerli pochi Ad ogni modo cerco di stare al di sotto dei 7-10 cime gamma come il cervello umano è un momento difficile saltare al di là 7-10 cifre, quindi presumo lo stesso per le informazioni. I fisarmonicisti verticali potrebbero essere anche qualcosa da guardare.

Ho anche schede incorporate in schede prima. Funziona bene ma solo uno strato in profondità la maggior parte del tempo.

Answer 11

Volevo solo sottolineare SmashingMagazine ha un nuovo schede articolo in mostra: Showcase of Tabs

Answer 12

Un'altra risorsa per le schede è un recente articolo sulla rivista smashing: http://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation/