Navigation

Eine Internetsite soll schnell erkennen lassen, was sie bietet und unkomplizierten Zugriff auf die Unterseiten gewähren. Bei der Navigation haben sich die Zeile im oberen Bereich oder eine Liste links als Quasi-Standards etabliert. Rechts werden gewöhnlich lediglich zusätzliche oder weiterführende Links erwartet.

Die Navigation erfolgt wenn immer möglich mit Text statt Buttons oder Grafiken.

Die Navigationslogik orientiert sich an der Leserichtung: von links oben nach rechts unten. Ein Navigationselement in der rechten unteren Ecke erhält die geringste Aufmerksamkeit. Der Theorie folgend, dass das Wichtigste an einer Internetseite der Inhalt sein soll, erhält dieser den größten Bereich. Zusätzliche Links können sich auch unter dem Inhalt befinden, um nicht von diesem abzulenken und bereitzustehen, wenn der Inhalt „durchgearbeitet“ wurde.

Die Navigation kann sehr verschieden organisiert sein:

  • hierarchisch (Ober- und Untergruppen wie bei axin.de)
  • linear (zeitlich sortiert wie in einem Blog)
  • unsortiert (kein Direktzugriff wie bei Wikipedia, dafür mächtige Suchfunktion)
  • grafisch (als anklickbare Bildelemente)

Für den jeweils konkreten Zweck ist jeweils eine geeignete Navigationsform zu finden, die den Nutzer erkennen lässt, welche Art von Informationen er wo und wie finden wird.

Etabliert sind Menüs und Brotkrumen-Navigation. Erstere sortiert die Inhalte hierarchisch und bietet so raschen Zugriff auf gewünschte Teile einer Website. Die Brotkrumen erscheinen häufig zwischen der Navigation und dem eigentlichen Inhalt. Dabei wird der hierarchische Pfad zur aktuellen Seite abgebildet, beispielsweise „Startseite > Rubrik 1 > Unterrubrik 3 > Unterkategorie 13 > aktueller Beitrag“. So kann der Nutzer immer erkennen, in welchen Kontext der aktuelle Inhalt gehört und bei Bedarf einfach eine oder zwei Ebenen höher navigieren.

Aufbau des Bildschirms

Zu Beginn ist das Makro-Layout der Bildschirmaufteilung zu definieren. Das entspricht dem Satzspiegel, wie er im Print-Design verwendet wird. Dabei liegt ein unsichtbares Raster hinter jeder Seite, an dem alle Seitenelemente (Textspalten, Überschriften, Bilder) ausgerichtet werden. Der Satzspiegel und die Layoutregeln, wie und wo Elemente integriert werden, verleihen jeder Zeitung und Zeitschrift ihr eigenes Aussehen bereits auf der strukturellen Ebene der Gestaltung. Anhand der Seitenaufteilung und des Satzspiegels lassen sich Zeitungen von Zeitschriften leicht unterscheiden und sogar die verschiedenen Zeitschriftentypen.

Im Interface-Design wird kein Papier bedruckt, sondern die Monitorfläche mit Inhalt und Funktionselementen gefüllt. Doch auch hier haben sich Konventionen etabliert, die bereits auf der abstrakten, strukturellen Ebene verraten, um was für eine Webseite oder Software es sich handelt.


Der Grundaufbau verrät den Zweck der Software bzw. Webseite.

Natürlich gibt es auch Software-Assistenten ohne Navigationszeile und mit Fortschrittsspalte an der linken Seite. Genauso haben viele Content-Webseiten links ebenfalls eine Kategorie- oder ergänzende Navigationsspalte. Als Beispiel für die Apps zur Verwaltung können Programme zur Bilder- oder Musikverwaltung oder Steuerprogramme oder Nachschlagewerke oder Dateimanager dienen. Auch Mail-Programme fallen in dieses Schema.

Die Grobaufteilung bzw. die Funktionsblöcke verraten ohne Blick auf den Titel den Hauptzweck der Webseite oder App und deren Bedienlogik. Der Grundaufbau ist somit ein wichtiges Werkzeug des Infomationsmanagement und gibt den Nutzern Orientierung und führt sie. Die Links-Rechts- bzw. Oben-Unten-Achsen verdeutlichen wortlos die Strukturen und Abhängigkeiten von Funktionen und Inhalten. Die Platzierung (in Bereichen) gibt Elementen Bedeutung und strukturellen Gehalt. Die zugrundeliegenden Modelle, Metaphern, Strukturen und Logiken werden sichtbar – dann muss die Software oder Webseite diesen folgen, sonst wird die Nutzererwartung enttäuscht.

Für die Aufteilung haben sich bestimmte Platzierungen in Programmen und Web-Applikationen etabliert, der Nutzer erwartet sie in diesen Bereichen:

  • links:
    • Elemente, die den rechts daneben befindlichen hierarchisch übergeordnet sind: Kategorien, Alben, Postfächer
    • zeitlich zuerst folgende Schritte
    • (Unter-)Navigation
  • oben:
    • Steuerung der Elemente darunter oder Beeinflussung dieser
    • Filter, Darstellungsoptionen
    • (Haupt-)Navigation, Menü
    • rechts:
  • „mehr“: Inhalte (Teaser)
    • Funktionen (Paletten, Unterstützungsangebote, Toolbar)
  • unten:
    • Statusinformationen
    • Bestätigung oder Abschluss der Arbeit mit dem aktuellen Bildschirminhalt: „weiter“, „speichern“, „teilen“
    • Teil-Navigation (Seitenwechsel), sofern nachrangig und zwischen gleichartigen Ansichten
    • Steuerung der Bildschirmdarstellung (Zoom)

Bereits die Platzierung verdeutlicht bestimmte Abhängigkeiten, Hierarchien oder Zusammenhänge zwischen Elementen so, dass diese keiner Erklärung bedürfen. Die Hauptnavigation beispielsweise befindet sich oben, eine darunter befindliche Navigationsspalte braucht nur ihre Einträge aufzulisten. Die Platzierung macht klar, dass dies die Untereinträge zum gewählten Eintrag im Hauptmenü sind, dazu ist kein erklärender Spaltentitel nötig. Andersherum hat ein Spaltentitel kaum eine Chance, eine solche erkannte Beziehung zwischen Navigationsspalte und Hauptnavigation aufzuheben. Dort kann Beliebiges stehen, der Großteil der Nutzer wird darauf beharren, dass die Spalte die Untereinträge zum entsprechen Hauptmenü-Eintrag auflistet.

Die Verteilung der Inhalte und Funktionen auf die Bereiche bereits in einem frühen Planungsstadium hilft, sich über die Ausrichtung der fertigen Software oder Webseite klarzuwerden. Vor allem ist so schnell erkennbar, welche Aufteilungsmodelle funktionieren können und welche eher zu vermeiden sind. Je weiter ein Projekt fortschreitet, desto detaillierter wird die Zuordnung, neue Funktionen werden ergänzt, zunächst eingeplante verworfen oder die gesamte Aufteilung noch einmal durchdacht.

Je nach Projektfortschritt werden andere Kriterien und Aspekte wichtig:

  1. plausibler Anlass, Grund für Aufteilung (z.B. Hierarchie, Reihenfolge)
  2. Aufbau, Gliederung weckt Erwartungen (durch Vorwissen, Erfahrungen des Nutzers)
  3. Markierung als eigene Bereiche (z.B. durch Hintergrund, eigene Gestaltung)
  4. Abtrennung zu anderen Bereichen (z.B. durch Farbflächengrenzen, Linien, Weißraum)
  5. Verwechselung der Funktionsbereiche ausschließen
  6. einheitliche Aufteilung in allen Bereichen erleichtert Orientierung
  7. Funktionszuordnung und -hierarchie ist eindeutig (aus der Funktion resultiert eine bestimmte Positionierung im Gesamtzusammenhang; an einer bestimmten Position wird durch die optischen und funktionalen Hierarchien eine bestimmte Funktion erwartet)

Gitter und Raster

Der Monitor gibt mit seinen Kanten die optischen Achsen vor: horizontal und vertikal, im rechten Winkel zueinander. Diese Achsen wirken besonders stark, da sie das Geschehen auf dem Bildschirm vom Rest der Welt abgrenzen. Sie werden als gegeben gesehen und als „natürliche“ Orientierung. Daher ist jede Ausrichtung, die sich an den Monitorgrenzen orientiert, unauffällig, harmonisch, normal.

Die Elemente auf dem Monitor bilden eigene optische Achsen, wie der linke Rand dieses Textes, der parallel zum Seitenrand verläuft. Keine Linie oder andere Gestaltung markiert diese Achse, dennoch ist sie da. Genauso wie die Zeilenanfänge auf dem Papier bilden Elemente auf dem Monitor optische Achsen – durch ihre Ausrichtung. Je weniger Winkel diese Achsen aufweisen, desto weniger Ablenkung erfährt der Nutzer.


Auf dem Grund-Gitter lassen sich zahlreiche Funktionseinteilungen aufbauen.

Ein Raster oder Gitter greift die Basis-Achsen auf und schafft eine Orientierung, um die Bereiche oder Blöcke auf dem Monitor anzuordnen. Auf Webseiten wird – analog zum Satzspiegel im Druck – meist ein Spaltenlayout gewählt, also ein horizontales Raster. Viele Responsive Webseiten-Designs basieren auf vertikalen Rastern, indem sie die einzelnen Bereiche untereinander anordnen. Für eine statische Monitorgröße lässt sich das Layout gut in einem Raster planen. Ein geeignetes Basis-Raster wird mit Hilfslinien eingetragen und die Teilbereiche dann zu den benötigten Bereichen zusammengefasst.

Flexible Bildschirmgröße

Der Großteil der Software-Designs und Webseiten berücksichtigt jedoch variable Bildschirmgrößen. Vom Bruch zu Smartphones einmal abgesehen, wird dann die kleinste sinnvolle Größe definiert und die größte, von der man realistischerweise ausgehen kann. Die naheliegende Lösung wäre, einfach die gesamte Oberfläche zu skalieren, alle Rasterflächen würden also entsprechend größer oder kleiner. Das führt jedoch selten zu guten Ergebnissen, da entweder die Schrift mitskaliert werden müsste und zu groß oder klein gerät oder bei gleichbleibender Schriftgröße der Text keinen Platz in den Flächen fände oder darin verloren wirkt.

Sinnvoller ist es, die Bereiche zu definieren, die mitwachsen und schrumpfen. Im InDesign-Beispiel ist das Dokumentfenster so groß oder klein, wie der Monitor es zulässt, während alle Bedienelemente wie die Paletten ihre ursprüngliche Größe behalten. Auf Webseiten wie Amazon behält die linke Spalte mit den Filtern und Kategorien eine konstante Breite, nur der Content-Bereich wächst oder schrumpft. Durch geeignete Minidestgrößen ist gewährleistet, dass eine Mindestbreite nicht unterschritten wird. Im Responsive Design würde dann der Umbruch auf eine andere Anordnung (meist in einem abgewandelten Raster) erfolgen, der beispielsweise auch die Schriftgrößen beeinflusst.

Somit hat jeder Bereich drei Möglichkeiten, auf die Bildschirmgröße zu reagieren:

  • Absolute Breite: Egal wie groß oder klein der Bildschirm ist, die Größe ändert sich nicht. Auf Webseiten betrifft das meist die Spalten links oder rechts vom Content. In der Software behalten Funktionseinheiten wie Paletten oder Dialoge ihre Größe, verändern allenfalls ihre Position.
  • Relative Breite: Dabei ist der Bereich relativ zu seinem Elternelement groß, eine Webseite beispielsweise relativ zum Browserfenster, eine Software relativ zum Monitor. Die Header-Navigation von Responsive Webseiten beispielsweise dehnt sich in der Breite entsprechend des Browserfensters aus. Zwei Bereiche können sich den verfügbaren Platz auch im Verhältnis 40 zu 60 Prozent teilen, dann wachsen bzw. schrumpfen beide gleichermaßen, je nach verfügbarem Platz. Der häufigste Fall ist jedoch, dass eine Spalte oder ein Bereich definiert wird, der einfach den Platz nutzt, den die daneben befindlichen absolut gesetzten Bereiche übrig lassen.
  • Usergesteuerte Breite: Der Nutzer kann die Größenverhältnisse der Bereiche selbst verändern und seinen Bedürfnissen anpassen. In vielen Programmen mit einer Kategorie-Spalte (wie im Dateimanager Windows Explorer oder Mac Finder) kann die Begrenzungslinie verschoben werden, sodass die Spalte so breit oder schmal ist, wie der Nutzer sie benötigt. In dokumentbasierten Programmen wie Textverarbeitungen oder Zeichenprogrammen passt der Nutzer die Größe des Dokumentfensters seinen Bedürfnissen an.

Meist passt sich die Höhe automatisch an. Der Fall, dass die Höhe reguliert wird, ist nur in wenigen Sonderfällen nötig. Vertikales Scrollen ist weniger störend als horizontales Scrollen. Deshalb sollte jede Software und jede Webseite lieber das Scrollen nach Oben/Unten fördern als das nach Links/Rechts provozieren.

Wann immer möglich, kombiniert eine Software alle drei Varianten miteinander:

  • Der Nutzer, der die Kontrolle über seinen Arbeitsplatz behält, kann die Aufteilung selbst verändern.
  • Dazu wird ihm per Default eine geeignete Ausgangsaufteilung angeboten.
  • Dabei sind die Navigations- und Kategoriebereiche mit einer tauglichen absoluten Breite definiert und die Content-Bereiche nutzen flexibel den verfügbaren verbleibenden Platz.
  • Nimmt der Nutzer eine Anpassung vor, so steht ihm diese selbstverständlich beim nächsten Aufruf der Software zur Verfügung.

Grundraster für Webseiten

Auf Webseiten ist vor allem darauf zu achten, dass die Bereiche nicht zu klein und nicht zu groß ausfallen. Eine Textspalte ist maximal 80 bis 100 Zeichen breit, das entspricht bei normaler Textgröße maximal 800 Pixeln. Ist sie breiter, wird das Lesen verlangsamt. Ist sie schmaler als 350 Pixel, lässt sich Text ebenfalls nicht mehr flüssig lesen. Deshalb weisen viele Responsive Designs auch eine Obergrenze auf und hören bei etwa 1.400 Pixeln (Navigationsspalte 300px + Textspalte 800px + Teaserspalte 300px) auf zu wachsen, der übrige Platz ist Weißraum.

Für die Grobaufteilung haben sich verschiedene Standards etabliert. Besonders flexibel ist ein Grundraster mit zwölf Spalten. Diese lassen sich gut zu verschieden breiten Blöcken kombinieren, beispielsweise passen zwei, drei, vier oder sechs gleichbreite Spalten nebeneinander oder zwei Spalten mit fünf und sieben Grundraster-Spalten oder drei Spalten, von denen die erste drei, die zweite sechs und die dritte wieder drei Grundraster-Spalten umfasst. Ein solches Grundraster gibt einerseits Flexibilität für eine geeigneten Grundaufbau und verhindert zweitens, dass jede Ansicht neu pixelgenau ausgemittelt werden muss.

Auch innerhalb der Blöcke gilt das zugrundeliegende Grundraster. Eine optische Halbierung der Navigationsspalte (mit drei Grundrasterspalten) würde somit aus dem Raster fallen. Wird eine solche benötigt, ist entweder ein anderes Grundraster oder eine andere Aufteilung der Bereiche nötig. Das ist der anzustrebende Idealfall. Doch in der Praxis gibt es Momente, in denen der Ausbruch aus dem Raster nötig scheint. Geschieht dies bewusst und als motivierte Ausnahme, stärkt das die Dynamik und Persönlichkeit einer Webseite. Ist der Einsatz eher willkürlich, dann überträgt sich diese Wirkung auf die Gesamtseite. Daher sollte ein Styleguide auch geeignete Möglichkeiten zur „Sprengung des Rasters“ aufführen, damit diese zur Gesamtwirkung passen.


Das Spalten-Grundraster für fünf Webseiten. Bei Spiegel Online und Frankfurter Allgemeiner Zeitung gehen die Raster nicht pixelgenau auf. Beide Seiten tricksen optisch, um ein harmonisches Gesamtbild zu erhalten.

Insbesondere im Web-Design kommen Spalten-Raster zum Einsatz. Dabei hält sich jede Seite, Unter- oder Übersichtsseite strikt an die Grobaufteilungen; der optische Grundaufbau ist identisch, nur die Inhalte unterscheiden sich. Verfügen einzelne Seiten über bestimmte Elemente, beispielsweise Definitionskästen, so regelt das Layout auch, wo und in welcher Größe diese integriert werden.

Ein geeigneter Webseiten-Standard mit zwölf Grundraster-Spalten könnte folgende Aufteilung besitzen:

  • drei Spalten für die linke Navigationsspalte
  • sechs Spalten für den Hauptinhalt, diese lassen sich je nach aktuellem Inhalt weiter unterteilen:
    • alle sechs Spalten für Fließtext
    • ein Infokasten mit der Breite von zwei Spalten wird in den Textlauf eingeklinkt
    • drei Bilder á zwei Spalten sind nebeneinander abgebildet
    • eine Tabelle mit zwei Spalten á drei Grundrasterspalten gibt eine Übersicht
  • drei Spalten für die rechte Navigationsspalte

Grundraster für Software

Bei Software sind vor allem in Programmen mit vielen Formularen Grundraster sinnvoll, um ein einheitliches Aussehen zu erzielen. Doch die meisten Apps können auf ein Grundraster verzichten. Selbst bei gleichem Grundaufbau, beispielsweise mit Navigations- oder Kategorie-Spalte links und Content-Bereich rechts, ist ein Raster selten sinnvoll. Wichtig ist, dass beide Bereiche in einem geeigneten Größenverhältnis zueinander stehen und die linke Spalte eine taugliche Mindestgröße aufweist.

Die Mac-Programme iTunes, iBooks, Mail, Systembericht, Schriftsammlung, Finder, iPhoto und ColorSync verfügen über den gleichen Grundaufbau.

Für die initiale oder Default-Aufteilung kann der Goldene Schnitt ein guter Anhaltspunkt sein oder ein „glattes“ Verhältnis: 1:2, 1:3, 2:3 oder 2:5. Dabei geht es nicht um pixelgenaues Auswuchten, sondern um einen harmonischen Gesamtaufbau, der für die konkreten Inhalte der Bereiche geeignet ist. Mitunter ist es sogar sinnvoll, die linke Spalte bewusst so schmal anzulegen, dass die Inhalte teilweise abgeschnitten werden. Dann steht mehr Platz für den Hauptfokus (den Content-Bereich) zur Verfügung. Der Nutzer kann die Spalte ja verbreitern, wenn er dies möchte. Beispielsweise bei der Darstellung in der Mindestgröße des Programmfensters kann eine solche Minimalbreite der Spalte angebracht sein.

Das Colorsync-Programm (rechts unten in der Screenshot-Sammlung) ist ein recht kompaktes Fenster, das etwa mittig geteilt ist. Das ist deshalb angemessen, da der Inhaltsbereich nicht allzu umfangreich gefüllt ist. Im iPhoto-Programm dagegen kann der Foto-Bereich gar nicht groß genug sein. So orientieren sich die taugliche Spaltenbreiten an der erwarteten Nutzung und an den präsentierten Inhalten.

Dass die gezeigten Programme (und viele weitere) alle den gleichen Grundaufbau besitzen, entspricht der gleichen Bedienlogik. Hat der Nutzer eines verstanden, findet er sich mühelos in jedem anderen zurecht. Zumindest das Navigieren und Erkunden fällt ihm leicht. Die Unterschiede bestehen dann erst in den jeweils verfügbaren Funktionen, die aufgerufenen Dateien oder Informationen zu bearbeiten. Diese unterscheiden sich zwischen Mail-, Foto-, Fontverwaltungs-, und Farbprofilverwaltungsprofil deutlich. Doch der einheitliche Grundaufbau reduziert die Berührungsängste und gibt einen sinnstiftenden Überblick über die vorhandenen Daten.

Eine neue Software profitiert also davon, sich an anderen zu orientieren. Übernimmt sie eine etablierte Bedienlogik und einen vertrauten Grundaufbau, fällt es ihr leichter, die Nutzer zu gewinnen. In den funktionalen Details sind die Unterschiede schließlich (hoffentlich) groß genug. Eine Software muss sich nicht komplett neu und unbekannt anfühlen, nur weil sie einige spezielle Funktionen hat. Sie steigert sogar ihre Nutzungshäufigkeit und Nutzerschar, wenn sie sich vertraut anfühlt. Sie muss sich so vertraut wie möglich anfühlen (Usability) und so selbstständig wie nötig präsentieren (Design). Dieser schmale Grat ist eine der großen Herausforderungen bei der Entwicklung einer neuen Software-Lösung.

Checkliste: Aufbau und Raster

  • Gitter und Raster definieren den Grundaufbau, schaffen Struktur, grenzen Funktionsbereiche voneinander ab
  • Funktionsbereiche und Aufteilung in allen Ansichten einheitlich => Orientierung, Vertrauen
  • Optische Ordnung, Hierarchie, Struktur => Sinnstiftung, Orientierung
  • Platzierung trifft Aussagen über Hierarchie, Struktur, Abhängigkeiten
  • Größe trifft Aussagen über Wichtigkeit
  • Rasterbreiten: fix, relativ zum Elternelement, userbestimmt; bei variablen Breiten nutzt eine Spalte immer flexibel die gesamte Restbreite
  • Bereichsgrenzen für Nutzer änderbar; diese Anpassungen werden gespeichert (Software)
  • Raster-Empfehlung (Web): 960px, 12 Spalte á 60px, 11 x Zwischenraum á 20px, 2 x Außenabstand á 10px
  • Nähe = Zusammengehörigkeit, Ferne = keine Zusammengehörigkeit
  • Weißraum nutzen

Autor:  bei LinkedIn

Update: 12/2014