edgy circle Logotype Robuste Webprojekte Das kleine Handbuch für WebentwicklerInnen
edgy circle Logotype

Robuste
Webprojekte

Das kleine Handbuch für WebentwicklerInnen

Autor: David Strauß

Buttons

Primär und Sekundär Buttons mit neutralen, aktiven und deaktivierten Zuständen.

Bei einem Button ist, wie bei einem Link, die Sichtbarkeit enorm wichtig. Er ist jedoch komplexer, da es noch weitere Zustände gibt, in denen er sich befinden kann. Buttons sind im Gegensatz zu Links mit einer bestimmten Aktion verbunden. Deswegen ist es wichtig, dass du deine Buttons so gestaltest, dass sie die Benutzer und Benutzerinnen dazu bewegen sie zu drücken. Wenn du das schaffst werden zum Beispiel mehr Personen auf den Jetzt kaufen Button drücken.

Apple hat sein Mobiles Betriebssystem iOS in der Version 7 grafisch stark überarbeitet. Eine der größten Änderungen gab es bei den Buttons. Meiner Meinung nach leider in die falsche Richtung. In iOS 7 werden Buttons teilweise nur noch als einfacher Text dargestellt. Die daraus resultierende Ähnlichkeit mit "normalem" Text erschwert es Dir zu erkennen, was Du drücken kannst.

Du kannst das in deinen Projekten wesentlich besser machen, indem Du Buttons wie gewohnt eine Hintergrundfarbe gibst. Zusätzlich kannst Du ihnen noch eine Umrandung, abgerundete Ecken oder Schatteneffekte geben, damit sie besser sichtbar sind.

Die zwei bekanntesten Zustände eines Buttons sind dieselben wie bei einem Link. Der neutrale Zustand, der zur Verwendung einladen soll, und der aktive, der angezeigt wird, wenn Du mit deiner Maus über den Button fährst.

Zusätzlich kann ein Button noch einen deaktivierten Zustand haben der symbolisiert, dass Du den Button im Moment nicht betätigen kannst. In Formularen ist das zum Beispiel sinnvoll, wenn du verhindern willst, dass es jemand abschickt bevor alle benötigten Felder ausgefüllt sind.

Neben den drei Zuständen neutral, aktiv und deaktiv gibt es in den meisten Webprojekten auch Sekundär-Buttons. Für Aktionen die wir uns von den Benutzern und Benutzerinnen wünschen, werden Primär-Buttons verwendet. Beispiele hierfür sind Aktionen wie ein Kontaktformular abschicken oder einen Blogbeitrag speichern.

Sekundär-Buttons werden für Aktionen verwendet, die nicht so häufig passieren oder nicht gewünscht sind, aber trotzdem möglich sein sollten. Einen Vorgang abbrechen oder etwas löschen sind dafür typische Beispiele. Wie auch bei einem Primär-Button gibt es auch hier die drei Zustände neutral, aktiv und deaktiv. Und natürlich sollte auch ein Sekundär-Button gut sichtbar und als solcher erkennbar sein. Damit jedoch die Hierarchie zwischen Primär- und Sekundär-Button klar erkennbar ist, solltest Du unterschiedliche Farben und Farbsättigungen verwenden.

Alternativ kannst Du auch einen Link als Sekundär-Button verwenden. Wenn Du Dich für diese Variante entscheidest, solltest Du unter Umständen trotzdem einen Button verwenden der nur so wie ein Link aussieht, damit die Semantik korrekt bleibt.

Icons können Buttons optisch aufwerten und zu einem besseren Verständnis führen. Ich rate Dir aber davon ab Icons als alleinige Beschriftung zu verwenden, denn ohne Text ist es schwierig zu wissen für was genau ein Icon steht, daher beschrifte Buttons immer mit Text und werte sie optional mit einem passenden Icon auf.