Caselle di riepilogo

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

Casella di riepilogo tipica a selezione singola.

Nota

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

È il controllo giusto?

Per decidere, prendi in considerazione queste domande:

  • L'elenco presenta i dati, anziché le opzioni di 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 le visualizzazioni, il gruppo, ordinare in base alle 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? Se non è così, usa un altro controllo. Per scegliere più opzioni, usare invece un elenco di selezione multipla standard, un elenco di caselle di controllo, un generatore di elenchi o aggiungere/rimuovere un elenco.
  • Esiste un'opzione predefinita consigliata per la maggior parte degli utenti nella maggior parte delle situazioni? L'opzione selezionata è molto più importante rispetto alla visualizzazione delle alternative? In tal caso, prendere in considerazione l'uso di un elenco a discesa se non si vuole incoraggiare gli utenti a apportare modifiche nascondendo le alternative.

screenshot della qualità più elevata come pulsante predefinito

In questo esempio, la migliore qualità del colore è la scelta migliore per la maggior parte degli utenti, quindi un elenco a discesa è una buona scelta per ridurre le alternative.

  • L'elenco richiede un'interazione costante? In tal caso, usare un elenco di 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 visualizzati per impostare i colori di primo piano e sfondo. L'uso di un elenco a discesa in questo caso sarebbe molto noioso.

  • L'impostazione sembra una quantità relativa? Gli utenti traggono 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 di selezione multipla standard se le caselle di controllo attirano troppo 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? Se non è così, usa 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? Se non è così, usa un altro controllo. Per scegliere un elemento, usare invece un elenco a selezione singola.
  • L'ordine degli articoli selezionati è importante? In tal caso, il generatore di elenchi e i criteri di aggiunta/rimozione dell'elenco supportano l'ordine, mentre gli altri modelli di selezione multipla non lo supportano.
  • È importante che gli utenti visualizzino 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 i valori non attualmente presenti nell'elenco.
  • L'aggiunta di un valore all'elenco richiede una finestra di dialogo specializzata per la scelta degli oggetti? In tal caso, usare un elenco di aggiunta/rimozione e visualizzare la finestra di dialogo quando gli utenti fare 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 gli elenchi di selezione singola (e nessuno per gli 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 Consenti 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 di visualizzazione.
Elenchi di selezione multipla standard Consenti agli utenti di selezionare un numero qualsiasi di elementi, inclusi 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 è ideale per le attività in cui la selezione multipla non è essenziale e viene usata raramente.
Esistono due diverse modalità di selezione multipla: multiple e extended. La modalità di selezione estesa è molto 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 fare clic su qualsiasi elemento per attivare o disattivare 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 Analogamente alle caselle di riepilogo standard di selezione multipla, gli elenchi di caselle di controllo consentono agli utenti di selezionare qualsiasi numero di elementi, tra cui nessuno.
A differenza degli elenchi di selezione multipla standard, le caselle di controllo indicano chiaramente che è possibile eseguire più selezioni. Usare questo modello di elenco per le attività in cui la selezione multipla è essenziale o comunemente usata.
Screenshot dell'elenco delle barre degli strumenti
In questo esempio, gli utenti selezionano in genere più di un elemento in modo che venga usato un elenco di caselle di controllo.
Data questa chiara indicazione della selezione multipla, è possibile presupporre che gli elenchi di caselle di controllo siano preferibili agli elenchi standard di selezione multipla. In pratica, alcune attività richiedono più selezioni 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.
Elenchi di anteprima Può essere una o più selezioni, ma visualizzano 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 solo testo.
Generatori di elenchi Consentire agli utenti di creare un elenco di opzioni 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 creato. Sono disponibili due pulsanti di comando tra gli elenchi:
  • Pulsante Aggiungi che sposta l'opzione attualmente selezionata nell'elenco da compilare, inserita prima dell'elemento selezionato. Facendo 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. (Facendo doppio clic su un elemento nell'elenco compilato si verifica 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.
Aggiungere/rimuovere elenchi Consentire 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 una selezione oggetti specializzata o persino 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 grande elenco di elementi da zero. Di conseguenza, vengono usati meglio per creare elenchi brevi o modificare elenchi già esistenti.

Indicazioni

Presentazione

  • Ordinare le voci 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.

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

In questo esempio gli elementi della casella di riepilogo vengono ordinati in base alla relazione spaziale.

Errato:screenshot dell'elenco disorganizzato

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

Risposta esatta:screenshot dell'elenco alfabetico

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

  • Posizionare 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, usare invece le meta-opzioni. Gli utenti non sanno come interpretare gli elementi vuoti, mentre il significato delle meta-opzioni è esplicito.

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

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

Risposta esatta: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. 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 gli utenti non possono eseguire alcuna operazione con gli elementi selezionati, non consentire la selezione.

Correzione:schermata dell'elenco delle modifiche della procedura guidata completate

Questa casella di riepilogo visualizza un elenco di sola lettura delle modifiche; non è necessario selezionare.

  • Quando si disabilita una casella di riepilogo, disabilitare anche le etichette associate e i 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.
    • Visualizza dinamicamente altri controlli correlati al controllo selezionato (le utilità per la lettura dello schermo non possono rilevare tali eventi). Eccezione: È possibile modificare dinamicamente 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 multicolonna si basano sullo scorrimento orizzontale, che in genere è più difficile da usare rispetto allo scorrimento verticale. Gli elenchi multicolonna che richiedono lo scorrimento orizzontale possono essere usati 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 utili, ma indicano anche 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 specificare 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. Le caselle di riepilogo standard non possono essere scorrevoli orizzontalmente, 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 verrà localizzato.
  • 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. È 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 mostrando più elementi alla volta e rendendo la barra di scorrimento più facile da posizionare.
  • 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; utilizzare due punti alla fine dell'etichetta.

Eccezione: Omettere l'etichetta se è semplicemente un ritrascimento 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:schermata dell'elenco con etichetta ridondante

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

Migliore:schermata 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.

schermata del pulsante e dell'elenco usando 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, vedere Tastiera.
  • Usare la maiuscola in stile frase.
  • Posizionare l'etichetta a sinistra o superiore al controllo e allineare l'etichetta con il bordo sinistro del controllo.
    • Se l'etichetta è a sinistra, allineare verticalmente il testo dell'etichetta alla prima riga di testo nel controllo.

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

In questi esempi l'etichetta in alto si allinea con il bordo sinistro della casella di riepilogo e l'etichetta a sinistra si allinea con il testo nella casella di riepilogo.

Errore:schermata dell'elenco con etichetta allineata al testo sopra lo screenshot dell'elenco con etichetta allineata in alto a sinistra

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

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

Correzione:schermata dell'elenco con la selezione di una o più etichette

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

Non corretto:schermata della casella di riepilogo con l'etichetta dei componenti aggiuntivi

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

Best:screen shot of check-box list with add-ons label

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

  • È possibile specificare unità (secondi, connessioni e così via) nelle 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 appropriato.
  • Scrivere l'etichetta come parola o frase, non come frase e non usare punteggiatura finale.
  • Usare la frase parallela e provare a mantenere la lunghezza circa la stessa per tutte le opzioni.

Testo informativo e supplementare

  • Se è necessario aggiungere testo istruzioni su una casella di riepilogo, aggiungerlo sopra l'etichetta. Usare frasi complete con punteggiatura finale.
  • Usare la maiuscola in stile frase.
  • Altre informazioni utili ma non necessarie devono essere mantenute brevi. Posizionare questo testo tra parentesi tra l'etichetta e i due punti o senza parentesi sotto il controllo.

schermata 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 dell'etichetta esatta, inclusa la maiuscola, ma non includere il carattere di sottolineatura o i due punti 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 di elenco, usare il testo esatto dell'elemento, inclusa la relativa maiuscola.
  • Nella programmazione e in altre documentazioni tecniche fare riferimento alle caselle di riepilogo come caselle di riepilogo. Ovunque, usare l'elenco.
  • Per descrivere l'interazione dell'utente, selezionare.
  • Quando possibile, formattare l'etichetta e gli elementi dell'elenco usando il testo grassetto. In caso contrario, inserire l'etichetta e gli elementi tra virgolette solo se necessario per evitare confusione.

Esempio: nell'elenco Vai a quello che selezionare Segnalibro.