UX-Guide fürs Button-Design – Struktur & Gestaltung relevanter CTAs

| | 07. Oktober 2021
Allgemein | Design | User Experience

Klickst du noch ganz richtig? – Natürlich, mit durchdachten Call to Actions!
Ob auf Mobile oder Desktop, ohne Interaktionsfelder würde das Web in großen Teilen zum Stillstand kommen. Demnach gehören Buttons zu den wichtigsten Elementen eines Webauftritts. Nicht nur sorgen sie für eine intuitive Navigation, sondern machen auf mögliche Aktionen aufmerksam.

Call to Actions vielfältig & nützlich einsetzen

Buttons gibt es in den unterschiedlichsten Ausführungen; Größe, Form und Farbe variieren je nach Design des Webauftritts und tragen zu einem wiedererkennbaren Markenbild bei.

Trotz des vermeintlich spielerischen Looks sollte die Konzeption eines Button-Sets durchdacht sein, sodass deren Funktion in keinem Fall beeinträchtigt wird. Die folgenden Richtlinien bieten eine kleine Orientierungshilfe, um grundlegende Konzeptionsansätze einer guten Usability erfolgreich zu realisieren.

1. Nutzungsprinzipien von Buttons im Web

Buttons werden im gesamten Webauftritt gestreut. Unter anderem erscheinen sie in Verbindung mit Formularen, Inputfeldern, Dialogfenstern, Toolbars oder als Verlinkung. Um die vorgesehenen Aktionen an den richtigen Stellen zu kommunizieren, sollte ein Button diese Attribute besitzen:

  • Einfache Identifikation
  • Schnelle Auffindbarkeit
  • Reaktionsfähigkeit

2. Hierarchie für das UX-Design von Buttons

Die hierarchische Ordnung von Interaktionselementen besteht aus drei Gruppen. Diese bestimmen die Relevanz einer Aktion und demzufolge deren visuelle Gewichtung.

Aktionen mit einer hohen Gewichtung, also besonders wichtige Buttons, sollten auffälliger gestaltet, jedoch nur sehr sparsam eingesetzt werden. Diesem primären Button sollten sich die restlichen mit mäßiger oder geringer Relevanz unterordnen. Somit wird den Nutzer:innen auf einen Blick klar ersichtlich, wo die Gewichtung und Aufmerksamkeit zuerst liegen soll.

Material Design Hierarchiemodell (Quelle: https://material.io/components/buttons#hierarchy-and-placement)

3. Unterschiedliche Button-Typen & ihr Einsatz

Hauptsächlich wird zwischen vier Kategorien unterschieden. Folgende Button-Typen werden dabei häufig verwendet:

  1. Textbuttons (geringe Relevanz)
  2. Umrandete Ghostbuttons (mäßige Relevanz)
  3. Gefüllte Buttons (hohe Relevanz)
  4. Toggles (Umschalten zwischen mehreren Aktionen)

Daneben gibt es noch weitere Varianten wie beispielsweise den Floating-Action-Button oder den Radio-Button, auch Optionsfeld genannt.

Material Design Buttontypen (Quelle: https://material.io/components/buttons#hierarchy-and-placement)

4. Zustände & Reaktionen von interaktiven Buttons

Die sogenannten States definieren Reaktionen, die Buttons an die Nutzer:innen zurückgeben, sobald mit ihnen interagiert wird. Je nach Interaktion wird also ein anderes, meist visuelles, Feedback sichtbar. Dabei wird nach folgenden fünf States unterschieden:

  1. Enabled (Aktive Aktion)
  2. Disabled (Deaktivierte Aktion)
  3. Hover (Cursor "schwebt" über dem Button)
  4. Focused (Keyboard-Elemente werden zum Button geleitet)
  5. Pressed (Zustand beim Klicken)
Material Design States eines gefüllten Buttons (Quelle: https://material.io/components/buttons#hierarchy-and-placement)

5. Buttons barrierefrei designen

Um eine barrierefreie Interaktion für den Großteil der Nutzer:innen zu gewährleisten, dürfen Buttons nicht zu klein dargestellt werden. Vor allem auf mobilen Geräten sollten sie sich mit dem Finger leicht bedienen lassen.

Generell gilt, dass die Buttonhöhe zwischen 42px und 72px liegen sollte, um eine verlässliche Interaktionsoberfläche zu bieten. Demnach wird gerne ein Durchschnittswert von etwa 60px verwendet.

6. Buttons mit Blick auf CI gestalten

Die definierten Buttons sind ebenso wie Logos, Icons oder Schriften Teil eines ganzheitlichen Markenbildes. Ihre Gestaltung sollte sich daher an der Corporate Identity (CI) orientieren. Dazu können diese drei Aspekte angepasst werden:

Farbe

Die Farben sollten den CI-Farben entsprechen oder entlehnt sein. Dabei ist zu beachten, dass die gewählte Farbe nicht den Anschein macht, dass der Button inaktiv ist.

Form

Für Buttons mit Text ist in der Regel die rechteckige Form zu nutzen. Hierbei können die Ecken unterschiedlich stark abgerundet werden. Ein Stil sollte dann jedoch auf das ganze Button-Set übertragen und konsequent angewendet werden.

Typografie

Ebenso wie die Farben sollte die Schrift der Buttons auf die CI abgestimmt sein oder eine zur Hausschrift passende gewählt werden. Zu beachten ist dabei, dass der Schriftschnitt sich von dem des Fließtextes etwas unterscheiden sollte. Das leisten beispielsweise Großbuchstaben und kursive oder fette Schnitte. Dadurch differenziert sich das Interaktionsfeld nochmals und wird als solches klar ersichtlich.

Mit Button-Design intuitive Interaktionen & zufriedene Nutzer:innen erreichen

Unter Berücksichtigung dieses Grundgerüsts entfalten Buttons ihr volles Potenzial auf dem User Interface (UI): Durchdachtes Button-Design schafft eine Benutzeroberfläche, auf der sich User:innen intuitiv zurechtfinden bzw. Aktionen barrierefrei aufrufen können. Das steigert die Usability der Website, was sich positiv auf den Rankingfaktor Nutzungsverhalten auswirkt.

Von Buttonkomponenten bis zum ganzheitlichen Interface – Digitalprojekte konzipieren wir im seowerk mit Fokus auf die künftigen Nutzer:innen. Dadurch stellen wir sicher, dass alle Prozesse einfach zu verstehen und erreichen sind. Die Expertinnen und Experten unserer Agentur für Grafik-Design und Suchmaschinenoptimierung beraten gerne zu Möglichkeiten der UX-Optimierung und der dadurch möglichen Conversion- und Sichtbarkeitssteigerung.

Kostenlose Erstberatung!

*“ zeigt erforderliche Felder an

Einwilligung*
Dieses Feld dient zur Validierung und sollte nicht verändert werden.
That must be interesting!
Die seowerk News halten jede Woche interessante Beiträge, rund um die Themen SEO, SEA, Social Media, Storytelling, UX und vieles mehr für Sie bereit.

*“ zeigt erforderliche Felder an

Einwilligung*
Dieses Feld dient zur Validierung und sollte nicht verändert werden.
  |    |  
Kürzlich ist eine Alternative zur Suchmaschine Google erschienen. Neeva heißt der neue Suchdienst, der Suchen ohne Werbung und Tracking verspricht. In diesem Beitrag möchten wir Euch die neue Suchmaschine vorstellen und erklären, warum SEO gerade auf Neeva so wichtig ist.
Weiterlesen
  |    |  
Menschen mögen den Komfort des hybriden Shoppings Die Kluft zwischen Online- und Offline-Handel zu überwinden, stellt viele Händler:innen vor neue […]
Weiterlesen
  |    |  
Was ist lokale Suchmaschinenoptimierung? Lokale Suchmaschinenoptimierung (Local SEO) ist ein Aufgabenbereich der klassischen Suchmaschinenoptimierung. Ziel ist es, lokale sowie regionale […]
Weiterlesen
  |    |  
Was bedeutet Omnichannel-Marketing? Der Begriff Omnichannel heißt übersetzt soviel wie "alle Kanäle". Das bedeutet, dass ein Unternehmen Kund:innen kanalübergreifend anspricht […]
Weiterlesen
Eine Infografik zu erstellen, ist im Grunde genommen gar nicht so schwierig. Willst du die Reichweite deiner Botschaft jedoch steigern, […]
Weiterlesen
  |    |  
Ein Marken-Styleguide, auch bekannt als Brand Guidelines oder Gestaltungsrichtlinien, ist der Kern einer Marke. Er vereint auf visuelle Weise Mission, […]
Weiterlesen
  |    |  
Was versteht man unter "Suchintention"? Die Suchintention (Search Intent) meint die Absicht des Nutzers, eine Suchanfrage zu stellen. Dabei unterscheidet […]
Weiterlesen
  |    |  
Die sozialen Medien sind zum Hauptort für die eigene Markenpräsentation geworden. Sie helfen, die Werte und Markenbotschaften einem breiten Publikum zu eröffnen.
Weiterlesen
  |    |  
Kostet Instagram bald Geld? Wofür man jetzt bezahlen kann Bereits bei zehn Influencer:innen wird ein neu eingeführtes Abo-Modell für Instagram […]
Weiterlesen
  |    |    |    |  
UX: Was ist das eigentlich? UX – kurz für User Experience – beschreibt die Eindrücke und Erlebnisse, die bei einem […]
Weiterlesen
  |    |  
Änderungen nicht nur bei Facebook US-Abgeordnete und ein Senator bringen ein Gesetz gegen die Targeting-Praxis der Tech-Konzerne auf den Weg. […]
Weiterlesen
  |    |  
Zwölf Nullen und kein Ende Nachdem der Börsenwert von Apple erst im August 2019 die erste Billionen-Marke gerissen hat, verdreifachte […]
Weiterlesen
Kontakt
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram