Buttons|Komponenten

BUTTONS

Ein Button soll für Besucher klar zugänglich und schnell verständlich sein. Hierbei muss man auf Farbe, Layout und den enthaltenen Text achten. Der User soll auf den ersten Blick verstehen, wohin der Button führt oder was er bewirkt. Der Text sollte im besten Fall nicht mehr als zwei Wörter enthalten und einen starken Kontrast zum Hintergrund haben, um eine gute Lesbarkeit zu gewährleisten. Für eine gute User Experience sollte die Wichtigkeit des Buttons verständlich sein. Das schaffen wir mit verschiedenen Varianten.

Call-to-action

Der Call-to-action Button hat die höchste Priorität und muss in der visuellen Hierarchie Vorzug haben. Er wird meistens benutzt, um die Konversion zu steigern und wird dort platziert, wo möglichst viele Klicks generiert werden können.

Primär Button

Buttons mit einer hohen Priorität können genauso wie Call-to-action-Buttons gestaltet sein. Mit einem Primär Button helfen wir dem User Vorgänge zu verstehen, wie z.B. Speichern, Absenden, Starten. Dieser Button sollte deutlich stärker ins Auge fallen, als der Sekundär Button.

Sekundär Button

Ein sekundärer Button sollte weniger auffällig gestaltet werden. Er wird meistens für alternative Handlungen benutzt, wie z.B. "Abrechen", "Zurück".

Button mit Icons

Um die Funktionen zu unterstreichen, benutzen wir Button mit Icons. Unser Auge nimmt Icons schneller wahr als Text. Ist beispielsweise ein Mülleimer Icon zu sehen, wissen wir, dass dieser Butten zum Löschen des Inhalts führt. Mit Hilfe von "Double Coding" (Text und Icon), sorgt man für ein besseres und schnelleres Verständnis. Diesen Button nutzen wir für Handlungen, wie "Kontakt", "Bearbeiten" und "Löschen".

Text Button

Text Buttons sind verlinkte Wörter und werden für weniger ausgeprägte Aktionen verwendet. Hiermit wollen wir darauf aufmerksam machen, dass bei Bedarf mehr Informationen zu einem bestimmten Thema zu finden ist.

Icon Button

Icon Buttons finden wir meistens in Mobilen Anwendungen. Hier ist es wichtig, nur Icons zu benutzen, die wiedererkennbar und auch ohne Text verständlich sind.

Button States

Hover Mit Hover-Status wird symbolisiert, dass der Button genau jetzt klickbar ist. Das kann für manche User eine Motivation sein, 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. Sobald er loslässt, zeigt sich der active Status. Ob beide, nur einer, oder keiner dieser Status notwendig ist, 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 werden.

Weitere Komponenten

UI Einstieg

Module

Eingabefelder

Auswahlfelder

Navigation

Sonstige Komponenten