Wie navigieren enge Oberflächen ohne Pfeiltasten?

Kartenstapel statt Pfeiltasten: Wie enge Oberflächen ohne Blättern navigieren

Markus Seyfferth

Autor Dr. Web

17. September 2026

2 Min. Lesezeit

Auf wenigen Zentimetern in der Seitenleiste des Vercel-Dashboards ersetzt ein Kartenstapel die klassischen Pfeiltasten zum Blättern. Die nächste Karte lugt hinter der aktiven hervor, ein Klick schiebt den Stapel weiter. Rauno Freiberg, Design Engineer bei Vercel, beschreibt das Muster in seinen Feldnotizen als Antwort auf ein Problem, das jede enge Oberfläche kennt.^[1]

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Das Problem sitzt im Detail. Pfeil-Buttons brauchen eigenen Platz, wirken lose neben dem Inhalt und ziehen Aufmerksamkeit vom eigentlichen Zweck ab. In Dashboards, Benachrichtigungsleisten und mobilen Ansichten fehlt genau dieser Platz.

Das Wichtigste in Kürze

Vercel ersetzt Pfeiltasten in der Dashboard-Seitenleiste durch einen interaktiven Kartenstapel; ein Klick auf die hervorlugende Karte blättert weiter.
Die Technik dahinter: nur die abtretende Karte blendet aus und wandert danach ans Stapelende.
Neu ist das Prinzip nicht, Apples gruppierte Mitteilungen zeigen dieselbe progressive Offenlegung millionenfach.
Der Haken für den DACH-Raum: ein Peek allein bei Mouseover verfehlt Tastatur, Touch und die Vorgaben des BFSG.

Was macht der Kartenstapel anders?

Kartenstapel mit deutschem Text: — Die Karte funktioniert als Schaltfläche, der Kartentitel erscheint beim Mouseover, ein Klick bringt sie nach vorn

Die Karte selbst wird zur Schaltfläche. Rauno Freiberg baut keinen separaten Pfeil, sondern lässt die folgende Karte hinter der aktiven hervorschauen.^[1] Beim Mouseover erscheint der Kartentitel, ein Klick holt die Karte nach vorn. Eine großzügige, unsichtbare Fläche rund um den Stapel verringert die Zielgenauigkeit, die ein Nutzer treffen muss.

Der Übergang ist der eigentliche Kniff. Karten sauber zu überblenden ist schwieriger, als der ruhige Effekt vermuten lässt. Freibergs Lösung: nur die abtretende Karte blendet aus und springt nach der Animation ans Ende der Warteschlange. So entfällt das ruckelige Vertauschen der Ebenen, das ein simpler Wechsel der Stapelordnung erzeugt. Solche Details trennen ein solides von einem ausgereiften Interface, ähnlich wie die optische statt mathematische Ausrichtung einzelner Elemente.

Woher kommt das Muster?

Progressive Offenlegung heißt das Grundprinzip dahinter, ein Klassiker der Interface-Gestaltung: Sekundäre Inhalte bleiben verborgen, bis ein Nutzer sie anfordert. Apples gruppierte Mitteilungen auf dem iPhone führen dasselbe Prinzip millionenfach vor, ein Tippen klappt den Stapel auf. Das Muster zieht sich durch die Epochen des UX-Designs bis heute.

Anzeige und Bedienung verschmelzen beim Kartenstapel zu einem einzigen Objekt, wo früher ein Karussell mit Pfeilen durch eine Reihe von Elementen blätterte. Vercel treibt diese Verdichtung seit Längerem voran, etwa beim dichteren Umbau des Dashboards.

Kartenstapel statt Pfeile: Was er spart und was er verlangt

Drei Marken entscheiden, ob das Muster im DACH-Raum tragfähig bleibt.

28.06.2025

Das Barrierefreiheitsstärkungsgesetz gilt und verpflichtet viele B2C-Angebote auf barrierefreie Bedienung.

1.4.13

WCAG-Kriterium (Stufe AA): bei Hover eingeblendete Inhalte müssen auch per Tastaturfokus erreichbar sein.

2.1.1

WCAG-Kriterium (Stufe A): jede Funktion bleibt allein mit der Tastatur bedienbar.

Pfeiltasten

Brauchen eigenen Platz neben dem Inhalt.
Wirken lose und ziehen den Blick ab.
Funktionieren mit Maus, Tastatur und Touch.

Kartenstapel

Die Karte ist zugleich Anzeige und Schaltfläche.
Spart Fläche auf engen Oberflächen.
Barrierefrei nur mit Fokus- und Touch-Alternative.

Ein Bedienelement, das nur auf den Mauszeiger reagiert, ist kein cleveres Design, sondern eine halbe Umsetzung. Auf engem Raum überzeugt der Kartenstapel erst, sobald er auch mit Tastatur und Finger funktioniert.
— Michael Dobler, Herausgeber Dr. Web

Was bedeutet das für barrierefreie Websites?

Ein Peek allein bei Mouseover greift zu kurz. Der Kartenstapel setzt auf Mouseover und Klick, doch bei Tastatur und Touch fehlt der Hover-Zustand ganz. Die WCAG verlangen in Kriterium 1.4.13, dass bei Hover eingeblendete Inhalte auch per Tastaturfokus erreichbar und wieder schließbar bleiben.^[2]

Ohne Tastatur steht der Stapel still. Das grundlegende Tastatur-Kriterium der WCAG (2.1.1, Stufe A) fordert, dass sich jede Funktion allein mit der Tastatur bedienen lässt. Ein Stapel, der nur auf den Mausklick hört, sperrt Tastaturnutzer aus. Jede Regel für den Hover-Zustand gehört deshalb zusätzlich auf den Tastaturfokus gespiegelt.

Für deutsche Anbieter zählt das doppelt. Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz viele B2C-Angebote auf den Standard EN 301 549, der auf die WCAG 2.1 der Stufe AA verweist. Anbieter, die den Kartenstapel übernehmen, spiegeln den Mouseover auf den Tastaturfokus, bieten auf Touch eine sichtbare Schaltfläche und respektieren reduzierte Bewegung.

Das Muster taugt, wo Platz knapp ist. In viel besuchten Oberflächen wie Dashboards oder Benachrichtigungsleisten spart der Kartenstapel Fläche und wirkt aufgeräumter als ein Pfeilpaar. Vor dem Einbau lohnt der Test mit Tastatur und Screenreader, sonst verliert die elegante Karte genau die Nutzer, die auf klare Bedienung angewiesen sind.