Best Practices für das mehrstufige Menüdesign

Navigation und Auffindbarkeit sind zentrale Aspekte des User Experience Designs. Wenn Benutzer nicht dorthin gelangen, wo sie hinwollen oder finden, was sie brauchen, werden sie frustriert und entscheiden sich möglicherweise, sich woanders umzusehen. Auf Websites mit besonders komplexer Informationsarchitektur sind mehrstufige Menüs eine effektive Möglichkeit, die Navigation und Auffindbarkeit zu verbessern und dadurch effiziente Weberlebnisse zu bieten, die das Produktvertrauen fördern und die Conversions steigern.

Da Produkte und die Geräte, auf denen sie verwendet werden, sehr unterschiedlich sind, gibt es keine Einheitslösung, die das perfekte mehrstufige Menü ergibt. Es gibt jedoch Faustregeln, die Ihnen helfen, mehrstufige Menüs zu erstellen, die die Navigation und Auffindbarkeit auf jeder Bildschirmgröße verbessern.

Designtipps für Bildschirme jeder Größe

Ein gutes mehrstufiges Menü sollte Benutzer schnell ans Ziel bringen, indem Informationen auf klare, intuitive Weise präsentiert werden. Bevor wir uns mit größenspezifischen Richtlinien befassen, schauen wir uns einige Praktiken an, die für alle Menüs gelten.

Verwenden Sie nicht mehr als zwei Ebenen von Untermenüs. Mehr als zwei Ebenen von Untermenüs werden Benutzer wahrscheinlich verwirren und überfordern. Eine relativ flache Navigation verbessert die Auffindbarkeit für Benutzer und reduziert die kognitive Belastung, die erforderlich ist, um sich zu merken, wo sie sich befinden. Wenn die Seitenstruktur der Website tief ist, sollten Sie erwägen, ein lokales Navigationsmenü oben auf eng verwandten Seiten hinzuzufügen. Zum Beispiel hat Zoho, das komplexe Business-Support-Produkte entwickelt, ein produktspezifisches lokales Menü oben auf jeder Produktseite direkt unter dem Hauptmenü platziert. Während das Hauptmenü oben die Kernangebote von Zoho auflistet, bieten die lokalen Menüs Zugriff auf Seiten mit detaillierteren Informationen wie Anwendungsfällen und Preisen.

Kennzeichnen Sie Untermenüs mit Symbolen. Verwalten Sie die Erwartungen der Benutzer, indem Sie immer deutlich machen, wann Untermenüs verfügbar sind. Bekannte Auswahlmöglichkeiten umfassen ein kleines Abwärtswinkel-Symbol oder ein Dreieck-Symbol. Denken Sie auch daran, Zeigersymbole umzudrehen, wenn Untermenüs geöffnet sind.

Organisieren Sie Informationen intuitiv. Stellen Sie sicher, dass die Hierarchie der Informationen mit den mentalen Modellen der Benutzer übereinstimmt. Überlegen Sie beispielsweise auf einer E-Commerce-Website, ob ein Käufer eher erwartet, dass Artikel nach Marke oder Artikeltyp organisiert sind. Wenn ein Benutzer auf die Kategorie „Schuhe“ klickt, erwartet er dann, dass das Untermenü Optionen für Turnschuhe, Sandalen und Stiefel präsentiert? Oder werden sie erwarten, ein Untermenü zu sehen, das alle Schuhmarken auflistet, die das Geschäft führt? Ein Blick auf Ihre Nutzerforschung und Ihre Konkurrenzforschung wird dies verdeutlichen.

Stellen Sie sicher, dass Benutzer jederzeit wissen, wo sie sich befinden. Markieren Sie immer den Link im Hauptmenü, der der Seite entspricht, auf der sich der Benutzer befindet. Wenn sich die aktuelle Seite in einem Untermenü befindet, markieren Sie den Untermenü-Link und das übergeordnete Element auch im Hauptmenü. Wenn beispielsweise jemand, der eine Regierungswebsite verwendet, um seinen Führerschein zu erneuern, vom „Einwohner“-Link im Hauptmenü zum „Fahrerservice“-Link im Untermenü und dann zu einer Seite mit einem Erneuerungsformular navigieren müsste, würden beide „ Die Links „Anwohner“ und „Fahrerdienste“ bleiben hervorgehoben.

Kopieren Sie einfach. Eine Speisekarte ist nicht der Ort für clevere Wortspiele; Stellen Sie sicher, dass Link-Labels einen starken Informationsgeruch haben. Das bedeutet, Labelnamen einfach und aussagekräftig zu halten, damit Benutzer sofort wissen, was sie finden, wenn sie sich durchklicken. Je klarer der Text, desto schneller findet der Nutzer, was er braucht.

Priorisieren Sie die Lesbarkeit. Verwenden Sie eine einfache serifenlose Schriftart und sorgen Sie für einen angemessenen Abstand um Elemente herum, um Unordnung zu vermeiden. Stellen Sie sicher, dass der Hintergrund undurchsichtig genug ist, um alles auszublenden, was sich hinter dem Menü befindet. Aber ignorieren Sie nicht das allgemeine Branding der Website. Während die Lesbarkeit an erster Stelle steht, stellen Sie sicher, dass das Design des Menüs das übrige Erscheinungsbild der Website ergänzt.

Machen Sie das Klicken und Tippen zugänglich. Um das Menü für Nutzer mit eingeschränkter Feinmotorik zugänglich zu machen, befolgen Sie die Material Design-Richtlinien von Google und formatieren Sie anklickbare Elemente mit einer Größe von mindestens 48 x 48 Pixel.

Designtipps für Desktops

Auch bei einem zunehmenden Trend zu Mobilgeräten gibt es immer noch viele Gründe, warum Kunden Desktop-Websites mit vollem Funktionsumfang benötigen. Beispielsweise müssen sie möglicherweise mehr Informationen online verfügbar machen, als dies für eine mobile Website machbar ist – wie die Website einer Universität oder eines Finanzinstituts. Oder ihre Untersuchungen zeigen, dass sich ihre Benutzer einfach mehr auf Desktops verlassen.

Ein Desktop-Menü sollte einfach zu scannen sein, klare Interaktionen bieten und natürlich reaktionsschnell sein. Sie sollte auch so konsistent wie möglich mit der mobilen Website sein, um das Erlebnis für wiederkehrende Besucher intuitiv zu gestalten.

Menüs sollten beim Klicken geöffnet werden, nicht beim Bewegen. Eine der grundlegendsten Entscheidungen, die Sie treffen müssen, ist, wie Benutzer auf das Menü der Website zugreifen. Reicht es aus, den Mauszeiger einfach über das übergeordnete Element – ​​den Kategorienamen – zu bewegen, um die Anzeige des Menüs auszulösen, oder müssen Benutzer darauf klicken?

Der Hover-Ansatz ist beliebt, aber Click-to-Open ist der beste Weg, um sicherzustellen, dass das Menü auf allen Geräten zuverlässig und intuitiv funktioniert. Der Click-Ansatz ermöglicht es Websites, sowohl auf herkömmlichen Computermonitoren als auch auf Touchscreens konsistenter zu funktionieren, und vermeidet viele Frustrationen, die beim Hover-Ansatz auftreten, darunter:

• Schmale Schwebetunnel. Ein Schwebetunnel ist der Pfad, den eine Maus nehmen muss, um zu navigieren, während das Menü geöffnet bleibt. Wenn es zu schmal ist, verschwindet das Menü möglicherweise, bevor der Benutzer den gewünschten Link erreicht.
• Versehentliches Öffnen. Ein Hover-Menü kann versehentlich geöffnet werden, wenn ein Benutzer versucht, auf dem Weg zu einer anderen Stelle auf der Seite darüber zu navigieren. Das Einstellen einer kurzen Verzögerung löst dieses Problem, kann jedoch zu Frustration führen, wenn der Benutzer das Menü öffnen möchte.
• Inkonsistente UX auf Touchscreens. Hover-Menüs funktionieren nicht auf Touchscreens. Sie benötigen einen Code-Fix, um Touchscreens zu erkennen und auf Tap-to-Open umzuschalten; Da die Grenze zwischen Laptop und Tablet zunehmend verschwimmt, werden diese Problemumgehungen möglicherweise obsolet.
• Fragen dazu, was anklickbar ist. Bei Hover-Menüs wissen Benutzer nicht immer, ob der übergeordnete Link anklickbar ist oder nicht, bis sie es versuchen. Das ist das Gegenteil von intuitiv.
• Barrierefreiheit. Hover-Menüs können Probleme für Benutzer darstellen, die Screenreader verwenden oder über die Tastatur navigieren.

Wählen Sie das richtige Layout: Drop-down vs. Mega-Menü. Wenn die Desktop-Site ein herkömmliches Menülayout verwendet (eine horizontale Menüleiste oben auf der Seite), gibt es zwei Arten von Untermenüs, die Sie in Betracht ziehen können: ein standardmäßiges einspaltiges Dropdown-Menü oder ein mehrspaltiges Mega-Menü.

Erwägen Sie die Verwendung eines Dropdown-Menüs, wenn die übergeordnete Kategorie weniger als acht Links enthält. Wenn das Dropdown-Menü lang genug ist, um ein vertikales Scrollen zu erfordern, sollten Sie erwägen, die Informationen anders zu organisieren – vielleicht als Mega-Menü oder durch Verfeinern der übergeordneten Kategorien.

Ein Megamenü ist eine Art verschachteltes Menü, das normalerweise ein breites Layout verwendet, das die Breite des Browsers erweitern kann. Sie sollten diese Art von Menü verwenden, wenn die Untermenüs viele verschiedene Links enthalten, die in Spalten gruppiert werden können. Typischerweise sehen Sie solche Menüs auf großen E-Commerce-Websites.

Berücksichtigen Sie beim Entwerfen eines Mega-Menüs Folgendes:

• Fügen Sie Bilder oder Symbole hinzu, um das Scannen der Informationen zu erleichtern.
• Fügen Sie Schlagzeilen zu gruppenbezogenen Seiten hinzu.
• Fügen Sie Beschreibungen hinzu, wenn die Kategorienamen nicht selbstverständlich sind.

Mega-Menüs können auf Mobilgeräten schwer zu lesen und darin zu navigieren sein, aber manchmal macht es die Verbesserung der UX auf einem größeren Bildschirm lohnenswert, die zusätzliche Arbeit zu leisten, um die Informationen für Mobilgeräte neu zu konfigurieren.

Fügen Sie klare Hover-Zustände hinzu. Selbst bei Click-to-Open-Menüs sorgen klare Hover-Zustände für alle anklickbaren Elemente für zufriedenstellende Interaktionen und geben den Benutzern die Gewissheit, dass die Links aktiv sind. Sie können den Hintergrund des anklickbaren Bereichs etwas dunkler machen, um einen Schwebezustand anzuzeigen. Stellen Sie nur sicher, dass der Hover-Bereich mit dem anklickbaren Bereich übereinstimmt. Wenn Tests zeigen, dass Benutzer mehr Anleitung oder Kontext benötigen, sollten Sie erwägen, aussagekräftigere Bezeichnungsnamen oder einen Tooltip hinzuzufügen, solange dadurch nichts Wichtiges blockiert wird.

Klicken Sie hier, um Untermenüs zu schließen. Halten Sie die Dinge intuitiv, indem Sie Menüs schließen, wenn Benutzer woanders hinklicken oder wenn sie ein anderes Untermenü öffnen. So funktionieren Dropdown-Eingabefelder in Formularen, sodass die meisten Benutzer damit vertraut sein werden.

Aktivieren Sie die Tastaturnavigation auf dem Desktop. Nicht jeder verwendet eine Maus zum Navigieren, daher sollte das Menü es Benutzern ermöglichen, nur mit einer Tastatur zu navigieren. Das bedeutet, dass alle Links unterschiedliche fokussierte Zustände haben sollten, damit Benutzer auf einen Blick sehen können, wo sie sich befinden. Typischerweise funktioniert ein dunkler gefärbter Rahmen gut, um den fokussierten Zustand anzuzeigen.

Designtipps für mobile Bildschirme

Wenn Sie nicht bereits Mobile-First entwerfen, müssen Sie das Menü für ein Handheld-Gerät optimieren. Herkömmliche Menülayouts funktionieren selten gut auf sehr kleinen Bildschirmen – wenn Sie einfach die Desktop-Menüleiste verkleinern, kann sie niemand lesen. Diese Richtlinien helfen Ihnen bei der erfolgreichen Umstellung auf den kleinen Bildschirm.

Vereinfachen Sie das Hauptmenü. Da Smartphone-Bildschirme so klein sind, müssen viele der Informationen, die Sie in einem Desktop-Menü finden würden, zunächst ausgeblendet werden. Die Hauptmenüleiste muss sehr einfach sein, aber es ist eine gute Idee, die wichtigsten Links anzuzeigen, um die Auffindbarkeit zu verbessern. Sie können die Menüleiste am unteren oder oberen Bildschirmrand anbringen.

Fügen Sie einen Menü-Trigger hinzu. Da ein mobiles Menü ganz oder teilweise ausgeblendet sein kann, benötigen Benutzer eine Möglichkeit, es zu finden. Das Hinzufügen eines Hamburger-Symbols zur Menüleiste oder in einer leicht erreichbaren schwebenden Schaltfläche ist eine beliebte Lösung, die viele Benutzer erkennen werden. Das Hamburger-Menü ist jedoch nicht die einzige Wahl. Wenn Sie für ältere Benutzer entwerfen, ist es möglicherweise besser, beispielsweise ein Feld mit dem Wort „Menü“ zu verwenden. Wenn Sie die Funktionen der Website hervorheben möchten, können Sie sie stattdessen in einem Menü mit Registerkarten oben oder unten anzeigen.

Setzen Sie das Menü in eine Seitenleiste. Es gibt viele verschiedene Möglichkeiten, wie Sie eine mobile Speisekarte gestalten können. Sie können ein Layout in voller Breite verwenden, das in jeder Situation funktioniert; eine untere Schublade, die am besten ist, wenn nur wenige Glieder vorhanden sind; oder ein kreisförmiges Eckmenü, das eine futuristisch aussehende Option für ein kleines Menü ohne Untermenüs ist. Eine gute Option ist die Verwendung einer Seitenleiste mit einem dunklen, durchscheinenden Hintergrund, der den Seiteninhalt blockiert und so Ablenkungen beseitigt, und es Benutzern ermöglicht, sie einfach abzutippen, um sie zu schließen. Erwägen Sie auch die Verwendung einer Slide-from-links-Animation, um ein störendes Erlebnis zu vermeiden. Stellen Sie bei Menüs in der Seitenleiste und der unteren Schublade sicher, dass das Menü vertikal scrollbar ist, damit auf kleineren Bildschirmen oder im Querformat nichts abgeschnitten wird.

Ermöglichen Sie Benutzern, das Menü einfach zu schließen. Benutzer können intuitiv auf ein Menü tippen, um es zu schließen, aber erwägen Sie auch, eine X-Schaltfläche hinzuzufügen. Sie können das Hamburger-Symbol in ein X verwandeln oder eines in der oberen rechten Ecke des Menüs hinzufügen.

Verwenden Sie expandierende Abschnitte für einzelne Untermenüs. Erwägen Sie die Verwendung von Expanding-Abschnitten, wenn das Menü nur eine Untermenüebene hat. Sie können sie unterhalb des übergeordneten Elements erweitern und zur Verdeutlichung eine andere Hintergrundfarbe verwenden. Sie können Benutzern auch erlauben, mehrere Untermenüs gleichzeitig zu erweitern. Erwägen Sie die Verwendung eines Abwärtswinkels oder eines Dreieckssymbols auf der rechten Seite des übergeordneten Elements, um anzuzeigen, dass ein Untermenü verfügbar ist.

Ersetzen Sie Megamenüs und mehrere Untermenüs durch überlappende Menüs. Wenn Sie mehr als ein Untermenü erweitern oder ein Megamenü neu konfigurieren müssen, entscheiden Sie sich für einen überlappenden Ansatz: Anstatt ein Untermenü unter oder neben dem übergeordneten Menü zu erweitern, lassen Sie das Untermenü das übergeordnete Menü ersetzen. Bei diesem Ansatz müssen Sie in allen Panels mit Ausnahme der ersten Ebene einen „Zurück“-Link einfügen. Erwägen Sie für das Menü der obersten Ebene die Verwendung eines rechtwinkligen Symbols oder eines Rechtspfeils für übergeordnete Elemente.

Untermenüs vorab öffnen. Auf dem Desktop ist es hilfreich, die aktuelle Seite und ihre übergeordnete Seite hervorzuheben. Ziehen Sie bei kleinen Bildschirmen in Betracht, noch einen Schritt weiter zu gehen. Wenn ein Benutzer tippt, um das Hauptmenü zu öffnen, und die Seite, auf der er sich gerade befindet, sich in einem Untermenü befindet, sollten Sie erwägen, auch das Untermenü automatisch zu öffnen, damit der Benutzer versteht, wo er sich im Verhältnis zu den übrigen Menüelementen befindet.

Halten Sie es klar und konsistent

Navigation ist ein entscheidender Bestandteil des Kundenerlebnisses. Benutzer möchten nicht auf Schnitzeljagd gehen oder mehr Zeit damit verbringen, sich durch Menüs zu arbeiten, als sie müssen. Wenn sie nicht leicht finden können, was sie brauchen, binden sie möglicherweise die Ressourcen Ihres Kunden durch einen Support-Anruf oder, schlimmer noch, sie nehmen ihr Geschäft woanders auf.

Ein gut gestaltetes mehrstufiges Menü ist eine Schlüsselkomponente jeder Website mit einer komplexen Informationsarchitektur. Obwohl diese Richtlinien niemals Benutzerrecherchen und -tests ersetzen sollten, werden sie Ihnen in einer Vielzahl von Anwendungsfällen gute Dienste leisten.

Weiterführende Literatur im Toptal Blog:

• Der umfassende Leitfaden zur Informationsarchitektur
• Responsive Design: Best Practices und Überlegungen
• Prinzipien der Informationsarchitektur für Mobilgeräte (mit Infografik)