Interações com ponteiro

Os usuários de computadores dependem de dispositivos apontadores, como um mouse ou touchpad, para interagir com seu app. Para uma experiência ideal em computadores, ofereça suporte a eventos de ponteiro principais, como passar o cursor, rolar, clicar com o botão principal e clicar com o botão secundário.

Principais pontos ao adaptar para entradas de computador

1. Adicione estados e interações ao passar o cursor no sistema atual.
2. Considere a interação com o clique direito para aumentar a eficiência.
3. Os destinos precisam ter um dimensionamento mais preciso.

Clique principal

O clique principal, ou na maioria dos casos o clique com o botão esquerdo, é a principal interação do cursor em que um usuário de computador confia. A regra geral é que um usuário precisa conseguir concluir todas as jornadas principais com apenas cliques primários. Não ocultar funcionalidades dos cliques principais não é apenas bom para a capacidade de descoberta, mas também essencial para tecnologias assistivas, como o Acesso com Interruptor.

Clique secundário

Enquanto as interações por toque dependem de um toque longo, os usuários de computadores esperam que os menus de contexto apareçam com um clique secundário, como um clique com o botão direito do mouse ou um toque com dois dedos em um touchpad. Para uma experiência ideal em computadores, configure o app para acionar menus de contexto com um clique secundário, em vez de exigir um clique longo.

Clique com o botão direito do mouse em um card para mostrar um menu de contexto com mais opções.

Passar cursor

Além da mudança no ícone do cursor, a interatividade também pode ser indicada pela mudança no estado visual de um elemento ao passar o cursor sobre ele. Para orientações de design, saiba mais em estados.

Ao passar o cursor, também é possível revelar informações ou ações complementares, como dicas sobre ferramentas ou ações de lista aninhadas em menus de contexto ou de estouro.

Aqui, o recurso de passar o cursor é usado para mostrar mais informações em uma dica e mais interações.

Arrastar e soltar

Em telas touchscreen, arrastar exige um toque longo porque um deslizar com um dedo é reservado para rolagem. O clique e arrasto deve ser instantâneo com dispositivos apontadores que têm métodos de rolagem dedicados, como uma roda de rolagem ou um deslizar de dois dedos em um touchpad.

Cards arrastáveis como uma interação alternativa.

Seleção

Simplifique as interações de seleção para a experiência de computador fornecendo um destino de clique dedicado.

Em vez de tocar e pressionar para revelar as opções de seleção, o computador permite caixas de seleção ao passar o cursor.

Tamanho desejado

Ao dimensionar elementos da interface para interações com o cursor, evite botões muito grandes ou que tenham áreas de toque intrínsecas além dos limites visuais do elemento.

check_circle

O que fazer

Defina uma largura máxima para botões e destinos ao usar um dispositivo apontador.

cancel

O que não fazer

Permitir que os botões se expandam para largura total ou mantenham as áreas de toque intrínsecas.

As áreas de toque do ponteiro podem ser menores do que a área de toque padrão de 48 x 48 dp para interações alternativas do cursor, como um arquivo ao passar o cursor que aparece principalmente depois que o item é selecionado.

Para saber mais sobre o design de entradas, consulte Entradas do Material Design. Saiba como implementar com suporte a mouse e touchpad.