Controles deslizantes (Noções básicas de design)

Com um controle deslizante, os usuários podem escolher entre um intervalo contínuo de valores. Um controle deslizante tem uma barra que mostra o intervalo e um indicador que mostra o valor atual. As marcas de escala opcionais mostram valores.

Um controle deslizante típico.

Será este o controlo correto?

Use um controle deslizante quando quiser que os usuários possam definir valores contíguos definidos (como volume ou brilho) ou um intervalo de valores discretos (como configurações de resolução de tela).

Um controle deslizante é uma boa opção quando você sabe que os usuários pensam no valor como uma quantidade relativa, não como um valor numérico. 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.

Para decidir, considere estas questões:

• O cenário parece uma quantidade relativa? Caso contrário, use botões de opção, ou uma suspensa ou lista de seleção única.
• A configuração é um valor numérico exato e conhecido? Em caso afirmativo, use um caixas de texto numéricas.
• Um usuário se beneficiaria de feedback instantâneo sobre o efeito das alterações de configuração? Em caso afirmativo, use um controle deslizante. Por exemplo, os usuários podem escolher uma cor mais facilmente, vendo imediatamente o efeito das alterações nos valores de matiz, saturação ou luminosidade.
• A configuração tem um intervalo de quatro ou mais valores? Caso contrário, use botões de opção.
• O usuário pode alterar o valor? Os controles deslizantes são para interação do usuário. Se um usuário não puder alterar o valor, use uma caixa de texto somente leitura em vez disso.

Se um controle deslizante ou uma caixa de texto numérica for possível, use uma caixa de texto numérica 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

• Use uma orientação natural. Por exemplo, se o controle deslizante representar um valor real que normalmente é mostrado verticalmente (como temperatura), use uma orientação vertical.

• Oriente o controle deslizante para refletir a cultura de seus usuários. Por exemplo, as culturas ocidentais leem da esquerda para a direita, portanto, para controles deslizantes horizontais, coloque a extremidade inferior da faixa à esquerda e a extremidade alta à direita. Para culturas que leem da direita para a esquerda, faça o contrário.

• Dimensione o controle para que um usuário possa facilmente definir o valor desejado. Para configurações com valores discretos, certifique-se de que o usuário possa selecionar facilmente qualquer valor usando o mouse.

• Considere o uso de uma escala não linear se o intervalo de valores for grande e os usuários provavelmente selecionarão valores em uma extremidade do intervalo. Por exemplo, o valor de tempo pode ser 1 minuto, 1 hora, 1 dia ou 1 mês.

• Sempre que possível, dê feedback imediato enquanto ou depois de um usuário fazer uma seleção. Por exemplo, o controle de volume do Microsoft Windows emite bipes para indicar o volume de áudio resultante.

• Use rótulos para mostrar o intervalo de valores.

  Exceção: Se o controle deslizante estiver orientado verticalmente e o rótulo superior for Máximo, Alto, Mais ou equivalente, você poderá omitir os outros rótulos, pois o significado é claro.

  

  Neste exemplo, a orientação vertical do controle deslizante torna os rótulos de intervalo desnecessários.

• Use marcas de escala quando os usuários precisarem saber o valor aproximado da configuração.

• Use marcas de escala e um rótulo de valor quando os usuários precisarem saber o valor exato da configuração que escolherem. Sempre use um rótulo de valor se um usuário precisar conhecer as unidades para entender a configuração.

  

  Neste exemplo, um rótulo é usado para indicar claramente o valor selecionado.

• Para controles deslizantes orientados horizontalmente, coloque marcas de escala sob o controle deslizante. Para controles deslizantes orientados verticalmente, coloque marcas de escala à direita para culturas ocidentais; Para culturas que leem da direita para a esquerda, faça o contrário.

• Coloque o rótulo de valor completamente sob o controle deslizante para que a relação fique clara.

  Incorreto:

  

  Neste exemplo, o rótulo de valor não está alinhado sob o controle deslizante.

• Ao desativar um controle deslizante, desative também todos os rótulos associados.

• Não use um controle deslizante e uma caixa de texto numérica para a mesma configuração. Utilize apenas o controlo mais adequado.

  Exceção: Use ambos os controles quando o usuário precisar de feedback imediato e da capacidade de definir um valor numérico exato.

• Não use um controle deslizante como indicador de progresso.

• Não altere o tamanho do indicador deslizante do tamanho padrão.

  Incorreto:

  

  Neste exemplo, um tamanho menor do que o padrão é usado.

  Correto:

  

  Neste exemplo, o tamanho padrão é usado.

• Não rotule todas as marcas de verificação.

Dimensionamento e espaçamento recomendados

Dimensionamento e espaçamento recomendados para controles deslizantes.

Rótulos

Etiquetas deslizantes

• Use um rótulo de texto estático que termine com dois pontos ou um rótulo de caixa de grupo sem pontuação final.
• Atribua uma chave de acesso exclusiva a cada etiqueta. Para obter diretrizes de atribuição, consulte Teclado.
• Use maiúsculas no estilo de frase.
• Posicione o rótulo do controle deslizante à esquerda do controle deslizante ou acima e alinhado com a borda esquerda do controle deslizante (ou seu identificador de intervalo esquerdo, se presente).

Rótulos de gama

• Rotule as duas extremidades do intervalo deslizante, a menos que uma orientação vertical torne isso desnecessário.
• Use apenas palavras, se possível, para cada rótulo.
• Não use pontuação final.
• Certifique-se de que estes rótulos são descritivos e paralelos. Exemplos: Máximo/Mínimo, Mais/Menos, Baixo/Alto, Suave/Alto.
• Use maiúsculas no estilo de frase.
• Não atribua chaves de acesso.

Rótulos de valor

• Se você precisar de um rótulo de valor, exiba-o abaixo do controle deslizante.

• Centralizar o texto relativo ao controle e incluir as unidades (como pixels).

  

  Neste exemplo, o rótulo de valor é centralizado sob o controle deslizante e inclui as unidades.

Documentação

Quando se refere a controles deslizantes:

• Use o texto exato do rótulo, incluindo sua maiúscula, e inclua a palavra deslizante. Não inclua o sublinhado da chave de acesso nem dois pontos.
• Para descrever a interação do usuário, use mover.
• 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: para aumentar a resolução do ecrã, mova o Controlo de deslize Resolução do ecrã para a direita.

Tópicos relacionados

Glossário