Tipps für eine gute Website-Struktur

Der Online-Auftritt deiner Marke bzw. deines Unternehmens wird immer wichtiger. Heute ist es schon selbstverständlich, dass eine Website mit hochwertigen visuellen Inhalten überzeugen muss. Aber 31 % der User:innen sind der Meinung, dass eine ansprechende Nutzererfahrung, auch UX genannt, ebenfalls Priorität haben sollte. 

Wenn du eigenständig eine Website erstellen willst, hängt die Gestaltung eines ansprechenden UX-Designs oft von unscheinbaren Details wie dem Aufbau der Website ab. Eine gute Website-Struktur wird vielen Besucher:innen zwar nicht unbedingt bewusst auffallen, eine undurchdachte Struktur jedoch kann ihnen sehr wohl in Erinnerung bleiben und einen schlechten Eindruck hinterlassen. 

In diesem Artikel definieren wir eine gute Website-Struktur, erklären, wie man ein ansprechendes UX-Design aufbaut, und besprechen die gängigsten Modelle, die heute im Website-Design und für Website-Templates verwendet werden.

Was ist überhaupt eine Website-Struktur?

Eine Website-Struktur bezieht sich auf die Hierarchie, die Reihenfolge und die Organisation der Seiten einer Website, vor dem Hintergrund eines gewünschten User-Erlebnisses. Sie verbindet alle einzelnen Unterseiten deiner Website mit einer schlüssigen Navigation, internen Verlinkungen und über die Inhalte. 

Zusammen mit der übergeordneten Informationsarchitektur ist die Website-Struktur ein wichtiger UX-Design-Faktor, der sich auf das User-Erlebnis auswirkt. Sie ist aber auch eine Möglichkeit für Ersteller:innen, das Layout und den Inhalt der Website zu planen und festzulegen, wo jedes Element platziert werden soll. Vor allem bei der Gestaltung einer Website mit mehreren Seiten gilt: Je mehr Aufmerksamkeit man der Struktur der Website von Anfang an schenkt, desto weniger Überraschungen gibt es später.

Aus welchen Elementen besteht die Struktur einer Website?

Indem du eine Website-Struktur festlegst, stellst du sicher, dass Nutzer:innen einem inhaltlichen roten Faden auf der Seite folgen können. Die Struktur muss alle Unterseiten der Website, ein System von Kategorien und eine Möglichkeit zur Navigation von einem Element zu den anderen umfassen.  Das Website-Layout sollte gewährleisten, dass die wichtigsten Informationen zuerst auffindbar sind, während die Besucher:innen dazu eingeladen werden, die folgenden Elemente weiter zu erkunden: 

• Kategorien und Unterkategorien

• Navigation 

• Verlinkungen

Kategorien und Unterkategorien

Kategorien bilden die Grundlage für die Organisation der Website: Sie gruppieren Seiten mit ähnlichem Inhalt und erleichtern den User:innen die Suche nach den gewünschten Informationen. Auf größeren Websites, die eine hohe Anzahl an Kategorien besitzen, sollte der Inhalt zusätzlich in Unterkategorien unterteilt werden.

Ein Bekleidungsunternehmen zum Beispiel würde die Startseite seiner E-Commerce-Website mit Links zu den wichtigsten Einkaufskategorien wie „Schuhe“, „Oberbekleidung“, „Hosen“ oder „Accessoires“ versehen. Schließlich leiten diese Seiten die Besucher:innen zu verschiedenen Unterkategorien weiter: „Sandalen“ wären zum Beispiel unter „Schuhe“ zu finden, während eine Unterkategorie wie „Fleecepullover“ unter „Oberbekleidung“ zu finden wäre.

Navigation

Die Website-Navigation gibt User:innen die Struktur vor und dient als Wegweiser zu den gewünschten Inhalten. In den meisten Fällen beginnt dies mit einem Website-Menü - entweder als klassisches Header-Menü oder als minimalistisches Hamburger-Menü. Übrigens ist nicht nur der Header deiner Website wichtig, sondern auch der Footer spielt eine entscheidende Rolle. Finde hier Ideen, um deinen Website-Footer zu optimieren.

Da der Zweck der Navigation darin besteht, die Besucher:innen zu leiten, sollte die Homepage klar die Seiten und Kategorien anzeigen, nach denen sie auf der Website suchen. Von dort aus sollten auch die Unterkategorien auffindbar sein, sei es durch ein Dropdown-Menü oder durch eine andere Art der Anzeige von Links zu Unterkategorieseiten. Darüber hinaus solltest du sicherstellen, dass die Menüführung deiner Website die Besucher:innen zu anderen wichtigen Seiten deiner Marke führt, z. B. zu einer „Über mich“-Seite oder einer „Kontakt“-Seite. 

Hier kannst du nachlesen, wie du am einfachsten mit Wix ein Kontaktformular erstellen kannst.

Verlinkungen

Durch ein gut durchdachtes Verlinkungssystem wird sichergestellt, dass Nutzer:innen richtig auf der Website navigieren.  Abhängig von der Art der Website-Struktur, werden User:innen in unterschiedlichem Maße auf die Verlinkungen angewiesen sein. Zusätzlich zu den Links aus dem Menü können die folgenden Arten von Links verwendet werden, um die UX zu verbessern: 

• CTAs (Calls-to-Action) sind strategisch platzierte Links, die Besucher:innen zu einem direkten Ziel führen und zu einer bestimmten Handlung auffordern. Egal, ob es sich um einen Link zur Anmeldung oder zum Kauf handelt, CTAs sind für Besucher:innen mit einem bestimmten Ziel äußerst hilfreich. Du kannst CTAs mit fettgedrucktem Text, ansprechenden Mikrotexten oder einer Schaltfläche gestalten. 

• Interne Links beziehen sich auf die Links innerhalb einer Website, die zu anderen Seiten derselben Website führen. Jede Website verfügt natürlich über interne Verlinkungen zwischen ihren Seiten. Ob diese für die Nutzer:innen optimal organisiert sind, liegt ganz bei dir. Manchmal gruppieren Unternehmen ihre Seiten in „Cluster“ von Kategorien und nutzen diese als Leitfaden. Ein gut durchdachtes System an internen Verlinkungen ist auch eine bewährte SEO-Praxis. Da es sich in der Sitemap widerspiegelt, sehen die Google-Bots, dass den Nutzer:innen die wichtigsten Informationen in der richtigen Reihenfolge zur Verfügung gestellt werden. 

• Kontextbezogene Links führen die Nutzer:innen zu verwandten Inhalten außerhalb deiner Website, wie z.B. zu Produktseiten anderer Unternehmen, Blogbeiträgen, Quellen oder Nachrichten.

Verschiedene Arten von Website-Strukturen

Sieh dir die unterschiedlichen Arten von Website-Strukturen und die Beispiele unten an. Welche Muster kannst du erkennen? Was sind typische Merkmale? Welcher Typ von User:innen profitiert am meisten von welcher Struktur?

Wenn du die vier folgenden, grundlegenden Strukturen und deren Verwendung kennst, wirst du besser verstehen, wie du dein eigenes Design erstellst oder welche Website-Vorlage du verwenden solltest:

• Hierarchisches Modell

• Sequentielles (oder lineares) Modell

• Matrix-Modell

• Datenbank-Modell

Hierarchisches Modell

Das beliebteste Modell ist das hierarchische, bei dem eine Homepage als Ausgangspunkt dient und sich je nach Wichtigkeit in verschiedene Kategorien und Seiten verzweigt. Da diese Struktur so vielseitig ist, eignet sie sich für eine Vielzahl von Website-Typen – von persönlichen Service-Websites bis hin zu Portfolio-Websites. 

Ordne deine Inhalte zunächst nach ihrer Wichtigkeit. In den meisten Fällen bedeutet dies, dass Nutzer:innen zuerst allgemeine Informationen erhalten, bevor sie weitere Details entdecken. Sobald du deine Seiten erstellt und gegliedert hast, kannst du diese Hierarchie mit Hilfe eines Verlinkungssystems und eines Navigationsmenüs umsetzen. 

Im folgenden Beispiel sehen wir eine perfekte Darstellung einer hierarchischen Website-Struktur im Online-Portfolio von Steven Popovich. Sie erleichtert den Nutzer:innen die Reise durch die verschiedenen Informationsebenen und Aktionen auf der Website: Von größeren Kategorien wie „Beauty“ und „Werbung“ auf der Startseite gelangen die Besucher:innen bei der Suche nach bestimmten Projekten und Marken zu detaillierteren Informationen.

Sequentielles (lineares) Modell

Eine sequenzielle Webstruktur führt die Nutzer:innen Schritt für Schritt zu ihrem Ziel, sei es, um Kategorien einzugrenzen, den Suchprozess zu leiten oder um ihnen zu helfen, ein Kontaktformular zu erstellen. Diese einfache, wartungsarme Struktur eignet sich für Websites mit minimalem Inhalt und wenigen Seiten, wie z. B. eine Website für kleine Unternehmen oder ein Online-Portfolio. 

Das sequentielle Modell beginnt auf der Homepage oder der Landing Page, die eine Reihe von Seiten oder Kategorien auflistet. Die Besucher:innen folgen einem linearen Fluss, der sie durch eine Reihe von übergeordneten Seiten führt und sie schließlich zu den gewünschten Inhalten bringt.

Wenn du eine eigene Landingpage erstellen möchtest, dann bietet sich der Landingpage-Builder von Wix dafür an.

Im folgenden Beispiel hat Aly Gray ihre Fitness-Website so gestaltet, dass die Benutzer:innen eine Schritt-für-Schritt-Reise erleben. Durch die Auswahlmöglichkeit von vier Arten von Trainingspaketen auf der Homepage können die Besucher:innen das aussuchen, welches ihnen am besten gefällt, und Seite für Seite den Anmeldeprozess durchlaufen.

Matrix-Modell

Die Matrix ist zwar eines der ältesten Modelle für die Strukturierung von Websites, ist aber auch heute noch beliebt. Eine Website-Struktur nach dem Matrix-Modell ist darauf ausgerichtet, den Besucher:innen ein angenehmes Surfen ohne strenge Kategorien zu ermöglichen, und hat keine starre Benutzer:innenführung im Sinn. Das mag chaotisch klingen, aber für die Besucher:innen bedeutet es völlige Freiheit und viele Einstiegspunkte zu allen Inhalten der Website. 

Kategorien, Unterkategorien und einzelne Seiten sollten zwar auch im Matrix-Modell vorhanden sein, aber du musst die Reihenfolge ihres Erscheinens für die Nutzer:innen nicht vorab festlegen. Stattdessen ermöglichen die strukturierten internen Verlinkungen sowie erweiterte Navigationsfunktionen, wie ein durchdachtes Website-Menü oder eine Suchleiste, ein angenehmes Erlebnis für Nutzer:innen. 

Eines der besten Beispiele für das Matrix-Modell auf Websites sind Online-Zeitungen, Online-Ressourcen oder große E-Commerce-Websites mit einer Vielzahl von Inhalten, die miteinander verbunden sind. Unten kannst du sehen, wie Tach Clothing ein Matrix-Modell auf ihrer Website umgesetzt haben. Hier werden die zusätzlichen Breadcrumbs (und die Breadcrumb-Navigation, die als sekundäre Navigation funktioniert) sowie ein Dropdown-Menü mit Vorschlägen für Trendprodukte in der Suchleiste genutzt, um die Besucher:innen auf die gewünschte Fährte zu locken.

Datenbank-Modell

Website-Strukturen, denen ein Datenbank-Modell zugrunde liegt, schaffen oft dynamische und personalisierte Erfahrungen. Besucher:innen einer solchen Website müssen in der Regel persönliche Daten, Fragen oder Vorlieben eingeben. Die Website präsentiert dann relevante Inhalte, die in der Datenbank der Website gespeichert sind, wie z. B. persönliche Vorlieben oder bestimmte Produktseiten.

Damit du ein Datenbank-Modell selber verwenden kannst, musst du mit einer Website-Software arbeiten, mit der du eine interne Datenbank erstellen oder eine externe Datenbank integrieren kannst. Wichtig ist, dass du ein möglichst dynamisches Content-Design entwirfst.

Die Unternehmenswebsite von Code Zero Yachts (siehe unten) hat mit Hilfe von Wix Velo eine ausgeklügelte Datenbasis integriert, die den Besucher:innen hilft, Yachten zu bestimmten Zeiten, in bestimmten Preisklassen und an bestimmten Orten zu finden. 

Tipp: Wenn du deine Website erstellen möchtest, ohne Code einzusetzen, dann probiere diese Tipps zur Website-Erstellung aus, um Inhalte aus Datenbanksammlungen anzuzeigen.

So gehst du die Struktur deiner Website an

Wenn du eine Website entwirfst, solltest du entscheiden, ob du eine Top-Down- oder eine Bottom-Up-Struktur für die Organisation deiner Inhalte verwenden willst. Während bei einem Top-Down-Ansatz zunächst eine Hierarchie von Kategorien auf der Grundlage der allgemeinen Themen der Website erstellt wird, beginnt ein Bottom-Up-Ansatz mit den unwichtigsten Unterkategorien und arbeitet sich zu den allgemeineren Kategorien und Inhalten hoch.

Beginnst du mit einer Vorlage, musst du dir nicht viele Gedanken über die Struktur deiner Website machen. Suche einfach nach einer Struktur, die zu deinen Inhalten passt. Wenn du eine Website von Grund auf neu erstellst, kann die Verwendung von UX-Tools für Phasen wie das Wireframing (d.h. man nutzt eine Art Gerüst für die Konzeption von Websites) und den Entwurf der Architektur deines Designs äußerst hilfreich sein.

Kennst du dich bereits mit den verschiedenen Website-Arten aus? Hier findest du zusätzliche Info über eine Art der Website, nämlich den One-Pager.

Warum solltest du Wert auf die Struktur deiner Website legen?

Damit Nutzer:innen ihr Ziel auf der Website erreichen können, müssen sie auf Elemente in einer bestimmten Reihenfolge stoßen. Nach Angaben von GoodFirms verlassen 34,6 % der Online-Besucher:innen eine Website, wenn sie eine schlechte Struktur hat. Unabhängig davon, ob du mit einer Website-Vorlage beginnst oder das Webdesign von Grund auf neu gestaltest, solltest du dafür sorgen, dass die Nutzer:innen genau das finden, was sie auf deiner Website suchen, und eine solide Website-Struktur gewährleisten, die ein optimales UX unterstützt.

Alexandra Eger

Blog Growth Managerin