Pfadanzeige im Contentbereich

Als weitere Möglichkeit zur Orientierung neben der ständigen Zustandsanzeige in der Hauptnavigation kann der Betrachter diese Abbildung der hierarchischen Position, ange-fangen von der obersten Ebene des Seitenbaums, nutzen. Es ist keine bloße Anzeige, sondern die einzelnen Seitentitel sind interaktiv verwendbar. Ein Klick auf die entsprechende Bezeichnung führt zu der damit verknüpften Seite. Die Funktionalität wird durch einen einleitenden Kurztext beschrieben. Gesetzt wird der Text in elf Pixel und in dunkelgrau, die Hyperlinks erhalten die für den Auftritt festgelegte Farbe der Interaktivität Dunkelblau und werden bei dem Überfahren mit dem Mauszeiger unterstrichen dargestellt. Unter der Pfadanzeige trennt eine horizontale feine graue Linie das Element von dem darzustellenden Inhalt ab.

Metanavigation im Seitenkopf

Rechts oben im Header jeder Seite sind die vier Funktionen der Metanavigation gut erreich-bar angebracht. Bei der Darstellung wurde eine sehr reduzierte Visualisierung gewählt, die sich auf das Wesentliche beschränkt und die Funktion an sich in den Vordergrund stellt. In einer Zeile erscheinen die Punkte nebeneinander mit luftigen Raum dazwischen von einer vertikalen Linie, dem Pipe-Symbol („|“), getrennt. Der Schriftgrad beträgt elf Pixel, farblich wird in dunkelgrau gearbeitet. Dadurch ist der Kontrast zwischen dem weiß leuchtendem Hintergrund und der Schriftfarbe angenehm abgemildert. Bei dem Überfahren des Bereiches mit dem Mauszeiger wechselt die Schriftfarbe zu Dunkelblau.

Metanavigation im Seitenfuß

Die Wiederholung im Footer der Seite ist von der Darstellung her prinzipiell gleich. Der einzi-ge Unterschied besteht in den Abstände zwischen den Punkten: diese sind geringer und dadurch rückt der Bereich enger zusammen.

Hauptnavigation im Ausgangszustand

Insgesamt fünf, logisch untereinander angeordnete Navigationselemente befinden sich in der ersten Ebene der Hauptnavigation, die mit kurzen, prägnanten Titeln versehen sind. Die Höhe beträgt 25 Pixel und die Breite ist mit 170 Pixel auch auf längere Bezeichnungen ausgelegt. Getrennt werden sie jeweils von einer feinen horizontalen Linie (ein Pixel hoch) am unteren Rand des Objekts. Die in der Fläche um zehn Pixel nach rechts versetzte Beschriftung wird in zwölf Pixel gesetzt und von der horizontalen Ausrichtung her zentriert. Oben und unten befinden sich jeweils acht Pixel Abstand. Eine Unterstreichung des Verweistextes zur Verdeutlichung des Hyperlinkcharakters wird nicht vorgenommen, da das Element bereits in seinem jetzigen Zustand als Mittel zur Interaktion wahrgenommen wird und eine weitere Hervorhebung überflüssig macht.

Im Ausgangszustand der Navigation (kein Punkt angewählt), schließt das Interaktionselement mit der Bildwelt bündig ab. Die Farbe Dunkelblau ist in dem kompletten Konzept in seiner Funktionalität mit Interaktion belegt. Dunkelblaue Objekte werden immer wiederkehrend und konsistent eine Aktion auslösen.

Der weitere Aufbau des Hauptnavigation wird in dem folgenden Screen deutlich.

Hauptnavigation bis zur dritten Ebene

Das Auswählen eines Bereiches aus der ersten Navigationsebene bezweckt die Auflistung der ihm zugeordneten Seiten unterhalb des aktuellen Punktes. Die vorherig unmittelbar darunter platzierten übrigen Hauptpunkte verschieben sich passend nach unten. Das Listing erscheint um zehn Pixel in der zweiten Ebene und nochmals weitere zehn Pixel in der Dritten eingerückt auf mittelblauen Grund und ist der Oberrubrik optisch einfach zuzuordnen. Der Schriftgrad liegt bei elf Pixel und bei aktiver Auswahl wird der fette Schriftschnitt benutzt, um die momentan gewählte Seite in der Navigation anzuzeigen. Dadurch ist eine bessere Orientierung gegeben und der Besucher ist sich über seine aktuelle Position innerhalb der Seitenhierarchie ständig bewusst. Die Abstände zwischen den einzelnen Navigationspunkten sind ausreichend dimensioniert, so dass das Erfassen der verschiedenen Teilbereiche problemlos möglich ist. Anklickbar ist nicht nur der textuelle Bereich, sondern eine mit den Abmessungen 170 Pixel in der Breite und 25 Pixel in der Höhe deutlich größere Zone. Eine gewisse Toleranz bei dem Auswählen wurde also einkalkuliert, was das System robuster macht und keine unnötig hohe Präzision fordert. Außerdem ist klar strukturiert, welche Wahlmöglichkeiten der User von dem Navigationssystem angeboten bekommt.

Diese Art des kaskadierenden Aufbaus wird für die gesamte Navigation konsistent eingehalten. Sie ist leicht verständlich und bietet dem Website-Besucher eine schnelle Orientierung. Die visuelle Umsetzung der Struktur wirkt aufgeräumt, klar und benutzerfreundlich. Es wird auf webübliche Prinzipien zurückgegriffen, die dem User aus seiner Interneterfahrung bereits vertraut sind und in einer hohen Akzeptanz resultieren.

Drei grundlegende Anforderungen müssen in dem Interaktionskonzept beachtet werden:

• Auf jede Aktion des Nutzers muss eine Reaktion des Systems folgen
• Die Reaktion des Systems erfordert Konsistenz, so dass sämtlich anklickbare Elemente auf immer dieselbe Weise reagieren
• Die Darstellung von interaktiven und statischen Elementen muss wiederkehrend und konsistent sein und darf nicht vermischt werden

Außerdem müssen die drei wesentlichen Fragen der Orientierung optisch unterstützt werden: Wo bin ich? Wo bin ich gewesen? Wohin kann ich gehen?

Bei der Gestaltung von Dialog- bzw. Navigationselementen sollten nach ISO 9241-10 folgende weitere Merkmale beachtet werden. Der Dialog hat der Aufgabe angemessen zu sein, d.h. er soll den Benutzer bei der Erledigung der Aufgabe optimal unterstützen (Aufgabenangemessenheit). Die Schritte und Ebenen des Navigationselements sollten klar und verständlich sein (Selbstbeschreibungsfähigkeit) und der Nutzer soll die Ablaufgeschwindigkeit des Systems selbst bestimmen können – nicht das System (Steuerbarkeit). Konsistenz der Navigation steht an oberster Stelle (Erwartungskonformität) und eine gewisse Fehlertoleranz und Robustheit ist einzuplanen, so dass das System bei Fehleingaben keine unkontrollierten Reaktionen zeigt.

Wie sich leicht erkennen lässt, erfordert der Entwurf der visuellen Navigation also eine durchdachte, strukturierte und konsequente Herangehensweise, um dieses bedeutende Element benutzerfreundlich, übersichtlich und intuitiv erlernbar zu gestalten.

Für die neue nordEnergie-Internetseite ist der Einsatz einer Pfadanzeige zur optimalen Orientierung angedacht. Diese Information wird im dem Kopfbereich einer jeden Inhaltsseite mitgeführt und verdeutlicht durch die Auflistung der aktuellen hierarchischen Position, wo sich der Besucher innerhalb der Seite genau befindet (ähnlich dem Windows-Explorer, um ein greifbares Beispiel anzuführen). Somit ist außerdem leicht abzulesen, welcher Rubrik die aktuell gewählte Seite untergeordnet ist, falls der User diese Information nicht bereits über die Hauptnavigation erschließen können sollte. Da der Pfad zusätzlich anklickbar ist, also neben der Informationsfunktion ebenfalls eine Navigationsfunktion bietet, kann zwischen den Seiten über diesen Weg zusätzlich gewechselt und eine vor-herige Seite bzw. Sektion wieder aufgerufen werden.

Als optionale Möglichkeit einen Zugang zu den Inhalten bereitzustellen, ist der Einsatz einer Suchfunktion angedacht. Der Besucher kann über selbst gewählte Suchbegriffe vollkommen unabhängig von den standardmäßig angebotenen Navigationsformen die gesamte Website nach seinen Vorstellungen durchsuchen. TYPO3 bietet ein Standardmodul für die Integration einer Suche an, jedoch müssen die Leistungsfähigkeit und Anpassungsmöglichkeit vorerst getestet werden, bevor an einen produktiven Einsatz gedacht werden kann. Aus diesem Grund ist die Suchfunktion jederzeit deaktivierbar und von der Internetpräsenz auszublenden. Der nötige Platz ist einzuplanen, doch sollte das Modul den Erwartungen nicht entsprechen und abgeschaltet werden müssen, so darf der entstandene Freiraum im Seitenaufbau nicht leer und fehlkonzipiert wirken.

Weiterhin sind Hyperlinks, die im Fließtext auftauchen, farblich von der sonst üblichen Textfarbe abzuheben, um dem Besucher zu signalisieren, dass hier hinter weitere Inhalte stehen. Über die webübliche Darstellung, Links zu unterstreichen, sollte nachgedacht werden.

Wichtige Kriterien einer gute Navigation sind:

• Einfache Bedienung
• Schnelle Erlernbarkeit
• Konsistenz
• Sichtbarkeit
• Klarheit
• Orientierung

Bei den Überlegungen zum Bedienkonzept dürfen diese sechs Vorgaben keinesfalls außer Acht gelassen werden, um das gesteckte Ziel, eine benutzerfreundliche und logische Navigation zu entwerfen, zu erreichen. Kann sich der User schnell in die Strukturen, der für ihn noch unbekannten Website hineindenken, und den Aufbau gedanklich erfassen, wurde gute Entwicklungsarbeit geleistet.

Die abzubildenen Funktionalitäten wurden bereits bei der Präzisierung und verbalen Be-schreibung inhaltlich in zwei Bereiche getrennt. In der Navigation spiegelt sich diese Unterteilung einerseits in der Mainnavigation mit Hauptfunktionalitäten, andererseits in der Metanavigation mit Standardinformationen wieder. Zusätzliche Navigationsmöglichkeiten, die dem Anwender die Orientierung auf der Seite und die Steuerung der Seite selbst erleichtern, runden das Navigationskonzept schließlich ab.