Was ist ein CTA-Button? Einen guten Call to Action gestalten

Kurz gesagt

CTA ist die Abkürzung des englischen call to action, auf Deutsch Handlungsaufforderung. Es ist das Element auf einem Screen, das den Schritt trägt, den der Nutzer gehen soll: „In den Warenkorb“, „Angebot anfordern“, „Konto erstellen“.

Vier Dinge bestimmen einen CTA-Button: Text, Gewicht auf dem Screen, Größe und Position. Auch Farbe ist wichtig, aber nicht aus dem Grund, den man vermutet. Das erzähle ich unten am Mythos vom „roten Button“.

Buttons sind für Aktionen. Jakob Nielsens Regel ist klar: Nutzen Sie Buttons nicht zur Navigation, für den Wechsel zwischen Seiten nehmen Sie Links.

Der Buttontext: Handlung und Objekt

Der Buttontext sagt, was beim Drücken passiert. Anna Kaley von NN/g empfiehlt, dass Befehle mit einem Verb oder einer Verbgruppe beginnen, die beschreibt, was passiert. Ist das Verb allein unklar, kommt ein Objekt dazu: statt „Löschen“ „Ordner löschen“.

Im Deutschen stehen bei Buttons oft Infinitiv oder Nominalform: „Ordner löschen“, „Adresse speichern“, „In den Warenkorb“. Die Regel bleibt: Schreiben Sie die Handlung und worauf sie sich bezieht.

Kaley begrenzt den Text auf 2 bis 4 Wörter. Auch Nielsen verlangt kurze Buttonlabels mit höchstens 4 Wörtern. Apples Beispiel geht in dieselbe Richtung: für einen Button, der einen Artikel in den Warenkorb legt, „Add to Cart“.

Statt	Schreiben Sie	Warum
Hier klicken	Katalog herunterladen	Was passiert, ist klar.
Senden	Angebot anfordern	Sagt, was der Nutzer bekommt.
OK (Löschbestätigung)	Adresse löschen	Ein ungelesen gedrücktes „OK“ kostet Daten.
Weiter	Weiter zur Zahlung	Der nächste Schritt hat einen Namen.

Nutzen Sie in Bestätigungsfenstern kein „OK“. Laut Kaley drücken Nutzer es aus Gewohnheit, ohne zu lesen. Auch Nielsen empfahl 2008, Buttons Namen wie „Speichern“ zu geben, die sagen, was sie tun.

Das GOV.UK Design System verlangt, dass der Buttontext die Aktion des Buttons beschreibt. Das Beispiel ist „Save and continue“: Speichert der Dienst die Angaben, dieses Label, sonst nur „Continue“. Laut Kaley soll ein Befehl, der an mehreren Stellen vorkommt, überall mit demselben Text und an ähnlicher Position stehen.

Auf Buttons nutze ich die kurze Form ohne Anrede: „In den Warenkorb“, nicht „Legen Sie es in den Warenkorb“. Auch wenn ich Leser im übrigen Text sieze, gewinnt auf dem Button das Kurze. Für die übrigen Mikrotexte schauen Sie in den Ratgeber zu UX Writing.

Visuelle Hierarchie: primärer und sekundärer Button

Auf einem Screen gibt es eine Hauptaktion, und sie ist der auffälligste Button. GOV.UK schreibt es klar: Vermeiden Sie mehr als einen Hauptbutton pro Seite. Die Begründung: Mehrere Hauptaktionen schwächen jede einzelne und machen es schwer zu wissen, was als Nächstes zu tun ist.

Auch Apple begrenzt auffällige Buttons auf einen oder zwei pro Ansicht. Viele auffällige Buttons erhöhen die kognitive Last, der Nutzer denkt länger nach, bevor er wählt.

• Bestellung abschicken

  Primär. Die Hauptaktion des Screens. Gefüllt und am auffälligsten. Davon gibt es einen pro Screen.

• Zurück zum Warenkorb

  Sekundär. Ein gültiger, aber seltener gewählter Weg. Umrandet, ohne Füllung.

• Ich habe einen Gutscheincode

  Tertiär. Eine selten genutzte Aktion oder eine, die auf eine andere Seite führt. Steht als Link da.

Die sekundäre Aktion verschwindet nicht, sie tritt nur zurück. Laut Nielsen soll der am häufigsten gewählte Button der Standard sein und hervorgehoben werden. In seinem Artikel zu Command Links reserviert er Links für sekundäre Befehle.

Eine Ausnahme gibt es: Eine gefährliche Aktion wird nicht primär. Laut Apple wählen Menschen den auffälligen Button manchmal, ohne zu lesen. Deshalb bekommt eine Aktion, die Daten löscht, keine primäre Rolle, auch wenn sie die wahrscheinlichste Wahl ist.

Das CTA-Labor

Auf der Produktkarte unten fällt der Button bei allen drei Prüfungen durch. Ändern Sie Text, Hierarchie und Größe, die Checkliste aktualisiert sich bei jeder Wahl.

CTA-Labor

Vorschau

Filterkaffee, 250 g

Beispiel einer Produktkarte

Hier klicken Merken

Höhe des Buttons: 28 px

• ✗Nicht bestanden: Text. Der Text sagt nicht, was passiert. „Hier klicken“ stimmt für jeden Button und beschreibt deshalb keinen.
• ✗Nicht bestanden: Hierarchie. Beide Buttons haben dasselbe Gewicht. Der Nutzer muss selbst herausfinden, welcher die Hauptaktion ist.
• ✗Nicht bestanden: Größe. Höhe 28 px. Liegt über der Untergrenze von 24 Pixeln der WCAG, aber unter Apples Regel von 44 pt.

Der Button in diesem Beispiel fällt bei allen drei Prüfungen durch. Mit JavaScript können Sie Text, Hierarchie und Größe ändern und ihn korrigieren.

Produktkarte und Maße sind mein Beispiel, nicht aus einem echten Shop. Treffen Sie eine Wahl: Vorschau und Checkliste ändern sich zusammen. Zwischen den Optionen können Sie auch mit den Pfeiltasten wechseln. Die Buttons in der Vorschau lassen sich nicht drücken, sie zeigen nur das Aussehen.

Größe und Tippbereich

Der Button muss groß genug sein, um ihn bequem mit dem Finger zu treffen. Apples allgemeine Regel ist ein Tippbereich von mindestens 44 × 44 pt. Im Web verlangt WCAG 2.2 auf Stufe AA mindestens 24 × 24 CSS-Pixel.

WCAG erlaubt Ziele unter dieser Grenze mit einer Ausnahme für Abstand. Für die Hauptaktion verlasse ich mich nie auf diese Ausnahme. Der CTA ist das Element, das auf dem Screen am häufigsten gedrückt werden soll.

Sichtbare Größe und gedrückter Bereich sind zwei verschiedene Dinge. Den Bereich lässt sich mit CSS vergrößern, ohne das Aussehen zu ändern.

Position: Wo der Button steht

Der CTA kommt direkt nach der Information, die der Nutzer für die Entscheidung liest. Auf der Produktseite steht er neben Preis und Optionen, im Formular unter dem letzten Feld. In Formularen empfiehlt GOV.UK, den Hauptbutton am linken Rand des Formulars auszurichten.

Stehen zwei oder mehr Buttons nebeneinander, ordnen Sie sie als Gruppe. GOV.UK nutzt dafür eine eigene Komponente für Buttongruppen. Links in der Gruppe stehen auf derselben Linie wie die Buttons.

Die Reihenfolge von „OK“ und „Abbrechen“ hängt von der Plattform ab. Laut Nielsen setzt Windows die Bestätigung zuerst, Apple ans Ende. Er empfiehlt, der Regel des Plattforminhabers zu folgen. Abweichen vom Standard kostet den Nutzer laut Nielsen Zeit.

Auf mobilen Produktseiten fixiere ich den Hauptbutton oft unten am Screen. So verschwindet die Aktion beim Scrollen nicht. Aber diese feste Leiste darf den Inhalt nicht verdecken. Für Buttons in den Schritten des Checkouts schauen Sie ins Checkout-Muster.

Farbe und Kontrast

Der Text auf dem Button muss lesbar sein, und der Button muss sich von seiner Umgebung abheben. Das Kriterium 1.4.3 der WCAG 2.2 verlangt für normalen Text mindestens 4,5:1, für großen Text mindestens 3:1 Kontrast. Großer Text heißt 18 Punkt oder 14 Punkt fett.

Das Kriterium 1.4.11 verlangt für Bedienelemente 3:1. Ein Rahmen ist bei einem Button mit Text keine Pflicht. Braucht es aber den Rand, um den Button zu erkennen, muss dieser Rand 3:1 erreichen, ebenso der Fokusindikator.

Deaktivierte Buttons sind von der Kontrastregel ausgenommen. GOV.UK warnt trotzdem: Deaktivierte Buttons haben wenig Kontrast und verwirren manche Nutzer. Ich lasse den Button stattdessen aktiv und zeige das fehlende Feld mit einer Fehlermeldung.

Um zwei Farben selbst zu prüfen, nutzen Sie den Kontrastrechner.

Der Mythos „Ein roter Button konvertiert besser“

In Marketingtexten kursiert eine Geschichte: Auf einer Website schlug ein roter Button einen grünen um einen bestimmten Prozentsatz. Die HubSpot-Adresse, unter der die Geschichte zuerst erschien, leitet heute auf einen anderen Artikel weiter. Weil ich den Originaltext nicht öffnen und lesen konnte, nenne ich diese Zahl hier nicht.

Selbst wenn die Zahl stimmt, gibt sie keine allgemeine Regel. Es ist ein Test auf einer einzigen Seite, mit den Farben dieser Seite. Auf einer anderen Seite kann dieselbe Farbe das Ergebnis umkehren.

Es gibt ein Beispiel mit offener Quelle. In HubSpots Sammlung von A/B-Tests war die Startseite von Expoze.io für manche Nutzer wegen geringen Kontrasts schwer lesbar. Das Team gestaltete den Hintergrund neu. Der CTA-Button blieb gleich, aber die Klicks auf den CTA stiegen um 25 %. Das Team führt das auf den zusätzlichen Kontrast der Seite zurück.

Das ist die eigene Deutung des Teams. Die Autorin erinnert außerdem daran, dass dieselben Tests nicht bei allen dasselbe Ergebnis bringen. Meine Lehre daraus: Wählen Sie die Farbe, weil sie einen Kontrast zur Umgebung bildet, und prüfen Sie sie auf Ihrer eigenen Website mit einem A/B-Test.

Meine Notiz

Der CTA-Fehler, den ich in Audits am häufigsten sehe, ist nicht der Text, sondern das Gedränge. Im Hero stehen „Jetzt starten“, „Demo anfordern“ und „Preise ansehen“ nebeneinander mit demselben gefüllten Button. Das Team hält alle drei für wichtig, der Nutzer kann sich für keinen entscheiden.

Bevor ich einen Screen zeichne, schreibe ich den Text der Hauptaktion. Kann ich ihn nicht schreiben, ist noch nicht entschieden, wozu der Screen da ist. Die anderen Buttons kommen nach diesem Satz und bleiben sekundär.

Wenn Sie einen Blick von außen auf die CTAs Ihres Produkts wollen: Der UX Audit schaut auch auf Buttontexte und Hierarchie. Bauen Sie eine Landingpage, beschreibt das Muster zur Landingpage, wo der CTA auf der Seite steht.

Checkliste

1. Der Buttontext enthält Objekt und Handlung, 2 bis 4 Wörter.
2. In Bestätigungsfenstern steht statt „OK“ der Name der Aktion.
3. Auf dem Screen gibt es einen primären Button, die anderen sind sekundär oder Links.
4. Eine Aktion, die Daten löscht, steht nicht auf dem primären Button.
5. Der Tippbereich ist mobil mindestens 44 pt groß, im Web mindestens 24 CSS-Pixel.
6. Der Textkontrast ist mindestens 4,5:1, der Rand des Buttons bei Bedarf mindestens 3:1.
7. Dieselbe Aktion steht auf jedem Screen mit demselben Text an ähnlicher Stelle.