Scorrere nelle app mobili — tipi di gesti e implementazione

Cos'è lo scorrimento nelle interfacce mobili

Scorrere (swipe) è un gesto in cui l'utente fa scorrere il dito sullo schermo in una direzione specifica, avviando un'azione. A differenza del tocco (tocco breve), lo scorrimento implica movimento e contatto con lo schermo per tutta la durata del gesto.

La storia dello scorrimento è iniziata con il primo iPhone nel 2007 — il gesto “slide to unlock” è diventato il marchio di fabbrica delle interfacce mobili. Oggi, lo scorrimento è utilizzato in migliaia di applicazioni per la navigazione, la gestione dei contenuti e l'organizzazione delle informazioni.

Secondo UX Planet (2025), le applicazioni con controllo gestuale (incluso lo scorrimento) mostrano un coinvolgimento degli utenti superiore del 18%. Lo scorrimento è percepito come un'azione più naturale rispetto alla pressione di un pulsante, poiché imita il movimento fisico degli oggetti.

Parametri di riconoscimento dello scorrimento

I parametri principali che determinano se un gesto è uno scorrimento sono: distanza minima (di solito 30–50 pixel), deviazione massima da una linea retta (non più di 15–20 gradi) e durata massima del contatto (fino a 500 ms). Se il dito rimane sullo schermo più a lungo, il gesto viene classificato come trascinamento o pressione prolungata.

Tipi di scorrimento per direzione

Per direzione del movimento, gli scorrimenti si dividono in quattro tipi principali: sinistra, destra, su e giù. Ogni tipo ha il proprio scopo e contesto d'uso.

Gli scorrimenti orizzontali (sinistra/destra) sono più spesso utilizzati per gestire singoli elementi — eliminazione, archiviazione, sfogliatura. Gli scorrimenti verticali (su/giù) — per navigare tra schermate e aggiornare i contenuti. Secondo le Material Design Guidelines (2024), lo scorrimento orizzontale è più comodo per i destrimani: muovere il pollice a sinistra è più naturale con la mano destra.

Scorrimenti multi-dito

Gli scorrimenti con due e tre dita vengono utilizzati per azioni avanzate. Con due dita — passaggio tra desktop su iPad, annullamento (scorrimento con tre dita). Con tre dita — screenshot su alcuni dispositivi. Tuttavia, i gesti multi-dito sono meno intuitivi e richiedono apprendimento da parte dell'utente.

Implementazione dello scorrimento su iOS

Su iOS, la gestione dei gesti si basa su UIGestureRecognizer — una classe astratta che analizza una sequenza di eventi tattili e determina se corrispondono a un gesto specifico.

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("Scorrere a sinistra")
    }
}

UISwipeGestureRecognizer supporta la configurazione della direzione (direction) e del numero di dita (numberOfTouchesRequired). Per impostazione predefinita, sono richiesti un dito e la direzione destra. Per riconoscere altre direzioni, è necessario specificare esplicitamente la direzione: .left, .up, .down.

Un'API di livello superiore — UICollectionViewLayout con supporto per azioni di scorrimento. Da iOS 11, le tabelle e le collezioni supportano azioni di scorrimento integrate tramite UISwipeActionsConfiguration, consentendo di aggiungere pulsanti di eliminazione o archiviazione senza gestione manuale dei gesti.

Implementazione dello scorrimento su Android

Su Android, la gestione dello scorrimento è costruita tramite GestureDetector — una classe che analizza MotionEvents e chiama i metodi di callback corrispondenti.

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("Scorrere a destra")
                }
                return true
            }
        })
    }
}

Il metodo onFling in GestureDetector viene chiamato quando l'utente scorre rapidamente il dito sullo schermo. Riceve le coordinate iniziali e finali (e1, e2) e la velocità del movimento (velocityX, velocityY). Per determinare la direzione, viene confrontata la differenza delle coordinate sull'asse X o Y.

La libreria AndroidX fornisce un'API più comoda: ViewCompat.setSwipeRefreshLayout per pull-to-refresh, RecyclerView con ItemTouchHelper per azioni di scorrimento negli elenchi. ItemTouchHelper consente di aggiungere funzionalità di scorrimento con feedback visivo — icona, colore di sfondo e animazione.

Scorrimento nelle applicazioni web

Nello sviluppo web, per gestire gli scorrimenti vengono utilizzati gli eventi Touch Events API (touchstart, touchmove, touchend) e librerie wrapper come 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 ? "Scorrere a destra" : "Scorrere a sinistra");
    }
});

Touch Events API — un modo nativo per gestire i gesti nel browser. L'evento touchstart registra le coordinate iniziali, touchmove traccia il movimento, touchend determina il risultato. Il valore di soglia (threshold) filtra i tocchi accidentali.

Secondo Can I Use (2026), Touch Events API è supportato dal 98% dei browser. Per scenari gestuali complessi (scorrimenti multipli, riconoscimento della direzione), si consiglia di utilizzare la libreria Hammer.js, che astrae la gestione di basso livello e fornisce un'API chiara.

Pattern UX con scorrimento

I pattern UX di successo con lo scorrimento si sono formati nel corso degli anni di evoluzione delle interfacce mobili. Il loro utilizzo garantisce che l'utente capisca come funziona il gesto senza ulteriore apprendimento.

Il pattern “Swipe to Delete” è il più comune. Scorrere verso sinistra su un elemento dell'elenco rivela un pulsante di eliminazione. Standardizzato su iOS (SwipeActionsConfiguration) e Android (ItemTouchHelper). Gli utenti si aspettano che scorrere a sinistra elimini o archivi un elemento.

Il pattern “Swipe to Go Back” — scorrere dal bordo sinistro dello schermo per tornare alla schermata precedente. È diventato uno standard su iOS dopo iPhone X. Su Android, una navigazione simile funziona tramite il gesto di sistema. È importante non entrare in conflitto con questo gesto di sistema nelle proprie applicazioni.

Il pattern “Pull to Refresh” — scorrere verso il basso per aggiornare i contenuti. Inventato da Loren Brichter per Tweetie (2008), ora utilizzato in milioni di applicazioni. Implementato nei componenti standard di entrambe le piattaforme.

• Feedback — l'elemento dovrebbe muoversi con il dito, mostrando il risultato prima del completamento dello scorrimento
• Conflitti di gesti — evitate di supportare contemporaneamente scorrimento orizzontale e scorrimento verticale sullo stesso elemento
• Scopribilità — le prime azioni di scorrimento dovrebbero essere accompagnate da un suggerimento visivo
• Annullamento — l'utente dovrebbe poter annullare lo scorrimento riportando il dito nella posizione originale