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

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

Dieses Feld dient zur Validierung und sollte nicht verändert werden.
  |  
Die KI-Revolution wurde am 30.11.2022 durch die Veröffentlichung des populärsten KI-Chatbots „Chat-GPT“ weltweit eingeleitet, welcher auf einem Large Language Model basiert und innerhalb kürzester Zeit mehrere 100 Millionen Nutzer gewinnen konnte.
Weiterlesen
  |    |  
Ab 28. Juni 2025 müssen Webseiten und Apps laut Barrierefreiheitsstärkungsgesetz barrierefrei sein, indem sie unter anderem Leichte Sprache nutzen, um für alle zugänglich zu sein.
Weiterlesen
  |  
Auf der Suche nach einem benutzerfreundlichen und vielseitigen Design-Tool bist du sicherlich bereits auf Canva aufmerksam geworden. Canva hat zweifellos die Designlandschaft verändert und bietet eine beeindruckende Plattform für kreative Bearbeitungen.
Weiterlesen
  |  
Gender-Star, Gender_Gap und Binnen-I – was auf den ersten Blick kompliziert klingt, ist ein Schritt in eine gleichberechtigte Zukunft. Ob […]
Weiterlesen
  |  
Überwinde deine Schreibblockade Als Texter:in oder Content Creator hast du einen wichtigen Job: Du bringst Ideen und Gedanken auf Papier […]
Weiterlesen
  |  
10+1 Anwendungen, wie ChatGPT bei der Erstellung von SEO-Content hilft Seit November 2022 ist ChatGPT als Forschungsvorschau für die Öffentlichkeit […]
Weiterlesen
  |  
Was sind saisonale Suchbegriffe?  Es ist kurz vor Weihnachten: Die Feiertage stehen vor der Tür und die letzten Geschenke landen […]
Weiterlesen
  |  
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 für soziale Medien zu erstellen, ist im Grunde genommen gar nicht so schwierig. Willst du die Reichweite deiner […]
Weiterlesen
Kontakt
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram