Ein paar Wörter oder Textbrocken zu verlinken, vermag auch der unerfahrene Homepage Bastler. Doch zu einem guten Hauptmenü einer Webseite gehört wesentlich mehr.
Mit diesem Artikel möchte ich Dir einige Tipps geben, wie Du Deinen Besuchern mit einem gut durchdachten Menü die Inhalte Deiner Website schmackhafter machen kannst. Wenn Du erlaubst, bringe ich Dir ein paar Gesichtspunkte näher, die auf keinen Fall außer Acht gelassen werden sollten. Ich versuche auch das Ganze ein bisschen aufzulockern, Spaß muss schließlich sein.

Satirischer Prolog

»Warst du schon einmal in Italien im Urlaub? Ich denke, die meisten Leser waren schon mal dort. Solltest Du auch selbst dort hin und dort herum gefahren sein, dürftest Du die typisch italienische Straßenbeschilderung kennen: “Centro” nach links, Du fährst da hin – Mist, ich steh’ ja mitten auf dem Marktplatz! Also zurück. Wie, Einbahnstraße? Warum zum Geier stand da vorher nix?! Nach vorne? Nein, Durch die Marktgassen komme ich mit dem Wohnanhänger auch nicht. Aaaaargh.«

Hier bin ich schlicht und ergreifend Opfer einer schlechten Navigation, eines schlechten Menüs geworden. Das frustet nicht nur im Straßenverkehr (bei 35° C in einer Blechdose eingesperrt mit Kind und Kegel auf dem Rücksitz). Nein, auch im Web lasse ich mich nicht gerne überraschen, wohin der Weg mich führt, auch wenn der Stressfaktor um Einiges geringer sein dürfte.

Da ich leider an der Verkehrsplanung in Italien nicht mitmischen darf, versuche ich nun eben das Internet mit diesem Beitrag ein wenig positiv zu beeinflussen.

Also, Ernst beiseite und gleich rein ins kalte Wasser – führe Deine Besucher nicht wie diverse südländische Stiefelbewohner sondern mach Dir z.B. ein paar Gedanken um den…

Inhalt eines Hauptmenüs

Wer sich mit dem Inhalt des Hauptmenüs einer Website etwas eingehender beschäftigt, gewinnt Übersicht und strukturiert seine Inhalte. Aber wie bringe ich meinen Hypertext in eine sinnvolle Struktur und wie veranschauliche ich diese dem Besucher?

Maß halten!

Nein, Du sollst keinen Liter Bier auf dem Oktoberfest stemmen. Ich meine vielmehr, Du solltest Dir unbedingt bewusst sein, dass es der Internet Surfer grundsätzlich eilig hat. Er nimmt sich nicht die Zeit auf einer neu geöffneten Seite diverse Textabsätze zu lesen, sondern “scannt” nur das ihm vorliegende Hypertextdokument. Er liest keine Texte und auch keine langen Listen, sondern lässt nur seinen Blick über den Bildschirm schweifen wobei er nur kurze Texte und auffällige, prägnante Abbildungen wahrnimmt.

Vor diesem Hintergrund kann ich ableiten, dass ich ihm das Menü so kurz wie möglich, aber so lange wie nötig präsentieren muss. Stößt der Besucher meiner Website auf ein Menü mit 20 bis 30 Einträgen, kann ich davon ausgehen, dass er nicht jeden Punkt lesen wird den ich ihm anbiete. Das Gegenteil, ein zu kurzes Menü in dem ich die einzelnen Inhalte meiner Website zu sehr verallgemeinere ist ebenfalls kontraproduktiv. Verwende ich zum Beispiel als Menüpunkte die Bezeichnungen “Texte”, “Bilder” und “Download”, so weiß mein Besucher noch nicht, was ihn hinter diesen Punkten erwartet. Er wird wahrscheinlich davon ausgehen, das Gesuchte nicht gefunden zu haben und die nächste Seite liegt nur einen “Googlehupf” weiter. Good bye visitor.

Um aus diesen Thesen einen Schluss zu ziehen kann ich zusammenfassend behaupten, dass mein Menü nicht zu viele Einzelpunkte enthalten sollte, diese Wenigen allerdings sprechend sein müssen. Als Richtwert für die Anzahl von Menüpunkten im Hauptmenü setze ich mir minimal drei bis maximal zehn. Die Übersicht bleibt so gewahrt, wobei ich genügend Spielraum habe, die Inhalte meiner Seite in Themenbereiche zusammen zu fassen. Womit wir auch schon beim nächsten Punkt wären.

Inhalte gliedern

Um nicht zu viele Einzelmenüpunkte ins Hauptmenü aufnehmen zu müssen halte ich es für sehr ratsam, die Inhalte der Website in Themenbereiche zu gliedern.

Als Beispiel nehmen wir einmal an, ich möchte das Hauptmenü für meine Webseite erstellen. Inhaltlich dreht sich alles um mein Hobby, das Schlagzeugspielen. Eine ungeordnete Liste aller Inhalte könnte so aussehen:

• Tipps zur Stockhaltung
• Noten und Übungsmaterial
• Bilder von meinen Auftritten
• Eine Seite auf der man mich anheuern kann
• Zusammenfassung wo und für wen ich bereits alles gespielt habe
• Empfehlungen und Kritiken von Trommelstöcken, Trommelfellen und Hardware
• Ein wenig Text über mich und meinen Werdegang als Schlagzeuger
• Eine Kontaktseite mit Formular
• Meine Lieblingslinks zum Thema Schlagzeug

Würde ich nun diese Liste als 1:1 als Menü meiner Webseite übernehmen, wäre es mit acht Einzelpunkten zwar noch im Rahmen ( max. zehn Punkte ), doch lassen sich einige Punkte noch zusammenfassen. Somit kann ich die Inhalte kürzer formulieren, der Besucher muss also für denselben Informationsgehalt weniger lesen und meine Liste lässt sich auf weniger Enzeilpunkte reduzieren was wieder Platz und Lesearbeit spart.

Die geordnete Liste könnte sich so darstellen:

• Über mich
  • Ein wenig Text über mich und meinen Werdegang als Schlagzeuger
  • Zusammenfassung wo und für wen ich bereits alles gespielt habe
  • Bilder von meinen Auftritten
• Drumming Tipps
  • Tipps zur Stockhaltung
  • Noten und Übungsmaterial
  • Empfehlungen und Kritiken von Trommelstöcken, Trommelfellen und Hardware
  • Meine Lieblingslinks zum Thema Schlagzeug
• Kontakt
  • Eine Kontaktseite mit Formular

Verwende ich jetzt die Überschriften, unter denen ich meine Einzelseiten
eingeordnet habe als Menüpunkte des Hauptmenüs, habe ich noch
drei Stück und damit ein kurzes, aussagekräftiges Menü.
Der Besucher muss sich nicht erst durch monströse Textabsätze
wühlen um eine Übersicht zu erhalten. Auch belästige ich
ihn nicht mit langen Formulierungen, sondern präsentiere ich ihm Schlagworte,
die auf den folgenden Inhalt schließen lassen.

Fazit zum Inhalt des Menüs

Zusammenfassend kann ich folgende Aussagen über den Inhalt eines
Menüs machen:
Das Hauptmenü sollte.

• Die Inhalte einer Website in Themenbereiche gliedern
• Nicht zu viele Einzelpunkte enthalten (Richtwert zwischen minimal drei
  bis maximal zehn)
• Bei der thematischen Abgrenzung der Inhalte nicht zu sehr verallgemeinern
• Sprechende Themenbezeichnungen nennen, so dass sich anhand des Links
  der Inhalt dahinter erahnen lässt

Form (Layout)

Eigentlich kann ein Hauptmenü jede erdenkliche Form annehmen. Eckig,
rund, oval, konisch, – alles ist möglich. Doch sind auch alle diese
Möglichkeiten sinnvoll? Meiner Meinung nach nicht!
Seiten mit extravagantem Design und eben solchen Menüs mögen
zwar beim Besucher einen “Wow – Effekt” hervorrufen, doch gehen Extravaganzen
meist zu Lasten der Übersichtlichkeit und Benutzerfreundlichkeit.
Muss der Anwender erst mit dem Cursor den ganzen Bildschirm abgrasen, bis
sich ein verlinktes Bildchen findet, oder jagt er mit der Maus ein animiertes
DHTML Menü, kommt er sich schnell vergrault vor und verwendet die
finale Navigationsmöglichkeit des Browsers – das x in der rechten
oberen Ecke. Es ist daher von Vorteil, die Navigation so einfach und angenehm
wie möglich zu gestalten.
Ich mache mir also Gedanken, welchen Anforderungen die Form eines Hauptmenüs
gerecht werden muss.

• Die Form soll das Menü als solches kenntlich machen um dem Anwender
  unnötige Ratespielchen zu ersparen.
• Die Form des Menüs soll so einfach wie möglich gehalten werden
  um eine einfache Navigation zu gewährleisten.
• Die Anordnung der Menüpunkte soll dem Inhalt der Site eine Struktur
  geben.
• Die Form soll flexibel sein. Kommen neue Menüpunkte hinzu, oder
  fallen welche weg, sollte das Menü vergrößert oder verkleinert
  werden können.

Horizontale und vertikale Listen

Der Trend im Internet geht eindeutig in Richtung eindimensionaler horizontaler
oder vertikaler Listen. Diese beiden Menüformen erfüllen
meist die oben genannten Kriterien und erfreuen sich sicher deshalb so
großer Beliebtheit. Auch sind diese Varianten recht platzeffizient,
da sie kaum ungenutzten Raum einnehmen. Ein weiterer Vorteil der beiden “Navi
- Brüder” ist ihr Struktur gebender Effekt. Durch die horizontale
oder vertikale Anordnung der Menüpunkte vermitteln diese Menüs
eine thematische Einteilung des Inhalts. Somit fällt es dem Betrachter
leichter, den für ihn interessanten Inhalt zu finden. Allerdings sollte
man sich einer Eigenschaft dieser Menüs bewusst sein: Horizontale
Listen vermitteln mehr einen gleichberechtigten Eindruck der Einzelpunkte.
D.h. jeder Menüpunkt scheint dem Anwender gleich wichtig zu sein.
Im Gegensatz dazu gewichtet ein vertikales Menü seine Einträge.
Vom mitteleuropäischen Leser kann erwartet werden, dass der oberste
Eintrag als wichtigster verstanden wird, der letzte als unwichtigster.
Für welche Variante dieser beiden Menütypen sich der Designer
entscheidet, bleibt ihm letztlich selbst überlassen. Je nach Anforderung
und Ziel sollte er abwägen, für welche Art er sich entscheiden
möchte. Nur ein Tipp meinerseits: Die horizontale Variante eignet
sich sehr gut für relativ statische Menüs mit wenigen Einträgen.
Das vertikale Geschwisterchen empfiehlt sich eher bei längeren Listen.
Auch besteht die Möglichkeit die beiden Typen miteinander zu verheiraten,
wobei eine Variante das Hauptmenü bildet, die andere ein Submenü.
Diverse Lösungen in dieser Form sind in JavaScript und/oder Flash
implementiert. Doch sei hier Vorsicht geboten: Nicht jeder Browser unterstützt
JavaScript oder Flash. Es besteht in diesem Fall immer die Möglichkeit,
dass der Besucher ohne Navigationsmöglichkeit da steht, sofern er
nicht den entsprechenden Browser mit den geforderten Plugins oder Scripting
Hosts verwendet.

Menü Bäume

Eine besondere Art der bereits behandelten Listen sind die so genannten
Menübäume. Die meisten kennen diese Variante Datei Explorern
wie dem Windows Explorer und seinen Kollegen. Zwar ist diese Variante extrem
flexibel, was das Einfügen oder Ändern von Hierarchien angeht,
doch weist dieses Modell einen entscheidenden Nachteil auf: Je Tiefer die
Hierarchie, desto mehr Breite beansprucht dieses Menü. Einerseits
ist es denkbar, diesen Misstand durch breiten fixierte Frames und Scrolleisten
zu umschiffen, doch wird der Anwender nicht viel Freude haben, mit dem
Cursor dauernd zwischen Menüpunkten und Scrollbar zu pendeln.
Eine andere Überlegung geht in Richtung auf- und zusammenklappbarer
Bäume zu gehen. Mit Java Applets, Java Script, Flash und dergleichen
lassen sich solche Menüs realisieren. Dabei wirken sich aber zwei
Faktoren sehr negativ auf den Anwender aus. Erstens Erhöhen speziell
Applets und Flash Elemente die Ladezeit einer Seite und zweitens ist nicht
gewährleistet, dass das Script oder Plugin in jedem Browser korrekt
arbeitet und angezeigt werden kann.
Ich sehe bei allen meinen Seiten von Menübäumen ab. Grund hierfür
sind die bereits genannten Nachteile, ein Weiterer ist, dass ich immer
bestrebt bin eine möglichst flache Struktur meiner Inhalte zu entwerfen.
Dies erhöht die Übersichtlichkeit und kommt dem Anwender Direkt
zu Gute.

Weitere Formen

Wie bereits erwähnt, sind auch andere Menüformen ein diskutabler
Punkt. Doch beschränkt sich die Anwendung von runden, ovalen, konischen
oder andersförmigen Menüs auf Style – Sites, da sie nur mit großem
Aufwand erweiterbar sind und der Benutzer sich erst in die Handhabung eingewöhnen
muss. Nachteil solcher Menüs ist, dass der Anwender keinen vertrauten
Mustern folgen kann. Hauptkriterium für den Einsatz solcher Menüs
ist relativ statischer Inhalt der Site, so dass am Menü selten Änderungen
nötig sind. Davon abgesehen ist dem Designer nichts vorgeschrieben.
Es erübrigt sich meiner Meinung nach, hier diverse Tipps für
ausgefallene Menüs zu geben, denn alles was ich nun aufzählen
könnte wäre damit schon von mir “erfunden” und wäre nicht
mehr individuell. Ich möchte Dir nur eines mit auf den Weg geben,
falls Du Dich für ein stilistisches Menü entscheidest: Denk an
den Benutzer, der es anwenden muss und erschwere ihm nicht das ohnehin
nicht einfache Leben.

Position

Entscheidend für ein Hauptmenü ist dessen Position. In der Regel
halte ich mich an die üblichen Standards im Web, wonach ein Menü entweder
ganz oben, rechts oder links einer Seite platziert werden soll. Der Vorteil
liegt auf der Hand: Befindet sich das im oberen Teil der Seite, so ist
es beim Öffnen der Seite immer sichtbar. Ferner ist der Surfer gewohnt,
ein Menü an den besagten Stellen zu suchen und diese Erwartungshaltung
pflege ich zu erfüllen.
Gegen die Positionierung am Seitenende spricht, dass ich dem Anwender
auferlege, bei jeder Seite bis nach unten zu scrollen, bis er wieder eine
Navigationsmöglichkeit hat. Ich kann mir auch selbst ins Knie bohren,
wenn Du verstehst, was ich meine.
Das Menü in der vertikalen Mitte zu platzieren ist ebenfalls extrem
ungünstig. Dieser Bereich ist eigentlich für den Inhalt einer
Seite reserviert, außerdem muss der Besucher immer drum herum lesen,
sofern sich der Text um das Menü begibt.
Bleiben wir lieber bei den bewährten Möglichkeiten, auf die
ich im Folgenden näher eingehe.
Wichtig ist auf jeden Fall, das Menü auf allen Seiten an derselben
Stelle erscheinen zu lassen. Der Besucher zeigt leider wenig Verständnis,
auf jeder neuen Seite das Menü suchen zu müssen.

Menü Links

Eine recht beliebte Variante ist das Menü am Linken Seitenrand zu
platzieren. Tatsächlich ist ein Menü dort sehr gut angebracht,
da die Leserichtung beim gemeinen Mitteleuropäer von links nach rechts
zeigt. Er fokussiert also zunächst den linken Teil der Seite wo das
Menü aufwartet. Dass sich das Menü links vom eigentlichen Text
befindet macht dieses auch sehr flexibel und damit in der Höhe erweiterbar.
Neue Menüpunkte können einfach angefügt werden, ohne dass
sich dies gravierend aufs Gesamtdesign auswirkt.
Doch stieß ich bei meinen Recherchen im Netz auch auf negative Aspekte
gegenüber dieser Menüposition. Einige Webdesigner behaupten,
dass Menüs links vom Text den Lesefluss negativ beeinflussen. as Auge
richte nach einer zu Ende gelesenen Zeile seinen Fokus wieder nach links
um die nächste Zeile zu erfassen. Befindet sich nun dort aber erst
das Menü und dann der Text, müsse es zunächst das Menü überspringen
um dann die nächste Zeile zu suchen.
Zwar lässt sich für mich diese Überlegung nachvollziehen,
doch bin ich der Meinung, dass durch entsprechende Farbgebung und das Abreiten
mit visuellen Ebenen dieser Störfaktor auf ein Minimum zu reduzieren.
Was ich noch zu bedenken geben möchte gilt für alle Menüs
in Form von vertikalen Listen: Durch die Folge der Menüpunkte, von
oben nach unten, wird dem Betrachter eine Bewertung suggeriert. Je weiter
oben ein Punkt steht, desto wichtiger erscheint er. Umgekehrt, gilt diese
Regel natürlich auch umgekehrt. Teils kann dieser Effekt gewollt und
daher sinnvoll sein, doch oft passiert eine solche Bewertung unbewusst.
Deshalb noch einmal der Hinweis.

Menü Oben

Auch eine sehr verbreitete Möglichkeit ist die horizontale Anbringung
des Menüs im oberen Bereich der Seite. Es ist nicht zwingend erforderlich,
den absolut obersten Bereich mit dem Menü zu tapezieren, doch sollte
es sich unbedingt noch im oberen Drittel des Fensters befinden.
Wie jede Liste, sollte auch die horizontale ihre Einzelpunkte als solche
kennzeichnen. Bei den vertikalen Kollegen geschieht dies einfach durch
einen Zeilenumbruch nach jedem Punkt und/oder einem kleinen Symbol vor
jedem neuen Punkt. Im horizontalen Fall müssen wir aber von Zeilenumbrüchen
absehen und eine Alternative finden wie wir unsere Einzelpunkte visuell
separieren. Es bieten sich mehrere Möglichkeiten an:

• Trennen durch kleine Symbole vor jedem Menüpunkt
• Trennen durch Farbgebung der Links
• Trennen durch größere Abstände zwischen den Einzelpunkten
• Verwenden von grafischen Buttons

Sicher gibt es noch mehr dieser Möglichkeiten, aber Du bist hier
ja schließlich der Webdesigner, also lass Dir was einfallen

Menü Rechts

Schon eher selten findet sich das Hauptmenü einer Website am rechten
Rand. Einige Web Designer beschwören diese Position aus den genannten
Gründen (unter “Menü Links”), andere wiederum behaupten, diese
Position sei unergonomisch. Unergonomisch daher, weil ein Ausflug des Augenmerks
an den rechten Bildschirmrand meist erst unternommen wird, nachdem bereits
ein Text von links nach rechts gelesen wurde. Aber eben diese Tatsache
kann sich der Designer zum Vorteil machen. Meist möchte er doch, dass
der Text einer Seite im Vordergrund steht, nicht das Menü.

Exoten mit variabler Position

Mittels Java Script lassen sich auch noch kleine Kunststücke vollbringen.
So gibt es Menüs, die sich beim Scrollen der Seite mit verschieben,
d.h. nach unten, oder nach oben rücken. Ich selbst halte allerdings
nicht viel von diesen DHTML Geschichten. Erstens ist es sehr aufwändig
und schwierig ein solches Menü in jedem Browser lauffähig zu
coden, zweitens gibt es mehr Surfer mit deaktiviertem Java Script, als
sich die meisten Web Designer träumen lassen. Solltest Du ein solches
Menü dennoch haben wollen, empfiehlt sich auf jeden Fall, dass Du
eine ohne Java Script funktionierende Alternative anbietest.

Fazit zur Positionierung des Menüs

Ob und wie nun ein Menü angebracht wird, liegt im Ermessen und Zweck
des Autors, also an Dir. Ich denke, wenn Du ein paar der genannten Punkte
beherzigst, wirst Du auf keinen Fall absoluten Schiffbruch mit Deinem Menü erleiden
müssen. Schließlich kennst Du jetzt einige Hintergründe,
die Deine Arbeit positiv beeinflussen werden.

Fazit

Menüs sind nicht zuletzt die eigene Geschmackssache des Designers.
Trotzdem solltest Du Dich im Groben an einige Üblichkeiten halten
um dem Anwender die Inhalte Deiner Website zugänglich zu machen. Ich
hoffe Dir mit meinen Ausführungen ein wenig Hilfe geleistet zu haben.
Thomas (im Dezember 2003)