12.5    Navigation auf mobilen Endgeräten – responsive Navigation 

So deutlich und eindeutig die Darstellung der Hauptnavigation im Normalfall ist, so komplex ist die Darstellung bei Geräten mit kleinen Bildschirmauflösungen. Der geringe zur Verfügung stehende Platz schränkt zwangsläufig die Möglichkeiten ein. Dazu kommt noch die etwas andere Art der Benutzung. Ohne Maus, dafür mit einem Touchscreen und die Bedienung per Finger – hover-Zustände sind so nicht möglich und sehr kleine Linktexte schwer anzuklicken. Würde neben dem Logo die Hauptnavigation vollständig angezeigt, bliebe häufig kein Platz mehr für Inhalte auf dem ersten Screen. Auch auf Unterseiten würde der Anwender vor lauter Navigationspunkten vielleicht gar nicht merken, dass neue Inhalte geladen wurden.

Erinnern wir uns an den Grundsatz Content first – die Inhalte kommen als Erstes, auch in der Wahrnehmung der Webseite.

Abbildung 12.42    Kleiner Bildschirm, große Finger. Nicht immer lassen sich Links auf mobilen Endgeräten einfach auswählen (inspirationmobile.tumblr.com).

Die Anwender kommen nicht wegen der Navigation, die ist Mittel zum Zweck, sondern, um die Inhalte zu konsumieren. Daher sollten auch bei sehr kleinen Auflösungen die ersten Inhalte zu sehen sein, und die Navigation sollte sich zurücknehmen, indem die Navigationspunkte beispielsweise erst einmal versteckt sind und erst bei Bedarf eingeblendet werden. Es gibt verschiedene Navigationskonzepte für mobile Geräte, also kleinere Bildschirmauflösungen, die alle ihre Vor-und Nachteile haben. Hier müssen Sie individuell entscheiden, welche für das aktuelle Projekt oder die aktuelle Navigationsstruktur die sinnvollste ist.

 

12.5.1    Top-Nav – alles so lassen 

Wohl die einfachste Art der responsiven Umsetzung: einfach nichts machen – oder zumindest nicht viel. Daher ist sie auch auf vielen Webseiten zu finden. Bei relativ wenigen Menüpunkten kann dies auch gut funktionieren. Die Menüpunkte bleiben, wie bei größeren Auflösungen, weiterhin nebeneinander platziert oder rücken in eine zweite Zeile.

Abbildung 12.43    Bei trentwalton.com passiert mit der Navigation nicht viel. Die Schrift wird etwas kleiner, die Abstände auch. In diesem Fall ist das auch völlig ausreichend.

Insgesamt sollten Sie darauf achten, dass der Abstand zwischen den einzelnen Punkten und den Zeilen groß genug bleibt, um einzelne Punkte mit den Fingern gut auswählen zu können. So sind keine größeren CSS-Anpassungen und schon gar nicht irgendwelche JavaScript-Lösungen notwendig. Der Vorteil, dass die Navigationspunkte bei dieser Methode gleich sichtbar sind, kann sich schnell ins Gegenteil verkehren. Mehrere Menüzeilen verdecken eben auch mehr Inhalt. Und wird das Menü später einmal erweitert, schrumpft der Anzeigenbereich für den Inhalt immer weiter. Für einfache Navigationsstrukturen, also mit wenigen Menüpunkten, ist diese Lösung unter Umständen gut geeignet. Vor allem die im Vergleich zu den anderen Methoden einfache Umsetzung mag dafürsprechen. Wichtig ist eben, dass nicht zu viel Platz eingenommen wird, die Menüpunkte aber trotzdem gut auswählbar bleiben.

SCHRITT FÜR SCHRITT

Umsetzung einer einfachen responsiven Navigation

Als kleines einführendes Beispiel in die responsive Navigation stehen die Menüpunkte zuerst am rechten Rand.

nav{
    float: right;
    margin: 20px 0 0;
}
nav ul li {
    display:inline;
     list-style: none;
     margin: 0 20px;
}
nav ul li a {
    font-size: 20px;
    line-height: 40px;
    padding: 5px 10px;
    text-decoration: none;
    color: #ff1b05;
}
nav ul li a:hover{
    color:#333;
}

@media all and (max-width:640px){
nav {
    text-align: center;
    float: none;
}
nav ul li {
     margin: 0 10px;
}
nav ul li a {
    padding: 10px 20px;
}
}

Listing 12.12    Die einfache Navigation – bei kleinen Bildschirmen leicht angepasst

Abbildung 12.44    Eine einfache reaktionsfähige Navigation. Die Darstellung der Punkte wird leicht angepasst.

 

12.5.2    Footer-Navigation – ganz ans Ende 

Inhalte zuerst, Navigation zuletzt – so könnte das Motto dieser Methode lauten. Im Header ist dann lediglich ein kleiner Hinweis/Link zur Navigation, die am Ende der Seite unterhalb des Contents platziert ist. Dadurch wird im oberen Bereich viel Platz für die eigentlichen Inhalte gewonnen, und dank CSS lässt sich ein einfacher Ankerlink ans Fußende setzen. Hier im Footer kann die Navigation sich dann ausbreiten, wie sie will. Platz ist ja genug vorhanden.

Abbildung 12.45    Schon die Beschriftung ist nicht selbsterklärend: Ein explore-Button führt bei contentsmagazine.com ans Ende der Seite, wo vier Navigationspunkte warten.

Was nach einer cleveren Lösung aussieht, dürfte die meisten Anwender in der Praxis aber eher verwirren. Ein Klick auf einen Navigationsbutton 1 und auf einmal findet man sich am Ende der Seite wieder, wenn es der Anwender denn überhaupt richtig registriert – vor allem, weil die Anwender sich durch die gleich folgenden Methoden an eine versteckte Navigation langsam gewöhnt haben, kann dieser Sprung innerhalb der Webseite eher zu einer schlechten User Experience führen.

Das »select«-Menü – einmal auswählen bitte | Die Idee wie in der Footer-Navigation ist ja gar nicht schlecht – eine Navigation, die da, aber nicht voll sichtbar ist, sodass sie erst einmal wenig Platz einnimmt. Eine Möglichkeit ist die Nutzung des select-HTML-Elements, das Sie vielleicht schon aus Formularen kennen.

Abbildung 12.46    Die Plug-in-Seite macht es vor: Bei tinynav.com wird aus wenigen Navigationspunkten ein select-Menü.

Ein solches select-Menü bekommt den Namen Navigation oder Menü, sodass die Anwender auch wissen, was sich dahinter verbirgt. Es spart Platz im Header und lässt sich auch mit JavaScript-Plug-ins recht einfach umsetzen. Aber es braucht eben ein Plug-in, und das bedeutet mehr Datenverkehr. Der größere Nachteil ist aber die mangelnde visuelle Gestaltungsmöglichkeit. Die Browser und Betriebssysteme stellen das select-Menü in ihrem typischen browserspezifischen Design dar, was selten gut aussieht und quasi nie zum restlichen Screendesign der Webseite passt. Auch die Gestaltung von Unterpunkten lässt sich nur notdürftig realisieren.

Ein select-Menü kann eine Lösung sein, da das Menü platzsparend gestaltet ist, es gibt aber in den meisten Fällen bessere Alternativen. Die technische Umsetzung eines select-Menüs muss mithilfe eines kleinen Skripts erfolgen. Das jQuery-Plug-in TinyNav (tinynav.com) sorgt für die Umwandlung des normalen Menüs in ein select-Menü.

Abbildung 12.47    Unterseiten werden bei select-Menüs häufig mit Bindestrichen gekennzeichnet.

Aktivierung eines »select«-Menüs | Die Installation ist denkbar einfach. Nachdem das JavaScript-Plug-in TinyNav geladen wurde, wird Folgendes definiert:

<script>

$(function () {
    $("#nav").tinyNav();
});

</script>

Listing 12.13    Aktivierung der Tiny-Navigation per JavaScript

Ergänzend kommen ein paar Zeilen CSS hinzu, die zuerst die Tiny-Navigation bei normaler Ansicht verbergen und unter einem bestimmten Breakpoint einblenden. Gleichzeitig wird dann die normale Navigation ausgeblendet:

/* Normale Desktop-Ansicht */
.tinynav { display: none }
/* Ansicht für mobile Geräte */
@media screen and (max-width: 640px) {
.tinynav {
    display: block
}
nav {
    display: none
}
}

Listing 12.14    Per CSS wird die Anzeige der Navigation gesteuert.

Das vollständige Tutorial finden Sie unter github.com/viljamis/TinyNav.js.

 

12.5.3    Einfaches Toggle-Menü – Ein- und Ausblenden 

Eine immer beliebtere Variante als reaktionsfähige Navigation ist das Toggle-Menü. Mithilfe eines kleinen Buttons, der als Schalter fungiert, lässt sich das Menü ein- und ausblenden. Es wird dabei entweder über den Inhalt ausgefahren und überlagert diesen, oder es verschiebt diesen nach unten, um Platz für die Navigation zu machen. Das Menü lässt sich wieder einfahren oder macht dies bei Auswahl eines Navigationspunkts selbstständig.

Abbildung 12.48    Bei oliverrussell.com wird aus dem Menü ein kleines (Hamburger-)Icon rechts oben. Bei Klick fährt dann die Navigation über den Inhalt aus, und das Icon wird zum »Schließen-Kreuz«.

Dies ist sicherlich eine der beliebtesten responsiven Navigationsmethoden. Die Navigation ist versteckt, aber einfach zu aktivieren. Bei manchen Webseiten bleibt der Header mit Logo und Navigations-Icon auch fix am oberen Rand stehen (wie im Beispiel oliverrussell.com, Abbildung 12.48), sodass die Navigation immer griffbereit ist. Diese Art hat etwas von einem üblichen Dropdown-Menü, nur dass eben zuerst keine Navigationspunkte sichtbar sind. Entscheidend für die Bedienbarkeit dieser Navigationsmethode ist die Verständlichkeit des Icons oder Textes.

Abbildung 12.49    Drei Beispiele, wie individuell Toggle-Menüs aussehen können (admiretheweb.com/20-responsive-mobile-navigation-inspiration)

SCHRITT FÜR SCHRITT

Ein einfaches Toggle-Menü erstellen

Ein schlichtes, aber effektives Toggle-Menü lässt sich schon mit reinem CSS umsetzen.

<nav>
<label for="toggle-menu">&#9776; Menü</label>
<input id="toggle-menu" type="checkbox">
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Über uns</a></li>
<li><a href='#'>Projekte</a></li>
<li><a href='#'>Leistungen</a></li>
<li><a href='#'>Kontakt</a></li>
</ul>
</nav>

nav > input, nav > label {
display: none; /* Label und Checkbox ausblenden*/
}
nav > label {
width: 100%;
}
@media (max-width: 640px) {
nav > label, nav ul li ul {
display: block;
}
nav > ul {
height: 0;
opacity: 0;
clear: both;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
transition:all .5s ease;
}
nav > input:checked + ul {
opacity: 1;
height: auto;
}
}

Abbildung 12.50    Bei kleineren Auflösungen wird nur ein Menülink eingeblendet. Bei einem Klick öffnet sich die Navigation vollständig.

Die Toggle-Methode bietet einige Möglichkeiten in der Gestaltung und der technischen Umsetzung samt Animationseffekten. Je nach Bedarf kann die CSS- und JavaScript-Umsetzung umfangreicher werden. Aber der Aufwand lohnt sich, gerade im Vergleich zu den anderen Navigationsmethoden. Ein Toggle-Menü kann zu einer besseren User Experience führen. Der Anwender bekommt gleich mehr Inhalte zu sehen, die Navigation stört also erst einmal nicht, ist aber in Reichweite. Das Ein- und Ausblenden oder eventuell sogar ein dezent animiertes Ein- und Ausfahren sorgt für eine angenehme Wahrnehmung und Bedienung.

 

12.5.4    Multi-Toggle 

Das Multi-Toggle-Menü ist eine Erweiterung des einfachen Toggle-Menüs. Vor allem bei tieferen Navigationsstrukturen kommen die bisher vorgestellten Methoden an ihre Grenzen. Die Multi-Toggle-Navigation funktioniert im Grunde wie der Accordion-Effekt (siehe Kapitel 14, »Animationen«). Per Mausklick (oder Fingertipp) werden einzelne Bereiche ein- und ausgeblendet. Übertragen auf die Navigation, wählt der Benutzer einen übergeordneten Punkt aus, und die Unterpunkte werden einblendet. Die Funktionsweise ähnelt also dem Dropdown-Menü der klassischen Ansicht. Die Anwender können die Oberpunkte scannen, um dann bei Bedarf weitere Unterpunkte auszuwählen.

Abbildung 12.51    Der Accordion-Effekt blendet per Klick einzelne Bereiche ein und aus (jqueryui.com/accordion).

Abbildung 12.52    Bei arburg.com müssen zuerst die Hauptpunkte angeklickt werden, und auf den sich öffnenden Hauptseiten erscheinen dann die jeweiligen Unterpunkte – sowohl in der Desktop- als auch der mobilen Navigation.

Da Touchscreen-Geräte allerdings keinen hover-Zustand kennen, gibt es folgendes Problem: Entweder der Hauptpunkt ist direkt anklickbar, dann können sich aber keine Unterpunkte öffnen, sondern erst auf der neu geladenen Hauptseite als Subnavigation angezeigt werden. Die Hauptseiten werden dann zu wichtigen »Verteilerseiten«, von denen der Anwender die weiteren Unterseiten erkunden kann. Das bedeutet aber auch immer mehrere Klicks, und außerdem muss jede Seite neu geladen werden.

Abbildung 12.53    Sowohl in der Desktop-Ansicht als auch auf mobilen Geräten sind bei microsoft.com die Hauptpunkte nicht anklickbar, sondern lediglich »Behälter« für die Unterpunkte.

Oder ein Klick auf einen Hauptpunkt entspricht dem hover in einer normalen Navigation, und die Unterpunkte werden angezeigt. Dann kann der Hauptpunkt allerdings nicht direkt ausgewählt bzw. geladen werden. Dieses Vorgehen kann gut funktionieren, wenn auf den Hauptseiten keine allzu wichtigen Inhalte vorhanden sind, sondern diese auch bei größeren Auflösungen eher als Verteilerseiten für die weiteren Unterseiten funktionieren. Oder aber die Hauptpunkte sind keine Links, sodass sie nicht angeklickt werden können, sondern lediglich als Kategorisierung für die Unterpunkte dienen.

Sollen die Hauptpunkte aber sowohl anklickbar sein als auch die Unterpunkte bei Bedarf angezeigt werden, dann muss es ähnlich gelöst werden wie bei m.gls.de (siehe Abbildung 12.54). Neben dem Hauptpunkt befindet sich ein Pfeil-Icon, das signalisieren soll, dass sich weitere Menüpunkte »dahinter« verbergen. Der Anwender kann nun den Hauptpunkt auswählen oder sich die Subpunkte anzeigen lassen.

Abbildung 12.54    Das Multi-Toggle bei m.gls.de

Die Multi-Toggle-Navigation braucht meist die Unterstützung von JavaScript, um auf möglichst vielen Geräten zu funktionieren. Die Umsetzung kann sehr aufwendig werden. Bei umfangreichen Navigationsstrukturen mit vielen Unterebenen stößt die Benutzbarkeit dieser Methode auch schnell an ihre Grenzen.

 

12.5.5    Off-Canvas-Menü – Rein- und Rausfahren 

Diese Variante ist dem (Multi-)Toggle-Menü recht ähnlich. Die Navigation ist zuerst ausgeblendet, und ein Icon oder Menübutton muss angeklickt werden, um diese sichtbar zu machen. Bei Klick wird hier aber der komplette Inhaltsbereich zur Seite verschoben. Die Navigation, die vorher außerhalb des Darstellungsbereichs lag (also off canvas), wird dann in den sichtbaren Bereich verschoben. Abbildung 12.55 zeigt beispielhaft die Funktionsweise eines Off-Canvas-Menüs: Inhalte, meistens die Navigation, liegen außerhalb des sichtbaren Bereichs. Durch Klick auf einen Menübutton wird das ganze Layout (in diesem Fall nach rechts) verschoben. Meistens bleibt ein kleiner Bereich des Inhalts am rechten Rand stehen, sodass der Anwender nachvollziehen kann, was passiert ist.

Abbildung 12.55    Die beispielhafte Funktionsweise eines Off-Canvas-Menüs

Durch das animierte Verschieben merkt der Anwender genau, was da gerade passiert. Die Umsetzung ist daher benutzerfreundlich und sorgt für eine angenehme User Experience. Ein Beispiel dazu: Beim Off-Canvas-Menü von obi.de (siehe Abbildung 12.56) liegt die Navigation zunächst links außerhalb des sichtbaren Bereichs. Bei Klick auf den Menübutton rückt das ganze Layout nach rechts. Bei Auswahl eines Hauptpunkts werden die Unterpunkte angezeigt. Ein kleiner Pfeil bringt den Anwender wieder zu den Hauptpunkten.

Abbildung 12.56    Das Off-Canvas-Menü bei obi.de.

Gerade bei umfangreicheren Menüstrukturen bietet sich das Off-Canvas-Menü an, und die Gestaltungsmöglichkeiten sind sehr groß. Dafür ist aber auch die Umsetzung komplexer. Die Technik dahinter ist nicht nur performance-intensiv und ruckelt daher unter Umständen, sie läuft auch nur auf den modernsten mobilen Endgeräten einwandfrei. Wer diese Technik einsetzen will, sollte sich also auf vermehrte Tests mit unterschiedlichsten Geräten einstellen.

 

12.5.6    Weitere allgemeine Gestaltungstipps für eine mobile Navigation 

Mobile Webseiten sind, trotz der verbreiteten Nutzung, zu oft nicht ausreichend benutzerfreundlich oder nicht übersichtlich genug. Das eingeschränkte Display und die Benutzung per Finger erschweren die Bedienung. Der Navigation kommt daher noch einmal eine besondere Bedeutung zu. Während sich Webseiten auf größeren Bildschirmen schnell abscannen lassen, ist dies auf mobilen Geräten nicht möglich. Umso wichtiger, dass hier die Navigation leicht verständlich und einfach bedienbar ist. Neben den oben vorgestellten Navigationsmethoden für mobile Endgeräte gibt es noch einige allgemeingültige Gestaltungstipps, die Sie bei allen Methoden beachten sollten.

Leichtes Auffinden der Schaltfläche | Häufig sind die einzelnen Navigationspunkte versteckt, und lediglich ein Button ist sichtbar, der erst bei Klick die komplette Navigation anzeigt. Dieser Button sollte gut sichtbar im oberen Bereich der Webseite positioniert und klar als Navigationsbutton erkennbar sein. Als Navigationssymbol hat sich das sogenannte Hamburger Icon, manchmal auch als Sandwich Icon bezeichnet, durchgesetzt und ist in den meisten Buttons wiederzufinden. Es ist aber bei Weitem noch nicht für die breite Masse so allgemein verständlich, dass Sie es immer bedenkenlos einsetzen können.

Abbildung 12.58    Bei starbucks.com tritt das Hamburger Icon in Konkurrenz mit anderen Icons.

Wer dafür sorgen möchte, dass wirklich jeder den Navigationsbutton schnell als solchen erkennt, sollte das Icon durch einen Text wie Menü oder Navigation ergänzen; da Letzteres etwas lang ist, wird gerne Menü genommen. Ein gelungenes Beispiel für dieses Vorgehen zeigt Abbildung 12.59.

Abbildung 12.59    Bei ableton.com (rechts) zeigt das Wort Menü, unterstützt durch einen dezenten Pfeil, klar, worum es geht. Die hs-aalen.de geht einen ganz anderen Weg und unterteilt die Navigation in Themen und Seiten.

Nicht nur die Position des Buttons und sein Icon und/oder Text spielen eine Rolle, auch die visuelle Abgrenzung vom restlichen Inhalt sorgt für die Auffindbarkeit. Durch ausreichend Abstand und klare visuelle Unterscheidbarkeit durch Farben, Formen, Flächen etc. wird der Button auch erkannt.

Schließen durch erneutes Drücken | Bei Auswahl des Navigationsbuttons öffnet sich das Menü. Wird dann ein Punkt ausgewählt, gelangt man zur Unterseite, und das Menü ist wieder hinter einem Button verschwunden. Möchte man aber nach einem Blick auf die Unterpunkte doch lieber weiter auf der aktuellen Seite surfen, sollte sich der Button wieder schließen lassen. Dies sollte mit einem erneuten Klick auf den Button möglich sein.

Untermenüs | Wie Sie bei den Navigationsmethoden Multi-Toggle oder Off-Canvas gesehen haben, lassen sich auch Unterpunkte in einer responsiven Navigation darstellen. Auch hier ist die visuelle Darstellung entscheidend, damit die Anwender verstehen, dass es Unterpunkte gibt. Ein Plus-Button oder ein Pfeil signalisiert dies allgemeinverständlich. Ein Zurück-Button oder Zurück-Pfeil führt wieder eine Ebene zurück.

Abbildung 12.60    Bei sportschau.de tauchen die Links zu den Hauptpunkten in der Subnavigation noch einmal auf. Dafür unterscheiden sich die Unterpunkte nicht klar von den Hauptpunkten.

Oberpunkte können entweder Links zu den Hauptseiten sein oder ein Untermenü öffnen. Beides zusammen funktioniert auf mobilen Geräten mit Touchscreen nicht. Um Oberpunkte trotzdem als eigene auswählbare Seiten anzubieten, kann im sich öffnenden Untermenü der erste Link zur Seite des Oberpunkts führen. Ein Linktext wie Startseite XYZ oder Übersicht XYZ ist hier hilfreich, wie er beispielsweise auf sportschau.de (Abbildung 12.60) zu finden ist.

Es sollte nicht nur klar erkennbar sein, hinter welchen Hauptpunkten sich Untermenüs verbergen. Bei sich öffnenden Untermenüs muss außerdem deutlich werden, was Haupt- und was Unterpunkte sind. Unterpunkte sollten visuell abgegrenzt werden, etwa durch eine dezentere Farbe, eine leichte Einrückung, eine Hintergrundfarbe oder Ähnliches. Gerade bei umfangreichen Navigationsstrukturen sind die Übersichtlichkeit und Verständlichkeit das A und O, sodass sich die Anwender nicht in der Struktur bzw. auf der Seite verloren fühlen. Am Beispiel der responsiven Webseite obi.de wird dies deutlich:

Abbildung 12.61    Das umfangreiche responsive Menü bei obi.de

Ein großer Button 1 mit eindeutigem Text und einem Pfeil, der nach unten zeigt, verdeutlicht, dass sich dahinter die Navigation verbirgt. Insgesamt ist der Button aber zu sehr in das Gesamtdesign integriert bzw. setzt sich nicht deutlich genug von den anderen Inhalten ab. Dadurch kann er leichter übersehen werden.

Ist das Menü aufgeklappt, verdeutlicht der Pfeil nach oben 2, dass es sich hier wieder zusammenklappen lässt. Die Pfeile nach rechts 3 sollen signalisieren, dass hier weitere Unterpunkte folgen. Das kann aber auch zu Missverständnissen führen. Ein Pfeil nach rechts kann auch bedeuten, dass es direkt zu dieser Seite geht. Ein Pfeil nach unten (wie im oberen Menü-Button) verdeutlicht oft besser, dass hier weitere Unterpunkte folgen. Die optimale Ausrichtung des Pfeils ist jedoch immer davon abhängig, in welcher Richtung sich die Unterpunkte öffnen. In diesem Fall öffnen sich die Unterpunkte nicht untereinander, sondern nebeneinander. Insofern ist die Richtung der Pfeile passend, kann aber bei der ersten Benutzung leicht irritieren.

Ein Zurück-Button mit Pfeil nach Links 4 macht klar, dass es hier wieder eine Ebene höher geht. Ein fetter Titel 5 zeigt die aktuelle Seite an. Meistens sind die untergeordneten Seiten und nicht die Oberseite eingerückt, hier ist es anders, warum auch immer. Und ein prominenter Link zur Übersicht 6 – worüber auch immer man diese dann bekommt, erschließt sich aus dem Kontext nicht ganz. Und zu guter Letzt die tiefste Navigationsebene 7. Ohne ergänzende Pfeile ist klar, dass es ab hier nicht tiefer geht.

Alternative Einstiegswege | Seien wir ehrlich, auf einem Smartphone eine Navigation aufklappen, sich einen Überblick verschaffen, vielleicht noch in aufklappbaren Untermenüs … es gibt schönere Erlebnisse im World Wide Web. Ist die Seite für mobile Endgeräte optimiert und der typische lange Inhaltsschlauch entstanden, lässt es sich angenehm herauf- und herunterscrollen. Gerade deshalb bieten sich alternative Einstiegswege in die Seite an – also Verlinkungen im Inhaltsbereich auf andere Unterseiten der Webseite. Neben einem eventuell einfacheren Zugang zu weiteren Inhalten lassen sich so auch thematisch passende alternative Zugänge anbieten. Die Anwender haben auf diese Weise mehrere Möglichkeiten, die Webseite zu erkunden, und sind nicht nur auf die Navigation als einzige Zugangsmöglichkeit beschränkt.

Abbildung 12.62    Bei visitengland.com gibt es neben der »normalen« Navigation noch weitere Einstiegswege, z. B. das Feld Ich interessiere mich für … mit Suchmöglichkeiten, und im Inhaltsbereich noch weitere Links zu unterschiedlichen Unterseiten.

Seitentitel | Auf den Unterseiten hilft die Anzeige des Titels der aktuellen Seite zur Orientierung enorm weiter. Anstelle des Namens der aktuellen Seite wird natürlich gerne gleich eine inhaltlich passendere Überschrift gewählt, aber als Ergänzung – zumindest dezent – den Seitennamen anzuzeigen gibt Anwendern das Gefühl, an der richtigen Stelle zu sein.

Abbildung 12.63    Bei edelstall.de steht der Seitentitel groß auf jeder Unterseite. Bei obi.de mit komplexer Navigationsstruktur hilft eine Breadcrumb, die Übersicht zu behalten.