6 Regeln für perfektes Button Design

6 Regeln für perfektes Button Design

Mai 26, 2020

Button und das Button Design kennen wir schon lange aus der ‚Offline-Welt‘: Sämtliche Geräte sind mit unterschiedlichen Button ausgestattet. Der Power Button ist jedem von klein auf vertraut. Wir haben also schon früh gelernt, dass wir über Button eine Aktion auslösen können.

Bei digitalen Produkten sind Button ein wesentliches UI-Element in der Interaktion zwischen Mensch und Maschine. Ziel ist, dass der User die Funktion des Buttons schnell zuordnen und ihn selbstsicher klicken kann. Denn je länger ein Nutzer braucht um die Elemente der Anwendung einzuordnen, desto wahrscheinlicher ist es, dass er sein Vorhaben abbricht.

Nutzer-Erfahrungen und gelernte visuelle Indikatoren vermitteln dem User, wie ein UI-Element funktioniert und was es auslöst. Fehlen diese Indikatoren, nützt das schönste Design nix, denn der User tut sich mit der Anwendung schwer.

Deshalb ist es wichtig, grundlegende Gestaltungsregeln zu beachten. Nachfolgend findest du 6 Regeln für ein perfektes Button Design.

1/ Button Design: Lass den Button wie einen Button aussehen

Wichtig ist zunächst, dass der Button für User klar erkennbar ist. Sie sollten auf den ersten Blick erkennen können, was klickbar ist und was nicht.

Je nach Funktion oder Hierarchie gibt es unterschiedliche Button-Styles:

Button-Styles

Label Button / Contained Button
Der Klassiker: Ein vollflächiger Button mit einem Text-Label.

Label-Icon Button / Contained Button with Icon
Dieser Button beinhaltet neben dem Text-Label auch ein Icon.

Umrandete Button / Ghost Button
Der so genannte Ghost Button ist nicht vollflächig sondern transparent und wird lediglich durch eine Outline begrenzt.

Abgerundete Button
Das ist ein Button mit maximal abgerundeten Ecken.

Icon Button
Dieser Button kommt nur mit einem Icon aus.

Floating Button
Der schwebende Button ist Teil von Googles Material Design. Es handelt sich hierbei um ein Icon auf einem schwebend gefülltem Kreis. Schwebende Button werden für Aktionen mit hoher Priorität verwendet und verfügen oft auch über eine Animation.

Menu Button
Bei Klick auf einen Menu Button öffnet sich ein Menu, das dem User weitere Auswahlmöglichkeiten bietet.

Split Button
Der Split Button hat zwei Funktionen: Mit Klick auf das Label wird eine Funktion ausgelöst, die standardmäßig voreingestellt ist. Mit Klick auf das Icon zeigen sich in einem Drop Down Menu die Alternativen zur Standardeinstellung.

Stell dir im unteren Beispiel vom Split Button vor, dass der Klick auf ‚Einfügen‘ standardmäßig das ‚Davor Einfügen‘ auslöst. Klickt der User auf den Pfeil, werden ihm noch Alternativen angeboten.

Button Design Styles

Button-Anatomie

Trotz unterschiedlicher Styles folgt ein Button einer Anatomie. Die gilt auch für reine Label oder Icon- Button, nicht nur, wie hier im Beispiel beim Label-Icon Button:
Anatomie einer Schaltfläche

Button-Padding

Eine exakte Padding-Vorgabe, die für alle Button gleichermaßen funktioniert, gibt es nicht. Das Padding sollte in einem ausgewogenen Verhältnis zur Schriftgröße gewählt werden.

Über das vertikale Padding lässt sich auch die Bedeutung des Buttons kommunizieren. Ein Button mit mehr vertikalem Padding hat eine höhere Priorität als der mit weniger.

Beim horizontalen Padding sollte eine Mindestbreite für Button mit kurzem Label-Text festgelegt werden. Alles darüber hinaus folgt einem einheitlichen Padding.

Button Padding

Button-Farben

Beim Button Design werden gerne Corporate Design-Farben verwendet, doch das ist nicht immer eine gute Idee:
  • Die Button-Farbe(n) sollte(n) im starken Kontrast zum Hintergrund und den übrigen Inhalten stehen. Kann das die Corporate Design-Farbe nicht leisten, weil sie z. B. zu hell und pastellig ist, sollten andere Farben in Betracht gezogen werden.
  • User sind es gewohnt, dass Rot für Fehlermeldungen genutzt wird und Grün für Erfolgsmeldungen. Auch das sollte bei der Farb-Entscheidung berücksichtigt werden. Denn je nach Funktion könnten diese beiden Farben verwirrend wirken, z. B.: bei einem roten ‚Bestätigen‘-Button oder einem grünen ‚Delete‘-Button.
Darstellung Button Color (z. B. grün zur Bestätigung und rot zum Löschen)
  • Manche Menschen sind farbenblind. Stell sicher, dass diese Menschen dennoch mit deiner Webseite / Anwendung arbeiten können. Mehr Infos und ein Link zu einem Tool, mit dem du deine Seite aus Sicht von Farbenblinden checken kannst, findest du hier.

Button-Größe

Ein Button sollte groß genug sein und genügend Space drumherum haben, damit er sich bequem klicken lässt. Das gilt für die Desktop-Ansicht, vor allem aber für mobile Ansichten, wenn es Finger zum Klicken braucht.

Wer sich verklickt, weil der Button zu klein ist oder zu nah an einem anderen Element liegt, verliert die Lust sich mit der Anwendung auseinander zu setzen.

Groeße von Schaltflächen
Du kannst über die Button-Größe auch die Priorität eines Button kommunizieren. Ein kleiner Button hat weniger Bedeutung und ein großer deutlich mehr.
Button Design Priority

2/ Button Varianten: Berücksichtige versch. Actions & Hierarchien

Je nachdem wie umfangreich das Produkt oder die Anwendung ist, braucht es mehrere Button-Varianten, die unterschiedliche Aktionen ausführen oder die von der Hierarchie her unterschiedlich zu bewerten sind.

Call-to-action

Der Call-to-action-Button hat die höchste Priorität und sollte entsprechend dargestellt werden. Er fordert die Nutzer in der Regel auf sich zu ‚registrieren‘, ‚anzumelden‘ oder ‚jetzt zu kaufen’… Sie werden also dort eingesetzt, wo man als Product- oder Website-Owner möglichst viele Klicks generieren möchte. Entsprechend auffällig sollte er gestaltet sein. Die Auffälligkeit lässt sich über Form, Farbe, Kontrast und Größe steuern.

Primary action

Button mit einer hohen Priorität können genauso wie Call-to-action-Button gestaltet sein oder sie sind etwas weniger auffällig. In jedem Fall sollten sie stärker ins Auge fallen, als Button mit einer Secondary oder Tertiary action.

Sie sind nämlich ein durchaus wichtiges Element für den User und helfen ihm beispielsweise Vorgänge durchzuführen, wie z. B. ‚Starten‘, ‚Nächster Schritt‘, ‚Fertigstellen‘.

Secondary action

Secondary action-Button haben meist alternative Funktionen, wie z. B. das ‚Abbrechen‘ eines Vorgangs.  Sie sind oft neben einem Button mit primary action platziert und bilden die Alternative.
Sie sind in Form, Farbe und/oder Größe also weniger auffällig darzustellen.

Tertiary action

Tertiary action-Button sind durchaus wichtig für den User, entsprechen aber nicht jederzeit dem, was er gerade tun möchte.
Anhand dieser Button lässt sich meist etwas editieren oder tiefer in die Details einsteigen. Das kann z. B. sein: ‚Bearbeiten, ‚Nutzer hinzufügen‘, ‚Details ansehen‘ oder auch ‚Löschen‘.

Tertiary action-Button werden meist kleiner dargestellt, tauchen aber oft in Kombination mit Icons auf, die die Funktion unterstreichen.

Button Actions

3/ Button States: Kommuniziere den aktuellen Zustand

Der Button Status verrät dem User, ob er auf den Button klicken kann, ob er gerade klickt oder geklickt hat.

In den meisten Fällen wird also in den folgenden Status unterschieden. Bei Basic-Websites sind meist nur der Default- und Hover-Status nötig, bei umfangreicheren Seiten oder Produkten werden meist mehrere Status benötigt.

Default

Der Default-Status kommuniziert, ob das Element aktiv oder inaktiv ist. Also ob der Button geklickt oder nicht geklickt werden kann. In manchen Fällen ist z. B. erst eine Eingabe vom Nutzer erforderlich bevor der Button aktiv wird. In dem Fall ist der Button im Default-Status inaktiv. Braucht es keine Handlung vom User bevor der Button geklickt werden kann, ist er default aktiv.

Focus

Der Focus-Status vermittelt, dass der Nutzer einen Button mithilfe der Tastatur hervorgehoben hat. Nutzt der User weder die Maus, noch den Finger zur Navigation, sondern beispielsweise die Tab-Taste auf der Tastatur, dann zeigt sich der Button im Focus-Status sobald der User den Button mit der Tab-Taste erwischt.

Da User selten via Tastatur navigieren, wird der Focus-Status bei Button oft nicht berücksichtigt. Viel wichtiger ist der Focus-Status bei Eingabefeldern. Wenn der User ein Eingabefeld anklickt und gerade etwas eintippen möchte, befindet sich das Eingabefeld im Focus-Status.

Hover

Der Hover-Status zeigt sich, wenn der User mit dem Cursor über den Button fährt. So wird symbolisiert, dass der Button genau jetzt klickbar ist. Das ist für manchen User eine Motivation, vor allem für diejenigen, die noch unsicher im Umgang mit digitalen Produkten sind.
Der Hover-Status zeigt sich heute ganz unterschiedlich. Vom einfachen Farbwechsel bis hin zur Formänderung.

Pressed/Active

Dieser Zustand zeigt an, dass der Nutzer gerade auf die Schaltfläche klickt und hält (pressed) oder geklickt hat (active). Drückt der User also auf den Button und hält den Druck, zeigt sich der pressed Status und sobald er loslässt, zeigt sich der acitve Satus.
Ob beide, nur einer oder keiner dieser Status notwendig sind, hängt von der Funktion und Priorität des Buttons ab.

Progress/Load

Dieser Status wird notwendig, wenn die Aktion nicht unmittelbar ausgeführt wird, sondern ‚in Arbeit‘ ist oder eine gewisse Ladezeit benötigt.

Disabled

Der Disabled-Status kommuniziert, dass der Button inaktiv ist. Dass er aber grundsätzlich aktiviert werden kann, wenn bestimmte Voraussetzungen erfüllt sind oder werden.
Button Design States

4/ Button Label: Erkläre, was der Button tut

Auch die Beschriftung des Button ist für eine gute Kommunikation maßgeblich. Ein gutes Button-Label verrät dem User, was er mit dem Klick auslöst und lädt ihn somit zum Handeln ein.

Wichtig dabei ist, dass du dich kurz fasst. Ein Button braucht 1-2 prägnante Wörter, ggf. kommt noch ein Bindewort hinzu, mehr nicht. Button mit langem Text verlieren an Wirkung.

  • ‚OK‘, ‚Ja‘ und ‚Nein‘ sind oft nicht aussagekräftig genug oder sogar irreführend. Sei also möglichst genau in deiner Aussage, ohne dass der Button-Text zu lang ausfällt.
Button Text
  • Benutze idealerweise Verben, wie z. B.: ‚Speichern‘, ‚Bearbeiten’….
  • Achte auf den Kontext! Im Kontext funktionieren auch Labels, wie ‚Zurück‘ oder ‚Weiter‘. Aber auch hier kannst du meist noch spezifischer werden: ‚Zurück zur Übersicht‘ oder ‚Nächster Schritt‘. Die Wahl des richtigen Labels hängt immer auch vom Produkt und den Usern ab.
  • Versuche Nutzerfragen zu beantworten, z. B.: Soll das Produkt ‚in den Warenkorb‘? oder Willst du ‚jetzt buchen‘?

5/ Button Feedback: Lass den User wissen, was passiert

Sobald der Nutzer einen Button geklickt hat, erwartet er eine Reaktion. Abhängig von der jeweiligen Button-Funktion öffnet sich beispielsweise eine neue Ansicht oder es wird eine Aktion ausgeführt oder es gibt einen Text-Hinweis oder ein akustisches Signal.

Fehlt das Feedback, denken manche User der Befehl wurde nicht ausgeführt oder hätte nicht funktioniert. In dem Fall versuchen sie oft noch mehrfach den Button zu klicken, was zu unnötigen Operationen führt.

Du solltest also unbedingt ein Feedback einbauen, wenn die ausgeführte Aktion nicht sichtbar oder in einer anderen Weise erkennbar ist.

Wird über den Button beispielsweise nur ein Link in die Zwischenablage gespeichert, gib dem User z. B. via Label ein Feedback, dass der Link kopiert wurde.

Oder wenn über einen Button ein Download gestartet wird, bestätige den Start des Downloads und zeig ggf. auch den aktuellen Status des Prozesses an. Vorausgesetzt, der Prozess lässt sich verlässlich kommunizieren.

Button Design Feedback

6/ Button Platzierung: Achte auf das große Ganze

Stell sicher, dass der Kontext klar ist und dass du den User nicht überforderst:
  • Nutze Button nur für die wirklich wichtigen Aktionen. Vermeide es zu viele Button zu verwenden. Hat der User zu viele Möglichkeiten, wird ihm die Entscheidung schwer fallen. Wohlmöglich entscheidet er sich am Ende gar nicht.
  • Der Button sollte im Kontext zu den angrenzenden Inhalten stehen. Dass heißt auch, dass die Abstände zueinander nicht zu groß sein sollten. Berücksichtige aber drumherum mehr Space zu Elementen, die nicht im Kontext stehen.
  • Idealerweise folgen Inhalte und Button einer Reihenfolge, die so auch in einem persönlichen Gespräch statt finden könnte. Beantworte also anhand der Inhalte und Button die Nutzerfragen.

Button Design Fazit: Don’t make user think

Diese Headline ist abgeleitet von einem Buch-Titel und das Buch möchte ich jedem UX/UI- oder Produkt-Designer empfehlen: ‚Don’t make me think‘ von Steve Krug.

Darum geht es auch beim Button Design: Sorg dafür, dass der Nutzer möglichst wenig nachdenken muss. Gestalte Button idealerweise so, dass der User sofort erkennt, was klickbar ist und zu welchem Zweck.

Happy working ☀️
Su

Portrait Su Wiemer 2021

Hi, ich bin Su, UX/UI Designerin. Ich entwickle und schreibe über Lösungen für Webseiten & digitale Produkte, die Menschen erreichen und begeistern. Ganz nach dem Motto #makeusershappy. 🤩

Mehr UX/UI Tipps:

""
6 UI Pagination Designs und ihre Vor- und Nachteile
  • Mehr lesen
""
70 UI / UX Tools & Ressources für Designer
  • Mehr lesen
""
UX/UI Design Konferenzen & Events 2021
  • Mehr lesen
""
Großes Glossar: UI & UX Fachbegriffe, die Designer & Entwickler nutzen
  • Mehr lesen
""
Landingpage optimieren: So sorgst du für eine bessere Conversion
  • Mehr lesen
UX Design: Navigation Illustration
UX/UI Design-Beispiele für deine Navigation
  • Mehr lesen

Mehr UX/UI Tipps:

""
6 UI Pagination Designs und ihre Vor- und Nachteile
  • Mehr lesen
""
70 UI / UX Tools & Ressources für Designer
  • Mehr lesen
""
UX/UI Design Konferenzen & Events 2021
  • Mehr lesen
""
Großes Glossar: UI & UX Fachbegriffe, die Designer & Entwickler nutzen
  • Mehr lesen
""
Landingpage optimieren: So sorgst du für eine bessere Conversion
  • Mehr lesen
UX Design: Navigation Illustration
UX/UI Design-Beispiele für deine Navigation
  • Mehr lesen

Mit meinen Design Letter erhältst du 1 bis 2x monatl. UX/UI-Tipps und erfährst, wie du User happy machst.

Deine Daten werden geschützt – hier geht's zum Datenschutz

Was macht eigentlich ein UX/UI Designer?