Tag: navigation

Weitere Navigationsmöglichkeiten

Neben den eben diskutierten Navigationsformen wird dem Nutzer eine zusätzliche Orientierungshilfe angeboten: eine Pfadanzeige im oberen Bereich des Contents.

Pfadanzeige im Contentbereich
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

Für die horizontal ausgerichtete Metanavigation mit vier Elementen sind zwei Positionen im Layout vorgesehen. Einerseits befinden sich diese Basisfunktionen für den Betrachter schnell erfassbar im Seitenkopf und in der Wiederholung im Seitenfuß.

Metanavigation im Seitenkopf
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ß
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

Am linken Rand neben dem Platzhalter für die Bildwelt erscheint die Hauptnavigation, dar-gestellt in der nächsten Abbildung.

Hauptnavigation im Ausgangszustand
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
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.

Navigation/Interaktionskonzept

Die Struktur der Navigation wurde im vorherigen Kapitel während der Entwicklung der In-formationsarchitektur definiert und mit einer Sitemap abgebildet. Die Festlegung der genauen Position dieses wichtigsten Interaktionselements im Gesamtlayout ist unter Berücksichtigung der getroffenen Entscheidungen zum Aufbau ebenfalls vorgenommen worden. In diesem Teil erfolgt nun die praktische Umsetzung der aufgestellten Kriterien und die Entwicklung des benutzerfreundlichen, grafischen Navigationskonzeptes.

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.

Seitenstrukturierung/Aufbau der Seite

Werden Überlegungen zur konzeptionellen Strukturierung und dem Aufbau der Seiteninhalte angestellt, empfiehlt es sich, folgende Aspekte zu beachten, die den grundlegenden Prinzipien der visuellen Kommunikation nach Aaron Marcus entsprechen:

  • Der Bildschirminhalt soll bei seiner Gestaltung als Einheit betrachtet werden und die dargestellten Elemente sind zu komponieren, so dass die Effektivität von minimalen Hilfsmitteln maximiert werden kann (Ökonomieprinzip).
  • Die strikte Einhaltung von Konsistenz, Klarheit und Einfachheit, um eine harmonische Ganzheit des Produkts zu vermitteln, ist von enormer Bedeutung (Organisationsprinzip).
  • Zielgruppenorientiert ist zu entscheiden, welche Aufnahmekapazität des Nutzers zu erwarten ist und demzufolge wie strukturiert oder verspielt die Bildschirmkomposition ausfallen darf (Kommunikationsprinzip).

Auf die Berücksichtigung von Gestaltgesetzen sollte ebenfalls geachtet werden. Bei diesen Regeln handelt es sich um gestalttheoretisch begründete Gesetzmäßigkeiten, die der menschlichen Wahrnehmung unterstützend entgegenkommen. Diese Gesetze werden universell gültig verstanden. Die Gestaltpsychologie nimmt sich der Fragestellung an, wie die wahrgenommenen Objekte beschaffen und warum sie in dieser Art beschaffen sind. Grundlage dieser Erklärungsbemühungen sind die von den einzelnen Objekten ausgehende Reize sowie die Wirkung mehrerer Reizverhältnisse verschiedener Objekte im Zusammenhang. Bei der Entwicklung von visuellen Kommunikationsmitteln, wie z.B. dem Design von Benutzeroberflächen, kann die Anwendung dieser Prinzipien eine leichtere und schnellere Aufnahme der angebotenen Elemente bzw. Strukturen ermöglichen. Das Verständnis und die intuitive Greifbarkeit wird erhöht.

Des Weiteren ist für eine durchdachte Strukturierung das Zugrundelegen eines Gestaltungsrasters sinnvoll. So kann das Verschmelzen der einzelnen Elemente zu einer Gesamtheit erreicht werden. Nach der Festlegung der benötigten Elemente kann die Anordnung selbiger im Raster erfolgen.

Für die Internetpräsenz ist für folgende Teilbereiche ausreichend Raum einzuplanen:

  • Signet des Unternehmens
  • Slogan des Unternehmens
  • Navigation (Erweiterbarkeit ist zu berücksichtigen)
  • Metanavigation
  • Bildwelt/Stimmungsbild
  • Inhaltsbereich
  • Pfadanzeige
  • Verweis auf Druckversion der gewählten Seite, Copyright-Hinweis

Die nachfolgende Abbildung soll schematisch das Gestaltungsraster aufzeigen und die reine Positionierung der soeben definierten Elemente verdeutlichen. Dabei soll jedoch noch nicht auf die exakten Ausprägungen der einzelnen Website-Teile wie z.B. Navigation, Inhalt oder Bildwelt eingegangen werden. Farbliche Gesichtspunkte bleiben vorerst ebenso außen vor.

Schematischer Aufbau der Seite
Schematischer Aufbau der Seite

Der Aufbau der Seite ist an webübliche, bereits eingeführte und dem Nutzer wohl bekannte Prinzipien, angelehnt. Die Grobstrukturierung der inhaltlich wichtigsten Teile ist klar gewählt und leicht verständlich in ein zweispaltiges Layout symmetrisch aufgeteilt (Navigation am linken Rand, Bildwelt und der eigentliche Inhalt rechts daneben gruppiert). Bei dieser für den Besucher von vielen Internetauftritten gewohnten Aufteilung findet er sich leicht zurecht und kann sich schnell orientieren. Für eine Website mit einem umfangreichen und hierarchisch stark gegliederten Informationsangebot ist diese Art der Seitengestaltung sehr passend, da für Navigation und Content in vertikaler Richtung ausreichend Freiraum bleibt und sich die Elemente gegenseitig nicht im Weg stehen. Die beiden Bereiche sind frei skalierbar und demnach zukunftssicher.

Die Anwendung von Gestaltgesetzen trägt einen weiteren Teil zum intuitiven Verständnis des Auftritts und der daraus resultierenden Akzeptanz des dargebotenen Angebots bei. In diesem Fall handelt es sich um das Gesetz der Symmetrie, welches besagt, dass durch symmetrische Anordnungen starke und klare Strukturen geschaffen werden, die sich nicht auf dem Bildschirm verlieren können (im Gegensatz zu asymmetrischen Strukturierungen). Die Navigation und der Content stehen in einem starken Abhängigkeitsverhältnis. Durch die räumlich nah beieinander liegende Positionierung werden sie nach dem Gesetz der Nähe passenderweise als zusammengehörig wahrgenommen50. Die Gesamtheit der Elemente präsentiert sich auf weißem Grund, welcher wiederum von einem dunkelgrauen Hintergrund abgesetzt wird. Dadurch wird der für den Betrachter wichtige Inhaltsbereich optisch zusätzlich hervorgehoben, ohne dem Hintergrund eine zu dominante Rolle zuzuordnen. Die Hintergrundebene bleibt statisch einfarbig und unterliegt keiner Veränderung, die den Benutzer stören und ablenken könnte.

Ein Schlagschatten verleiht der Website eine räumliche Dimension und bildet einen visuellen Rahmen für die im Vordergrund stehenden Objekte der Internetpräsenz. Die abgeschlossene und einfache Struktur der Bildschirmelemente erleichtert die Konzentration auf die eigentlichen Inhalte und erfüllt somit das Gesetz der Prägnanz50. Klare Linien führen den Blick des Betrachters geordnet über die Seitenelemente und helfen zusätzlich bei der Orientierung. Die feinen Zwischenlinien wirken elegant und modern.
Des Weiteren bietet sie durch die klare Trennung und Aufteilung der Elemente in eigenständige Logikblöcke ein schnelles Verständnis der Strukturen.

Links oben, im weiß hinterlegten Kopfbereich/Header der Seite positioniert, befindet sich, durch die in westlichen Ländern herrschende Leserichtung von links nach rechts begründet , das Signet des Unternehmens nordEnergie AG. Rechts daneben steht ein Platzhalter, welcher einen Slogan des Unternehmens aufnehmen kann, um bspw. die Tätigkeitsfelder zu verdeutlichen bzw. zu unterstreichen. Am rechten Seitenkopf bietet die Metanavigation mit Basisfunktionalitäten (Verweis auf die Startseite, Kontaktmöglichkeiten etc.) eine schnell erreichbare Interaktionsmöglichkeit an. Diese Positionierung ist wiederum durch die Anlehnung an gewohnte Strukturen des World Wide Web motiviert, in denen sich das Standardelement „Metanavigation“ oftmals rechts oben im Header wiederfindet. Der Platz wird durchgängig beibehalten und variiert nicht.

Unter dem Header beginnt mit einem farblich hinterlegtem, zweigeteilten Balken der hauptsächliche inhaltliche Abschnitt der Seite, der seinen Abschluss durch die Wiederholung des gleichen Elements im Seitenfuß findet. Durch diese visuelle Gestaltungsmaßnahme wirkt der Inhalt von oben und unten her eingerahmt und optimal in Szene gesetzt. Außerdem wird nach dem Gesetz der Ähnlichkeit die Zusammengehörigkeit unterstrichen . In dem rechten Teil des oberen Balkens kann zusätzlich zur Möglichkeit im Kopfbereich ein weiterer Firmenslogan die Unternehmensphilosophie kommunizieren.

Links unterhalb dieses Elements erstreckt sich die für den Benutzer wichtigste Interaktions-möglichkeit: die Hauptnavigation. Durch die Positionierung am linken Rand der Seite erhält das Navigationsmenü ausreichend Raum in vertikaler Richtung, da keine weiteren Elemente unterhalb dieses Abschnitts platziert werden. So können die tieferen, zweiten und dritten Ebenen der Navigation problemlos, ohne andere Bereich zu tangieren, aufgefächert werden. Der zukünftigen Erweiterbarkeit wurde somit Rechenschaft getragen. Die Navigation ist beinahe grenzenlos skalierbar. Neue Menüpunkte können durch die großzügig gewählte Platzeinteilung zu einem späteren Zeitpunkt eingepflegt werden. Der Navigationsbereich selbst hebt sich farblich von seinem unterhalb zugeordneten Freiraum ab, welcher variabel bei ausgeklappter Navigation seine Größe anpasst.

Im rechts nebenstehenden Bereich ist ein Platzhalter für die Bildwelt vorgesehen, der ein zum Inhalt der jeweiligen Seite passendes Stimmungsbild aufnehmen wird. Von den Dimensionen her ist eine stark horizontale, breitbildähnliche Ausprägung gewählt worden. Dieses interessante Format bietet bei der Bilddarstellung und Komposition sehr viele Möglichkeiten, birgt aber auch Risiken, da durch diese breite Auslegung in der Vertikalen unter Umständen nur wenig Platz für eine ausreichende, erkennbare Darstellung vorhanden sein kann. Daher ist entsprechendes Bildmaterial anzufertigen oder zu organisieren, welches dieses Problem vermeidet.

Der Content beginnt in seinem oberen Bereich mit der Pfadanzeige, die der schnelleren Orientierung und Lokalisierung der aktuellen Position in der Internetpräsenz dient . Direkt anschließend darunter erstreckt sich der nach unten variable Freiraum des Inhaltsbereiches, in dem alle Informationen, Meldungen und weiteren Inhaltsträger dargestellt werden. Sinnvollerweise hat dieses Element den größten, in der Vertikalen vollkommen variablen Freiraum zugeteilt bekommen.

Vergrößert sich dieser Bereich durch viele Text- und Bildinformationen, läuft der linke hellere Part unter der Navigation proportional mit. Dadurch stellt sich der Seiteninhalt ständig als geschlossene Einheit dar und wirkt nicht unterbrochen.

Der Balken im Fußbereich beinhaltet, rechts angeordnet, einen Verweis auf die Druckversion der aktuell abgebildeten Seite. Zusätzlich ist hier ein Verweis an den Anfang der aktuellen Seite („nach oben“) einzupflegen, welcher bei besonders langem Seiteninhalt den Benutzer zurück an den Seitenanfang führt. Als abschließendes Element befindet sich hierunter die Wiederholung der Metanavigation auf weißem Grund. Ein Hinweis auf den Urheber der Seiten wird in derselben Zeile auftauchen.

Die Aufteilung ist in seiner Gesamtheit betrachtet als klassisch, traditionell und klar zu bezeichnen . Die drei Prinzipien der visuellen Kommunikation wurden konsequent eingehalten und in dem Seitenaufbau realisiert. Die Seite wirkt durch die kompakte und geschlossene Anordnung der benötigten Elemente als eine in sich schlüssige Einheit, die ohne überflüssige Hilfsmittel auskommt (Ökonomieprinzip). Das Organisationsprinzip, welches die Konsistenz der Website fordert, wurde ebenso berücksichtigt, da die klar und simpel angelegte Seitenstrukturierung für alle Seiten der Präsenz durchgehend und gleichbleibend angewandt wird. Der Betrachter wird nicht mit unterschiedlichen Darstellungen der Seite konfrontiert oder verunsichert. Die auf die Zielgruppe und die Thematik der Website abgestimmte klassisch/seriöse Aufteilung mit Verzicht auf experimentelle oder wechselnde Anordnungen wird dem Kommunikationsprinzip gerecht. Die einzelnen Bereiche sind klar erkennbar und leicht voneinander zu differenzieren.

Pfadanzeige als Menü realisiert

Die Pfadanzeige (Breadcrumb) zur leichten Orientierung in der Seitenhierarchie ist vom Prinzip her nichts anderes als ein Menü mit speziellen Eigenschaften.

# Locator-Funktion (Pfadanzeige, rootline)
temp.locator = HMENU
temp.locator {
special = rootline
special.range = 0 | -1
wrap = Sie befinden sich hier: |
1 = TMENU
1 {
NO {
allWrap = |  -  |*| |  -  |*| |
stdWrap.htmlSpecialChars = 1
}
}
}

Ein neues mit „temp.locater“ bezeichnetes HMENU-Objekt vom Spezialtyp „rootline“ bietet die Funktionalität einer anklickbaren Pfadanzeige. Die „range“-Eigenschaft des HMENU-Objekts legt fest, bei welcher Ebene der Pfad beginnen soll.
In diesem Anwendungsfall wird auf obersten Ebene bei Level 0 (Startseite) begonnen und bis zur aktuellen Seite fortgesetzt (-1). Zur besseren Verständlichkeit der Funktion dient der vorangestellte, kurze Erklärungstext (Sie befinden…). Der Pfad selbst ist wiederum ein Text-menü, welches per „allWrap“ und „Optionsplit“ die einzelnen Seitentitel durch ein Minus-zeichen und Leerzeichen optisch voneinander abtrennt.

Aufbau der Hauptnavigation

Der Aufbau der Navigation in TYPO3 ist simpel und schnell realisiert. Für das Erstellen der Hauptnavigation werden spezielle TypoScript-Objekte vom Typ HMENU und TMENU benö-tigt, die in TYPO3 für hierarchische, textbasierte Menüs verwendet werden. Grafische Navigationen oder Layermenüs wären ebenfalls durch das CMS nutzbar gewesen, sind für diese Art der Navigation jedoch überflüssig.

# Hauptnavigations-Menu 1 cObject - vom Typ HMENU
temp.menu_main = HMENU

# Erste Ebene Menu-Object, textuell
temp.menu_main.1 = TMENU
temp.menu_main.1 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level1-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1
}

# Zweite Ebene Menu-Object, textuell
temp.menu_main.2 = TMENU
temp.menu_main.2 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level2-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1

# Aktiven Zustand aktivieren und Eigenschaften setzen
ACT = 1
ACT.allWrap = <div class="mainnavi-level2-act"> | </div>
ACT.stdWrap.htmlSpecialChars = 1
}

temp.menu_main.3 = TMENU
temp.menu_main.3 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level3-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1

# Aktiven Zustand aktivieren und Eigenschaften setzen
ACT = 1
ACT.allWrap = <div class="mainnavi-level3-act"> | </div>
ACT.stdWrap.htmlSpecialChars = 1
}

Erzeugt wird ein mit dem Titel „temp.menu_main“ (frei wählbar) versehenes HMENU-Objekt, welches für „Hierarchisches Menü“ steht und das grundlegende Basisobjekt aller TYPO3-Menüs ist. Für das neue Menüobjekt müssen nun seine Zustände und Ebenen definiert werden. Dafür werden den drei Ebenen drei neue Menü-Objekte von Typ TMENU zugewiesen (Textmenüs) und der jeweilige Normal-Zustand angegeben (abgekürzt mit NO). Zusätzlich kann ein aktives Aussehen, wenn der Menüpunkt aktuell ausgewählt ist, zur erhöhten Orientierung des Besuchers definiert werden (ACT), was für die zweite und dritte Ebene realisiert wurde.

Von dem generellen Prinzip her wird den verschiedenen Zuständen lediglich ein umschlie-ßender Div-Tag zugewiesen. So erhält bspw. der Normalzustand der ersten Ebene durch „allWrap“ die Div-Klasse „mainnavi-level1-no“. Für das Pipesymbol („|“) wird also der Menücode aus dem CMS eingefügt und von den in „allWrap“ stehenden Zeichen umgeben. Das genaue Aussehen dieses Eintrages ist im Style Sheet definiert. So funktioniert die Menüerstellung in allen Fällen. Die „htmlSpecialChars”-Funktion ist für die XHTML-Kompatibilität notwendig, falls Sonderzeichen im Textmenü verwendet werden.

Mit wenigen Zeilen TypoScript ist die gesamte, problemlos erweiterbare Hauptnavigation umgesetzt worden. Das Menü ist komplett dynamisch und bildet die Baumstruktur aus TY-PO3 ab. Wird eine neue Seite hinzugefügt, wird diese Veränderung automatisch in der Frontend-Darstellung eingepflegt. Das gesamte Menü ist in dem Eintrag temp.menu_main bereits angelegt und wird an späterer Stelle der Seite hinzugefügt.

Weitere Navigationsmöglichkeiten

Kontextabhängige Möglichkeiten über den Internetauftritt zu navigieren, stellen bei der Konzeption der Bedienungsführung einen zusätzlichen Aufwand dar, können jedoch enorm zu der Benutzerfreundlichkeit einer Präsenz beitragen und werden entsprechend von dem Besucher bspw. durch häufige Seitenaufrufe honoriert. Diese Elemente befinden sich außerhalb des normalen Navgationsbaumes und haben unterstützende Funktionen, die den Umgang mit der Website vereinfachen.

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.

Metanavigation

Für die Punkte „Startseite“, „Kontakt“, „Impressum“ und „Sitemap“ ist in der Metanavigation ein Platz vorgesehen. Die Funktionalitäten stellen ein Basisgerüst an Standards dar, welche von jedem Zustand der Website erreichbar sein und von einem seriösen sowie qualitativ hochwertige Internetauftritt geboten werden sollten – selbstverständlich auch von der Präsenz der nordEnergie.

Es ergeben sich grundsätzlich bei vielen Kriterien dieselben konzeptionellen Anforderungen für Konsistenz, Sichtbarkeit, leichte Erlernbarkeit etc., die zuvor für die Hauptnavigation diskutiert wurden. Abweichend davon, ist dennoch zu beachten, dass die Metanavigation lediglich eine einzige Ebene umfasst und keine weiteren Inhalte den Punkten untergeordnet werden. Demnach ist kein weiterer Raum für die Positionierung des „Basisgerüsts“ einzuplanen, außer der durch die vier Elemente selbst beanspruchte Platz. Lediglich die oberste Ebene ist bei den Überlegungen zur Anordnung zu berücksichtigen. Oftmals ist die Metanavigation am oberen Rand des Layout zu finden und wiederholt sich in verkleinerter Größe am unteren Seitenende nochmals.

Von einer Erweiterung der Metanavigation um zusätzliche Basisfunktionalitäten ist nicht auszugehen, da das Einpflegen von neuen Tätigkeitsfeldern der nordEnergie den Bereich der Metanavigation nicht tangiert. Selbst die Sitemap wird durch das eingesetzte Content Management System TYPO3 vollkommen automatisiert bei wachsender Seitenanzahl dynamisch passend ergänzt. Ein Zutun des Redakteurs ist in diesem Anwendungsfall nicht erforderlich und erspart somit die manuelle Pflege der Übersichtskarte.

Es bietet sich aufgrund der inhaltlichen, fast statischen Beschaffenheit dieser Standardangebote an, die Navigation schlicht, simpel und eher nüchtern auf rein textlicher Basis anzulegen. Da die Punkte weitestgehend dank der intuitiven Benennung selbsterklärend sind, kann auf grafische Spielerein verzichtet werden. Kleine Piktogramme, die das Ziel des jeweiligen Punktes visuell skizzieren, könnten dennoch eingesetzt werden, um das Erscheinungsbild aufzulockern und neben dem bereitgestellten Textlink einen weiteren inhaltlichen Anhaltspunkt zu geben. Die Verwendung von visuellen Rollover-Effekten wird aus Gründen der Einheitlichkeit wie in der Hauptnavigation beibehalten.

Hauptnavigation

Die Kerninhalte des Webauftritts werden, angelehnt an im World Wide Web übliche Bedienungskonzepte, in der Hauptnavigation positioniert. So wird der Zugang zum Content schnell und einfach ermöglicht . Diese Vorgehensweise ist unlängst eingeführt und erleich-tert somit dem Erstebesucher das Verständnis der Bedienung der neu konzipierten Internetpräsenz.

Der Hauptnavigation zuzuordnen sind die Bereiche „Unternehmen“, „Leistungen“ , „Referenzen“, „Wissen“ und „Service“. Die Navigation erstreckt sich, wie im Abschnitt „Präzisierung der Inhalte“ und „Sitemap“ dargestellt, maximal bis zu drei Ebenen tief, ausgegangen von der obersten Schicht. Die Navigation ist somit weder zu flach oder oberflächlich gehal-ten, noch zu verschachtelt, zu komplex und zu unübersichtlich für den Besucher. Diese Aus-gewogenheit verbessert den intuitiven Charakter der angebotenen Nutzerführung. Die aus-sagekräftige und simpel zuzuordnende Betitelung der Rubriken unterstützt das allgemeine Verständnis der Navigationsstrukturen zusätzlich.

Die Form und Position der Hauptsteuerungselemente ist von großer Relevanz. Diese muss in einem gewissen Rahmen auffällig (aber nicht übertrieben) gewählt sein, um schnell als solche identifiziert zu werden.
In den westlichen Kulturkreisen haben sich durch die hier verbreitete Leserichtung Anordnungen am linken oder oberen Bildrand im Layout etabliert . Bestätigt wird diese Positionierung durch sehr häufige Anwendung auf Internetseiten verschiedenster Natur. Außerdem kann durch diese Platzwahl auch in den unterschiedlichsten Browser-Anwendungen mit variierenden Bildschirmauflösungen garantiert werden, dass die Navigation sich ständig im Blickfeld des Betrachters befindet. In diesem Bereich wird demzufolge auch die Navigation für den Auftritt der nordEnergie klar und deutlich sichtbar zu finden sein. Gewährleistet werden dadurch außerdem die einfache Bedienung und schnelle Erlernbarkeit des Bedienkonzepts. Die den Rubriken untergeordneten Menüpunkte werden kaskadierend dargestellt. Durch das Selektieren einer Rubrik erscheinen anschließend die zugehörigen Unterpunkte der zweiten Ebene, welche zur besseren Veranschaulichung der Zusammengehörigkeit, bspw. eingerückt, gesetzt sind. Sollten in der dritten Ebene weitere Inhalte vorhanden sein, müssen diese Seiten in ähnlicher Form dazugruppiert werden.

Die Zukunftsorientierung greift in besonderem Maße an diesem Punkt der Raum- und Platzverhältnisse, da für später einzupflegende Bereiche in der Navigation, natürlich ausreichend Freiraum zu berücksichtigen ist. Der Skalierbarkeit ist unbedingt Rechenschaft zu tragen, um bei dem erwarteten Zuwachs an Geschäftsfeldern ein komplettes Redesign der Website zu vermeiden. Nur so kann die Internetpräsenz problemlos und übersichtlich um Kerninhalte ergänzt werden.

Um eine Konsistenz der Navigation zu erreichen, wird sich diese sinnvollerweise immer an derselben Stelle auf jeder einzelnen Internetseite der Präsenz befinden . Der Benutzer vermutet diese webübliche „Tatsache“ und soll durch andersartige, vom Standard abweichende Anordnungen oder Sprünge innerhalb der Navigation, nicht verunsichert werden. Eine einfache farbliche Abhebung der Bedienungselemente hilft dem Anwender, diese schnell und intuitiv von den Inhalten zu unterscheiden und als Steuerungsmöglichkeit auszumachen.

Zu der besseren Orientierung wird das bereits angesprochene Farbschema ebenfalls beitra-gen. Simple, aber sehr effektive Mouse-Over-Effekte, die bei dem Überfahren der betreffenden Navigationsfläche eine Farbveränderung hervorrufen, können den interaktiven Charakter verstärken und die Navigationsmöglichkeit verdeutlichen. Diese Möglichkeit sollte bei der grafischen Ausarbeitung eingehend geprüft werden.

Ist eine Rubrik der Hauptnavigation ausgewählt, kann dieser Zustand durch eine Markierung hervorgehoben werden, um den aktuellen Standort des Users anzuzeigen. Der dauerhaften, klaren Orientierung des Nutzers wird somit ein weiteres Stück näher gekommen. Die Unterstreichung eines textuellen Hyperlinks im Internet hat sich standardmäßig durchgesetzt und sollte in jedem Falle entweder als Standardzustand oder „Rollover“ mit in Erwägung gezogen wäre. Sollte aus design- oder typografiespezifischen Gründen auf diese Art der Verdeutlichung innerhalb der Navigation verzichtet werden, ist über eine anderweitige Markierung zur Hervorhebung des Verknüpfungscharakters nachzudenken. Vorstellbar hierbei ist z.B. eine Voranstellung eines Pfeilsymbols oder ähnliches, um den Link vom Übrigen abzuheben. Buttonähnliche Schaltflächen, die in rechteckiger Form den Verknüpfungstext in die Mitte stellen, sind aus vielfältigen Applikationsbereichen, die weit über das Internet hinausreichen (z.B. Software wie ein Betriebssystem), dem Benutzer bekannt und von ihm angenommen, so dass sich diese Form der Darstellung ebenfalls anbieten könnte.

Diese soeben aufgestellten Anforderungen und Kriterien an die bedeutsame Haupt-navigation müssen im später nachfolgenden Design- und Layoutkonzept konsequent und logisch in die Praxis überführt werden.

Navigation

Wie für jedes multimediale Produkt muss ebenso einer Internetpräsenz eine einfach zu bedienende, intuitiv erlernbare Navigation zugrunde liegen. Denn für den Erfolg oder Misserfolg der Website kann, neben dem optischen Erscheinungsbild (Screen-Design), eine durchdachte, anwenderfreundliche Nutzerführung, die in einer sinnvoll konzipierten Navigationsstruktur begründet ist, entscheidend sein. Des Weiteren sind für die Akzeptanz eines Webauftritts die Emotionen und Eindrücke des Anwenders bei dem Besuch der Seiten und der Bewegung über diese ausschlaggebend. Durch eine gut strukturierte Navigation können die Empfindungen maßgeblich zum Positiven beeinflusst 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.