Buttons
Buttons sind elementarer Bestandteil des User Interaction Designs, der zu einer Aktion des Anwenders führt. Er spielt eine wesentliche Rolle in der Kommunikation zwischen dem Benutzer und dem Interface. Das Betätigen eines Buttons setzt ein Gerät, Fahrzeug oder System in Bewegung. Selbst wenn der Benutzer die dahinter liegende Komplexität nicht versteht, haben Buttons eine magische Anziehungskraft und faszinieren Benutzer immer wieder auf's Neue.
Buttons, die wie Buttons aussehen
Wie verstehen Anwender, ob ein Designelement interaktiv ist oder nicht? Sie orientieren sich an gelernten, visuellen Merkmalen um die Bedeutung eines Elements für sich zu interpretieren. Digitale Buttons sind die Nachkommen physischer Buttons – also Knöpfen oder Tasten. Daher ist es wichtig, visuelle Hinweise zu verwenden, um die Interaktivität einer Benutzeroberfläche hervorzuheben. Ist dem Benutzer nicht klar, welche Bereiche anklickbar sind, spielt es keine Rolle, wie ästhetisch das Design ist. Wenn die Anwendung nicht intuitiv zu benutzen ist, wird der Benutzer sie sofort verlassen. Bei mobilen Endgeräten ist das Herausstellen von Buttons nochmals wichtiger. Im Gegensatz zur Arbeit am Rechner, an dem man mit Hilfe der Maus überprüfen kann, welche Elemente anklickbar sind, ändert sich der Status interaktiver Elemente auf mobilen Devices nicht.
Buttons oder Links
Buttons bestimmen Aktionen, die Benutzer ausführen können. Sie werden oft in UI-Elementen wie Dialogfeldern, Formularen oder Hero-Sections platziert. Links werden hingegen verwendet, um zu navigieren oder den Kontext zu wechseln.
Deaktivierte Buttons
Uns allen ist die Situation bekannt, in der wir unsere Aktion nicht weiter ausführen können, da ein deaktivierter Button unseren Fortschritt verhindert. Dieses Verhalten findet sich besonders häufig bei verschiedenen Formularstrecken (Bestellung, Anmeldung, Registrierung usw.). So wird in der Regel verdeutlicht, dass der Anwender nicht fortfahren kann, weil benötige Informationen fehlen. Selten aber verstehen Anwender den Grund der Deaktivierung eines Bedienelementes, sondern empfinden das Verhalten als generelles Hindernis, manchhmal sogar als Fehler. Um solchen Situationen entgegenzuwirken wird ein „aktiver“ Button dargestellt, der jedoch erst dann eine Aktion ausführt, wenn die für die Ausführung notwendigen Informationen vorliegen. Eine Benchrichtigung zu auszufüllenden Eingabefeldern weist den Benutzer auf die noch benötigten Informationen hin.
Verschiedene Ziele, unterschiedliche Buttons
Die Auswahl des richtigen Stils für einen Button ist vom Zweck abhängig. Wenn dem Benutzer beispielsweise eine Aktion überall zu Verfügung stehen soll, wird häufig ein Floating Action Button verwendet.
Ein besonders hervorzuhebender Button ist ein Button hinter dem Handlungsanforderungen steht (Call to Action, CTA). CTA-Buttons haben einen großen Einfluss auf ihre Nutzungsrate und werden daher häufig als prominentestes Element der Benutzeroberfläche angesehen.
Stile
Der Stil eines Buttons hilft dem Benutzer, die Wichtigkeit der Aktion zu verstehen und eine Hierarchie in der Auswahl von Aktionen zu erkennen. Es ist daher ratsam, zwischen interaktiven und nicht interaktiven Elementen in Form und Farbe zu differenzieren, um Schwierigkeiten bei der Entscheidung entgegenzuwirken, welche Aktion auf dem jeweiligen Screen ausgeführt werden kann.
Konsistenz in allen Stilen der Buttons unterstützt ein positives Nutzerlebnis, vermeidet Fehler durch missverständliche Interpretationen und lässt den Nutzer zügiger durch die Anwendung navigieren. Daher ist es zwingend notwendig, das Aussehen aller Buttons zu vereinheitlichen.
Don't make me think
Im Buch „Don't make me think“ von Steve Krug spricht der Autor über die Bedeutung eine Bedienoberfläche so zu gestalten, dass der Benutzer seine Aufgaben intuitiv erfüllen kann. Jahrelange Erfahrung hat Benutzer dazu gebracht, eine gewisse Erwartung an Buttons zu entwickeln. Verwirrung und Fehler in der Bedienung sind nicht zu vermeiden, wenn man dieser Erwartung nicht gerecht wird.
Saubere Interaktion
Das Betätigen eines Buttons muss eine bewusst gewählte und simple Interaktion sein. Versehentlich oder schwer anklickbare Buttons führen zu einem schlechten Nutzungserlebnis und Frustration. Daher sollte je nach Endgerät auf eine ausreichend große Dimensionierung geachtet werden.
Barrierearmut
Barrierearmut sollte generell für jede Komponente überprüft werden. Dabei ist die Größe eines Buttons einer der Faktoren, die die Zugänglichkeit beeinflussen. Weitere Faktoren sind Schriftgröße, Farbe und Kontrast. Es gibt viele Hilfsmittel mit denen sich die Accessability von UI-Elementen untersuchen lässt – beispielsweise webaim.org/resources/contrastchecker, coolors.co/contrast-checker oder Sketch Plugin "Stark".
Labels
Wie Buttons beschriftet sind, ist ebenso wichtig wie deren Aussehen. Ein missverständlich beschrifteter Button kann den Benutzer verwirren oder zu Fehlern in der Bedienung führen. Buttons sollten Benutzer zum Aufsühren einer Handlung einladen. Daher eignen sich vor allem Verben als Label für Buttons, die die hinterlegte Aktion beschreiben. Die Verwendung von „Ja“ oder „Nein“, oder allgemeinen Bezeichnungen wie „Weiter“ führt potenziell zu Verwirrung.
Testen und experimentieren
Unsere Erfahrung zeigt, dass es der beste Weg ist, die geeignete Größe eines Buttons zu definieren, sich Gedanken über die Umgebung zu machen, in der die Anwendung benutzt wird. Wenn sich Benutzer beispielsweise in Bewegung befinden (Fitness-App, Navigations-App) sollten Buttons größer als gewohnt ausfallen. Wenn wir den geeignetsten Platz für einen Button finden wollen, bekommen wir unsere Antwort mit Hilfe von A/B Tests.