Heute möchte ich mich einem Thema widmen, das mir besonders am Herzen liegt - der Navigation oder auch dem Menü.

Ich gebe zu, dass die Navigation einer Website in erster Linie benutzerfreundlich sein sollte. Das bedeutet, dass sich jeder Besucher intuitiv zurecht findet und weiß, wie und wo man zwischen den einzelnen Seiten hin- und herwechseln kann. Daher findet sich die Navigation mittlerweile in den meisten Fällen horizontal oben - wo sie ja auch jeder Besucher erwartet und findet. Und ich gebe ebenfalls zu, dass eine Navigation, die so innovativ und experimentell ist, dass auch der findigste Besucher mit ihr nichts anzufangen weiß, tunlichst vermieden werden sollte.


Aber es gibt sie auch, die Beispiele interessanter Navigationsarchitektur, die sich trotz eines abweichenden Musters jedem sofort erschließen. Solche Menüs machen eine Site interessant und raffiniert.

Im folgenden möchte ich Ihnen ein paar Seiten vorstellen, die andere Navigationsmodelle verwenden.



Da wäre zum Beispiel die elegante Website der Anwaltskanzlei Edelson. Sie erkennen gleich in der rechten oberen Ecke das so genannte Hamburger-Icon (die drei untereinander angeordneten Linien). Daneben steht zur Klarstellung das Wort "Menu". An dieser Szelle will ich nicht verschweigen, dass sich die Webdesigner seit geraumer Zeit streiten, ob das Hamburger-Icon an sich ausreicht (wie bei meine Website) oder ob es durch das Wort "Menü" oder "Navigation" ersetzt oder zumindest unterstützt werden sollte. Bei Edelson hat man saich für die sichere Variante entschieden und beideds verwendet.
Das ist aber nicht der Grund, weshalb ich diese Seite ausgewählt habe. Wenn Sie nun auf das Icon klicken, schiebt sich ein anderes Fenster über die Seite und präsentiert dem Besucher das Menü in Form von Quadraten, von denen ein jedes einen Menüpunkt als Titel beinhaltet. Außerdem - ein schöner Effekt - kann man die abgedunkelten Hintergrundbilder erkennen, die hell werden, wenn man mit dem Mauszeiger darüberfährt (so genannter Hover-Effekt). Nach demselben Prinzip wird auch auf den Unterseiten verfahren.
Diese Website ist ein gelungenes Beispiel dafür, wie man eine klar verständliche und übersichtliche Navigation abseits von der Stirnleiste konzipieren kann.


Die Webagentur "Big Drop" nenne ich hier stellvertretend, weil man auf das hier verwendete Navigationsmodell in unterschiedlichem Design öfter trifft. Dazu müssen Sie Ihr Browserfenster zunächst auf kleinere Maße einstellen, da die Navigation, um die es hier geht, eine Navigationsvariante für Mobiltelefone ist. Die Navigation wird auch hier wieder durch das Hamburger-Icon und das Wort "Menu" angezeigt. Klickt auf beides, schiebt sich eine neue Seite mit einem vertikal angeordneten Menü vor die Startseite. Auch hier kann der Nutzer nicht in die Irre geführt werden und kann sich gleich für einen Unterpunkt entscheiden.


Ein ganz anderes Konzept, das sehr innovativ ist, dessen Einsatz ich es mir persönlich aber sehr gut überlegen würde, schlägt Fabrizio Bianchi hier vor. In der unteren Hälfte sehen Sie die Frontdarstellung, die uns hier nur interessiert. Klicken Sie auf das stilisierte Hamburger-Icon oben rechts in dem Handy-Modell, halten Sie die Maustaste gedrückt und ziehen Sie die Maus etwas nach unten. Sie erkennen nun, dass sich in der horizontalen Leiste die Unterpunkte vorbeibewegen. Wenn Ihnen ein Unterpunkt gefällt, lassen Sie die Maustaste los und der Inhalt dieses Unterpunktes wird aufgerufen. Die Richtung, in der die Unterpunkte vorbeireisen, wird dadurch bestimmt, ob man mit der gedrückten Maustaste nach oben oder nach unten fährt.
Etwas ganz anderes!!


Aber warum immer nur in Balken denken? Kreise sind aus dem Blickwinkel eines Designers interessante Formen, die unter anderem auch für die Zwecke der Navigation genutzt werden können. Ein glückliches Beispiel von einem Bennett Feely finden Sie hier. Hübsch und bunt - insbesondere an diesem Beispiel kann man gut sehen, dass nicht jede ausgefallene Navigation für wirklich jede Website passt. Da muss der Designer in Absprache mit dem Kunden im Einzelfall entscheiden.


Eine ganz witzige, aber auf Sites mit nur drei Unterseiten beschränkte Version findet sich hier, vorgestellt von Hima Vincent. Hier dient das in Teilen sichtbare Hamburger-Icon zusätzlich als Design- und Navigationselement selbst.




Natürlich waren das nur einige Beispiele für ausgefallene und formschöne Navigationen fernab der üblichen Leiste. Vielleicht hat Ihnen das eine oder andere gefallen. Vielleicht sind Sie auch so inspiriert, dass Sie für Ihre Website auch gerne eine raffinierte Navigation hätten. Dann rufen Sie mich gerne unverbindlich an oder schreiben Sie mir!