Menüdesign: Checkliste mit 15 UX-Richtlinien, die Nutzer unterstützen

by Kathryn Whitenton (deutsche Übersetzung) - 29. November 2015

Nutzern beim Navigieren zu helfen, sollte für jede Website und App hohe Priorität haben. Selbst die coolsten Funktionen und ansprechendsten Inhalte sind nutzlos, wenn sie von den Nutzern nicht gefunden werden. Auch wenn Sie über eine Suchfunktion verfügen, sollten Sie sich normalerweise nicht auf die Suche als einzige Navigationsmöglichkeit verlassen. Die meisten Designer verstehen das und inkludieren daher ein Navigationsmenü in ihre Designs.

Navigationsmenüs beinhalten, sind aber nicht beschränkt auf, Navigationsleisten und Hamburgermenüs.

Menüs sind so wichtig, dass sie auf fast jeder Website bzw. in jeder Software zu finden sind – aber nicht alle Menüs sehen gleich aus. Zu häufig beobachten wir, dass Nutzer mit verwirrenden, schwer zu bedienenden oder schlecht auffindbaren Menüs zu kämpfen haben.

Vermeiden Sie gängige Fehler, indem Sie die folgenden Richtlinien für nutzerfreundliche Navigationsmenüs befolgen:

Machen Sie es sichtbar

1. Verwenden Sie auf grossen Bildschirmen keine winzigen Menüs (oder Menüsymbole). Menüs sollten nicht verborgen werden, wenn Ihnen genügend Platz zur Verfügung steht, um sie anzuzeigen.
   
   
2. Platzieren Sie Menüs an bekannten Stellen. Nutzer erwarten, Elemente der Nutzeroberfläche dort zu finden, wo sie ihnen bereits auf anderen Websites oder Apps begegneten (z.B. linke Seitenleiste, oberer Bereich des Bildschirms). Nutzen Sie diese Erwartungen zu Ihrem Vorteil, indem Sie Ihre Menüs dort platzieren, wo sie Nutzer suchen.
   
   
3. Sorgen Sie dafür, dass Menülinks interaktiv aussehen. Nutzern ist eventuell gar nicht bewusst, dass es sich um ein Menü handelt, wenn die Auswahlmöglichkeiten nicht anklickbar (oder antippbar) aussehen. Menüs können wie dekorative Bilder oder Überschriften wirken, wenn Sie zu viele Grafiken beinhalten oder sich zu genau an die Prinzipien des Flat Designs halten.
   
   
4. Stellen Sie sicher, dass Ihre Menüs über genug optisches Gewicht verfügen. In vielen Fällen benötigen Menüs, die an bekannten Orten platziert wurden, nur einen kleinen weissen Rand oder geringe Farbsättigung, um bemerkt zu werden. Falls das Design überladen ist, können Menüs, denen visuelles Gewicht fehlt, aber in einer Flut von Grafiken, Werbeaktionen und Überschriften untergehen, die um die Aufmerksamkeit des Nutzers buhlen.
   
   
5. Verwenden Sie Linktextfarben, die im Kontrast zur Hintergrundfarbe stehen. Es ist unglaublich, wie viele Designer Kontrastrichtlinien ignorieren. Die Navigation im digitalen Raum ist bereits verwirrend genug, ohne die Augen zusammenkneifen zu müssen, um das Menü lesen zu können.Selbst Designer, die alle diese Richtlinien kennen, könnten Menüs erstellen, die von Nutzern übersehen werden, da es sehr schwer ist, die eigene Arbeit objektiv zu beurteilen – vor allem was subjektive Kriterien, wie die Sichtbarkeit von Dingen, betrifft. Falls Sie wissen, wo sich Dinge befinden (da Sie sie dort platziert haben), ist es nur logisch, dass Sie sie auch sehen können! Deshalb ist es so wichtig, Ihr Menü an Nutzern zu testen.

Kommunizieren Sie den aktuellen Standort

6. Sagen Sie Nutzern, „wo“ sich der derzeit sichtbare Bildschirm innerhalb der Menüoptionen befindet. „Wo bin ich?“ ist eine der grundlegenden Fragen, die Nutzer beantworten müssen, um erfolgreich navigieren zu können. Nutzer verlassen sich auf visuelle Hinweise in Menüs (und anderen Navigationselementen, wie Breadcrumbs), um diese wichtige Frage zu beantworten. Den aktuellen Standort nicht zu kommunizieren, ist wahrscheinlich der gängigste Fehler, den wir in Menüs von Websites sehen. Ironischerweise liefern genau diese Menüs Nutzern wichtige Anhaltspunkte, da Besucher oft nicht über die Startseite auf die Webseite gelangen.

Koordinieren Sie Menüs mit Nutzeraufgaben

7. Verwenden Sie verständliche Linkbezeichnungen. Finden Sie heraus, wonach Nutzer suchen, und verwenden Sie Kategoriebezeichnungen, die bekannt und relevant sind. Menüs sind nicht der richtige Ort für unsinnige, erfundene Wörter und internen Slang. Halten Sie sich an eine Terminologie, die Ihren Inhalt und Ihre Funktionen genau beschreibt.
   
   
8. Sorgen Sie dafür, dass die Linkbezeichnungen leicht überflogen werden können. Sie können sicherstellen, dass Nutzer weniger Zeit mit dem Lesen von Menüs verbringen müssen, wenn Sie linksbündige vertikale Menüs verwenden und wichtige Begriffe am Anfang platzieren.
   
   
9. Verwenden Sie auf grösseren Websites Menüs, um Nutzern eine Vorschau untergeordneter Inhalte anzuzeigen. Falls typische Nutzerpfade vorsehen, dass mehrere Ebenen überwunden werden müssen, können Mega Menüs (oder traditionelle Auswahlmenüs) Nutzern Zeit sparen, da sie ihnen ermöglichen, eine (oder zwei) Ebenen zu überspringen.
   
   
10. Stellen Sie lokale Navigationsmenüs für eng miteinander verbundene Inhalte zur Verfügung. Falls Menschen häufig zusammenhängende Produkte vergleichen oder in einem bestimmten Bereich mehrere Aufgaben absolvieren müssen, sollten Sie diese zusammenhängenden Websites in einem lokalen Navigationsmenüs sichtbar machen, anstatt Nutzer zu zwingen, per „Pogo Sticking“ in Ihrer Hierarchie nach oben und unten zu springen.
    
    
11. Nutzen Sie visuelle Kommunikation. Bilder, Grafiken oder Farben, die Nutzern dabei helfen, die Menüoptionen zu verstehen, können zu einem besseren Verständnis beitragen. Stellen Sie aber sicher, dass die Bilder Nutzeraufgaben unterstützen (oder machen Sie die Aufgaben zumindest nicht schwieriger).

Sorgen Sie für eine einfache Bedienung

12. Machen Sie die Menülinks gross genug, damit sie leicht angetippt oder angeklickt werden können. Links, die zu klein oder zu nah zusammen sind, könnten mobile Nutzer enttäuschen und haben zur Folge, dass Designs auf grossen Bildschirmen unnötig schwer zu verwenden sind.
    
    
13. Stellen Sie sicher, dass Auswahlmenüs weder zu klein noch zu gross sind. Auswahlmenüs, die erst angezeigt werden, nachdem der Mauszeiger darauf gehalten wird, liefern Grund zu Frustration, da sie oft verschwinden, während Nutzer versuchen, den Mauszeiger darauf zu halten und einen Link anzuklicken. Ausserdem machen es zu lange, vertikale Auswahlmenüs schwierig, auf Links am Ende der Liste zuzugreifen, da sie sich unter dem Rand des Bildschirms befinden oder den Nutzer zum Scrollen zwingen. Zu breite, per Mauszeiger aktivierte Auswahlmenüs könnten für neue Websites gehalten werden und den Nutzer glauben lassen, zu einer neuen Webseite gewechselt zu haben, obwohl sie auf nichts geklickt haben.
    
    
14. Denken Sie über „Sticky“-Menüs für lange Websites nach. Nutzer, die den unteren Rand einer langen Seite erreicht haben, müssen mühsames Scrollen in Kauf nehmen, um zu den Menüs im oberen Bereich zurückzukehren. Menüs, die auch nach dem Scrollen im oberen Bereich des Ansichtsfensters sichtbar bleiben, können dieses Problem lösen und eignen sich besonders gut für kleinere Bildschirme.
    
    
15. Optimieren Sie den einfachen physischen Zugriff auf häufig verwendete Befehle. Für Auswahlmenüs bedeutet das, dass die meisten Befehle in der Nähe des Linkziels platziert werden, das das Auswahlmenü öffnet (die Maus oder der Finger des Nutzers müssen nicht so weit bewegt werden. Vor kurzem haben einige mobile Apps sogar begonnen, Tortenmenüs wiederzubeleben, welche alle Menüoptionen in einem leicht erreichbaren Kreis (oder Halbkreis) anordnen).

Begeistern Sie den Nutzer mit innovativen und interessanten Methoden der Menüinteraktion

Obwohl… eigentlich ist das keine gute Idee.

Zu versuchen, Nutzer mit coolen Effekten zu beeindrucken, sollte nicht zu Ihren Prioritäten beim Menüdesign gehören. Andere Designer könnten von neuartigen Menüdesigns beeindruckt sein, Nutzer sind allerdings wesentlich beeindruckter von tollen Inhalten, die attraktiv präsentiert werden und problemlos über bekannte Menüs erreicht werden können.

Natürlich verbessern neue Arten von Menüs manchmal das Nutzererlebnis. (Mega-Menüs sind ein tolles Beispiel für dieses Phänomen.) Manchmal unterscheiden sich neue Technologien auch so stark, dass einige dieser Richtlinien nicht gelten – die Richtlinie betreffend das visuelle Gewicht ist zum Beispiel für Spracherkennungssysteme irrelevant. Diese Fälle sind allerdings selten und die meisten Nutzeroberflächen sind einfacher zu verwenden, wenn sie diese Prinzipien berücksichtigen.

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.