Sticky-Elemente im Web Design

Die Besuchenden einer Website werden häufig mit viel Inhalt konfrontiert. Häufig fehlt ihnen zudem die Zeit, den gesamten Content genau zu lesen. Die Konsequenz: Die User überfliegen die Seite und scannen sie nach den relevanten Informationen. Wie kann man also sicherstellen, dass die Website-Besuchenden auch das finden, was A sie suchen und B Conversions getätigt werden? Die Antwort: Sticky-Elemente im Web Design.

Was sind Sticky Elements?

Sticky bedeutet auf Deutsch übersetzt klebrig. Es sind also Elemente, die auf einer Website oder einer Landingpage an einer gewissen Position «kleben». Auch beim Scrollen sind sie weiter sichtbar. Dabei richten sich die Elemente meist am Browserfenster aus.

Solche Elemente helfen den Usern, sich auf der Seite zurecht zu finden. Die Zielgruppe soll die wichtigsten Aktionen entlang der Customer Journey schnell und einfach finden. Mit Sticky Elements lässt sich dies elegant lösen. Sticky Elements können also als eine Art Wegweiser angesehen werden.

Wie setzt man Sticky-Elemente im Web Design ein?

Die Einsatzmöglichkeiten sind zahlreich. Wichtig ist natürlich – wie bei allen Überlegungen bei der Konzeption einer Website – diese auch an die Bedürfnisse der Zielgruppen auszurichten. Weniger kann da durchaus mehr sein.

Sticky Navigation

Die Navigation ist ein zentrales Element der Usability einer Website. Eine effektive Navigation muss leicht zugänglich, klar und intuitiv zu bedienen sein. Insbesondere für lange Websites kann eine Sticky Navigation sinnvoll sein. Zudem geben Sticky-Navigationen den Usern ein Gefühl der Kontrolle. Die User müssen so nicht wieder mühsam zum Seitenanfang scrollen, um sich auf eine andere Webseite zu wechseln. Sie können sich also schneller durch die Seite bewegen. Wenn zudem der Menüpunkt, auf dem sich die User gerade befinden, noch bspw. farblich gekennzeichnet ist, hilft dies zusätzlich für eine bessere Orientierung.

Jedoch ist zu berücksichtigen, dass die Sticky Navigation auch einen festen Platz auf dem Bildschirm einnimmt. Dadurch wird der Platz für andere Inhalte weniger. Zudem kann eine Sticky Navigation vom Inhalt ablenken. Bei der Konzeption und auch dem Design einer Website sind diese zwei Punkte unbedingt zu berücksichtigen.

Sticky Call-to-Actions

Sticky-Elemente eignen sich aus Unternehmerperspektive auch ideal für die Conversion-Optimierung. Indem die wichtigsten Call-to-Actions als Sticky Buttons fix auf der Seite eingebunden werden, können diese in den Fokus gerückt werden. Eine typische Funktion ist der Chat, der meistens rechts unten am Bildschirmrand positioniert ist. Zudem können mittels eines sticky Buttons zum Beispiel auf ein Kontaktformular, ein Online-Stelleninserat oder ein Newsletter verlinkt werden.

Auch Kontakt-Buttons lassen sich implementieren, zum Beispiel ein Telefon- und/oder E-Mail-Button. Diese haben wir zum Beispiel auf der Startseite unseres xeit Blogs implementiert. Wichtig ist, dass sich die Sticky Buttons genügend vom Inhalt der Seite abheben.

Sticky-Elemente auf Mobile

Auch auf Mobile machen Sticky-Elemente durchaus Sinn. Ein wichtiger Faktor auf Mobile ist jedoch der begrenzte Platz. Fix positionierte Elemente sind daher eher sparsam einzusetzen. Wie bei allen Funktionen ist ausserdem zu beachten, dass die Elemente auch eine gute Grösse aufweisen. Die Elemente sollten so gross sein, dass man diese mit dem Finger gut anwählen kann.

Dos and Don’ts

Ihr seht, der Einsatz von Sticky-Elementen lohnt sich und kann das Nutzererlebnis für die User mit euerer Website erhöhen. Zudem ist es eine wichtige Funktion um User Experience Design. Die Dos and Don’ts haben wir für euch nochmals zusammengetragen:

+ Der Fokus sollte darauf liegen, welche Aktionen oder Elemente einen Mehrwert für die User darstellen.

+ Überlegt euch die effektivste Positionierung der Elemente.

+ Die Elemente sind gross genug zu gestalten, damit sich auch angetippt werden können.

+ Sticky-Elemente sollten genügend Kontrast aufweisen, damit sich die Elemente visuell von dem darunter liegenden Inhalt unterscheiden.

+ Der verfügbare Raum ist effizient zu nutzen.

– Keine unnötigen Elemente fixieren, die den Bildschirmplatz beanspruchen und wenig Nutzen für die User bringen.

– Auf ablenkende Animationen oder Übergänge sollte verzichtet werden.

Im nächsten Blogpost gehen wir zudem auf die Einsatzmöglichkeiten von Sticky-Elementen im eCommerce ein.