Diretrizes do controle de classificação

Uma amostra da aparência do controle de classificação padrão

Descrição

O controle de classificação permite que os usuários classifiquem algo clicando em um ícone que representa uma classificação. Ele pode exibir três tipos de classificações: uma classificação média, uma classificação provisória e a classificação do usuário.

Controles de classificação exibindo classificações médias, de tentativa e do usuário

Observação  O controle de classificação só está disponível em HTML. Não há controle de classificação em XAML.

Exemplo

Uma captura de tela ilustrando o controle de classificação padrão

Este é o controle correto?

Use o controle de classificação para mostrar até que ponto os usuários apreciam ou apenas estão satisfeitos com um item ou serviço. Por exemplo, use o controle de classificação para permitir que os usuários classifiquem um filme. Não o use para outros tipos de dados com um intervalo contínuo, como o brilho da tela. (Para isso use um controle deslizante).

Não use o controle de classificação como um controle de filtro. Por exemplo, se deseja permitir que os usuários filtrem os resultados da pesquisa para mostrar restaurantes com cinco estrelas, não implemente o filtro com um controle de classificação. O uso do controle de classificações pode induzir os usuários a pensar que estão dando uma nova classificação para o restaurante. Em vez disso, você pode usar uma lista suspensa.

Não use um controle de classificação de uma estrela como um controle de satisfação/insatisfação. Em vez disso, você deverá usar caixa de seleção. O controle de classificação não é está projetado para uma classificação binária, por exemplo, tocar no controle não ativa/desativa a estrela. Para obter um exemplo de como usar uma caixa de seleção como um controle de satisfação/insatisfação em aplicativos da Windows Store em JavaScript, consulte os Controles HTML comuns e a amostra de widgets cotidianos.

O que fazer e o que não fazer

  • Use dicas de ferramenta para dar mais contexto aos usuários. Você pode personalizar a dica de ferramenta para mostrar palavras mais significativas para cada estrela, como "excelente, "muito bom" ou "não ruim," conforme mostrado aqui:

    Uma classificação com uma dica de ferramenta personalizada.

  • Desabilite o controle de classificação quando você desejar impedir que o usuário adicione ou modifique a classificação. Um controle de classificação desabilitado continua a exibir a classificação (se estiver definida), mas não permite ao usuário adicionar ou modificá-la. Suponha que você queira restringir as classificações para os usuários conectados. Você pode desabilitar o controle de classificação e, quando os usuários tocam no controle, pode enviá-los para uma página de logon.

    Se o controle não puder ser habilitado (for somente leitura durante a vida-útil do aplicativo), torne-o menor que os outros controles de classificação definindo o atributo class do elemento host do controle como "win-small". Tornar o controle menor ajuda a distingui-lo dos outros controles e também desencoraja a interação.

    Uma Classificação desabilitada e uma Classificação desabilitada permanentemente.

  • Mostre a classificação média e a classificação do usuário ao mesmo tempo. Depois que o usuário fornece uma classificação, o controle de classificação exibe a classificação do usuário em vez da média. Sempre que for importante para os usuários, mostrar-lhes a classificação média de usuários, além de classificação deles. Aqui estão duas maneiras pelas quais você pode exibir a classificação média:

    • Exiba a média em uma cadeia de texto anexa (como "média: 3,5").
    • Use os dois controles de classificação juntos, um para mostrar a classificação do usuário, e um que mostra a classificação média e não permite a entrada do usuário.

    Exibindo a classificação do usuário e a classificação média

  • Não altere o número padrão de estrelas (a classificação máxima), a menos que seja necessário. Por padrão, o controle de classificação tem 5 estrelas, com um 1 sendo a classificação mais baixa e 5 sendo a mais alta ou melhor. Se o seu aplicativo seguir essa convenção, será fácil para os usuários interpretar o que significa a classificação.

  • Não desabilite o recurso "Limpar sua classificação", a menos que precise evitar que os usuários excluam suas classificações.

Tópicos relacionados

Para designers
Diretrizes para caixas de seleção
Diretrizes de controles deslizantes
Para desenvolvedores (HTML)
WinJS.UI.Rating object
Início Rápido: Adicionando controles de classificação

 

 

Mostrar:
© 2015 Microsoft