Ein Floating Action Button (kurz FAB) ist ein kreis- oder pillenförmiger Button, der beim Scrollen an einer festen Position über dem Seiteninhalt schwebt. Er ist ein kleines UI-Element, aber eines der am leichtesten falsch eingesetzten: extrem nützlich, wenn er eine einzige prioritäre Aktion sichert – störend, wenn er mit Ihrer mobilen Tab Bar um Aufmerksamkeit konkurriert.
- Ein FAB funktioniert am besten, wenn er exakt EINE hochwertige Aktion schützt, nicht mehrere.
- 44×44px ist die ergonomische Mindestgröße für Touch-Ziele – kleiner führt zu Fehltipps.
- Der häufigste Fehler: Ein FAB verdeckt den Kaufen-Button oder kollidiert mit Cookie-Bannern und Chat-Widgets.
Wozu ein FAB tatsächlich dient
Das Konzept stammt aus Googles Material Design, wo der schwebende Aktionsbutton die wichtigste Einzelaktion auf einem Bildschirm repräsentiert – meist unten rechts platziert und unabhängig vom Scrollen stets erreichbar.
Im E-Commerce ist diese „eine wichtige Aktion“ meist:
- Schneller Warenkorb / Express-Kaufabschluss: Damit Besucher nicht mühsam nach oben scrollen müssen.
- Live-Chat / Kunden-Support: Schneller Kontakt mit einem Fingertipp, ohne die Hauptnavigation zu überfrachten.
- Zeitlich befristete Angebote: Höhere visuelle Priorität als ein Standard-Menüpunkt.
- Nach-oben-Scrollen (Back-to-top): Bei sehr langen Kategorie- oder Magazinseiten.
Gemeinsamkeit: Ein FAB ist für Aktionen gedacht, die überall sofort greifbar sein sollen, ohne dauerhaft einen Menüplatz im Header oder der Tab Bar zu blockieren.
Die goldene Regel: Nur eine Hauptaktion
Der häufigste Fehler besteht darin, mehrere schwebende Buttons gleichzeitig einzublenden – eine Chat-Blase links, ein Warenkorb-Button rechts. Wenn alles schwebt, verliert jedes Element an Bedeutung.
Wenn Ihr Shop sowohl Support als auch einen Warenkorb-Shortcut benötigt, integrieren Sie den Warenkorb in die mobile Tab Bar und nutzen Sie den FAB exklusiv für den Kundendienst.
Ergonomie: Größe und Platzierung
- Mindestgröße: WCAG 2.5.5 verlangt mindestens 44×44 CSS-Pixel. Sparen Sie nicht an der Größe, um Frustration bei Daumenbedienung zu vermeiden.
- Platzierung: Unten rechts liegt im natürlichen Daumenbereich von Rechtshändern. Achten Sie auf mindestens 16–20px Abstand zur Tab Bar.
- Keine Verdeckung: Auf der Produktseite darf ein FAB keinesfalls den „In den Warenkorb“-Button oder Variantenwähler verdecken.
Schnellkontakt mit dem Floating Action Button für Shopify
Verbinden Sie WhatsApp, Telefon, E-Mail und Live-Chat in einem dezenten schwebenden Button, der den Checkout niemals blockiert.