Das Magazin/UX & Strategie/Buttons beschriften: Was passiert nach dem Klick?

UX & Strategie

Buttons beschriften: Was passiert nach dem Klick?

Buttons sollen die tatsächliche Handlung ankündigen. So unterscheidest du Öffnen, Speichern und Absenden verständlich.

Zwei Buttons unterscheiden die verbindliche Aktion Anfrage senden vom Speichern eines Entwurfs.

Eine gute Button-Beschriftung kündigt die tatsächliche Handlung an. „Anfrage senden“ ist präziser als „Los geht’s“, wenn der Klick eine Nachricht abschickt. „Termine ansehen“ wäre falsch, wenn sofort eine Buchung entsteht. Beginne deshalb beim Verhalten hinter dem Button und formuliere erst danach den Text.

Im GOV.UK-Beispiel unterscheiden sich die Wege

Die fachliche Referenz ist die offiziellen GOV.UK-Button-Dokumentation. Die dort dokumentierte Gruppe stellt Hauptaktion, alternative Aktion und Link unterschiedlich dar. Die Beschriftungen benennen dabei verschiedene Schritte. Visuelle Gewichtung und Sprache arbeiten zusammen: Nicht jede erreichbare Aktion braucht dieselbe Fläche.

Die Dokumentation unterscheidet ausdrücklich zwischen einfachem Fortsetzen und Speichern mit anschließendem Fortsetzen. Diese Unterscheidung ist praktisch: Ein Nutzer kann aus dem Wort „Speichern“ ableiten, dass seine Eingaben erhalten bleiben. Wenn deine Anwendung das nicht tut, entsteht eine falsche Erwartung.

Verbindlichkeit gehört in die Umgebung

Ein Button ist keine vollständige Produktbeschreibung. Preis, Laufzeit, Voraussetzungen und Folgen müssen bereits in seiner Nähe verständlich sein. Versuche nicht, eine ungeklärte Entscheidung durch eine besonders energische Formulierung zu beschleunigen.

Für ein Beratungsgespräch könnte ein unverbindlicher Einstieg „Gesprächstermin auswählen“ heißen. Wenn danach erst ein Kalender folgt, stimmt diese Erwartung. Wird dagegen eine kostenpflichtige Leistung ausgelöst, muss die gesamte Darstellung diese Verbindlichkeit korrekt vermitteln. Welche rechtliche Beschriftung erforderlich ist, hängt vom konkreten Vorgang ab; das lässt sich nicht aus einer allgemeinen UX-Komponente ableiten.

Ein Test mit zwei Fragen

Zeige einer Person den Bereich vor dem Klick. Frage: „Was passiert als Nächstes?“ und „Was ist danach bereits erledigt?“ Diese zweite Frage deckt häufig Unterschiede zwischen Öffnen, Speichern und Absenden auf. Vergleiche die Antwort anschließend mit dem tatsächlichen Verhalten.

Prüfe auch den Zustand nach dem Klick. Bei einer langsamen Antwort sollte die Seite einen verständlichen Arbeitszustand zeigen. Doppelte Aktivierungen müssen bei kritischen Aktionen technisch berücksichtigt werden; eine geänderte Beschriftung allein verhindert keine doppelte Bestellung.

Wenn mehrere Hauptaktionen miteinander konkurrieren, untersuche zunächst die Aufgabe der Seite. Der Beitrag zu klaren Landingpages hilft bei dieser Priorisierung. Für den Abschluss gehört eine Bestätigungsseite mit nächstem Schritt dazu.

Nicht alles, was klickbar ist, ist ein Button

Bei Entscheidungen wie Zustimmung oder Ablehnung muss zusätzlich die Gewichtung fair bleiben. Der Beitrag über Gestaltung und Entscheidungsfreiheit untersucht das an einem echten Cookie-Dialog.

Beschrifte den Übergang, nicht die Stimmung

Ein Button verbindet zwei Zustände. Vorher liegt beispielsweise ein ausgefüllter Entwurf vor, danach ist eine Anfrage versendet. Schreibe diese beiden Zustände zunächst ohne Werbesprache auf. Aus dem Übergang ergibt sich meist eine konkrete Formulierung. „Anfrage senden“ benennt die Handlung; „Jetzt durchstarten“ lässt offen, ob ein Formular, eine Registrierung oder ein verbindlicher Abschluss folgt.

Die nötige Genauigkeit hängt vom Umfeld ab. In einem klar beschrifteten mehrstufigen Formular kann „Weiter“ verständlich sein. Auf einer Angebotsseite ohne sichtbaren Ablauf ist dieselbe Formulierung schwächer. Ein Button muss daher nicht isoliert möglichst viele Wörter enthalten. Er soll zusammen mit Überschrift, Erklärung und vorhandenen Angaben eine zutreffende Erwartung erzeugen.

Alternativen brauchen unterscheidbare Ergebnisse

Prüfe bei mehreren Buttons, ob sie tatsächlich unterschiedliche Aufgaben erfüllen. „Speichern“ und „Fertig“ können unklar sein, wenn beide denselben Entwurf ablegen. Besser unterscheidbar sind „Entwurf speichern“ und „Anfrage senden“, sofern die Anwendung diese Ergebnisse auch liefert. Reihenfolge und Gewichtung sollten die aktuelle Aufgabe unterstützen, ohne eine notwendige Alternative zu verstecken.

Halte die Bezeichnungen über den gesamten Ablauf konsistent. Wenn eine Aktion zunächst „Anfrage senden“ und später „Bestellung abschließen“ heißt, verändert sich die erwartete Verbindlichkeit. Solche Brüche lassen sich in einer Übersicht aller Zustände leichter finden als auf einzelnen Bildschirmansichten. Beziehe dabei auch Bestätigungen und E-Mails ein, soweit sie zum Produktablauf gehören.

Die Rückmeldung gehört zur Handlung

Nach der Aktivierung muss erkennbar bleiben, was gerade geschieht. Bei einer Übertragung kann ein benannter Arbeitszustand Orientierung geben. Scheitert der Vorgang, sollte die Seite erklären, ob die Anfrage angekommen ist und welche Handlung jetzt sinnvoll ist. Ein kommentarlos wieder aktiver Button lässt die Person sonst zwischen erneutem Klicken und unsicherem Warten wählen.

Teste die Beschriftung schließlich mit langen Texten, Vergrößerung und Tastatur. Der vollständige Name muss sichtbar und zugänglich bleiben. Wenn eine genaue Formulierung nicht mehr in eine starre Breite passt, ist zuerst das Layout zu prüfen. Eine wichtige Bedeutung zu streichen, nur damit der Button kleiner aussieht, löst das eigentliche Problem nicht.

Verwende einen echten Link für ein Navigationsziel und einen Button für eine Aktion im aktuellen Ablauf, etwa das Absenden eines Formulars. Das Aussehen kann ähnlich sein, die technische Bedeutung bleibt unterschiedlich. Ein sauber beschrifteter Button auf einem unpassenden HTML-Element ist noch kein zugängliches Bedienelement. Prüfe deshalb zusätzlich Tastaturfokus und Bedienbarkeit.

NEUE PERSPEKTIVEN ENTDECKEN

Keine Artikel gefunden. Versuche einen anderen Begriff.

Esc zum Schließen · Strg / ⌘ K zum Suchen