Ein Button ist die letzte Station vor der Handlung. Wer "Projekt starten" anklickt, hat sich durch eine Seite bewegt, Texte gelesen, Preise geprüft, vielleicht ein Formular ausgefüllt. Was an dieser Stelle noch schiefgehen kann, entscheidet sich an wenigen Pixeln: Größe, Kontrast, Farbe, Beschriftung, Bewegung.
Dieser Beitrag erklärt, was die Gestaltungsforschung dazu sagt, wo die berühmten Erfolgsgeschichten herkommen und wie Unternehmen ihre Call-to-Actions mit A/B-Tests überprüfen.
Was ist ein Call-to-Action-Button?
Ein Call-to-Action-Button (kurz: CTA-Button) ist ein Interaktionselement, das eine bestimmte Handlung anstößt: eine Anfrage senden, einen Termin buchen, einen Warenkorb öffnen, ein Projekt starten.
Entscheidend ist die Unterscheidung zwischen Aktionen. Eine Seite hat in der Regel einen primären CTA, der die eine wichtigste Handlung auslöst. Daneben gibt es sekundäre Aktionen wie "Weitere Informationen" und tertiäre wie Teilen oder Drucken. Probleme entstehen selten dadurch, dass ein Button zu unscheinbar ist, sondern dadurch, dass mehrere gleich stark um Aufmerksamkeit konkurrieren. Wer die visuelle Hierarchie nicht klärt, überlässt die Entscheidung dem Zufall.
Warum visuelle Hierarchie über den Klick entscheidet
Gestalterisch nennt James Gibson solche Signalfunktionen Affordances: Der sichtbare Griff einer Tür lädt zum Öffnen ein. Norman ergänzte Signifiers, also Merkmale, die auf eine mögliche Handlung hinweisen, ohne sie auszulösen. Eine Klickfläche mit klarer Umrandung ist ein Signifier: Sie signalisiert "hier kann man etwas auslösen". Ohne erkennbare Form, Kontrast oder Schatten fehlt diese Signalfunktion, egal wie gut der Text lautet.
Psychologisch entscheidet die visuelle Hierarchie darüber, was überhaupt erst wahrgenommen wird. Das Auge filtert nach Merkmalen, die ohne gezielte Suche auffallen: Farbkontrast, Größenunterschied, Bewegung, Form. Diese als prä-attentive Verarbeitung beschriebene Vorfilterung bestimmt, was in den bewussten Blick gerät. Ein Button, der sich in Größe, Farbe und Position nicht abhebt, wird nicht "zu wenig beachtet", sondern gar nicht erst als handlungsrelevant erkannt.
Der Einfluss von Farbe, Kontrast und Größe
Kontrast ist die Grundlage
Kontrast entscheidet, ob ein Element als eigenständig erkannt wird. Zu wenig Kontrast bedeutet, dass die Klickfläche mit dem Hintergrund verschmilzt. Die WCAG 2.2 fordert für nicht-textliche Bedienelemente mindestens 3:1 Kontrast gegen angrenzende Farben (SC 1.4.11), für Fließtext 4,5:1, für große Schrift 3:1 (SC 1.4.3).
Größe ist Zugänglichkeit, nicht Dekoration
Die WCAG 2.2 verlangt für Zielgrößen ein Minimum von 24 mal 24 CSS-Pixeln (SC 2.5.8 Target Size, Level AA). Das ist die Untergrenze, kein Ziel: Ein primärer CTA-Button sollte deutlich darüber liegen, damit der Zeigefinger ihn sicher trifft. Dass die Größe nicht nur bequem, sondern messbar zählt, zeigt Fitts' Gesetz: Die Zeit, die der Zeigefinger für eine Bewegung braucht, hängt logarithmisch von der Entfernung zum Ziel und seiner Breite ab. Ein kleiner Button am Bildschirmrand kostet also spürbar mehr Zeit als ein gleich großer Button direkt unter dem Cursor.
Warum es keine universelle CTA-Farbe gibt
Die häufigste Beratung lautet: "Rote Buttons konvertieren besser". Belastbar ist sie nicht: Die Farbwirkung hängt von Markenfarbe, Farbschema der Seite, Zielgruppe und Gerät ab. Eine rote Fläche auf einer sonst blauen Seite wirkt stärker als auf einer roten.
Belastbarer ist die Aussage, dass ein einzelner Akzent stärker wirkt als mehrere konkurrierende. Wenn drei Elemente gleichfarbig und gleichgroß hervorgehoben werden, ist keines mehr hervorgehoben. Der beste Akzent ist der, der sich vom Rest der Seite abhebt - und der einzige auf der Seite bleibt.
Die Geschichte von Googles 41 Blautönen
Der Designhistoriker Douglas Bowman hat 2009 in seinem Rückzug von Google geschildert, das Unternehmen habe sich zwischen zwei Blautönen nicht entscheiden können und "41 shades between each blue" getestet, "to see which one performs better". Seine eigentliche Kritik galt einer anderen Stelle: "When a company is filled with engineers, it turns to engineering to solve problems."
Was diese Geschichte häufig ergänzt wird, ist eine Umsatzsumme von 200 Millionen Dollar, die der Blauton "jährlich wert gewesen" sein soll. In Bowmans Text steht diese Zahl nicht, und eine belastbare Primärquelle ließ sich dafür nicht ausmachen; sie taucht in Sekundärquellen auf. Belegt sind die 41-Schattierungen-Testidee und Bowmans Kritik am Datendiktat. Nicht belegt ist eine Millionenzahl.
Die Fallstudie des 300-Millionen-Dollar-Buttons
Die zweite Geschichte, die regelmäßig mit der ersten verwechselt wird, stammt von Jared Spool. Er beschrieb 2009 in seinem Buch "Web Form Design" eine Umgestaltung im Checkout eines großen Einzelhändlers. Vorher bedeutete ein Klick auf "Checkout" eine Anmeldung: Der Gast musste E-Mail-Adresse und Passwort eingeben, um zur Zahlung zu gelangen. Spool nennt drei Befunde: Neukunden widersetzten sich der Registrierung, 45 Prozent aller Kunden hatten mehr als eine Registrierung im System, und rund 160.000 Passwort-Zurücksetzungen pro Tag erreichten das System, von denen 75 Prozent nie wieder zum Kauf zurückkehrten.
Die Änderung: Der Button "Registrieren" verschwand, an seine Stelle trat "Weiter". Der Begleittext erklärte, man müsse kein Konto anlegen, um einkaufen zu können. Spool berichtet, die Zahl der kaufenden Kunden sei um 45 Prozent gestiegen, im ersten Monat habe das 15 Millionen US-Dollar zusätzlichen Umsatz gebracht, im ersten Jahr 300 Millionen.
Entscheidend war nicht die Buttonfarbe, sondern dass eine Hürde wegfiel, die für den Kunden keinen Sinn ergab, und dass die Beschriftung die verfügbare Handlung benannte: "Registrieren" versprach eine Kontoeröffnung, "Weiter" versprach das, was tatsächlich passieren würde.
Die Fallstudie ist ein berichtetes Praxisbeispiel, kein Experiment. Der Händler bleibt namentlich ungenannt, es gibt keine Kontrollgruppe, keine Stichprobengrößen, keine Angaben zur Messmethode und keine Unsicherheitsintervalle. Andere Veränderungen im Checkout derselben Zeit werden nicht ausgeschlossen. Als Beleg dafür, dass Checkout-Hürden und unklare Beschriftungen teuer sind, ist die Geschichte wertvoll. Als Beleg für 300 Millionen Dollar durch einen Button taugt sie nicht.
Microinteractions: Wenn Buttons auf den Benutzer reagieren
Als Microinteractions werden kleine, ereignisbasierte Animationen bezeichnet, die einem Element eine erkennbare Reaktion auf den Benutzer geben. Dan Saffer hat den Begriff geprägt und sie als die details eines Produkts beschrieben. Für einen Button bedeutet das: Der Pfeil bewegt sich auf Hover, ein Lichtschein folgt dem Mauszeiger, der Button neigt sich leicht in seine Richtung.
Die Funktion dieser Effekte ist Feedback. Sie beantworten die Frage "ist das ein klickbares Element" und "habe ich es erreicht" schneller als jede Beschriftung. Die verbreitete Formulierung "Nobody notices these details. Everybody feels them." beschreibt das treffend, taugt aber nicht als allgemeines Gesetz: Erwartungen an Bewegung sind erlernt, und wer sie erwartet, bemerkt ihr Fehlen stärker als ihren Nutzen. Für Benutzer mit reduzierter Bewegung ist derselbe Effekt eher Störung als Qualitätssignal.
Wann Animationen dem Ziel schaden
Ein Hover-Effekt, der eine Funktion nur im Hover-Zustand sichtbar macht, ist auf Touch-Geräten unerreichbar. Eine magnetische Bewegung, die den Button unter dem Zeiger wegzieht, erschwert das Klicken für Menschen mit Motorikschwierigkeiten. Ein dauerhaft pulsierender Lichtschein lenkt bei Aufmerksamkeitsdefiziten ab. Auf Touch-Geräten gibt es keinen Hover-Zustand - der Effekt erreicht nur einen Teil des Traffics.
Gute Button-Gestaltung und Barrierefreiheit
Ein optisch beeindruckender Button ist nicht automatisch benutzerfreundlich. Barrierefreiheit und Conversion sind keine Gegensätze, sondern dieselbe Anforderung.
- Tastaturbedienung. Der Button muss mit Tab erreichbar und mit Enter oder Leertaste auslösbar sein, der Fokuszustand muss sichtbar bleiben (SC 2.4.7 Focus Visible, Level AA). Neu in WCAG 2.2 ist SC 2.4.11 Focus Not Obscured (Minimum): Ein fokussiertes Element darf nicht vollständig verdeckt werden, etwa durch einen fixierten Header.
- Kontrast. Nicht-textliche Bedienelemente brauchen mindestens 3:1 (SC 1.4.11), der Text im Button 4,5:1 (SC 1.4.3).
- Zielgröße. 24 mal 24 CSS-Pixel mindestens (SC 2.5.8).
- Beschriftung. Die sichtbare Beschriftung sollte den zugänglichen Namen enthalten (SC 2.5.3 Label in Name), damit Sprachsteuerung und Screenreader dasselbe Element finden. "Weiter" ohne Kontext ist schlechter als "Projekt starten".
- Bewegung. SC 2.3.3 Animation from Interactions (Level AAA) verlangt, bewegungsbasierte Interaktionseffekte abzuschalten, sofern sie nicht essential sind. In der Praxis heißt das:
prefers-reduced-motionauswerten und alle Bewegungen abschalten. Auch das Flackern muss unterhalb der Schwelle bleiben (SC 2.3.1, Level A). - Alternativtexte. Icons in Buttons brauchen einen Alternativtext (SC 1.1.1) - oder sie sind dekorativ und werden entsprechend ausgezeichnet.
Wer diese Punkte einhält, gewinnt Reichweite: Tastaturnutzer, Screenreader-Nutzer, Menschen mit Sehschwäche und kleine Displays.
Ein funktionsfähiger Beispielbutton mit Pfeilanimation, Cursor-Following-Light und magnetischer Bewegung, inklusive Umschaltern für jeden Effekt und vollständiger Unterstützung von prefers-reduced-motion, findet sich im interaktiven Prototyp zu diesem Beitrag.
Wie Unternehmen ihre CTAs mit A/B-Tests optimieren
Die ehrlichste Form der Optimierung ist ein Experiment. Ein A/B-Test teilt den Traffic zufällig auf zwei Varianten auf und vergleicht das Verhalten beider Gruppen. Randomisierung ist das entscheidende Detail: Nur sie trennt die Wirkung der Änderung von zufälligen Schwankungen.
Welche Metrik zählt
Die Klickrate auf den CTA ist die einfachste und die irreführendste Kennzahl. Sie misst, ob der Button funktioniert, nicht ob die Handlung für den Betreiber wertvoll war. Ein Button, der viele Klicks erzeugt, weil er irreführend formuliert ist, kann den Umsatz senken. Belastbarer ist der Umsatz pro Besucher: Er enthält Conversion-Rate und Warenkorbwert in einer Zahl. Die Klickrate taugt als Diagnosewerkzeug, nicht als Ziel.
Nebenwirkungen mitmessen
Jede Änderung an einem Button kann Nebenwirkungen haben. Ein auffälligerer CTA kann die Absprungrate erhöhen, weil er Erwartungen weckt, die die Seite nicht erfüllt. Ein Test sollte deshalb neben der Zielmetrik immer Abbruchquote, Verweildauer, Rückgabequote und, wo vorhanden, den Support-Verkehr mitbeobachten. Und er braucht ausreichend Laufzeit: Bei kleinen Effekten führen zu kurze Tests zu Fehlschlüssen, weil zufällige Schwankungen wie ein Signal aussehen.
Die dokumentierte Methodik - Kohavi und seine Mitautoren fassen sie in "Online Controlled Experiments" zusammen - verlangt Disziplin: eine Hypothese vorab formulieren, eine Variante pro Test ändern, die Testdauer vorher festlegen und auch ein widersprechendes Ergebnis akzeptieren.
Fazit
Der Call-to-Action-Button ist keine Geschmacksfrage, sondern eine Schnittstelle zwischen Absicht und Ausführung. Was die Forschung stützt, ist unspektakulär: klare Hierarchie mit einer hervorgehobenen Handlung, ausreichender Kontrast, eine sicher treffbare Zielgröße und eine Beschriftung, die benennt, was tatsächlich passiert. Es gibt keine ideale CTA-Farbe, und keine Animation garantiert Umsatz.
Die beiden Geschichten aus diesem Beitrag sind gerade deshalb interessant, weil sie oft falsch zitiert werden. Der 300-Millionen-Dollar-Button war kein Farbexperiment, sondern das Wegfallen einer Checkout-Hürde. Die 41 Blautöne waren ein Beispiel dafür, wie eine datenbasierte Entscheidung aussieht - nicht für den Wert eines Farbtons.
Am Ende bleibt der nüchterne Rat: Bevor Sie eine Farbe ändern, prüfen Sie die Reihenfolge. Hat der Button die richtige Beschriftung? Steht er an der richtigen Stelle? Ist er der einzige akzentuierte Button? Ist er groß und kontrastreich genug?
Quellen und weiterführende Links
- Spool, J. M. (2009): The $300 Million Button. Center Centre. articles.centercentre.com/three_hund_million_button
- Bowman, D. (2009): Goodbye Google. Stop Design. v5.stopdesign.com/archive/2009/03/20/goodbye-google.html
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2. w3.org/TR/WCAG22 - ergänzend die Understanding-Dokumente zu Target Size (Minimum), Target Size (Enhanced), Focus Visible, Focus Not Obscured (Minimum), Contrast (Minimum), Non-text Contrast, Label in Name und Animation from Interactions.
- Norman, D. A. (1999): Affordance, conventions, and design. interactions 6(3), 38-43. doi.org/10.1145/301153.301168 - sowie Norman (2008): Signifiers, not affordances. jnd.org/signifiers-not-affordances
- Gibson, J. J. (1979): The Ecological Approach to Visual Perception. doi.org/10.4324/9781315740218
- Treisman, A. M. und Gelade, G. (1980): A feature-integration theory of attention. Cognitive Psychology 12(1), 97-136. doi.org/10.1016/0010-0285(80)90005-5 - sowie Wolfe, J. M. und Horowitz, T. S. (2004): What attributes guide the deployment of visual attention. Nature Reviews Neuroscience 5(6), 495-501. doi.org/10.1038/nrn1411
- Cleveland, W. S. und McGill, C. (1985): Graphical perception and graphical methods for analyzing scientific data. Science 229(4716), 828-833. doi.org/10.1126/science.229.4716.828 - sowie Nielsen Norman Group: Dashboards: Making Charts and Graphs Easier to Understand und Visual Hierarchy in UX: Definition.
- Fitts, P. M. (1954): The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology 47(6), 381-391. doi.org/10.1037/h0055392 - sowie MacKenzie, I. S. (1992): Fitts' law as a research and design tool in human-computer interaction. Human-Computer Interaction 7(1), 91-139. yorku.ca/mack/hci1992
- Saffer, D.: Microinteractions. microinteractions.com - sowie Nielsen Norman Group: Microinteractions und Ten Usability Heuristics.
- Kohavi, R., Tang, D. und Xu, Y.: Online Controlled Experiments. experimentguide.com
Fragen & Antworten