12.6    Weitere Navigationsmittel 

Neben der Haupt-, Sub- und Footer-Navigation gibt es noch weitere Möglichkeiten, dem Anwender die Navigation durch und innerhalb der Seite zu ermöglichen. In den meisten Fällen bietet es sich sogar an, dass der Anwender nicht nur über die Navigation gehen muss, um zu weiteren Inhalten zu gelangen.

 

12.6.1    Links 

Das klassische Navigationsmittel außerhalb der Navigation ist eine interne Verlinkung. Innerhalb des Inhaltsbereichs einer Seite wird eine (meistens thematisch passende) andere Unterseite verlinkt. Gezielt eingesetzt, können Querverlinkungen für den Anwender einen großen Mehrwert bieten.

Links sollen immer als solche erkennbar, aber auch nicht visuell aufdringlich sein, sie sind schließlich keine Buttons.

Abbildung 12.64    Der klassische Weg: Unterstrichene Links sind als solche bei basics09.de auch in der Headline markant und gut erkennbar.

Es gibt einige Auszeichnungsmöglichkeiten, um Links erkennbar zu machen. Der klassische Weg besteht darin, Links zu unterstreichen. Dies ist durch die Standarddarstellung eines Links (Blau und unterstrichen) bei jedem Anwender im Gedächtnis. Mit unterstrichenen Texten kann man also nichts falsch machen.

 

12.6.2    Individuelle Linkunterstriche 

Der klassische Unterstrich wird per CSS mit text-decoration:underline erzeugt, bzw. bei Links erscheint er automatisch. Der so erzeugte Unterstrich ist allerdings sehr markant, da er automatisch in der Textfarbe erscheint, und Unterlängen in den Buchstaben streicht er durch, was nicht so schön aussieht.

Abbildung 12.65    Der typische Unterstrich: nicht schön, aber markant und bekannt, durchkreuzt die Unterlängen der Buchstaben.

Linkunterstrich mit »border« | Mithilfe der border-Eigenschaft lässt sich ganz einfach ein eigener Unterstrich erzeugen, der auch viele Gestaltungsoptionen bietet. Dazu wird ein eigener Link definiert:

<a href="#">Link mit eigenem Strich</a>

Listing 12.17    Linkdefinition in HTML

Der Link bekommt folgende CSS-Eigenschaften zugewiesen:

a {
    color: #029b63;
    text-decoration: none;
    border-bottom: 1px solid #bdbdbd;
    padding-bottom: 2px;
}
a:hover {
    border-bottom: 2px solid #029b63;
}

Listing 12.18    Eigener Unterstrich per CSS

Abbildung 12.66    Links der Normalzustand und rechts der hover-Zustand mit verändertem Unterstrich

Linkunterstrich mit »border-bottom« | Mithilfe der border-bottom-Eigenschaft lässt sich eine eigene Linie erzeugen und in Farbe, Dicke und Linientyp individuell definieren. Dazu wird per text-decoration:none der normale Unterstrich ausgeblendet. Mit padding-bottom wird Innenabstand hinzugefügt. So lässt sich der Abstand zwischen Text und Linie festlegen und bestimmen, dass die Linie die Unterlängen nicht mehr berührt. Beim hover-Zustand wird dann nur die Linie angepasst und verstärkt.

Nicht immer sind Unterstriche passend zum restlichen Design, manchmal muss es eine stärkere Betonung sein. Eine gern genommene alternative Auszeichnung ist eine andere Textfarbe. Der Link wird durch die Farbe kenntlich gemacht. Dies ist dann oft eine Highlight-Farbe, die auch in der Navigation vorkommt und so für eine Wiedererkennung und Einheitlichkeit sorgt.

Abbildung 12.67    Bei kisd.de sind die Links im Fließtext farblich hervorgehoben. Der gleiche Farbton kennzeichnet in der Navigation (links) die aktive Unterseite.

Links typografisch hervorheben | Weitere, eher seltener genutzte Varianten sind ein anderer Schriftschnitt, eine andere Schriftart oder ein farbiger Hintergrund. Hier kann es schnell zu Verwechslungen kommen, ob der so gestaltete Text ein Link ist oder einfach nur besonders ausgezeichnet werden sollte. Diese Irritation sollten Sie vermeiden, da dies zu Frustration beim Anwender führen kann. Ist ein Link beispielsweise mitten im Fließtext fett gestaltet, geht der Anwender wohl eher nicht davon aus, dass es sich um einen Link handelt, sondern einfach eine besondere Betonung des Textes vorliegt. Am Ende eines kurzen Textes, etwas abgesetzt und mit dem Wort Weiterlesen versehen, wird der Anwender schon eher auch »fetten« Text als Link wahrnehmen. Einerseits entscheidet der inhaltliche Kontext, in dem sich der Link befindet, andererseits aber auch die Gesamtgestaltung der Webseite darüber, ob ein Link als solcher erkannt wird.

Abbildung 12.68    Gerne werden Links auch ganz dezent gestaltet wie bei pluto.at. Sie fügen sich so schöner ins Design ein, sind aber dafür auch schwieriger als Links zu erkennen.

Links mit »hover« hervorheben | Um die letzten Zweifel eines Links auszuräumen, gibt es den Mouseover-Zustand. Mithilfe der Pseudoklasse hover lässt sich das Aussehen der Links verändern, sobald die Maus diese berührt. Dies ist für den Anwender neben der Veränderung des Mauscursors ein wichtiges optisches Zeichen, das nicht unterschätzt werden sollte. Die Gestaltungsmöglichkeiten des hover-Zustands sind im Grunde die gleichen wie beim normalen Linkzustand. Farb- oder Textanpassungen sind möglich.

Abbildung 12.69    Der Normalzustand ist bei klenkhoursch.de durch den Unterstrich klar erkennbar. Beim Mouseover wird der Link markant rot.

Besuchte Links mit »visited« hervorheben | Als weitere hilfreiche Pseudoklasse gibt visited den Anwendern einen Überblick über schon besuchte Webseiten. Gerade bei einem umfangreichen Informationsangebot mit vielen Querverlinkungen kann es helfen, die Übersicht zu wahren, wenn schon besuchte Webseiten gekennzeichnet sind. Google geht hier mit gutem Beispiel voran (siehe Abbildung 12.70). In der Praxis wird diese Pseudoklasse allerdings eher selten eingesetzt. Links zu schon besuchten Webseiten sehen dann aus wie »normale« Links.

Abbildung 12.70    Bei der Google-Suche ist die Anzeige der schon besuchten 1 bzw. angeklickten Seiten Gold wert.

 

12.6.3    Buttons 

Buttons sind so etwas wie die großen Brüder der Textlinks. Markanter, dominanter, aufmerksamkeitsstärker, wie sie sind, buhlen diese Links darum, angeklickt zu werden. Buttons sollten daher gezielt für bestimmte Links aufgehoben werden, die die besondere Aufmerksamkeit bekommen sollen.

Abbildung 12.71    Ein bunter Button-Potpourri. So unterschiedlich gestaltet können moderne Buttons aussehen.

Unter Button wird meistens eine markant gestaltete Schaltfläche verstanden. Durch den Flat-Design-Trend gibt es aber auch immer öfter Buttons, die einfarbig sind und nur durch ihre schiere Größe Aufmerksamkeit erregen.

Einen Flat-Button mit CSS umsetzen (Beispiel 1) | Einen Button im Flat-Stil umzusetzen ist gar nicht schwer. Mit ein wenig CSS lassen sich schnell modern wirkende Buttons erstellen.

/* Mein Button 1 */
.btn-1 {
    border: 3px solid #7021e7;
    color: #7021e7;
        padding: 25px 80px;
}
.btn-1:hover, .btn-1:active {
    color: #fff;
    background: #7021e7;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

Listing 12.19    Das CSS für einen Button im Flat-Stil mit Rahmen

Abbildung 12.72    Die Flat-Buttons der beiden Tutorials mit hover-Zustand

Der Button bekommt einen größeren Innenabstand und einen dickeren Rahmen, mehr nicht. Im Mouseover-Zustand invertiert die Text-Hintergrund-Kombination. Die Eigenschaft transition sorgt für einen dezenten weichen Übergang.

Einen Flat-Button mit CSS umsetzen (Beispiel 2) | Hier sehen Sie ein CSS-Beispiel für einen Button im Flat-Stil mit vollflächiger Farbe und einem Schatten:

/* Mein Button 2 */
.btn-2 {
    background: #4fd8bf;
    color: #fff;
    box-shadow: 0 6px #0b7f6a;
    border-radius: 5px;
}
.btn-2:hover {
    box-shadow: 0 4px #0b7f6a;
    top: 2px;
    color: #fff;
}
.btn-2:active {
    box-shadow: 0 0 #0b7f6a;
    top: 6px;
    color: #0b7f6a;
}

Listing 12.20    Das CSS für einen Button im Flat-Stil mit vollflächiger Farbe und einem Schatten

Der Flat-Stil drückt sich durch seine Einfachheit, einfarbige Farbflächen und das Fehlen grafischer Effekte aus. So bekommt der Button nur eine Hintergrundfarbe, eine Textfarbe, einen Schatten nach unten, und die Ecken werden abgerundet, fertig. In »links-buttons.html« ist der Button noch weiter ausgestaltet und bekommt einen hover- und active-Zustand. Ebenso ist ein weiterer moderner Button im Flat-Stil vorhanden.

Abbildung 12.73    War eine Zeit lang ein Trend und hat sich jetzt etabliert: der sogenannte Ghost-Button, wie bei anyilu.com. Eine Kontur, großzügig um den Text gelegt, kennzeichnet diese Art Button.

Einen Verlaufsbutton gestalten | Grafisch ausgestaltete Buttons wurden bis vor Kurzem noch mit einem Grafikprogramm erstellt, ausgeschnitten, und die Grafik wurde dann per HTML oder CSS eingebunden. Änderungen waren dementsprechend mühsam, und der Aufwand bei vielen Buttons war immens. Dank CSS3 gibt es einige Gestaltungsmöglichkeiten, die den Umweg über ein Grafikprogramm vermeiden.

Abbildung 12.74    Oben der normale Zustand des grafischen Buttons und unten der hover-Zustand

.button {
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
display: inline-block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
border-radius: 8px;
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
text-shadow: 0 1px 1px rgba(0,0,0,0.6);
border: 1px solid rgba(199,34,0,1);
cursor: pointer;
background-color: #e22092;
}
.button:hover{
color: #fff;
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #cf0404 0%, #ff3019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf0404), color-stop(100%,#ff3019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cf0404 0%,#ff3019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cf0404 0%,#ff3019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cf0404 0%,#ff3019 100%); /* IE10+ */
background: linear-gradient(to bottom,  #cf0404 0%,#ff3019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf0404', endColorstr='#ff3019',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0);
box-shadow: 0 0 10px 0 rgba(0,0,0,0);
}

Listing 12.21    Der CSS-Quellcode eines grafischen Buttons

Ultimate CSS Gradient Generator

Der Ultimate CSS Gradient Generator ist ein nützliches Tool, um Farbverläufe mit passendem CSS-Code zu erstellen. Sie finden ihn unter: colorzilla.com/gradient-editor.

Abbildung 12.75    Der Ultimate CSS Gradient Generator

Der Farbverlauf wurde mit dem Ultimate CSS Gradient Generator (colorzilla.com/gradient-editor) erstellt. Das ist ein intuitives Tool, das ähnlich wie ein Grafikprogramm funktioniert und gleich den CSS-Code samt der Fallbacks für verschiedene Browser ausliefert. Im Normalzustand geht der Verlauf von oben heller nach unten dunkler, sodass ein plastischer Effekt entsteht, als ob der Button leicht gewölbt wäre. Im hover-Zustand werden die Verlaufsfarben umgedreht, sodass die dunklere Farbe oben ist und der Button einen »eingedrückten« Eindruck macht. Dazu kommen die Abrundung der Ecken, ein leichter Schatten für den Text, damit dieser besser lesbar ist, und ein Schatten um den gesamten Button, der den plastischen Eindruck verstärkt. Im hover-Zustand wird dieser Schatten ausgeblendet.

Abbildung 12.76    Bei onehub.com ist der optische Unterschied zwischen einem Call-to-Action-Button (Try for Free) und einem normalen Textlink (view features) gut erkennbar.

Der Call-to-Action-Button | Eine »Weiterentwicklung« der Buttons ist der sogenannte Call-to-Action-Button, der den Betrachter animieren soll, etwas zu tun – klar, ihn anzuklicken. Aber viele Links und Buttons sind ein Angebot an den Anwender. Sie bieten weitere Inhalte auf weiteren Unterseiten an. Ein Call-to-Action-Button ist im Grunde kein Angebot, sondern eine Aufforderung. Das kann »Kauf mich«, »Leg mich in den Warenkorb«, »Melde dich an«, »Downloade«, »Bestelle den Newsletter« etc. sein.

Abbildung 12.77    Markanter Call-to-Action-Buttons bei seitwert.de

Diese Art von Buttons ist häufig noch weiter ausgestaltet als »normale« Buttons. Ergänzender Text oder Icons sind beliebte Gestaltungselemente, die einen großen Call-to-Action-Button erst zu dem machen, was er ist.

 

12.6.4    Die Suchfeld-Navigation 

Gerade bei umfangreicheren Webseiten ist die Suchfunktion ein hilfreiches Navigationsmittel, das die Anwender auch gerne benutzen. Bevor sich der Anwender lange durch die Navigationsstruktur »kämpft«, ist die Suche nur einen Klick entfernt. In Onlineshops ist eine Suchfunktion Standard. Anstatt erst die Kategorien zu studieren, lassen sich Produkte damit schneller finden. Eine Suchfunktion impliziert aber immer auch, dass viele Inhalte vorhanden sind. Bei kleineren Unternehmenswebseiten ist dies selten der Fall, und dann wirkt ein Suchfeld übertrieben bzw. schürt falsche Erwartungen.

Positionierung | Ein Suchfeld steht eigentlich immer oben rechts im Kopfbereich der Webseite. Diese Positionierung hat sich beim Anwender so eingeprägt – mit verursacht durch die vielen CM- und Shop-Systeme, die die Suchfelder eben genau da oben platziert haben. Wer das Suchfeld zwar anbieten, aber nicht ganz so prominent platzieren möchte, stellt die Suchmaske, wenn vorhanden, in eine Seitenleiste oder in die Fußleiste.

Aufbau | Eine Suchfunktion ist im Normalfall sehr einfach aufgebaut: ein Eingabefeld und ein Suchbutton häufig in Form einer Lupe. Klingt so einfach, ist es in der Praxis aber nicht immer. Mehr Formular- oder andere inhaltliche Elemente sollten rund um die Suchmaske auch nicht erscheinen, da sie unnötig ablenken. Manchmal gibt es eine erweiterte Suche mit verschiedenen Auswahlboxen etc. Für die Anwender ist dies aber eher störend als hilfreich.

Da es ein wichtiges Navigationsinstrument ist, sollte das Suchfeld gut sichtbar sein und sich vom restlichen Design eindeutig abheben, sodass die Anwender es beim Scannen der Seite schnell erkennen. Häufig wird das Suchfeld samt Button komplett angezeigt, es gibt aber die Option, dieses hinter einem Button zu verbergen und erst bei Bedarf komplett einzublenden. Durch diese Methode spart man natürlich Platz, und das Eingabefeld lenkt nicht von anderen Inhalten ab. Meistens ist es dann so realisiert, dass schon beim Mouseover über den Button die komplette Suchmaske erscheint. Dies ist intuitiv bedienbar, und die meisten Anwender sollten es verstehen.

Abbildung 12.78    Ein Mouseover allein reicht leider nicht. Erst ein Klick auf die Lupe öffnet das Suchfeld bei wpde.org.

Das Eingabefeld | Das Eingabefeld sollte klar als solches erkennbar und der eingegebene Text gut lesbar sein. Es gibt Webseiten, da wirkt das Suchfeld wie ein notwendiges Übel, und die einzelnen Felder werden dementsprechend klein gestaltet. Aber Text im Eingabefeld, der 10 Pixel klein in grauer Schrift dargestellt ist, dient nicht der Sache.

Abbildung 12.79    Zweimal deutschland.de: Oben die Variante aus der 1. Auflage dieses Buches. Das Suchfeld und vor allem der Text sind sehr klein. Nach dem Relaunch (unten) sieht es schon besser aus. Das Eingabefeld und damit die Schriftgröße sind gewachsen.

In den meisten Eingabefeldern ist schon Text vorgeschrieben. Viele Suchfelder haben keinen Titel mehr, sondern sind inzwischen so selbsterklärend, dass sie darauf verzichten können. Um die Bedeutung der Suchmaske im Allgemeinen und des Eingabefeldes im Besonderen trotzdem klarzumachen, werden Begriffe wie Suche, Suchbegriff eingeben oder Ähnliches verwendet.

Abbildung 12.80    bidvoy.net hilft, indem verschiedene Beispielsuchtexte 1 abwechselnd im Eingabefeld präsentiert werden und ein kurzer Ergänzungstext unter dem Suchfeld erscheint.

Klickt der Anwender in das Eingabefeld, kann er den Text überschreiben. Ungünstig ist es, wenn er den Text erst mühsam markieren und löschen muss. Die Schrift des Eingabefeldes sollte also nicht zu klein sein und das Feld nicht zu kurz. Etwa ab 15 Zeichen aufwärts sind schon hilfreich, damit der Anwender seinen geschriebenen Text auch komplett lesen kann. Hier ein Beispiel für einen vorgegebenen Platzhaltertext:

<input type="search" placeholder="Suchbegriff eingeben ...">

Listing 12.22    Ein Sucheingabefeld mit Platzhaltertext

Die ganze hohe Kunst eines Eingabefeldes ist eine Autovervollständigung bzw. Vorschlagsliste. Anhand der ersten Buchstaben werden in Echtzeit mögliche Suchbegriffe extrahiert und angezeigt. Dies kann zu einer enormen Erleichterung der Eingabe führen und erhöht die User Experience.

Submit-Button | Der Submit-Button ist bei einem Formular der Button, der das ausgefüllte Formular abschickt. Eine Suchmaske ist ein kleines Formular mit Eingabefeld und eben dem Submit-Button.

Der Submit-Button sollte eindeutig als markanter Button erkennbar sein. Bei vielen Suchmasken hat sich das Icon einer Lupe durchgesetzt. Dies ist sicherlich verständlich als Zeichen für eine Suchmaske, ob aber alle Anwender immer gleich verstehen, dass die Lupe auch ein Submit-Button ist, darf bezweifelt werden bzw. hängt wohl entscheidend von seiner Gestaltung ab. Lupen, die wie auffällige Buttons aussehen, animieren eher zum Klicken als dezente kleine Icons.

Abbildung 12.81    Bei istockphoto.com steht zuerst die typische Suchlupe.

Anstelle einer Lupe erscheinen auch ab und zu Begriffe wie Go oder Suchen auf dem Button. Während Ersteres sehr international klingt und sicherlich nicht für alle Zielgruppen geeignet ist, dürfte das Wort Suchen eindeutig sein.

Abbildung 12.82    photocase.de erklärt im Eingabetext, wofür das Feld gut ist – Suche Fotos, Fotografinnen.

Anstelle des Submit-Buttons funktioniert zur Auslösung der Suche auch die (¢)-Taste. Viele Anwender nutzen diese schon intuitiv, und sie wird eigentlich auch immer von Formularen unterstützt. Kritisch ist es nur andersherum – nämlich gar keinen Submit-Button anzubieten und davon auszugehen, dass die Anwender wissen, dass sie die (¢)-Taste drücken müssen. Davon sollten Sie besser nicht ausgehen und daher immer einen Submit-Button (und wenn es eben doch nur eine kleine Lupe ist) anbieten.

Abbildung 12.83    Ein dezentes Suchfeld 1 und kein Submit-Button. Die Suche steht beim enorm-magazin.de nicht im Vordergrund.

 

12.6.5    Weitere Navigationselemente 

Es gibt noch einige weitere »kleinere« Navigationselemente, mit denen Sie sich zumindest kurz auseinandersetzen sollten.

Breadcrumb | Bei Webseiten größeren Umfangs und mit tiefer Navigationsstruktur hat sich die Anzeige einer Breadcrumb bewährt. Der Brotkrumenpfad zeigt die Position der aktuellen Seite innerhalb der Navigationsstruktur an. Auf rapha.cc sieht das beispielsweise wie folgt aus:

Abbildung 12.84    So klein und unscheinbar und trotzdem immer präsent – die Breadcrumb 2 bei rapha.cc.

So bekommt der Anwender einen besseren Überblick, wo er sich innerhalb der Webseite befindet. Anwender, die über eine Suchmaschine gekommen sind oder die interne Webseitensuche benutzt haben, landen häufig auf Unterseiten und können sich so auch anhand der Breadcrumb orientieren. Zusätzlich besteht durch die Breadcrumb die Möglichkeit, direkt zu höheren Navigationsebenen zu springen.

Abbildung 12.85    Irgendwo zwischen Hauptnavigation und den Inhalten steht die Breadcrumb 3, auch bei eckball.de.

Die Breadcrumb befindet sich meistens zwischen dem Inhaltsbereich und dem Kopfbereich bzw. der Hauptnavigation. Da sie »nur« eine hilfreiche Zusatzinfo ist, ist sie meistens sehr dezent gestaltet – das heißt, es wird eine recht kleine Schriftgröße und manchmal auch noch eine helle(re) Textfarbe verwendet.

Schlagwortliste/Tag-Cloud | Eine Schlagwortwolke macht überall da Sinn, wo Inhalte verschlagwortet, also mithilfe von Begriffen indexiert wurden. Dies könnten z. B. eine Galerie von Webseiten, ein Fotoarchiv, Produkte in einem Onlineshop oder die Artikel in einem Blog sein. Die Schlagwörter bieten eine weitere Möglichkeit der Orientierung und der Suche von bestimmten Produkten oder Beispielen.

Abbildung 12.86    Bei ganzohr.org sind die einzelnen Artikel verschlagwortet, und die Tag-Cloud steht klassischerweise in der Seitenleiste.

Bei manchen Webseiten gibt es noch eine Unterscheidung in Kategorien und Schlagwörter (englisch: Tags). Eine einfache Auflistung der Schlagwörter ist dann genauso möglich wie eine Tag-Cloud. Diese visualisiert gleichzeitig die Häufigkeit der einzelnen Schlagwörter: je größer, desto häufiger. Dies bietet gleich einen Überblick über die Schwerpunkte der Webseite.

Sprachauswahl | Bei mehrsprachigen Webseiten sollte es einen Sprachwähler geben, um dem Anwender die Möglichkeit des Sprachwechsels zu geben. Natürlich ist es schön, wenn die Webseite beim Laden (aufgrund der IP) den aktuellen Standort des Anwenders erkennt und gleich die passende Sprache anzeigt, aber zum einen ist dies nicht immer so, und zum anderen muss es nicht immer die gewünschte Sprache des Anwenders sein.

Ein Sprachwechsler befindet sich meist im rechten oberen Bereich der Webseite, meist in der Nähe oder innerhalb der Metanavigation. Entweder werden Länderflaggen als Synonym für die Sprache benutzt, die jeweilige Sprache als Wort oder beides zusammen.

Es ist sinnvoll, die Wörter in den jeweiligen Sprachen zu schreiben, also besser Deutsch als German zu wählen. Denn wer eine bestimmte Sprache auswählen möchte, wird dies in »seiner« Sprache besser verstehen. Bei wenigen auswählbaren Sprachen werden diese häufig direkt angezeigt, bei mehreren gibt es häufig ein Dropdown-Menü, damit die Texte oder Grafiken nicht so viel Platz einnehmen.

Abbildung 12.87    Der Sprachwähler bei hymer.com als Dropdown-Menü. Zur besseren Verständlichkeit sind die Sprachen als Länderflagge und als Text vorhanden.

Abbildung 12.88    Nicht direkt ein Sprachwähler 1: Dieses umfangreiche »Dropdown«-Menü bei sma.de leitet zu den einzelnen Länder-Webseiten weiter.

Sitemap | Eine Sitemap bietet kompakt auf einer Unterseite einen Überblick über alle Einzelseiten der Webseite. Die meisten CM- und Shop-Systeme sind in der Lage, eine Sitemap automatisch zu erstellen, sodass nicht zu viel Handarbeit notwendig ist. Aber wird ein Sitemap-Link in der Meta- oder Footer-Navigation untergebracht, dann kann er dem einen oder anderen bei seiner Suche helfen.

Abbildung 12.89    Nur ein kleiner Ausschnitt der Sitemap von bmw.de

Auch für Suchmaschinen ist eine Sitemap interessant, bzw. allein für sie lohnt sich schon die Einrichtung. Anhand einer aktuellen Sitemap können Suchmaschinen die einzelnen Seiten schneller indizieren, als wenn sie (verschlungenen) Pfaden folgen müssen.