Navigationen – Gedanken und Beispiele zum Thema

  • von Lennart Prange

thumbDie Navigation ist mit einem Inhaltsverzeichnis vergleichbar. Allerdings ist sie noch wichtiger: Ohne sie sind alle Unterseiten für die Nutzer unerreichbar – außer wenn diese die URL raten. Sie ist also eines der wichtigsten Elemente auf jeder Website (ausgenommen One-Page Seiten) und wohl das wichtigste interaktive Element überhaupt.
Ohne die Navigation läuft gar nichts.

In diesem Beitrag will ich auf die verschiedenen Navigationsmöglichkeiten eingehen und Beispiele zeigen.

Kommentare und Social Bookmarks würden mich sehr freuen. Viel Spaß mit dem Beitrag!

Die Position

Viele Bücher und Blogbeiträge sagen uns, dass die Navigation entweder horizontal über dem Content oder links am oberen Rand des Content dargestellt werden muss. Trotzdem sollte man alle Positionen in Betracht ziehen. 

Position bei nur einer Navigation

Die in der Einleitung genannten Möglichkeiten, also horizontal über dem Content oder links auf der Linie des Contents, sind zwei kugelsichere Varianten. Die beiden Positionen entsprechen den Erwartungen des Nutzers und vermeiden Verwirrung auf jeden Fall.

links_content_1

horizontal_1

Trotzdem wäre es ja langweilig, wenn man so eingeschränkt wäre. Eine weitere Möglichkeit ist es daher, die Navigation rechts und auf der Höhe des Contens zu positionieren. Einige würden mir hier vielleicht widersprechen, aber die Navigation auf der rechten Seite ist, soweit ich weiß, kein Nachteil. Das wurde wohl von mehreren Studien bewiesen (ich habe von diesen Studien gelesen, aber die Studien selber habe ich nicht gesehen). Die Positionierung auf der rechten Seite bietet sich an, um sich von der Masse abzuheben. Wer als Leitmotiv Innovation hat, kann dieses durch eine rechts ausgerichtete Navigation sehr schön zeigen.

rechts_1

Einige Seiten zeigen die Navigation auch am unteren Ende der Seite. Eine Möglichkeit, die ich nie in Betracht gezogen habe. Vor allem, wenn der Inhalt so lang wird, dass ein Nutzer scrollen muss, um zum Footer zu kommen, ist diese Möglichkeit meiner Meinung nach keine Möglichkeit mehr. Was haltet ihr von dieser Position? Meiner Meinung nach spricht überhaupt nichts dafür, außer vielleicht wieder die Verdeutlichung der eigenen Individualität.

Position bei Haupt –und Subnavigation

Umfangreiche Webseiten haben häufig so viele Seiten, dass die einzelnen Navigationspunkte erneut aufgeteilt werden. Diese Unterpunkte bilden dann die Unter –oder Subnavigation. Die Darstellung dieser Subnavigationen variiert. Es gibt hier viele Möglichkeiten um kreativ zu werden.

Drop Down Menü

Die Subnavigation als Drop Down Menü darzustellen und das Ganze horizontal über dem Content zu platzieren ist wahrscheinlich die nachvollziehbarste Variante. Die Nutzer kennen sie nämlich aus ihrem Betriebssystem und werden deswegen sofort damit umgehen können. So hat Quelle seine komplexe Navigationsstruktur angelegt.

hori_dropdown

Trotzdem kann man es auch anders machen. Bekannte Seiten wie die der Financial Times Deutschland oder Amazon haben die Navigation inklusive Drop Navigation Links vom Content platziert.

vert_drop_1

Das Drop Down Menü gibt es auch in einer verbreiteten anderen Variante

Diese Möglichkeit finde ich persönlich angenehmer als ein Drop Down Menü, da die Unterpunkte die ganze Zeit über sichtbar sind. Dieses Menü ist auch vertikal in Form eines Akkordions denkbar. 

hor_drop_2

Zweite Navigation

Eine weitere Möglichkeit ist es, das Ganze in zwei Navigationen aufzuteilen: Eine Hauptnavigation, meist horizontal über dem Content, und eine Subnavigation, meist Links vom Content. Die Subnavigation ist dynamisch und verändert ihren Inhalt je nachdem welcher Punkt der Hauptnavigation angewählt ist.

2navis

Navigationen müssen keine Listen sein

Fast alle Navigationen werden als Listen dargestellt. Das ist auch völlig ok so. Listen kann man schnell überblicken und sie zeigen einzelne Punkte an. Diese Listen müssen aber nicht wie Liste aussehen. CSS bietet die verschiedensten Möglichkeiten um diese zu gestalten und es ist selbstverständlich davon Gebrauch zu machen.

liste_interessante

Text

Eine Liste ist viel leichter zu überschauen als ein Text. Sie formuliert die Punkte prägnant und stattet sie nicht mit Füllwörtern aus. Offensichtlich ist eine Liste der beste Weg, um eine Navigation darzustellen. Trotzdem macht es Sinn, sich auch über alternative Navigationsmöglichkeiten Gedanken zu machen.
Happy Cog zeigt keine herkömmliche Navigation sondern verwendet einen Text. Das ist auch ganz pfiffig: Jede Website muss dem Nutzer erst mal sagen, worum es geht und dieser Text tut das. In den Text sind die einzelnen Navigationspunkte eingearbeitet und so spart Happy Cog ein wenig Platz und zeigt sich zudem mit einem innovativen Konzept.

happycog

Mehr Wege zur Navigation

Der schlaue Webdesigner bietet den Besuchern nicht nur die Hauptnavigation und eventuell Subnavigation um an ihr Ziel zu kommen. Er unterstützt sie mit weiteren, ganz anderen Mitteln. Wie schon gesagt, will ich diese nicht im Detail besprechen. Ein paar Beispiele sollt ihr trotzdem bekommen.

Sitemaps

Sitemaps enthalten alle Seiten einer Website und je komplexer eine Seite wird umso komplizierter wird auch die Gestaltung der Sitemap. Diese muss nachvollziehbar sein und übersichtlich aussehen. Faz.net macht das ganz gut, indem sie die Seite mehrfach unterteilen und den Nutzer nicht mit allen Informationen auf einmal bombadieren. 

sitemap

Breadcrumbs

Hänsel und Gretel haben es vorgemacht und Webdesigner machten es nach: Breadcrumb Navigationen zeigen dem Nutzer nicht nur, wo er gerade ist, sondern auch welchen Weg er bis dorthin zurückgelegt hat. Ich halte diese Form der Navigation für sehr hilfreich. Viel Platz einnehmen tut sie auch nicht und deswegen setze ich sie auch hier ein. Die Breadcrumb Navigation von Apple wird gerne nachgeahmt und ist ästhetisch tatsächlich recht ansprechend. Ob die Positionierung im Footer wirklich gelungen ist, halte ich für fraglich. 

breadcrumb

Tagclouds

Tagclouds sind eine viel benutze Möglichkeit um dem Nutzer den Schwerpunkt einer Seite schnell klarzumachen. Die Tags werden in verschiedenen Größen dargestellt – der meist genutzte Tag bekommt die größte Schriftgröße usw. Ich halte von dieser Möglichkeit nichts. Deswegen werdet ihr hier auch vergeblich nach so einer Tagcloud suchen.
Trotzdem sind sie visuell interessant und der Nutzer begreift sehr schnell, was hauptsächlich diskutiert wird. Die Tag Cloud von Webdesignerwall ist sehr klassisch. Heute findet man häufig auch Tag Clouds, die nicht nur die Schriftgröße sondern auch die Schriftfarbe und andere Attribute verändern.

tagcloud

Seiten

Inhalte auf mehrere Seiten aufzuteilen macht häufig Sinn. Google macht das, viele Online Shops machen das, Newsseiten machen das und und und. Der Grund sind neben der geringeren Ladezeit auch eine Erhöhung der Pageviews. Wer seine Inhalte auf verschiedene Seiten aufteilt, sollte die Navigation sehr deutlich darstellen. Es ist nicht gerade praktisch, wenn der Nutzer die Hälfte eines Artikels ließt und danach nicht weiter kommt, da er die Navigation nicht findet.
Das Smashingmagazine benutzt die typische Variante.  

page

Verlinkung

Internet Verlinkung wie „Ähnliche Beiträge“ oder auch Links im Fließtext sind aus SEO Sicht sinnvoll, sorgen für mehr Pageviews und geben dem Nutzer Möglichkeiten, neuen Inhalt zu entdecken, den sie vorher umständlich über das Archiv oder die Sitemap hätte suchen müssen.

verlinkung

Erfüllt die Erwartungen eurer Nutzer

Navigationen sollten auf Grund ihrer Bedeutung möglichst weit oben sein. Auf welcher Seite ist egal. Wenn eine Navigation in der Sidebar dargestellt wird, sollte ein anderes Element darüber sein. Das erwarten die Nutzer. Orientiert euch bei der Gestaltung und Struktur der Navigation an den gängigsten Betriebssystemen. Niemals (!) dürft ihr die Nutzer dazu zwingen, über eine Navigation nachdenken zu müssen. Deshalb scheitern die meisten innovativen Varianten. Natürlich könnt ihr an gewissen Stellen die Regeln etwas strapazieren. Grundsätzlich solltet ihr aber die Standards einhalten. 

Wenn ihr etwas anders daherkommen wollt, solltet ihr versuchen, dass durch interessante Gestaltung zu tun und nicht durch eine Neuerfindung des Systems. Es gibt genug Möglichkeiten: Interessante Rollover Effekte mit jQuery oder einfach eine coole Gestaltung der Liste mit Photoshop.

Fazit

Mir persönlich gefallen Kombinationen aus der normalen Haupt -und gegebenenfalls Subnavigation, einer Breadcrumb Navigation und interne Verlinkungen. Im Shop können das „Ähnliche Artikel“ oder „Das passt zusammen“ sein, bei Blogs freue ich mich über ähnliche Artikel und von Newsseiten wünsche ich mir besonders den Hinweis auf andere mediale Inhalte wie Filme.

Denkt über eure Navigationen nach und versucht dem Nutzer verschiedene Wege zu bieten.

19 Kommentare

  1. robertfork
    5. Juni 2009 um 19:10 Uhr

    finde ich eigentlich einen gelungenen beitrag, nur manche beispiele finde ich etwas merkwürdig und nicht grade positiv für gute navis, was aber auch nicht so schlimm ist.
    Zum Thema Navigation unten an der Seite, wenn sie IMMER zu sehen ist, damit meine ich wirklich immer und eben den content bspw. überlagert, dann kann auch eine Navigation am Boden der Seite gut sein, sofern sie auf sich aufmerksam macht. Hoffe du verstehst was ich meine 😀

    • Lennart Prange
      5. Juni 2009 um 19:11 Uhr

      Danke, verstehe was du meinst. Leider fällt mir dazu kein vernünftiges Beispiel ein. Sonst würde ich das gerne noch einbringen.

      • mischke
        6. Juni 2009 um 01:07 Uhr

        Beispiel: Facebook, da ist unten immer eine Zeile mit Links, Chat, Benachrichtigungen…

      • robertfork
        6. Juni 2009 um 12:37 Uhr

        die hauptnavi ist aber dennoch oben bzw. seitlich.
        das unten sind halt mehr oder weniger quicklinks für die profilbenutzung

  2. Fotodepp
    5. Juni 2009 um 19:35 Uhr

    Ich sehe keinen Text vor lauter großen Bilder nicht :/

    • Lennart Prange
      5. Juni 2009 um 19:37 Uhr

      Schade, wie kann ich das am besten verbessern? Bilder, die den Text unterbrechen weglassen und sie immer am Ende eines Abschnitts einfügen? Kleinere Bilder? Was würde dir zusagen?

      • Fotodepp
        6. Juni 2009 um 11:03 Uhr

        150×150 thumbnails würd ich sagen am besten per lightbox, aber die macht wieder viel traffic…also einfach thumbnails. 😀

      • GE
        6. Juni 2009 um 11:16 Uhr

        Kleinere Bilder mit Fliesstext daneben, evtl. per Klick vergrösserbar (viiieeeel Arbeit ;-).

        Aber am Ende ist das immer Geschmackssache und man kann endlos drüber diskutieren …

  3. Tobias
    5. Juni 2009 um 20:07 Uhr

    Navigation unten? Neue MoMA Seite, da funktioniert das recht gut und hat was markantes.

    Das HappyCog Prinzip, so gut die auch sind ist mehr oder weniger „Standard“ und nicht innovativ.

    Aber ein schöner Aritkel und eine schöne Auflistung.
    Der Screenshot mit der Peperoni sieht allerdings gruselig aus. Sowohl vom Aussehen der Navigation als auch von der Schriftglättung (ausgeschaltet? unter Win 2000 gemacht?)

  4. Alex B.
    5. Juni 2009 um 21:56 Uhr

    Nun ja, die Navigation rechts hat für mich persönlich einen entscheidenden Nachteil: Man liest von links nach rechts und sieht diese dadurch nicht sofort, oder zumindest nicht mit der nötigen Aufmerksamkeit. Da haben Navigationen links und oben den entscheidendsten Vorteil.

    Dies ist bei Blogs jedoch durchaus ein Vorteil, da man hauptsächlich den Content (letzten Beitrag) liest und sich dann umguckt. Also ich mache das meistens so. 😉 Lese einen verlinkten Beitrag und gucke dann was es sonst noch für Kategorien gibt.

    Zu den Bildern: Ja der Text geht etwas unter, aber ich persönlich wüsste auch nicht, wie man’s hätte besser machen sollen. Da solche Beiträge nicht so oft kommen, ist es also zu verkraften. Da ich weiß, dass hier immer gute Beiträge sind, mache ich mir auch die Mühe und gucke aufmerksamer. 😉
    Also kommt es wohl ganz auf die Art der Seite an.

    • Lennart Prange
      5. Juni 2009 um 23:19 Uhr

      Danke. Bezüglich der Rechtsbündigen Navigation: Ich habe genauso gedacht, bis ich in zwei Büchern von Studien gelesen habe, die bewiesen haben, dass es die Effektivität, mit der der Nutzer die Seite benutzt nicht verringert.

  5. bulldrinker
    6. Juni 2009 um 10:23 Uhr

    Die Navigation auf der rechten Seite halte ich für eine gelungene Alternative, aber unten bringt sie meiner Meinung nach gar nichts!

  6. GE
    7. Juni 2009 um 10:31 Uhr

    Eine Navigation unten kann schon sinnvoll sein, vor allem bei langen Seiten. Hier sollte unten eine Navi sein für den, der die Seite bis unten gelesen hat.

    Hier sollte der Leser dann Links finden wie „nach oben“, „weiter“, „zurück“, „ähnliche Artikel“ usw., bei einer Seite mit Ankern evtl nochmal die Links zu den Ankern.

    Die Hauptnavigation sollte aber immer im oberen, auch bei langen Seiten sichtbaren Bereich der Seite liegen. Wo konkret … hängt vom Seitentyp ab.

  7. Schorschi
    7. Juni 2009 um 21:34 Uhr

    Auch ein wirklich informativer Artikel!
    Habe bei einem meiner neuen Projekte gleich mal die Idee von Apple aufgegriffen 😛 Habe ich vorher nie bemerkt, dass sie so eine Navigation unten drin haben.

    Gruß Schorschi

  8. Connie
    9. Juni 2009 um 08:17 Uhr

    Das ist ein guter Artikel, kann ich gerade in einer „Entscheidungsfindung“ mit einem Kunden gut gebrauchen ;=)

  9. Connie
    9. Juni 2009 um 08:19 Uhr

    ich habe versucht, diese Seite auszudrucken, ist mir nicht wirklich gelungen, unmotivierte Seitenumbrüche etc.

    bitte kümmere dich mal um ein gescheites Printlayout, das wäre wirklich gut.,,

    • Lennart Prange
      9. Juni 2009 um 15:07 Uhr

      Stimmt, das fehlt noch. Danke.

  10. Markus Slaby
    10. Juni 2009 um 07:34 Uhr

    Eine Navigation am Seitenende finde ich als Zusatz ganz spannend – denn dann muss der Leser wenn er am Ende ist nicht erst hoch scrollen sondern kann direkt weiter klicken – aber nur als Zusatz und dann natürlich auch recht schlicht von der Aufmachung.

  11. Michael Singer
    28. März 2011 um 12:46 Uhr

    Meiner Wahrnehmung nach wird eine Navigation am Seitenende gelegentlich als barrierefreies Duplikat der Hauptnavigation verwendet, was, wenn es gut gemacht ist, durchaus sinnvoll ist.
    Beispiel: http://www.concrete5.org/