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.
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
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
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. |
|
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. |
|
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!
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 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.
Formas de manuseio comuns
Controle | Manuseio e interação | Considerações de design |
---|---|---|
Uma mão segurando, outra mão interagindo com pouca a média interação |
|
|
Duas mãos segurando, polegares interagindo com pouca a média interação |
|
|
O dispositivo fica sobre a mesa ou as pernas, as duas mãos interagem com pouca a muita interação |
|
|
O dispositivo fica sobre a mesa ou de pé, com ou sem interação |
|
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)