Swipen

Swipen ist eine kurze gerichtete Wischbewegung mit einem Finger, die eine Aktion auslöst. Beim Scrollen verschiebt dieselbe Bewegung nur den sichtbaren Ausschnitt über den Inhalt; beim Swipen wird sie als Befehl ausgewertet und hat ein Ergebnis, das über das Ende der Bewegung hinaus bestehen bleibt. Das nächste Bild einer Galerie oder ein weggewischtes Panel: Solche Zustandswechsel sind die Aufgabe des Swipe.

Swipen

Kurze gerichtete Wischbewegung mit einem Finger, die eine Aktion auslöst, statt den Bildausschnitt zu verschieben.
Beispiel: „In der Galerie kommt beim Swipen nach links das nächste Bild, und darunter liegen zwei Pfeiltasten.“

Auch: Wischen, Swipe Gesture. Vom Ziehen unterscheidet ihn die Geschwindigkeit: Beim Ziehen folgt das Element dem Finger, beim Swipen genügt ein kurzer Stoß.

Gegenbegriff: Scrollen bewegt den Ausschnitt und endet dort, wo der Finger ihn hinterlässt. Swipen löst einen Wechsel aus, dessen Ziel schon feststeht, bevor der Finger abhebt.

Woran du die beiden auseinanderhältst

Zwei Fragen genügen. Bleibt der Inhalt derselbe und ändert sich nur der Ausschnitt? Dann ist es Scrollen. Rastet die Bewegung auf einen Zustand ein, der nach dem Loslassen bestehen bleibt? Dann ist es ein Swipe. Dazu kommt ein technischer Unterschied: Das Scrollen liefert der Browser von sich aus, den Swipe muss ein Skript bauen.

Die Verwechslung hat praktische Folgen. Ein Karussell, das auf Swipe-Ereignisse hört, fühlt sich zäh an, wenn das Skript erst nach dem Abheben des Fingers reagiert. Ein gescrollter Container folgt dem Finger dagegen ohne Verzögerung.

Die haltbarste Umsetzung ist oft gar kein Swipe

Viele Karussells, die sich wie ein Swipe anfühlen, sind technisch ein waagerecht gescrollter Container mit CSS Scroll Snap. Die Einträge liegen in einer Reihe, und eine Rasterung lässt den Container auf jedem Eintrag einrasten. Der Browser übernimmt damit Trägheit, Rasterung und die Bedienung per Tastatur und Trackpad.

Wir bevorzugen diese Bauweise, weil sie ohne eigene Gestenerkennung auskommt und auf dem Desktop von allein mitfunktioniert. Echte Swipe-Auswertung bleibt den Fällen vorbehalten, in denen die Bewegung etwas verändert, etwa beim Wegwischen eines Bottom Sheets.

Was ein Swipe voraussetzt

Er muss sichtbar sein. Ein Inhalt, der sich wischen lässt, zeigt das durch einen angeschnittenen nächsten Eintrag am Rand oder durch Punkte, die die Anzahl der Schritte angeben. Ohne diesen Hinweis bleibt der zweite Teil des Inhalts unentdeckt.

Und er braucht eine Alternative. Erfolgskriterium 2.5.1 Pointer Gestures der WCAG (Stufe A) zählt jede pfadbasierte Geste dazu, also jede, bei der Richtung und Verlauf zählen. Zwei Pfeiltasten neben der Galerie erfüllen das. Dazu kommt die Rücksicht auf die Systemgesten: Ein Swipe-Griff direkt am linken Displayrand konkurriert unter iOS mit dem Zurück-Wischen und verliert.

Wie ein Swipe technisch entsteht

Aus drei Ereignissen und einer Rechnung. Das Skript merkt sich beim Aufsetzen des Fingers die Position, verfolgt die Bewegung und entscheidet beim Abheben, ob Strecke und Geschwindigkeit für einen Swipe reichen. Bewährt haben sich rund 50 Pixel Mindeststrecke und ein Verhältnis, das waagerechte von senkrechten Bewegungen trennt.

let start = null;

element.addEventListener('pointerdown', e => {
  start = { x: e.clientX, y: e.clientY, zeit: e.timeStamp };
});

element.addEventListener('pointerup', e => {
  if (!start) return;
  const dx = e.clientX - start.x;
  const dy = e.clientY - start.y;
  const dauer = e.timeStamp - start.zeit;

  // Waagerecht, weit genug und zügig: das ist ein Swipe.
  if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy) && dauer < 500) {
    dx < 0 ? naechstesBild() : vorigesBild();
  }
  start = null;
});

Die Ereignisse heißen Pointer-Events und decken Finger, Stift und Maus in einem ab; die älteren Touch-Events braucht man dafür nicht mehr. Wo es nur um ein Blättern geht, kommt man sogar ganz ohne Skript aus: Ein waagerecht scrollender Behälter mit scroll-snap-type: x mandatory rastet von selbst auf dem nächsten Element ein und fühlt sich flüssiger an als jede nachgebaute Lösung.

Warum jeder Swipe eine zweite Bedienung braucht

Weil er sonst für einen Teil der Nutzer nicht erreichbar ist. Die Web Content Accessibility Guidelines verlangen in Erfolgskriterium 2.5.1 auf der niedrigsten Stufe, dass jede Funktion, die eine Bahnbewegung oder mehrere Finger voraussetzt, auch mit einem einfachen Tippen bedienbar ist. Ausgenommen ist nur, was von der Bewegung selbst abhängt, etwa eine Unterschrift.

Praktisch heißt das: Neben die Galerie gehören Pfeiltasten, neben das wegwischbare Element ein Knopf. Das kostet wenig Platz und macht die Funktion zugleich entdeckbar, denn eine Wischgeste sieht man einer Seite nicht an.

Wo Swipen in der Praxis scheitert

An drei Stellen. Am Rand des Bildschirms, wo die Betriebssysteme eigene Gesten belegen: Ein Wisch von links ist auf dem Telefon der Weg zurück, und wer dort eine eigene Bewegung erwartet, bekommt sie nicht. An der Entdeckbarkeit, weil nichts auf die Möglichkeit hinweist; ein angeschnittenes nächstes Element am Rand hilft mehr als jeder Hinweistext. Und an der Genauigkeit, wenn die Trefferfläche zu klein ist oder zwei wischbare Bereiche ineinanderliegen.

Dazu kommt der Dauerläufer unter den Fehlern: ein Skript, das die Standardbewegung des Browsers unterdrückt, um den eigenen Swipe sauber zu bekommen. Danach lässt sich die Seite an dieser Stelle nicht mehr scrollen, und auf dem Telefon merkt das niemand, der am Rechner entwickelt.

Was swipen bedeutet

Swipen heißt, mit dem Finger über einen Touchscreen zu wischen, um weiterzublättern oder etwas auszuwählen. Das Wort kommt vom englischen to swipe, das der Duden mit wischen übersetzt. Gebeugt wird es deutsch: du swipst, sie swipte, wir haben geswipt; der Duden lässt auch geswiped gelten.

Im Englischen ist das Wort älter als der Touchscreen. Das Cambridge Dictionary führt zuerst den seitlichen Schlag und umgangssprachlich das Mitgehenlassen. Erst danach kommen die beiden Bewegungen, die heute jeder kennt: die Karte mit Magnetstreifen, die man durch ein Lesegerät zieht, und der Finger, der über das Display eines Telefons oder Tablets streicht.

Welche Wischgesten das Telefon beim Swipen schon belegt

Bevor eine Website eigene Wischgesten einführt, hat das Betriebssystem die wichtigsten Richtungen schon vergeben. Die Tabelle folgt den Hilfeseiten von Apple und Google; die Zeile Zurück beim iPhone stammt aus Apples Human Interface Guidelines.

Aktion	iPhone mit Face ID	Android mit Bedienung über Gesten
Startbildschirm	vom unteren Rand nach oben streichen	vom unteren Rand nach oben wischen
Offene Apps zeigen	vom unteren Rand nach oben, in der Mitte kurz stoppen	vom unteren Rand nach oben, halten, loslassen
Zwischen Apps wechseln	vom unteren Rand nach oben, dann nach rechts oder links	ganz unten von links nach rechts
Zurück	in vielen Apps vom Rand des Fensters aus	vom linken oder rechten Displayrand nach innen

Für eine Website bleiben damit die waagerechten Bewegungen in der Bildschirmmitte. Was am unteren Rand oder an den Seitenrändern beginnt, gehört dem System, und Apple rät in denselben Richtlinien davon ab, eigene Gesten zu definieren, die mit den Systemgesten kollidieren.

Wo Swipen und Scrollen ineinander übergehen

Bei Apple und Google verschwimmt die Grenze zwischen Swipen und Scrollen. Apple führt in seinen Richtlinien unter Swipe drei Aufgaben: Aktionen und Bedienelemente zeigen, Ansichten schließen und scrollen. Auf Deutsch heißt die Bewegung bei Apple streichen, und in der Mac-Hilfe steht: Streiche mit zwei Fingern nach oben oder unten, um zu scrollen.

Google macht die Grenze an der Position fest. Auf einem Android-Telefon mit Gestensteuerung ist dieselbe Bewegung von der Displaymitte aus ein waagerechtes Scrollen und vom äußersten Rand aus der Befehl Zurück. Ob eine Wischbewegung ein Swipe ist, entscheidet also das Programm, das sie empfängt, und bei deiner Website ist das dein Skript.

Am Mac kommt noch ein Fall dazu: Zwei Finger nach links oder rechts blättern auf dem Trackpad zur vorigen oder nächsten Seite. Eine Galerie, die auf waagerechte Bewegungen hört, teilt sich die Richtung dort mit dem Zurück des Browsers.

Warum der Swipe auf dem Telefon abbricht

Ohne Vorgabe übernimmt der Browser das Verschieben und Zoomen auf dem Touchscreen selbst. Sobald er eine Geste übernimmt, schickt er dem Skript laut MDN ein pointercancel, und das erwartete pointerup bleibt aus. Die Swipe-Erkennung aus dem Beispiel weiter oben läuft dann nie zu Ende. Mit der CSS-Eigenschaft touch-action legst du fest, welche Bewegungen beim Browser bleiben.

/* das Element, auf dem das Skript den Swipe auswertet:
   senkrecht scrollt der Browser, waagerecht entscheidet das Skript */
.swipe-flaeche {
  touch-action: pan-y;
}

Dazu gehört im Skript ein Abbruchzweig, der den Startpunkt verwirft, falls der Browser die Geste doch übernimmt: element.addEventListener('pointercancel', () => start = null); Die Eigenschaft touch-action ist laut MDN seit September 2019 in allen großen Browsern verfügbar.

Eine Galerie zum Swipen ohne Skript bauen

Mit einem waagerecht scrollenden Behälter und Scroll Snap. Jedes Bild nimmt 85 Prozent der Breite ein, damit das nächste am Rand hereinschaut und zeigt, dass es weitergeht; das Einrasten übernimmt der Browser. scroll-snap-type gibt es laut MDN seit April 2022 in allen großen Browsern.

.galerie {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.galerie > * {
  flex: 0 0 85%;            /* das nächste Bild schaut am Rand herein */
  scroll-snap-align: start;
}

Die Pfeiltasten daneben bleiben trotzdem Pflicht, wie oben beschrieben. Sie brauchen nur ein paar Zeilen Skript, das den Behälter um eine Bildbreite weiterscrollt.

Das Swipen am Rechner testen

Öffne in Chrome die Entwicklerwerkzeuge und klick oben auf „Gerätesymbolleiste ein-/ausblenden“. Mit der Einstellung für Mobilgeräte löst die Seite Touch-Ereignisse aus, und der Mauszeiger wird zum Kreis. Für einen ersten Test reicht das; die Dokumentation rät selbst, im Zweifel ein echtes Telefon zu nehmen.

Auf dem Android-Telefon vom Swipen auf Tasten umstellen

Öffne die Einstellungen und tippe auf einem Pixel auf „System“ > „Navigationsmodus“, auf anderen Geräten auf „System“ > „Touchgesten & Bewegungen“ > „Navigationsmodus“. Dort wählst du „Bedienung über 3 Buttons“, und statt der Wischgesten stehen unten wieder Schaltflächen für Zurück, Startbildschirm und die zuletzt verwendeten Apps.

Wer nur mit dem Wischen vom Rand Mühe hat, etwa wegen einer dicken Hülle, kann stattdessen die Empfindlichkeit für den linken und rechten Rand erhöhen. Google weist darauf hin, dass dann Gesten einzelner Apps am Displayrand leiden können.

Witziges und Kurioses rund ums Swipen

Im Duden ist Swipen eine Sache der Partnersuche. Das Wörterbuch kennt das Verb in genau einer Bedeutung: in Dating-Apps auf dem Touchscreen durch Wischen nach rechts oder links aus- oder abwählen. Sein Beispielsatz lautet „sie swipt, bis sie ein Match hat“. Galerie, Bottom Sheet und weggewischte Mitteilung kommen dort nicht vor.

Die bekannteste Wischgeste ist älter als das Gerät, mit dem sie berühmt wurde. Apple reichte das US-Patent 7.657.849 für das Entsperren eines Geräts per Geste auf einem Entsperrbild am 23. Dezember 2005 ein, gut ein Jahr bevor es am 9. Januar 2007 das iPhone vorstellte. Erteilt wurde das Patent am 2. Februar 2010, und um seine Patentfamilie wurde danach vor Gericht gestritten.