Controles de rotaçã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 diretrizes ainda se aplica em princípio, mas a apresentação e os exemplos não refletem nossas diretrizes de design atuais.

Com um controle de rotação, os usuários podem clicar em botões de seta para alterar incrementalmente o valor dentro de sua caixa de texto numérica associada. O termo caixa de rotação refere-se à combinação de uma caixa de texto e seu controle de rotação associado.

Uma caixa de rotação típica.

Os usuários geralmente preferem controles de rotação porque podem fazer alterações sem mover as mãos do mouse. Quando o controle de rotação é emparelhado com uma caixa de texto, os usuários podem digitar ou colar a entrada diretamente na caixa de texto, portanto, o uso do controle de rotação é opcional.

Embora os controles de rotação sejam usados para entrada numérica, a entrada não precisa ser um número inteiro puro. A entrada pode ser números decimais e pode ter sinais negativos, delimitadores (como dois-pontos ou hifens) e modificadores de unidade.

Observação

As diretrizes relacionadas a caixas de texto e layout são apresentadas em artigos separados.

 

Esse é o controle correto?

Para decidir, considere estas perguntas:

• O controle é usado para entrada numérica? Caso contrário, use outro controle, como uma lista suspensa ou controle deslizante, para selecionar de um conjunto fixo de valores. Use barras de rolagem para rolagem.

• Os usuários pensam no valor como uma quantidade relativa, não como um valor numérico? Nesse caso, use um controle deslizante. Use caixas de rotação somente para valores numéricos exatos e conhecidos. Por exemplo, os usuários pensam em definir o volume de áudio como baixo ou médio, e não em definir o valor como 2 ou 5.

• O controle está emparelhado com uma caixa de texto? Caso contrário, não use. Controles de rotação não devem ser usados sozinhos ou com outros tipos de controles além de uma caixa de texto.

  Incorreto:

  

  Neste exemplo, um controle de rotação é usado para controlar um gráfico dinâmico.

• Os intervalos de valores contíguos são válidos? Caso contrário, use uma lista suspensa de valores válidos.

  

  Neste exemplo, nem todos os números de unidade de disco são válidos, portanto, uma lista suspensa é uma opção melhor.

• Usar o controle de rotação é prático? Usar um controle de rotação é prático para:

  • Inserindo um número pequeno, normalmente abaixo de 100.
  • Fazer pequenas alterações em um valor existente ou padrão.

  Embora os controles de rotação possam ser usados para qualquer entrada numérica, eles são ineficientes em situações diferentes dessas.

• O controle de rotação é útil? O controle é usado em um contexto em que os usuários provavelmente usarão o mouse? Caso contrário, considere um controle de rotação opcional.

• Os controles irmãos são listas suspensas? Se houver outras listas suspensas, considere usar uma lista suspensa para consistência.

  

  Neste exemplo, uma caixa de rotação pode ser usada, mas uma lista suspensa é usada para consistência.

• Os usuários de toque ou caneta são um destino primário? Nesse caso, considere usar uma lista suspensa. Os botões de seta em um controle de rotação são muito pequenos para serem usados com eficiência com toque ou caneta.

Se um controle deslizante ou uma caixa de rotação for possível, use uma caixa de rotação se:

• O espaço na tela for restrito.
• É provável que um usuário prefira usar o teclado.

Use um controle deslizante se:

• Os usuários forem se beneficiar com um feedback instantâneo.

Diretrizes

Geral

• Use controles de rotação sempre que forem práticos e úteis. Veja Este é o controle certo?

  • Exceção: Para ser consistente com outras caixas de texto na mesma interface do usuário, use controles de rotação, mesmo que nem sempre sejam práticos.

  Correto:

  

  Neste exemplo, um controle de rotação é usado com o controle de ano para consistência, embora nem sempre seja prático.

  Incorreto:

  

  Neste exemplo, o controle de rotação é inutilizável.

• Sempre faça um controle de rotação o "amigo" da caixa de texto. Isso coloca o controle de rotação dentro da caixa de texto.

  Correto:

  

  Incorreto:

  

  No exemplo correto, o controle de rotação é colocado dentro de sua caixa de texto associada.

• Desabilite um controle de rotação quando sua caixa de texto associada estiver desabilitada. O controle de rotação é um método de entrada complementar, nunca o único método de entrada.

Valores

• Defina o botão superior para aumentar o valor em uma unidade e o botão inferior para diminuir em uma unidade. Normalmente, a unidade é uma, mas deve ser a menor alteração comum no valor. Idealmente, o controle de rotação deve abranger todos os valores válidos e deve ser mais conveniente do que digitar no texto.

  

  Neste exemplo, clicar em um controle de rotação altera os valores em .1, que é a menor alteração comum no valor. O uso de uma unidade menor cobriria o intervalo de valores válidos, mas tornaria os controles de rotação inutilizáveis.

• Use o controle de rotação para limitar a entrada a valores válidos. O uso de um controle de rotação nunca deve resultar em um valor incorreto.

• No final de um intervalo de valores válidos, reinicie o intervalo. A metáfora do controle de rotação é que o usuário está girando uma roda de valores, daí esse comportamento de rolagem.

  • Exceção: Não reinicie o intervalo se o valor resultante estiver incorreto.

    

    Neste exemplo, clicar no botão de seta para baixo não reinicia o intervalo (indo para o valor máximo) porque esse valor certamente está incorreto.

• Use texto em vez de valores numéricos especiais. Permitir que os usuários girem para esses valores especiais em vez de precisar conhecê-los e digitá-los.

  

  Neste exemplo, Nunca é um valor especial, mas os usuários podem girar para ele.

• Se o valor tiver delimitadores, a caixa de texto associada deverá ter vários pontos de foco de entrada. Isso permite que os segmentos numéricos sejam manipulados individualmente.

  

  Neste exemplo, o controle de rotação afeta os valores de horas, minutos, segundos e A.M./P.M., o que tiver o foco.

• Se o valor tiver unidades, use o controle de rotação para alterar essas unidades também.

  

  Neste exemplo, o controle de rotação pode ser usado para alterar unidades.

Rótulos

• Aplique as diretrizes de rotulagem da caixa de texto para rotular a caixa de texto associada. Os controles de rotação nunca são rotulados diretamente.

Documentação

Ao se referir a controles de rotação:

• Não faça referência a controles de rotação na documentação do usuário. Em vez disso, consulte o rótulo da caixa de texto associada.
• Consulte controles de rotação e caixas de rotação somente na programação e em outras documentações técnicas.

Exemplo: na caixa Data , digite ou selecione a parte da data que você deseja alterar.

Tópicos relacionados

Glossário