UX de deslizar hacia la acción: hacer que los gestos ocultos sean detectables y seguros
Cómo diseñar acciones de deslizamiento en listas: significantes, umbrales, confirmaciones de deslizamiento completo, deshacer, accesibilidad y por qué deslizar nunca debería ser la única forma.
Idea clave
Las acciones de deslizar son un atajo rápido para acciones frecuentes de listas como archivar o eliminar, pero están ocultas, por lo que nunca deben ser la única forma de hacer algo. Úselos para acciones esperadas, muestre un umbral claro a medida que el elemento se mueve, permita que un deslizamiento parcial se revele y se confirme un deslizamiento completo, y ofrezca deshacer para acciones destructivas.
Los problemas de usabilidad
Nielsen Norman Group encontró problemas recurrentes con las acciones de deslizar para revelar: la falta de significantes hace que no quede claro dónde funciona el deslizamiento, las acciones no estándar detrás de deslizar sorprenden a las personas que esperan eliminar o archivar, ocultar muchas acciones detrás de deslizar hace que sean difíciles de descubrir, y deslizar puede ser ambiguo cuando el mismo gesto también navega entre secciones.
Cómo deben comportarse las acciones de deslizamiento
Material Design describe el patrón común en Android: los elementos de la lista pueden revelar botones al deslizar el dedo, y la acción principal es la opción final alineada al final, que un deslizamiento completo activa directamente.
- Mantenga el dedo para ver las acciones frecuentes y esperadas: archivar, eliminar, marcar como leído.
- Muestre la acción y su color a medida que se mueve el elemento y cámbielo visiblemente en el umbral de confirmación.
- Haga retroceder el artículo si se suelta antes del umbral.
- Ofrezca deshacer o solicite confirmación para acciones destructivas.
- No mezcle acciones de deslizamiento horizontal con navegación de deslizamiento horizontal en la misma pantalla.
Nunca la única manera
Debido a que deslizar el dedo es invisible, coloque las mismas acciones en un menú visible, en un menú de pulsación prolongada o en una pantalla de detalles. Esto también cubre la accesibilidad: los usuarios de lectores de pantalla y las personas que no pueden realizar gestos precisos necesitan una ruta sin gestos, y las plataformas proporcionan acciones de accesibilidad exactamente para este propósito.
El movimiento hace que deslizar el dedo parezca confiable
El objeto debe seguir el dedo exactamente y, al soltarlo, un resorte que transporta la velocidad del dedo hace que el compromiso o el retroceso se sientan físicos. Un breve toque háptico en el umbral, donde la plataforma lo sostiene, confirma la acción antes de que el dedo se levante.
Principios clave para recordar
- El deslizamiento está oculto: proporciona siempre una alternativa visible
- Úselo para acciones frecuentes y esperadas
- Revelaciones de deslizamiento parcial, confirmaciones de deslizamiento completo, regreso del lanzamiento anticipado
- Deshacer o confirmar acciones destructivas
- Evite gestos horizontales conflictivos en una pantalla
Preguntas frecuentes
Fuentes
- Using Swipe to Trigger Contextual Actions — Nielsen Norman Group
- Lists guidelines — Material Design 3