Inhalt dieses Artikes

Inhaltlich dreht sich alles um die Gestaltung von Hauptmenüs für Websites. Vom Inhalt über Layout zur Position, hier findest Du sicher ein paar hilfreiche Tipps.

Kritik, Ergänzungen, Lob?

Halte Dich nicht zurück, sag mir, was du gut oder schlecht findest, oder was du besser weißt als ich. Ich bin auch bestrebt zu lernen.

Kontakt Formular

Drucken und offline Lesen

Dieser Text passt sich beim Ausdrucken automatisch einer Din A4 Seite an. Unsinnige Grafiken, Menüs und dergleichen werden ausgeblendet. Verwende einfach die Druck Funktion deines Browsers oder diesen Link
Artikel drucken

 

Menüs für Websites - Übersicht schafft Freu(n)de

Menü IconEin 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.

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.

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:

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)

No relevant image