Button-Reihe

    Die Button-Reihe ist ein zentrales Navigationselement, das Nutzer*innen zu wichtigen Aktionen oder Zielseiten führt. Typische Anwendungsfälle:

    • Call-to-Actions (CTAs): „Jetzt bewerben“, „Direkt anmelden“, „Absenden“

    • Weiterleitungen zu Zielseiten: z. B. Detailseiten, Übersichtsseiten, Formulare

    Buttons sollen die Nutzerführung unterstützen, Aktionen klar erkennbar machen und die Interaktion erleichtern.


    Aufbau & Positionierung

    • Zentriert unter dem zugehörigen Inhaltselement platzieren.

    • Sonderfälle:

      • Links- oder rechtsbündig bei Formularen oder Menüs, wenn dies funktional notwendig ist.

    • Empfohlene Anzahl:

      • Ideal: 1 Button → maximale Aufmerksamkeit

      • Zwei Buttons → Primäraktion (blauer Button) + Sekundäraktion (Outline-Button)

      • Mehr als zwei Aktionen → nur Textlinks verwenden, nicht mehrere Buttons (Hervorhebung geht verloren)



    Funktion

    • Buttons lösen eine Aktion aus oder rufen eine Zielseite auf.

    • Beispielhafte Aktionen:

      • Ein Formular absenden

      • Zu einer Übersicht navigieren

      • Weitere Details anzeigen

     

    Do’s

    • Beschränken Sie sich auf so wenig Buttons wie möglich, damit die Handlung klar erkennbar bleibt.

    • Eindeutige Beschriftung, die die Aktion beschreibt:

      • „Jetzt bewerben“

      • „Zur Übersicht“

      • „Alle Meldungen“

    • Priorisieren Sie die Primäraktion: diese soll visuell hervorgehoben sein (blauer Button).

    • Sekundäre Optionen als Outline-Button oder Textlink.


    Don’ts

    • Buttons nicht für Hauptnavigation verwenden.

    • Keine generischen Aktionen wie „Zur Übersichtsseite“ ohne Kontext.

    • Nicht zu viele Buttons nebeneinander: mehr als zwei reduziert die Aufmerksamkeit und erschwert die Nutzerführung.

    • Keine redundanten Verlinkungen, wenn sie bereits in Text oder Menü vorhanden sind.


    Barrierefreiheit & Best Practices

    • Eindeutige Beschriftungen verwenden: Aktion sollte klar sein.

    • Farbliche Hervorhebung: Primäraktion farblich dominant (Blau), Sekundäraktion Outline oder dezenter Farbton.

    • Tab-Reihenfolge beachten: Nutzer*innen mit Tastatur oder Screenreader sollen Buttons logisch erreichen.

    • ALT-Texte bei grafischen Buttons prüfen (falls nicht rein CSS-basiert).

    • Responsives Verhalten: Buttons bei mobilen Endgeräten ausreichend groß und gut klickbar.


    Typische Fehler

    Fehler Warum problematisch? Lösung
    Mehr als 2 Buttons nebeneinander Aufmerksamkeit der Nutzer*innen verteilt, keine klare Priorität Auf zwei Buttons beschränken, weitere Aktionen als Textlink
    Unklare Beschriftung Nutzer*innen verstehen Aktion nicht Aussagekräftige Labels wie „Jetzt bewerben“
    Buttons für Navigation Buttons verlieren ihre Bedeutung Hauptnavigation immer über das Menü führen
    Inkonsistente Reihenfolge Primär- und Sekundäraktion vertauscht Blau = Primäraktion, Outline = Sekundäraktion
    Buttons zu klein oder schwer klickbar Mobile Nutzer*innen können Aktion nicht ausführen Buttons ausreichend groß und mit Abstand gestalten


    Hier im Redaktionsbereich finden Sie eine Übersicht des Button-Elements. Mittels der Vorschau-Funktion (Web-Site anzeigen lassen) können Sie sich anschauen, wie die einzelnen Elemente im Front-End für die User aussehen.

    Veröffentlicht