Caselle
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 controllo, gli utenti prendere una decisione tra due scelte chiaramente opposte. L'etichetta della casella di controllo indica lo stato selezionato, mentre il significato dello stato cancellato deve essere l'opposto non ambiguo dello stato selezionato. Di conseguenza, caselle di controllo devono essere utilizzate solo per attivare o disattivare un'opzione o per selezionare o deselezionare un elemento.
Un gruppo tipico di caselle di controllo.
Nota
Le linee guida relative ai layout vengono presentate in un articolo separato.
Questo è il controllo giusto?
Per decidere, considerare queste domande:
La casella di controllo viene usata per attivare o disattivare un'opzione o per selezionare o deselezionare un elemento? In caso contrario, usare un altro controllo.
Gli stati selezionati e cancellati sono chiari e non ambigui? In caso contrario, usare pulsanti di opzione o un elenco a discesa in modo da poter etichettare gli stati in modo indipendente.
Se usato in un gruppo, il gruppo comprende scelte indipendenti, da cui gli utenti possono scegliere zero o più? In caso contrario, prendere in considerazione i controlli per le scelte dipendenti, ad esempio pulsanti di opzione e visualizzazioni albero delle caselle di controllo.
Se usato in un gruppo, il gruppo comprende scelte dipendenti, da cui gli utenti devono scegliere uno o più? In questo caso, usare un gruppo di caselle di controllo e gestire l'errore quando non è selezionata alcuna delle opzioni.
Il numero di opzioni in un gruppo è 10 o meno? Poiché lo spazio dello schermo usato è proporzionale al numero di opzioni, mantenere il numero di caselle di controllo su 10 o meno. Per più di 10 opzioni, usare un elenco di caselle di controllo .
Un pulsante di opzione è una scelta migliore? Se le caselle di controllo sono adatte solo per attivare o disattivare un'opzione, i pulsanti di opzione possono essere usati per opzioni completamente diverse. Se entrambe le soluzioni sono possibili:
Usare i pulsanti di opzione se il significato della casella di controllo deselezionata non è completamente ovvio.
risposta errata:
In questo esempio la scelta opposta da Orizzontale non è chiara, quindi la casella di controllo non è una scelta ottimale.
risposta esatta:
In questo esempio, le scelte non sono opposte, quindi i pulsanti di opzione sono la scelta migliore.
Utilizzare pulsanti di opzione nelle pagine della procedura guidata per rendere chiare le alternative, anche se una casella di controllo è altrimenti accettabile.
Usa i pulsanti di opzione se hai abbastanza spazio sullo schermo e le opzioni sono abbastanza importanti da essere un buon uso di tale spazio sullo schermo. In caso contrario, usare una casella di controllo o un elenco a discesa.
risposta errata:
In questo esempio le opzioni non sono sufficientemente importanti da usare i pulsanti di opzione.
risposta esatta:
In questo esempio, una casella di controllo è un uso efficiente dello spazio sullo schermo per questa opzione periferica.
Usare una casella di controllo se nella finestra sono presenti altre caselle di controllo.
L'opzione presenta un'opzione di programma anziché i dati? I valori dell'opzione non devono essere basati sul contesto o su altri dati. Per i dati, usare un elenco di caselle di controllo o elenco a selezione multipla.
Modelli di utilizzo
Le caselle di controllo hanno diversi modelli di utilizzo:
| Uso | Esempio |
|---|---|
|
Una singola opzione Viene usata una singola casella di controllo per selezionare una singola scelta. |
Per una singola scelta viene usata una singola casella di controllo. |
|
opzioni indipendenti (zero o più) viene usato un gruppo di caselle di controllo per selezionare da un set di zero o più scelte. |
diversamente dai controlli a selezione singola, ad esempio pulsanti di opzione, gli utenti possono selezionare qualsiasi combinazione di opzioni in un gruppo di caselle di controllo.
Un gruppo di caselle di controllo viene usato per scelte indipendenti. |
|
scelte dipendenti (una o più) È anche possibile usare un gruppo di caselle di controllo per selezionare da un set di una o più opzioni. |
potrebbe essere necessario rappresentare una selezione di una o più scelte dipendenti. poiché microsoft?windows non dispone di un controllo che supporta direttamente questo tipo di input, la soluzione migliore consiste nell'usare un gruppo di caselle di controllo e gestire l'errore quando nessuna delle opzioni è selezionata.
Viene utilizzato un gruppo di caselle di controllo in cui è necessario selezionare almeno un protocollo. |
|
Scelta mista Oltre ai relativi stati selezionati e deselezionati, anche le caselle di controllo hanno uno stato misto per la selezione multipla per indicare che l'opzione è impostata per alcuni oggetti, ma non per tutti. |
Casella di controllo con stato misto. |
Istruzioni
Generale
caselle di controllo correlate al gruppo. Combinare le opzioni correlate e separare le opzioni non correlate in gruppi di 10 o meno, usando più gruppi, se necessario.
Esempio di gruppi di opzioni correlate e indipendenti.
Riconsiderare l'uso di caselle di gruppo per organizzare gruppi di caselle di controllo questo comporta spesso confusione dello schermo.
caselle di controllo Elenco in un ordine logico, ad esempio raggruppando opzioni altamente correlate o inserendo prima le opzioni più comuni o seguendo altre progressione naturali. L'ordinamento alfabetico non è consigliato perché dipende dalla lingua e pertanto non localizzabile.
allinea le caselle di controllo verticalmente, non orizzontalmente. L'allineamento orizzontale è più difficile da leggere.
risposta esatta:
In questo esempio le caselle di controllo sono allineate correttamente.
risposta errata:
In questo esempio, l'allineamento orizzontale è più difficile da leggere.
Non usare lo stato misto per rappresentare un terzo stato. Lo stato misto viene usato per indicare che un'opzione è impostata per alcuni oggetti figlio, ma non per tutti. Gli utenti non devono essere in grado di impostare uno stato misto direttamente, ma lo stato misto è un riflesso degli oggetti figlio. Lo stato misto non viene usato come terzo stato per un singolo elemento. Per rappresentare un terzo stato, usare invece pulsanti di opzione o un elenco a discesa.
risposta errata:
In questo esempio, lo stato misto dovrebbe indicare che il servizio Tema non è installato.
risposta esatta:
In questo esempio, gli utenti possono scegliere da un elenco di tre opzioni non crittografate.
Se si fa clic su una casella di controllo con stato misto, è necessario scorrere tutti gli stati selezionati, tutti cancellati e gli stati misti originali. Per il perdono, è importante essere in grado di ripristinare lo stato misto originale perché le impostazioni potrebbero essere complesse o sconosciute all'utente. In caso contrario, l'unico modo per ripristinare lo stato misto con fiducia consiste nell'annullare l'attività e ricominciare.
Non usare le caselle di controllo come indicatore di stato. Usare invece un indicatore di stato controllo.
risposta errata:
In questo esempio, le caselle di controllo vengono usate in modo non corretto come indicatore di stato.
risposta esatta:
Esempio di indicatore di stato tipico.
Mostra caselle di controllo disabilitate usando lo stato di selezione corretto. Anche se gli utenti non possono modificarli, le caselle di controllo disabilitate forniscono informazioni in modo che siano coerenti con i risultati.
risposta errata:
In questo esempio, l'opzione "Leggi sempre questa sezione ad alta voce" deve essere cancellata perché la sezione non viene letta quando l'opzione è disabilitata.
Non usare la selezione di una casella di controllo 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).
Non visualizzare di nuovo questo <elemento>
- Prendere in considerazione l'uso di un elemento Non visualizzare questo <elemento> di nuovo per consentire agli utenti di eliminare una finestra di dialogo ricorrente solo se non esiste un'alternativa migliore. Provare a determinare in anticipo se gli utenti hanno davvero bisogno del dialogo; se lo fanno, mostra sempre il dialogo e, in caso contrario, elimina il dialogo.
Per altre linee guida ed esempi, vedere finestre di dialogo.
Controlli subordinati
Posizionare i controlli subordinati a destra di o sotto (rientrati, scaricati con l'etichetta della casella di controllo) la casella di controllo e la relativa etichetta. Terminare l'etichetta della casella di controllo con due punti.
In questo esempio, la casella di controllo e il relativo controllo subordinato condividono l'etichetta della casella di controllo e la relativa chiave di accesso.
Lasciare le caselle di testo modificabili dipendenti e gli elenchi a discesa abilitati se condividono l'etichetta della casella di controllo. Quando gli utenti digitano o incollano qualsiasi elemento nella casella, selezionare automaticamente l'opzione corrispondente. In questo modo si semplifica l'interazione.
In questo esempio, l'immissione di un'intestazione o di un piè di pagina seleziona automaticamente l'opzione .
Se si annidano caselle di controllo con pulsanti di opzione o altre caselle di controllo, disabilitare questi controlli subordinati fino a quando non viene selezionata l'opzione di alto livello. In questo modo si evita confusione sul significato dei controlli subordinati.
Impostare controlli subordinati su una casella di controllo contigua con la casella di controllo nell'ordine di tabulazioni.
Se si seleziona un'opzione implica la selezione di caselle di controllo subordinate, selezionare in modo esplicito tali caselle di controllo per cancellare la relazione.
risposta errata:
In questo esempio le caselle di controllo subordinate non sono selezionate.
risposta esatta:
In questo esempio vengono selezionate le caselle di controllo subordinate, rendendo deselezionata la relazione con l'opzione selezionata.
Usare le caselle di controllo dipendenti se le alternative aggiungono complessità non necessaria. Anche se le caselle di controllo devono essere opzioni indipendenti, talvolta alternative come i pulsanti di opzione aggiungono complessità non necessarie.
risposta esatta:
In questo esempio l'uso dei pulsanti di opzione è accurato, ma crea una complessità non necessaria.
migliore:
In questo esempio, l'uso delle caselle di controllo è più semplice e consente agli utenti di concentrarsi sulla selezione delle opzioni desiderate anziché sulla relazione complessa.
Importante: applicare questa linea guida solo in circostanze estremamente rare, quando le dipendenze aggiungono complessità significative senza aggiungere chiarezza. Nell'esempio precedente, è improbabile che gli utenti tentino di scegliere sia apice che pedice e, in caso affermativo, sarebbe facile capire che erano opzioni esclusive.
Valori predefiniti
- Se una casella di controllo è relativa a un'opzione utente, impostare la più sicura (per evitare la perdita di dati o l'accesso al sistema), per impostazione predefinita lo stato più sicuro e privato. Se la sicurezza e la sicurezza non sono fattori, selezionare il valore più probabile o conveniente.
Dimensioni e spaziatura consigliate
Dimensioni consigliate e spaziatura per le caselle di controllo.
Etichette
etichette casella di controllo
Etichettare ogni casella di controllo.
Assegnare una chiave di accesso univoca a ogni etichetta. Per linee guida, vedere tastiera.
Usare maiuscole e minuscole.
Scrivere l'etichetta come frase o una frase imperativa e non usare punteggiatura finale.
- Eccezione: Se un'etichetta di casella di controllo etichetta anche un controllo subordinato che lo segue, terminare l'etichetta con due punti.
Scrivere l'etichetta in modo che descriva lo stato selezionato della casella di controllo.
Per un gruppo di caselle di controllo, usare la formulazione parallela e provare a mantenere la lunghezza circa la stessa per tutte le etichette.
Per un gruppo di caselle di controllo, concentrarsi sul testo dell'etichetta sulle differenze tra le opzioni. Se tutte le opzioni hanno lo stesso testo introduttivo, spostare il testo nell'etichetta di gruppo.
Usare formulazioni positive. Non frasere un'etichetta in modo che la selezione di una casella di controllo non implica l'esecuzione di un'azione.
- eccezione: non visualizzare di nuovo questa <elemento> caselle di controllo.
risposta errata:
In questo esempio l'opzione non usa formulazioni positive.
Descrivere solo l'opzione con l'etichetta. Mantenere brevi le etichette in modo che sia facile farvi riferimento nei messaggi e nella documentazione. Se l'opzione richiede ulteriore spiegazione, fornire la spiegazione in un testo statico controllo usando frasi complete e punteggiatura finale.
Nota
L'aggiunta di una spiegazione a una casella di controllo in un gruppo non significa che è necessario fornire spiegazioni per tutte le caselle di controllo nel gruppo. Specificare le informazioni pertinenti nell'etichetta, se possibile, e usare le spiegazioni solo quando necessario. Non riformulare semplicemente l'etichetta per coerenza.
In questo esempio, un'etichetta di casella di controllo contiene testo esplicativo aggiuntivo sotto di esso.
Se un'opzione è fortemente consigliata, prendere in considerazione l'aggiunta di "(scelta consigliata)" all'etichetta. Assicurarsi di aggiungere all'etichetta del controllo, non alle note supplementari.
Se è necessario usare etichette a più righe, allineare la parte superiore dell'etichetta con la casella di controllo.
Non usare un controllo subordinato, i valori contenuti o l'etichetta delle unità per creare una frase o una frase. Tale progettazione non è localizzabile perché la struttura delle frasi varia in base alla lingua.
risposta errata:
In questo esempio la casella di testo viene inserita erroneamente all'interno dell'etichetta della casella di controllo.
casella di controllo etichette di gruppo
Usare l'etichetta di gruppo per spiegare lo scopo del gruppo, non come effettuare la selezione. Si supponga che gli utenti sappiano usare le caselle di controllo. Ad esempio, non pronunciare "Selezionare una delle opzioni seguenti".
Terminare ogni etichetta con due punti.
Non assegnare una chiave di accesso all'etichetta. In questo modo non è necessario e rende più difficile l'assegnazione delle altre chiavi di accesso.
Per una selezione di una o più scelte dipendenti, spiegare il requisito dell'etichetta.
risposta esatta:
In questo esempio, gli utenti potrebbero pensare che possano effettuare una sola selezione.
migliore:
In questo esempio è chiaro che gli utenti possono effettuare più selezioni.
Documentazione
Quando si fa riferimento alle caselle di controllo:
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 la casella di controllo parola.
Fare riferimento a una casella di controllo come casella di controllo, non opzione, casella di controllo o semplicemente casella, perché la casella da sola è ambigua per i localizzatori.
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 Sottolineato.