Tocar

Observação

Este guia de design foi criado para o Windows 7 e não foi atualizado para versões mais recentes do Windows. Grande parte das diretrizes ainda se aplica em princípio, mas a apresentação e os exemplos não refletem nossas diretrizes de design atuais.

Todos os aplicativos do Microsoft Windows devem ter uma ótima experiência de toque. E criar essa experiência é mais fácil do que você pensa.

O toque refere-se ao uso de um ou mais dedos para fornecer entrada por meio de uma exibição de dispositivo e interagir com Windows e aplicativos. Um aplicativo com otimização de toque tem um modelo de interface do usuário e interação projetado para acomodar as áreas de contato maiores e menos precisas de toque, os vários fatores forma de dispositivos de toque e as muitas posturas e aderências que os usuários podem adotar ao usar um dispositivo sensível ao toque.

Cada dispositivo de entrada tem seus pontos fortes. O teclado é melhor para entrada de texto e comandos com movimento mínimo da mão. O mouse é melhor para apontar com eficiência e precisão. O toque é melhor para manipulação de objetos e para dar comandos simples. Uma caneta é melhor para expressão de forma livre, como caligrafia e desenho.

O Windows 8.1 é otimizado para capacidade de resposta, precisão e facilidade de uso com toque, ao mesmo tempo em que dá suporte total aos métodos de entrada tradicionais (como mouse, caneta e teclado). A velocidade, a precisão e os comentários táteis que os modos de entrada tradicionais fornecem são familiares e atraentes para muitos usuários e potencialmente mais adequados para cenários de interação específicos.

Você pode encontrar diretrizes relacionadas ao mouse, caneta e acessibilidade em tópicos separados.

Quando você pensa na experiência de interação para seu aplicativo:

Não suponha que, se uma interface do usuário funcionar bem para um mouse, ela também funcionará bem para o toque. Embora o bom suporte ao mouse seja um começo, uma boa experiência de toque tem alguns requisitos adicionais.

Suponha que, se uma interface do usuário funcionar bem para um dedo, ela também funcionará bem para uma caneta. Tornar seu aplicativo sensível ao toque é um longo caminho para também fornecer um bom suporte à caneta. A principal diferença é que os dedos têm uma ponta mais direta, portanto, eles precisam de destinos maiores.

Com o toque, você pode manipular objetos e interface do usuário diretamente, o que torna uma experiência mais rápida, mais natural e envolvente.

Fornecer uma ótima experiência de toque

Você deve garantir que os usuários possam executar tarefas críticas e importantes com eficiência usando a entrada por toque. No entanto, a funcionalidade de aplicativo específica, como manipulação de texto ou pixel, pode não ser adequada para toque e pode ser reservada para o dispositivo de entrada mais adequado.

Se você não tiver muita experiência no desenvolvimento de aplicativos de toque, é melhor aprender fazendo isso. Obtenha um computador habilitado para toque, coloque o mouse e o teclado de lado e use apenas os dedos para interagir com seu aplicativo. Se você tem um tablet, experimente mantê-lo em posições diferentes, como em seu colo, deitado em uma mesa, ou em seus braços enquanto você está de pé. Tente usá-lo na orientação retrato e paisagem.

Normalmente, os aplicativos com otimização de toque que funcionam melhor com a interação por toque são:

• Natural e intuitivo. As interações são projetadas para corresponder à forma como os usuários interagem com objetos no mundo real.
• Menos intrusivo. Usar o toque é silencioso e, consequentemente, muito menos perturbador do que digitar ou clicar.
• Portátil. Os dispositivos de toque são mais compactos porque muitas tarefas podem ser concluídas sem teclado, mouse, caneta ou touchpad. Eles também são mais flexíveis porque uma superfície de trabalho não é necessária.
• Direto e envolvente. O toque faz você sentir que está manipulando diretamente objetos na tela.
• Menos preciso. Os usuários não podem direcionar objetos com precisão com toque, em comparação com um mouse ou caneta.

O toque fornece uma sensação natural do mundo real para interação. A manipulação direta e a animação completam essa impressão, dando aos objetos um movimento realista e dinâmico e comentários. Por exemplo, considere um jogo de cartas. Não só é conveniente e fácil arrastar cartões usando um dedo, a experiência assume uma sensação envolvente do mundo real quando você pode jogar, deslizar e girar as cartas assim como você faria um baralho físico. E quando você tenta mover um cartão que não pode ser movido, é uma experiência melhor ter o cartão resistir, mas não impedir a movimentação, e se estabelecer novamente no lugar quando liberado, para indicar claramente que a ação foi reconhecida, mas não pode ser feita.

Felizmente, se seu aplicativo já estiver bem projetado, fornecer uma ótima experiência de toque é fácil de fazer. Para essa finalidade, um programa bem projetado:

• Garante que as tarefas mais importantes possam ser executadas com eficiência usando um dedo (pelo menos as tarefas que não envolvem muita digitação ou manipulação detalhada de pixels).
• Usa controles grandes para toque. Os controles comuns têm um tamanho mínimo de 23 x 23 pixels (DLUs 13x13) e os controles mais usados são pelo menos 40 x 40 pixels (DLUs 23x22). Para evitar comportamento sem resposta, os elementos da interface do usuário devem ter pelo menos 5 pixels (3 DLUs) de espaço entre eles. Para outros controles, verifique se eles têm pelo menos um destino de clique de 23 x 23 pixels (13x13 DLU), mesmo que sua aparência estática seja muito menor. Consulte o dimensionamento de controle padrão.
• Dá suporte à entrada do Mouse. Os controles interativos têm recursos claros e visíveis. Os objetos têm comportamentos padrão para as interações padrão do mouse (clique com o botão esquerdo único e duplo, clique com o botão direito do mouse, arraste e passe o mouse).
• Dá suporte à entrada do teclado. O aplicativo fornece atribuições de teclas de atalho padrão, especialmente para comandos de navegação e edição que também podem ser gerados por meio de gestos de toque.
• Garante a acessibilidade. Usa a Automação da Interface do Usuário ou a MSAA (Microsoft Active Accessibility) para fornecer acesso programático à interface do usuário para tecnologias adaptativas. O aplicativo responde adequadamente às alterações de orientação, tema, localidade e métrica do sistema.
• Elimina interações desnecessárias. Para evitar a perda de dados ou acesso ao sistema, use os valores padrão mais seguros e seguros. Se segurança e segurança não forem fatores, o aplicativo selecionará a opção mais provável ou conveniente.
• Fornece o equivalente de toque para focalizar. Não confie no foco como a única maneira de executar uma ação.
• Garante que os gestos entrem em vigor imediatamente. Mantenha os pontos de contato sob os dedos do usuário sem problemas durante todo o gesto, o que fornece o efeito do mapeamento de gestos diretamente para o movimento do usuário.
• Usa gestos padrão sempre que possível. Gestos personalizados somente para interações exclusivas para seu aplicativo.
• Garante que comandos indesejados ou destrutivos possam ser revertidos ou corrigidos. Ações acidentais são mais prováveis ao usar o toque.

Diretrizes para entrada por toque

Com o toque, seu aplicativo do Windows pode usar gestos físicos para emular a manipulação direta de elementos da interface do usuário.

Considere estas práticas recomendadas ao criar seu aplicativo habilitado para toque:

A capacidade de resposta é essencial para criar experiências de toque que se sintam diretas e envolventes. Para se sentirem diretos, os gestos devem entrar em vigor imediatamente e os pontos de contato de um objeto devem permanecer sob os dedos do usuário suavemente durante todo o gesto. O efeito da entrada de toque deve ser mapeado diretamente para o movimento do usuário, portanto, por exemplo, se o usuário girar os dedos 90 graus, o objeto também deverá girar 90 graus. Qualquer retardo, resposta agitada, perda de contato ou resultados imprecisos destrói a percepção da manipulação direta e também da qualidade.

A consistência é essencial para criar experiências de toque que parecem naturais e intuitivas. Depois que os usuários aprendem um gesto padrão, eles esperam que esse gesto tenha o mesmo efeito em todos os aplicativos. Para evitar confusão e frustração, nunca atribua significados não padrão a gestos padrão. Em vez disso, use gestos personalizados para interações exclusivas ao seu programa.

Em seguida, descreveremos a linguagem de toque do Windows, mas antes de continuarmos, aqui está uma pequena lista de termos básicos de entrada por toque.

• Gesto

  Um gesto é o ato físico ou movimento executado no dispositivo de entrada (dedo, dedos, caneta/caneta, mouse e assim por diante). Por exemplo, para iniciar, ativar ou invocar um comando, use um único toque de dedo para um dispositivo de toque ou touchpad (equivalente a um clique à esquerda com um mouse, um toque com uma caneta ou Enter em um teclado).

• Manipulação

  Uma manipulação é a reação imediata em tempo real ou a resposta que um objeto ou interface do usuário tem a um gesto. Por exemplo, os gestos de slide e de passar o dedo normalmente fazem com que um elemento ou interface do usuário se mova de alguma forma.

  O resultado final de uma manipulação, como ela é manifestada pelo objeto na tela e na interface do usuário, é a interação.

• Interação

  As interações dependem de como uma manipulação é interpretada e do comando ou ação resultante da manipulação. Por exemplo, os objetos podem ser movidos usando os gestos de slide e de passar o dedo, mas os resultados diferem dependendo se um limite de distância é cruzado. O slide pode ser usado para arrastar um objeto ou um painel de exibição enquanto o dedo pode ser usado para selecionar um item ou exibir uma barra de aplicativos.

A linguagem de toque do Windows

O Windows fornece um conjunto conciso de interações por toque que são usadas em todo o sistema. Aplicar essa linguagem de toque consistentemente faz com que seu aplicativo se sinta familiar com o que os usuários já sabem. Isso aumenta a confiança do usuário tornando seu aplicativo mais fácil de aprender e usar. Para saber mais sobre a implementação da linguagem de toque, consulte Gestos, manipulações e interações.

Pressione e segure para aprender

O gesto de pressionar e segurar exibe informações detalhadas ou visuais de ensino (por exemplo, uma dica de ferramenta ou menu de contexto) sem se comprometer com uma ação ou comando. O movimento panorâmico ainda será possível se um gesto deslizante for iniciado enquanto o visual for exibido.

Importante

Você pode usar pressionar e segurar para seleção em casos em que o movimento panorâmico horizontal e vertical está habilitado.

Estado de entrada: Um ou dois dedos em contato com a tela.

Movimento: Sem movimento.

Estado de saída: O último dedo para cima encerra o gesto.

Efeito: Exibir mais informações.

O gesto de pressionar e segurar.

Focalizar

Focalizar é uma interação útil porque permite que os usuários obtenham informações adicionais por meio de dicas antes de iniciar uma ação. Ver essas dicas faz com que os usuários se sintam mais confiantes e reduzam os erros.

Infelizmente, focalizar não é suportado por tecnologias de toque, portanto, os usuários não podem focalizar ao usar um dedo. A solução simples para esse problema é aproveitar o focalizar ao máximo, mas apenas de maneiras que não são necessárias para executar uma ação. Na prática, isso geralmente significa que a ação também pode ser executada clicando, mas não necessariamente da mesma maneira.

Neste exemplo, os usuários podem ver a data de hoje focalizando ou clicando.

Toque para a ação primária

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

Estado de entrada: Um dedo em contato com a tela ou touchpad e levantado antes do limite de tempo para uma interação de pressionar e segurar ocorre.

Movimento: Sem movimento.

Estado de saída: O dedo para cima encerra o gesto.

Efeito: Iniciar um aplicativo ou executar um comando.

O gesto de toque.

Deslizar para deslocar

Deslizar é usado principalmente para interações panorâmicas, mas também pode ser usado para movimentação (em que o movimento panorâmico é restrito a uma direção), desenhar ou escrever. Deslizar também pode ser usado para direcionar elementos pequenos e densamente compactados esfregando (deslizando o dedo sobre objetos relacionados, como botões de opção).

Estado de entrada: Um ou dois dedos em contato com a tela.

Movimento: Arraste, com os dedos adicionais permanecendo na mesma posição em relação uns aos outros.

Estado de saída: O último dedo para cima encerra o gesto.

Efeito: Mova o objeto subjacente diretamente e imediatamente à medida que os dedos se movem. Mantenha o ponto de contato sob o dedo durante todo o gesto.

O gesto de painel.

Passar o dedo para selecionar, comandar e mover

Deslizando o dedo a uma curta distância, perpendicular à direção panorâmica (em que o movimento panorâmico é restrito a uma direção), seleciona objetos em uma lista ou grade. Exiba a barra de aplicativos com comandos relevantes quando os objetos forem selecionados.

Estado de entrada: Um ou mais dedos tocam na tela.

Movimento: Arraste uma curta distância e levante-se antes que o limite de distância para uma interação de movimento ocorra.

Estado de saída: O último dedo para cima encerra o gesto.

Efeito: O objeto subjacente é selecionado ou movido ou a barra de aplicativos é exibida. Mantenha o ponto de contato sob o dedo durante todo o gesto.

O gesto de passar o dedo.

Pinçar e alongar para ampliar

Os gestos de pinçagem e alongamento são usados para três tipos de interações: zoom óptico, redimensionamento e zoom semântico.

O zoom óptico ajusta o nível de ampliação de toda a área de conteúdo para obter uma exibição mais detalhada do conteúdo. Por outro lado, redimensionar é uma técnica para ajustar o tamanho relativo de um ou mais objetos em uma área de conteúdo sem alterar a exibição para a área de conteúdo.

O zoom semântico é uma técnica com otimização de toque para apresentar e navegar dados estruturados ou conteúdo em uma única exibição (como a estrutura de pastas de um computador, uma biblioteca de documentos ou um álbum de fotos) sem a necessidade de controles panorâmicos, de rolagem ou de exibição de árvore. O zoom semântico fornece duas exibições diferentes do mesmo conteúdo, permitindo que você veja mais detalhes à medida que você amplia e menos detalhes à medida que você amplia.

Estado de entrada: Dois dedos em contato com a tela ao mesmo tempo.

Movimento: Os dedos se afastam (alongamento) ou se juntam (pinçar) ao longo de um eixo.

Estado de saída: Qualquer dedo para cima encerra o gesto.

Efeito: Aumenta ou diminui o objeto subjacente diretamente e imediatamente à medida que os dedos se separam ou se aproximam do eixo. Mantenha os pontos de contato sob o dedo durante todo o gesto.

O gesto de zoom.

Girar

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

Estado de entrada: Dois dedos em contato com a tela ao mesmo tempo.

Movimento: Um ou ambos os dedos giram em torno do outro, movendo-se perpendicular para a linha entre eles.

Estado de saída: Qualquer dedo para cima encerra o gesto.

Efeito: Gire o objeto subjacente na mesma quantidade que os dedos giraram. Mantenha os pontos de contato sob o dedo durante todo o gesto.

O gesto de rotação.

A rotação faz sentido apenas para determinados tipos de objetos, portanto, ela não é mapeada para uma interação do sistema com o Windows.

A rotação geralmente é feita de forma diferente por pessoas diferentes. Algumas pessoas preferem girar um dedo em torno de um dedo pivotante, enquanto outras preferem girar os dois dedos em um movimento circular. A maioria das pessoas usa uma combinação dos dois, com um dedo se movendo mais do que o outro. Embora a rotação suave em qualquer ângulo seja a melhor interação, em muitos contextos, como exibição de fotos, é melhor se ajustar à rotação mais próxima de 90 graus quando o usuário soltar. Na edição de fotos, você pode usar uma pequena rotação para endireitar a foto.

Passar o dedo da borda para comandos de aplicativo

Deslizar o dedo a uma curta distância da borda inferior ou superior da tela revela os comandos do aplicativo em uma barra de aplicativos.

Estado de entrada: Um ou mais dedos tocam a moldura.

Movimento: Arraste uma curta distância até a tela e levante.

Estado de saída: O último dedo para cima encerra o gesto.

Efeito: A barra de aplicativos é exibida.

O gesto de passar o dedo da borda.

Desenvolvedores: Para obter mais informações, consulte a enumeração DIRECTMANIPULATION_CONFIGURATION.

Uso dos controles

Aqui, fornecemos algumas diretrizes para otimizar controles para uso de toque.

• Use controles comuns. Os controles mais comuns são projetados para dar suporte a uma boa experiência de toque.
• Escolha controles personalizados projetados para dar suporte ao toque. Talvez você precise de controles personalizados para dar suporte às experiências especiais do programa. Escolha controles personalizados que:
  • Pode ser dimensionado grande o suficiente para facilitar o direcionamento e a manipulação.
  • Quando manipulados, mova-se e reaja a maneira como os objetos reais se movem e reagem, como por exemplo, ter impulso e atrito.
  • Estão perdoando permitindo que os usuários corrijam facilmente erros.
  • Estão perdoando a imprecisão com clicar e arrastar. Os objetos que são descartados perto de seu destino devem cair no lugar correto.
  • Tenha comentários visuais claros quando o dedo estiver sobre o controle.
• Use controles restritos. Controles restritos, como listas e controles deslizantes, quando projetados para facilitar o direcionamento de toque, podem ser melhores do que controles não treinados, como caixas de texto, porque reduzem a necessidade de entrada de texto.
• Forneça valores padrão apropriados. Selecione a opção mais segura (para evitar perda de dados ou acesso ao sistema) e a opção mais segura por padrão. Se a segurança e a segurança não forem fatores, selecione a opção mais provável ou conveniente, eliminando assim a interação desnecessária.
• Forneça o preenchimento automático de texto. Fornece uma lista dos valores mais prováveis, ou valores de entrada mais recentes, para facilitar muito a entrada de texto.
• Para tarefas importantes que usam várias seleções, se uma lista de seleção múltipla padrão é normalmente usada, forneça uma opção para usar uma lista de caixas de seleção.

Tamanhos de controle e direcionamento de toque

Devido à grande área de superfície da ponta do dedo, pequenos controles que estão muito próximos podem ser difíceis de direcionar com precisão.

Como regra geral, um tamanho de controle de 23 x 23 pixels (13x13 DLUs) é um bom tamanho mínimo de controle interativo para qualquer dispositivo de entrada. Por outro lado, os controles de rotação a 15 x 11 pixels são muito pequenos para serem usados efetivamente com toque.

Tenha em mente que o tamanho mínimo é realmente baseado na área física, não em métricas de layout, como pixels ou DLUs. Pesquisas indicam que a área de destino mínima para interação eficiente e precisa usando um dedo é de 6x6 milímetros (mm). Essa área se traduz em métricas de layout como esta:

Fonte	Milímetros	Pixels relativos	DLUs
Interface do usuário do Segoe de 9 pontos	6x6	23x23	13x13
Tahoma de 8 pontos	6x6	23x23	15x14

Além disso, pesquisas mostram que um tamanho mínimo de 10x10 mm (cerca de 40 x 40 pixels) permite melhor velocidade e precisão e também se sente mais confortável para os usuários. Quando prático, use esse tamanho maior para botões de comando usados para os comandos mais importantes ou usados com frequência.

O objetivo não é ter controles gigantes, apenas aqueles que são facilmente usados com toque.

Neste exemplo, o Microsoft Word usa botões maiores que 10x10 mm para os comandos mais importantes.

Esta versão da Calculadora usa botões maiores que 10x10 mm para seus comandos mais usados.

Não há tamanho perfeito para destinos de toque. Tamanhos diferentes funcionam para situações diferentes. Ações com consequências graves (como excluir e fechar) ou ações usadas com frequência devem usar grandes destinos de toque. Ações usadas com pouca frequência com pequenas consequências podem usar destinos pequenos.

Diretrizes de tamanho de destino para controles personalizados

Diretriz de tamanho	Descrição
	7x7 mm: Tamanho mínimo recomendado 7x7 mm é um bom tamanho mínimo se tocar no destino errado pode ser corrigido em um ou dois gestos ou dentro de cinco segundos. O preenchimento entre destinos é tão importante quanto o tamanho do destino.
	Quando a precisão importa Fechar, excluir e outras ações com consequências graves não podem permitir toques acidentais. Use destinos de 9x9 mm se tocar no destino errado exigir mais de dois gestos, cinco segundos ou uma alteração de contexto importante para corrigir.
	Quando simplesmente não cabe Se você se encontrar abarrotando coisas para ajustar, não há problema em usar destinos de 5x5 mm, desde que tocar no destino errado possa ser corrigido com um gesto. Neste caso, o uso de 2 mm de preenchimento entre destinos é extremamente importante.

Diretrizes de tamanho de destino para controles comuns

• Para controles comuns, use os tamanhos de controle recomendados. O dimensionamento de controle recomendado satisfaz o tamanho mínimo de 23 x 23 pixels (13x13 DLU), exceto caixas de seleção e botões de opção (sua largura de texto compensa um pouco), controles de rotação (que não são utilizáveis com toque, mas são redundantes) e divisores.

  

  Os tamanhos de controle recomendados são facilmente tocáveis.

• Para botões de comando usados para os comandos mais importantes ou usados com frequência, use um tamanho mínimo de 40 x 40 pixels (23 x 22 DLUs) sempre que prático. Isso gera melhor velocidade e precisão e também se sente mais confortável para os usuários.

  

  Sempre que prático, use botões de comando maiores para comandos importantes ou usados com frequência.

• Para outros controles:

  • Use destinos de clique maiores. Para controles pequenos, torne o tamanho de destino maior que o elemento de interface do usuário estaticamente visível. Por exemplo, botões de ícone de 16 x 16 pixels podem ter botões de destino de 23 x 23 pixels e os elementos de texto podem ter retângulos de seleção 8 pixels mais largos que o texto e 23 pixels de altura.

    Correto:

    

    Incorreto:

    

    Correto:

    

    Nos exemplos corretos, os destinos de clique são maiores do que os elementos de interface do usuário estaticamente visíveis.

  • Use destinos de clique redundantes. É aceitável que os destinos de clique sejam menores que o tamanho mínimo se esse controle tiver funcionalidade redundante.

    Por exemplo, os triângulos de divulgação progressiva usados pelo controle de exibição de árvore são apenas 6x9 pixels, mas sua funcionalidade é redundante com seus rótulos de itens associados.

    

    Os triângulos de exibição de árvore são muito pequenos para serem facilmente tocáveis, mas são redundantes em funcionalidade com seus rótulos associados maiores.

    Respeite as métricas do sistema. Não codifique tamanhos. Se necessário, os usuários podem alterar as métricas ou dpi do sistema para atender às suas necessidades. No entanto, trate isso como um último recurso porque os usuários normalmente não devem ter que ajustar as configurações do sistema para tornar a interface do usuário utilizável.

    

    Neste exemplo, a métrica do sistema para a altura do menu foi alterada.

Editar texto

Editar texto é uma das interações mais desafiadoras ao usar um dedo. Usar controles restritos, valores padrão apropriados e preenchimento automático elimina ou reduz a necessidade de inserir texto. No entanto, se o aplicativo envolve a edição de texto, você pode tornar os usuários mais produtivos ampliando automaticamente a interface do usuário de entrada em até 150% por padrão quando o toque é usado.

Por exemplo, um programa de email pode exibir a interface do usuário em tamanho normal sensível ao toque, mas reduzir a interface do usuário de entrada para 150% para redigir mensagens.

Neste exemplo, a interface do usuário de entrada é reduzida para 150%.

Layout de controle e espaçamento

O espaçamento entre controles é um fator significativo para tornar os controles facilmente tocáveis. O direcionamento é mais rápido, mas menos preciso ao usar um dedo como o dispositivo apontando, resultando em usuários mais frequentemente tocando fora do destino pretendido. Quando os controles interativos são colocados muito próximos, mas não estão realmente tocando, os usuários podem clicar no espaço inativo entre os controles. Como clicar em espaço inativo não tem nenhum resultado ou comentários visuais, os usuários geralmente não têm certeza do que deu errado.

Ajuste dinamicamente o espaçamento com base no dispositivo de entrada usado. Isso é particularmente útil com interface do usuário transitória, como menus e submenus.

Forneça um mínimo de 5 pixels (3 DLUs) de espaço entre as regiões de destino dos controles interativos. Se os controles pequenos estiverem muito espaçados, o usuário precisará tocar com precisão para evitar tocar no objeto errado.

Torne os controles dentro de grupos mais fáceis de diferenciar usando mais do que o espaçamento vertical recomendado entre controles. Por exemplo, botões de opção com 19 pixels de altura são menores que o tamanho mínimo recomendado de 23 pixels. Quando você tiver espaço vertical disponível, poderá obter aproximadamente o mesmo efeito que o dimensionamento recomendado adicionando mais 4 pixels de espaçamento aos 7 pixels padrão.

Correto:

Melhor:

No melhor exemplo, o espaçamento extra entre os botões de opção facilita a diferenciação.

Pode haver situações em que o espaçamento extra seria desejável ao usar o toque, mas não ao usar o mouse ou o teclado. Nesses casos, use apenas um design mais espaçoso quando uma ação for iniciada usando o toque.

Escolha um layout que coloque os controles perto de onde eles provavelmente serão usados. Mantenha as interações de tarefa dentro de uma pequena área sempre que possível e localize os controles perto de onde eles provavelmente serão usados. Evite movimentos de mão de longa distância, especialmente para tarefas comuns e para arrastar.

Considere que o local do ponteiro atual é o mais próximo que um destino pode ser, tornando trivial adquirir. Assim, os menus de contexto aproveitam ao máximo a lei de Fitts, assim como as minibarras de ferramentas usadas pelo Microsoft Office.

Evite colocar pequenos controles perto da borda do aplicativo ou da exibição. Pequenos destinos próximos a bordas podem ser difíceis de tocar (as molduras de exibição podem interferir nos gestos de borda). Para garantir que os controles sejam fáceis de direcionar quando uma janela é maximizada, torne-os pelo menos 23 x 23 pixels (13 x 13 DLUs) ou coloque-os longe da borda da janela.

Use o espaçamento recomendado. O espaçamento recomendado é sensível ao toque. No entanto, se seu aplicativo puder se beneficiar de dimensionamento e espaçamento maiores, considere o dimensionamento e o espaçamento recomendados como mínimos quando apropriado.

Forneça pelo menos 5 pixels (3 DLUs) de espaço entre controles interativos. Isso evita confusão quando os usuários tocam fora do destino pretendido.

Considere adicionar mais do que o espaçamento vertical recomendado em grupos de controles, como links de comando, caixas de seleção e botões de opção, bem como entre os grupos. Isso os torna mais fáceis de diferenciar.

Considere adicionar mais do que o espaçamento vertical recomendado dinamicamente quando uma ação é iniciada usando o toque. Isso torna os objetos mais fáceis de diferenciar, mas sem ter mais espaço ao usar um teclado ou mouse. Aumente o espaçamento em um terço de seu tamanho normal ou pelo menos 8 pixels.

Neste exemplo, as Listas de Saltos da barra de tarefas do Windows 7 são mais espaçosas quando exibidas usando o toque.

Interação

O uso dos controles corretos lhe dá apenas parte do caminho para um aplicativo com otimização de toque, você também precisa considerar o modelo de interação geral que esses controles dão suporte. Aqui estão algumas diretrizes para ajudá-lo com isso.

• Tornar o mouse redundante. Não há suporte para o foco na maioria das tecnologias de toque, portanto, os usuários com essas telas sensíveis ao toque não podem executar tarefas que exijam focalização.

• Para aplicativos que precisam de entrada de texto, integre totalmente o recurso de teclado virtual:

  • Fornecendo valores padrão apropriados para entrada do usuário.
  • Fornecendo sugestões de preenchimento automático quando apropriado.

  Observação

  Desenvolvedores: Para obter mais informações sobre como integrar o teclado virtual, consulte ITextInputPanel.

• Permita que os usuários ampliem a interface do usuário de conteúdo se o programa tiver tarefas que exijam edição de texto. Considere reduzir automaticamente para 150% quando o toque for usado.

• Forneça movimento panorâmico e responsivo sempre que apropriado. Redesenhe rapidamente após um movimento panorâmico ou zoom para permanecer responsivo. Fazer isso é necessário para fazer com que a manipulação direta se sinta verdadeiramente direta.

• Durante um movimento panorâmico ou zoom, verifique se os pontos de contato permanecem sob o dedo durante todo o gesto. Caso contrário, o movimento panorâmico ou zoom é difícil de controlar.

• Como os gestos são memorizados, atribua-lhes significados consistentes entre aplicativos. Não dê significados diferentes a gestos com semântica fixa. Em vez disso, use um gesto específico do aplicativo apropriado.

Perdão

A manipulação direta torna o toque natural, expressivo, eficiente e envolvente. No entanto, quando há manipulação direta, pode haver manipulação acidental e, portanto, a necessidade de perdão.

O perdão é a capacidade de reverter ou corrigir facilmente uma ação indesejada. Você faz uma experiência de toque perdoando fornecendo desfazer, fornecendo bons comentários visuais, tendo uma separação física clara entre comandos usados com frequência e comandos destrutivos e permitindo que os usuários corrijam erros facilmente. Associado ao perdão está impedindo que ações indesejadas ocorram em primeiro lugar, o que você pode fazer usando controles restritos e confirmações para ações ou comandos arriscados que têm consequências não intencionais.

• Forneça um comando Desfazer. É melhor fornecer uma maneira simples de desfazer todos os comandos, mas seu aplicativo pode ter alguns comandos cujo efeito não pode ser desfeito.

• Sempre que prático, forneça bons comentários sobre o dedo para baixo, mas não execute ações até o dedo para cima. Isso permite que os usuários corrijam erros antes que eles os façam.

• Sempre que prático, permita que os usuários corrijam erros facilmente. Se uma ação entrar em vigor no dedo para cima, permita que os usuários corrijam erros deslizando enquanto o dedo ainda está para baixo.

• Sempre que prático, indique que uma manipulação direta não pode ser executada resistindo ao movimento. Permitir que o movimento aconteça, mas fazer com que o objeto se instale novamente quando liberado para indicar claramente que a ação foi reconhecida, mas não pode ser feita.

• Tenha uma separação física clara entre comandos usados com frequência e comandos destrutivos. Caso contrário, os usuários poderão tocar em comandos destrutivos acidentalmente. Um comando é considerado destrutivo se seu efeito é generalizado e não pode ser facilmente desfeito ou o efeito não é imediatamente perceptível.

• Confirme comandos para ações ou comandos arriscados que têm consequências não intencionais. Use uma caixa de diálogo de confirmação para essa finalidade.

• Considere confirmar outras ações que os usuários tendem a fazer acidentalmente ao usar o toque e que passam despercebidas ou são difíceis de desfazer. Normalmente, elas são chamadas de confirmações de rotina e são desencorajadas com base na suposição de que os usuários geralmente não emitem esses comandos por acidente com um mouse ou teclado. Para evitar confirmações desnecessárias, apresente essas confirmações somente se o comando tiver sido iniciado usando o toque.

  Confirmações de rotina são aceitáveis para interações que os usuários geralmente usam acidentalmente o toque.

  Desenvolvedores: você pode distinguir entre eventos de mouse e eventos de toque usando a API INPUT_MESSAGE_SOURCE.