Ecommerce-Website-Navigation und Informationsarchitektur verstehen

Stell dir vor, du verläufst dich in einem riesigen stationären Geschäft. Du irrst durch endlose Gänge auf der Suche nach einem einfachen Artikel – nur um festzustellen, dass du nicht mal in der richtigen Abteilung bist. Frustrierend, oder?

Dasselbe passiert, wenn eine Ecommerce-Website eine unklare Navigation hat. Kunden kommen bereit zum Stöbern, Produktvergleichen oder Kaufen – verbringen ihre Zeit aber damit, herauszufinden, wo sie als Nächstes hinmüssen. Manche finden schließlich, was sie suchen. Viele verlassen die Seite einfach.

Navigation spielt eine entscheidende Rolle in der gesamten Ecommerce-Website-Experience. Sie beeinflusst, wie leicht Kunden Produkte entdecken, sich durch die Buying Journey bewegen und letztendlich konvertieren.

Lass uns also über Ecommerce-Website-Navigation sprechen – warum sie wichtig ist und wie du eine Struktur erstellst, die Nutzern hilft, das Gesuchte mit so wenig Aufwand wie möglich zu finden.

Und fangen wir mit den Grundlagen an.

Wenn dein Store gut organisiert ist, haben Kunden das Gefühl, alle nötigen Informationen über die angebotenen Produkte zu haben – und die Navigation fällt leichter.

Das hängt mit der Informationsarchitektur von Ecommerce-Websites zusammen, die als Grundgerüst der Website dient und eine klare Struktur vorgibt, die sich in der Navigation widerspiegelt. Der Begriff „Architektur” ist kein Zufall. Genau wie ein stationäres Geschäft Gänge, Regale und Durchsagen hat, verfügen Online-Shops über Kategorien, Produktseiten und Tags.

Wenn die Architektur klar und prägnant ist, lässt sich die Navigation leichter so gestalten, dass sie den Nutzer schnell zu den gewünschten Artikeln führt. Je größer die Produktvielfalt eines Online-Stores, desto mehr Gedanken sollte in seine Informationsarchitektur gesteckt werden.

Und das ist besonders relevant für Online-Shops, die mehrere Produktgruppen anbieten. Denk an einen handgefertigten Schmuckladen im Vergleich zu einem Kaufhaus – ersterer hat es leichter, den Kunden zu führen, da er weniger Optionen präsentiert. Das bedeutet jedoch nur, dass das Kaufhaus mehr Überlegung in seine Organisation stecken sollte.

Elemente der Ecommerce-Informationsarchitektur

Lass uns die verschiedenen Elemente der Informationsarchitektur betrachten, die häufig in der Ecommerce-Website-Navigation vorkommen:

1. Hauptkategorien

Hauptkategorien dienen als übergeordnete Einteilungen der Produkte oder Dienstleistungen, die auf der Ecommerce-Website angeboten werden. „Haupt-” bedeutet hier, dass sie „untergeordnete” Kategorien haben, die häufiger als „Unterkategorien” bezeichnet werden (dazu später mehr).

Diese Top-Level-Kategorien repräsentieren breite Gruppen, die Nutzern helfen, die wichtigsten Interessensbereiche schnell zu identifizieren. Auf einer Kleidungs-Website könnten Hauptkategorien zum Beispiel „Herrenkleidung”, „Damenkleidung”, „Kinderkleidung” und „Accessoires” umfassen.

Beispiel: Wayfair zeigt Produkt-Hauptkategorien in einem horizontalen Menü oben an. Es gibt viele Einträge (15), aber der großzügige Abstand sorgt für eine gute Lesbarkeit. Nur einer ist hervorgehoben – in Rot. Quelle

2. Unterkategorien

Unterkategorien bieten spezifischere Unterteilungen innerhalb jeder Hauptkategorie.

Am selben Beispiel des Bekleidungsgeschäfts könnten Unterkategorien unter „Herrenkleidung” „T-Shirts”, „Hemden”, „Hosen”, „Jacken” usw. umfassen. Unterkategorien helfen Nutzern, ihre Suche weiter einzugrenzen und relevante Produkte zu erkunden. Sie werden in der Regel in Dropdown-Menüs oder erweiterbaren Untermenüs innerhalb der Hauptnavigation angezeigt.

Unterkategorien können wiederum ihre eigenen Unterkategorien haben – und so weiter – in einem mehrstufigen System. Die Tiefe dieses Systems hängt von der Bandbreite deiner Produkte ab und davon, wie präzise du sie organisieren möchtest. Eine Faustregel lautet: Wenn du nur mehr als eine Handvoll Artikel desselben Typs hast, lohnt es sich vielleicht, sie in einer Kategorie oder Unterkategorie zu bündeln.

Beispiel für mehrstufige Kategorien: „Herrenmode” > „Kleidung” > „Hemden” > „T-Shirts”.

Beispiel: Etsy bietet für jede Hauptkategorie eine beeindruckende Auswahl an Unterkategorien in einem Mega-Menü. Um den Nutzer nicht zu überfordern, ist das Layout übersichtlich und in Listen organisiert. Quelle

3. Tags und Labels

Tags und Labels bieten zusätzliche Möglichkeiten, Produkte auf einer Ecommerce-Website zu organisieren und zu navigieren. Sie sind Keywords oder Beschreibungen, die Produkten zugewiesen werden, um sie anhand spezifischer Merkmale zu klassifizieren.

Ein Bekleidungsgeschäft könnte zum Beispiel Tags wie „casual”, „formal”, „Sommerkollektion”, „umweltfreundlich” usw. verwenden, um Nutzern zu helfen, Produkte basierend auf ihren Präferenzen oder bestimmten Themen zu entdecken. Es macht aber auch Sinn, Tags für Farben, Größen und bestimmte Features zu verwenden. Also können „grün”, „Größe: 42″ und „Taschen” ebenfalls Tags sein.

Tags werden oft neben Produkten angezeigt und ermöglichen es Nutzern, darauf zu klicken und andere Artikel mit ähnlichen Eigenschaften zu erkunden.

Beispiel: Diese Poshmark-Suche zeigt nur Taschen mit dem Label „Green”. Das verdeutlicht, wie Labels dabei helfen können, Suchen unter sehr spezifischen Bedingungen zu verfeinern. Quelle

4. Produktseiten

Produktseiten präsentieren einzelne Artikel im Inventar einer Ecommerce-Website. Jede Produktseite enthält detaillierte Informationen zu einem bestimmten Produkt – darunter Bilder, Beschreibungen, Spezifikationen, Preise und Kundenbewertungen.

Produktseiten sind entscheidend, um einen umfassenden Überblick über das Angebot zu geben und die Kaufentscheidung zu erleichtern. Nutzer gelangen in der Regel zu Produktseiten, indem sie die entsprechende Hauptkategorie und Unterkategorie auswählen oder etwas suchen und die Suchergebnisseite durchstöbern.

Genau wie du ein Produkt in einem stationären Geschäft genau unter die Lupe nehmen würdest, können Kunden auf der Produktseite mehrere Bilder ansehen und detaillierte Beschreibungen lesen, um fundierte Kaufentscheidungen zu treffen. Und da man in Online-Stores keine physischen Waren ausprobieren kann, sind diese Informationen besonders wichtig. Außerdem ist die Produktseite in der Regel der Ort, an dem der Nutzer ein Produkt in den Cart legt.

Lies unseren Blogbeitrag zur Ecommerce-Produktseiten-Optimierung, um mehr darüber zu erfahren, welche visuellen Elemente du auf solchen Seiten einsetzen solltest, was du in Beschreibungen aufnehmen solltest und welche weiteren Optimierungen du vornehmen kannst, um Conversions zu steigern.

5. Filter- und Sortieroptionen

Um die User Experience zu verbessern und das Finden und Vergleichen bestimmter Produkte zu erleichtern, bieten Ecommerce-Websites häufig Filter- und Sortieroptionen an.

Filter ermöglichen es Nutzern, ihre Suche anhand verschiedener Attribute wie Preisrange, Größe, Farbe, Marke und mehr zu verfeinern. Visuell werden Filter meist durch ein Trichter-Icon signalisiert. Tags und Labels werden hauptsächlich für Filterzwecke eingeführt.

Sortieroptionen ermöglichen es Nutzern, die angezeigten Produkte nach Faktoren wie Relevanz, Preis, Beliebtheit, Kundenbewertungen und mehr zu ordnen.

Beide Features sind in der Regel als interaktive Elemente in der Navigation oder Sidebar der Suchergebnisseite oder Kategorieseiten verfügbar.

Wichtig zu beachten: Sie können, müssen aber nicht zusammen funktionieren – Shopper können gleichzeitig filtern und sortieren. In jedem Fall ist es wichtig, klar zu kommunizieren, ob eines der Features aktiv ist.

Beispiel: LGs Online-Store zeigt ein sehr übersichtliches Beispiel für einen Filter mit mehreren Parametern (hier mit einer Preisrange und einem Feature) sowie eine Sortieroption (hier nach „Best Match”). Quelle

6. Breadcrumbs

Breadcrumbs sind ein Navigationshilfsmittel, das dem Nutzer seinen aktuellen Standort innerhalb der Website-Hierarchie anzeigt. Sie zeigen den Pfad, den der Nutzer genommen hat, um zur aktuellen Seite zu gelangen – in der Regel als eine Reihe anklickbarer Links dargestellt.

Eine einfache Möglichkeit, sie sich vorzustellen: Beim Durchsuchen von Dateien auf deinem Computer zeigt der Explorer im Wesentlichen Breadcrumbs an. Beispiel unter Windows: C:\Users\John\Downloads\

Breadcrumbs sind besonders nützlich auf Ecommerce-Websites mit tiefen Hierarchien, da sie Nutzern eine klare Möglichkeit bieten, ihre Schritte nachzuvollziehen und einfach zu übergeordneten Kategorien oder Suchergebnissen zurückzunavigieren.

Wenn sie richtig eingesetzt werden, vermitteln Breadcrumbs ein Gefühl der Orientierung, helfen Kunden, verschiedene Produktlinien zu erkunden, reduzieren Frustration und erhöhen die Retention Rate.

Beispiel: Mit so vielen Kategorien, Unterkategorien und Artikeln wäre die Website von Best Buy ohne Breadcrumbs sehr verwirrend. In diesem Bild haben wir die Breadcrumbs rot eingekreist.. Quelle

7. Suchleiste

Eine gut sichtbare Suchleiste ist ein unverzichtbares Element in der Ecommerce-Navigation. Sie ermöglicht es Nutzern, direkt nach Produkten oder bestimmten Keywords zu suchen – eine alternative Methode, um Artikel schnell zu finden.

Suchergebnisse sollten relevant und in einem nutzerfreundlichen Format angezeigt werden, damit Besucher die gewünschten Produkte leicht finden können.

Genau wie du in einer Buchhandlung eine Person nach einem bestimmten Produkt oder einer Kategorie fragen würdest, können Kunden Keywords oder Phrasen in die Suchleiste eingeben, um schnell das zu finden, was sie suchen.

Beispiel: Kroger platziert die Suchleiste an einer prominenten Stelle, direkt neben dem Logo. Sie nutzen eine gängige Technik: den Platzhaltertext (hier „Search Products”), der den Nutzer anleitet, wie dieses Element zu verwenden ist. Quelle

8. Featured und Promotional Sections

Featured und Promotional Sections auf einer Ecommerce-Website sind das Äquivalent zu auffälligen Displays oder Sonderbereichen in einem stationären Geschäft.

Genau wie stationäre Geschäfte Featured Products oder saisonale Aktionen an prominenten Stellen platzieren, heben Ecommerce-Websites diese Artikel auf ihrer Homepage oder in dedizierten Sections hervor, um die Aufmerksamkeit der Kunden zu gewinnen und den Umsatz anzukurbeln.

Die Bedeutung dieser Sections sollte nicht unterschätzt werden: Es ist erstklassiges Werbefläche. Sie sollte deinen wichtigsten Produkten und saisonalen Kampagnen gewidmet sein.

In der obigen Liste haben wir die Elemente der Ecommerce-Informationsarchitektur besprochen. Du hast vielleicht bereits bemerkt, dass ein spannender Aspekt darin besteht, dass sie auf viele verschiedene Arten dargestellt werden können. Deshalb können zwei Online-Stores, die dieselben Artikel unter denselben Labels verkaufen, völlig unterschiedlich aussehen.

Lass uns besprechen, wie du unterschiedliche User Experiences für ähnliche Elemente schaffst – durch die Wahl verschiedener Arten der Ecommerce-Website-Navigation.

Navigationsmenüs

1. Horizontales Menü

Das horizontale Menü ist das häufigste Navigationselement, das oben auf einer Website zu finden ist – in der Regel im Header-Bereich.

Ein horizontales Menü zeigt eine Reihe von Einträgen (meist Kategorien) in einem horizontalen Layout an, oft mit Dropdown-Menüs für den Zugriff auf Unterkategorien oder spezifische Seiten. Es bietet einfachen Zugang zu verschiedenen Sektionen oder Produktkategorien und ermöglicht es Nutzern, schnell durch die Website zu navigieren.

Ein horizontales Menü kann sticky sein, was bedeutet, dass es oben auf der Seite fixiert bleibt, sobald der Nutzer nach unten scrollt – sodass das Menü immer zugänglich ist. Alternativ kann es nur sichtbar sein, wenn sich die Scrollbar in der obersten Position befindet. Im Ecommerce gilt es als Best Practice, das Menü sticky zu machen, um die Navigation für Nutzer zu vereinfachen.

Vorteile:

• Intuitiv und einfach zu bedienen.
• Effektiv für die Anzeige einer kleinen Anzahl von Optionen.

Nachteile:

• Begrenzte Kapazität.

Beispiel: Dells Website zeigt Hauptkategorien mit eleganten Icons in einem horizontalen Menü. Zu beachten ist, dass das horizontale Menü in diesem Fall auch ein großes Suchfeld sowie Icons für den Zugriff auf den Cart und das Nutzerkonto enthält. Quelle

2. Vertikales Menü

Ein vertikales Menü, auch als Sidebar oder vertikale Navigation bekannt, ist auf der linken oder rechten Seite einer Webseite positioniert.

Es präsentiert eine Liste von Menüeinträgen in einem von oben nach unten verlaufenden Layout, in der Regel mit erweiterbaren Untermenüs.

Vertikale Menüs sind besonders nützlich, wenn viele Kategorien oder Unterkategorien angezeigt werden müssen, da sie eine kompakte und übersichtliche Möglichkeit zur Navigation durch die Website bieten.

Vorteile:

• Mehr Platz für Navigationselemente.
• Sehr gut sichtbar.

Nachteile:

• Beansprucht wertvollen Bildschirmplatz (besonders auf kleineren Bildschirmen).
• Kann schwerer zu lesen sein als horizontale Menüs.

Beispiel: Walgreens verwendet ein langes vertikales Menü. Bestimmte Kategorien (mit einem >-Symbol markiert) können erweitert werden, um die darin enthaltenen Unterkategorien anzuzeigen. Quelle

3. Mega-Menü

Ein Mega-Menü ist eine erweiterte Version eines Dropdown-Menüs, das ein mehrspaltiges Layout mit zusätzlichen Informationen und visuellen Elementen anzeigt.

Es ermöglicht eine umfangreichere Darstellung von Kategorien, Unterkategorien und Featured Products. Mega-Menüs sind nützlich, wenn eine Ecommerce-Website eine große Anzahl von Produktkategorien hat oder bestimmte Artikel oder Aktionen direkt im Navigationsmenü präsentieren möchte.

Vorteile:

• Sehr flexibel.
• Bietet Kontext – es kann Bilder und Beschreibungen einbinden, um dem Nutzer einen besseren Eindruck zu vermitteln.

Nachteile:

• Kann überwältigend wirken.
• Kann die Website-Geschwindigkeit verlangsamen.

Beispiel für ein Mega-Menü: Beim Hovern über eine Kategorie auf Ebay.com wird dem Nutzer ein umfangreiches Mega-Menü mit zahlreichen Einträgen, Spalten und Bildern angezeigt. Obwohl es überwältigend wirken kann, spiegelt es definitiv die große Vielfalt der zum Kauf verfügbaren Artikel wider. Quelle

4. Hamburger-Menü

Das Hamburger-Menü ist ein kompaktes und minimalistisches Icon, das aus drei übereinander gestapelten horizontalen Linien besteht.

Es ist in der Regel in der oberen Ecke einer Website positioniert und öffnet sich beim Klicken zu einem vollständigen Menü.

Das Hamburger-Menü eignet sich gut für Mobile-responsive Designs oder wenn der Platz begrenzt ist – es bietet eine übersichtliche und aufgeräumte Navigationserfahrung.

Im Vergleich zu allen anderen Menüs erfordert ein Hamburger-Menü einen zusätzlichen Klick, um den Nutzer an den gewünschten Ort zu bringen. Es ist jedoch klein und beansprucht wenig Bildschirmfläche – was auf kleineren Bildschirmen wichtig ist.

💡Eine der Best Practices des Responsive Designs ist es, ein horizontales oder vertikales Menü ab einer bestimmten Bildschirmbreite in ein Hamburger-Menü umzuwandeln.

Vorteile:

• Platzsparend.
• Funktioniert gut auf Mobile.

Nachteile:

• Erfordert zusätzliche Klicks.
• Nutzer beachten es möglicherweise nicht.

Beispiel: Das Hamburger-Menü auf der Website von Zara ist dezent und blockiert standardmäßig keine Elemente – das trägt zu einer nahtlosen Mobile-Navigation bei. Quelle

5. Quick Links oder Navigations-Shortcuts

Quick Links oder Navigations-Shortcuts befinden sich häufig an prominenten Stellen der Website, wie dem Header oder Footer.

Sie bieten direkten Zugang zu wichtigen Seiten wie dem Cart, dem Nutzerkonto, dem Kundenservice oder häufig besuchten Sektionen. Quick Links verbessern die Usability, indem sie Nutzern ermöglichen, schnell auf wichtige Features zuzugreifen oder gängige Aktionen durchzuführen, ohne mehrere Seiten durchnavigieren zu müssen.

Vorteile:

• Vereinfacht die User Journey zu wichtigen Seiten.
• Sehr anpassbar.

Nachteile:

• Beansprucht wertvollen Bildschirmplatz im Header oder Footer.

Beispiel: Amazons Header enthält so viele Quick Links (Lieferadresse, Sprache, Cart), dass kaum Platz dazwischen bleibt. Nicht besonders elegant, aber es bietet definitiv eine schnelle Navigation zu den wichtigsten Seiten. Quelle

6. Dynamische oder kontextuelle Navigation

Dynamische oder kontextuelle Navigation passt sich dem Verhalten oder dem Kontext des Nutzers an, um relevante Navigationsoptionen bereitzustellen. Diese dynamische Natur macht sie zu einem wichtigen Element bei der Personalisierung der User Experience.

Sie kann zum Beispiel zuletzt angesehene Produkte, verwandte Artikel oder gezielte Empfehlungen basierend auf dem Browsing-Verlauf oder Kaufverhalten des Nutzers anzeigen.

Dynamische Navigation verbessert die User Experience, indem sie den Aufwand reduziert, relevante Produkte zu finden. Die Wahrscheinlichkeit, ein verwandtes Produkt in den Cart zu legen, ist höher als bei einem zufälligen Produkt – daher steigert kontextuelle Navigation auch den Cart Value.

Vorteile:

• Personalisierte User Experience.
• Kann den Umsatz steigern.

Nachteile:

• Schwierig einzurichten.
• Kann ungenau sein.

Beispiel: Produktseiten auf der Website von Target haben eine „Similar Items”-Sektion, die Nutzern hilft, das zu finden, was sie suchen. Quelle

Verschiedene Ecommerce-Navigationsarten kombinieren

Du musst dich absolut nicht für eine Option aus der Liste entscheiden. Oder zwei. Du kannst so viele davon kombinieren, wie du brauchst, um eine einfache, übersichtliche Navigation zu schaffen, die deinen Nutzern hilft, ihre Ziele auf ihrer Journey durch deine Website zu erreichen – und letztendlich Umsatz und Revenue zu steigern.

Wir haben bereits einige Beispiele erwähnt, wie etwa ein horizontales Menü, das sich auf kleineren Bildschirmen in ein Hamburger-Menü verwandelt. Einige Retailer wie Newegg verwenden sogar drei Navigationsmenüs gleichzeitig: ein horizontales Menü mit Quick Links und einer Suchleiste, kombiniert mit einem vertikalen Menü mit Kategorien und einem Hamburger-Menü, das beide dupliziert.

Solange es deinen Kunden hilft, dorthin zu gelangen, wo sie hinwollen, ist jede Navigationsoption gut. Beachte jedoch, dass eine Überladung deiner Website mit zu vielen Navigationsoptionen für den Nutzer überwältigend sein kann.

Beispiel: Newegg verwendet sowohl ein horizontales Menü, ein vertikales Menü als auch ein Hamburger-Menü.

Ecommerce-Kunden sind zunehmend mit Optionen überflutet – selbst in Nischenmärkten. In dieser schnelllebigen Welt ist die Optimierung der Website-Navigation der Schlüssel, um sie zum Bleiben, Kaufen und Wiederkommen zu bewegen.

Es ist entscheidend zu verstehen, wie Nutzer sich in deinem Online-Store bewegen, und alle Tools zu nutzen, die dir zur Verfügung stehen, um sie zu binden. Das bedeutet: Artikel effizient in Kategorien, Labels und mehr zu organisieren – und dann alle richtigen Elemente einzusetzen, um die Produkte zu präsentieren.

Durch die Anwendung der in diesem Blogbeitrag besprochenen Best Practices und Beispiele zur Ecommerce-Website-Navigation können Unternehmen das Engagement verbessern, Conversion Rates steigern und eine höhere Kundenzufriedenheit erzielen.