Visualizzazioni elenco

Nota

Questa guida di 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 di progettazione correnti.

Con una visualizzazione elenco, gli utenti possono visualizzare e interagire con una raccolta di oggetti dati, usando una singola selezione o una selezione multipla.

screenshot della visualizzazione elenco con intestazioni di colonna

Una visualizzazione elenco tipica.

Le visualizzazioni elenco hanno maggiore flessibilità e funzionalità rispetto alle caselle di riepilogo. A differenza delle caselle di riepilogo, supportano la modifica delle visualizzazioni, il raggruppamento, più colonne con intestazioni, l'ordinamento in base alle colonne, la modifica della larghezza e l'ordine delle colonne, l'origine di trascinamento o una destinazione di rilascio e la copia dei dati da e verso gli Appunti.

Nota

Le linee guida relative al layout e alle caselle di riepilogo vengono presentate in articoli separati.

È il controllo giusto?

Una visualizzazione elenco è più che una casella di riepilogo più flessibile e funzionale: la sua funzionalità aggiuntiva comporta un utilizzo diverso. Nella tabella seguente viene illustrato il confronto.

Utilizzo Caselle di riepilogo Visualizzazioni elenco
Tipo di dati
Sia i dati che le opzioni del programma.
Solo dati.
Contents
Solo etichette.
Etichette e dati ausiliari, possibilmente in più colonne.
Interazione
Utilizzato per effettuare selezioni.
Può essere usato per effettuare selezioni, ma spesso usato per la visualizzazione e l'interazione con i dati. Può essere un'origine di trascinamento o una destinazione di rilascio.
Presentazione
Fisso.
Gli utenti possono modificare visualizzazioni, raggruppare, ordinare in base alle colonne e modificare la larghezza e l'ordine delle colonne.

Per decidere se si tratta del controllo corretto, prendere in considerazione queste domande:

  • L'elenco presenta i dati, anziché le opzioni del programma? In caso contrario, prendere in considerazione l'uso di una casella di riepilogo.
  • Gli utenti devono modificare visualizzazioni, raggruppare, ordinare per colonne o modificare la larghezza e l'ordine delle colonne? In caso contrario, usare una casella di riepilogo.
  • Il controllo deve essere un'origine di trascinamento o una destinazione di rilascio? In tal caso, usare una visualizzazione elenco.
  • È necessario copiare o incollare gli elementi dell'elenco dagli Appunti? In tal caso, usare una visualizzazione elenco.

Visualizzazioni elenco casella di controllo

  • Il controllo viene usato per scegliere zero o più elementi da un elenco di dati? Per scegliere un elemento, usare invece la selezione singola.
  • La selezione multipla è essenziale per l'attività o per l'uso comune? In tal caso, usare una visualizzazione elenco casella di controllo per rendere più ovvie le selezioni, soprattutto se gli utenti di destinazione non sono avanzati. In caso contrario, usare una visualizzazione elenco a selezione multipla standard se le caselle di controllo attirano troppa attenzione a più selezioni o comportano una quantità eccessiva di confusione dello schermo.
  • La stabilità della selezione multipla è importante? In tal caso, usare un elenco di caselle di controllo, un generatore di elenchi o un elenco di aggiunta/rimozione perché facendo clic viene modificato solo un singolo elemento alla volta. Con un elenco di selezione multipla standard, è molto facile cancellare tutte le selezioni anche per caso.

Nota

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

Modelli di utilizzo

Tutte le visualizzazioni supportano la selezione singola, in cui gli utenti possono selezionare un solo elemento alla volta e più selezioni, in cui gli utenti possono selezionare qualsiasi numero di elementi, tra cui nessuno. Le visualizzazioni elenco supportano la modalità di selezione estesa, in cui la selezione può essere estesa trascinando o premendo MAIUSC+clic o CTRL+clic per selezionare rispettivamente gruppi di valori contigui o non adiacenti. A differenza delle caselle di riepilogo, non supportano la modalità di selezione multipla, in cui facendo clic su qualsiasi elemento viene attivato o disattivato lo stato di selezione indipendentemente dai tasti MAIUSC e CTRL.

Visualizzazione elenco standard

Il controllo visualizzazione elenco supporta cinque visualizzazioni standard:

Utilizzo Esempio
Riquadro
ogni elemento viene visualizzato come icona media, con un'etichetta e dettagli facoltativi a destra.
screenshot delle anteprime con titoli e dettagli
La visualizzazione riquadro mostra icone medie con etichette e dettagli facoltativi a destra.
Icona grande
ogni elemento viene visualizzato come un'icona extra grande, grande o media con un'etichetta sotto di essa.
screenshot della visualizzazione elenco anteprime di grandi dimensioni
La visualizzazione Icona grande mostra ogni elemento come icona grande con un'etichetta sotto di essa.
Icona piccola
ogni elemento viene visualizzato come icona piccola con un'etichetta a destra.
schermata della visualizzazione elenco delle anteprime
La visualizzazione Icona piccola mostra ogni elemento come icona piccola con l'etichetta a destra.
Elenco
ogni elemento viene visualizzato come icona piccola con un'etichetta a destra.
in modalità elenco, questa visualizzazione ordina gli elementi nelle colonne e usa una barra di scorrimento orizzontale. al contrario, le modalità di visualizzazione icona ordinano gli elementi nelle righe e usano una barra di scorrimento verticale.
screenshot della visualizzazione elenco in modalità elenco
La modalità elenco mostra ogni elemento come icona piccola con l'etichetta a destra.
Dettagli
ogni elemento viene visualizzato come riga in un formato tabulare. la colonna all'estrema sinistra contiene sia l'icona facoltativa che l'etichetta dell'elemento e le colonne successive contengono informazioni aggiuntive, ad esempio le proprietà dell'elemento.
inoltre, le colonne possono essere aggiunte o rimosse e riordinate e ridimensionate. le righe possono essere raggruppate, ordinate in base alla colonna.
screenshot della visualizzazione elenco in modalità dettagli
La visualizzazione Dettagli mostra ogni elemento come riga in un formato di tabella.

Varianti di visualizzazione elenco

Etichetta Valore
Selezione colonna
Le visualizzazioni elenco in alcuni casi hanno così tante colonne che non è pratico visualizzarle tutte. In questo caso, l'approccio migliore consiste nel visualizzare le colonne più utili per impostazione predefinita e consentire agli utenti di aggiungere o rimuovere colonne in base alle esigenze.
Screenshot della visualizzazione elenco con menu Selezione colonna
Facendo clic con il pulsante destro del mouse sull'intestazione di colonna viene visualizzato un menu di scelta rapida che consente agli utenti di aggiungere o rimuovere colonne.
Screenshot della finestra di dialogo Scegli dettagli
Facendo clic su Altro nel menu di scelta rapida dell'intestazione di colonna viene visualizzata la finestra di dialogo Scegli colonne, che consente agli utenti di aggiungere o rimuovere colonne e riordinarle.
Visualizzazione elenco casella di controllo
Consenti agli utenti di selezionare più elementi.
Le visualizzazioni elenco a selezione multipla hanno esattamente lo stesso aspetto delle visualizzazioni elenco a selezione singola, quindi non c'è alcun indizio visivo che supportano la selezione multipla. È possibile utilizzare una visualizzazione elenco casella di controllo per indicare chiaramente che è possibile selezionare più opzioni. Di conseguenza, questo modello deve essere usato per le attività in cui la selezione multipla è essenziale o comunemente usata.
Screenshot della finestra di dialogo con diverse caselle di controllo
In questo esempio, una visualizzazione Icona piccola usa le caselle di controllo perché la selezione multipla è essenziale per l'attività.
Visualizzare un elenco con gruppi
Organizzare i dati in gruppi.
Mentre le visualizzazioni Dettagli spesso supportano l'ordinamento dei dati in base a una delle colonne, le visualizzazioni elenco consentono inoltre agli utenti di organizzare gli elementi in gruppi. Alcuni vantaggi del raggruppamento sono:
  • I gruppi funzionano in tutte le visualizzazioni (ad eccezione dell'elenco), quindi, ad esempio, gli utenti potrebbero raggruppare una visualizzazione di icone extra large degli album da parte dell'artista.
  • I gruppi possono essere raccolte di alto livello, che spesso sono più significative rispetto al raggruppamento diretto dei dati. Ad esempio, Esplora risorse raggruppa le date in Today, Yesterday, Last week, Earlier this year e A long time ago.
Screenshot della visualizzazione elenco con diversi gruppi di dati
In questo esempio il Centro di benvenuto di Windows mostra gli elementi raggruppati in una visualizzazione elenco.

Linee guida

Presentazione

  • Ordinare le voci di elenco in un ordine logico. Ordina i nomi in ordine alfabetico, numeri in ordine numerico e date in ordine cronologico.

  • Se appropriato, consentire agli utenti di modificare l'ordinamento. L'ordinamento degli utenti è importante se l'elenco include molti elementi o se esistono scenari in cui gli elementi vengono trovati in modo più efficace usando un ordinamento diverso da quello predefinito.

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

  • Evitare di presentare visualizzazioni elenco vuote. Se gli utenti creano un elenco, inizializzare l'elenco con istruzioni o elementi di esempio che potrebbero essere necessari agli utenti.

    screenshot della finestra di dialogo di ricerca con le istruzioni

    In questo esempio la visualizzazione Elenco di ricerca presenta inizialmente le istruzioni.

  • Se gli utenti possono modificare visualizzazioni, raggruppare, ordinare in base alle colonne o modificare le colonne e le relative larghezze e ordine, rendere persistenti tali impostazioni in modo che vengano applicate alla successiva visualizzazione elenco. Renderli persistenti in base a una visualizzazione per elenco, per utente.

Interazione

  • Usare un solo clic per selezionare l'elemento di elenco a cui punta l'utente. Eccezione: per il modello di elenco dei collegamenti ai comandi, un singolo clic seleziona l'elemento e chiude la finestra o passa alla pagina successiva.

  • 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 relativo 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 che ha lo stesso effetto.

  • Se un elemento di elenco richiede una spiegazione più dettagliata, fornire la spiegazione in una descrizione informazioni. Usare frasi complete e punteggiatura finale.

    screenshot della visualizzazione elenco con descrizione tastiera

    In questo esempio viene usata una descrizione informativa per fornire ulteriori informazioni.

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

  • Se gli utenti possono modificare l'ordinamento e il raggruppamento, specificare i menu di scelta rapida Ordina per e Raggruppa per. Il primo clic su un nome di colonna ordina o raggruppa l'elenco in ordine crescente per tale colonna, il secondo clic ordina o raggruppa in ordine decrescente. Usare l'ordine precedente (da un'altra colonna) come chiave secondaria.

    screenshot della visualizzazione elenco con menu 'sort-by'

    In questo esempio il menu di scelta rapida Ordina per modifica l'ordinamento. Fare clic su Nome dopo l'ordinamento in base al nome in ordine crescente. Facendo di nuovo clic su Nome viene ordinato in base al nome in ordine decrescente.

  • Rendere accessibile l'intestazione di colonna della visualizzazione elenco tramite la tastiera.

    • Sviluppatori: è possibile eseguire questa operazione impostando lo stato attivo sul controllo intestazione di colonna. Questa funzionalità è una novità di Windows Vista.
  • Quando si disabilita una visualizzazione elenco, disabilitare anche eventuali etichette associate e pulsanti di comando.

  • Evitare lo scorrimento orizzontale. La modalità Elenco usa lo scorrimento orizzontale. Questa modalità è in genere la più compatta, ma lo scorrimento orizzontale è in genere più difficile da usare rispetto allo scorrimento verticale. È consigliabile usare invece la visualizzazione Icona piccola se la compattazione non è importante. Tuttavia, la modalità Elenco è una buona scelta quando sono presenti molti elementi ordinati in ordine alfabetico e spazio sullo schermo sufficiente per un controllo wide.

    Accettabile:

    screenshot di un controllo in modalità elenco wide

    In questo esempio viene usata la modalità Elenco perché sono presenti molti elementi e un sacco di spazio disponibile sullo schermo per un controllo wide.

Elenchi di selezione multipla

  • Valutare la possibilità di visualizzare il numero di elementi selezionati sotto l'elenco, soprattutto se è probabile che gli utenti selezionino diversi elementi. Queste informazioni non solo offrono feedback utile, ma indicano anche chiaramente che la visualizzazione elenco supporta la selezione multipla.

    screenshot dell'elenco di cinque anteprime selezionate

    In questo esempio il numero di elementi selezionati viene visualizzato sotto l'elenco.

  • In alternativa, anziché il numero di elementi selezionati, è possibile assegnare altre metriche di selezione che potrebbero essere più significative, ad esempio le risorse necessarie per le selezioni.

    screenshot della finestra di dialogo che mostra lo spazio su disco

    In questo esempio lo spazio su disco necessario per installare i componenti è più significativo del numero di componenti selezionati.

  • Per le visualizzazioni elenco di caselle di controllo, 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. Lo stato misto non viene usato come terzo stato per un singolo elemento.

Modifica delle visualizzazioni

Se gli utenti possono modificare le visualizzazioni:

  • Scegliere la visualizzazione più comoda per impostazione predefinita. Tutte le modifiche apportate dagli utenti devono essere rese persistenti in una visualizzazione per elenco, per utente.

  • Modificare la visualizzazione usando un pulsante di divisione, un pulsante di menu o un elenco a discesa. Quando pratico, usare un pulsante di divisione sulla barra degli strumenti e modificare l'etichetta del pulsante per riflettere la visualizzazione corrente.

    screenshot dell'elenco con il pulsante split 'views'

    In questo esempio viene usato un pulsante di divisione sulla barra degli strumenti per modificare le visualizzazioni.

  • Specificare un menu di scelta rapida Visualizza.

    screenshot dell'elenco con menu di scelta rapida 'Visualizza'

In questo esempio viene usato un menu di scelta rapida Visualizza per modificare le visualizzazioni.

Visualizzazioni dettagli

  • È consigliabile usare la visualizzazione riquadri per migliorare la leggibilità.

    Accettabile:

    screenshot dell'elenco dei dettagli con colonne strette

    In questo esempio sono presenti troppi dati e la finestra, l'elenco e le colonne sono troppo piccole, rendendo difficile la lettura degli elementi dell'elenco.

    Migliore:

    screenshot dell'elenco dei dettagli con i dati nei gruppi

    In questo esempio la visualizzazione Riquadro visualizza i dati senza troncamento.

  • Scegliere le larghezze di colonna predefinite appropriate per i dati più lunghi. Le visualizzazioni elenco troncano automaticamente dati lunghi con puntini di sospensione, quindi le larghezze delle colonne sono appropriate se per impostazione predefinita vengono visualizzati pochi puntini di sospensione. Mentre gli utenti possono ridimensionare le colonne, preferire altre soluzioni:

    • Ridimensionare ogni larghezza della colonna in base ai dati.
    • Ridimensionare la larghezza del controllo in modo da adattarne le colonne più eventuali barre di scorrimento probabili.
    • Se necessario, usare lo scorrimento orizzontale.
    • Sono stati troncati solo i dati per gli elementi dispari o come ultima risorsa.

    Se i dati di dimensioni normali devono essere troncati per impostazione predefinita, rendere ridimensionabile la finestra e la visualizzazione elenco. Includere un ulteriore 30% (fino al 200% per testo più breve) per qualsiasi testo (ma non numeri) che verranno localizzati.

    Risposta errata:

    screenshot delle colonne di elenco con dati troncati

    In questo esempio la maggior parte dei dati viene troncata. I molti puntini di sospensione indicano chiaramente che la larghezza del controllo e della colonna è troppo piccola per i dati.

    Risposta errata:

    screenshot dell'elenco a una colonna con dati troncati

    In questo esempio i dati vengono troncati senza motivo.

  • Scegliere un ordine di colonna predefinito appropriato. In genere, ordinare le colonne nel modo seguente:

    • In primo luogo, il nome dell'elemento o i dati di identificazione.
    • Altri dati utili per differenziare gli elementi dell'elenco.
    • Successivamente, i dati più utili (preferibilmente brevi o a lunghezza fissa).
    • Successivamente, dati meno utili (preferibili a lunghezza corta o fissa).
    • Dati di lunghezza variabile più lunghi e lunghi.

    I dati di lunghezza variabile lunghi vengono inseriti nelle ultime colonne per ridurre la necessità di scorrimento orizzontale. All'interno di queste categorie inserire le informazioni correlate in una sequenza logica.

  • Se appropriato, consentire agli utenti di aggiungere e rimuovere colonne, nonché di modificare l'ordine. Visualizzare le colonne più utili per impostazione predefinita. Questo risultato viene ottenuto con l'attributo Header Drag Drop.

  • Scegliere un allineamento appropriato per i dati. Usare le regole seguenti:

    • Numeri, valute e ore allineati a destra.
    • Testo allineato a sinistra, ID (anche se numerico) e date.
  • Per le intestazioni di colonna ordinabili, il primo clic su un'intestazione ordina l'elenco in ordine crescente per la colonna, il secondo clic ordina in ordine decrescente. Usare l'ordinamento precedente (da un'altra colonna) come chiave di ordinamento secondaria.

    screenshot dell'elenco dei dettagli con i dati ordinati

    In questo esempio la colonna Name è stata selezionata per prima, quindi sulla colonna Tipo. Di conseguenza, type in ordine crescente è la chiave di ordinamento primaria e Name in ordine crescente è il secondario.

  • Usare l'attributo Selezione riga completa in modo che gli utenti possano determinare facilmente gli elementi selezionati in tutte le colonne.

  • Non usare un'intestazione di colonna ordinabile a meno che i dati non possano essere ordinati.

  • Non usare un'intestazione di colonna se è presente una sola colonna e non è necessario invertire l'ordinamento. Usare invece un'etichetta per identificare i dati.

    Risposta errata:

    screenshot dell'elenco con etichetta nell'intestazione di colonna

    Risposta corretta:

    screenshot dell'elenco con etichetta sopra il controllo

    Nell'esempio corretto viene usata un'etichetta anziché un'intestazione di colonna.

screenshot del ridimensionamento e della spaziatura degli elenchi

Dimensioni consigliate e spaziatura per le visualizzazioni elenco.

  • Scegliere un'altezza della visualizzazione elenco che visualizza un numero integrale di elementi. Evitare di troncare gli elementi verticalmente.
  • Scegliere una dimensione di visualizzazione elenco che elimina lo scorrimento verticale e orizzontale non necessario in tutte le visualizzazioni supportate. Le visualizzazioni elenco devono essere visualizzate tra 3 e 20 elementi. Se si esegue questa operazione, è consigliabile aumentare leggermente le dimensioni di una visualizzazione elenco, eliminando una barra di scorrimento. Gli elenchi con potenzialmente molti elementi devono visualizzare almeno cinque elementi per facilitare lo scorrimento visualizzando più elementi alla volta e rendendo più facile posizionare la barra di scorrimento.
  • Se gli utenti possono rendere più grande la visualizzazione elenco, rendere ridimensionabile la visualizzazione elenco e la relativa finestra padre. In questo modo gli utenti possono modificare le dimensioni della visualizzazione elenco in base alle esigenze. Tuttavia, le visualizzazioni elenco ridimensionabili devono visualizzare meno di tre elementi.

Etichette

Etichette di controllo

  • Tutte le visualizzazioni elenco necessitano di etichette. Scrivere l'etichetta come parola o frase, non come frase, terminando con due punti usando testo statico.

  • Assegnare una chiave di accesso univoca per ogni etichetta. Per linee guida, vedi Tastiera.

  • Usare la maiuscola in stile frase.

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

  • Per le visualizzazioni elenco a selezione multipla, scrivere l'etichetta che indica chiaramente più selezioni è possibile. Le etichette della visualizzazione elenco casella di controllo possono essere meno esplicite.

    Risposta corretta:

    screenshot dell'etichetta: selezionare uno o più componenti aggiuntivi

    In questo esempio, l'etichetta indica chiaramente che è possibile selezionare più opzioni.

    Risposta errata:

    screenshot dell'etichetta: componenti aggiuntivi

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

    Accettabile:

    screenshot dell'etichetta di elenco casella di controllo: componenti aggiuntivi

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

  • È possibile specificare unità (secondi, connessioni e così via) tra parentesi dopo l'etichetta.

Etichette di intestazione

  • Mantenere brevi le etichette delle intestazioni (tre parole o meno).
  • Usare una singola frase sostantiva o sostantivo senza punteggiatura finale.
  • Usare la maiuscola in stile frase.
  • Allineare l'intestazione allo stesso modo dei dati.

Raggruppare le etichette

  • Usare le etichette di gruppo seguenti per le raccolte di alto livello:
    • Nomi: usare la prima lettera di intervalli di nomi o lettere.
    • Dimensioni: Non specificato, 0 KB, 0-10 KB, 10-100 KB, 100 KB - 1 MB, 1-16 MB, 16-128 MB
    • Date: Oggi, Ieri, Settimana scorsa, Precedente quest'anno, e Molto tempo fa.
  • In caso contrario, le etichette di gruppo usano il testo esatto dei dati raggruppati, incluse le maiuscole e i segni di punteggiatura.

Testo dei dati

Testo informativo

  • Se è necessario aggiungere testo informativo su una visualizzazione elenco, aggiungerlo sopra l'etichetta. Usare frasi complete con punteggiatura finale.
  • Usare la maiuscola in stile frase.
  • Informazioni aggiuntive utili ma non necessarie devono essere mantenute brevi. Inserire queste informazioni tra parentesi tra l'etichetta e i due punti o senza parentesi sotto il controllo.

Documentazione

Quando si fa riferimento alle visualizzazioni elenco:

  • Usare il testo esatto dell'etichetta, inclusa la maiuscola, ma non includere il carattere di sottolineatura o i due punti della chiave di accesso e includere l'elenco di parole. Non fare riferimento a una casella di riepilogo come casella di riepilogo, visualizzazione elenco o campo.
  • Per i dati dell'elenco, usare il testo esatto dei dati, inclusa la relativa maiuscola.
  • Fare riferimento alle visualizzazioni elenco come visualizzazioni elenco solo nella programmazione e in altre documentazioni tecniche. Ovunque usi l'elenco.
  • Per descrivere l'interazione dell'utente, usare la selezione per i dati e fare clic per le intestazioni.
  • Quando possibile, formattare le opzioni di etichetta e elenco usando il testo in grassetto. In caso contrario, inserire l'etichetta e le opzioni tra virgolette solo se necessario per evitare confusione.

Esempio: nell'elenco Programmi e servizi selezionare Condivisione file e stampanti.

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

  • Usare il testo esatto dell'etichetta, inclusa la relativa maiuscola, e includere la casella di controllo della parola. Non includere il carattere di sottolineatura della chiave di accesso.
  • Per descrivere l'interazione dell'utente, usare select e clear.
  • Quando possibile, formattare l'etichetta usando il testo grassetto. In caso contrario, inserire l'etichetta tra virgolette solo se necessario per evitare confusione.

Esempio: selezionare la casella di controllo Sottolineatura .