Gestos y UX en dispositivos táctiles

1) Por qué los gestos y cuándo son apropiados

• Predecible (cumple con las expectativas de la plataforma).
• Detectables (el usuario adivina que el gesto está disponible).
• Respaldados por retroalimentación (visual/audio/táctil).
• Son fiables con toques erróneos y diferentes agarres del dispositivo.

Principios: primero los elementos explícitos de la IU → luego los gestos-pistas → luego los gestos ocultos avanzados. Acciones críticas - duplicar siempre con botones explícitos.

2) Taxonomía de gestos

Tap/Double-tap/Long-press - selección/dopado. menús/acciones avanzadas.
Swipe (montañas ./wert.) - navegación, eliminación/archivo, divulgación de acciones.
Arrastrar y soltar: ordenar, transferir, cambiar la jerarquía.
Pinch/Spread (zoom) - escala (galerías, mapas, gráficos).
Rotate - raramente, adecuado en editores/vistas.
Pull-to-refresh/Release-to-action - Actualización/acción secundaria.
Edge-swipe - navegación del sistema (atrás/menú), cuidado en la web.
Multi-touch - gestos con 2-3 dedos para escenarios avanzados.
System gestures - capturas de pantalla, PiP, sistema «Back» (Android) - tenga en cuenta los conflictos.

3) Ergonomía y zonas del pulgar

Thumb-zones: la zona de alcance es la mitad inferior de la pantalla; CTA clave, filtros de chip y pestañas - en la parte inferior.
Hit-target: mínimo 44 × 44 pt/48 × 48 dp. Agregue hit-slop (zona de contacto invisible) para elementos pequeños.
Sangrías desde los bordes: reducen el falso edge-swipe; Las interacciones críticas no están muy cerca.
Orientación: retrato - predeterminado; paisaje - optimizar para dos pulgares (especialmente en juegos/videos).

4) Detectabilidad y aprendizaje

Affordance: alusiones a un gesto (tarjeta semi-visible en el lateral, «pluma» en la parte inferior para la hoja).
Micro-onboarding: pistas desechables («Saltar para borrar»), no obsesivas, con «Entendido».
Gesto de prueba: animación de demostración en la primera aparición del patrón.
Repetibilidad: los gestos deben funcionar de la misma manera en todos los lugares con contenidos similares.

5) Retroalimentación: visual, táctil, sonora

Visual: sombra, paralaje, adherencia a guías, indicador de progreso en pull-to-refresh.
Táctil (haptics): pulso ligero al agarrar el arrastre, más «pesado» - con drop/éxito.
Audio (moderado): clics/clics cortos en juegos o eventos tangibles (ganancia/error).
Estados de cancelación: «zona roja» visual en deslizamiento destructivo, pista de vibro antes de la eliminación.

6) Conflictos gestuales y prioridades

Jerarquía de reconocimiento: scroll interno> tarjeta deslizante> sistema edge-back (en la web - viceversa). Configurar gesture-arena/prioridades.
Deslizamiento horizontal vertical vs: bloquee un eje después de 10-15 px de movimiento.
Edge-swipe vs gestos propios: agregue una sangría interna o un «lápiz» duro para no interceptar el sistema.
Global back-gesture (Android/iOS): no romper la navegación esperada - acciones importantes duplicar con el botón «Back».

7) Patrones por escenarios

7. 1 Listas y tarjetas

Swipe-actions: short slip es una pista de acción (iconos), larga es una acción instantánea.
Undo-paradigma: después de un gesto destructivo, muestre el snackbar «Deshacer».
Drag-reorder: arrastrar por el «lápiz»; fije el eje vertical.

7. 2 Mapas, galerías, gráficos

Pinch-zoom + doble tap para escalar.
Inertia & bounds: bordes elásticos, inercia suave.
Tap-hold para «lupa «/detalles de punto en el gráfico.

7. 3 Navegación y costuras

Bottom-sheet: gesto de «sudar» de la pluma, estado collapsed/partial/full; swipe-down para cerrar.
Tabs/Chips: desliza horizontalmente entre pestañas con un indicador de progreso.

7. 4 scripts de juego y «rápidos»

Juego de una mano: grandes zonas de apuestas/acciones en el borde inferior.
Gestos dobles: doble tap como «repetir apuesta» (confirmación haptic).
Umbral en destructivo: «fijar» el dedo en 300 ms o pasar la «zona roja» para ejecutar.

8) Accesibilidad (A11y)

Todos los gestos se duplican con botones o elementos del menú.
VoiceOver/TalkBack: descripciones correctas y orden de enfoque.
Accessibility Motor: alternativas de long-press (icono de «⋮»), zonas de toque ampliadas.
Contraste y escala: los gestos no deben ser la única forma de llegar a la acción.

9) Performance y fiabilidad

INP (Interaction to Next Paint) ≤ 200 ms para gestos clave.
Toque latencia: objetivo <50-100 ms antes de la primera respuesta (captura visual/retroiluminación).
60 FPS: suavidad para drag/scroll; apague las sombras pesadas y el blur cuando se mueva.
Hit-testing: evite los solapamientos (z-index/overflow) - las trampas son «apacibles».
Pruebas de agarre: diestro/izquierdo, pulgar/dedo pequeño, de pie/en el transporte.

10) Web vs Native

Web/PWA: oyentes pasivos ('passive: true') para skroll, 'touch-action' para bloquear ejes, evita interceptar gestos del sistema sin necesidad.
iOS/Android native: use reconocimientos de sistema (UIGestureRecognizer/Android GestureDetector), haptics de tiempo completo, predictivo «Back» (Android 14 +).
Webview: puentes y zonas seguras, cierre predictivo de costuras - dentro de la web, sin romper el sistema «Back».

11) Multi-táctil y gestos avanzados

Dos dedos: panorámica con zoom bloqueado; en las tarjetas, un gesto de «dos dedos hacia abajo» para una capa extra.
Tres dedos: sólo para power-users; Siempre hagamos una alternativa.
Combinaciones: long-press + drag para seleccionar un rango/movimiento de grupo.

12) Validación, telemetría, métricas

События: `gesture_start`, `gesture_commit`, `gesture_cancel`, `latency_ms`, `distance_px`, `overscroll`, `misfire` (ложный жест), `undo_used`.
KPI: Tasa de Éxito, Tasa de Error, Tasa Undo, INP, Tiempo de Acción, Drop-off cuando hay un conflicto de gestos.

13) Localización y diferencias culturales

Idiomas RTL: espeje los gestos e iconos horizontales.
Simbología: «deslizar a la izquierda = eliminar» no es universal - confirmar en el onboarding.
Patrones táctiles: utilice perfiles del sistema, ya son familiares para el usuario.

14) Seguridad y errores

Gestos destructivos: sólo con undo/confirmación.
Edge-swipes no deben cerrar accidentalmente procesos críticos (pago/CUS).
Protección contra temblores: umbral de movimiento (5-10 px) antes de iniciar el gesto.
Desactivar gestos en estados de bloqueo (loader de pago, modal de confirmación).

15) Patrones para mesas táctiles/tabletas

Scripts a dos manos: separación de zonas de control.
Modo multijugador: los gestos no chocan, la prioridad es el tiempo de toque.
Grandes hit-targets: 56-64 dp; guías visuales para operaciones de arrastre.

16) Antipattern

Acciones críticas ocultas sólo con un gesto (sin botón).
Gestos en conflicto con el sistema (edge-back, notification shade).
Long-press sin «scrum» visual y sonido/vibro.
Deslizamiento horizontal dentro de un scroll vertical sin un lock axial.
Sombras «pesadas »/blur con drag → trag y caída de FPS.
Gestos inconsistentes en diferentes partes de la aplicación.

17) Lista de verificación de implementación (paso a paso)

1. Mapa de gestos: dónde y cuáles son con alternativas para A11y.
2. Prioridades de reconocimiento: control axial, edge-safe zone, gesture-arena.
3. Comentarios: trampa visual, haptics-perfiles, animaciones ≤ 200 ms.
4. Rendimiento: INP/60 FPS, perfilado con drag/scroll.
5. Onboarding: pistas y gestos de prueba con la capacidad de apagar.
6. Telemetría: éxito/misfire/undo, toques heatmap.
7. Matriz de prueba: dispositivos, densidades, zurdo/derecho, casos de red mala.
8. Documentación: hyde por gestos en el sistema de diseño, ejemplos y anti-casos.

18) Resultado

Un gesto competente es rápido, comprensible y confiable. Acorta el camino hacia el objetivo sin romper las expectativas del sistema y garantizando la accesibilidad para todos. Diseñe los gestos como parte de un sistema de diseño: patrones uniformes, prioridades claras, retroalimentación rica y estrictos controles de rendimiento - entonces el UX táctil será igualmente agradable en cualquier dispositivo y en cualquier escenario.