Deslizar en aplicaciones móviles — tipos de gestos e implementación

Qué es el deslizamiento en interfaces móviles

Deslizar (swipe) es un gesto en el que el usuario pasa el dedo por la pantalla en una dirección determinada, iniciando una acción. A diferencia del toque (pulsación corta), el deslizamiento implica movimiento y contacto con la pantalla durante todo el gesto.

La historia del deslizamiento comenzó con el primer iPhone en 2007: el gesto “slide to unlock” se convirtió en la seña de identidad de las interfaces móviles. Hoy en día, el deslizamiento se usa en miles de aplicaciones para navegación, gestión de contenido y organización de información.

Según UX Planet (2025), las aplicaciones con control gestual (incluyendo el deslizamiento) muestran una participación de usuarios un 18% mayor. El deslizamiento se percibe como una acción más natural en comparación con pulsar un botón, ya que imita el movimiento físico de los objetos.

Parámetros de reconocimiento del deslizamiento

Los parámetros principales que determinan si un gesto es un deslizamiento son: distancia mínima (normalmente 30–50 píxeles), desviación máxima de una línea recta (no más de 15–20 grados) y duración máxima del contacto (hasta 500 ms). Si el dedo permanece en la pantalla más tiempo, el gesto se clasifica como arrastre o pulsación larga.

Tipos de deslizamiento según la dirección

Según la dirección del movimiento, los deslizamientos se dividen en cuatro tipos principales: izquierda, derecha, arriba y abajo. Cada tipo tiene su propio propósito y contexto de uso.

Los deslizamientos horizontales (izquierda/derecha) se utilizan más a menudo para gestionar elementos individuales: eliminación, archivado, paso de páginas. Los deslizamientos verticales (arriba/abajo) — para navegar entre pantallas y actualizar contenido. Según Material Design Guidelines (2024), el deslizamiento horizontal es más cómodo para los diestros: mover el pulgar hacia la izquierda es más natural en la mano derecha.

Deslizamientos con varios dedos

Los deslizamientos con dos y tres dedos se utilizan para acciones avanzadas. Con dos dedos: cambio entre escritorios en iPad, deshacer (con tres dedos). Con tres dedos: captura de pantalla en algunos dispositivos. Sin embargo, los gestos con varios dedos son menos intuitivos y requieren entrenamiento del usuario.

Implementación del deslizamiento en iOS

En iOS, el manejo de gestos se basa en UIGestureRecognizer, una clase abstracta que analiza la secuencia de eventos táctiles y determina si corresponden a un gesto específico.

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let swipeLeft = UISwipeGestureRecognizer(
            target: self,
            action: #selector(handleSwipe)
        )
        swipeLeft.direction = .left
        view.addGestureRecognizer(swipeLeft)
    }

    @objc func handleSwipe(sender: UISwipeGestureRecognizer) {
        print("Deslizar a la izquierda")
    }
}

UISwipeGestureRecognizer admite la configuración de la dirección (direction) y el número de dedos (numberOfTouchesRequired). Por defecto, se requiere un dedo y la dirección hacia la derecha. Para reconocer otras direcciones, es necesario especificar explícitamente la dirección: .left, .up, .down.

Una API de nivel superior — UICollectionViewLayout con soporte para acciones de deslizamiento. Desde iOS 11, las tablas y colecciones admiten acciones de deslizamiento integradas a través de UISwipeActionsConfiguration, lo que permite añadir botones de eliminación o archivado sin manejo manual de gestos.

Implementación del deslizamiento en Android

En Android, el manejo del deslizamiento se realiza a través de GestureDetector, una clase que analiza MotionEvents y llama a los métodos callback correspondientes.

class SwipeActivity : AppCompatActivity() {
    private val swipeThreshold = 100

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val gestureDetector = GestureDetector(this, object : GestureDetector.SimpleOnGestureListener() {
            override fun onFling(
                e1: MotionEvent, e2: MotionEvent,
                velocityX: Float, velocityY: Float
            ): Boolean {
                val dx = e2.x - e1.x
                if (dx > swipeThreshold) {
                    println("Deslizar a la derecha")
                }
                return true
            }
        })
    }
}

El método onFling en GestureDetector se llama cuando el usuario desliza rápidamente el dedo por la pantalla. Recibe las coordenadas iniciales y finales (e1, e2) y la velocidad del movimiento (velocityX, velocityY). Para determinar la dirección, se compara la diferencia de coordenadas en el eje X o Y.

La biblioteca AndroidX proporciona una API más cómoda: ViewCompat.setSwipeRefreshLayout para pull-to-refresh, RecyclerView con ItemTouchHelper para acciones de deslizamiento en listas. ItemTouchHelper permite añadir funcionalidad de deslizamiento con retroalimentación visual: icono, color de fondo y animación.

Deslizamiento en aplicaciones web

En el desarrollo web, para manejar deslizamientos se utilizan los eventos de Touch Events API (touchstart, touchmove, touchend) y bibliotecas envolventes como Hammer.js o Swiper.js.

let startX = 0;
let startY = 0;
const threshold = 50;

element.addEventListener("touchstart", (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
});

element.addEventListener("touchend", (e) => {
    const dx = e.changedTouches[0].clientX - startX;
    const dy = e.changedTouches[0].clientY - startY;
    if (Math.abs(dx) > threshold) {
        console.log(dx > 0 ? "Deslizar a la derecha" : "Deslizar a la izquierda");
    }
});

Touch Events API es una forma nativa de manejar gestos en el navegador. El evento touchstart registra las coordenadas iniciales, touchmove sigue el movimiento y touchend determina el resultado. El valor umbral (threshold) filtra los toques accidentales.

Según Can I Use (2026), Touch Events API es compatible con el 98% de los navegadores. Para escenarios gestuales complejos (múltiples deslizamientos, reconocimiento de dirección), se recomienda usar la biblioteca Hammer.js, que abstrae el manejo de bajo nivel y proporciona una API clara.

Patrones de UX con deslizamiento

Los patrones de UX exitosos con deslizamiento se han formado a lo largo de años de evolución de las interfaces móviles. Su uso garantiza que el usuario entienda cómo funciona el gesto sin necesidad de aprendizaje adicional.

El patrón “Swipe to Delete” es el más común. Deslizar hacia la izquierda sobre un elemento de la lista revela un botón de eliminación. Estandarizado en iOS (SwipeActionsConfiguration) y Android (ItemTouchHelper). Los usuarios esperan que deslizar hacia la izquierda elimine o archive un elemento.

El patrón “Swipe to Go Back” — deslizar desde el borde izquierdo de la pantalla para volver a la pantalla anterior. Se convirtió en estándar en iOS después del iPhone X. En Android, una navegación similar funciona mediante el gesto del sistema. Es importante no entrar en conflicto con este gesto del sistema en tus propias aplicaciones.

El patrón “Pull to Refresh” — deslizar hacia abajo para actualizar el contenido. Inventado por Loren Brichter para Tweetie (2008), ahora se usa en millones de aplicaciones. Implementado en componentes estándar de ambas plataformas.

• Retroalimentación — el elemento debe moverse con el dedo, mostrando el resultado antes de completar el deslizamiento
• Conflictos de gestos — evita admitir simultáneamente deslizamiento horizontal y desplazamiento en el mismo elemento
• Descubribilidad — las primeras acciones de deslizamiento deben ir acompañadas de una pista visual
• Cancelación — el usuario debe poder cancelar el deslizamiento volviendo el dedo a su posición original