![\"Komplexe](\"https:\/\/thomas-sokolowski.com\/de\/wp-content\/uploads\/2020\/10\/To-many-Levels.png\")
<\/a><\/figure>\r\n\r\n\r\n\r\n<\/p>\r\n\r\n\r\n\r\n
Die wirklich sehr umfangreiche Website der Schweizerischen Bundesbahnen (https:\/\/www.sbb.ch\/<\/a>) ist ein gutes Beispiel f\u00fcr diesen Kompromiss. Sie kommt mit insgesamt 3 Hierarchie-Ebenen aus (1. Ebene: 5 Elemente, 2. Ebene: 3 bis 5 Elemente, 3. Ebene: 3 bis 9 Elemente).<\/p>\r\n\r\n\r\n\r\n <\/p>\r\n Mit einem Mega-Dropdown<\/a> kann ein Nutzer auf einem Desktop-Ger\u00e4t mit einem Klick direkt auf die dritte Hierarchie-Ebene gelangen. Von dort aus kann er iterativ \u00fcber Teaserboxen die tiefsten Seiten der Informationsarchitektur erreichen.<\/p>\r\n Grundlage f\u00fcr dieses nutzerfreundliche Erlebnis war ein \u00fcbergreifendes Organisations-, Inhalts- und Strukturkonzept, das genau diese Navigation des Nutzers erm\u00f6glicht, indem es Inhalte auf verschiedene Webseiten verteilt, auf das Wesentliche reduziert und zusammenh\u00e4ngende Informationen in \u00abContent Cluster\u00bb b\u00fcndelt.<\/p>\r\n Durch eine sinnvolle, vertraute und \u00fcbersichtliche Anordnung der Navigationselemente soll sich der Nutzer schnell im Navigationssystem zurechtfinden. F\u00fcr den Nutzer ungewohnte Abl\u00e4ufe oder Funktionen m\u00fcssen konsistent sein, da sonst die Erlernbarkeit beeintr\u00e4chtigt wird.<\/p>\r\n Der Benutzer sollte bei der Suche und Auswahl von Informationen durch geeignete und verst\u00e4ndliche Beschreibungen unterst\u00fctzt werden. Dies kann auch durch zus\u00e4tzliche erl\u00e4uternde Informationen (Texte, Bilder) innerhalb der Navigation oder durch \u00dcbersichtsseiten (die durch Anklicken eines Men\u00fcpunktes aufgerufen werden) geschehen. Gerade bei Navigationen mit vielen Fachbegriffen und f\u00fcr den Nutzer unbekannten Begriffen erh\u00f6hen diese zus\u00e4tzlichen Hilfen die Usability und das Nutzererlebnis.<\/p>\r\n Der Benutzer soll mit m\u00f6glichst geringem Aufwand zum gew\u00fcnschten Inhalt gelangen (m\u00f6glichst kurze Wege, m\u00f6glichst wenige Klicks, max. 3 bis 4).<\/p>\r\n Die Navigation sollte m\u00f6glichst mit Elementen ausgestattet sein, die dem Benutzer vertraut sind und sich selbst erkl\u00e4ren. Funktional relevante klicksensitive Elemente sollten klar als solche erkennbar sein, da sie sonst nicht genutzt werden. Eine nutzerzentrierte Semantik ist unabdingbar. Werden Piktogramme oder Symbole in der Navigation verwendet, m\u00fcssen diese im jeweiligen Nutzungskontext bekannt und verst\u00e4ndlich sein.<\/p>\r\n Die h\u00e4ufigsten Suchanfragen sollten sich auch in den Namen der Men\u00fcelemente der Navigation widerspiegeln. Jeder Men\u00fcpunkt sollte idealerweise einen Link zu einer Seite mit passendem, nicht redundantem Inhalt enthalten.<\/p>\r\n Einsatz von Pillar-Pages<\/strong> Von einer \u00abPillar-Page\u00bb aus werden Links zu Unterseiten des jeweiligen Themenclusters bereitgestellt, die sich mit spezifischen Details befassen. Durch diese Unterseiten, die auch auf die \u00fcbergeordnete \u00abPillar-Page\u00bb zur\u00fcck verweisen, b\u00fcndelt die \u00abPillar-Page\u00bb die gesamte thematische Relevanz und geniesst eine \u00e4usserst hohe Sichtbarkeit in Suchmaschinen.<\/p>\r\n \u00abPillar-Pages\u00bb spielen eine wichtige Rolle bei der Suchmaschinenoptimierung, da sie dazu beitragen, die Sichtbarkeit einer ganzen Website zu erh\u00f6hen. Durch die Fokussierung auf relevante Schwerpunktthemen (auch Corner-Stone-Content genannt) und die Bereitstellung umfassender Inhalte k\u00f6nnen \u00abPillar-Pages\u00bb eine starke Pr\u00e4senz in den Suchergebnissen erlangen und eine h\u00f6here Autorit\u00e4t f\u00fcr das entsprechende Thema aufbauen.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n Im Prinzip gibt es nur zwei verschiedene Navigationskonzepte, die jedoch, kombiniert und angepasst, zu verschiedenen Mischformen f\u00fchren.<\/p>\r\n Zum einen gibt es Navigationen, die direkt eine Seite laden, sogenannte “Non-Popup-Navigationen”, zum anderen gibt es Navigationen, die mit einem Klick untergeordnete Hierarchieebenen \u00f6ffnen, bis man die unterste Ebene erreicht hat – erst dort kann man eine Seite \u00f6ffnen, sogenannte “Popup-Navigationen”.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n Bei konsequenter Anwendung f\u00fchrt diese Art der Navigation neben der globalen Top-Level-Navigation*3 zu Unterseiten mit einem Teaser oder einer kontextabh\u00e4ngigen On-Page-Navigation (*4). Dies ist der klassische Ansatz des Web 1.0, der heute aufgrund seiner hohen \u00dcbersichtlichkeit eine Renaissance erlebt und sich vor allem bei Online-Shops gro\u00dfer Beliebtheit erfreut.<\/p>\r\n Sie kommt vor allem dort zum Einsatz, wo der Nutzer mit vielen unbekannten Namen, Strukturen und Inhalten konfrontiert wird und sich iterativ zus\u00e4tzliche Informationen beschaffen muss, um zum gew\u00fcnschten Ziel zu gelangen. Sie ist daher gut geeignet, wenn sich NutzerInnen umfassend \u00fcber ein Thema informieren m\u00f6chten.<\/p>\r\n Ein Beispiel f\u00fcr diese Art der Navigation ist die Desktop-Navigation der Stadt Z\u00fcrich (https:\/\/www.stadt-zuerich.ch<\/a>). Der Nachteil dieser Art der Navigation besteht darin, dass jeder Klick des Nutzers einen Seitenaufbau zur Folge hat, der mit Ladezeiten verbunden ist, so dass eine Navigation \u00fcber mehr als drei Hierarchieebenen von vielen Nutzern als umst\u00e4ndlich und anstrengend empfunden wird.<\/p>\r\n Insbesondere bei der Verwendung von Teasern (\u00fcber sogenannte Verteilerseiten) wird die Navigation auf kleineren Viewports (mobile Endger\u00e4te) sehr un\u00fcbersichtlich, da viel gescrollt werden muss und das h\u00e4ufige Nachladen der Seiteninhalte zu einem Geduldsspiel wird. (siehe z.B. https:\/\/www.postfinance.ch\/de\/privat\/produkte.html<\/a> oder https:\/\/www.sbb.ch\/de\/abos-billette\/kaufmoeglichkeiten\/verkaufskanaele.html<\/a>)<\/p>\r\n Bei dieser Art der Navigation spielt die Breadcrumb f\u00fcr die meisten Nutzer eine wichtige Rolle als Orientierungshilfe auf Desktop-Viewports. In diesem Fall sollte sie besonders benutzerfreundlich und aussagekr\u00e4ftig sein.<\/p>\r\n Aufgrund der bekannten negativen Auswirkungen auf die Usability auf mobilen Endger\u00e4ten wird diese Art der Navigation in der Regel nicht mobil eingesetzt, wie z.B. bei der Stadt Z\u00fcrich, die mobil die nachfolgend beschriebene Popup-Navigation einsetzt.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n Ein modernerer, aber nicht immer besserer Ansatz ist die sogenannte \u00abPopup-Navigation\u00bb. Bei konsequenter Anwendung f\u00fchrt diese Art der Navigation dazu, dass Men\u00fcpunkte, die Unterseiten \u00f6ffnen, keinen eigenen Seiteninhalt haben, was sich negativ auf die SEO auswirken kann. Zum Aufklappen von Unterseiten kann eine Vielzahl von Frontend-Technologien verwendet werden, z.B. Akkordeons, Dropdowns, Flyouts, Off-Canvas, um nur die wichtigsten zu nennen.<\/p>\r\n Dar\u00fcber hinaus wird bei einer sehr tiefen Navigation der Prozess der Auswahl der Zielseite, den der Nutzer komplett in einem Schritt innerhalb der Navigation durchf\u00fchren muss, von vielen Nutzern als anstrengend empfunden.<\/p>\r\n Dieser Ansatz funktioniert gut f\u00fcr Nutzer, die genau wissen, was sie suchen und keine erkl\u00e4renden oder zus\u00e4tzlichen Informationen innerhalb ihrer User Journey ben\u00f6tigen. Diese Nutzer k\u00f6nnen mit einem einzigen Navigationszugriff direkt zu einer Seite springen, die sehr tief in der Seitenhierarchie “versteckt” ist, ohne weitere Seiten neu laden zu m\u00fcssen. Daher werden diese Navigationen auch als “Deep Level Navigation” bezeichnet.<\/p>\r\n Auf Ger\u00e4ten, die neben dem Mausklick auch ein Mouse-Over als Aktivierungsm\u00f6glichkeit anbieten, werden h\u00e4ufig beide Formen (Non-Popup und Popup) gemischt. Ein Mouse-Over \u00f6ffnet eine Unterebene in der Navigation (z.B. \u00fcber eine Ziehharmonika-Funktionalit\u00e4t), w\u00e4hrend ein Klick eine Unterseite \u00f6ffnet. Das Problem stellt sich dann allerdings responsiv – denn die Touchscreens unserer mobilen Ger\u00e4te haben keine Maus und damit auch kein Mouse-Over.<\/p>\r\n Alternativ kann man das Problem umgehen, indem man eine zweigeteilte Funktionalit\u00e4t hinter den Kategorie-Punkten einsetzt. Dabei werden meist Pfeile rechts neben dem Men\u00fc-Eintrag positioniert, um den Benutzern zu verdeutlichen, dass sich hinter diesen Men\u00fc-Elementen eine weitere Hierarchie-Ebene verbirgt. Ein Klick auf den Men\u00fcpunkt \u00f6ffnet eine dahinterliegende Seite, w\u00e4hrend ein Klick auf den Pfeil eine weitere Unterebene innerhalb der Navigation \u00f6ffnet. Benutzertests haben jedoch gezeigt, dass diese Funktionalit\u00e4t von den Benutzern nicht immer verstanden oder schlichtweg nicht genutzt wird.<\/p>\r\n Falls Sie diese Navigationsart verwenden m\u00f6chten, hat es sich bew\u00e4hrt, auf jeder Ebene eine \u00dcbersichts- bzw. Verteilerseite zu implementieren, die alle Seiten der gew\u00e4hlten Kategorie darstellt (siehe z.B. https:\/\/www.postfinance.ch<\/a>).<\/p>\r\n Von Nutzersicht stellt sich jedoch die Frage, ob es sinnvoll ist, f\u00fcr jede Kategorie \u00dcbersichts- oder Einstiegsseiten anzulegen. Gerade bei sehr allgemeinen Top-Level-Navigations-Elementen wie \u00abUnsere Produkte\u00bb oder \u00ab\u00dcber uns\u00bb kann man problemlos auf eine Einstiegs- oder \u00dcbersichtsseite verzichten. Diese Seiten geniessen bei einer organischen Suche (also \u00fcber Suchmaschinen) keine Relevanz und bieten dem Nutzer auch keinen wirklichen Mehrwert, im Gegenteil: sie erfordern einen weiteren, unn\u00f6tigen Klick. Ein Beispiel hierf\u00fcr ist: https:\/\/www.postfinance.ch\/de\/privat\/beduerfnisse.html<\/a>. Auf dieser eigentlich \u00fcberfl\u00fcssigen Seite wurde aus Verlegenheit ein Absatz mit einem kurzen, unn\u00f6tigen Werbetext platziert.<\/p>\r\n Ein guter Kompromiss besteht darin, einen Teil der Navigation (z.B. die Top-Level-Navigation und bis zu zwei Ebenen darunter) \u00fcber eine Pop-up-Navigation darzustellen und alle weiteren Ebenen \u00fcber ein On-Page-Navigations-System erreichbar zu machen. Dies wird beispielsweise von https:\/\/sbb.ch<\/a> auf diese Weise so umgesetzt.<\/p>\r\n Die Terminologie der Top-Level-Navigation sollte der allgemeinverst\u00e4ndlichste Teil des Navigationssystems sein. Die Elemente sollten sehr selbsterkl\u00e4rend sein, wie z.B. \u00abUnsere Produkte\u00bb. Da diese Men\u00fcpunkte semantisch sehr generisch sind, spielen sie als Keywords bei der organischen Suche keine grosse Rolle. Denn wer sucht schon nach \u00abProdukte\u00bb? Falls Kategorie-Seiten hinterlegt werden, ist auch deren Inhalt bei Suchanfragen kaum sichtbar. Das sollte bei der Planung der Site-Struktur bewusst sein.<\/p>\r\n Im Gegensatz dazu verwenden Men\u00fc-Elemente in den unteren Hierarchieebenen oft Begriffe, die nicht so allgemein verst\u00e4ndlich sind und daher mehr Erkl\u00e4rung ben\u00f6tigen. Die Relevanz bzw. Verst\u00e4ndlichkeit dieser Men\u00fcelemente wird daher durch Teaser und erkl\u00e4rende Texte unterst\u00fctzt.<\/p>\r\n Aus diesem Grund finden sich Nutzer in den ersten 2 bis 3 Hierarchieebenen leicht zurecht und w\u00fcnschen sich in der Regel eine Pop-up-Navigation, die sie entweder direkt auf die Zielseite oder auf eine relevante Verteiler-\/\u00dcbersichtsseite f\u00fchrt. Dort k\u00f6nnen sie dann mithilfe einer On-Page-Navigation oder Teasern schrittweise in interesante Unterseiten eintauchen.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n <\/p>\r\n\r\n *1: Tag<\/strong> *2: Das Sieben Ph\u00e4nomen<\/strong> *3: Top-Level-Navigation<\/strong> In der Desktop-Ansicht einer Website bleibt sie normalerweise auf allen Seiten sichtbar; oft sogar \u00absticky\u00bb, d.h. beim Scrollen einer Seite bleibt sie im oberen Viewport des Browsers sichtbar. Dadurch wird ihre Bedeutung f\u00fcr die Benutzernavigation einer Website unterstrichen.<\/p>\r\n Auf vielen kleineren Websites (ca. 1 bis 9 Seiten) besteht die Benutzernavigation ausschliesslich aus der Top-Level-Navigation. Auf gr\u00f6\u00dferen Websites wird durch \u00abMouseover\u00bb oder Klick auf eines der Elemente ein Dropdown-Men\u00fc oder ein Akkordeon mit untergeordneten Men\u00fcelementen ge\u00f6ffnet.<\/p>\r\n *4: On-Page-Navigation<\/strong> In der Regel listet diese Navigation ihre Geschwisterseiten auf, manchmal auch untergeordnete Seiten – was sie in beiden F\u00e4llen von der Breadcrumb-Navigation unterscheidet, die nur ihren \u00abPfad\u00bb anzeigt (d.h. nur die \u00fcbergeordneten Seiten).<\/p>\r\n\r\n <\/p>\r\n\r\n <\/p>","protected":false},"excerpt":{"rendered":" Websites werden immer komplexer, multimedialer und multifunktionaler. Navigationssysteme spielen daher eine immer wichtigere Rolle.<\/p>\n","protected":false},"author":1,"featured_media":1079,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[4],"tags":[21,24,23],"class_list":["post-1052","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-informationsarchitektur","tag-information-architecture","tag-user-navigation","tag-website-navigation"],"_links":{"self":[{"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/posts\/1052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/comments?post=1052"}],"version-history":[{"count":16,"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/posts\/1052\/revisions"}],"predecessor-version":[{"id":1299,"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/posts\/1052\/revisions\/1299"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/media\/1079"}],"wp:attachment":[{"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/media?parent=1052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/categories?post=1052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thomas-sokolowski.com\/de\/wp-json\/wp\/v2\/tags?post=1052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/a><\/figure>\r\n\r\n\r\n\r\nMen\u00fc-Struktur<\/h4>\r\n
Erwartungskonformit\u00e4t und Erlernbarkeit<\/h4>\r\n
Verst\u00e4ndlichkeit<\/h4>\r\n
Einfache Bedienbarkeit<\/h4>\r\n
Intuitivit\u00e4t<\/h4>\r\n
Unterst\u00fctzung der Sichtbarkeit in den Suchmaschinen (SEO)<\/h4>\r\n
\u00abPillar-Pages\u00bb ist ein Begriff aus der Suchmaschinenoptimierung. Er wird verwendet, um Einstiegs- oder \u00dcbersichtsseiten zu beschreiben, die einen umfassenden \u00dcberblick \u00fcber ein Thema geben und den Benutzern Orientierung bieten. Sie bilden das Zentrum eines \u00abThemen-Clusters\u00bb.<\/p>\r\n\u00a0<\/h2>\r\n
Navigationskonzepte<\/h2>\r\n
Non-Popup-Navigationen<\/h4>\r\n
Popup-Navigation<\/h4>\r\n
Hybride Formen<\/h4>\r\n
Glossar<\/h3>\r\n
Ein Tag ist ein klickbares Etikett oder\u00a0 Kennzeichnung und erm\u00f6glichen es den Nutzern, nach \u00e4hnlichen Inhalten zu suchen oder Beitr\u00e4ge zu dem damit gekennzeichneten Thema zu finden.<\/p>\r\n
Im engl. auch \u00abMagische Zahl Sieben\u00bb genannt, beschreibt die Tatsache, dass eine Person nur 7 \u00b1 2 Einheiten an Informationen gleichzeitig in ihrem Kurzzeitged\u00e4chtnis halten und verarbeiten kann. Cluster mit bis zu maximal sieben Elementen empfinden wir als \u00fcberschaubar und angenehm – gr\u00f6ssere Gruppen \u00fcberfordern unsere Wahrnehmung und stressen uns (https:\/\/de.wikipedia.org\/wiki\/Millersche_Zahl<\/a>).<\/em><\/p>\r\n
Die \u00abTop-Level-Navigation\u00bb (auch Prim\u00e4r-Navigation genannt) befindet sich normalerweise im Kopfbereich einer Website und zeigt die Elemente der obersten Hierarchieebene der Website an – oft horizontal. Auf einigen Websites und fast allen kleineren Ansichten (Mobilger\u00e4ten) wird sie \u00fcber das sogenannte \u00abHamburger-Men\u00fc-Symbol\u00bb aufgerufen. Dort werden die Elemente in einem ausgeblendeten Men\u00fc meist vertikal angeordnet.<\/p>\r\n
Eine \u00abOn-Page-Navigation\u00bb ist eine Navigation, die sich nicht im typischen Navigationsbereich befindet (z.B. Header oder Footer), sondern im Inhaltsbereich. Normalerweise befindet sie sich in einem Kasten oder Bereich unterhalb des Headers oder in einer Spalte links vom Inhalt.<\/p>\r\n