Compartilhar via


Interações por toque do Windows

O Windows 8.1 oferece um conjunto conciso de interações por toque que são usadas em todo o sistema. A aplicação consistente dessa linguagem de toque torna seu aplicativo familiar em relação ao que os usuários já conhecem. Isso aumenta a confiança do usuário, tornando seu aplicativo mais fácil de aprender e usar. Para saber sobre a implementação da linguagem de toque, veja Gestos, manipulações e interações.

 

Usuário interagindo com tablet usando o toque

 

Neste artigo:

  • Princípios de design para o toque
  • Linguagem de toque
  • Alvos de toque
  • Postura e manuseio
  • Tópicos relacionados

Princípios de design para o toque

Dê um retorno imediato

Aumente a confiança do usuário apresentando comentários visuais imediatos sempre que a tela for tocada. Os elementos interativos devem reagir mudando de cor, de tamanho ou se movendo. Os itens que não são interativos devem mostrar os elementos visuais de toque do sistema apenas quando a tela for tocada.

O conteúdo segue os dedos

Os elementos que podem ser movidos ou arrastados por um usuário, como uma tela ou um controle deslizante, devem seguir o dedo do usuário ao se mover. Botões e outros elementos que não se movem devem retornar ao estado padrão quando o usuário deslizar ou retirar o dedo do elemento.

Mantenha as interações reversíveis

Se pegar um livro, você poderá colocá-lo de volta onde o encontrou. As interações por toque têm que ter comportamento semelhante: devem ser reversíveis. Apresente comentários visuais para indicar o que acontecerá quando o usuário retirar o dedo. Isso faz com que seja seguro explorar seu aplicativo usando toque.

Permita o uso de qualquer número de dedos

Muitas vezes, as pessoas tocam com mais de um dedo e nem percebem. Por isso, as interações por toque não devem mudar radicalmente com base no número de dedos que tocam a tela. Assim como no mundo real, não deve haver diferença ao se deslizar algo com um ou três dedos.

Linguagem de toque

Pressionar e segurar para aprender

Esta interação por toque faz com que informações detalhadas ou elementos visuais explicativos (por exemplo, uma dica de ferramenta ou um menu de contexto) sejam exibidos sem confirmar uma ação. Tudo o que for exibido dessa forma não deve impedir que os usuários façam um movimento panorâmico caso comecem a deslizar o dedo.

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.

Tocar para executar uma ação principal

Tocar em um elemento invoca sua ação principal, por exemplo, iniciar um aplicativo ou executar um comando.

Deslizar o dedo para realizar movimento panorâmico

O gesto de deslizar é usado principalmente para interações de movimento panorâmico, mas também pode ser usado para movimentação (quando o movimento panorâmico está restrito a uma direção), desenho ou escrita. Esse gesto também pode ser usado para focar elementos pequenos densamente compactados com a ação de esfregar (deslizando o dedo sobre objetos relacionados, como botões de opção).

Passar o dedo para selecionar, comandar e mover

Deslizar o dedo por uma curta distância, perpendicular à direção do movimento panorâmico (quando o movimento panorâmico está restrito a uma direção), seleciona objetos em uma lista ou grade. Exibe a barra de aplicativos com os comandos relevantes quando objetos são selecionados.

Pinçar e ampliar para ajustar o zoom

Embora os gestos de pinçar e ampliar sejam comumente usados para redimensionar, eles também permitem saltar para o início, o fim ou qualquer outro lugar do conteúdo com o zoom semântico. O zoom semântico fornece uma exibição reduzida para mostrar grupos de itens e maneiras rápidas de aprofundar-se neles.

Virar para girar

Girar com dois ou mais dedos faz com que um objeto gire. Gire o próprio dispositivo para girar a tela inteira.

Passar o dedo da borda para acessar comandos do aplicativo

Para revelar os comandos do aplicativo, passe o dedo começando pela borda inferior ou superior da tela. Use a barra de aplicativos para exibir comandos do aplicativo.

Passar o dedo da borda para acessar comandos do sistema

Passar o dedo da borda direita da tela revela os botões que expõem os comandos do sistema.

Passe o dedo começando da borda esquerda para percorrer pelos aplicativos que estão em execução.

Passe o dedo começando da borda superior até a borda inferior da tela para fechar o aplicativo atual.

Passar o dedo da borda superior para baixo e para a borda esquerda ou direita ajusta o aplicativo atual nesse lado da tela.

Observação  Os usuários podem executar manipulações diretas, como as interações de deslizar para aplicar panorâmica, pinçar para aplicar zoom e virar para girar, simultaneamente e com qualquer número de pontos de contato.

Alvos de toque

Tamanho versus eficiência: o tamanho do alvo influencia a taxa de erro

Gráfico que mostra como os erros de toque diminuem em alvos maiores.

Não há tamanho perfeito para alvos de toque. Tamanhos diferentes funcionam para diferentes situações. Ações com consequências graves (como exclusão e fechamento) ou ações usadas com frequência devem usar alvos de toque grandes. Ações não usadas com frequência com consequências menores podem usar alvos pequenos.

Diretrizes de tamanhos de alvos

Tamanho mínimo recomendado de 7x7

7x7 mm: tamanho mínimo recomendado

7x7 mm é um bom tamanho mínimo, quando o toque no alvo errado puder ser corrigido em um ou dois gestos ou dentro de cinco segundos. O preenchimento entre os alvos é tão importante quanto o seu tamanho.

Tamanho recomendado de 9x9 para precisão

Quando a precisão importa

Fechar, excluir e outras ações com consequências graves não podem sofrer toques acidentais. Use alvos de 9x9 mm se forem necessários mais de dois gestos para tocar o alvo errado, mais de cinco segundos ou uma grande alteração do contexto para correção.

Tamanho mínimo de 5x5

Quando simplesmente não cabe

Se você está apertando tudo para caber, pode usar alvos de 5x5 mm desde que o toque no alvo errado possa ser corrigido com um gesto. O uso de 2 mm de preenchimento entre os alvos é extremamente importante neste caso.

 

Acessibilidade

À medida que você planeja a interface do usuário e as interações com suporte no aplicativo, lembre-se sempre da grande variedade de capacidades, deficiências e preferências dos seus usuários. Seguir os princípios de design acessível desde o início ajuda a tornar seu aplicativo acessível para o maior público possível. Para saber mais sobre como planejar a acessibilidade, veja Diretrizes de acessibilidade.

Tamanhos dos dedos

Muitas vezes, as pessoas se culpam por terem "dedos grandes". Mas até os dedos de um bebê são maiores do que a maioria dos alvos de toque.

A imagem à esquerda mostra que a largura média do dedo de um adulto é de cerca de 11 milímetros (mm), enquanto a de um bebê é de 8 mm, e a de alguns jogadores de basquete é de mais de 19 mm!

Gráfico que mostra a ampla variação nas espessuras dos dedos

Postura e manuseio

O design para toque é mais do que projetar o que é mostrado na tela. Ele precisa ser planejado de acordo com a forma como o dispositivo vai ser manuseado (segurado).

Normalmente, as pessoas têm algumas formas preferidas de segurar um tablet.

A tarefa atual e como ela é apresentada geralmente determinam como ele vai ser segurado. Mas o ambiente imediato e o conforto físico também influenciam o tempo de uso e a frequência com que se muda a forma de manuseá-lo.

Tente otimizar seu aplicativo para diferentes formas de manuseio. Se uma interação levar naturalmente a determinada forma de manuseio, otimize-a de acordo.

Áreas de interação

Como os slates muitas vezes são segurados pela lateral, os cantos inferiores e as laterais são locais ideais para elementos interativos.

Áreas de interação

Áreas de leitura

O conteúdo na metade superior da tela é mais fácil de ver do que o conteúdo na metade inferior, que muitas vezes é bloqueado pelas mãos ou ignorado.

Áreas de leitura

Formas de manuseio comuns

Controle Manuseio e interação Considerações de design
Segure com uma mão e interaja com a outra Uma mão segurando, outra mão interagindo com pouca a média interação
  • As bordas direita ou inferior oferecem interação rápida.
  • O canto inferior direito pode ser obstruído pela mão e pelo pulso.
  • O alcance limitado torna o toque mais preciso.
  • Leitura, navegação, email e pouca digitação.
Segure com ambas as mãos e interaja com os polegares Duas mãos segurando, polegares interagindo com pouca a média interação
  • Os cantos inferiores esquerdo e direito oferecem interação rápida.
  • Os polegares apoiados aumentam a precisão do toque.
  • Os itens no meio da tela são de difícil acesso.
  • Para tocar no meio da tela, é preciso mudar de postura.
  • Leitura, navegação, pouca digitação, jogos.
Ambas as mãos interagindo O dispositivo fica sobre a mesa ou as pernas, as duas mãos interagem com pouca a muita interação
  • A parte inferior da tela oferece interação rápida.
  • Os cantos inferiores podem ser obstruídos pelas mãos e pelos pulsos.
  • A redução da necessidade de alcance torna o toque mais preciso.
  • Leitura, navegação, email, muita digitação.
Interação passiva sem controle O dispositivo fica sobre a mesa ou de pé, com ou sem interação
  • A parte inferior da tela oferece interação rápida.
  • Tocar a parte superior da tela obstrui o conteúdo.
  • Tocar a parte superior da tela pode desequilibrar um dispositivo encaixado.
  • Interação à distância reduz a legibilidade e a precisão.
  • Aumente o tamanho do alvo para melhorar a legibilidade e a precisão.
  • Assistir a um filme, ouvir música.

 

Tópicos relacionados

Respondendo à interação do usuário

Versão para download de Interações por toque

Interação do usuário: entrada por toque... e muito mais

Diretrizes para direcionamento (aplicativos da Windows Store)

Diretrizes de teclado virtual e painel de manuscrito (aplicativos da Windows Store)