Comentário visual

Diretrizes para comentários visuais

Descrição

Use os comentários visuais para mostrar aos usuários quando suas interações são detectadas, interpretadas e manipuladas. Os comentários visuais poderão ajudar os usuários incentivando a interação. Ele indica o sucesso da interação, o que oferece ao usuário uma sensação de controle. Além de retransmitir o status do sistema, também reduz os erros.

O que fazer e o que não fazer

  • Fornecer comentários visuais mesmo quando o contato é muito breve. Isso ajuda o usuário a:
    • Confirmar se a tela sensível ao toque está funcionando.
    • Identificar se o destino é habilitado por toque ou responsivo.
    • Identificar se o usuário errou o destino pretendido.
  • Exibir comentários imediatamente para todos os eventos de interação.
  • Fornecer comentários que consistem em indicações sutis e intuitivas que não distraiam os usuários.
  • Assegurar que os destinos de toque sejam tocados pela ponta dos dedos durante toda as a manipulações.
  • Habilitar a seleção de itens com o gesto de passar o dedo quando o movimento panorâmico está restrito a uma única direção.
  • Não usar visualizações de toque em situações em que possam interferir com o uso do aplicativo. Para saber mais, consulte ShowGestureFeedback.
  • Não exibir comentários a menos que seja absolutamente necessário. Manter a interface do usuário clara e organizada sem mostrar os comentários visuais, a menos que você esteja agregando valor que não esteja disponível em nenhum outro lugar. Nunca exibir as dicas de ferramentas, se elas repetirem o texto que já está visível. As dicas de ferramentas devem ser reservadas para ocasiões específicas, como texto truncado (texto com reticências) que não é exibido quando o item é selecionado ou onde as informações adicionais são necessárias para a compreensão ou use seu próprio aplicativo.
  • Não usar o gesto pressionar e segurar, a não ser para a interface do usuário informativa.
    Importante  Gestos de pressionar e segurar podem ser usados para seleção em casos em que o movimento panorâmico horizontal e vertical está habilitado.
     
  • Não personalizar os comportamentos dos comentários visuais do gestos internos do Windows 8, porque isso pode ocasionar uma experiência inconsistente e confusa para o usuário.
  • Não mostre comentários visuais durante o movimento panorâmico ou de arrastar; o movimento real do objeto na tela é suficiente. Entretanto, se a área de conteúdo não permitir movimento panorâmico ou rolagem, use visualizações para indicar as condições de limite. Para saber mais, veja Diretrizes para movimento panorâmico.
  • Não exibir comentários para um controle que não seja identificado como o destino. O comentário visual é importante quando recorre à entrada por toque em atividades que exijam exatidão e precisão com base no local. A exibição do comentário sempre que você detectar a entrada por toque ajuda o usuário a entender a heurística destinada ao cliente e definida pelo aplicativo e seus controles.
  • Não use o comportamento de comentário destinado a um tipo de entrada com outro tipo. Por exemplo, um retângulo de foco do teclado deve ser usado somente com o teclado, e não com toque.

Diretrizes de uso adicional

As visualizações por contato são especialmente críticas para as interações por toque que exigem exatidão e precisão. Por exemplo, seu aplicativo deve indicar claramente o local de um toque para permitir que um usuário saiba se errou o seu destino, o quanto errou e quais ajustes deve fazer.

Use os controles da plataforma apresentados pelas estruturas de linguagem dos aplicativos da Windows Store (aplicativos da Windows Store em JavaScript e aplicativos da Windows Store em C++, C# ou Visual Basic) para acessar as visualizações do Windows 8 gratuitamente. Se o seu aplicativo permitir interações personalizadas que exijam feedbacks personalizados, você deverá garantir que o feedback seja adequado, que ele se propague em dispositivos de entrada e que não distraia o usuário da tarefa. Isso pode ser especificamente um problema em aplicativos de jogos ou de desenho, em que o feedback visual pode entrar em conflito ou até mesmo obscurecer uma interface do usuário essencial.

Importante  

Não recomendamos mudar o comportamento da interação dos gestos internos.

 

Interface do usuário de comentários

A interface de feedback do usuário geralmente depende do dispositivo de entrada (toque, touchpad, mouse, caneta, teclado, etc.). Por exemplo, o feedback interno para o mouse geralmente envolve movimentar e mudar o cursor, enquanto toque e caneta exigem visualizações de contato e entrada de teclado e a navegação usa retângulos de foco e destaque.

Use ShowGestureFeedback para configurar o comportamento de comentários para gestos da plataforma.

Se você estiver personalizando a interface do usuário de comentários, lembre-se de fornecer comentários que dêem suporte e sejam adequados a todos os modos de entrada.

Estes são alguns exemplos de visualizações internas por contato do Windows 8.

Captura de tela mostrando uma visualização de toque.

Visualização por toque

Captura de tela mostrando uma visualização de mouse.

Visualização por mouse/touchpad

Captura de tela mostrando uma visualização de caneta.

Visualização por caneta

Captura de tela mostrando uma visualização por teclado.

Visualização por teclado

 

Interface do usuário informativa (pop-ups)

Um dos principais formulários de comentários visuais é a interface do usuário informativa (ou interface do usuário de desambiguidade). A interface do usuário informativa identifica e exibe informações sobre um objeto, descreve a funcionalidade e a forma de acessá-la e fornece orientação, quando necessário.

Aqui estão os diferentes tipos de interface do usuário informativa compatíveis com aplicativos da Windows Store.

  • Dicas de ferramentas
  • Dicas de ferramentas avançadas
  • Menus:
  • Caixas de diálogo de mensagem
  • Submenus

A interface do usuário informativa é especialmente útil para superar a oclusão (obstrução) da ponta do dedo e melhorar as interações por toque com o seu aplicativo. Ela ainda tem um gesto interno dedicado a ele: pressionar e segurar.

Pressionar e segurar é uma interação de tempo limite, que normalmente não é incentivada no Windows 8. Uma interação de tempo limite é aceitável nesse caso, visto que ela é usada como uma ferramenta para aprender e explorar. A duração recomendada depende do tipo de interface do usuário informativa. Veja os limites de tempo recomendados.

Tipo IU informacionalTempoAtivaçãoUtilização
Dica de ferramenta de oclusão (para depuração e destinos menores)0 msSimPara rápidos esclarecimentos de ações. Geralmente usado para comandos.
Dica de ferramenta de oclusão (para ações)200 msSim
Dica de ferramenta avançada~2000 ms NãoPara aprendizagem e para explorações lentas e mais decisivas. Geralmente usado com itens de coleção.
Interação por revelação ~2000 ms Não
Menu de contexto~2000 msNãoExpõe um conjunto limitado de comandos relacionados ao objeto selecionado.
Submenus~2000 ms NãoExpõe um conjunto limitado de comandos relacionados ao objeto selecionado.

 

Para saber mais sobre como fornecer a interface do usuário informativa, veja Criando o layout da interface do usuário e Exibindo pop-ups.

Dicas de ferramentas

Use as dicas de ferramentas para revelar mais informações sobre um controle antes de pedir ao usuário para executar uma ação.

As dicas de ferramentas (Tooltip) aparecem automaticamente quando o usuário executa um gesto de pressionar e segurar (ou quando um evento de focalização é detectado) em um controle ou objeto. A dica de ferramenta desaparece quando o contato ou o cursor sai do controle ou objeto. Uma dica de ferramenta pode incluir texto e imagens, mas não é interativa.

Dicas de ferramenta de oclusão para destinos menores

As dicas de ferramentas descrevem o destino ocluso. Elas são mais úteis para o direcionamento e ativação de itens menores do que o tamanho padrão do destino por toque, como por exemplo, hiperlinks em uma página da Web.

Você pode substituir essas dicas de ferramentas por um pop-up informativo após um determinado limite de tempo. Por exemplo, use uma dica de ferramenta de oclusão para mostrar o texto obstruído do hiperlink e substitua a dica da ferramenta por um pop-up contendo a URL.

Dicas de ferramenta para ações e comandos

Essas dicas de ferramentas descrevem a ação ou o comando que ocorre quando um usuário retira o seu dedo de um elemento. Elas são úteis ao direcionar e ativar um botão ou controle semelhante.

Uma dica de ferramenta de destino menor pode ser seguida por uma dica de ferramenta de ação após um determinado limite de tempo. Nesse caso, a dica de ferramenta de destino menor deve ser expandida para incluir a informação adicional na dica de ferramenta de ação.

Dica de ferramenta avançada

Essas dicas de ferramentas revelam informações secundárias sobre um elemento. Por exemplo, uma dica de ferramenta avançada pode ser uma descrição textual de uma imagem, o texto completo de um título truncado ou outra informação relevante ao destino.

As dicas de ferramentas avançadas normalmente contêm informações que não precisam estar disponíveis imediatamente e, em alguns casos, podem causar distração se apresentadas muito rapidamente. Um limite de tempo maior contribui para melhorar a decisão dos usuários sobre a obtenção de informações.

Após a exibição de uma dica de ferramenta avançada, o objeto não é mais ativado quando o usuário levanta o dedo. Isso ocorre porque a informação obtida gradualmente da dica de ferramenta pode influenciar o usuário a não ativar o item.

Recomendamos que o design visual e as informações na dica de ferramenta avançada sejam distintos e mais substanciais do que a dica de ferramenta padrão.

Menu de contexto

O menu de contexto (PopupMenu) é um menu leve, que permite aos usuários acesso imediato às ações (como, por exemplo, comandos da área de transferência) realizadas em objetos de texto ou da interface do usuário, em aplicativos da Windows Store.

O menu de contexto otimizado para toque consiste em duas partes. Uma indicação visual, a sugestão, é exibida como resultado de uma interação do ato segurar. Em seguida, o menu de contexto é exibido após a sugestão desaparecer e o usuário levantar o dedo.

As imagens a seguir demonstram como invocar o menu de contexto padrão para o texto ao tocar na seleção ou em uma garra (a ação de pressionar e segurar também pode ser usada).

Toque (ou pressione e mantenha pressionado) dentro da seleção ou em uma garra para invocar o menu de contexto.

Consulte Adicionando menus de contexto.

Caixa de diálogo de mensagem

Use caixas de diálogo de mensagem (MessageDialog) para solicitar uma resposta dos usuários, baseada na ação do usuário ou no estado do aplicativo, antes de continuar. A interação explícita do usuário é exigida, e a entrada no aplicativo ficará bloqueada até que o usuário responda.

Caixa de diálogo para mensagem de erro

Aqui estão alguns dos motivos típicos da exibição de uma caixa de diálogo de mensagem.

  • Apresentar informação urgente
  • Fazer uma pergunta antes de dar continuidade à execução
  • Exibir mensagens de erro

Veja Adicionando caixas de diálogo de mensagem.

Submenu

Um submenu (Flyout) é um painel leve da interface do usuário, que é exibido via ativação por toque, clique ou outra interação, e que é usado para apresentar ao usuário informações, perguntas ou um menu de opções relacionado à atividade atual. Ele pode ser dispensado (desaparece quando o usuário toca ou clica fora do painel de submenu ou pressiona ESC). Ou seja, um submenu pode ser ignorado.

Diferentemente das dicas de ferramentas, os submenus podem aceitar entradas. Diferentemente das caixas de diálogo de mensagem, o aplicativo ainda está ativo e aceitando entradas.

Menu suspenso com confirmação

Veja Adicionando submenus e menus

Interface do usuário por revelação

Uma interação por revelação é uma indicação visual informativa ou animação que demonstra como realizar uma ação com um objeto de destino e fornece uma visualização do resultado da respectiva ação.

As próximas imagens a seguir mostram a interação por revelação para uma seleção de deslizamento transversal na tela inicial. Quando um usuário toca em um bloco de aplicativo (sem o arrastar), o bloco desliza para baixo (como se estivesse sendo arrastado) para revelar a marca de verificação de seleção que apareceria se o aplicativo estivesse realmente selecionado.

Captura de tela mostrando um estado não selecionado.

Pressione o dedo para baixo em um item para iniciar a interação por revelação para uma seleção. A interação por revelação demonstra qual ação será executada no item.

Captura de tela mostrando a animação para seleção.

Sem levantar o dedo, passe o dedo para efetivamente selecionar o item.

Captura de tela mostrando a animação para arrastar e soltar.

Se o usuário continuar a deslizar seu dedo, a visualização por revelação mudará para mostrar que o objeto agora pode ser movido.

Após a exibição de uma interação por revelação, o objeto não é mais ativado quando o usuário levanta o dedo.

Tópicos relacionados

Para designers
Diretrizes da experiência do usuário para interações personalizadas do usuário
Diretrizes para movimento panorâmico
Para desenvolvedores
Interações personalizadas do usuário
Exemplos
Exemplo de entrada básica
Exemplo de entrada de baixa latência
Exemplo do modo de interação do usuário
Amostra de elementos visuais do foco
Exemplos de arquivo-morto
Entrada: amostra de eventos de entrada do usuário XAML
Entrada: exemplo de funcionalidades do dispositivo
Entrada: exemplo de teste de toque
Amostra de rolagem, movimento panorâmico e aplicação de zoom em XAML
Entrada: exemplo de tinta simplificada
Entrada: amostra de gestos no Windows 8
Entrada: amostra de manipulações e gestos (C++)
Amostra de entrada por toque do DirectX

 

 

Mostrar:
© 2016 Microsoft