Modellierungsnavigation

Die Probleme ergeben sich aus der Tatsache, dass Entwickler*innen häufig die Navigation in einem einzigen API-Aufruf zurückgeben möchten und Editor*innen ihre Informationsarchitektur in ihren Content-Hierarchien innerhalb von Contentful sehen möchten. Wenn wir die Website-Navigation ausschließlich als „... visuelle Darstellung einer Informationsarchitektur behandeln, um den Nutzer*innen zu helfen, auf der Website zu navigieren“ (Wikipedia), hilft uns das, über Navigationsansätze nachzudenken, die Ihre Editor*innen hoffentlich nicht (zu sehr) verärgern.

Obwohl die Navigation als Darstellung der Informationsarchitektur einer Website fungiert, muss sie dies nicht unbedingt sein (obwohl dies eine Technik ist). Sie könnte einfach als eine Reihe von Labels und Hyperlinks dargestellt werden. Komplexere Navigationssysteme können auch erfordern, dass diese Label-/Hyperlink-Kombinationen eine Darstellung der Hierarchie haben (vielleicht ein übergeordnetes oder ein untergeordnetes Element). Dann könnte von mehreren Stellen auf ein Navigationselement zugegriffen und es wiederholt werden. Vielleicht gibt es Seiten, die der Owner möglicherweise nicht in der Navigation aufführen möchte, oder ein separater Abschnitt der Website benötigt möglicherweise eine eigene Navigation. Die mobile Version könnte eine eigene Navigation haben, oder verschiedene Sprachen könnten ihre eigenen Navigationsarten benötigen. Einige Navigationen könnten ein Untermenü haben, andere vielleicht nicht ...Sagen wir einfach, es könnte kompliziert werden.

Wenn wir herausfinden, wie wir die Modellierung der Navigation auf einige allgemeine Arten angehen könnten, sollten die meisten der oben genannten Szenarien abgedeckt werden. Wir erhalten ein Content-Modell, das sowohl für Entwickler*innen als auch für Editor*innen eine Freude ist. Wie bei jeder Content-Modellierungsübung ist es sinnvoll, wenn Sie mit einem vollständigen Verständnis Ihres Contents beginnen und von dort aus arbeiten, um einen effizienten Entscheidungsprozess anzustoßen. Wenn Sie zunächst auf Papier, mit Haftnotizen oder auf einem Whiteboard arbeiten, können Sie langfristig Zeit sparen, da sich Ihr mentales Modell ändern kann, wenn neue Informationen gesammelt werden. Ich würde auch empfehlen, dass die Modellierungsübung funktionsübergreifend mit einem Team von (mindestens) Designer*innen, Entwickler*innen und Editor*innen durchgeführt wird. Wir empfehlen, sich zuerst mit Topics und Assemblies vertraut zu machen, falls Sie dies noch nicht getan haben.

Navigationsmodellierung ist der Prozess des Entwerfens und Planens eines Navigationssystems für eine Website. Das Navigationsmodell hilft zu bestimmen, wie Content organisiert und den Nutzer*innen präsentiert wird. Ein Navigationsmodell ist wichtig, da es Ihnen hilft, den Content Ihrer Website auf eine Weise zu organisieren, die für Ihre Nutzer*innen sinnvoll ist. Wenn der Content Ihrer Website nicht richtig organisiert ist, werden die Nutzer*innen Schwierigkeiten haben, das zu finden, wonach sie suchen. Es wäre ungefähr so, als würde man versuchen, einen großen Text ohne Inhaltsverzeichnis zu durchsuchen. Dies kann zu Frustration führen und schließlich dazu, dass sie Ihre Website verlassen. Bei der Gestaltung von Navigationsknoten müssen Sie drei Schlüsselfaktoren berücksichtigen:

• Die Struktur des vollständigen Textes Ihrer Website.

• Wie Nutzer*innen mit Ihrer Website interagieren.

• Die gewünschte Nutzererfahrung.

Die Content-Struktur Ihrer Website umfasst die Hierarchie Ihrer Seiten und die Beziehungen zwischen ihnen. Dies wird als hierarchische Website-Navigation bezeichnet. Die Art und Weise, wie Nutzer*innen mit Ihrer Website interagieren, beschreibt, wie sie durch Ihren Content navigieren und welche Aktionen sie auf Ihrer Website ausführen. Die gewünschte Nutzererfahrung ist das allgemeine Gefühl, das Ihre Nutzer*innen bei der Nutzung Ihrer Website haben sollen. Möchten Sie, dass sie sich informiert, befähigt oder unterhalten fühlen? Dies sind wichtige Fragen, die Sie sich bei der Gestaltung Ihrer Website stellen sollten.

Die Erstellung eines Navigationsmodells ist nicht nur für Ihre Endnutzer*innen von Vorteil, sondern auch für den Gewinn Ihres Unternehmens. Wenn Sie ein perfektes Content-Navigationsmodell zusammenstellen, können Sie potenzielle Kund*innen besser durch Ihren Verkaufstrichter führen und die Nutzerfreundlichkeit Ihres Produkts steigern. Dadurch wird die Optimierung der Customer Journey viel einfacher und bietet eine großartige Gelegenheit, die Konversionen Ihrer Website zu steigern.

Die Navigation auf Websites ist ein umfangreicheres Thema, als es zunächst scheint. Es gibt drei Haupttypen der Website-Navigation: die hierarchische Navigation, die globale Navigation und die lokale Website-Navigation. Im Folgenden werden wir die einzelnen Typen erläutern:

Hierarchische Website-Navigation

Die hierarchische Navigation ist die häufigste Art der Website-Navigation. Sie wird manchmal auch als „baumartige Navigation“ bezeichnet, da sie die Organisation von Content in einem Dateisystem widerspiegelt. Die hierarchische Navigation beginnt mit einer Startseite und verzweigt sich von dort aus. Jede nachfolgende Seite hat einen engeren Fokus als die vorherige. Diese Art der Navigation ist leicht zu verstehen und zu verwenden, da sie abbildet, wie wir auf natürliche Weise über die Organisation von Informationen denken.

Globale Navigation

Die globale Navigation ähnelt der hierarchischen Navigation, da sie ebenfalls mit einer Startseite beginnt und sich von dort aus verzweigt. Die globale Navigation enthält jedoch auf jeder einzelnen Seite Links zu allen Seiten der Website. Diese Art der Navigation ist vorteilhaft, da sie es den Nutzer*innen ermöglicht, von überall auf der Website auf jede Seite der Website zuzugreifen. Sie kann jedoch auch überwältigend für die Nutzer*innen sein, wenn es zu viele Links gibt.

Lokale Website-Navigation

Die lokale Navigation ist spezifisch für eine einzelne Seite auf einer Website. Sie enthält Links, mit denen Nutzer*innen innerhalb des Contents dieser bestimmten Seite navigieren können. Diese Art der Navigation ist in langen Artikeln und Blogbeiträgen üblich. So können Nutzer*innen schnell zu dem Abschnitt der Seite springen, an dem sie interessiert sind, ohne durch den gesamten Content scrollen zu müssen.

Es gibt vier Möglichkeiten, wie Sie Ihre Navigationsmodule strukturieren können:

1. Sequentielle Navigation

2. Zufällige Navigation

3. Lineare Navigation

4. Hierarchische Navigation

Nachfolgend finden Sie eine detailliertere Erklärung der einzelnen Navigationsstrukturen:

Sequentielle Navigation

Die sequentielle Navigation wird manchmal auch als „Wizard-Navigation“ bezeichnet. Es ist eine Art der Navigation, bei der die Nutzer*innen eine Aufgabe erledigen müssen, bevor sie zur nächsten übergehen. Diese Art der Navigation ist auf E-Commerce-Websites während des Bezahlvorgangs üblich. Dies zwingt die Nutzer*innen, Aufgaben in einer bestimmten Reihenfolge zu erledigen, was für diese Art von Websites nützlich ist.

Zufällige Navigation

Die zufällige Navigation ähnelt der sequenziellen Navigation, da auch hier die Nutzer*innen eine Aufgabe erledigen müssen, bevor sie zur nächsten übergehen. Bei der zufälligen Navigation ist die Reihenfolge, in der Aufgaben erledigt werden, jedoch nicht vorgegeben. Diese Art der Navigation ist auf Websites mit viel Content üblich, z. B. auf Nachrichtenseiten und Social-Media-Seiten. Dies ist eine großartige Option für Verbraucher*innen, da sie Content in einer beliebigen Reihenfolge durchgehen können, anstatt Content auf vorgegebene Weise zu erkunden.

Lineare Navigation

Die lineare Navigation ist eine Art der Navigation, bei der die Nutzer*innen von jeder beliebigen Seite der Website auf eine andere zugreifen können. Diese Art der Navigation ist bei Blogbeiträgen, Tutorials und langen Artikeln üblich. Dies ist ein ideales Modell, da es Nutzer*innen ermöglicht, zu jedem Abschnitt des Contents zu springen, an dem sie interessiert sind, ohne durch den gesamten Content scrollen zu müssen.

Hierarchische Navigation

Die hierarchische Navigation ist eine Art der Navigation, bei der jede nachfolgende Seite einen engeren Fokus hat als die vorherige. Diese Art der Navigation ist auch auf E-Commerce-Websites üblich. Dies ist vorteilhaft, da Nutzer*innen zu einer bestimmten Produktkategorie gelangen, ohne durch alle Produkte auf der Website scrollen zu müssen. Im Folgenden finden Sie einige weitere Möglichkeiten, wie Sie Ihr Content-Navigationsmodell strukturieren können:

Sobald Sie eine Navigationsstruktur ausgewählt haben, müssen Sie herausfinden, wie Sie Ihren Content oder Ihre Informationsarchitektur (I.A.) organisieren und verbinden können. Lassen Sie uns ein paar Optionen für diesen Schritt betrachten.

Topic-Beziehungen

Dieses Modell ist großartig, wenn Ihr Content wirklich reiner thematischer Content ist, der dann mit einem anderen Satz von Dingen analysiert/gerendert wird. Wenn die rohen „Dinge“ in Ihrem Content miteinander in Beziehung stehen und Sie möchten, dass diese Informationen so dargestellt werden, dann kann dieses Muster für Sie funktionieren.

Die genauen Implementierungen variieren, aber der Prozess ist derselbe:

• Definieren Sie die Beziehungstypen (Eltern, Kind, Geschwister).

• Definieren Sie die Validierungsregeln für diese Beziehungen (kann nur einen übergeordneten Teil haben, gleichrangige Teile müssen vom gleichen Typ sein usw.).

• Fügen Sie die Beziehungsfelder zu Ihren Topics hinzu.

• Fügen Sie die verknüpften Einträge in die Beziehungsfelder ein.

Wenn Sie die Navigation auf diese Weise generieren, kann die Beziehung gleichzeitig mit dem Hauptteil des Contents abgerufen werden. Referenzfelder mit einem linkType zu einem Eintrag erstellen dann Ihre Beziehungen, und Ihre Anwendung kann dies leicht analysieren. Dies im Voraus zu tun, um die Navigation zu generieren, kann kostspielig sein, sodass dieser Ansatz vielleicht am besten für Websites geeignet ist, die entweder statisch sind oder eine serverseitige Komponente haben.

Assembly-Beziehungen

Wenn Ihr Content speziell für die Anzeige auf einer Website konzipiert ist und die Seiten-Assembly die wichtigste Art und Weise ist, wie Nutzer*innen auf den Content zugreifen (z. B. über eine URI), dann sind Assembly-Beziehungen möglicherweise die beste Lösung für Sie.

Wenn Ihre Assemblies untergeordnete Elemente haben, die Topics sind, können sie auch untergeordnete Elemente haben, die die Beziehungen definieren. Es ist jedoch wichtig zu beachten, dass die Seiten Beziehungen haben, nicht die Topics selbst (obwohl dies mit anderen Beziehungen in den Topics kombiniert werden könnte, z. B. eine lockerere Beziehung wie „verbunden mit“).

Der Implementierungsprozess ist derselbe wie bei den Topics-Beziehungen, folgt jedoch möglicherweise einer strengeren Sitemap-Struktur.

Navigations-Contenttyp

Sie können die Navigation auch anders betrachten, die oben genannten Ansätze auf den Kopf stellen und einen Contenttyp erstellen, der speziell Navigationsinformationen enthält, und Seiten oder Topics als Referenzen innerhalb dieses Contenttyps strukturieren.

Dies ermöglicht mehrere Navigationselemente, die besonders nützlich sein können, wenn Ihre Website oder Anwendung unterschiedliche Menüs hat. Dies kann als flexible oder unflexible Hierarchie eingerichtet werden, abhängig von den Feldern und der Validierung, die Sie in Ihren Navigations-Contenttyp aufnehmen.

Diese können dann als Unterbaugruppen in Ihrem Content-Modell verwendet und wiederverwendet oder in verschiedenen Teilen Ihrer Seite angezeigt werden.

Eine Erweiterung des obigen Ansatzes wäre, einen anderen Contenttyp zu verwenden, der üblicherweise als Routing-Objekt bezeichnet wird. Dieser kann Informationen über den Standort der Seite (URL-Teil/Bildschirmtiefe usw.) enthalten und kann dann entweder an die Seiten-Assembly oder das Topic angehängt sowie als Blattknoten anstelle der Seite oder des Topics selbst verwendet werden. Dieser Ansatz ist wirklich nützlich, um die Navigation separat zu handhaben.

Die Erstellung eines Navigationsmodells für verschiedene Seiten muss nicht schwierig sein. Im folgenden Beispiel gibt es drei Hauptkomponenten eines Content-Navigationsmodells: strukturelle, assoziative und Utility-Seiten.

• Strukturell: Dies sind Hauptseiten, die sich auf Topics und Haupt-Contenttypen konzentrieren. 

• Assoziativ: Dies sind verwandte Seiten, die durch interne oder Navigationslinks mit den strukturellen Seiten verbunden sind. 

• Utility: Dies sind Seiten, die dem Navigationsmodell einen Zweck verleihen, aber nicht untrennbar mit anderen Seiten verbunden sind.

Nachdem Sie nun die Grundlagen von Navigationsmodellen verstanden haben, ist es wichtig, einige Schlüsselfaktoren zu berücksichtigen, bevor Sie mit der Entwicklung Ihres eigenen Modells beginnen. Hier sind zwei wichtige Überlegungen, die Sie beachten sollten:

1. Berücksichtigen Sie die Nutzer*innen

Das von Ihnen erstellte Navigationsmodell sollte auf die Nutzer*innen zugeschnitten sein. Es sollte einfach zu bedienen und auf die Benutzeroberfläche abgestimmt sein. Sie müssen auch berücksichtigen, welche Art von Geräten Ihre Nutzer*innen verwenden, um auf Ihre Website zuzugreifen. Verwenden sie einen Desktop-Computer, ein Mobiltelefon oder ein Tablet? Jeder Gerätetyp hat unterschiedliche Bildschirmgrößen und Auflösungen, daher ist es wichtig, dies bei der Erstellung Ihres Navigationsmodells zu berücksichtigen.

2. Berücksichtigen Sie den Content

Es ist auch wichtig, ein Modell zu entwerfen, das den zu erstellenden Content berücksichtigt. Sie müssen die Hierarchie des Contents und seine Organisation berücksichtigen. Sie müssen auch verstehen, wie die Navigation mit den verschiedenen Arten von Content auf Ihrer Website funktioniert. Wenn Sie beispielsweise ein Whitepaper oder eine Fallstudie haben, die in Abschnitte unterteilt sind, müssen Sie überlegen, wie die Nutzer*innen zwischen diesen Abschnitten navigieren. Wenn Sie eine E-Commerce-Website haben, müssen Sie überlegen, wie die Nutzer*innen zwischen Produkten und Produktkategorien navigieren.

Die Erstellung eines Navigationsmodells hängt davon ab, wie gut Sie Ihre Zielgruppe, Ihren Verkaufstrichter und die Customer Journey Ihrer Branche verstehen. Die Beratung mit Ihren Vertriebs- und Marketingteams hilft Ihnen letztendlich, ein geeignetes Content-Navigationsmodell für Ihr digitales Produkt bereitzustellen. Contentful macht es Ihnen leicht, Ihr Navigationsmodell ohne Kopfzerbrechen aufzubauen. Registrieren Sie sich für ein kostenloses Contentful Konto oder fordern Sie eine Demo an, um zu sehen, wie unser Produkt den gesamten Prozess vereinfachen kann.

Häufig gestellte Fragen (FAQs)

Welche Arten der Website-Navigation gibt es?

Die verschiedenen Arten der Website-Navigation sind die hierarchische Navigation, die globale Navigation und die lokale Website-Navigation.

Was ist ein Navigationsdiagramm?

Ein Navigationsdiagramm ist ein digitales Modell, das zeigt, wie die Navigation eines Produkts aussehen wird, sobald das endgültige Design abgeschlossen ist.

Was ist eine Navigationshierarchie?

Die Navigationshierarchie ist ein Modell, bei dem Contenttypen nach übergeordneten und untergeordneten Elementen zusammengestellt werden. Seiten auf oberster Ebene, die als „Parents“ bezeichnet werden, sind umfangreicher. Support-Seiten werden als „Children“ bezeichnet und ergänzen die übergeordneten „Parent“-Seiten.