Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
1 Prinzipien des modernen Webdesigns
2 Projektmanagement
3 Konzeption und Strategie
4 Responsive Webdesign
5 Informationsarchitektur
6 Gestaltungsgrundlagen
7 Screendesign
8 Layout und Raster
9 Farbe im Webdesign
10 Typografie
11 Bilder und Grafiken
12 Navigations- und Interaktionsdesign
13 Webdesign-Stile und -Trends
14 Animationen
15 Website-Typen
16 Tipps, Tricks und Tools
Stichwortverzeichnis

Download:
- Beispieldateien, ca. 3.64 MB

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Webdesign von Martin Hahn
Das Handbuch zur Webgestaltung
Buch: Webdesign

Webdesign
Pfeil 12 Navigations- und Interaktionsdesign
Pfeil 12.1 Die Gestaltung der Hauptnavigation
Pfeil 12.1.1 Position
Pfeil 12.1.2 Umsetzung
Pfeil 12.1.3 Gestaltung
Pfeil 12.1.4 Dropdown-Menü
Pfeil 12.1.5 Mega-Dropdown-Menü
Pfeil 12.1.6 Kreative Navigationen
Pfeil 12.1.7 Feste Navigation
Pfeil 12.2 Die Gestaltung der Subnavigation
Pfeil 12.3 Die Gestaltung der Metanavigation
Pfeil 12.4 Die Gestaltung der Footer-Navigation
Pfeil 12.5 Navigation auf mobilen Endgeräten – responsive Navigation
Pfeil 12.5.1 Top-Nav – alles so lassen
Pfeil 12.5.2 Footer-Navigation – ganz ans Ende
Pfeil 12.5.3 Einfaches Toggle-Menü – Ein- und Ausblenden
Pfeil 12.5.4 Multi-Toggle
Pfeil 12.5.5 Off-Canvas-Menü – Rein- und Rausfahren
Pfeil 12.5.6 Weitere allgemeine Gestaltungstipps für eine mobile Navigation
Pfeil 12.6 Weitere Navigationsmittel
Pfeil 12.6.1 Links
Pfeil 12.6.2 Individuelle Linkunterstriche
Pfeil 12.6.3 Buttons
Pfeil 12.6.4 Die Suchfeld-Navigation
Pfeil 12.6.5 Weitere Navigationselemente
Pfeil 12.7 Formulare
Pfeil 12.7.1 Die Komponenten eines Formulars
Pfeil 12.7.2 Eingabefelder
Pfeil 12.7.3 Rückmeldungen
Pfeil 12.7.4 Validierung
Pfeil 12.7.5 Die User Experience bei Formularen
Pfeil 12.7.6 Formulare mit HTML5
 
Zum Seitenanfang

12    Navigations- und Interaktionsdesign Zur vorigen ÜberschriftZur nächsten Überschrift

Das Design der Webseite wurde durchdacht und gestaltet, und die Inhalte wurden akribisch geschrieben und auf einzelne Seiten in einer logischen Struktur aufgeteilt. Das ist aber alles nichts, wenn der Besucher mit der Seite nicht gut interagieren kann. Die Navigation macht die Inhalte erst erreichbar, und die Gestaltung der Navigation sorgt dafür, dass der Anwender sie finden und möglichst intuitiv bedienen kann. Und eine gute Formulargestaltung hilft ihm, mit der Seite zu kommunizieren.

 
Zum Seitenanfang

12.1    Die Gestaltung der Hauptnavigation Zur vorigen ÜberschriftZur nächsten Überschrift

Die Hauptnavigation ist eines der wichtigsten inhaltlichen Gestaltungselemente einer Webseite, wenn nicht sogar das wichtigste. Ausnahmen wie One-Pager, deren Inhalte auch durch Scrollen erreichbar sind, lassen wir dabei außen vor. Die Hauptnavigation ist auf jeden Fall das wichtigste Interaktionselement. Ohne sie ist kein effizientes »Durchkommen« durch die Webseite möglich. Sie hilft dem Anwender aber nicht nur, von einer Seite zur anderen zu kommen, sie bietet ihm auch Orientierung: Wo bin ich hier? Was gibt es hier? Wo kann ich hingehen? Um die Antworten auf diese Fragen schnell geben zu können, sollten Sie bei der Konzeption der Hauptnavigation einige Punkte beachten. Dazu gehört die visuelle Gestaltung – etwa die hierarchische Ordnung und die Position der Navigation – ebenso wie die inhaltliche Gestaltung – etwa die Auswahl der Navigationspunkte, deren Benennung und Reihenfolge.

Dabei soll die Hauptnavigation auch auf einen Blick die thematische Bedeutung der Webseite und das Inhaltsspektrum anzeigen, muss aber auch die Erwartungen der Anwender und bestimmte Konventionen beachten.

Die klassische Navigation einer Agentur: rechts vom Logo, horizontal, typische Navigationspunkte wie Über uns, Leistungen und Projekte (gruenstreifen-design.de)

Abbildung 12.1    Die klassische Navigation einer Agentur: rechts vom Logo, horizontal, typische Navigationspunkte wie Über uns, Leistungen und Projekte (gruenstreifen-design.de)

Beim Design und der Wiedererkennbarkeit einer Webseite denkt man oft an Logo, Farben, Schriften, Bilder etc. Die Benutzbarkeit der Webseite – die Nutzungserfahrung – wird aber zu einem Großteil durch die Navigation geprägt (siehe dazu Abschnitt 3.11, »Usability im Webdesign«, und Abschnitt 3.12, »User Experience«). Eine schlechte Navigation verhindert, dass die Anwender die gesuchten Informationen finden. Kunden können nicht einkaufen, was sie nicht finden. Finden Kunden die Informationen nicht, kommen sie nicht wieder. Finden Kunden die Informationen nicht, rufen sie an, schreiben E-Mails, sorgen also für Support-Aufwand. Die (Haupt)navigation spielt deshalb in der Webgestaltung eine Schlüsselrolle.

 
Zum Seitenanfang

12.1.1    Position Zur vorigen ÜberschriftZur nächsten Überschrift

Designer sind gerne kreativ. Aber Webdesigner sollten vor allem Dienstleister sein, also vor allem »Dienst« am Anwender leisten. Der Anwender, der (zum ersten Mal) auf eine Webseite kommt, will sich kurz orientieren. Die Hauptnavigation hilft ihm entscheidend dabei. Um ihm die Orientierung zu erleichtern, sollte die Hauptnavigation frühzeitig im Design erscheinen und klar erkennbar sein. Neben dem Logo und den ersten Headlines, Teasern und Bildern ist die Hauptnavigation entscheidend für den ersten Eindruck und die Orientierung des Anwenders auf der Seite zuständig.

Gleichzeitig hat der Anwender, selbst wenn er selten surft, schon gewisse Erfahrungen gesammelt. Er hat gelernt, wo die einzelnen Elemente einer Webseite sich üblicherweise befinden. Diese Positionierungskonventionen (siehe Abschnitt 8.5, »Layouts gestalten«) führen dazu, dass er bestimmte Elemente an bestimmten Positionen erwartet und dort dann sucht. Findet er sie dort, kann er sich auf die eigentlichen Inhalte konzentrieren, findet er sie nicht, muss er weitersuchen, und das kostet Zeit. Im Laufe der Entwicklung des Webdesigns haben sich im Wesentlichen zwei oder drei typische Positionierungen der Hauptnavigation herausgebildet.

Horizontale Hauptnavigation | Ganz allgemein befindet sich die Hauptnavigation immer im oberen Bereich der Webseite, sodass sie sichtbar ist, ohne dass man scrollen muss. Fast immer ist die Navigation horizontal ausgerichtet, die einzelnen Navigationspunkte stehen also nebeneinander – ebenso wie unsere Leserichtung. Dies erleichtert das schnelle Überfliegen der Punkte und deren geistige Aufnahme. Der Klassiker ist die Positionierung der Hauptnavigation linksbündig ausgerichtet unterhalb des Logos.

Schnell zu erkennen: die Hauptnavigation unterhalb des Logos, horizontal ausgerichtet, wie bei tresorfabrik.com

Abbildung 12.2    Schnell zu erkennen: die Hauptnavigation unterhalb des Logos, horizontal ausgerichtet, wie bei tresorfabrik.com

Dies ist eine Standardpositionierung, bei der man nicht viel falsch machen kann, da sie auf den meisten Webseiten zum Einsatz kommt. Dies spiegelt auch die Hierarchie wider. Zuerst kommt das Logo 1 als Wiedererkennungs- und Differenzierungsmerkmal, und danach folgt sofort die Hauptnavigation 2 als Orientierungselement. Gleichzeitig lässt diese Anordnung im rechten oberen Bereich Raum für andere Elemente wie die Metanavigation. Stattdessen kann, wie auf tresorfabrik.com (Abbildung 12.2), dort auch einfach nur Weißraum 3 wirken.

Eine andere typische horizontale Positionierung der Hauptnavigation ist rechtsbündig neben dem Logo am Raster ausgerichtet. Gerade wenn keine Metanavigation existiert, ist im rechten Bereich oft genug Platz für eine Hauptnavigation vorhanden. Dafür muss der Platz rechts vom Logo aber groß genug sein, bzw. die Navigation darf nicht zu breit sein. Diese Art der Anordnung spart in der Vertikalen Platz, der eigentliche Inhalt kann also früher erscheinen, da die Navigation unterhalb des Logos keinen Platz mehr wegnimmt.

Die Hauptnavigation rechts neben dem Logo– wie bei employour.de

Abbildung 12.3    Die Hauptnavigation rechts neben dem Logo– wie bei employour.de

In letzter Zeit sind die Positionierungen der Hauptnavigation etwas freier geworden – oberhalb, neben oder unterhalb des Logos, links-, rechtsbündig oder zentriert. Alles ist denkbar, solange die Hauptnavigation erkennbar ist. Durch das Responsive Webdesign wird die Hauptnavigation inzwischen auch immer häufiger selbst bei größeren Bildschirmauflösungen (dazu später mehr) hinter einem Icon »versteckt«. Man könnte es fast als kleinen »Navigationstrend« bezeichnen.

Wenn genug Platz vorhanden ist, ist auch eine Positionierung oberhalb des Logos denkbar, etwa wie bei boat-mag.com.

Abbildung 12.4    Wenn genug Platz vorhanden ist, ist auch eine Positionierung oberhalb des Logos denkbar, etwa wie bei boat-mag.com.

Ob Sie diesem Trend folgen, sollten Sie sich aber gut überlegen. Denn allzu benutzerfreundlich ist es nicht, das Menü auszublenden, wenn eigentlich ausreichend Platz zur Anzeige vorhanden wäre.

Ein zentriertes Design samt zentrierter Navigation unterstreichen bei gloria-mundi.de den edlen Charakter.

Abbildung 12.5    Ein zentriertes Design samt zentrierter Navigation unterstreichen bei gloria-mundi.de den edlen Charakter.

Vertikale Hauptnavigation | Seltener als die horizontale Hauptnavigation kommt die vertikale vor. Dies hat auch seine Gründe. Die Punkte lassen sich dann etwas langsamer aufnehmen als in der horizontalen Navigation. Und der Platz, den eine vertikale Hauptnavigation einnimmt, fehlt dann für die Inhalte. Meistens ist daher eher die Subnavigation untereinander angeordnet.

Eine typische vertikale Anordnung: eine linke Seitenleiste mit Logo und Navigation bei l.de

Abbildung 12.6    Eine typische vertikale Anordnung: eine linke Seitenleiste mit Logo und Navigation bei l.de

Das »Platzproblem« bei der vertikalen Navigation hat sich in den letzten Jahren stark relativiert. Durch responsive Designs lässt sich die Anordnung bzw. der Platz flexibel verwalten. So können Screendesigns mit vertikaler Navigation für Spannung sorgen, gerade weil sie etwas anders sind.

Die Positionierung der Hauptnavigation muss ein Konsens aus Layout, Konvention und gewünschter Wirkung sein. Auch hier kann ein bewusster Bruch der Konventionen für Spannung und Aufmerksamkeit sorgen. Allerdings sollten Sie immer im Hinterkopf behalten, dass der Anwender ohne eine einfach bedienbare Navigation nicht durch die Seite navigieren kann. »Kreative« Platzierungen, Effekte und Gestaltungen sind also mit Vorsicht zu genießen. Die oberen Bildbeispiele haben aber gezeigt, dass selbst klassische Positionierungen nicht langweilig oder eintönig sein müssen.

Eine ganz andere Idee: Die Navigationspunkte sind bei humcreative.com in den Ecken verteilt.

Abbildung 12.7    Eine ganz andere Idee: Die Navigationspunkte sind bei humcreative.com in den Ecken verteilt.

 
Zum Seitenanfang

12.1.2    Umsetzung Zur vorigen ÜberschriftZur nächsten Überschrift

Links auf andere Webseiten oder innerhalb der eigenen Webseite werden mit dem HTML-Element a (a wie anchor, englisch für Anker) umgesetzt. Das a-Element wird daher auch bei Navigationen aller Art verwendet. Alles, was zwischen öffnendem und schließendem a-Element steht, gehört zum Link. Das können neben Text auch Bilder oder sonstige Medien sein.

Sensitiver Bereich | Der sensitive Bereich eines Links ist so groß wie sein Inhalt – bei Textlinks ist er also so groß wie der Text. Hier kann es gerade in Navigationen hilfreich sein, wenn dieser sensitive Bereich vergrößert wird, damit der Anwender leichter den Link aktivieren kann. Mithilfe des Innenabstands (padding) lässt er sich vergrößern.

Download

Den Quellcode »sensitiv.html« für dieses Beispiel finden Sie unter BeispielmaterialKapitel_12.

Ein Text ohne (links) und mit (rechts) Innenabstand und somit vergrößerter sensitiver Fläche

Abbildung 12.8    Ein Text ohne (links) und mit (rechts) Innenabstand und somit vergrößerter sensitiver Fläche

Der Anwender kann so leichter den Link auswählen, er muss nicht zwangsläufig die Maus über das Wort bewegen und kann dieses damit besser lesen. Das ist gerade bei Navigationen mit kleineren Textgrößen eine sehr benutzerfreundliche Anwendung, von der nicht nur Benutzer mit motorischen Einschränkungen profitieren.

Bei gloria-mundi.de bekommen die Navigationslinks viel Innenabstand und lassen sich so angenehmer auswählen.

Abbildung 12.9    Bei gloria-mundi.de bekommen die Navigationslinks viel Innenabstand und lassen sich so angenehmer auswählen.

Pseudoklassen | Übliche CSS-Selektoren beziehen sich auf HTML-Elemente aufgrund deren Benennung. Pseudoklassen sind spezielle CSS-Selektoren, die ein HTML-Element aufgrund eines bestimmten Zustands ansprechen oder weil es sich an einer bestimmten Stelle befindet. Dazu gehören die Pseudoklassen für Verweise, also Links.

Pseudoklasse

Erklärung

Beispiel

:link

Link zu einem noch nicht besuchten Ziel. Wird meistens weggelassen und nur als a{} definiert.

a:link{text-decoration:none}

:visited

Link zu einem schon besuchten Ziel. Wird selten eingesetzt, kann aber hilfreich sein, weil der Anwender schon sieht, welche Links oder Seiten er schon angeklickt oder besucht hat.

a:visited{color:#444}

:hover

Link, der mit dem Mauszeiger berührt wird (Mouseover)

a:hover{text-decoration:underline}

:active

Link, der aktuell angeklickt wird

a:active{color:#f0f}

Tabelle 12.1    Pseudoklassen für Links

Die Navigation von eilab.de: zwei »normale« grüne Links, die aktuelle Seite in fettem Schriftschnitt und der hover-Zustand in Dunkelgrau

Abbildung 12.10    Die Navigation von eilab.de: zwei »normale« grüne Links, die aktuelle Seite in fettem Schriftschnitt und der hover-Zustand in Dunkelgrau

Drei Zustände für Links sind wichtig, um den Nutzer bei der Bedienung zu unterstützen. Dazu gehören der »normale« Linkzustand, der eindeutig signalisiert: »Ich bin ein Link, mich kann man anklicken«, und der hover-Zustand, der dem Anwender beim Berühren des Links neben einer Veränderung des Mauszeigers noch ein optisches Signal gibt. Und wenn der Anwender auf einer Unterseite ist, sollte in der Navigation außerdem noch die aktuelle Seite optisch kenntlich gemacht werden. Dies geht NICHT mit der Pseudoklasse :active, die nur bei einem Klick aktiviert wird. Um die aktuelle Seite im Menü hervorzuheben, braucht der entsprechende Menüpunkt eine eigene ID oder Klasse per CSS, mit der er formatiert wird.

hover-Zustand

Mit der Pseudoklasse :hover lassen sich tolle Effekte erzielen. Nicht nur Links lassen sich so besser kenntlich machen, die Klasse lässt sich auch für andere HTML-Elemente einsetzen. Zum Beispiel können Tabellenzellen beim Berühren mit der Maus hervorgehoben werden, um besser sichtbar zu sein. Auf Geräten mit Touchscreens ist allerdings Vorsicht geboten: Hier schlägt die »hover-Falle« zu. Denn hier gibt es kein :hover. Wichtige Inhalte sollten daher auch ohne :hover erreichbar sein (dazu später mehr).

Für Fortgeschrittene: tympanus.net/Development/CreativeLinkEffects präsentiert nette kleine hover-Effekte mit der CSS3-Eigenschaft transform.

Abbildung 12.11    Für Fortgeschrittene: tympanus.net/Development/CreativeLinkEffects präsentiert nette kleine hover-Effekte mit der CSS3-Eigenschaft transform.

Navigation mit Listen | Navigationen sind im Grunde eine Ansammlung mehrerer Links, die neben- oder untereinander dargestellt werden. Man könnte sie auch als Auflistung von Links bezeichnen. Daher werden Navigationen in HTML häufig mit Listen umgesetzt:

Navigationspunkte als unformatierte Liste

Abbildung 12.12    Navigationspunkte als unformatierte Liste

Download

Den Quellcode »navigation-mit-listen.html« für dieses Beispiel finden Sie unter BeispielmaterialKapitel_12.

<nav>
<ul>
<li><a href="#">Über</a></li>
<li><a href="#">Projekte</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>

Listing 12.1    Navigation, umgesetzt mit Listenpunkten

Das nav-Element wurde geschaffen, um Navigationsleisten semantisch korrekt auszuzeichnen. Innerhalb des neuen HTML5-Elements <nav> wird eine Liste definiert. Innerhalb der einzelnen Listenpunkte stehen die Verweise. Das Ergebnis ist eine (langweilige) Listendarstellung (siehe Abbildung 12.12). Mit etwas CSS werden die Punkte nebeneinander und optisch ansprechender formatiert:

li {
    display:inline;
     list-stylenone;
     margin0 20px;
}
a {
    font-size20px;
    line-height40px;
    padding10px 25px;
}
a:hover {
    color:#f0f;
}

Listing 12.2    Die CSS-Definitionen der Navigation

Mit display:inline werden die Listenpunkte von Block- in Inline-Elemente umgewandelt, sodass sie nebeneinanderstehen. list-style:none entfernt den typischen Aufzählungspunkt. margin sorgt für Abstand zwischen den Punkten – ebenso wie padding, nur dass dadurch der Innenabstand des Links und damit ja die sensitive Fläche vergrößert wird. padding plus margin sorgen für den Gesamtabstand zwischen den Linktexten. Der Rest ist dann optische Ausgestaltung der Navigation.

Die Listenpunkte nebeneinander

Abbildung 12.13    Die Listenpunkte nebeneinander

 
Zum Seitenanfang

12.1.3    Gestaltung Zur vorigen ÜberschriftZur nächsten Überschrift

Bei der Gestaltung der Hauptnavigation gibt es mehrere Aspekte zu beachten. Sie sollte leicht erkennbar sein. Zudem sollte der Anwender nicht lange nach ihr suchen müssen. Sowohl die Position als auch das Design sollten deutlich zeigen: »Hier bin ich, die Hauptnavigation.« Sie sollte auch klarmachen, dass sie ein inhaltlich sehr bedeutsames Element auf der Seite ist, das wichtigste Navigationselement. Sie kann – oder besser: sie muss – sich daher vom Rest des Designs abheben.

Hier spielen das Gesetz der Geschlossenheit und das Gesetz der Nähe eine große Rolle (siehe dazu Kapitel 6, »Gestaltungsgrundlagen«).

Der Abstand zwischen den einzelnen Links sollte groß genug sein, damit diese als einzelne Links erkennbar sind. Mehr als ein Leerzeichen ist da hilfreich. Andererseits sollte der Abstand nicht so groß sein, damit sie noch als zusammengehörig empfunden werden.

Wichtig ist, dass sich die Gestaltung auch vom Rest des Designs absetzt, um die besondere Stellung als Hauptnavigation zu unterstreichen. Dies ist durch eine andere bzw. besondere Farbe oder Schriftformatierung (Größe, Art, Schnitt) genauso möglich wie einfach durch eine klare optische Trennung. lutherhaus-eisenach.com (Abbildung 12.14) setzt z. B. auf eine schlichte Gestaltung der Navigationspunkte. Die optische Kennzeichnung als Hauptnavigation erfolgt durch viel Weißraum und den damit einhergehenden Abstand zu den anderen Elementen. Dazu kommt noch die Positionierung oben links, sodass der Leser intuitiv erkennt, ohne auch nur einen Buchstaben der Navigation gelesen zu haben, um welches Element es sich hier handelt.

Klar erkennbar, die Hauptnavigation bei lutherhaus-eisenach.com setzt sich vor allem durch entsprechend viel Weißraum ab.

Abbildung 12.14    Klar erkennbar, die Hauptnavigation bei lutherhaus-eisenach.com setzt sich vor allem durch entsprechend viel Weißraum ab.

Der Einsatz von entsprechend viel Weißraum ist gerade bei Webseiten, die ausreichend Platz haben, ein beliebtes Gestaltungsmittel. Alternativ sind farbige Flächen oder Linien als Trennmittel gut geeignet.

 
Zum Seitenanfang

12.1.4    Dropdown-Menü Zur vorigen ÜberschriftZur nächsten Überschrift

Ein Dropdown-Menü bietet einen größeren Überblick und erleichtert das schnelle Navigieren auf Unterseiten. Beim hover eines Hauptpunkts öffnet sich eine Liste mit den Unterseiten, die so direkt ausgewählt werden können. Ohne ein Dropdown-Menü müsste der Anwender erst auf den Hauptpunkt klicken, es müsste sich die Hauptseite öffnen und dann eine Subnavigation die weiteren Punkte anzeigen. Der Anwender weiß in so einem Fall vorher also nicht, ob es sich für ihn überhaupt lohnt bzw. sich hier die gesuchten Informationen befinden, da er die Unterseiten nicht kennt. Und, falls eine gewünschte Unterseite vorhanden ist, müsste er länger warten und einmal mehr klicken als mit einem Dropdown-Menü.

Ein simples Dropdown-Menü bei medicalschool-berlin.de. Sobald sich die Maus über einem Hauptpunkt befindet, klappt ein Submenü auf.

Abbildung 12.15    Ein simples Dropdown-Menü bei medicalschool-berlin.de. Sobald sich die Maus über einem Hauptpunkt befindet, klappt ein Submenü auf.

Mithilfe von CSS und dem hover-Zustand lässt sich ganz einfach ein Dropdown-Menü erzeugen. Dazu werden Aufzählungslisten in HTML ineinander verschachtelt:

<nav>
     <ul>
        <li>
          <a href="#">Über uns</a>
        </li>
        <li>
           <a href="#">Projekte</a>
           <ul>
             <li><a href="#">Screendesign</a></li>
             <li><a href="#">Programmierung</a></li>
             <li><a href="#">Apps</a></li>
           </ul>
        </li>
        <li >
           <a href="#">Leistungen</a>
           <ul>
             <li><a href="#">Beratung</a></li>
             <li><a href="#">Konzeption</a></li>
             <li><a href="#">Design</a></li>
             <li><a href="#">Technik</a></li>
           </ul>
        </li>
        <li>
          <a href="#">Kontakt</a>
        </li>
    </ul>
</nav>

Listing 12.3    Verschachtelte Listen für ein Dropdown-Menü

Download

Den Quellcode »drop-down-menue.html« und »drop-down-menue-2.html« für dieses Beispiel finden Sie unter BeispielmaterialKapitel_12.

Verschachtelte Listen als Ausgangsbasis für ein Dropdown-Menü

Abbildung 12.16    Verschachtelte Listen als Ausgangsbasis für ein Dropdown-Menü

Per CSS werden dann die verschachtelten Listen (nav ul li ul) zuerst ausgeblendet (display:none), und beim Überfahren (hover) eines Hauptpunkts (nav ul li:hover) wird die verschachtelte Liste (nav ul li:hover ul) wieder eingeblendet (display:block):

nav ul li {
    list-stylenone;
    display:inline;
    positionrelative;
}
nav ul li a {
    text-decorationnone;
    padding10px 30px;
}
nav ul li a:hover {
    color#f0f;
}
nav ul li:hover ul {
    displayblock;
}
nav ul li ul {
    displaynone;
    positionabsolute;
    padding:0px;
    top:25px;
    left0;
}
nav ul li ul li {
    displayinline;
}
nav ul li ul li a {
    displayblock;
}

Listing 12.4    CSS-Anweisungen für das Dropdown-Menü

Fertig ist ein einfaches Dropdown-Menü. Über die Besonderheiten auf Tablets und Smartphones erfahren Sie in Abschnitt 12.5, »Navigation auf mobilen Endgeräten – responsive Navigation« mehr. Noch etwas mehr CSS dazu und schon sieht das Menü auch ansprechender aus:

Dank CSS-Formatierung mit Verläufen, Schatteneffekten und entsprechender Farbgebung sieht das Dropdown-Menü ansprechender aus.

Abbildung 12.17    Dank CSS-Formatierung mit Verläufen, Schatteneffekten und entsprechender Farbgebung sieht das Dropdown-Menü ansprechender aus.

 
Zum Seitenanfang

12.1.5    Mega-Dropdown-Menü Zur vorigen ÜberschriftZur nächsten Überschrift

Bei größeren Webseiten mit umfangreicheren Navigationsstrukturen mag ein einfaches Dropdown-Menü, wie oben beschrieben, nicht mehr ausreichen. Lange Dropdown-Listen und weitere Navigationsebenen lassen sich schwer bedienen. Die sogenannten Mega-Dropdowns zeigen mehrere Optionen auf einen Blick. Sie enthalten mehr Informationen und bieten dadurch einen besseren Überblick. Sie sind die Weiterentwicklung der einfachen Dropdown-Menüs.

Mega-Dropdown und User Experience

Ein Mega-Dropdown nimmt eine große Fläche des Bildschirms ein und präsentiert viele Informationen. Die Optik und die Abgrenzung von den anderen Inhalten spielen für die User Experience eine große Rolle. Um den User aber nicht zu verwirren mit dem sich öffnenden großen Navigationsfeld, sollten ein paar Punkte beachtet werden, die diese beiden Artikel aufzeigen: konversionskraft.de/checklisten/praxistipps-conversion-optimierung-mit-mega-drop-downs.html und produktbezogen.de/mega-dropdown-menues-6-learnings-aus-dem-usability-labor.

Mega-Dropdowns können mehrere Navigationsebenen darstellen und Inhalte gruppieren. Während bei klassischen einfachen Dropdown-Menüs die einzelnen Unterpunkte jeweils gleich aussehen, lässt sich bei den Mega-Dropdowns eine individuelle Gestaltung umsetzen. Typografische oder farbliche Kennzeichnung oder der Einsatz von Icons sind denkbar, um visuelle Hierarchien zu schaffen und ein schnelleres Überfliegen zu ermöglichen. Porsche.com/germany (siehe Abbildung 12.18) bietet z. B. ein sauber ausgearbeitetes Mega-Dropdown. Die großzügige Darstellung hat eine angemessene Informationstiefe, die sich nach und nach aufbaut. Abgerundet wird das Ganze durch kleine Effekte wie das dezente Abdunkeln des Inhalts.

Auch porsche.com/germany bietet ein sauber ausgearbeitetes Mega-Dropdown mit mehreren Ebenen.

Abbildung 12.18    Auch porsche.com/germany bietet ein sauber ausgearbeitetes Mega-Dropdown mit mehreren Ebenen.

Leichte Animationen wie das Ein- und Ausblenden des Menüs können das Nutzungserlebnis verbessern. Das große Menü ist dann nicht auf einen Schlag da, sondern wird weich eingeblendet. Zu viele Effekte oder ein zu langsames Einblenden können aber schnell zum gegenteiligen Effekt führen. Ein ruckeliges Einblenden, längeres Warten, weil die Skripte erst geladen werden müssen, oder unnütze optische Spielereien beeinträchtigen die Bedienung eher, als sie zu unterstützen.

Mega-Dropdowns können auf größeren Bildschirmen und bei Bedienung mit einer Maus ein tolles Navigationsinstrument sein. Anders sieht das schon auf kleineren Bildschirmauflösungen und beim Fehlen einer Maus aus. Die Umsetzung responsiver Menüs folgt im Abschnitt über mobile Navigation (siehe Abschnitt 12.5, »Navigation auf mobilen Endgeräten – responsive Navigation«). Die Zugänglichkeit von Mega-Dropdowns etwa mit Screenreadern ist dagegen schon schwieriger. Um die Bedienung aber auch in solchen Fällen zu sichern, gibt es ein jQuery-Plug-in namens Accessible Mega Menu, das dafür sorgt, dass das Mega-Dropdown auch mit Tastatur oder Screenreader bedienbar bleibt: adobe-accessibility.github.io/Accessible-Mega-Menu.

 
Zum Seitenanfang

12.1.6    Kreative Navigationen Zur vorigen ÜberschriftZur nächsten Überschrift

Die in den vorangegangenen Abschnitten besprochenen und gezeigten Navigationen sind die üblichen Navigationsgestaltungen. Mehrere Textlinks mit der gleichen optischen Formatierung stehen nebeneinander. Je nach Design kann es aber sinnvoll sein, die Hauptnavigation etwas individueller zu gestalten.

Diese Icons sind mittlerweile bekannt. Und wer nichts mit ihnen anzufangen weiß, der wird sie auch nicht brauchen.

Abbildung 12.19    Diese Icons sind mittlerweile bekannt. Und wer nichts mit ihnen anzufangen weiß, der wird sie auch nicht brauchen.

Navigation mit Icons | Symbole und Icons können unsere Wahrnehmung erleichtern. Im Straßenverkehr (Schilder) werden sie genauso eingesetzt wie in Benutzeroberflächen von Computerprogrammen (Drucken-Symbol etc.). Es geht eigentlich jeweils um das gleiche Ziel: eine schnelle Bedienung, bei der man nicht groß nachdenken muss. Dazu müssen sich die Symbole und deren Bedeutung aber eingeprägt haben. Ein Warenkorb-Symbol wird meistens schnell verstanden, weil dessen Bedeutung durch entsprechende Erfahrungen gelernt wurde.

weka-holzbau.com setzt in der Hauptnavigation auf Icon und Text.

Abbildung 12.20    weka-holzbau.com setzt in der Hauptnavigation auf Icon und Text.

Icons als Unterstützung in der Navigation einzusetzen kann dafür sorgen, dass der Anwender einen schnelleren Überblick bekommt. Bilder lassen sich schneller erfassen und verstehen als Texte. Icons können der Hauptnavigation auch mehr visuelles Gewicht geben als reiner Text. Der Einstieg in die Navigation fällt damit leichter.

Manche Icons mögen hilfreich sein. Manche sind aber so klein(teilig), dass sie wohl eher keine Hilfe bei der Menüauswahl sind (sport-tiedje.de).

Abbildung 12.21    Manche Icons mögen hilfreich sein. Manche sind aber so klein(teilig), dass sie wohl eher keine Hilfe bei der Menüauswahl sind (sport-tiedje.de).

Zum Weiterlesen

Mehr über den Einsatz und die Gestaltung von Icons erfahren Sie in Abschnitt 11.6, »Icons«.

Damit die Icons aber für einen besseren Überblick und eine bessere Bedienung sorgen, müssen sie auf den ersten Blick verständlich sein. Wenn sie »nur« schmückendes Beiwerk sind, stören sie in der Navigation eher, weil sie vom Inhalt (dem Textlink) ablenken.

Eine Metanavigation bei lidl.de will durch Icons verständlicher sein. In diesem Fall klappt das ganz gut, weil sich hier passende, also leicht verständliche Symbole finden lassen.

Abbildung 12.22    Eine Metanavigation bei lidl.de will durch Icons verständlicher sein. In diesem Fall klappt das ganz gut, weil sich hier passende, also leicht verständliche Symbole finden lassen.

Nicht nur in der Hauptnavigation lassen sich Icons einsetzen, auch in Dropdown-Menüs, in der Metanavigation oder im Inhaltsbereich können sie hilfreiche Dienste leisten. Sie sollten dabei weniger schmückenden Charakter haben, sondern vielmehr Inhalte schneller auffindbar machen und die Bedienung unterstützen.

Gerade wenn die einzelnen Produktgruppen bzw. deren Benennung nicht jedem verständlich sind, können kleine Illustrationen als Ergänzung sehr hilfreich sein, wie hier bei globetrotter.de/zelte (ist so aber leider nicht mehr online).

Abbildung 12.23    Gerade wenn die einzelnen Produktgruppen bzw. deren Benennung nicht jedem verständlich sind, können kleine Illustrationen als Ergänzung sehr hilfreich sein, wie hier bei globetrotter.de/zelte (ist so aber leider nicht mehr online).

Farbige Navigationspunkte | Ein Informationsleitsystem, das auf Farben beruht, kommt recht häufig vor und wird z. B. gerne in größeren Gebäuden (etwa Flughäfen, Bahnhöfen etc.) eingesetzt. Farben erleichtern die Wiedererkennung und Orientierung.

Wie bei Hochschulen üblich, hat auch die Karlshochschule (karlshochschule.de) ein umfangreiches Informationsangebot. Mit Farben lässt sich dieses gut strukturieren.

Abbildung 12.24    Wie bei Hochschulen üblich, hat auch die Karlshochschule (karlshochschule.de) ein umfangreiches Informationsangebot. Mit Farben lässt sich dieses gut strukturieren.

Bei komplexeren Webseiten können Farben Informationsgruppen zusammenfassen und so für eine bessere Übersicht sorgen. Typischerweise werden die Hauptpunkte unterschiedlich eingefärbt und vererben dann ihre Farbgebung an ihre Unterseiten.

Hier hat jeder Fachbereich seine eigene Farbe, die sich auch auf den Unterseiten im Hintergrund fortsetzt (hs-harz.de/studium).

Abbildung 12.25    Hier hat jeder Fachbereich seine eigene Farbe, die sich auch auf den Unterseiten im Hintergrund fortsetzt (hs-harz.de/studium).

Bilder als Navigation | Bilder haben eine große Wirkung auf den Betrachter. Sie ziehen unsere Aufmerksamkeit an und sprechen uns emotional an. Bilder in der Navigation oder Bilder als Navigation verstärken damit deren Wirkung enorm. Auf ozconsignments.com (Abbildung 12.26) fügt sich die ohnehin schon sehr individuelle Gestaltung mit Bildern als Navigationspunkten gut ins Gesamtlayout ein.

Mit Bildern wird die Hauptnavigation noch stärker ein Gestaltungselement und lässt sich kreativer in das Gesamtkonzept einfügen. Früher waren auch noch häufiger komplette virtuelle Szenarien zu bewundern, die in den letzten Jahren doch stark zurückgingen.

Eine eigene Welt, in der die Navigation Teil der Gesamtkomposition ist (ozconsignments.com)

Abbildung 12.26    Eine eigene Welt, in der die Navigation Teil der Gesamtkomposition ist (ozconsignments.com)

Vertikale Navigation | Auch wenn die Hauptnavigation meistens horizontal unter oder neben dem Logo platziert wird, gibt es immer wieder Webseiten, die eine vertikale Ausrichtung wählen. Vor allem bei sehr vielen Navigationspunkten oder wenn die Benennung sehr lang ist, lohnt sich diese Art der Gestaltung, da es bei einer horizontalen Gestaltung schnell eng werden kann.

Hier könnte es nebeneinander eng werden, daher gibt es bei btv.at die vertikale Navigationsanordnung.

Abbildung 12.27    Hier könnte es nebeneinander eng werden, daher gibt es bei btv.at die vertikale Navigationsanordnung.

Auch bei Webseiten, die auf einem Content-Management- oder Shop-System beruhen, kann eine vertikale Anordnung sinnvoll sein, wenn damit zu rechnen ist, dass Anzahl und Benennung der Navigationspunkte möglichst flexibel gehalten werden sollen. Mit einer vertikalen Gliederung stößt man auch bei zukünftigen Erweiterungen nicht so schnell an die Grenzen. Klar ist aber auch, dass dadurch ein großer Teil des Inhaltsbereichs von der Navigation belegt ist. Für den eigentlichen Inhalt steht dann weniger Platz zur Verfügung.

Bei amazon.de gibt es sehr viele und größtenteils sehr lange Navigationspunkte. Daher ist eine vertikale Anordnung sinnvoller als eine horizontale.

Abbildung 12.28    Bei amazon.de gibt es sehr viele und größtenteils sehr lange Navigationspunkte. Daher ist eine vertikale Anordnung sinnvoller als eine horizontale.

Typografische Spielereien | Auch durch die typografische Ausgestaltung der Navigationspunkte lässt sich eine individuelle Note hinzufügen.

Bei minimalmonkey.com sind markante typografische Navigationspunkte der Inhalt.

Abbildung 12.29    Bei minimalmonkey.com sind markante typografische Navigationspunkte der Inhalt.

Die Projektnavigation in großen Lettern über die volle Browserbreite. Und bei Mouseover erscheint ein großes Vorschaubild samt individueller Hintergrundfarbe bei durimel.io.

Abbildung 12.30    Die Projektnavigation in großen Lettern über die volle Browserbreite. Und bei Mouseover erscheint ein großes Vorschaubild samt individueller Hintergrundfarbe bei durimel.io.

Gerade die typografische Gestaltung hat in den letzten Jahren enorm an Bedeutung gewonnen, nicht zuletzt durch die Möglichkeit, Webfonts (siehe Kapitel 10, »Typografie«) einzubinden. Als Alternative zu Bildern und/oder Grafiken bieten sie vielfältige Möglichkeiten, kreativ zu werden.

Besondere »hover«-Effekte | Nicht nur mit der Gestaltung der Navigation und der Navigationspunkte lässt sich kreativ arbeiten, auch mit dem Mouseover-Zustand (Pseudoklasse hover) können Sie einiges anstellen. Sicherlich sind in den wenigsten Fällen auffällige hover-Effekte geeignet. Aber gezielt eingesetzt, können sie die Bedienung erleichtern, die User Experience erhöhen und ganz allgemein für Aufmerksamkeit sorgen.

Die Inhalte liegen wie Blätter übereinander. Beim Mouseover ändert sich die Hintergrundfarbe, beim Klick fahren einzelne Seiten beiseite (marianne-brandt-wettbewerb.de).

Abbildung 12.31    Die Inhalte liegen wie Blätter übereinander. Beim Mouseover ändert sich die Hintergrundfarbe, beim Klick fahren einzelne Seiten beiseite (marianne-brandt-wettbewerb.de).

iHover

iHover nennt sich eine Sammlung mit netten CSS3-Effekten, die ganz einfach eingesetzt werden können: gudh.github.io/ihover/dist.

 
Zum Seitenanfang

12.1.7    Feste Navigation Zur vorigen ÜberschriftZur nächsten Überschrift

In Zeiten von One-Pagern und Infinite Scrolling (siehe Kapitel 13, »Webdesign-Stile und -Trends«) hat sich auf einigen Webseiten eine fixe Navigation etabliert, die am oberen Browserrand fest stehen bleibt. Normalerweise scrollt die Navigation mit und verschwindet so recht schnell aus dem Blickfeld des Anwenders. Damit dieser aber doch immer Zugriff auf die Navigation hat und sich nicht mitten auf der Seite neu orientieren muss oder wieder lange hochscrollen darf, gibt es die Möglichkeit, diese zu fixieren.

Meistens, aber nicht immer, ist die Navigation am oberen Rand fix. Bei einigen Seiten steht sie auch an der linken oder rechten Seite, und der Inhalt scrollt neben ihr vorbei.

Eine feststehende Navigation wird immer beliebter, so wie hier bei sonjaka.de.

Abbildung 12.32    Eine feststehende Navigation wird immer beliebter, so wie hier bei sonjaka.de.

SCHRITT FÜR SCHRITT

Eine fixe Navigation mit HTML und CSS

Eine fixe Navigation selbst umzusetzen ist gar nicht so schwer, wie der folgende Workshop zeigen soll.

Download

Den Quellcode »fixed-navigation.html« für dieses Beispiel finden Sie unter BeispielmaterialKapitel_12.

Navigation definieren

Dazu definieren wir zunächst in HTML eine Navigation mit Listenpunkten:

<nav>
<ul>
<li><a href="#">Über</a></li>
<li><a href="#">Projekte</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>

Listing 12.5    HTML-Liste für die Navigation

Fließtext einbinden

Darunter soll jede Menge Fließtext platziert werden, der die Seite einfach sehr lang machen soll, um den Effekt später im Browser auch zu sehen (im Folgenden leicht abgekürzt):

<div class="wrapper">
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien, leben die Blindtexte.
...
...
...
</p>
</div>

Listing 12.6    Der Inhaltsbereich in HTML

Feste Positionierung zuweisen

Das Entscheidende ist, im CSS der Navigation die feste Positionierung zuzuweisen:

nav {
background#a4a1a1;
positionfixed;
width100%;
top:0;
}

Listing 12.7    Fixe Positionierung der Navigation mit CSS

Normalerweise erstreckt sich der Navigationscontainer über die volle Breite. Durch die position-Angabe ist er nur noch so breit wie sein Inhalt. Mit der Weitenangabe sorgen wir dafür, dass er sich wieder über die volle Browserbreite erstreckt. Die top-Angabe brauchen wir, damit der Container immer fest am oberen Rand hängt. Wichtig ist dann noch, den Inhalten einen ausreichend großen Abstand zum oberen Rand zu geben, damit sie nicht von der fixen Navigation überlagert werden:

.wrapper {
margin100px auto 0;
}

Listing 12.8    Abstand des Inhaltsbereichs nach oben

Eine Navigation, die fix am oberen Browserrand steht, ist recht einfach mit CSS umzusetzen.

Abbildung 12.33    Eine Navigation, die fix am oberen Browserrand steht, ist recht einfach mit CSS umzusetzen.

Die weiteren Angaben dienen der optischen Formatierung und sind wie alle anderen Beispiele des Buches im Downloadmaterial zum Buch zu finden.

Versteckte Navigation | Durch die mobilen Endgeräte sind neue Anforderungen an das Webdesign aufgekommen, unter anderem an die Darstellung der Navigation. Diese wird auf kleineren Bildschirmen häufig ausgeblendet und erst mit Klick auf ein Icon oder einen Text komplett eingeblendet. Dieses Prinzip nutzen einige Webseiten auch bei höheren Auflösungen.

Platz sparen: Bei modafamilia.com ist die Navigation zuerst versteckt hinter einem fixen Icon. So ist sie irgendwie immer präsent und doch nicht da.

Abbildung 12.34    Platz sparen: Bei modafamilia.com ist die Navigation zuerst versteckt hinter einem fixen Icon. So ist sie irgendwie immer präsent und doch nicht da.

Durch das Verstecken der Navigation lässt sich im Design natürlich viel Platz sparen. Gerade bei größeren bzw. umfangreichen Navigationstexten kann dies eine gute Lösung sein. Das Hauptaugenmerk liegt dann schneller auf dem eigentlichen Inhalt. Andererseits kann sich der Anwender nicht so schnell einen Gesamtüberblick über die Seiten und ihre Unterseiten verschaffen. Er muss immer erst einmal klicken, bevor er die einzelnen Navigationspunkte zu sehen bekommt. Dies kann ziemlich lästig sein. Sie müssen also abwägen, ob der Vorteil der Konzentration auf den Inhalt die mangelnde Übersicht durch nicht sichtbare Navigationspunkte überwiegt.

Zum Weiterlesen

Mehr über die versteckte Navigation erfahren Sie in Abschnitt 12.5, »Navigation auf mobilen Endgeräten – responsive Navigation«.

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Webdesign Webdesign
Jetzt Buch bestellen

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Praxisbuch Usability und UX
Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Responsive Webdesign
Responsive Webdesign


Zum Rheinwerk-Shop: Website-Konzeption und Relaunch
Website-Konzeption und Relaunch


Zum Rheinwerk-Shop: UX Writing und Microcopy
UX Writing und Microcopy


Zum Rheinwerk-Shop: WordPress 5
WordPress 5


Zum Rheinwerk-Shop: Stile & Looks
Stile & Looks


Zum Rheinwerk-Shop: Digitale Illustration
Digitale Illustration


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2020
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern