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 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 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 giratória refere-se à combinação de uma caixa de texto e seu controle de rotação associado.

Uma típica caixa giratória.

Os usuários geralmente preferem controles de rotação porque eles 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 hífenes) e modificadores de unidade.

Observação

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

 

Será este o controlo correto?

Para decidir, considere estas questões:

• O controle é usado para entrada numérica? Caso contrário, use outro controle, como uma lista suspensa ou controle deslizante, para selecionar a partir 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? Em caso afirmativo, use um controle deslizante. Use caixas giratórias apenas para valores numéricos exatos e conhecidos. Por exemplo, os usuários pensam em definir o volume de áudio como baixo ou médio, não em definir o valor como 2 ou 5.

• O controlo está emparelhado com uma caixa de texto? Se não, não use. Os 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 escolha melhor.

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

  • Introduzir um número pequeno, normalmente inferior a 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 outras situações além destas.

• 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 giratória pode ser usada, mas uma lista suspensa é usada para consistência.

• Os utilizadores de toque ou caneta são um alvo principal? Em caso afirmativo, considere usar uma lista suspensa. Os botões de seta num controlo de rotação são demasiado pequenos para serem utilizados de forma eficiente com o toque ou uma caneta.

Se um controle deslizante ou uma caixa giratória for possível, use uma caixa giratória se:

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

Use um controle deslizante se:

• Os usuários se beneficiarão do feedback instantâneo.

Orientações

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 (UI), 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, mesmo que nem sempre seja prático.

  Incorreto:

  

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

• Sempre faça um controle de giro no "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.

• Desative um controle de rotação quando sua caixa de texto associada estiver desativada. O controle de rotação é um método de entrada suplementar — 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 cobrir todos os valores válidos, e deve ser mais conveniente do que digitar o 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. Usar 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 semelhante a uma roda.

  • 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 está certamente incorreto.

• Use texto em vez de valores numéricos especiais. Permita que os usuários girem para esses valores especiais em vez de ter que 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 o rótulo da caixa de texto diretrizes para rotular a caixa de texto associada. Os controles de rotação nunca são rotulados diretamente.

Documentação

Quando se refere a controles de rotação:

• Não consulte os 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 giratórias somente em programação e outra documentação técnica.

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

Tópicos relacionados

Glossário