Product Craft Bible
Swipe actions en listas
Inicio Patrones de interacción Swipe actions en listas
Patrones de interacción

Swipe actions en listas

8 reglas WCAG 2.5.1 Pointer Gestures (Nivel A) · W3C WAI Understanding 2.5.1Apple HIG: Lists and tables (leading/trailing) · UISwipeActionsConfigurationSwiftUI swipeActions(edge:allowsFullSwipe:) · NN/g: Contextual swipeNN/g: Contextual swipe · Material Design 3: Lists (undo snackbar)
34

Swipe actions en listas

8 reglas
354

El swipe es un atajo, nunca el único acceso a una acción

Toda funcionalidad que dependa de un gesto de deslizamiento debe tener una alternativa accesible con un solo punto de contacto: un tap, un botón visible o el teclado. El swipe es un gesto de trayectoria (path-based) y su exclusividad viola WCAG 2.5.1 (Nivel A): usuarios con temblor, Parkinson, paralisis cerebral o control ocular no pueden ejecutar deslizamientos precisos. Exponer los mismos controles como acciones contextuales garantiza que nadie quede excluido. El swipe acelera al experto; la alternativa visible incluye a todos.

WCAG 2.5.1 Pointer Gestures (Nivel A) · W3C WAI Understanding 2.5.1
Preferir
LM
Laura Mendez
Confirmación de cita
Swipe para ir rápido, o el menú visible para todos.
Evitar
LM
Laura Mendez
Confirmación de cita
Eliminar
Solo se borra deslizando. Sin botón ni teclado.
355

Revela la acción con color, icono y etiqueta, nunca solo color

Cuando el usuario inicia el swipe, el fondo revelado debe comunicar la acción con tres capas simultaneas: color de fondo distintivo, icono reconocible y etiqueta de texto. Depender solo del color excluye a usuarios con daltonismo y eleva la carga cognitiva del resto, que deben adivinar entre rojo-eliminar y rojo-archivar. Apple HIG reserva el borde trailing para acciones destructivas o de cierre como Eliminar o Archivar, senaladas con rojo y papelera. El texto desambigua lo que el color por si solo no puede.

Apple HIG: Lists and tables (leading/trailing) · UISwipeActionsConfiguration
Preferir
Eliminar
JR
Javier Ruiz
Adjunto pendiente
Color + icono + etiqueta: la acción es inequivoca.
Evitar
JR
Javier Ruiz
Adjunto pendiente
Solo rojo: archivar o eliminar? Imposible saberlo.
356

Swipe corto revela opciones; swipe completo ejecuta la primaria

Hay dos umbrales: el deslizamiento parcial revela botones que requieren un tap explicito, y el deslizamiento completo atraviesa el ancho del elemento y ejecuta directo la acción primaria. El full swipe debe reservarse a la acción más frecuente y esperada, y nunca a una irreversible: Apple lo expone como allowsFullSwipe precisamente para controlarlo. NN/g advierte que los gestos fáciles arriesgan borrados no intencionados sin salvaguardas. Atar el full swipe a una acción segura (archivar) evita perdidas accidentales.

SwiftUI swipeActions(edge:allowsFullSwipe:) · NN/g: Contextual swipe
Preferir
Archivar
Eliminar
CT
Carmen Torres
Factura adjunta
Swipe corto revela; el full swipe ejecuta Archivar (seguro).
Evitar
Eliminado
CT
Carmen Torres
Factura adjunta
Full swipe borra directo: querias archivar, perdiste datos.
357

Toda acción destructiva necesita confirmación o undo inmediato

Eliminar, archivar permanentemente o cualquier acción irreversible disparada por swipe debe ofrecer protección ante el error: un dialogo de confirmación previo, o una notificación con acción Deshacer prominente que persista varios segundos. NN/g lo pide de forma explicita: pedir confirmación antes de acciones destructivas, o dar opciones de undo prominentes. El undo tipo snackbar es preferible porque no interrumpe el flujo; la confirmación modal sirve cuando no hay forma de revertir. Ejecutar sin salvaguarda expone perdidas accidentales.

NN/g: Contextual swipe · Material Design 3: Lists (undo snackbar)
Preferir
Mensaje eliminado
Snackbar con Deshacer prominente durante ~5 s.
Evitar
El elemento desaparecio al instante. Sin deshacer.
Borrado irreversible sin red de seguridad.
358

Respeta la convención de dirección: trailing destruye, leading marca

iOS y Android asignan el borde trailing (derecha a izquierda) a acciones destructivas o de cierre como Eliminar o Archivar, y el borde leading (izquierda a derecha) a acciones positivas o de estado como Marcar como leido, Fijar o Responder. Apple HIG lo establece así de forma explicita. NN/g advierte: no uses el mismo gesto de swipe para significar cosas distintas en áreas distintas de la misma pantalla. La consistencia con el sistema reduce la carga cognitiva porque el usuario transfiere lo aprendido en otras apps.

Apple HIG: Lists and tables · NN/g: Contextual swipe (avoid swipe ambiguity)
Preferir
Leading Marcar leido
Trailing Eliminar
NS
Igual en toda la app
Izquierda marca, derecha elimina
Trailing destruye, leading marca: consistente siempre.
Evitar
Eliminar
NS
Bandeja: trailing archiva
Enviados: trailing elimina
Mismo gesto, distinto significado por carpeta. Errores.
359

Da feedback visual y haptico al cruzar el umbral de activación

Cuando el deslizamiento alcanza el umbral que separa revelar acciones de ejecutar el full swipe, el sistema debe dar una señal inequivoca: cambio visual en el elemento (expansión del área, intensificación del color, transformación del icono) y retroalimentación haptica. Sin ese feedback el usuario no sabe si cruzo el punto de no retorno y actua con incertidumbre. Apple expone UIImpactFeedbackGenerator y UISelectionFeedbackGenerator para estos momentos. El umbral debe ser visualmente notorio antes de soltar el dedo.

Apple HIG: Lists and tables · UISwipeActionsConfiguration / Feedback generators
Preferir
DV
Diana Vega
Icono crece + haptica
Al 80% el icono crece, el rojo intensifica y vibra.
Evitar
DV
Diana Vega
Sin señal de umbral
Nada cambia al cruzar el punto: incertidumbre total.
360

El gesto oculto necesita señales de descubribilidad proactivas

Los swipe actions son gestos invisibles: ningun control los anuncia. NN/g documenta que la mayoría de usuarios no los descubre, o lo hace solo por accidente, y que deslizar sigue siendo menos descubrible que casi cualquier otra forma de manipular contenido móvil, por lo que deben incluirse pistas visibles. El costo de esconder es real: NN/g documenta un aumento del 21% en dificultad percibida con navegación oculta vs visible. Mitiga con un peek animado en el primer uso, un onboarding breve o un ligero desplazamiento del item que sugiera que es deslizable.

NN/g: Contextual swipe · NN/g: Hamburger menús (21% más difícil, oculto vs visible)
Preferir
Eliminar
PG
Pablo Gil
Peek animado en primer uso
Micro-swipe automático + grip: anuncia que es deslizable.
Evitar
PG
Pablo Gil
Acciones ocultas, cero pista
Fila plana sin señal: los nuevos nunca descubren el swipe.
361

Expon cada acción de swipe al teclado y al lector de pantalla

Quien navega con VoiceOver (iOS) o TalkBack (Android) no puede ejecutar swipes de forma confiable, y nunca debe quedar sin acceso a borrar o archivar. Cada acción disponible por swipe debe exponerse como acción de accesibilidad en el nodo de la fila, y en navegación por teclado (iPad con Magic Keyboard, Android con teclado físico) debe alcanzarse vía menú contextual o atajos documentados. Esto satisface a la vez WCAG 2.5.1 y WCAG 2.1.1, ambos Nivel A: la operación por un solo puntero sin trayectoria y por teclado no son opcionales.

WCAG 2.5.1 Pointer Gestures (A) · WCAG 2.1.1 Keyboard (A) · accessibilityAction
Preferir
SR
Sofia Ramos
Acciones expuestas a a11y
VoiceOver: "Acciones disponibles: Eliminar, Archivar"
Ctrl D Eliminar Ctrl A Archivar
Acciones de a11y + atajos: WCAG 2.5.1 y 2.1.1 (A).
Evitar
SR
Sofia Ramos
Solo borrable con swipe
VoiceOver no anuncia acciones: sin forma de eliminar.
El lector de pantalla queda bloqueado de la acción.