Diretrizes de design do touchpad

Artigo
01/19/2024

Projete seu aplicativo para que os usuários possam interagir com ele por meio de um touchpad. Um touchpad combina a entrada de multi-touch indireta com a entrada de precisão de um dispositivo apontador, como um mouse. Essa combinação torna o touchpad adequado tanto para uma interface do usuário otimizada para toque quanto para os alvos menores de aplicativos de produtividade.

touchpad

As interações por touchpad exigem três coisas:

Um touchpad padrão ou um touchpad de precisão do Windows.

Os touchpads de precisão do Windows são otimizados para dispositivos de aplicativo do Windows. Eles permitem que o sistema lide com certos aspectos da experiência do touchpad nativamente, como rastreamento de dedos e detecção da palma da mão, para uma experiência mais consistente em todos os dispositivos.
O contato direto de um ou mais dedos no touchpad.
Movimento dos contatos de touch (ou falta deles, com base em um limite de tempo).

Os dados de entrada fornecidos pelo sensor de touchpad podem ser:

Interpretados como um gesto físico para manipulação direta de um ou mais elementos da interface do usuário (como movimento panorâmico, rotação, redimensionamento ou movimentação). Por outro lado, interagir com um elemento por meio de sua janela de propriedades ou outra caixa de diálogo é considerado manipulação indireta.
Reconhecido como um método de entrada alternativo, como mouse ou caneta.
Usado para complementar ou modificar aspectos de outros métodos de entrada, como borrar um traço de tinta desenhado com uma caneta.

Os touchpads combinam a entrada de multi-touch indireta com a entrada de precisão de um dispositivo apontador, como um mouse. Essa combinação torna o touchpad adequado tanto para a interface do usuário otimizada para toque quanto para os destinos normalmente menores de aplicativos de produtividade e do ambiente de desktop. Otimize o design do seu aplicativo do Windows para entrada por toque e obtenha suporte ao touchpad por padrão.

Devido à convergência de experiências de interação compatíveis com os touchpads, recomendamos usar o evento PointerEntered para fornecer comandos de interface do usuário no estilo do mouse, além do suporte interno para entrada touch. Por exemplo, use os botões anterior e seguinte para permitir que os usuários percorram páginas de conteúdo, bem como percorram o conteúdo.

Os gestos e as diretrizes discutidos neste tópico podem ajudar a garantir que seu aplicativo ofereça suporte à entrada do touchpad de forma transparente e com código mínimo.

A linguagem do touchpad

Um conjunto conciso de interações por touchpad que são usadas consistentemente em todo o sistema. Otimize seu aplicativo para entrada por toque e mouse e esse idioma faz com que seu aplicativo pareça instantaneamente familiar para seus usuários, aumentando a confiança deles e tornando seu aplicativo mais fácil de aprender e usar.

Os usuários podem definir muito mais gestos e comportamentos de interação no touchpad de precisão do que em um touchpad padrão. Essas duas imagens mostram as diferentes páginas de configurações do touchpad de Configurações > Dispositivos > Mouse e touchpad para um touchpad padrão e um Touchpad de precisão, respectivamente.

standard touchpad settings

^{Padrão\ touchpad\ configurações}

windows precision touchpad settings

^{Windows\ Precisão\ Touchpad\ configurações}

Veja aqui estão alguns exemplos de gestos otimizados para touchpad para executar tarefas comuns.

Termo	Descrição
Tocar com três dedos	Preferência do usuário para pesquisar com a Cortana ou mostrar a Central de Ações.
Deslizar com três dedos	Preferência do usuário para abrir o visão de tarefas da área de trabalho virtual, mostrar Área de Trabalho ou alternar entre aplicativos abertos.
Toque com um único dedo para a ação principal	Use um único dedo para tocar em um elemento e invocar sua ação principal (como iniciar um aplicativo ou executar um comando).
Toque com dois dedos para clicar com o botão direito do mouse	Toque com dois dedos simultaneamente em um elemento para selecioná-lo e exibir comandos contextuais.
Dois dedos deslizam para o movimento panorâmico	Deslizar é usado principalmente para interações panorâmicas, mas também pode ser usado para mover, desenhar ou escrever.
Pinçar e alongar para ampliar	Os gestos de ampliação e pinça são comumente usados para redimensionamento e zoom semântico.
Pressione com um único dedo e deslize para reorganizar	Arraste um elemento.
Pressione com um único dedo e deslize para selecionar o texto	Pressione dentro do texto selecionável e deslize para selecioná-lo. Toque duas vezes para selecionar uma palavra.
Zona do clique esquerdo e direito	Emule a funcionalidade dos botões esquerdo e direito de um dispositivo de mouse.

Hardware

Consulte os recursos do dispositivo do mouse (MouseCapabilities) para identificar quais aspectos da interface do usuário do aplicativo o hardware do touchpad pode acessar diretamente. Recomendamos fornecer a interface do usuário para entrada por toque e mouse.

Para obter mais informações sobre como consultar recursos de dispositivo, consulte Identificar dispositivos de entrada.

Comentários visuais

Quando um cursor do touchpad é detectado (por meio de eventos de movimento ou focalização), mostre a interface do usuário específica do mouse para indicar a funcionalidade exposta pelo elemento. Se o cursor do touchpad não se mover por um determinado período ou se o usuário iniciar uma interação por toque, faça com que a interface do usuário do touchpad desapareça gradualmente. Isso mantém a interface do usuário limpa e organizada.
Não use o cursor para feedback de foco, o feedback fornecido pelo elemento é suficiente (consulte a seção Cursores abaixo).
Não exiba comentários visuais se um elemento não oferecer suporte à interação (como texto estático).
Não use retângulos de foco com interações touchpad. Reserve estes para interações com o teclado.
Exibir feedback visual simultaneamente para todos os elementos que representam o mesmo destino de entrada.

Para obter orientações mais gerais sobre comentários visuais, consulte Diretrizes para comentários visuais.

Cursores

Um conjunto de cursores padrão está disponível para um ponteiro touchpad. Eles são usados para indicar a ação primária de um elemento.

Cada cursor padrão tem uma imagem padrão correspondente associada a ele. O usuário ou um aplicativo pode substituir a imagem padrão associada a qualquer cursor padrão a qualquer momento. Os aplicativos UWP especificam uma imagem de cursor por meio da função PointerCursor.

Se você precisar personalizar o cursor do mouse:

Sempre use o cursor de seta () para elementos clicáveis. Não use o cursor de apontar () para links ou outros elementos interativos. Em vez disso, use efeitos de foco (descritos anteriormente).
Use o cursor de texto () para texto selecionável.
Use o cursor de movimento () quando mover for a ação principal (como arrastar ou cortar). Não use o cursor de movimento para elementos em que a ação principal é a navegação (como blocos Iniciar).
Use os cursores de redimensionamento horizontal, vertical e diagonal (, , , ), quando um objeto for redimensionável.
Use os cursores de mão de preensão (, ) ao deslocar o conteúdo em uma tela fixa (como um mapa).