Condividi tramite


Caselle di riepilogo

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 casella di riepilogo, gli utenti possono selezionare da un set di valori presentati in un elenco sempre visibile. Con una casella di riepilogo a selezione singola, gli utenti selezionano un elemento da un elenco di valori che si escludono a vicenda. Con una casella di riepilogo a selezione multipla, gli utenti selezionano zero o più elementi da un elenco di valori.

screenshot della casella di riepilogo a selezione singola

Una tipica casella di riepilogo a selezione singola.

Nota

Le linee guida relative al layout e alle visualizzazioni elenco vengono presentate in articoli separati.

È il controllo giusto?

Per decidere, considerare queste domande:

  • L'elenco presenta i dati, anziché le opzioni del programma? In entrambi i casi, una casella di riepilogo è una scelta adatta indipendentemente dal numero di elementi. Al contrario, i pulsanti di opzione o le caselle di controllo sono adatti solo per un numero ridotto di opzioni di programma.
  • Gli utenti devono modificare visualizzazioni, raggruppare, ordinare per colonne o modificare la larghezza e l'ordine delle colonne? In tal caso, usare invece una visualizzazione elenco.
  • Il controllo deve essere un'origine di trascinamento o una destinazione di rilascio? In tal caso, usare invece una visualizzazione elenco.
  • È necessario copiare o incollare gli elementi dell'elenco dagli Appunti? In tal caso, usare invece una visualizzazione elenco.

Elenchi a selezione singola

  • Il controllo viene usato per scegliere un'opzione da un elenco di valori che si escludono a vicenda? In caso contrario, usare un altro controllo. Per scegliere più opzioni, usare invece un elenco standard a selezione multipla, un elenco di caselle di controllo, un generatore di elenchi o un elenco di aggiunta/rimozione.
  • Esiste un'opzione predefinita consigliata per la maggior parte degli utenti nella maggior parte delle situazioni? La visualizzazione dell'opzione selezionata è molto più importante rispetto alla visualizzazione delle alternative? In tal caso, è consigliabile usare un elenco a discesa se non si vuole incoraggiare gli utenti a apportare modifiche nascondendo le alternative.

screenshot di qualità massima come pulsante predefinito

In questo esempio, la qualità dei colori più elevata è la scelta migliore per la maggior parte degli utenti, quindi un elenco a discesa è una buona scelta per riprodurre le alternative.

  • L'elenco richiede un'interazione costante? In tal caso, usare un elenco a selezione singola per semplificare l'interazione.

screenshot dell'elenco di opzioni, ad esempio testo normale

In questo esempio, gli utenti modificano costantemente l'elemento selezionato nell'elenco Elementi di visualizzazione per impostare i colori di primo piano e di sfondo. L'uso di un elenco a discesa in questo caso sarebbe molto noioso.

  • L'impostazione sembra una quantità relativa? Gli utenti possono trarre vantaggio dal feedback immediato sull'effetto delle modifiche all'impostazione? In tal caso, prendere in considerazione l'uso di un dispositivo di scorrimento .
  • Esiste una relazione gerarchica significativa tra gli elementi dell'elenco? In tal caso, usare invece un controllo visualizzazione albero.
  • Lo spazio sullo schermo è premium? In tal caso, usare invece un elenco a discesa perché lo spazio dello schermo usato è fisso e indipendente dal numero di elementi dell'elenco.

Elenchi di selezione multipla standard ed elenchi di caselle di controllo

  • La selezione multipla è essenziale per l'attività o per l'uso comune? In tal caso, usare un elenco di caselle di controllo per rendere ovvia la selezione multipla, soprattutto se gli utenti di destinazione non sono avanzati. Molti utenti non si renderanno conto che un elenco standard di selezione multipla supporta più selezioni. Usa un elenco standard di selezione multipla se le caselle di controllo attirano troppa attenzione a più selezioni o generano un numero eccessivo di schermate.
  • 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.
  • Il controllo viene usato per scegliere zero o più elementi da un elenco di valori? In caso contrario, usare un altro controllo. Per scegliere un elemento, usare invece un elenco a selezione singola.

Elenchi di anteprima

  • Le opzioni sono più facili da selezionare con le immagini rispetto al solo testo? In tal caso, usare un elenco di anteprima.

Generatori di elenchi e aggiunta/rimozione di elenchi

  • Il controllo viene usato per scegliere zero o più elementi da un elenco di valori? In caso contrario, usare un altro controllo. Per scegliere un elemento, usare invece un elenco a selezione singola.
  • L'ordine degli elementi selezionati è importante? In tal caso, il generatore di elenchi e i modelli di aggiunta/rimozione dell'elenco supportano l'ordine, mentre gli altri modelli di selezione multipla non lo fanno.
  • È importante per gli utenti visualizzare un riepilogo di tutti gli elementi selezionati? In tal caso, il generatore di elenchi e i modelli di elenco di aggiunta/rimozione visualizzano solo gli elementi selezionati, mentre gli altri modelli di selezione multipla non lo fanno.
  • Le possibili scelte non sono vincolate? In tal caso, usare un elenco di aggiunta/rimozione in modo che gli utenti possano scegliere valori non attualmente presenti nell'elenco.
  • L'aggiunta di un valore all'elenco richiede una finestra di dialogo specializzata per la scelta di oggetti? In tal caso, usare un elenco di aggiunta/rimozione e visualizzare la finestra di dialogo quando gli utenti fanno clic su Aggiungi.
  • Lo spazio sullo schermo è premium? In tal caso, usare invece un elenco di aggiunta/rimozione perché usa meno spazio sullo schermo non sempre visualizzando il set di opzioni.

Per le caselle di riepilogo, il numero di elementi nell'elenco non è un fattore nella scelta del controllo perché vengono ridimensionati da migliaia di elementi fino a uno per elenchi a selezione singola (e nessuno per elenchi di selezione multipla). Poiché le caselle di riepilogo possono essere usate per i dati, il numero di elementi potrebbe non essere noto in anticipo.

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

Modelli di utilizzo

Le caselle di riepilogo hanno diversi modelli di utilizzo:

Etichetta Valore
Elenchi a selezione singola Consente agli utenti di selezionare un elemento alla volta.
Screenshot della casella di riepilogo con un elemento selezionato
In questo esempio, gli utenti possono selezionare un solo elemento visualizzato.
Elenchi di selezione multipla standard Consente agli utenti di selezionare un numero qualsiasi di elementi, tra cui nessuno.
Gli elenchi di selezione multipla standard hanno esattamente lo stesso aspetto degli elenchi a selezione singola, quindi non c'è alcun indizio visivo che una casella di riepilogo supporta più selezioni. Poiché gli utenti devono individuare questa capacità, questo modello di elenco è meglio usato per le attività in cui la selezione multipla non è essenziale e viene usata raramente.
Esistono due diverse modalità di selezione multipla: più e estese. La modalità di selezione estesa è di gran lunga più comune, in cui la selezione può essere estesa trascinando o con MAIUSC+clic e CTRL+clic per selezionare gruppi di valori contigui e non adiacenti, rispettivamente. Nella modalità di selezione multipla, facendo clic su un elemento viene attivato o disattivato lo stato di selezione indipendentemente dai tasti MAIUSC e CTRL. Dato questo comportamento insolito, la modalità di selezione multipla è deprecata ed è consigliabile usare invece elenchi di caselle di controllo.
Screenshot della casella di riepilogo con diversi elementi selezionati
In questo esempio, gli utenti possono selezionare un numero qualsiasi di elementi usando la modalità di selezione multipla.
Elenchi di caselle di controllo Come caselle di riepilogo a selezione multipla standard, gli elenchi di caselle di controllo consentono agli utenti di selezionare un numero qualsiasi di elementi, incluso nessuno.
A differenza degli elenchi di selezione multipla standard, le caselle di controllo indicano chiaramente che è possibile selezionare più opzioni. Usare questo modello di elenco per le attività in cui la selezione multipla è essenziale o comune.
Screenshot dell'elenco delle barre degli strumenti
In questo esempio, gli utenti in genere selezionano più di un elemento in modo che venga usato un elenco di caselle di controllo.
Data questa chiara indicazione di selezione multipla, è possibile presupporre che gli elenchi di caselle di controllo siano preferibili a elenchi di selezione multipla standard. In pratica, alcune attività richiedono una selezione multipla o la usano molto; utilizzando un elenco di caselle di controllo in questi casi attira troppo attenzione alla selezione. Di conseguenza, gli elenchi di selezione multipla standard sono molto più comuni.
Gli elenchi di anteprima possono essere una o più selezioni, ma mostrano un'anteprima dell'effetto della selezione anziché solo il testo.
Screenshot dell'anteprima delle opzioni Colore finestra
In questo esempio, un'anteprima di ogni opzione mostra chiaramente l'effetto della scelta, che è più efficace rispetto all'uso del testo da solo.
Generatori di elenchi Consente agli utenti di creare un elenco di scelte aggiungendo un elemento alla volta e, facoltativamente, impostando l'ordine di elenco.
Un generatore di elenchi è costituito da due elenchi a selezione singola: l'elenco a sinistra è un set fisso di opzioni e l'elenco a destra è l'elenco da compilare. Tra gli elenchi sono presenti due pulsanti di comando:
  • Pulsante Aggiungi che sposta l'opzione attualmente selezionata nell'elenco da compilare, inserita prima dell'elemento selezionato. Fare doppio clic su un elemento di opzione ha lo stesso effetto.
  • Pulsante Rimuovi che rimuove l'elemento selezionato dall'elenco compilato e lo restituisce all'elenco di opzioni. Fare doppio clic su un elemento nell'elenco compilato ha lo stesso effetto. L'elenco compilato può facoltativamente avere i comandi Sposta su e Sposta giù per ordinare gli elementi dell'elenco.
Screenshot del generatore di elenchi dei pulsanti della barra degli strumenti
In questo esempio viene usato un generatore di elenchi per creare una barra degli strumenti selezionando gli elementi da un set di opzioni disponibili e impostandone l'ordine.
Aggiungi/rimuovi elenchi Consente agli utenti di creare un elenco di scelte aggiungendo uno o più elementi alla volta e, facoltativamente, impostando l'ordine di elenco (ad esempio i generatori di elenchi).
A differenza di un generatore di elenchi, facendo clic su Aggiungi viene visualizzata una finestra di dialogo per selezionare gli elementi da aggiungere all'elenco. L'uso di una finestra di dialogo separata consente una notevole flessibilità nella scelta degli elementi che è possibile usare uno strumento di selezione oggetti specializzato o anche una finestra di dialogo comune. Rispetto al generatore di elenchi, questa variante è più compatta, ma richiede un po ' più sforzo per aggiungere elementi.
Screenshot dell'elenco dei contenuti del menu
In questo esempio, gli utenti possono aggiungere o rimuovere strumenti da un menu, nonché impostare l'ordine.
Mentre il generatore di elenchi e i modelli di elenco di aggiunta/rimozione sono significativamente più pesanti rispetto agli altri elenchi di selezione multipla, offrono due vantaggi unici:
  • Gli utenti hanno il controllo sull'ordine di elenco, sia durante la compilazione dell'elenco che dopo.
  • Gli utenti possono esaminare un riepilogo degli elementi selezionati, che possono essere un vantaggio significativo se il numero di scelte è elevato.
I loro svantaggi sono che richiedono molto più spazio sullo schermo e possono essere difficili da usare quando si crea un elenco di elementi di grandi dimensioni da zero. Di conseguenza, sono meglio usati per creare elenchi brevi o modificare elenchi già esistenti.

Linee guida

Presentazione

  • Ordinare gli elementi di elenco in un ordine logico, ad esempio raggruppando le opzioni correlate, inserendo prima gli elementi usati più di frequente o usando l'ordine alfabetico. Ordina i nomi in ordine alfabetico, numeri in ordine numerico e date in ordine cronologico. Gli elenchi con 12 o più elementi devono essere ordinati alfabeticamente per semplificare la ricerca degli elementi.

Corretto: screenshot dell'allineamento (a sinistra, al centro, a destra)

In questo esempio, le voci della casella di riepilogo vengono ordinate in base alla relazione spaziale.

Scorretto: screenshot dell'elenco disorganizzato

In questo esempio sono presenti così tanti elementi di elenco che devono essere ordinati in ordine alfabetico.

Corretto: screenshot dell'elenco alfabetizzato

In questo esempio gli elementi dell'elenco sono più facili da trovare perché sono ordinati in ordine alfabetico. Tuttavia, l'elemento "Tutti i prodotti Windows" si trova all'inizio dell'elenco, indipendentemente dal relativo ordinamento.

  • Posiziona le opzioni che rappresentano Tutti o Nessuno all'inizio dell'elenco, indipendentemente dall'ordinamento degli elementi rimanenti.
  • Racchiudere le meta-opzioni tra parentesi.

screenshot dell'elenco a discesa con nessuna opzione selezionata

In questo esempio "(none)" è una meta-opzione perché non è un valore valido per la scelta, ma indica che l'opzione stessa non viene usata.

  • Non avere voci di elenco vuote usa invece le meta-opzioni. Gli utenti non sanno come interpretare gli elementi vuoti, mentre il significato delle meta-opzioni è esplicito.

Scorretto: screenshot dell'elenco a discesa con l'opzione vuota selezionata

In questo esempio il significato dell'elemento vuoto non è chiaro.

Corretto: screenshot dell'elenco a discesa con nessuna opzione selezionata

In questo esempio viene invece usata la meta-opzione "(none)".

Interazione

  • Valutare la possibilità di fornire un comportamento di doppio clic. Fare 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 gli utenti non possono eseguire alcuna operazione con gli elementi selezionati, non consentire la selezione.

Corretto: screenshot dell'elenco delle modifiche della procedura guidata completate

Questa casella di riepilogo visualizza un elenco di sola lettura delle modifiche; non è necessaria alcuna selezione.

  • Quando si disabilita una casella di riepilogo, disabilitare anche eventuali etichette associate e pulsanti di comando.
  • Non usare la modifica dell'elemento selezionato in una casella di riepilogo per:
    • Eseguire i comandi.
    • Visualizzare altre finestre, ad esempio una finestra di dialogo per raccogliere più input.
    • Visualizzare dinamicamente altri controlli correlati al controllo selezionato (le utilità per la lettura dello schermo non possono rilevare tali eventi). Eccezione: è possibile modificare in modo dinamico il testo statico usato per descrivere l'elemento selezionato.

Accettabile: screenshot dei dettagli dell'elemento di elenco selezionato

In questo esempio, la modifica dell'elemento selezionato modifica la descrizione.

  • Evitare lo scorrimento orizzontale. Gli elenchi a più colonne si basano sullo scorrimento orizzontale, che in genere è più difficile da usare rispetto allo scorrimento verticale. Gli elenchi a più colonne che richiedono lo scorrimento orizzontale possono essere utilizzati quando sono presenti molti elementi ordinati in ordine alfabetico e spazio sullo schermo sufficiente per un controllo wide.

Accettabile: screenshot dell'elenco di cartelle in Esplora risorse

In questo esempio vengono usate più colonne che richiedono lo scorrimento orizzontale 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 chiaramente che la casella di riepilogo supporta più selezioni.

schermata della casella di riepilogo con quattro elementi selezionati

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

  • È possibile fornire altre metriche di selezione che potrebbero essere più significative, ad esempio le risorse necessarie per le selezioni.

screenshot dell'elenco di caselle di controllo delle funzionalità di Windows

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

  • Se sono presenti potenzialmente molti elementi di elenco e la selezione o la cancellazione di tutti questi elementi è probabile, aggiungere Seleziona tutto e Cancella tutti i pulsanti di comando.
  • Per gli elenchi di selezione multipla standard, non usare la modalità di selezione multipla perché questa modalità di selezione è stata deprecata. Per un comportamento equivalente, usare invece un elenco di caselle di controllo.

Valori predefiniti

  • Selezionare l'opzione più sicura (per evitare la perdita di dati o l'accesso al sistema) e l'opzione più sicura per impostazione predefinita. Se la sicurezza e la sicurezza non sono fattori, selezionare l'opzione più probabile o conveniente.

Eccezione: non selezionare elementi se il controllo rappresenta una proprietà in uno stato misto, che si verifica quando si visualizza una proprietà per più oggetti che non hanno la stessa impostazione.

screenshot del ridimensionamento e della spaziatura delle caselle di riepilogo

Dimensioni consigliate e spaziatura per le caselle di riepilogo.

  • Scegliere una larghezza della casella di riepilogo appropriata per i dati validi più lunghi. Non è possibile scorrere orizzontalmente le caselle di riepilogo standard, quindi gli utenti possono visualizzare solo ciò che è visibile nel controllo.
  • Includere un ulteriore 30% (fino al 200% per testo più breve) per qualsiasi testo (ma non numeri) che verranno localizzati.
  • Scegliere un'altezza della casella di riepilogo che visualizza un numero integrale di elementi. Evitare di troncare gli elementi verticalmente.
  • Scegliere un'altezza della casella di riepilogo che elimina lo scorrimento verticale non necessario. Le caselle di riepilogo devono essere visualizzate tra 3 e 20 elementi senza la necessità di scorrere. Se si esegue questa operazione, è consigliabile rendere una casella di riepilogo leggermente più lunga se si elimina la barra di scorrimento verticale. 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 casella di riepilogo, rendere ridimensionabile la casella di riepilogo e la relativa finestra padre. In questo modo gli utenti possono modificare le dimensioni della casella di riepilogo in base alle esigenze. Tuttavia, le caselle di riepilogo ridimensionabili devono visualizzare meno di tre elementi.

Etichette

Etichette di controllo

  • Tutte le caselle di riepilogo necessitano di etichette. Scrivere l'etichetta come parola o frase, non come frase; usare due punti alla fine dell'etichetta.

Eccezione: omettere l'etichetta se si tratta semplicemente di un riformulare dell'istruzione principale di una finestra di dialogo. In questo caso, l'istruzione principale accetta i due punti (a meno che non sia una domanda) e la chiave di accesso.

Accettabile: screenshot dell'elenco con etichetta ridondante

In questo esempio, l'etichetta della casella di riepilogo riformulare solo l'istruzione principale.

Migliore: screenshot dell'elenco di senza etichetta ridondante

In questo esempio l'etichetta ridondante viene rimossa, quindi l'istruzione principale accetta i due punti e la chiave di accesso.

  • Se una casella di riepilogo è subordinata a un pulsante di opzione o a una casella di controllo e viene introdotta dall'etichetta del controllo che termina con due punti, non inserire un'etichetta aggiuntiva nel controllo casella di riepilogo.

screenshot del pulsante e dell'elenco con la stessa etichetta

In questo esempio, la casella di riepilogo è subordinata a un pulsante di opzione e condivide l'etichetta.

  • Assegnare una chiave di accesso univoca. Per linee guida, vedi Tastiera.
  • Usare la maiuscola in stile frase.
  • Posizionare l'etichetta a sinistra o sopra il controllo e allineare l'etichetta al bordo sinistro del controllo.
    • Se l'etichetta è a sinistra, allineare verticalmente il testo dell'etichetta con la prima riga di testo nel controllo .

Corretto: screenshot dell'elenco con etichetta allineata a sinistra sopra screenshot dell'elenco con etichetta allineata a testo a sinistra

In questi esempi, l'etichetta in alto è allineata con il bordo sinistro della casella di riepilogo e l'etichetta a sinistra è allineata al testo nella casella di riepilogo.

Scorretto: screenshot dell'elenco con etichetta allineata al testo sopra screenshot dell'elenco con etichetta allineata in alto a sinistra

In questi esempi non corretti, l'etichetta in alto è allineata con il testo nella casella di riepilogo e l'etichetta a sinistra è allineata con la parte superiore della casella di riepilogo.

  • Per le caselle di riepilogo a selezione multipla, usare un'etichetta che indica chiaramente che è possibile selezionare più opzioni. Le etichette di elenco delle caselle di controllo possono essere meno esplicite.

Corretto: screenshot dell'elenco con la selezione di una o più etichette

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

Scorretto: screenshot della casella di riepilogo con l'etichetta dei componenti aggiuntivi

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

Miglior: screenshot dell'elenco di caselle di controllo con l'etichetta dei 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.

Testo opzione

  • Assegnare un nome univoco a ogni opzione.
  • Usare la maiuscola in stile frase, a meno che un elemento non sia un sostantivo corretto.
  • Scrivere l'etichetta come parola o frase, non come frase e non usare punteggiatura finale.
  • Usare la formulazione parallela e provare a mantenere la lunghezza uguale per tutte le opzioni.

Testo informativo e supplementare

  • Se è necessario aggiungere testo informativo su una casella di riepilogo, 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. Posizionare il testo tra parentesi tra l'etichetta e i due punti o senza parentesi sotto il controllo.

screenshot dell'elenco di caselle di controllo e del testo descrittivo

In questo esempio il testo supplementare viene inserito sotto l'elenco.

Documentazione

Quando si fa riferimento alle caselle di riepilogo:

  • Usare il testo esatto dell'etichetta, inclusa la relativa maiuscola, ma non includere il carattere di sottolineatura o i due punti della chiave di accesso. Includere l'elenco di parole. Non fare riferimento a una casella di riepilogo come casella di riepilogo o un campo.
  • Per gli elementi dell'elenco, usare il testo esatto dell'elemento, inclusa la relativa maiuscola.
  • Nella programmazione e in altri documenti tecnici fare riferimento alle caselle di riepilogo come caselle di riepilogo. Ovunque, usare l'elenco.
  • Per descrivere l'interazione dell'utente, usare select.
  • Quando possibile, formattare l'etichetta e gli elementi dell'elenco 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 Vai a quello selezionare Segnalibro.