Veegbeweging in mobiele apps — soorten gebaren en implementatie

Wat is een veegbeweging in mobiele interfaces

Veeg (swipe) is een gebaar waarbij de gebruiker zijn vinger in een bepaalde richting over het scherm beweegt om een actie te starten. In tegenstelling tot tikken (korte aanraking), omvat vegen beweging en contact met het scherm gedurende het hele gebaar.

De geschiedenis van vegen begon met de eerste iPhone in 2007 — het ontgrendelingsgebaar „slide to unlock” werd het kenmerk van mobiele interfaces. Tegenwoordig wordt vegen in duizenden apps gebruikt voor navigatie, contentbeheer en informatie-organisatie.

Volgens UX Planet (2025) laten apps met gebarenbediening (inclusief vegen) 18% hogere gebruikersbetrokkenheid zien. Vegen wordt als een natuurlijkere actie beschouwd vergeleken met het indrukken van een knop, omdat het fysieke verplaatsing van objecten nabootst.

Parameters voor veegherkenning

Belangrijkste parameters die bepalen of een gebaar een veeg is: minimale afstand (meestal 30–50 pixels), maximale afwijking van een rechte lijn (niet meer dan 15–20 graden) en maximale contactduur (tot 500 ms). Als de vinger langer op het scherm blijft, wordt het gebaar geclassificeerd als slepen (drag) of lang indrukken (long press).

Soorten vegen per richting

Per bewegingsrichting worden vegen onderverdeeld in vier hoofdtypen: links, rechts, omhoog en omlaag. Elk type heeft zijn eigen doel en gebruikscontext.

Horizontaal vegen (links/rechts) wordt meestal gebruikt voor het beheren van afzonderlijke elementen — verwijderen, archiveren, bladeren. Verticaal vegen (omhoog/omlaag) — voor navigatie tussen schermen en het vernieuwen van content. Volgens Material Design Guidelines (2024) is horizontaal vegen handiger voor rechtshandigen: beweging naar links met de duim is natuurlijker op de rechterhand.

Meervoudig vegen

Vegen met twee en drie vingers worden gebruikt voor geavanceerde acties. Met twee vingers — schakelen tussen werkplekken op iPad, actie ongedaan maken (three-finger swipe). Met drie vingers — screenshot op sommige apparaten. Meervoudige gebaren zijn echter minder intuïtief en vereisen gebruikersinstructie.

Veegimplementatie op iOS

Op iOS is gebarenverwerking gebaseerd op UIGestureRecognizer — een abstracte klasse die de reeks aanraakgebeurtenissen analyseert en bepaalt of deze overeenkomt met een specifiek gebaar.

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("Veeg naar links")
    }
}

UISwipeGestureRecognizer ondersteunt configuratie van richting (direction) en aantal vingers (numberOfTouchesRequired). Standaard is één vinger en richting rechts vereist. Om andere richtingen te bepalen, moet u expliciet direction: .left, .up, .down opgeven.

API op hoger niveau — UICollectionViewLayout met ondersteuning voor veegacties. Vanaf iOS 11 ondersteunen tabellen en collecties ingebouwde veegacties via UISwipeActionsConfiguration, waarmee knoppen voor verwijderen of archiveren kunnen worden toegevoegd zonder handmatige gebarenverwerking.

Veegimplementatie op Android

Op Android wordt veegverwerking uitgevoerd via GestureDetector — een klasse die MotionEvents analyseert en de bijbehorende callback-methoden aanroept.

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("Veeg naar rechts")
                }
                return true
            }
        })
    }
}

De methode onFling in GestureDetector wordt aangeroepen wanneer de gebruiker snel met zijn vinger over het scherm veegt. Het ontvangt begin- en eindcoördinaten (e1, e2) en bewegingssnelheid (velocityX, velocityY). Om de richting te bepalen, wordt het verschil in coördinaten op de X- of Y-as vergeleken.

AndroidX-bibliotheek biedt een handigere API: ViewCompat.setSwipeRefreshLayout voor pull-to-refresh, RecyclerView met ItemTouchHelper voor veegacties in lijsten. ItemTouchHelper maakt het mogelijk om veegfunctionaliteit met visuele feedback toe te voegen — pictogram, achtergrondkleur en animatie.

Vegen in webapps

In webontwikkeling worden voor veegverwerking de Touch Events API-gebeurtenissen (touchstart, touchmove, touchend) en hulpbibliotheken zoals Hammer.js of Swiper.js gebruikt.

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 ? "Veeg naar rechts" : "Veeg naar links");
    }
});

Touch Events API — de native manier om gebaren in de browser te verwerken. De gebeurtenis touchstart registreert begincoördinaten, touchmove volgt de beweging, touchend bepaalt het resultaat. De drempelwaarde (threshold) filtert toevallige aanrakingen.

Volgens Can I Use (2026) wordt Touch Events API door 98% van de browsers ondersteund. Voor complexe gebarenscenario’s (meerdere vegen, richtingsherkenning) wordt aanbevolen om de bibliotheek Hammer.js te gebruiken, die low-level verwerking abstraheert en een duidelijke API biedt.

UX-patronen met vegen

Succesvolle UX-patronen met vegen zijn in de loop der jaren van evolutie van mobiele interfaces ontstaan. Het gebruik ervan garandeert dat de gebruiker begrijpt hoe het gebaar werkt zonder extra uitleg.

Het patroon „Swipe to Delete” — de meest voorkomende. Naar links vegen op een lijstelement opent de verwijderknop. Gestandaardiseerd op iOS (SwipeActionsConfiguration) en Android (ItemTouchHelper). Gebruikers verwachten dat naar links vegen het element verwijdert of archiveert.

Het patroon „Swipe to Go Back” — vegen vanaf de linkerrand van het scherm om terug te keren naar het vorige scherm. Werd standaard in iOS na de iPhone X. Op Android werkt vergelijkbare navigatie via een systeemgebaar. Het is belangrijk om niet te conflicteren met dit systeemgebaar in uw eigen apps.

Het patroon „Pull to Refresh” — omlaag vegen om content te vernieuwen. Uitgevonden door Loren Brichter voor Tweetie (2008), nu gebruikt in miljoenen apps. Geïmplementeerd in standaardcomponenten van beide platforms.

• Feedback — het element moet met de vinger meebewegen en het resultaat tonen voordat de veeg is voltooid
• Gebarenconflicten — vermijd gelijktijdige ondersteuning van horizontaal vegen en scrollen op hetzelfde element
• Ontdekkbaarheid — eerste veegacties moeten vergezeld gaan van een visuele aanwijzing
• Annuleren — de gebruiker moet de mogelijkheid hebben om het vegen te annuleren door de vinger terug te brengen naar de beginpositie