Visualizzazioni albero

Articolo
06/13/2023

Nota

Questa guida alla progettazione è stata creata per Windows 7 e non è stata aggiornata per le versioni più recenti di Windows. Gran parte delle linee guida si applica ancora in linea di principio, ma la presentazione e gli esempi non riflettono le linee guida correnti sulla progettazione.

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.

schermata della visualizzazione albero di Esplora finestre

Visualizzazione albero tipica.

Nota

Le linee guida relative al layout e ai menu vengono presentate in articoli separati.

È 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.

Nota

A volte un controllo simile a una visualizzazione albero viene implementato usando una visualizzazione elenco. In questi casi, applicare le linee guida in base all'utilizzo, non all'implementazione.

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.