Aplicativos do Windows
Recolher sumário
Expandir sumário

Diretrizes de resposta visual

Use os comentários visuais para mostrar aos usuários quando suas interações com os aplicativos da Windows Store são detectadas, interpretadas e manipuladas. Os comentários visuais poderão incentivar o uso da interatividade pelos usuários. 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.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim:  Interação do usuário: entrada por toque e muito mais

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 do usuário de comentários geralmente depende do dispositivo de entrada (toque, touchpad, mouse, caneta, teclado, etc.). Por exemplo, os comentários internos para o mouse geralmente envolvem 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 estiver personalizando a interface do usuário de comentários, lembre-se de fornecer comentários que dão suporte e são adequados para 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 (para saber mais sobre isso, veja Design de interação por toque). 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 ms Nã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.

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.

Veja Adicionando dicas de ferramentas.

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.

Veja Guia de início rápido: adicionando um MenuFlyout.

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

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.

Submenu com confirmação

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 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 do 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.

O que fazer e o que não fazer

Veja uma lista do que fazer e do que não fazer que ajudará você a criar uma excelente experiência de interação do usuário para seus clientes.

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.

O que não fazer

Não usar visualizações de toque em situações em que possam interferir com o uso do aplicativo.

Para saber mais, veja ShowGestureFeedback.

Não exibir comentários a menos que sejam absolutamente necessários.

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.

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.

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 mostrar a resposta visual 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 tiver movimento panorâmico ou de rolagem, use as 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.

Tópicos relacionados

Conceitual
Diretrizes para interações comuns do usuário
Design da interação por toque
Tutorial (aplicativos da Windows Store usando JavaScript)
Guia de início rápido: ponteiros
Guia de início rápido: gestos e manipulações DOM
Guia de início rápido: gestos estáticos
Guia de início rápido: gestos de manipulação
Tutorial (aplicativos da Windows Store usando C#/VB/C++ e XAML)
Guia de início rápido: Entrada por toque
Guia de início rápido: ponteiros
Tutorial (aplicativos da Windows Store em C++ e DirectX)
Respondendo à entrada por toque (DirectX e C++)
Amostras (DOM)
Entrada: amostra de manipulação de eventos de ponteiros DOM
Amostra de rolagem, movimento panorâmico e aplicação de zoom em HTML
Entrada: amostra de gestos instanciáveis
Amostras (APIs de aplicativos da Windows Store )
Entrada: amostra de manipulações e gestos (JavaScript)
Entrada: amostra de gestos no Windows 8
Entrada: amostra de eventos de entrada do usuário XAML
Amostra de rolagem, movimento panorâmico e aplicação de zoom em XAML
Amostras (DirectX)
Amostra de entrada por toque do DirectX
Entrada: amostra de manipulações e gestos (C++)

 

 

Mostrar:
© 2017 Microsoft