Gestos e UX em dispositivos sensíveis ao toque

1) Porquê os gestos e quando eles são apropriados

• Previsíveis (em linha com as expectativas de plataforma).
• Detectáveis (o usuário adivinha que o gesto está disponível).
• Apoiados em feedback (visual/áudio/tátil).
• Confiáveis em toques errados e pés diferentes do dispositivo.

Princípios: Primeiro elementos explícitos da UI → depois dicas gestuais → depois gestos ocultos avançados. As ações críticas são sempre duplicadas com botões explícitos.

2) Taxonomia de sinais

Tap/Duplo-tap/Long-press - escolha/complemento. menus/ações avançadas.
Swipe (montanhas) - Navegação, remoção/arquivamento, divulgação de ações.
Drag-and-drop - Triagem, transferência, alteração de hierarquia.
Pinch/Spread (zoom) - zoom (galerias, mapas, gráficos).
Rotate é raro, apropriado em editores/visualizações.
Pull-to-refresh/Release-to-action - Atualização/ação secundária.
Edge-swipe - Navegação de sistema (para trás/menu), cuidado na Web.
Multi-touch - gestos com 2-3 dedos para cenários avançados.
System gestures - capturas de tela, PiP, sistema «Para trás» (Android) - leve em conta os conflitos.

3) Ergonomia e áreas do polegar

Thumb-zonas: Área delicada - metade inferior da tela; CTA chave, filtros de chip e chapas - em baixo.
Hit-target: mínimo 44 x 44 pt/48 x 48 dp. Adicione um hit-slop (zona invisível de adição) para pequenos elementos.
Recuos das bordas: reduz os falsos edge-swipe; interdições críticas não estão perto da borda.
Orientação: retrato - padrão; paisagem - otimizar para dois polegares (especialmente em jogos/vídeo).

4) Detectividade e treinamento

Afordance: indícios de gesto (meio-visível de lado, caneta de baixo para sheet).
Microboarding: Dicas descartáveis («Sugira para remover»), não compulsivas, com «Entenda».
Gesto de teste: animação de demonstração na primeira vez que o pattern aparece.
Repetição: os gestos devem funcionar da mesma forma em todos os locais com conteúdo semelhante.

5) Feedback: visual, tátil, som

Visual: sombra, paralax, colagem de guias, progresso-indicador em pull-to-refresh.
Tátil (haptics): leve impulso na captura de drag, mais «pesado» para o sucesso drop/.
Áudio (moderado): cliques curtos/clicar em jogos ou eventos tangíveis (ganho/erro).
Estados de cancelamento: «zona vermelha» visual com swipe destrutivo, indício vibro antes de ser removido.

6) Conflitos de sinais e prioridades

Hierarquia de reconhecimento: scroll interno> cartão swipe> edge-back do sistema (no Web, contrário). Configure o gesture-arena/prioridades.
Scroll vertical vs swipe horizontal: bloqueie um eixo após 10-15 px movimento.
Edge-swipe vs seus próprios gestos: adicione um recuo interno ou «caneta» para não interceptar o sistema.
Back-gesture global (Android/iOS): Não rompa a navegação prevista - ações importantes dupliquem com o botão «Para trás».

7) Pattern em cenários

7. 1 Listas e cartões

Ações Swipe: curta swipe - Dicas de ação (ícones), longa, ação instantânea.
Paradigma Undo: Depois de um gesto destrutivo, mostre «Cancelar».
Drag-reorder: arrastar por «caneta»; fixe o eixo vertical.

7. 2 mapas, galerias, gráficos

Pinch-zoom + duplo para zoom.
Inertia & bounds: limites elásticos, inércia suave.
Tap-hold para «lupa «/detalhes de ponto no gráfico.

7. 3 Navegação e shits

Bottom-sheet: gesto «puxa» da caneta, estado collapsed/partial/full; swipe-down para encerramento.
Tabs/Chips: Swipe horizontal entre as abas com o indicador de progresso.

7. 4 Cenários de jogos e «rápidos»

One-hand play: grandes áreas de apostas/ações na parte inferior.
Duplos gestos: duplo tap como «repetir a aposta» (confirmação haptic).
Limite no destrutivo: «fixe» o dedo em 300 ms ou passe a «zona vermelha» para executar.

8) Disponibilidade (A11y)

Todos os gestos são duplicados por botões ou itens de menu.
VoiceOver/TalkBack: descrições corretas e ordem de foco.
Motor acessibility: Alternativas de long-press (ícone «⋮»), áreas de toque ampliadas.
Contraste e escala: os gestos não devem ser a única forma de chegar à ação.

9) Performance e confiabilidade

O INP (Interaction to Next Paint) ≤ 200 ms para sinais-chave.
Touch latency: alvo <50-100 ms até a primeira resposta (captura visual/realce).
60 FPS: fluidez para drag/scroll; desliga as sombras pesadas e blur ao mover-se.
Hit-testing: evite sobreposições (z-index/overflow) - armadilhas «delicado».
Testes de hasteamento: direito/canhoto, polegar/dedo pequeno, em pé/no transporte.

10) Web vs Native

Web/PWA: Ouvintes passivos ('passive: true') para scroll, 'touch-action' para bloquear eixos, evite interceptar gestos do sistema sem necessidade.
Use reconhecedores de sistema ( ), haptics de tempo inteiro, «Para trás» (Android 14 +).
Webvew: pontes e áreas seguras, encerramento preditivo de shits - dentro da Web, sem quebrar o sistema para trás.

11) Multi-tac e gestos avançados

Dois dedos: panorâmica com zoom bloqueado; Em mapas, um gesto de dois dedos para baixo para mais camadas.
Três dedos, apenas para power-users; Vamos sempre dar uma alternativa.
Combinações de long-press + drag para selecionar faixa/deslocamento de grupo.

12) Validação, telemetria, métricas

События: `gesture_start`, `gesture_commit`, `gesture_cancel`, `latency_ms`, `distance_px`, `overscroll`, `misfire` (ложный жест), `undo_used`.
KPI: Sucess Rate, Misfire Rate, Undo Rate, INP, Time-to-Action, Drop-off em conflito de gestos.

13) Localização e diferenças culturais

LENGUAS: Espelhe gestos horizontais e ícones.
Símbolo: «mexer para a esquerda = remover» não é universal - confira em linha.
Pattern tátil: Use perfis do sistema e já os conheça.

14) Segurança e erros

Gestos destructivos - apenas com undo/confirmação.
Edge-swips não deve por acaso fechar processos críticos (pagamento/CUS).
Proteção contra tremores: limite de movimento (5-10 px) antes de iniciar o gesto.
Desativar gestos em estados de bloqueio (loador de pagamento, modal de confirmação).

15) Pattern para mesas de toque/tablets

Cenários duplos: separação de áreas de controle.
Modo Multiplayer: Os gestos não são conflitantes, a prioridade é o tempo de toque.
Grandes hit-targets: 56-64 dp; guias visuais para operações de drag.

16) Antipattern

Ações críticas ocultas apenas com um gesto (sem botão).
Gestos em conflito com o sistema (edge-back, notificação shade).
Long-press sem «contração» visual e som/vibro.
Um swipe horizontal dentro de um scroll vertical, sem um eixo.
Sombras «pesadas »/blur com drag → league e queda de FPS.
Gestos incoerentes em diferentes partes do aplicativo.

17) Folha de cheque de implementação (passo a passo)

1. Mapa de sinais: onde e quais com alternativas para A11y.
2. As prioridades de reconhecimento são: lock de axé, edge-safe área, gesture-arena.
3. Feedback: armadilha visual, perfis haptics, animações ≤ 200 ms.
4. Performance: INP/60 FPS, perfilação para drag/scroll.
5. Dicas e gestos de teste que podem ser desligados.
6. Telemetria: sucess/misfire/undo, heatmap toques.
7. Matriz de teste, device, densidade, canhoto/direito, mala de rede ruim.
8. Documentação: hyde por gestos no sistema de design, exemplos e anti-mala.

18) Total

Um gesto correto é rápido, compreensível. Reduz o caminho para o objetivo sem quebrar as expectativas do sistema e garantir a disponibilidade de todos. Projete os gestos como parte de um sistema de design: pattern unificado, prioridades claras, feedback rico e controle rigoroso da performance - então o UX sensorial será igualmente agradável em qualquer dispositivo e em qualquer cenário.