Visualizzazioni albero

Con una visualizzazione albero, gli utenti possono visualizzare e interagire con una raccolta gerarchicamente disposta di oggetti, usando una singola selezione o più selezioni.

In un albero, gli oggetti contenenti dati sono denominati nodi foglia e oggetti che contengono altri oggetti sono denominati nodi contenitore. Un singolo nodo contenitore top-most viene chiamato nodo radice. Gli utenti possono espandere e comprimere i nodi del contenitore facendo clic sui pulsanti più e meno espansori.

Visualizzazione albero tipica.

È il controllo giusto?

La presenza di dati gerarchici non significa che è necessario usare una visualizzazione albero. Molto spesso una visualizzazione elenco è una scelta più semplice, ancora più potente. Visualizzazioni elenco:

• Supportare diverse visualizzazioni.
• Supporta l'ordinamento dei dati in base a una delle colonne nella visualizzazione Dettagli.
• Supportare l'organizzazione dei dati in gruppi, formando una gerarchia a due livelli.

Per usare una visualizzazione elenco, è possibile appiattire le informazioni gerarchie usando le tecniche seguenti:

• Rimuovere il nodo radice se presente, perché spesso non è necessario.

• Usare gruppi di visualizzazione elenco, schede, elenchi a discesa o intestazioni espandibili per sostituire i contenitori di primo livello.

  

  In questo esempio vengono usati gruppi di visualizzazioni elenco per i contenitori di primo livello.

  

  In questo esempio vengono usate schede per i contenitori di primo livello

  

  In questo esempio viene usato un elenco a discesa per i contenitori di primo livello.

• Se un controllo associato visualizza il contenuto del contenitore selezionato, tale controllo può visualizzare livelli inferiori della gerarchia.

  

  In questo esempio, i contenitori di basso livello vengono visualizzati nella finestra del documento.

È necessario usare una visualizzazione albero se è necessario visualizzare una gerarchia di più di due livelli (non incluso il nodo radice).

Per decidere se una visualizzazione albero è il controllo corretto, prendere in considerazione queste domande:

• I dati sono gerarchici? Se non è così, usa un altro controllo.
• La gerarchia ha almeno tre livelli (non inclusa la radice)? In caso contrario, prendere in considerazione le alternative, ad esempio gruppi di visualizzazioni elenco, schede, elenchi a discesa o intestazioni espandibili.
• Gli elementi hanno dati ausiliari? In tal caso, è consigliabile usare una visualizzazione elenco nella modalità visualizzazione Dettagli per sfruttare al meglio i dati ausiliari.
• I dati di livello inferiore sono correlati alle sottotask indipendenti? In tal caso, è consigliabile visualizzare le informazioni in un controllo associato o in una finestra separata (visualizzata usando pulsanti di comando o collegamenti).
• Gli utenti di destinazione sono avanzati? Gli utenti avanzati sono più esperti nell'uso degli alberi. Se l'applicazione è destinata agli utenti principianti, evitare di usare le visualizzazioni albero.
• Gli elementi hanno una categorizzazione singola, naturale e gerarchica che ha familiarità con la maggior parte degli utenti? In tal caso, i dati sono ideali per una visualizzazione albero. Se c'è bisogno di più visualizzazioni o ordinamento, usare invece una visualizzazione elenco.
• Gli utenti devono visualizzare i dati di livello inferiore in alcuni scenari, ma non tutti gli scenari o alcuni, ma non tutto il tempo? In tal caso, i dati sono ideali per una visualizzazione albero.

Concetti relativi alla progettazione

Gli alberi sono destinati a organizzare i dati e semplificare la ricerca, ma è difficile rendere i dati all'interno di un albero facilmente individuabile. Tenere presenti i principi seguenti quando si decide di visualizzare le viste ad albero e la propria organizzazione.

Stimabilità e individuazione

Una visualizzazione albero è basata sulle relazioni tra oggetti. Gli alberi funzionano meglio quando gli oggetti formano una relazione chiara, ben nota ed esclusiva in cui ogni oggetto esegue il mapping a un unico contenitore facile da determinare.

Un problema significativo è che un oggetto può essere visualizzato in nodi diversi. Ad esempio, dove gli utenti si aspettano di trovare un dispositivo hardware che riproduce musica, ha un disco rigido di grandi dimensioni e usa una porta USB? Forse in uno dei diversi nodi del contenitore, ad esempio Multimedia, Storage, USB e possibilmente in Risorse hardware. Una soluzione consiste nel posizionare ogni oggetto sotto il singolo contenitore più appropriato indipendentemente dalle circostanze; un altro approccio consiste nel posizionare ogni oggetto in tutti i contenitori che si applicano. Il primo promuove una gerarchia semplice e pulita e quest'ultima promuove la individuabilità ognuno ha vantaggi e potenziali problemi.

Gli utenti potrebbero non comprendere completamente il layout dell'albero, ma formeranno un modello mentale delle relazioni dopo l'interazione con l'albero per un po'. Se il modello mentale non è corretto, porta alla confusione. Si supponga, ad esempio, che un lettore musicale sia disponibile nei contenitori Multimedia, Storage e USB. Questa disposizione migliora la individuabilità. Se un utente trova prima il dispositivo in Multimedia, l'utente può concludere che tutti i dispositivi come i lettori musicali appaiono nel contenitore Multimediale. L'utente prevede quindi dispositivi simili, come le fotocamere digitali, di apparire nel contenitore Multimediale e diventerà confuso se non è il caso.

La sfida durante la progettazione di un albero consiste nel bilanciare la individuabilità con un modello utente prevedibile che riduce al minimo la confusione.

Ampiezza e profondità

Gli studi sull'usabilità hanno dimostrato che gli utenti hanno maggiore successo nella ricerca di oggetti in un albero che è ampio rispetto a un albero profondo, quindi quando si progetta un albero è consigliabile preferire la profondità. Idealmente, un albero non deve avere più di quattro livelli (senza contare il nodo radice) e gli oggetti più comunemente accessibili devono essere visualizzati nei primi due livelli.

Altri principi

• Quando gli utenti trovano ciò che cercano, si arrestano a cercare. Non cercano di vedere dove potrebbe essere trovato un altro oggetto perché non devono essere trovati. Questi utenti possono presupporre che il primo percorso trovato sia l'unico percorso.
• Gli utenti hanno problemi a trovare oggetti in alberi complessi di grandi dimensioni. Gli utenti non eseguiranno una ricerca manuale esaustiva per trovare oggetti in tali alberi; si arrestano una volta che pensano che abbiano speso un impegno ragionevole. Di conseguenza, gli alberi complessi di grandi dimensioni devono essere integrati con altri metodi di accesso, ad esempio la ricerca di parole, un indice o un filtro.
• Alcuni programmi consentono agli utenti di creare alberi personalizzati. Anche se tali alberi autoprogetti potrebbero essere allineati con il modello mentale di un utente, spesso vengono creati in modo infarato e mal gestito. Ad esempio, mentre un file system, un programma di posta elettronica e un elenco Preferiti in genere archivia tipi simili di informazioni, gli utenti raramente si preoccupano di organizzarli nello stesso modo.

Se fai solo una cosa...

Valutare attentamente i vantaggi e gli svantaggi dell'uso di viste albero. La disposizione gerarchica dei dati non significa che è necessario usare una visualizzazione albero.

Modelli di utilizzo

Le visualizzazioni ad albero hanno diversi modelli di utilizzo:

Utilizzo	Esempio
Viste ad albero con solo nodi del contenitore gli utenti possono visualizzare e interagire con un contenitore alla volta.	In genere, queste visualizzazioni ad albero hanno un controllo associato che visualizza il contenuto del contenitore selezionato, in modo che gli utenti possano interagire con un solo contenitore alla volta. In questo esempio la visualizzazione albero include solo nodi contenitore. Il contenuto del nodo selezionato viene visualizzato nel controllo visualizzazione elenco associato.
Viste ad albero con nodi contenitore e foglia gli utenti possono visualizzare e interagire con contenitori e foglie.	In genere, queste visualizzazioni albero hanno un controllo associato che visualizza il contenuto del contenitore o foglia selezionato. consentendo agli utenti di interagire con le foglie spesso rende necessario supportare più selezioni. in questo esempio, la visualizzazione albero include sia nodi contenitore che foglia. poiché è supportata la selezione multipla, il contenuto degli elementi aperti viene visualizzato utilizzando le schede nel controllo associato. in alternativa, la visualizzazione albero può avere un elenco organizzato, in cui i contenitori sono intestazioni e le foglie sono opzioni. In questo esempio le foglie dell'albero sono opzioni e i contenitori sono categorie di opzioni.
Visualizzazioni albero casella di controllo gli utenti possono selezionare un numero qualsiasi di elementi, tra cui nessuno.	Le caselle di controllo indicano chiaramente che è possibile selezionare più opzioni. utilizzare questo modello di albero quando la selezione multipla è essenziale o di uso comune. In questo esempio, una visualizzazione albero casella di controllo consente di attivare o disattivare la selezione delle funzionalità.
Generatori di visualizzazioni ad albero gli utenti possono creare un albero aggiungendo un contenitore o una foglia alla volta e, facoltativamente, impostando l'ordine.	Molti alberi possono essere creati o modificati dagli utenti. alcuni alberi vengono creati sul posto usando menu di scelta rapida e trascinamento della selezione (ad esempio le cartelle in Esplora finestre), mentre altri alberi vengono compilati usando una finestra di dialogo specializzata ,ad esempio l'elenco preferiti in Windows Internet Explorer. In questo esempio da Internet Explorer gli utenti possono creare un proprio elenco di preferiti usando una finestra di dialogo.
Visualizzazioni ad albero con metodi di accesso alternativi gli utenti possono trovare oggetti in modi diversi dall'uso di un albero gerarchico.	Come accennato in precedenza, gli utenti hanno problemi a trovare oggetti in alberi complessi di grandi dimensioni, quindi tali alberi devono essere integrati con altri metodi di accesso, ad esempio una ricerca di parole, un indice o un filtro. in questo esempio, gli utenti possono anche accedere alle informazioni usando un sommario, un indice e preferiti. per alcuni utenti, le schede di indice e di ricerca possono essere più utili rispetto alla scheda contenuto. In questo esempio, il menu Start di Windows consente anche agli utenti di accedere a programmi, file e pagine Web digitando parte del nome nella casella Cerca.

Indicazioni

Presentazione

• All'interno di un contenitore ordinare gli elementi in un ordine logico. Ordina i nomi in ordine alfabetico, numeri in ordine numerico e date in ordine cronologico.

• Usare l'attributo Mostra sempre selezione in modo che gli utenti possano determinare facilmente l'elemento selezionato, anche quando il controllo non ha lo stato attivo per l'input.

• Se l'albero funge da sommario, usare l'attributo Espansione singola per semplificare la gestione dell'albero. In questo modo, viene espansa solo la parte pertinente dell'albero.

• Evitare di presentare alberi vuoti. Se un utente crea un albero, inizializzare l'albero con istruzioni o elementi di esempio che potrebbero essere necessari per gli utenti.

  

  In questo esempio, l'elenco viene inizialmente presentato con esempi.

• Non rendere i nodi del contenitore comprimibili se gli utenti non hanno motivo di comprimerli. In questo modo si aggiunge una complessità non necessaria.

• Se le prestazioni di carico sono un problema, visualizzare solo i contenitori di primo e secondo livello dell'albero per impostazione predefinita. È quindi possibile caricare dati aggiuntivi su richiesta quando un utente espande i rami nell'albero.

• Se gli utenti espandono o comprimono un contenitore, rendere persistente lo stato in modo che venga applicato al successivo visualizzazione albero, a meno che gli utenti non preferiscano iniziare nello stato predefinito. La persistenza deve essere in una visualizzazione per albero, in base all'utente.

• Se i contenitori di alto livello hanno contenuti simili, è consigliabile usare indizi visivi per differenziarli.

  Non corretto:

  

  In questo esempio, le cartelle cassette postali e di archiviazione hanno contenuto simile. Una volta che gli alberi sono ulteriormente espansi, è molto difficile per gli utenti sapere dove si trovano nell'albero, causando confusione. L'uso di icone leggermente diverse nelle diverse sezioni risolve questo problema.

• Riconsiderare le linee di collegamento. Anche se queste righe mostrano chiaramente le relazioni tra nodi contenitore e foglia, aggiungono confusione visiva senza facilitare significativamente la comprensione. In particolare, non aiutano quando i nodi sono vicini, né aiutano quando i nodi sono così lontani che lo scorrimento è necessario.

  Corretto:

  

  Meglio:

  

  Le linee di collegamento fanno poco per facilitare la comprensione.

Interazione

• Valutare la possibilità di fornire un comportamento di doppio clic. Facendo doppio clic dovrebbe avere lo stesso effetto della selezione di un elemento e dell'esecuzione del comando predefinito.

• Rendere ridondante il comportamento di doppio clic. Dovrebbe essere sempre presente un pulsante di comando o un comando di menu di scelta rapida con lo stesso effetto.

• Se un elemento richiede ulteriori spiegazioni, fornire la spiegazione in una descrizione informazioni.

  

  In questo esempio, una descrizione informativa fornisce ulteriori informazioni.

• Specificare i menu di scelta rapida dei comandi pertinenti. Tali comandi includono Taglia, Copia, Incolla, Rimuovi o Elimina, Rinomina e Proprietà.

• Quando si disabilita una visualizzazione albero, disabilitare anche le etichette associate e i pulsanti di comando.

Organizzazione ad albero

• Usare una struttura gerarchica naturale familiare alla maggior parte degli utenti.
• Se non è possibile usare una struttura di questo tipo, provare a bilanciare l'individuabilità con un modello utente prevedibile che riduce al minimo la confusione.
• Per migliorare in modo sicuro l'individuabilità, inserire un elemento in più contenitori quando:
  • L'elemento non è correlato ad altri elementi simili( pertanto gli utenti non vengono confusi da associazioni non corrette).
  • Ci sono solo alcuni di questi elementi con ridondanza (quindi l'albero non diventa gonfiato).
• Usare la struttura gerarchica più semplice che funziona bene. A tale scopo, procedere nel seguente modo:
  • Posizionare gli oggetti a cui si accede più comunemente nei primi due livelli dell'albero (senza contare il nodo radice) e posizionare gli oggetti a cui si accede meno di frequente più in basso nella gerarchia.
  • Eliminare i contenitori non necessari o combinare contenitori di livello intermedio ridondanti.
• Preferire la ampiezza rispetto alla profondità. Idealmente, un albero non deve avere più di quattro livelli e gli oggetti a cui si accede più comunemente dovrebbero essere visualizzati nei primi due livelli.
• Determinare se è effettivamente necessario un nodo radice. Specificare un nodo radice se gli utenti devono avere la possibilità di eseguire comandi sull'intero albero (possibilmente usando un menu di scelta rapida nel nodo radice). In caso contrario, l'albero è più semplice e facile da usare senza di esso.
• Se l'albero dispone di metodi di accesso alternativi, ad esempio una ricerca di parole o un indice, ottimizzare l'albero per l'esplorazione concentrandosi sul contenuto più utile. Con metodi di accesso alternativi, il contenuto dell'albero non deve essere completo. Semplificando l'albero, gli utenti possono trovare più facilmente il contenuto più utile.

Visualizzazioni albero casella di controllo

• Visualizzare il numero di elementi selezionati sotto l'elenco, soprattutto se è probabile che gli utenti selezionino più elementi. Questo feedback consente agli utenti di verificare che la selezione sia corretta.

  

  In questo esempio il numero di elementi selezionati viene visualizzato sotto l'albero. È chiaro che due elementi non sono selezionati.

• Se sono presenti potenzialmente molti elementi e la selezione o la cancellazione di tutti questi elementi è probabile, aggiungere Seleziona tutto e Cancella tutti i pulsanti di comando.

• Usare caselle di controllo con stato misto per indicare la selezione parziale degli elementi in un contenitore.

  Corretto:

  

  In questo esempio, le caselle di controllo con stato misto vengono usate per indicare la selezione parziale.

Dimensioni e spaziatura consigliate

Dimensioni consigliate e spaziatura per i controlli di visualizzazione albero.

• Scegliere una larghezza della visualizzazione albero che evita la necessità di scorrimento orizzontale per la maggior parte degli elementi quando l'albero è completamente espanso.

• Includere un ulteriore 30% per supportare la localizzazione.

• Scegliere un'altezza della visualizzazione albero che elimina lo scorrimento verticale non necessario. Prendere in considerazione la possibilità di rendere una visualizzazione albero leggermente più lunga (o ancora di più, se è disponibile spazio) se in questo modo si riduce la necessità di una barra di scorrimento verticale.

  Non corretto:

  

  In questo esempio, rendere la visualizzazione albero leggermente più ampia e più lunga eliminerebbe le barre di scorrimento nella maggior parte dei casi. In questo particolare albero è possibile aprire un solo contenitore alla volta.

• Se gli utenti possono rendere più grande la visualizzazione albero, rendere ridimensionabile la visualizzazione albero e la relativa finestra padre. In questo modo gli utenti possono modificare le dimensioni della visualizzazione albero in base alle esigenze.

Etichette

Etichette di controllo

• Per tutte le visualizzazioni albero sono necessarie etichette. Scrivere l'etichetta come parola o frase, non come frase, terminando con due punti e usando testo statico.

• Assegnare una chiave di accesso univoca. Per le linee guida per l'assegnazione, vedere Tastiera.

• Usare le maiuscole/minuscole come nelle frasi comuni.

• Posizionare l'etichetta sopra il controllo e allineare l'etichetta con il bordo sinistro del controllo.

• Per le visualizzazioni albero a selezione multipla, scrivere l'etichetta in modo che sia possibile selezionare più. Le etichette della visualizzazione albero della casella di controllo possono essere meno esplicite.

  Non corretto:

  

  In questo esempio, l'etichetta non fornisce informazioni sulla selezione multipla.

  Meglio:

  

  In questo esempio, l'etichetta indica chiaramente che è possibile eseguire più selezioni.

  Miglior:

  

  In questo esempio, le caselle di controllo indicano chiaramente che è possibile eseguire più selezioni, quindi l'etichetta non deve essere esplicita.

Testo dati

• Usare le maiuscole/minuscole come nelle frasi comuni.

Testo informativo

• Se è necessario aggiungere testo informativo su una visualizzazione albero, aggiungerlo sopra l'etichetta. Usare frasi complete con punteggiatura finale.

• Usare le maiuscole/minuscole come nelle frasi comuni.

• Spiegazioni supplementari utili ma non necessarie devono essere mantenute brevi. Inserire queste informazioni tra parentesi tra l'etichetta e i due punti, dopo l'istruzione principale, se usata invece di un'etichetta o sotto il controllo.

  

  In questo esempio, la spiegazione supplementare è sotto il controllo .

Documentazione

Quando si fa riferimento alle visualizzazioni albero:

• Usare il testo esatto dell'etichetta, inclusa la relativa maiuscola, ma non includere il carattere di sottolineatura della chiave di scelta o i due punti. Includere l'elenco di parole o l'elenco gerarchico se il contesto richiede una distinzione da elenchi regolari.
• Per gli elementi della struttura ad albero, usare il testo esatto dell'elemento, inclusa la relativa maiuscola.
• Fare riferimento alle visualizzazioni albero come viste ad albero solo nella programmazione e in altre documentazioni tecniche. Ovunque, usare l'elenco o l'elenco gerarchico perché l'albero dei termini crea confusione per la maggior parte degli utenti.
• Per descrivere l'interazione dell'utente, usare select per i dati ed espandere e comprimere i pulsanti più e meno.
• Quando possibile, formattare l'etichetta e gli elementi dell'albero usando il testo in grassetto. In caso contrario, inserire l'etichetta e gli elementi tra virgolette solo se necessario per evitare confusione.

Esempio: nell'elenco Contenuto selezionare Progettazione interfaccia utente.

Quando si fa riferimento alle caselle di controllo in una visualizzazione albero:

• Usare il testo esatto dell'etichetta, inclusa la relativa maiuscola, e includere le parole casella di controllo. Non includere il carattere di sottolineatura del tasto di scelta.
• Per descrivere l'interazione dell'utente, usare seleziona e deseleziona.
• Quando possibile, formattare l'etichetta usando il testo in grassetto. In caso contrario, inserire l'etichetta tra virgolette solo se necessario per evitare confusione.

Esempio: nell'elenco Elementi di cui eseguire il backup selezionare la casella di controllo Documenti .