Web Design Trend: Responsive Web Design und die versteckte Navigation

Schon lange gilt es als Konvention, das Navigationsmenü prominent im oberen Bereich der Seite zu positionieren. Ausgelöst durch neue Webdesign Trends wie responsive Design, nehmen jetzt jedoch immer mehr Designer Abschied von dieser Tradition. Die Interaktion mit mobilen Geräten beansprucht nun Einfluss auf die Grundfesten des Desktop Designs von Webseiten: mit gesetzten Regeln und Grenzen wird bewusst gebrochen. Warum sollte man auch ein platzraubendes Navigationsmenü nutzen, wenn man es anstatt dessen mit einem einzelnen Symbol repräsentieren kann, das die Nutzer ja sowieso schon kennen? Ganze Menüs verschwinden – übrig bleibt nur ein Icon, welches Zugriff auf das gesamte Menü bietet.

Wie kam es überhaupt dazu?

In den letzten Jahren wurde es immer wichtiger, Webseiten für die Nutzung mit mobilen Geräten zu optimieren. Mobile Displays bieten weniger Platz und erfordern touchoptimierte Interaktionsmechanismen. Häufig ist es kaum noch möglich, das gesamte Navigationsmenü horizontal anzuzeigen. Auch große Megamenüs sind für die Nutzung mit kleineren Touchscreens eher frustrierend – schwer zu lesen und mit dem Finger kaum zu treffen.

Man ging also dazu über, die Hauptnavigation für mobile Geräte mit kleinen Displays so weit zu minimieren, dass nur ein Icon übrig blieb, mit dem auf die Navigation zugegriffen werden kann – responsive Design sei Dank!

(Für alle, die mehr über Mobile Web Navigation wissen wollen, gibt es übrigens auch noch die kostenlose Studie „Mobile Web Navigation – Navigieren und orientieren auf dem Smartphone“ im Downloadbereich auf eresult.de.)

Und jetzt – Responsive Web Design

Neuester Trend ist es nun, das Navigationsmenü auch für Desktopnutzer „zu verstecken“ – entweder Off-Canvas oder in einem Drop-Down-Menü. Das heißt, das Navigationsmenü ist zu Anfang nicht sichtbar, die Kategorien werden erst angezeigt, nachdem der Nutzer aktiv einen Button oder ein Drop-Down angeklickt.

So setzt beispielweise der Online-Vermittlungsdienst UBER auf eine voll-responsive Seite und nutzt für Mobil und Desktop das gleiche Navigationsprinzip: ein Klick auf das „Burger“-Icon öffnet off-canvas das Menü. Das heißt, das Menü schiebt sich von der Seite (in diesem Fall links) in den sichtbaren Bereich. Die Webseite selbst wird abgeblendet und die Navigation tritt visuell in den Vordergrund. Alle Kategorien werden angezeigt; anders als in Online-Shops gibt es hier nicht unendlich viele Subkategorien. Ziemlich irritierend ist jedoch, dass man bei manchen Menüpunkten ohne Vorwarnung die Seite verlässt – damit ist dann auch das Menü verschwunden.


UBER 1

UBER versteckt das Menü und gibt dem Bild und Hauptfunktionen wie der Registrierung Raum. Das Wort „Menü“ neben dem Burger-Icon fordert den Nutzer zum Klicken auf.

UBER versteckt das Menü und gibt dem Bild und Hauptfunktionen wie der Registrierung Raum. Das Wort „Menü“ neben dem Burger-Icon fordert den Nutzer zum Klicken auf.

YouTube blendet je nach Auflösung das Menü über den Inhalt oder legt es dauerhaft links neben den Inhalt. Aufgerufen wird das Menü auch hier über das „Burger“-Icon. Allerdings beschränkt sich hier die Anzahl der Menüpunkte auf einige Wenige. Aus persönlicher Erfahrung wissen wir jedoch, dass YouTube-Nutzer in erster Linie über die Suche und den Content navigieren. Das Menü ist also von vornherein eher sekundär – wenn nicht sogar noch unwichtiger. Ziemlich clever also, den Inhalten mehr Raum zu geben, indem das Menü versteckt wird.


YouTube 1

YouTube setzt auf Content. Bei Bedarf kann das versteckte Menü aufgerufen werden

YouTube setzt auf Content. Bei Bedarf kann das versteckte Menü aufgerufen werden

Amazon ist bekannt dafür, neue UI-Konzepte gründlich zu testen. So sicherlich auch die Unterbringung aller Produktkategorien in einem Drop-Down Menü „Alle Kategorien“. Nutzer müssen nun aktiv mit der Maus über das Menü fahren, um die Produktkategorien sehen zu können. Dafür wurde dem Suchfeld viel Raum gegeben. Vielleicht auch unter der Annahme, dass auf Amazon in erster Linie gesucht wird?

Auch die Norman Nielsen Group hat sich mit dem Thema beschäftigt und kam zu dem Schluss, dass Amazon sich eine solche Drop-Down-Navigation „leisten kann“, da die Marke bekannt ist und die Nutzer wissen, dass man bei Amazon einfach alles bekommen kann. Außerdem bietet Amazon auf allen Seiten Navigationselemente, um Produkte zu entdecken.


Amazon 1

Die Produktpalette wird erst deutlich, nachdem der Nutzer mit der Maus über das Drop-Down fährt

Die Produktpalette wird erst deutlich, nachdem der Nutzer mit der Maus über das Drop-Down fährt

Sollten wir diesem Trend also folgen?

In den meisten Fällen wahrscheinlich eher nicht. Man sollte sich weiterhin fragen: Wer ist der Nutzer? Wie nutzt er die Seite? Was möchte er mit der Seite erreichen? Und vor allem: Mit welchem Gerät wird auf die Seite zugegriffen. Auch heute gilt noch zu beachten, dass eine Seite nicht nur für ein Gerät entwickelt werden sollte.

Genauso wie es falsch ist aus Desktopseiten einfach kleine mobile Seiten zu generieren, so funktioniert es nicht, aus mobilen Seiten einfach 1:1 Desktopseiten zu entwickeln. Auch wenn „mobile first“ gilt. Es ist wichtig sich daran zu erinnern, wie und womit diese Seiten bedient werden und was die Stärken und Schwächen des jeweiligen Gerätes sind. Ein kleiner Touchscreen ist ein völlig anderes Interface als das eines Laptops oder Desktop-PCs – sowohl bezüglich des Inhalts, welcher auf dem Bildschirm angezeigt werden kann, als auch der Art und Weise und der Präzision der Interaktion. Wie wir mittlerweile alle wissen, ist es mit einem Mauszeiger wesentlich einfacher mit kleinen Elementen zu interagieren als mit dem Finger. Unterschiedliche Interfaces bedeuten unterschiedliche Herangehensweisen beim Gestalten des Interfaces.

Vor allem aber der Inhalt ist entscheidend. Versteckte Menüs führen dazu, dass Inhalte weniger gut entdeckt werden. Gerade im eCommerce ist es jedoch wichtig, den Nutzer beim Entdecken der Produkte zu unterstützen und die Produktpalette zu zeigen. So wissen sicherlich viele, dass bonprix Mode verkauft; dass es aber außerdem auch noch den Bereich „Wohnen“ gibt, erwartet sicherlich nicht jeder Besucher. Versteckt in einem Off-Canvas oder Drop-Down-Menü würde dieses Angebot sicherlich untergehen und müsste durch Zufall entdeckt werden.

Man sollte sich also genau überlegen, wie wichtig die Inhalte der Navigation für die jeweilige Seite sind und wie und mit welchen Methoden der Nutzer mit der Seite interagiert und Inhalte entdeckt. Sicherlich gibt es einige Anwendungsfälle, bei denen eine versteckte Navigation sinnvoll ist – vor allem, wenn die Nutzer eher mobil-affin und versteckte Menüs gewohnt sind. In allen anderen Fällen ist es meist jedoch besser direkt die Oberkategorien anzuzeigen, um den Nutzern so zu erklären, worum es auf der Seite geht bzw. was es zu finden oder zu kaufen gibt.

Zum Projekt „Design im Wandel“

eResult verfolgt und dokumentiert bereits seit mehreren Jahren die Entwicklung des Webdesigns von 50 verschiedenen Branchen. Die dokumentierten Screenshots werden regelmäßig ausgewertet und Erkenntnisse hier im Usabilityblog vorgestellt.

Portraitfoto: Jumana Al Issawi

Jumana Al Issawi

Senior Consultant

Open Reply Germany

Bisher veröffentlichte Beiträge: 9

4 Kommentare

  • Hallo Jumana,

    ich denke auch, dass es nicht immer Sinn macht, auf großen Displays die Navigation komplett zu verstecken. Wenn genug Platz da ist, sollte man dem User schon alle Optionen anbieten. Auf kleineren, mobilen Displays macht es natürlich schon Sinn, das Hamburger-Icon zu verwenden. Interessant finde ich die vielen Usability-Studien, die dazu schon gemacht wurden (z.B. http://conversionxl.com/testing-hamburger-icon-revenue/). Scheinbar erkennen die User den Menübutton schneller, wenn zusätzlich zum Hamburger-Icon noch das Wort „Menü“ verwendet wird. Aber ich denke, dass sich das in Zukunft auch wieder relativieren wird…

  • Hi Steven,
    ja, genau. In Usability-Tests machen wir auch immer wieder die Erfahrung, dass vor allem mobil-affinere User (oft die eher Jüngeren) das Burger-Icon kennen und kein Problem mit der Nutzung und dem Verständnis haben. Gerade deshalb ist es momentan so wichtig zu wissen, wer die Zielgruppe ist, um entscheiden zu können, ob neue Webtrends einfach umgesetzt werden können und sollten, oder nicht. Die im Beitrag angesprochene Studie kommt übrigens auch zu dem Schluss, dass es Sinn macht das Icon mit dem Wort „Menü“ zu ergänzen.

  • Davis Brown

    Good, Very informative. I think these web design tools are the biggest trends. Now web designers like me love to use these web design tools. I use tempatetoaster. I don’t know if you are aware of this web design tool. Currently I am using this web design tool for creating themes and templates.

  • Peter Köller

    Aus persönlicher Erfahrung wissen wir jedoch, dass YouTube-Nutzer in erster Linie über die Suche und den Content navigieren.

    Gibt es zu diese Aussage unabhängige Untersuchungen? Ich für meinen Teil nutze so gut wie ausschliesslich das Menü links und die Suche eher selten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.