Wischen in mobilen Apps — Gestentypen und Implementierung

Was ist Wischen in mobilen Oberflächen

Wischen (Swipe) ist eine Geste, bei der der Benutzer den Finger in eine bestimmte Richtung über den Bildschirm bewegt und damit eine Aktion auslöst. Im Gegensatz zum Tippen (kurze Berührung) beinhaltet das Wischen eine Bewegung und Kontakt mit dem Bildschirm während der gesamten Geste.

Die Geschichte des Wischens begann mit dem ersten iPhone im Jahr 2007 — die „Slide to unlock“-Geste wurde zum Markenzeichen mobiler Oberflächen. Heute wird das Wischen in Tausenden von Anwendungen zur Navigation, Inhaltsverwaltung und Informationsorganisation eingesetzt.

Laut UX Planet (2025) zeigen Anwendungen mit Gestensteuerung (einschließlich Wischen) eine um 18% höhere Benutzerbindung. Wischen wird als natürlichere Aktion im Vergleich zum Drücken einer Taste wahrgenommen, da es die physische Bewegung von Objekten nachahmt.

Erkennungsparameter des Wischens

Die Hauptparameter, die bestimmen, ob eine Geste ein Wischen ist: Mindestabstand (normalerweise 30–50 Pixel), maximale Abweichung von einer geraden Linie (nicht mehr als 15–20 Grad) und maximale Kontaktdauer (bis zu 500 ms). Wenn der Finger länger auf dem Bildschirm verweilt, wird die Geste als Ziehen oder langes Drücken klassifiziert.

Arten des Wischens nach Richtung

Nach der Bewegungsrichtung werden Wischgesten in vier Haupttypen unterteilt: links, rechts, oben und unten. Jeder Typ hat seinen eigenen Zweck und Nutzungskontext.

Horizontales Wischen (links/rechts) wird am häufigsten zur Verwaltung einzelner Elemente verwendet — Löschen, Archivieren, Durchblättern. Vertikales Wischen (oben/unten) — zur Navigation zwischen Bildschirmen und zum Aktualisieren von Inhalten. Laut den Material Design Guidelines (2024) ist horizontales Wischen für Rechtshänder bequemer: Den Daumen auf der rechten Hand nach links zu bewegen ist natürlicher.

Mehrfinger-Wischen

Wischen mit zwei und drei Fingern wird für fortgeschrittene Aktionen verwendet. Zwei Finger — Wechseln zwischen Desktops auf dem iPad, Rückgängig machen (Drei-Finger-Wischen). Drei Finger — Screenshot auf einigen Geräten. Allerdings sind Mehrfingergesten weniger intuitiv und erfordern eine Einarbeitung des Benutzers.

Implementierung des Wischens auf iOS

Auf iOS basiert die Gestenverarbeitung auf UIGestureRecognizer — einer abstrakten Klasse, die eine Sequenz von Touch-Ereignissen analysiert und bestimmt, ob sie einer bestimmten Geste entspricht.

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("Nach links wischen")
    }
}

UISwipeGestureRecognizer unterstützt die Konfiguration der Richtung (direction) und der Anzahl der Finger (numberOfTouchesRequired). Standardmäßig werden ein Finger und die Richtung rechts benötigt. Um andere Richtungen zu erkennen, muss die Richtung explizit angegeben werden: .left, .up, .down.

Eine höherwertige API — UICollectionViewLayout mit Unterstützung für Wischaktionen. Seit iOS 11 unterstützen Tabellen und Sammlungen integrierte Wischaktionen über UISwipeActionsConfiguration, wodurch Lösch- oder Archivierungsbuttons ohne manuelle Gestenverarbeitung hinzugefügt werden können.

Implementierung des Wischens auf Android

Auf Android wird die Wischverarbeitung über GestureDetector aufgebaut — eine Klasse, die MotionEvents analysiert und die entsprechenden Callback-Methoden aufruft.

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("Nach rechts wischen")
                }
                return true
            }
        })
    }
}

Die onFling-Methode in GestureDetector wird aufgerufen, wenn der Benutzer schnell mit dem Finger über den Bildschirm wischt. Sie erhält die Anfangs- und Endkoordinaten (e1, e2) und die Bewegungsgeschwindigkeit (velocityX, velocityY). Zur Bestimmung der Richtung wird die Koordinatendifferenz entlang der X- oder Y-Achse verglichen.

Die AndroidX-Bibliothek bietet eine bequemere API: ViewCompat.setSwipeRefreshLayout für Pull-to-Refresh, RecyclerView mit ItemTouchHelper für Wischaktionen in Listen. ItemTouchHelper ermöglicht das Hinzufügen von Wischfunktionen mit visuellem Feedback — Symbol, Hintergrundfarbe und Animation.

Wischen in Webanwendungen

In der Webentwicklung werden für die Verarbeitung von Wischgesten die Touch Events API (touchstart, touchmove, touchend) und Wrapper-Bibliotheken wie Hammer.js oder Swiper.js verwendet.

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

Touch Events API — eine native Methode zur Verarbeitung von Gesten im Browser. Das touchstart-Ereignis zeichnet die Anfangskoordinaten auf, touchmove verfolgt die Bewegung, touchend bestimmt das Ergebnis. Der Schwellenwert (threshold) filtert versehentliche Berührungen heraus.

Laut Can I Use (2026) wird die Touch Events API von 98% der Browser unterstützt. Für komplexe Gestenszenarien (mehrere Wischbewegungen, Richtungserkennung) wird die Verwendung der Bibliothek Hammer.js empfohlen, die die Low-Level-Verarbeitung abstrahiert und eine klare API bereitstellt.

UX-Muster mit Wischen

Erfolgreiche UX-Muster mit Wischen haben sich im Laufe der Jahre der Entwicklung mobiler Oberflächen herausgebildet. Ihre Verwendung stellt sicher, dass der Benutzer versteht, wie die Geste funktioniert, ohne zusätzliche Einarbeitung.

Das „Swipe to Delete“-Muster ist das häufigste. Durch Wischen nach links über ein Listenelement wird eine Löschtaste angezeigt. Standardisiert auf iOS (SwipeActionsConfiguration) und Android (ItemTouchHelper). Benutzer erwarten, dass Wischen nach links ein Element löscht oder archiviert.

Das „Swipe to Go Back“-Muster — Wischen vom linken Bildschirmrand, um zum vorherigen Bildschirm zurückzukehren. Wurde nach dem iPhone X zum Standard auf iOS. Auf Android funktioniert eine ähnliche Navigation über die Systemgeste. Es ist wichtig, mit dieser Systemgeste in eigenen Anwendungen nicht in Konflikt zu geraten.

Das „Pull to Refresh“-Muster — Wischen nach unten, um Inhalte zu aktualisieren. Erfunden von Loren Brichter für Tweetie (2008), jetzt in Millionen von Anwendungen verwendet. Implementiert in den Standardkomponenten beider Plattformen.

• Feedback — das Element sollte sich mit dem Finger bewegen und das Ergebnis vor Abschluss des Wischens anzeigen
• Gestenkonflikte — vermeiden Sie die gleichzeitige Unterstützung von horizontalem Wischen und Scrollen auf demselben Element
• Auffindbarkeit — die ersten Wischaktionen sollten von einem visuellen Hinweis begleitet werden
• Abbrechen — der Benutzer sollte in der Lage sein, das Wischen abzubrechen, indem er den Finger in die Ausgangsposition zurückführt