Caixas de seleção
Observação
Este guia de design foi criado para o Windows 7 e não foi atualizado para versões mais recentes do Windows. Grande parte das orientações ainda se aplica em princípio, mas a apresentação e os exemplos não refletem as nossas orientações de conceção atuais .
Com uma caixa de seleção, os usuários tomam uma decisão entre duas escolhas claramente opostas. O rótulo da caixa de seleção indica o estado selecionado, enquanto o significado do estado desmarcado deve ser o oposto inequívoco do estado selecionado. Consequentemente, caixas de seleção devem ser usadas apenas para ativar ou desativar uma opção ou para selecionar ou desmarcar um item.
Um grupo típico de caixas de seleção.
Será este o controlo correto?
Para decidir, considere estas questões:
A caixa de seleção é usada para ativar ou desativar uma opção ou para selecionar ou desmarcar um item? Se não, use outro controle.
Os estados selecionados e apurados são opostos claros e inequívocos? Caso contrário, use botões de opção ou uma lista suspensa para que você possa rotular os estados de forma independente.
Quando usado em um grupo, o grupo compreende escolhas independentes, das quais os usuários podem escolher zero ou mais? Caso contrário, considere controles para opções dependentes, como botões de opção e exibições de árvore de caixa de seleção.
Quando usado em um grupo, o grupo compreende escolhas dependentes, das quais os usuários devem escolher uma ou mais? Em caso afirmativo, use um grupo de caixas de seleção e manipule o erro quando nenhuma das opções estiver selecionada.
O número de opções num grupo é igual ou inferior a 10? Como o espaço na tela usado é proporcional ao número de opções, mantenha o número de caixas de seleção para 10 ou menos. Para mais de 10 opções, use uma lista de caixas de seleção .
Um botão de opção seria uma escolha melhor? Quando as caixas de seleção são adequadas apenas para ativar ou desativar uma opção, os botões de opção podem ser usados para opções completamente diferentes. Se ambas as soluções forem possíveis:
Use botões de opção se o significado da caixa de seleção desmarcada não for completamente óbvio.
Incorreto:
Neste exemplo, a escolha oposta de Paisagem não está clara, portanto, a caixa de seleção não é uma boa escolha.
Correto:
Neste exemplo, as escolhas não são opostas, portanto, os botões de opção são a melhor escolha.
Use botões de opção nas páginas do assistente para deixar as alternativas claras, mesmo que uma caixa de seleção seja aceitável.
Use botões de opção se você tiver espaço suficiente na tela e as opções forem importantes o suficiente para ser um bom uso desse espaço na tela. Caso contrário, use uma caixa de seleção ou uma lista suspensa.
Incorreto:
Neste exemplo, as opções não são importantes o suficiente para usar botões de opção.
Correto:
Neste exemplo, uma caixa de seleção é um uso eficiente do espaço na tela para essa opção periférica.
Use uma caixa de seleção se houver outras caixas de seleção na janela.
A opção apresenta uma opção de programa, em vez de dados? Os valores da opção não devem ser baseados no contexto ou em outros dados. Para dados, use uma lista de caixas de seleção ou lista de seleção múltipla.
Padrões de utilização
As caixas de seleção têm vários padrões de uso:
| Utilização | Exemplo |
|---|---|
|
Uma escolha individual Uma única caixa de seleção é usada para selecionar uma escolha individual. |
Uma única caixa de seleção é usada para uma escolha individual. |
|
Opções independentes (zero ou mais) Um grupo de caixas de seleção é usado para selecionar a partir de um conjunto de zero ou mais opções. |
Ao contrário dos controles de seleção única, como botões de opção, os usuários podem selecionar qualquer combinação de opções em um grupo de caixas de seleção.
Um grupo de caixas de seleção é usado para opções independentes. |
|
Opções dependentes (uma ou mais) Um grupo de caixas de seleção também pode ser usado para selecionar a partir de um conjunto de uma ou mais opções. |
você pode precisar representar uma seleção de uma ou mais opções dependentes. Como o Microsoft?Windows não tem um controle que ofereça suporte direto a esse tipo de entrada, a melhor solução é usar um grupo de caixas de seleção e manipular o erro quando nenhuma das opções estiver selecionada.
Um grupo de caixas de seleção é usado onde pelo menos um protocolo deve ser selecionado. |
|
Escolha mista Além de seus estados selecionados e desmarcados, as caixas de seleção também têm um estado misto para seleção múltipla para indicar que a opção está definida para alguns, mas não todos, objetos. |
Uma caixa de seleção de estado misto. |
Orientações
Geral
Caixas de seleção relacionadas ao grupo. Combine opções relacionadas e separe opções não relacionadas em grupos de 10 ou menos, usando vários grupos, se necessário.
Um exemplo de grupos de opções relacionadas e independentes.
Reconsidere o uso de caixas de grupo para organizar grupos de caixas de seleção isso geralmente resulta em desorganização de tela desnecessária.
caixas de seleção Listar em uma ordem lógica, como agrupar opções altamente relacionadas ou colocar as opções mais comuns em primeiro lugar, ou seguir alguma outra progressão natural. A ordem alfabética não é recomendada porque depende do idioma e, portanto, não é localizável.
Alinhar caixas de seleção verticalmente, não horizontalmente. O alinhamento horizontal é mais difícil de ler.
Correto:
Neste exemplo, as caixas de seleção estão alinhadas corretamente.
Incorreto:
Neste exemplo, o alinhamento horizontal é mais difícil de ler.
Não use o estado misto para representar um terceiro estado. O estado misto é usado para indicar que uma opção está definida para alguns, mas não todos, objetos filho. Os usuários não devem ser capazes de definir um estado misto diretamente, em vez disso, o estado misto é um reflexo dos objetos filho. O estado misto não é usado como um terceiro estado para um item individual. Para representar um terceiro estado, use botões de opção ou uma lista suspensa.
Incorreto:
Neste exemplo, o estado misto deve indicar que o serviço Tema não está instalado.
Correto:
Neste exemplo, os usuários podem escolher a partir de uma lista de três opções claras.
Clicar em uma caixa de seleção de estado misto deve percorrer todos os estados selecionados, todos desmarcados e os estados mistos originais. Para obter perdão, é importante poder restaurar o estado misto original, pois as configurações podem ser complexas ou desconhecidas para o usuário. Caso contrário, a única maneira de restaurar o estado misto com confiança seria cancelar a tarefa e começar de novo.
Não use caixas de seleção como um indicador de progresso. Em vez disso, use um indicador de progresso controle.
Incorreto:
Neste exemplo, as caixas de seleção são usadas incorretamente como um indicador de progresso.
Correto:
Exemplo de uma barra de progresso típica.
Mostrar caixas de seleção desabilitadas usando o estado de seleção correto. Embora os usuários não possam alterá-los, as caixas de seleção desativadas transmitem informações para que sejam consistentes com os resultados.
Incorreto:
Neste exemplo, a opção "Sempre ler esta seção em voz alta" deve ser desmarcada porque a seção não é lida quando a opção está desativada.
Não use a seleção de uma caixa de seleção para:
- Execute comandos.
- Exiba outras janelas, como uma caixa de diálogo para coletar mais entradas.
- Exiba dinamicamente outros controles relacionados ao controle selecionado (os leitores de tela não podem detetar tais eventos).
Não mostrar este item <> novamente
- Considere usar a opção Não mostrar este item <> novamente para permitir que os usuários suprimam uma caixa de diálogo recorrente somente se não houver uma alternativa melhor. Tente determinar de antemão se os usuários realmente precisam da caixa de diálogo; Se o fizerem, mostre sempre a caixa de diálogo e, se não o fizerem, elimine a caixa de diálogo.
Para obter mais diretrizes e exemplos, consulte caixas de diálogo.
Controlos subordinados
Coloque os controles subordinados à direita ou abaixo (recuado, nivelado com o rótulo da caixa de seleção) a caixa de seleção e seu rótulo. Termine o rótulo da caixa de seleção com dois pontos.
Neste exemplo, a caixa de seleção e seu controle subordinado compartilham o rótulo da caixa de seleção e sua chave de acesso.
Deixe as caixas de texto editáveis dependentes e as listas suspensas habilitadas se elas compartilharem o rótulo da caixa de seleção. Quando os usuários digitarem ou colarem qualquer coisa na caixa, selecione a opção correspondente automaticamente. Isso simplifica a interação.
Neste exemplo, inserir um cabeçalho ou rodapé seleciona automaticamente a opção.
Se você aninhar caixas de seleção com botões de opção ou outras caixas de seleção, desabilite esses controles subordinados até que a opção de alto nível seja selecionada. Isso evita confusão sobre o significado dos controles subordinados.
Torne os controles subordinados a uma caixa de seleção contígua à caixa de seleção na ordem de tabulação.
Se a seleção de uma opção implicar a seleção de caixas de seleção subordinadas, marque explicitamente essas caixas de seleção para deixar a relação clara.
Incorreto:
Neste exemplo, as caixas de seleção subordinadas não estão marcadas.
Correto:
Neste exemplo, as caixas de seleção subordinadas são marcadas, deixando clara sua relação com a opção selecionada.
Use caixas de seleção dependentes se as alternativas adicionarem complexidade desnecessária. Embora as caixas de seleção devam ser opções independentes, às vezes alternativas como botões de opção adicionam complexidade desnecessária.
Correto:
Neste exemplo, o uso de botões de opção é preciso, mas cria complexidade desnecessária.
Melhor:
Neste exemplo, o uso de caixas de seleção é mais simples e permite que os usuários se concentrem na seleção das opções desejadas em vez de em seu relacionamento complexo.
Importante: Aplique esta diretriz apenas em circunstâncias extremamente raras, quando mostrar as dependências adiciona complexidade significativa sem adicionar clareza. No exemplo anterior, é improvável que os usuários tentem escolher sobrescrito e subscrito e, se o fizessem, seria fácil entender que eram opções exclusivas.
Valores padrão
- Se uma caixa de seleção for para uma opção de usuário, definir o estado mais seguro (para evitar a perda de dados ou acesso ao sistema), mais seguro e privado por padrão. Se a segurança não for um fator, selecione o valor mais provável ou conveniente.
Dimensionamento e espaçamento recomendados
Dimensionamento e espaçamento recomendados para caixas de seleção.
Rótulos
Etiquetas de caixa de verificação
Rotule todas as caixas de seleção.
Atribua uma chave de acesso exclusiva a cada rótulo. Para obter diretrizes, consulte Keyboard.
Escreva o rótulo como uma frase ou uma frase imperativa e não use pontuação final.
- Exceção: Se um rótulo de caixa de seleção também rotular um controle subordinado que o segue, termine o rótulo com dois pontos.
Escreva o rótulo para que ele descreva o estado selecionado da caixa de seleção.
Para um grupo de caixas de seleção, use frases paralelas e tente manter o comprimento aproximadamente o mesmo para todos os rótulos.
Para um grupo de caixas de seleção, concentre o texto do rótulo nas diferenças entre as opções. Se todas as opções tiverem o mesmo texto introdutório, mova esse texto para o rótulo do grupo.
Use frases positivas. Não coloque um rótulo na frase para que marcar uma caixa de seleção signifique não executar uma ação.
- Exceção:Não mostrar este item <> novamente caixas de seleção.
Incorreto:
Neste exemplo, a opção não usa fraseado positivo.
Descreva apenas a opção com o rótulo. Mantenha as etiquetas breves para que seja fácil consultá-las em mensagens e documentação. Se a opção exigir mais explicações, forneça a explicação em um texto estático controle usando frases completas e pontuação final.
Observação
Adicionar uma explicação a uma caixa de seleção em um grupo não significa que você tenha que fornecer explicações para todas as caixas de seleção no grupo. Se possível, forneça as informações relevantes no rótulo e utilize explicações apenas quando necessário. Não se limite a reafirmar o rótulo para obter consistência.
Neste exemplo, um rótulo de caixa de seleção tem texto explicativo adicional abaixo dele.
Se uma opção for altamente recomendada, considere adicionar "(recomendado)" ao rótulo. Certifique-se de adicionar ao rótulo de controle, não as notas suplementares.
Se você precisar usar rótulos de várias linhas, alinhe a parte superior do rótulo com a caixa de seleção.
Não use um controle subordinado, os valores que ele contém ou seu rótulo de unidades para criar uma frase ou frase. Tal design não é localizável porque a estrutura da frase varia com a linguagem.
Incorreto:
Neste exemplo, a caixa de texto é colocada incorretamente dentro do rótulo da caixa de seleção.
Caixa de seleção agrupar rótulos
Use o rótulo do grupo para explicar o objetivo do grupo, não como fazer a seleção. Suponha que os usuários saibam como usar caixas de seleção. Por exemplo, não diga "Selecione qualquer uma das seguintes opções".
Termine cada rótulo com dois pontos.
Não atribua uma chave de acesso ao rótulo. Fazer isso não é necessário e torna as outras chaves de acesso mais difíceis de atribuir.
Para uma seleção de uma ou mais opções dependentes, explique o requisito no rótulo.
Correto:
Neste exemplo, os usuários podem pensar que só podem fazer uma seleção.
Melhor:
Neste exemplo, fica claro que os usuários podem fazer mais de uma seleção.
Documentação
Ao se referir a caixas de seleção:
Use o texto exato do rótulo, incluindo sua maiúscula, mas não inclua o sublinhado da chave de acesso ou dois pontos. Inclua a caixa de seleção da palavra.
Consulte uma caixa de seleção como uma caixa de seleção, não opção, caixa de seleção ou apenas caixa, porque a caixa sozinha é ambígua para localizadores.
Para descrever a interação do usuário, use selecionar e limpar.
Sempre que possível, formate o rótulo usando texto em negrito. Caso contrário, coloque o rótulo entre aspas apenas se necessário para evitar confusão.
Exemplo: Marque a caixa de seleção Sublinhado.