Sticky Bar
Eine Sticky Bar ist ein Banner, das beim Scrollen am oberen oder unteren Bildschirmrand fixiert bleibt und so einen einzelnen Call-to-Action dauerhaft sichtbar hält.
Das Wichtigste in Kürze
- Die Position wird am Viewport berechnet, Scrollen bewegt die Leiste daher nie.
- Der Nutzen wächst mit der Seitenlänge und mit einer spät fallenden Entscheidung.
- Sie kostet dauerhaft Viewport-Fläche, am schwersten auf Smartphone-Bildschirmen.
- Ein Anheften ab einer Scrollschwelle vermeidet das Doppeln des sichtbaren Hero-Buttons.
- In Formularen und im Checkout konkurriert sie mit den Elementen, die sie überdeckt.
Im Detail
Eine Sticky Bar wird am Viewport statt am Dokument ausgerichtet, ihre Koordinaten werden beim Scrollen neu berechnet, und sie hält eine feste Bildschirmkante. Ihre Aufgabe ist, eine Aktion auf jeder Scrolltiefe erreichbar zu halten, wenn die Seite lang genug ist, dass der Hero-Button früh verschwindet. Viele Umsetzungen starten im Fluss und heften sich erst an, sobald der ursprüngliche Call-to-Action aus dem Bild scrollt, was ein Doppeln des sichtbaren Buttons vermeidet.
Der Nutzen wächst mit der Seitenlänge und damit, wie spät die Entscheidung fällt. Auf einer kurzen Seite ist der Hauptbutton nie weit, die Leiste belegt nur Platz. Auf einem langen Leitfaden fängt sie die Absicht im Moment ihres Entstehens ab, statt ein Zurückscrollen zu verlangen. Der Preis ist dauerhafte Viewport-Miete: Auf dem Smartphone können Leiste und Browserleisten ein Fünftel der Lesefläche beanspruchen, und alle zahlen diese Miete für die Minderheit, die klickt.
Üblich ist eine Zeile, eine Aktion, angeheftet ab einer Scrollschwelle und sichtbar bis zum Schließen. Teams dimensionieren sie am kleinsten unterstützten Viewport, achten auf die Safe Area des Geräts, damit sie nicht unter dem Home-Indikator liegt, und prüfen, dass sie nie einen Footer-Link oder den Absende-Button eines Formulars verdeckt. Im Quiz-Funnel ist sie der dauerhafte Einstieg auf Lehrseiten, wo Leser meist mittendrin entscheiden und das Assessment der nächste Schritt ist.
Sie hilft nicht mehr, wo der Leser bereits handelt. Im Checkout, in einem langen Formular oder in einem interaktiven Werkzeug konkurriert eine mitscrollende Leiste mit genau den Bedienelementen, über denen sie liegt, und verdeckt sie auf kleinen Bildschirmen ganz. Gewöhnung nutzt sie zudem schneller ab als eine obere Leiste, weil sie dauerhaft präsent ist. Und keine Beharrlichkeit rettet eine schwache Seite: Die Leiste macht eine Aktion erreichbar, nicht begehrenswert.
Beispiel aus der Praxis
So wird es gemessen
Vergleichen Sie die der Sticky Bar zugeschriebenen Conversions mit denen des Inline-Call-to-Action und betrachten Sie dann die Summe statt einer der Zahlen allein. Steigen die Leisten-Klicks, während die Hero-Klicks um etwa denselben Betrag fallen, hat die Leiste Conversions verschoben statt hinzugefügt. Auch das ist wertvoll, denn es zeigt, an welcher Stelle der Seite Leser tatsächlich entscheiden.
Segmentieren Sie Klicks nach der Scrolltiefe, bei der sie erfolgten. Eine Leiste, die den Großteil ihrer Klicks jenseits der Hälfte einsammelt, erfüllt ihren Zweck; eine, die überwiegend oben konvertiert, hat eine zu frühe Schwelle. Beobachten Sie mobil Verweildauer und Scrolltiefe nach dem Anheften, denn sinkende Lesetiefe ist das übliche Zeichen für Behinderung.
Häufige Fehler
Der häufige Fehler ist, am Desktop zu gestalten und auf Smartphones auszuliefern. Eine untere Sticky Bar landet über dem Home-Indikator, verdeckt das letzte Feld eines Formulars oder überlappt die Browserleiste, und der Leser verliert genau das Element, nach dem er greift. Testen Sie auf der kleinsten unterstützten Höhe bei geöffneter Tastatur und blenden Sie die Leiste aus, sobald ein Eingabefeld den Fokus hat.
Der zweite Fehler ist, die Leiste ab dem ersten Pixel anzuheften, sodass sie einen bereits sichtbaren Hero-Button doppelt und sich abnutzt, bevor sie gebraucht wird. Heften Sie sie stattdessen dort an, wo der ursprüngliche Call-to-Action den Viewport verlässt. Verwandt ist die Gewohnheit, sie mit Überschrift, Zweitlink und Countdown zu beladen, was aus einer leisen Erinnerung eine Anzeige macht, die sofort geschlossen wird.
Häufig gestellte Fragen
Schaden Sticky Bars der mobilen Bedienbarkeit?
Das können sie, wenn sie Inhalte verdecken oder native Browsersteuerungen überlagern und so die nutzbare Fläche verkleinern. Halten Sie sie schmal, testen Sie auf mehreren Geräten und erlauben Sie das Schließen, um Frust zu vermeiden.
Wie viele CTAs sollte eine Sticky Bar haben?
Einen. Eine Sticky Bar wirkt, weil sie eine einzige, wiederholte Aktion sichtbar hält, und zusätzliche Optionen verwässern diesen Fokus. Brauchen Sie mehr, leiten Sie den Klick auf eine Seite mit Auswahlmöglichkeiten.
Was unterscheidet eine Sticky Bar von einer Hello Bar?
Platzierung und Verhalten. Eine Hello Bar sitzt oben im Dokument und scrollt mit dem Inhalt weg, wirkt also beim Ankommen. Eine Sticky Bar ist am Viewport fixiert und bleibt auf jeder Scrolltiefe sichtbar, wirkt also während und nach dem Lesen. Viele Seiten nutzen das eine oder das andere; beides zugleich kostet meist mehr Fläche, als es einbringt.
Gehört eine Sticky Bar nach oben oder nach unten?
Mobil ist unten meist besser, weil der Daumen dort ruht und oben die Browserleisten sitzen. Am Desktop ist oben sicherer, wo eine untere Leiste zwar mit nichts konkurriert, aber wie ein Overlay wirkt. Welche Kante Sie auch wählen, prüfen Sie sie gegen die Safe Areas des Geräts, statt einen festen Pixelabstand anzunehmen.
Ab welcher Scrolltiefe sollte sie erscheinen?
Dort, wo der ursprüngliche Call-to-Action den Viewport verlässt, bei den meisten Layouts zwischen fünfzehn und dreißig Prozent. Diesen Punkt auf der eigenen Seite zu messen ist besser, als einen Prozentwert zu übernehmen, denn Hero-Höhen variieren stark. Zu früh doppelt sie einen sichtbaren Button, zu spät bleibt ein Teil der Seite ohne erreichbare Aktion.
Wie verhindere ich, dass sie mobile Inhalte verdeckt?
Geben Sie der Seite unten einen Abstand in Höhe der Leiste, damit das letzte Element frei scrollbar bleibt, und nutzen Sie den Safe-Area-Inset statt eines festen Offsets. Blenden Sie die Leiste aus, solange ein Eingabefeld den Fokus hat, da die Tastatur bereits den Großteil des Viewports einnimmt, und prüfen Sie den Footer mit seinen Links am unteren Rand.
Darf eine Sticky Bar ein Formularfeld enthalten?
Sie fasst ein Feld und einen Button, sollte es aber selten tun. Der Fokus in einem fixierten Element öffnet die Tastatur, die den Viewport um eine ohnehin daran verankerte Leiste herum neu umbricht, und auf manchen mobilen Browsern rutscht das Feld unter die Tastatur. Nutzen Sie die Leiste, um ein Formular zu öffnen, statt selbst eines zu sein.
Schaden Sticky Bars dem SEO?
Nicht direkt, aber über die Erlebnissignale, die Suchmaschinen messen. Eine Leiste, die einen großen Teil eines kleinen Viewports belegt oder den Hauptinhalt verdeckt, fällt in die Kategorie störender Einblendungen, die Richtlinien ausdrücklich nennen. Halten Sie sie schmal und schließbar und prüfen Sie auf dem Smartphone, dass der Hauptinhalt dominant bleibt.