Zum Hauptinhalt springen

Burger-Menü

Burger-Menü in Storybook
Note: Diese Komponente darf nur im Rahmen der Header UX-Muster und nicht isoliert oder in eigenen Szenarien verwendet werden.

Informationen zur BurgerMenu-Komponente für UX-Muster für Seitenlayouts finden Sie auf dieser Seite.

Verwendung​

Überblick​

Die BurgerMenu-Komponente ersetzt die standardmäßige globale Kopfzeile und die Navigation auf Smartphones und Tablets oder bei Bedarf durch Änderung der Konfiguration.

Aufbau​

Burger-Menü, reduziert

Burger-Menü, erweitert

Die BurgerMenu-Komponente besteht aus den folgenden Elementen:

  1. Schaltflächensymbol für Burger-Menü: Wird zum Öffnen der Produktnavigation verwendet.
  2. Container für Burger-Menü: Organisation von Navigationselementen und anderen Inhalten, die für das direkte Ziel des Benutzers nicht relevant sind, z. B. Einstellungen und Hilfe.
  3. Schaltflächensymbol „Schließen“: Schließt das Burger-Menü.
  4. Sucheingabefeld: Ermöglicht Benutzern, eine Suche durchzuführen.
  5. Anwendungsnavigation: Menü- und Navigationselemente, die Benutzer auswählen können.
  6. App-Schnellzugriff: Ermöglicht Benutzern, zwischen den Anwendungen zu wechseln.
  7. Benutzer-Avatar: Enthält den vollständigen Namen des Benutzers und Avatar-Links.
  8. Globale Kopfzeile: Enthält das Glockensymbol für Benachrichtigungen.

Best Practices​

  • Das Burger-Menü sollte auf Smartphones und Tablets anstelle der Desktop-Navigation angezeigt werden.
  • Verwenden Sie das Burger-Menü für Navigationselemente, die nicht dem eigentlichen Zweck der Anwendung dienen. So lässt sich die Aufmerksamkeit des Benutzers auf wesentliche Aufgaben lenken.

Reaktionsfähigkeit/Anpassungsfähigkeit​

Das Burger-Menü hat eine feste Breite.

Interaktionen​

  1. Durch Klicken auf das Symbol des Burger-Menüs wird ein reduzierbarer Navigationsbereich angezeigt. Benutzer können das Burger-Menü durch Klicken auf das Schaltflächensymbol „X“ schließen.
  2. Benutzer können durch Klicken auf die Links für die einzelnen Menüelemente durch die Anwendung navigieren.
  3. Benutzer können zwischen Anwendungen wechseln. Dazu klicken sie auf den App-Schnellzugriff, über den ein Dropdown-Menü mit einer Liste der verfügbaren Anwendungen geöffnet wird.
  4. Benutzer können Benachrichtigungen anzeigen, indem sie auf das Glockensymbol für Benachrichtigungen klicken.

Überlegungen zum UX-Schreiben​

  • Beschriftungen für Menüs und Menüelemente müssen genau und informativ sein.
  • Geben Sie Beschriftungen an, die prägnant sind und den Zweck der Auswahl klar verdeutlichen.
  • Beim Großteil der Links sollten Substantive verwendet werden. Zum Beispiel die Seite „Profil“ für Benutzer.
  • Jedes Menüelement sollte in einer einzelnen Textzeile angezeigt werden.
  • Verwenden Sie hauptsächlich die übliche Groß- und Kleinschreibung, auch bei Überschriften und Titeln, Menünamen und Menü- und Navigationselementen. Dies unterstützt einen freundlichen und umgangssprachlichen Stil und lässt sich für andere Märkte und Produkte einfacher übersetzen. Ausnahmen sind z. B. Eigennamen und Titel vor Namen.