Webdesign-Trend: Mit feststehender Navigation E-Commerce Portale optimieren

Kennen Sie noch aus der Frühzeit von Javascript die Versuche Elemente fest an einer Stelle zu positionieren, so dass sie nicht beim Scrollen verschwinden? Meine Nackenhaare stellen sich heute noch auf und ein kalter Schauer läuft mir den Rücken hinunter, wenn ich daran zurückdenke. Die Elemente sind nämlich nicht einfach an der Stelle verweilt, sondern sind zunächst normal mit der Seite nach oben gewandert, um dann zeitverzögert wieder an die vorherige Position zu ruckeln. Von einer angenehmen User Experience konnte man bei diesem Anblick nicht sprechen.Mit der stetigen Weiterentwicklung von Browsern, CSS-Eigenschaften und Javascript ist die feste Positionierung von Elementen auf einer Website heutzutage ein wesentlich angenehmeres Erlebnis. Dadurch hat sich diese Technik zu einem Webdesign-Trend gemausert und findet auch auf E-Commerce Portalen eine immer größere Verbreitung.

Fixed Navigation: Ein Praxisbeispiel

Am Beispiel der Website des Hotels Four Seasons möchte ich die Möglichkeiten einer feststehenden Navigation genauer erläutern.

Feststehende Navigation E-Commerce

Die Unterseite für ein Hotel einer Stadt hat einerseits eine Art Metanavigation die ganz oben auf der Seite platziert ist. Diese Navigation beinhaltet Themen, Sprachwahl und Links für die Anmeldung. Danach kommt eine Teaserfläche, die Bilder des Hotels und der Umgebung beinhaltet. Darunter kommt eine zweite Navigation mit der man die Unterseite für das Hotel navigieren kann und als letzten Punkt eine Reservierung durchführen kann. Hierfür befinden sich direkt darunter auch Felder für Personenzahl und Reisedaten.

Feststehende Navigation E-Commerce FourSeasons

Scrollt der Nutzer nun weiter, so bleibt die Metanavigation und das Logo an gleicher Stelle. Der Nutzer hat also immer Zugriff auf die Startseite, zu den Unterthemen und der Sprachauswahl. Der Rest der Seite verschindet unter der Metanavigation.

Feststehende Meta-Navigation E-Commerce FourSeasons

Gelangt der Nutzer beim Scrollen nun bis zur Navigation für die Unterseite, so verschwindet diese allerdings nicht unter der Metanavigation, sondern sie schließt sich direkt unterhalb an. Dabei blenden die Felder für die Reservierung aus. Der kommende Inhalt wird jetzt sowohl unter der Metanavigation als auch der Navigation der Unterseite geschoben.

Der Vorteil dieses Systems liegt darin, dass egal in welchem Bereich der Seite sich der Nutzer gerade befindet, hat er immer die Call-to-Action für die Zimmerreservierung im Blickfeld und kann sofort darauf klicken ohne wieder ganz nach oben scrollen zu müssen.

Fixed Navigation auf E-Commerce Portalen

Auf E-Commerce Portalen findet man immer häufiger die fixierte Navigation in unterschiedlichen Ausprägungen.

Als eine Variante wird der Kopfbereich mit einer horizontalen Navigation, Suche und Warenkorb an der oberen Stelle fixiert. So hat der Nutzer immer sofortigen Zugriff auf die Kategorien und seinen Warenkorb. Vor allem auf längeren Kategorie- und Produktseiten kann dies eine gute Möglichkeit sein dem Nutzer die ständige Kontrolle zu belassen.

Als leichtere Variante wird anstatt des ganzen Kopfbereichs auch nur der Warenkorb fixiert, so dass der Nutzer immer Zugriff auf den Warenkorb hat.

Eine weitere Variante ist es bei einer kleineren vertikalen Navigation diese seitlich fest zu positionieren, um auch hier dem Nutzer den ständigen Zugriff zu gewährleisten. Wichtig ist hierbei allerdings zu beachten, dass auch bei kleineren Auflösungen die komplette Navigation noch im Sichtbereich liegt. Wenn ein Teil der Navigation nicht mehr im Sichtbereich liegt, wird es ansonsten hakelig an den Teil der Navigation zu gelangen, der sich nicht mehr im Sichtbereich befindet.

Beispiele aus dem E-Commerce

Black Estate Vineyard

Feststehende Navigation E-Commerce Wines
Die Seite des Weinguts Black Estate ist eine einzige Seite, die in unterschiedliche Abschnitte eingeteilt ist. Diese Abschnitte können mit der linken vertikalen Navigation angesteuert werden. Befindet man sich am Beginn der Seite, scrollt die Navigation noch normal mit der Seite mit, da die Navigation zunächst relativ mittig in der Seite platziert ist. Ist die Navigation nun am oberen Sichtbereich angekommen behält die Navigation die Position bei und scrollt nicht aus dem Sichtbereich heraus. Teilweise überlagert die Navigation auch einzelne Elemente, die in den Bereich der Navigation hineinreichen. Dies ist jedoch weiter nicht schlimm, da die Navigation sehr schmal und kompakt ist und somit der Nutzer nicht beim Erfassen von wichtigen Informationen eingeschränkt wird.

Esprit

Feststehende Navigation E-Commerce Esprit
Bei Esprit ist der komplette Kopfbereich fixiert, d.h. Logo, Warenkorb, Navigation mit Markenfilter und Suche bleiben immer an der selben Position.

Graz Secrets

Feststehende Navigation E-Commerce Graz Secrets
Die Website für die iPhone App Graz Secrets besteht auch lediglich aus einer einzigen Seite, wobei über die Navigation im Kopfbereich die einzelnen Abschnitte angesteuert werden können. Diese Navigation ist fest im Kopfbereich verankert. In der Mitte der Navigation sticht die rote Call-to-Action für den Download der App hervor und ist somit an jeder Stelle der Seite zugänglich.

Hard Graft

Feststehende Navigation E-Commerce Hard Graft
Der Onlineshop Hard Graft hat eine kompakte vertikale Navigation am linken Seitenrand, die fest positioniert ist. Über diese Navigation kann so immer auf die verschiedenen Kollektionen oder die Produktkategorien zugegriffen werden. Neben der linken Navigation wird zusätzlich oben rechts ein leicht transparenter Kasten mit Metanavigation und Warenkorb fixiert. Der Nutzer kann also immer direkt in den Warenkorb springen ohne lange scrollen zu müssen.

Icondock

Feststehende Navigation E-Commerce Icondock
Icondock, ein Shop für Icons, hat hingegen keine feststehende Navigation, sondern lediglich einen feststehenden Warenkorb am linken Seitenrand. In diesem Warenkorb werden die bisher reingelegten Objekte direkt angezeigt. Nutzer können über einen Button oder per Drag&Drop Icons in den Warenkorb legen. Damit diese Funktion immer zur Verfügung steht, ist der Warenkorb fixiert. So ist der Warenkorb immer im Sichtbereich und der Nutzer kann per Drag&Drop Icons hineinlegen oder erhält Feedback, dass der Button das Produkt auch tatsächlich in den Warenkorb bewegt hat.

Mediaparker

Feststehende Navigation E-Commerce Mediaparker
Der Anbieter für Hostinglösungen Mediaparker hat ebenfalls eine Seite, um seine Serviceleistungen zu erläutern. Am oberen Sichtbereich ist eine Navigation fixiert, mit der man alle Abschnitte der Seite direkt erreichen kann. Schön ist es, dass der aktuelle Abschnitt auch in der Navigation farblich hervorgehoben wird.

Scotch&Soda

Feststehende Navigation E-Commerce Scotch & Soda
Scotch&Soda hat ein architektonisches Problem. So soll die Seite einerseits Informationen und Neuigkeiten über die Marke liefern andererseits auch einen Onlineshop integrieren. Die erste Navigationsebene deckt zunächst die informelle Funktion der Seite ab und enthält einen Link zum Onlineshop. Die Navigation des Onlineshops öffnet sich als Unternavigation unterhalb der oberen Hauptnavigation. Unter der Shopnavigation wird zusätzlich noch eine Leiste eingeblendet mit einem Suchfeld und dem Hinweis, dass man sich im Shop befindet. Alle drei Navigationsebenen werden untereinander als Balken dargestellt und sind fixiert. Dadurch geht schon ein wesentlicher Teil des sichtbaren Bereichs für die Anzeige der kompletten Navigation verloren. Vor allem bei kleineren Auflösungen kann dies sich negativ auswirken, da man den Sichtbereich stark einschränkt.

s.Oliver

Feststehende Navigation E-Commerce s.Oliver
s.Oliver hat wie Esprit einen festen Kopfbereich. Logo, Hauptnavigation, Suche und Warenkorb bleiben also immer an gleicher Position, während sich der untere Content normal verschieben lässt.

Zara

Feststehende Navigation E-Commerce Zara
Zara weitet den feststehenden Bereich im Vergleich zu anderen Modeshops noch weiter aus. So ist sowohl der Kopfbereich mit Logo, Warenkorb und Filtermöglichkeiten, als auch der linke Bereich mit Produktkategorien und Seitennavigation fest in der Seite integriert. Lediglich der eigentliche Inhaltsbereich ist noch scrollbar. Hierbei wird der Inhaltsbereich schon stark eingeschränkt. Um trotzdem mit dem kleineren Inhaltsbereich auszukommen werden bei kleineren Auflösungen die Kategoriebilder zum Beispiel verkleinert. Bei Zara kann es auch auftreten, dass bei kleineren Auflösungen die linke Navigation nicht mehr komplett dargestellt wird. In diesem Fall wird ein Pfeil unten neben der Navigation eingeblendet. Fährt man mit der Maus über diesen Pfeil, wandert die Navigation nach oben, so dass die unteren Menüpunkte sichtbar werden. Dies könnte sehr gefährlich sein, da der Pfeil nur sehr schlecht wahrgenommen wird und kein gelerntes Verhalten ist.

Fazit

Feststehende Elemente auf Websites können dem Nutzer auf E-Commerce Portalen eine größere Kontrollmöglichkeit an die Hand geben. Die Methode kann sinnvoll dafür eingesetzt werden wirklich relevante weiterführende Elemente im sichtbaren Bereich zu halten, so dass der Nutzer jederzeit darauf Zugriff hat ohne lange Seiten scrollen zu müssen. Vor dem Hintergrund, dass Scrollen immer mehr dem Klick für einen Seitenwechsel bevorzugt wird und damit Seiten immer länger werden, macht diese Entwicklung durchaus Sinn.
Man sollte dabei allerdings beachten, dass der Inhaltsbereich bei kleineren Auflösungen nicht zu stark eingeschränkt wird.
Was halten Sie von der Technik und dem Einsatz auf E-Commerce Portalen?

  • Send to Kindle
  • https://www.konversionskraft.de/?p=12691
Manuel Ressel Manuel Ressel ist Head of UX Design bei der Web Arts AG. Seine Leidenschaft gilt dem Thema der Emotionalisierung von Kauf-Prozessen in E-Commerce-Portalen. Manuel Ressel ist unentwegt auf der Suche nach einzigartigen Shop-Perlen und neuen Design Trends im E-Commerce und sammelt diese in dem E-Commerce Showcase conversiondesign.de. Folgen Sie ihm auf Twitter, Google+ oder Facebook.

, , , ,

10 Reaktionen auf  “Webdesign-Trend: Mit feststehender Navigation E-Commerce Portale optimieren”

Kommentare

  1. Hamza Hamza

    Ich find’s ganz praktisch. Ist übrigens nicht nur bei E-Commerce-Seiten zu finden.
    Und den Hinweis auf die JavaScript-Lösung kann man ganz dick unterstreichen, solche Seiten gibt es heute zum Teil immer noch 🙂

  2. Simon Kronseder Simon Kronseder

    Man sollte dabei mobile Endgeräte nicht vergessen. Feststehende Elemente können auf kleinen Displays schnell zur Frustration führen.

  3. André Goldmann André Goldmann

    Schöner Artikel zu diesem Thema!

    Sehr praktisch ist auch die Lösung von Twitter bzw. deren Framework „Bootstrap“. Dort gibt es eine „ScrollSpy“ Lösung, die aus einem scheinbar ganz normalen Menü, beim scrollen ein feststehendes Menü macht. Der Link zum Demo: http://twitter.github.com/bootstrap/javascript.html#scrollspy

    @Simon: Da helfen dir die Media-Querys, und schon gibts keine feststehende Navi mehr 😉

  4. Klaus Klaus

    Gibt es dafür eventuell ein Plugin für WordPress? Kennt sich einer damit aus, würde so etwas auch gerne umsetzen und das mit möglichst wenig aufwand.

  5. André Goldmann André Goldmann

    @Klaus, dafür kann es kein Plugin geben, weil jedes Theme bzw. jede Website andere CSS Klassen oder IDs verwendet. Um diese „position:fixed“ zu setzen, muss man schon wissen, welche Klasse für das Menü zuständig ist und nicht immer ist es nur mit einem „Position“ Befehl getan.

    Der Aufwand sollte sich aber in Grenzen halten, wenn man es machen lässt.

  6. precom Rainer precom Rainer

    Ich find die Technik eigentlich auch vorteilhaft für mich als User. Solange nicht Schindluder damit getrieben wird (und absolut unwichtige Elemente wie etwa Ads eingeblendet werden) kann es enorme Vorteile bei guten Auflösungen erzielen. Ob es bei Mobilgeräten auch notwendig ist – hm, darüber lässt sich streiten. Ganz angenehm sind im mobilen Bereich zT auch feste Footer-Zeilen mit 2-3 wichtigen Links.

  7. Aicke Schulz Aicke Schulz

    Bei Zara wurde das Verhalten der Navigation entweder geändert oder war beim testen nicht eindeutig.
    Offenbar reicht es jedoch (auf nicht Touch Geräten) sich in der Navigation mit der Maus zu bewegen, statt auf den Pfeil zu klicken, dabei scrollt die Navigation, je nach Position der Maus.

  8. Martin Roeder Martin Roeder

    Ich bin überrascht, wie viele Informationen und Anschauungsbeispiele dieser jetzt schon über 3 Jahre alte Artikel für dieses auch heute noch aktuelle Thema zu bieten hat.
    Sehr inspirierend, wenn man gerade selber auf der Suche nach Möglichkeiten ist, wie man eine feststehende Menüleiste am besten einbaut.

Trackbacks/Pingbacks

  1. […] Webdesign-Trend: Mit feststehender Navigation E-Commerce Portale optimieren Via: Konversionskraft […]

  2. […] Ambitions Taking ShapeHändler können mit Online-Werbung punktenMaking the Case for HTML5Mit feststehender Navigation E-Commerce Portale optimierenRetailers want to go local with technologySite experts share 3 tips for increasing […]

Hinterlassen Sie einen Kommentar