Buttons

Button Historie

Heutzutage betätigen wir viele Buttons. Dies können grafische Buttons im Internet, Apps oder auch physische Buttons sein. In diesem Artikel möchten wir euch zeigen, wie man gute Buttons für User Interfaces erstellt und wie man sie einsetzt. Doch zuvor sollten wir uns für ein besseres Verständnis dem Ursprung des Buttons widmen. 

Bevor es Knöpfe gab, waren Hebel der Weg um Dinge in Gang zu bringen. Von den 1890ern bis in die 1950er wurden dann Knöpfe für den Alltag  als Revolution für den Menschen vermarktet, um das Leben zu erleichtern.

 In den 1970ern kamen die ersten(Heim)Videospiele auf den Markt und brachten Kontroller mit Knöpfen auf den Markt. Zu dieser Zeit begann auch für uns Menschen die Verknüpfung des Knopfes mit dem Spielen. 

Mit den 1980ern kamen die ersten virtuellen Knöpfen in Computerschnittstellen und in den 90ern waren sie dann weit verbreitet und sogar nicht mehr direkt als Knöpfe zu erkennen (Logos, Links etc.). Spätestens mit der in den 2000ern stetig zunehmenden und sich verbessernden Toucheingabe wurden Buttons unablässig für unsere Gesellschaft, weil sie die Schnittstelle von Nutzer und Eingabe in Systeme bildeten.

Selbst heute finden wir sowohl echte Knöpfe, als auch digitale Knöpfe in unserem Umfeld. Es reicht nur ein Blick auf den eigenen Sofatisch, eine Fernbedienung hat Knöpfe sowie fast jede Webseite oder App. Knöpfe sind aus unserem Alltag also nicht mehr wegzudenken.

Button Typen

Primäre Button

Primäre Buttons sind digitale Schaltflächen, die für die wichtigsten und positiven Aktionen im Interface Design eingesetzt werden. In erster Linie werden primäre Buttons eingesetzt, um Anmelde- und Speicherfunktionen zu bedienen.

Aus diesem Grund ist es von großer Bedeutung die Primären Buttons prägnant und herausstechend abzubilden, weswegen sie in ihrer Farbigkeit und visuellen Gewichtung dominieren müssen. Zur visuellen Gestaltung zählt zum einen eine ausgefüllte Schaltfläche, sowie die Abgrenzung von anderen Elementen, damit ihre Bedeutsamkeit eindeutig zu erkennen ist.

Wenn es sich um eine Aktion handelt, die irreversibel ist, wie beispielsweise das endgültige Löschen einer Datei, dann sollte der primäre Button die Funktion vertreten, die das Ganze abbricht. Der Grund dafür ist, dass der User aufgrund des Aussehens des Buttons automatisch dazu tendiert den auffälligeren Button anzuklicken und somit nicht aus Versehen eine Datei löscht, die möglicherweise sehr wichtig war.

CTA-Call to Action Button

Call to Action Buttons (CTA) sind Schaltflächen, die meistens eng mit dem Verkaufsprozess zusammenhängen und den User direkt ansprechen sollen. Infolgedessen muss der CTA-Button den User auf eine positive Weise auf sich aufmerksam machen und ihn dazu animieren mit ihm zu interagieren. Um das zu erreichen ist es essenziell vor dem Design eines CTA-Buttons ein eindeutiges, klares, vordefiniertes Ziel zu setzen und allein durch Worte eine positive Interaktion zu schaffen.

Ein Bespiel dafür, das Buchen einer Reise. Statt dem User einen Button zu präsentieren, auf dem „Jetzt Buchen“ steht sollten emotionale Worte angewendet werden und den User in erster Person Singular ansprechen. Aus „Jetzt Buchen“ resultiert somit „Buche jetzt deinen Traumurlaub!“.

Folglich muss der CTA-Button durch sein Design auffallen. Ein zentraler Aspekt hierfür ist die Größe. Aufgrund dessen, dass der CTA-Button die wichtigsten Aktionen vertritt, muss er im Gegensatz zu anderen UI-Buttons durch sein Verhältnis zum Viewport sowie anderen Elementen, auf sich aufmerksam machen. Jedoch muss darauf geachtet werden, dass er nicht zu groß erscheint und somit als ein Banner bzw. Bild verstanden wird.

Damit der CTA-Button nicht im Hintergrund untergeht ist die Farbgebung ausschlaggebend dafür, ob der Fokus auf den CTA-Button gerichtet sein wird. Deswegen sollte der Kontrast zum Hintergrund möglichst intensiv sein. Für gewöhnlich stechen CTA-Buttons durch ihre ausgefüllte Fläche hervor und erregen somit Aufmerksamkeit.

In Hinblick auf die Anzahl der CTA-Buttons ist dringlich zu berücksichtigen, dass sie nur einmal »pro Seite« auftreten sollten, da sie die wichtigsten Aktionen darstellen und somit mehrere CTA-Buttons sich gegenseitig stummschalten würden und dies den User dementsprechend verwirren würde.

Secondary Button

Secondary Buttons werden kontextuell als Alternative zu primären Buttons eingesetzt, um weniger kritische Aktionen zu bedienen. Dies bedeutet, dass sie oft als Begleiter der primären Buttons fungieren und dem User eine Auswahlmöglichkeit bieten.

Bezüglich der visuellen Gewichtung sollte der sekundäre Button weder mit dem primären noch mit dem CTA-Button konkurrieren. Dies ist ausschlaggebend für die Verständigung des Users, der ohne viel nachdenken zu müssen, verstehen sollte, dass es sich um eine alternative Auswahlmöglichkeit handelt und nicht um eine Hauptaktion.

Daher wird beim Design eines sekundären Buttons der Text mit einem Rahmen versehen und es wird auf eine Füllung verzichtet.

Tertiäre Button

Tertiäre Buttons stehen hierarchisch gesehen an vierter Stelle, nach den CTA-, primären und sekundären Buttons. Ihre Funktion beschränkt sich auf negative Alternativen für wichtige Schaltflächen. Demgemäß ist die visuelle Darstellung weniger auffällig. Aus diesem Grund werden tertiäre Buttons häufig als reine Texte bzw. Worte oder als graue Schaltflächen dargestellt.

Wenn es sich beispielsweise um das Versenden einer Datei handelt, würde der primäre Button für das „Senden“ stehen und der tertiäre Button die Möglichkeit schaffen den Prozess „abbrechen“ zu können.

Ghost Buttons

Ghost Buttons sind Schaltflächen ohne Farbfüllung, die ebenfalls als Alternative zu den wichtigen Buttons stehen. Ihre visuelle Darstellung ist, verglichen zu den anderen Buttons, minimalistischer Natur. Dies resultiert aus dem schlichten Design, welches hauptsächlich aus einem einfachen Rahmen besteht. Dementsprechend muss der Button im Kontrast zum Hintergrund stehen, da durch den minimalistischen Stil die Gefahr besteht, dass er kaum wahrgenommen wird.

Icon Buttons

Icon Buttons sind Symbole, die Inhalte vereinfacht grafisch darstellen. Durch Icon Buttons ist es möglich viele Informationen bzw. Aktionen auf eine kleine Fläche zu platzieren, welche im Gegensatz zu den restlichen Buttons besonders vorteilhaft ist, wenn es darum geht Platz zu sparen.

Jedoch muss allein durch das Design klar kommuniziert werden, was durch das Anklicken des Icon Buttons bewirkt werden soll. Für eine bessere Verständigung ist es möglich einen »Tool-Tipp« einzubauen, der dem User durch das „Hovern“ über dem Icon, deutlich erklärt, wozu der Button benutzt werden kann.

Text Buttons

Text Buttons sind, wie im Namen bereits erwähnt, Schaltflächen, die aus Text bestehen und klickbar sind. Eingesetzt werden sie für weniger wichtige Aktionen, wie "Zurück" oder "Mehr erfahren".

Floating Action Buttons (FAB)

Floating Action Buttons sind »Icon Only Buttons« (reine Icon Buttons), die »typischerweise […] unten rechts am Viewport platziert« sind. Aufgrund ihres oft integrierten Schattens erwecken sie den Eindruck, dass sie „schweben“. Im Bereich der Mobilen Geräte werden sie oft als primäre Buttons verwendet, die nur einer Aktion bestimmt sind. Ihre Funktion muss genau, wie bei Icon Buttons, klar verständlich sein.

Toggle Buttons

Toggle Buttons sind Schaltflächen, die eine »Doppelfunktion« darstellen. Abgebildet werden sie mit Hilfe von Text, Icons oder beidem zusammen. Ob ein Toggle Button aktiv ist oder nicht muss visuell klar verständlich sein. In der Regel werden inaktive Toggle Buttons mit einer grauen Fläche gekennzeichnet oder eingerahmt. Aktive Toggle Buttons werden, im Gegensatz dazu, mit einer gefüllten, farbigen Fläche hervorgehoben. Dies wird häufig bei „ON/OFF“ Toggle Buttons eingesetzt.

Dropdown Buttons

Dropdown Buttons werden im Zusammenhang mit Dropdown Menüs benutzt. Visuell sind sie unauffällig und schlicht, weswegen sie häufig als »Flat-Buttons« gezeigt werden. Eingesetzt werden sie, um Dropdown Menüs zu untergliedern und für Ordnung zu sorgen.

Nutzen von Buttons

Attribute von Buttons

Beim Designen eines Buttons gibt es mehrere, grundlegende Faktoren, diese sind abhängig von der Wichtigkeit des Buttons.

Zum einen ist die »einfache Identifikation« maßgebend dafür, ob der User sich schnell und einfach zurechtfindet. Ein negatives Beispiel hierfür wäre es einen CTA-Button unauffällig und unbedeutend darzustellen und einen Ghost Button groß und wichtig zu präsentieren.

Weiterhin ist eine »schnelle Auffindbarkeit« essenziell für ein erfolgreiches Button Design. Wäre ein primärer Anmeldebutton unten rechts abgebildet, könnte dies den Benutzer verwirren oder erst gar nicht darauf aufmerksam machen.

Hierarchie für das Design eines Buttons

Um die Signifikanz eines Buttons darzustellen, muss mit visuellen Attributen gearbeitet werden. Grundsätzlich gilt desto auffälliger ein Button desto wichtiger ist er.

Zustände und Reaktionen von interaktiven Buttons

Im UI-Button Design gibt es viele Möglichkeiten, wie gezeigt werden kann, dass mit dem Button interagiert wird. Zuallererst gibt es die »aktive Aktion«, bei der die Schaltfläche farbig ausgefüllt und somit signalisiert wird, dass der Button aktiv ist. Dies ist oft der Fall bei aktiven Toggle-Buttons. Im Vergleich dazu werden inaktive Buttons mit einer grauen Fläche gekennzeichnet, um zu zeigen, dass die Schaltfläche keine Wirkung hat.

Des Weiteren gibt es den Hover Zustand, bei dem sich der Button äußerlich verändert, indem man mit dem Cursor darüber "schwebt" (-hovern).

Hier kann sich die Farbe des Buttons ändern, ein Schatten hinzugefügt oder der Button vergrößert werden.

Eine weitere Möglichkeit ist visuell darzustellen, dass der Button angeklickt wird. Hierbei kann sich der Schatten des Buttons verkleinern oder die Farbe ändern.

Klares und eindeutiges Etikett

Beim Gestalten von UI-Buttons ist eine klare Kommunikation von höchster Wichtigkeit. Hiermit ist gemeint, dass der Button exakt das kommunizieren muss, was er bewirkt. Handelt es sich um eine Löschaktion reicht es nicht die negative Auswahl mit „Ja“ zu beschriften, sondern klar zu definieren, dass etwas „gelöscht“ wird.

Die Buttongestaltung

Buttons können viele, wenn nicht sogar eine beliebige Form haben. Seien es nun reiner Text (diese sind zwar Links, werden jedoch auch als Buttons gezählt) oder ausgefallene Formen wie Dreiecke. Der Gestaltung sind in dieser Hinsicht fast keine Grenzen gesetzt. Allerdings sollte man beachten, dass nicht jeder Button auch als ein solcher wahrgenommen wird. Wichtig ist es also, diese erkennbar zu machen. Nutzer haben erlernte Sehgewohnheiten, auf welche ein Gestalter zurückgreifen kann, um seine Absichten nicht erklären zu müssen. Natürlich sind diese Sehgewohnheiten stark von der Region und sogar dem Alter abhängig. Das heißt, jemand, der 1950 geboren ist, wird einen Button anders kennen, als jemand der 2000 geboren ist. Trotzdem können solche „Hürden“ durch eine gute, eindeutige Gestaltung überwunden werden.

Die gute Buttongestaltung...

Das wichtigste ist, dass die Gestaltung des Buttons zum Rest des Interfaces passen sollte. Ein konsistentes Design ist also nicht nur optisch sinnvoll, sondern trägt dazu bei, dass das Interface einfach zu verstehen ist.

Ein Standart-Button sieht in HTML 5, ohne CSS Gestaltung noch ziemlich einfach aus.

• Den Button in das Interface zu integrieren ist genauso wichtig wie seine Gestaltung. Das Padding und der Safe Space sollten also mit Hilfe eines Grids festgesetzt werden. Ein Grid ist nicht zwingend nötig, aber ist sehr hilfreich beim Interface-Bau. Hierbei kann die „red square method“ genutzt werden.

• Die Ausrichtung des Buttons sollte ausgeglichen sein. Das heißt: gleiche Abstände nutzen. 
  1. Es gibt die sogenannte „W“ Methode, welche als Hilfestellung für Abstände dient. Es sollte mindestens ein „W“ zwischen Inhalt und Buttonränder passen. Für die Seitenränder sollten zwei „W“s verwendet werden. Je kleiner die Abstände sind, desto schlechter kann der Inhalt gelesen werden!
  2. Der Platz um den Button sollte auch beachtet werden. Bei mehreren Buttons sollte jeder Button seine eigene „sichere Zone“ haben, also „Weißraum“ oder „Platz zum Atmen“.

• Die Größe sollte nicht zu klein sein, denn dann fällt der Button eventuell nicht auf und kann schwerer auf Touchgeräten bedient werden. Für mobile Geräte kann man von ungefähr 50 Punkten Höhe und einer Breite die mindestens oder mehr als die Höhe beträgt ausgehen. Dies macht den Button gut bedienbar. Wichtig: Zu kleine Buttons führen bei Nutzern zu Frustration. Dieses iPhone 12 Mockup zeigt, wie die Buttongröße auf dem Smartphone aussieht. Links ist die Mindestanforderung für einen guten Button zu sehen.

• Ränder sollten mit dem Rest des Interfaces übereinstimmen. Es sollten jedoch keine gerundeten Ecken oder scharfe Kanten miteinander gemischt werden, denn das führt zu einer inkonsistenten Gestaltung. Der Nutzer kann Schwierigkeiten bekommen, die Inhalte zu verstehen. Mit Absicht kann diese Gestaltung jedoch auch gut wirken, sollte jedoch mit Bedacht eingesetzt werden. 

• Die Sichtbarkeit sollte gewährleistet sein. Buttons müssen auf verschiedenen Hintergründen gut funktionieren und dabei einen höheren Kontrast und eine gute Sichtbarkeit besitzen. Visuelle Auffälligkeit ist gewünscht.
• Auch mit der Schrift sollte gearbeitet werden. Sie trägt viel dazu bei, dass Buttons auffallen und ihre Funktion deutlich kommunizieren.
• Starke Kontraste wie Schwarz und Weiß sollten durchdacht und bewusst gewählt werden, da sie sofort auffallen und die Aufmerksamkeit auf sich ziehen.
• Schwache Kontraste können mitunter auch nicht von jedem Nutzer erkannt werden, es ist wichtig Buttons so zu gestalten, dass auch Nutzer mit Sehbeeinträchtigungen keine Probleme haben diese zu erkennen.
• Buttons sind also ein Zusammenspiel aus Farben, Schrift und Form. Auf alles sollte geachtet werden, um eine möglichst funktionale und visuell ansprechende Gestaltung zu erreichen.

• Rund ist nett! Runde Buttons wirken freundlicher, als eckige. Jedoch sollte dabei auf eine gute Gestaltung geachtet werden. Wenn darüber oder darunter Texte platziert werden, wirken sie schnell so, als würden sie aus der Reihe tanzen. Texte müssen an die Buttons angepasst werden, damit sie in "einer Linie" stehen.

• Buttons sollten auch mit dem Hintergrund im Einklang sein, das bedeutet, dass Abstände und Gestaltungsmittel wie Schatten oder runde Ecken, auch mit dem Hintergrund in Einklang sind. Hat der Hintergrund also gerundete Ecken, sollte der Button dieselbe Rundung haben und keine beliebige. Dies gilt auch für die Schattierung oder Ränder!

• Buttons sollten da sein, wo man sie erwartet. Sie sollten also Hierarchisch angeordnet sein. Hier kann man nach der Regel „das wichtigste kommt zum Schluss“ arbeiten. Beim Scannen der Seite stolpert der Nutzer sonst direkt am Anfang über das wichtigste Element und springt immer wieder hin und zurück.

Links sollten gut gestaltet werden. Sie müssen aus dem normalen Fließtext oder dem Interface durch Farbe, sowie Textgestaltungsmittel (unterstrichen, fett oder kursiv) hervorstechen. Allerdings ist zu vermeiden, statische Elemente (ohne Funktion) wie Links aussehen zu lassen. 

Zusätzlich können Buttons mit Icons verbunden werden. Wenn das gut gemacht ist, sorgt es für eine auffallendere, elegantere Gestaltung. Die Nutzer sind gewillter die Buttons zu nutzen, wenn diese unterstützende Icons haben und sie sich vom Hintergrund abheben (z.B. durch Licht/Schatten) .

Die Gestaltung von Buttons macht viel auf einer Webseite aus. Vom Call-to-Action-Button bis hin zum Tertiary-Button sollte sich wohl überlegt werden, was diese kommunizieren sollen und wie dies am besten umgesetzt werden kann.

Auffälliger bedeutet jedoch nicht immer besser! Das heißt, angepasste Gestaltung ist das Wichtigste.

Just because you can, doesn't mean you should...

So sollte ein Button eher nicht aussehen. Die Gestaltung in CSS setzt fast keine Grenzen, aber sie sollte durchdacht sein.

Für eine gut gestaltete Webseite gilt, dass auch die Buttons zusammenpassen sollten. Das heißt, jeder Button sollte Gemeinsamkeiten mit den anderen Buttons auf der Webseite haben.

Wenn beispielsweise hauptsächlich mit gerundeten Ecken gearbeitet wird, sollte dies beibehalten werden. Dies gilt auch für Form und Farbe.

Fazit

Zusammenfassend kann gesagt werden, dass es einige Aspekte gibt, die beim Design eines UI-Buttons zu berücksichtigen sind. Diese Aspekte sind jegliche Attribute, die sich auf die Nutzbarkeit der Buttons beziehen. Buttons sollten, unabhängig von dem Endgerät, vom User bedient werden können. Das heißt, Sichtbarkeit, sowie Größe sind essentiell. Ein letzter, wichtiger Gestaltungsaspekt ist die korrekte Platzierung auf dem Viewport.

Die Aussage des Buttons (Text bzw. Beschriftung) sollte unmissverständlich sein.

Um einen erfolgreiches Buttondesign zu erreichen, sollten all die oben genannten Punkte miteinbezogen werden.

Quellenverzeichnis

Button Historie

1. Howe, Denis: button. URL: https://foldoc.org/button. (15.04.2023).

2. Powers, Micah: The Power of Touch – The Evolution of Button Design. URL: https://www.toptal.com/designers/ui/button-design (15.04.2023).

Button Typen

1. Bereitgestellte Lektüre von Prof. D. Gerbaulet. Kapitel "Buttons".

2. Europe Component Library: Buttons. URL: https://ec.europa.eu/component-library/ec/components/button/usage/#:~:text=Primary%20button%20is%20designed%20for,distinguishable%20from%20the%20secondary%20button. (15.04.23).

3. Babich, Nick: Primary & Secondary Action Buttons. URL: https://uxplanet.org/primary-secondary-action-buttons-c16df9b36150 (15.04.2023).

4. Awaken: 9 Rules of an effective Call to Action (CTA). URL: https://awkn.pro/en/9-zasad-skutecznego-call-to-action-cta/ (15.04.2023).

5. THIEP: Buttons-Gestaltung. Platzierung und Nutzen. URL: https://www.mosaiq.com/de/magazin/buttons-gestaltung-platzierung-und-nutzen (15.04.2023).

6. Tajima, Ser: Getting to know Button and Links. URL: https://medium.com/@seratajima/getting-to-know-buttons-links-20bc22f2100e (15.04.2023).

7. Babich, Nick: Buttons in UI Design: Four Common Styles. URL: https://uxplanet.org/buttons-in-ui-design-four-common-styles-f6bd02468388 (15.04.2023).

8. IBM Design Language: UI Icons. URL: https://www.ibm.com/design/language/iconography/ui-icons/usage/#sizing (16.04.2023).

9. Thomas: 8 Vor- und Nachteil von Ghostbuttons auf ihrer Website. URL: https://attentioninsight.com/8-pros-and-cons-of-ghost-buttons/ (16.04.2023).

10. UI UX Design: UI Buttons/Types of UI Buttons. Tried and Tested for 2023/Button Design. URL: https://codetheorem.co/blogs/types-of-ui-buttons#:~:text=Different%20types%20of%20UI%20Buttons,%2C%20Share%20button%2C%20Raised%20buttons. (15.04.2023).

Nutzen von Buttons

1. Bereitgestellte Lektüre von Prof. D. Gerbaulet. Kapitel "Buttons".

2. Potechin, Tatjana: UX-Guide fürs Button-Design-Struktur&Gestaltung Relevanter CTAS. URL: https://www.seowerk.de/news/ux-guide-fuers-button-design-struktur-gestaltung-relevanter-ctas/  (15.04.23).

3. Babich, Nick: Primary & Secondary Action Buttons. URL: https://uxplanet.org/primary-secondary-action-buttons-c16df9b36150 (15.04.2023).

Die Buttongestaltung

1. Bereitgestellte Lektüre von Prof. D. Gerbaulet. Kapitel "Buttons".

2. Bakusevych, Taras. Button Design — UI component series. URL: https://www.toptal.com/designers/ui/button-design (24.04.2023).