Botões de opção

Com um botão de opção, os usuários fazem uma escolha entre um conjunto de opções mutuamente exclusivas e relacionadas. Os usuários podem escolher uma e apenas uma opção. Os botões de rádio são assim chamados porque funcionam como as predefinições de canal em rádios.

Um grupo típico de botões de opção.

Um grupo de botões de opção se comporta como um único controle. Somente a opção selecionada é acessível usando a tecla Tab, mas os usuários podem percorrer o grupo usando as teclas de seta.

Será este o controlo correto?

Para decidir, considere estas questões:

• O controle é usado para escolher uma opção de um conjunto de escolhas mutuamente exclusivas? Se não, use outro controle. Para escolher várias opções, use caixas de seleção, uma lista de seleção múltipla ou uma lista de caixas de seleção.

• O número de opções situa-se entre duas e sete? Como o espaço na tela usado é proporcional ao número de opções, mantenha o número de opções em um grupo entre dois e sete. Para oito ou mais opções, use uma lista suspensa ou lista de seleção única.

• Uma caixa de seleção seria uma escolha melhor? Se houver apenas duas opções, você pode usar uma única caixa de seleção em vez disso. No entanto, as caixas de seleção são adequadas apenas para ativar ou desativar uma única opção, enquanto os botões de opção podem ser usados para alternativas 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:

    

    Correto:

    

    No exemplo correto, as escolhas não são opostas, então 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 página.

• Uma lista suspensa seria uma escolha melhor? Se a opção padrão for recomendada para a maioria dos usuários na maioria das situações, os botões de opção podem chamar mais atenção para as opções do que o necessário.

  • Considere usar uma lista suspensa se não quiser chamar a atenção para as opções ou não quiser incentivar os usuários a fazer alterações. Uma lista suspensa se concentra na seleção atual, enquanto os botões de opção enfatizam todas as opções igualmente.

    

    Neste exemplo, uma lista suspensa se concentra na seleção atual e desencoraja os usuários de fazer alterações.

  • Considere uma lista suspensa se houver outras listas suspensas na página.

• Um conjunto de botões de comando, links de comando ou um botão de divisão seria uma escolha melhor? Se os botões de opção forem usados apenas para afetar como um comando é executado, geralmente é melhor apresentar as variações de comando. Isso permite que os usuários escolham o comando certo com uma única interação.

• As opções apresentam opções de programa, em vez de dados? Os valores das opções não devem ser baseados no contexto ou em outros dados. Para dados, use uma lista suspensa ou uma lista de seleção única.

• Se o controle for usado em uma página do assistente ou painel de controle, o controle é uma resposta à instrução principal e os usuários podem alterar a escolha posteriormente? Em caso afirmativo, considere usar links de comando em vez de botões de opção para tornar a interação mais eficiente.

• Os valores não são numéricos? Para dados numéricos, use caixas de texto, listas suspensasou controles deslizantes.

Orientações

Geral

• Liste as opções em uma ordem lógica, como a mais provável de ser selecionada para o mínimo, a operação mais simples para a mais complexa ou o menor risco para a maioria. A ordem alfabética não é recomendada porque depende do idioma e, portanto, não pode ser localizável.

• Se nenhuma das opções for válida, adicione outra opção para refletir essa escolha, como Nenhuma ou Não se aplica.

• Prefira alinhar os botões de opção verticalmente em vez de horizontalmente. O alinhamento horizontal é mais difícil de ler e localizar.

  Correto:

  

  Neste exemplo, os botões de opção são alinhados verticalmente.

  Incorreto:

  

  Neste exemplo, o alinhamento horizontal é mais difícil de ler.

• Reconsidere o uso de caixas de grupo para organizar grupos de botões de opção—isso geralmente resulta em confusão de tela desnecessária.

• Não use rótulos de botão de opção como rótulos de caixa de grupo.

• Não use a seleção de um botão de opção para:

  • Execute comandos.
  • Exiba outras janelas, como uma caixa de diálogo para coletar mais entradas.
  • Mostrar ou ocultar dinamicamente outros controles relacionados ao controle selecionado (os leitores de tela não podem detetar tais eventos). No entanto, você pode alterar o texto dinamicamente com base na seleção.

Controlos subordinados

• Coloque os controles subordinados à direita ou abaixo (recuado, nivelado com o rótulo do botão de opção) do botão de opção e seu rótulo. Termine o rótulo do botão de opção com dois pontos.

  

  Neste exemplo, o botão de opção e seu controle subordinado compartilham o rótulo do botão de opção e sua chave de acesso. Nesse caso, as teclas de seta movem o foco do botão de opção para sua caixa de texto subordinada.

• Deixe as caixas de texto editáveis dependentes e as listas suspensas ativadas se elas compartilharem o rótulo do botão de opçã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 número de página seleciona automaticamente Páginas.

• Evite aninhar botões de opção com outros botões de opção ou caixas de seleção. Se possível, mantenha todas as opções no mesmo nível.

  Correto:

  

  Neste exemplo, as opções estão no mesmo nível.

  Incorreto:

  

  Neste exemplo, o uso de opções aninhadas adiciona complexidade desnecessária.

• Se você aninhar botões de opção com outros botões de opção ou caixas de seleção, desabilite esses controles subordinados até que a opção de alto nível seja selecionada. Isso evita confusões sobre o significado dos controles subordinados.

Valores padrão

• Como um grupo de botões de opção representa um conjunto de opções mutuamente exclusivas, sempre têm um botão de opção selecionado por padrão. Selecione a opção mais segura (para evitar a perda de dados ou acesso ao sistema) e mais segura e privada. Se a segurança não for um fator, selecione a opção mais provável ou conveniente.

• Exceções: Não tem uma seleção padrão se:

  • Não há nenhuma opção padrão aceitável por razões de segurança ou legais e, portanto, o usuário deve fazer uma escolha explícita. Se o usuário não fizer uma seleção, exiba uma mensagem de erro para forçar uma.
  • A interface do usuário (UI) deve refletir o estado atual e a opção ainda não foi definida. Um valor padrão implicaria incorretamente que o usuário não precisa fazer uma seleção.
  • O objetivo é coletar dados imparciais. Os valores padrão enviesariam a coleta de dados.
  • O grupo de botões de opção representa uma propriedade em um estado misto, que acontece ao exibir uma propriedade para vários objetos que não têm a mesma configuração. Não exiba uma mensagem de erro nesse caso, pois cada objeto tem um estado válido.

• Torne a primeira opção a opção padrão, já que os usuários geralmente esperam isso, a menos que essa ordem não seja lógica. Para fazer isso, talvez seja necessário alterar os rótulos de opção.

  Incorreto:

  

  Neste exemplo, a opção padrão não é a primeira opção.

  Correto:

  

  Neste exemplo, os rótulos de opção são reformulados para tornar a primeira opção a opção padrão.

Dimensionamento e espaçamento recomendados

de dimensionamento e espaçamento do botão de opção

Dimensionamento e espaçamento recomendados para botões de opção.

Rótulos

Etiquetas dos botões de opção

• Rotule todos os botões de opção.

• Atribua uma chave de acesso exclusiva a cada rótulo. Para obter diretrizes, consulte Keyboard.

• Use de maiúsculas no estilo de frase.

• Escreva o rótulo como uma frase, não como uma frase, e não use pontuação final.

  • Exceção: Se um rótulo de botão de opção também rotular um controle subordinado que o segue, termine o rótulo com dois pontos.

• Use frases paralelas e tente manter o comprimento aproximadamente o mesmo para todos os rótulos.

• 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. Por exemplo, use fazer em vez de não fazer e imprimir em vez de não imprimir.

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

  

  Neste exemplo, as opções são explicadas usando controles de texto estáticos separados.

  Observação

  Adicionar uma explicação a um botão de opção não significa que você tenha que fornecer explicações para todos os botões de opção. 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.

   

• Se uma opção for altamente recomendada, adicione "(recomendado)" ao rótulo. Certifique-se de adicionar ao rótulo de controle, não as notas suplementares.

• Se uma opção se destinar apenas a utilizadores avançados, adicione "(avançado)" à etiqueta. Certifique-se de adicionar ao rótulo de controle, não as notas suplementares.

• Se tiver de utilizar etiquetas com várias linhas, alinhe a parte superior da etiqueta com o botão de opçã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.

Rótulos de grupo de botões de opção

• 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 botões de opção. Por exemplo, não diga "Selecione uma das seguintes opções".

• Todos os grupos de botões de opção precisam de etiquetas. Escreva o rótulo como uma palavra ou frase, não como uma frase, terminando com dois pontos usando texto estático ou uma caixa de grupo.

  Exceção: Omita o rótulo se ele for apenas uma reafirmação da instrução principal de uma caixa de diálogo . Neste caso, a instrução principal leva os dois pontos (a menos que seja uma pergunta) e a chave de acesso (se houver).

  Aceitável:

  

  Neste exemplo, o rótulo do grupo de botões de opção é apenas uma reafirmação da instrução principal.

  Melhor:

  

  Neste exemplo, o rótulo redundante é removido, portanto, a instrução principal usa os 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.

  • Exceção: Se nem todos os controles podem ter chaves de acesso exclusivas, você pode atribuir uma chave de acesso ao rótulo em vez dos controles individuais. Para obter mais informações, consulte Keyboard.

Documentação

Ao referir-se a botões de opçã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.
• Em programação e outra documentação técnica, consulte os botões de opção como botões de opção. Em todos os outros lugares use botões de opção, especialmente na documentação do usuário.
• Para descrever a interação do usuário, use click.
• 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: Clique em página atuale, em seguida, clique em OK.