Der CTA-Buttons mag das kleinste Element auf deiner Website sein, aber er kann einen großen Einfluss auf deine Klickraten und Konversionsraten haben. Erfahre hier mher darüber, wie du effektivere Call-to-Action Schaltflächen gestalten kannst.
Es ist leicht, Website-Schaltflächen als selbstverständlich anzusehen. Schließlich gibt es sie auf jeder Webseite – von einfachen Aufforderungen zum Handeln wie „Erfahren Sie mehr“ bis hin zu dringlicheren wie „Erhalte heute 75 % Rabatt“. Es ist also nicht so, dass Besucher*innen nicht wüssten, was CTA Schaltflächen bewirken oder wie sie zu verwenden sind.
Aber nimm das Beispiel eines PlayStation-Controllers. Die Benutzer*innen werden sich schließlich auf ihr Muskelgedächtnis verlassen, um ihre häufigsten Aktionen auszuführen, und sie werden nicht einmal darüber nachdenken müssen, was sie tun. Es wird einfach zur zweiten Natur.
Was passiert aber, wenn sie zu jemandem nach Hause gehen und dieser eine Xbox hat? Die Anordnung der Controller ist mehr oder weniger identisch, aber einige der Tasten und Sticks sind anders angeordnet, größer und anders gestaltet. Wenn die Person noch nie einen Xbox-Controller benutzt hat, könnte sie beim Spielen benachteiligt sein, was zu Frustration und Enttäuschung führen kann.
Dies gilt für das Design von Schaltflächen auf physischen Objekten ebenso wie für das Design von Schaltflächen auf Websites.
Der einzige Unterschied ist, dass sich die Menschen normalerweise an ein schlechtes Design der Tasten gewöhnen müssen, weil sie das Spielsystem, den Fernseher oder das Smartphone, zu dem die Tasten gehören, bereits gekauft und sich daran gewöhnt haben. Auf Websites wird ein schlechtes Tastendesign nicht als kleines Ärgernis angesehen, bis die Nutzer*innen wieder lernen, wie sie Ihre Tasten finden und verwenden können. Stattdessen werden sie die Seite verlassen und zu einer Website wechseln, die nicht schwierig oder verwirrend zu bedienen ist.
Damit wollen wir uns heute befassen: Wie du Call-to-Action-Buttons gestaltest, die attraktiv und benutzerfreundlich sind und die Klick- und Konversionsraten deiner Website erhöhen. In diesem Beitrag findest du außerdem zahlreiche Beispiele für CTA-Schaltflächen, die zum Handeln anregen.
Was ist ein Call-to-Action-Button?
Ein Call-to-Action (oder CTA) ist ein Link auf einer Website, der einen Befehl oder eine Aufforderung zum nächsten Schritt enthält. Während er als Text geschrieben werden kann, ist die häufigere Art der Gestaltung des Call-to-Action eine Schaltfläche.
Auf der IKEA-Homepage zum Beispiel finden sich beide Arten von CTA-Design:
„Mehr erfahren“ ist eine übliche Aufforderung zur Handlung auf einer Website. Auf dieser speziellen Seite ist er jedoch als einfacher Hyperlink gestaltet.
„Alle Dienstleistungen anzeigen“ wird dagegen durch eine abgerundete schwarze Schaltfläche dargestellt. Dies ist der typischere Ansatz für das CTA-Design.
Allerdings gibt es Schaltflächen in allen möglichen Formen, Größen und Stilen. So sieht zum Beispiel die Schaltfläche „In den Warenkorb“ auf den Produktseiten von Home Depot aus:
Die Schaltfläche von Home Depot ist leuchtend orangefarben, hat ein Einkaufswagensymbol vor den Worten „In den Warenkorb“ und ist rechteckig und abgeschrägt.
Wozu verwendest du CTA-Schaltflächen?
Websites haben in der Regel viele Hyperlinks – von der Navigation ganz oben auf der Seite bis hinunter zur Fußzeile. Informative Links erfordern kein besonderes Design.
Es sind die wichtigen nächsten Schritte auf deiner Website, die hervorgehoben werden müssen. Zum Beispiel:
- Lies weiter
- Heute anmelden
- Jetzt kaufen
- In den Warenkorb legen
- Kostenlose Testversion starten
- Jetzt ansehen
- Abonnieren und 5% Rabatt erhalten
CTAs gehören auch an das Ende von Website-Formularen – Kontaktformulare, Suchformulare, Kaufabwicklung, usw. Wie dieses „Find food“-Beispiel von Seamless:
CTA-Schaltflächen erscheinen auf jeder Seite einer Website. Die Hoffnung und Erwartung ist, dass die Besucher*innen auf diese Schaltflächen klicken, aber wir können uns nicht nur auf die Aktion konzentrieren. Eine Schaltfläche so zu gestalten, dass sie anklickbar aussieht, wird nicht dazu führen, dass mehr Besucher auf sie klicken.
Um die Besucher*innen zum Handeln zu bewegen, müssen wir verstehen, was sie dazu bewegt, und dann Schaltflächen entwerfen, die ihnen helfen, ihre Ziele zu erreichen. CTA-Schaltflächen sollten also einem dieser Zwecke dienen:
Bildung: Biete mehr Kontext oder Informationen zu Punkten, die auf der Seite kurz angesprochen wurden.
Wie die Schaltfläche „Treffen Sie mich“ auf der Homepage von Social Catering Co:
Anleitung: Sag den Besucher*innen, was sie als Nächstes tun sollen und wie sie dorthin gelangen.
Auf der Website von Modernaweb Studio gibt es zum Beispiel immer einen Call-to-Action-Button oben auf der Seite, der die Besucher*innen zur nächsten Seite oder zum nächsten Schritt führt:
Unterstützung: Gib den Besuchern Optionen, wenn sie nicht wissen, was sie als Nächstes tun sollen, z. B. ein Produkt in den Einkaufswagen legen oder es für später speichern.
Dies ist besonders für Unternehmen mit Ladengeschäften wie Bed Bath & Beyond wichtig, die ihren Kunden mehrere Optionen für den Checkout anbieten möchten:
Konvertieren: Gib Besuchern einen schnellen Weg zur Konvertierung, wenn sie bereit sind.
Yankee Candle zum Beispiel verwendet auf jeder Seite des Bestellvorgangs das gleiche CTA-Design – von „In die Tasche“ bis „Zur Kasse“:
19 Best Practices für die Gestaltung hoch-konvertierender CTAs + Beispiele
Bei der Gestaltung von CTA-Schaltflächen geht es um mehr als nur Farbe und Größe, obwohl auch diese eine Rolle spielen. Es gibt zwar kein Geheimrezept für die Gestaltung der perfekten CTA-Schaltfläche, aber es gibt bestimmte Regeln, die du befolgen musst, wenn du Schaltflächen entwerfen willst, die die Aufmerksamkeit der Besucher fesseln und sie zum Handeln anregen.
Werfen wir einen Blick auf die 19 besten Praktiken, die dir helfen werden, effektive Calls-to-Action zu entwerfen:
1. Wähle einen primären Aufruf zur Handlung
Überleg mal, wie viel wir im Internet tun können.
Artikel lesen, mit Freunden in Kontakt treten, etwas kaufen, ein Abonnement abschließen, Videos ansehen, E-Mails abrufen und so weiter und so fort… Aus diesem Grund leiden heute so viele Menschen unter Entscheidungsmüdigkeit. Das führt nicht nur dazu, dass sich die Entscheidungsträger*innen schlecht fühlen. Sie kann sich auch negativ auf den Entscheidungsprozess auswirken.
Nach Angaben von Medical News Today:
„Die psychologischen Auswirkungen von Entscheidungsmüdigkeit können unterschiedlich sein und zu Schwierigkeiten bei der Entscheidungsfindung, Impulskäufen oder anderen Vermeidungsverhalten führen.“
Daher ist ein Call-to-Action am effektivsten, wenn er die einzige Entscheidung (oder eine von wenigen Entscheidungen) ist, zu der Sie Ihre Besucher auffordern.
Während jede Seite auf Ihrer Website andere Links und Schaltflächen anbieten kann, sollten Sie nur einen primären CTA haben. So wie Basecamp es hier tut:
Bei der Gestaltung von CTA-Schaltflächen geht es um mehr als nur Farbe und Größe, obwohl auch diese eine Rolle spielen. Es gibt zwar kein Geheimrezept für die Gestaltung der perfekten CTA-Schaltfläche, aber es gibt bestimmte Regeln, die du befolgen musst, wenn du Schaltflächen entwerfen willst, die die Aufmerksamkeit der Besucher fesseln und sie zum
Die große gelbe Schaltfläche “ Probiere Basecamp aus“ ist die wichtigste Aufforderung zum Handeln. Es ist auch das einzige Element auf der Seite, das auf diese Weise gestaltet ist, was es den Besuchern leicht macht, herauszufinden, was sie als Nächstes tun müssen.
2. Verwendung einer starken, einprägsamen Farbe
Es gab eine Zeit, in der die größte Debatte über das Design von CTA-Schaltflächen darauf hinauslief, ob man sie rot oder grün gestalten sollte. HubSpot zum Beispiel widmete einen ganzen Beitrag dem A/B-Test dieser beiden Farben:
Die Farbe spielt zwar immer noch eine wichtige Rolle bei der Optimierung von CTA-Schaltflächen für Klicks und Konversionen, aber es ist nicht so einfach wie rot oder grün.
Du musst eine Reihe von Faktoren berücksichtigen:
- Markenbildung
- Farblich
- Harmonie
- Farbkontrast
Die Schaltfläche „In den Warenkorb“ von Chewy ist ein gutes Beispiel dafür, wie man eine Farbe wählt, die sich gut von der Umgebung abhebt und dennoch gut zu den Markenelementen der Website passt.
Auch wenn die Farbpsychologie bei der Gestaltung von Schaltflächen nützlich sein kann, ist sie keine exakte Wissenschaft – vor allem, da das Internet es selbst den kleinsten Unternehmen ermöglicht, weltweit tätig zu werden. Farben haben für verschiedene Menschen und in verschiedenen Kulturen unterschiedliche Bedeutungen, so dass Farbpsychologie nicht immer der beste Weg ist. Die Farbtheorie ist ein wertvolleres Instrument.
3. Wähle eine einfache Schriftart mit oder ohne Serifen
Bei der Wahl der Schriftart für Schaltflächen hast du nicht viel Spielraum für Kreativität. Die Besucher*innen müssen in der Lage sein, den Inhalt der Schaltflächen schnell zu lesen, damit sie sich sicher fühlen, etwas zu unternehmen.
Bei der Wahl der am besten lesbaren Webschriften solltest du dich an schlichte Serifen und serifenlose Schriftarten mit markanten Zeichen halten. Scentbird verwendet zum Beispiel die Proxima Nova:
Es ist keine sehr aufregende serifenlose Schrift, aber sie ist sauber, leicht zu lesen und passt zum umgebenden Text. Außerdem kommen so das Design und die Botschaft der Schaltfläche besser zur Geltung, da sie nicht von der Typografie überschattet werden.
4. Der Text sollte etwas größer sein als der umgebende Text
Das Design deiner Schaltfläche sollte die Aufmerksamkeit der Besucher auf sich ziehen, nicht ihre unangenehm große Größe. Dennoch musst du bei der Gestaltung von CTA-Schaltflächen die Hierarchie der Größe berücksichtigen.
Nimm die Netflix-Landingpage:
Die Besucher*innen werden natürlich zuerst auf die größeren Textteile aufmerksam gemacht, denn größerer Text bedeutet mehr Bedeutung.
Dieses Design deutet darauf hin, dass die H1 „Unbegrenzte Filme, Fernsehsendungen und mehr“ in einer größeren 27-Pixel-Schrift das Wichtigste ist, was man sich ansehen sollte. Am zweitwichtigsten sind das große weiße Feld „E-Mail-Adresse“ und die rote Schaltfläche „Get Started >“.
Du kannst eine Kombination aus Schriftgröße und -stärke verwenden, um den Blick der Besucher durch deinen Inhalt zu lenken und sie schneller zum CTA zu bringen.
Es liegt an dir, wie viel Wert du auf deine CTA-Schaltfläche legst. Bei primären CTAs sollte die Größe näher an H1 und H2 liegen als am Fließtext. Bei sekundären und tertiären CTAs können sie jedoch kleiner sein, solange sie lesbar und klickbar bleiben.
5. Genügend Platz um die Buchstaben und den Knopf herum vorsehen
Weißraum gibt deinen wichtigsten Designelementen Raum zum Atmen, was wiederum dazu beiträgt, dass Besucher*innen sie leichter finden und sich auf sie konzentrieren können. Insbesondere um Text herum kann Weißraum dazu beitragen, die Lesbarkeit und Klickbarkeit zu verbessern.
Aus diesem Grund muss bei der Gestaltung von CTA-Schaltflächen der Platz berücksichtigt werden. Sie sind wichtige Elemente, die den Besucher*innen von einer Seite oder einem Schritt zur nächsten bringen. Sie dürfen nicht im Durcheinander untergehen oder schwer zu lesen oder zu benutzen sein.
Schauen wir uns die Landing Page für die bevorstehende (virtuelle) Welttournee von Muse an:
Das Design des Heldenbildes ist ein ziemliches Spektakel. Wenn der Designer dort eine CTA-Schaltfläche platziert hätte, wäre sie schwer zu finden gewesen.
Wenn die Besucher*innen die Seite nach unten scrollen, verblasst das Design jedoch und öffnet sich zu einer Menge weißer Fläche. So gelangen sie schließlich an den unteren Rand der Seite, wo sie zwei Aufforderungen zum Handeln finden: „WATCH LIVE EVENT“ oder „ENTER WEBSITE“.
Der Platz um die CTAs herum ist gut, denn so sind sie leicht zu finden, leicht voneinander zu unterscheiden und es ist leicht, ohne Fehler auf die richtige CTA zu klicken.
6. Halt dich an die modernen Designtrends
Bei der Gestaltung von CTA-Schaltflächen ist darauf zu achten, dass sie zum Stil der Marke passen und sich an den aktuellen Designtrends orientieren.
So wird zum Beispiel der Neomorphismus langsam immer beliebter. Du solltest jedoch kein neomorphes Schaltflächendesign verwenden, wenn der Rest deiner Website und deines Brandings flach ist. In diesem Fall wäre es besser, die Schaltfläche in einem flachen Design zu gestalten, aber einen Designtrend wie Farbverläufe darin zu verwenden.
Wenn Farbverläufe oder andere Farbtrends für Ihr Design keinen Sinn machen, können Sie dem Beispiel von Het Blok folgen und die Schaltfläche mit einer auffälligen Mikroanimation versehen:
Mikroanimationen werden bei der Gestaltung von Schaltflächen immer in Mode sein, da sie die Benutzerfreundlichkeit verbessern.
7. Entscheide dich für einfarbige Schaltflächendesigns und nicht für Konturen
Alle paar Jahre kommt es in Mode, Schaltflächen mit einer transparenten Kontur zu versehen. Diese Arten von Schaltflächen werden auch als „Geisterschaltflächen“ bezeichnet.
Das größte Problem bei diesem Trend ist, dass Untersuchungen immer wieder bewiesen haben, dass umrissene Schaltflächen niedrigere Klickraten und höhere Fehlerquoten haben als durchgehende Schaltflächen. Sie mögen zwar minimalistischer oder eleganter aussehen, sind aber nicht so benutzerfreundlich.
Wenn du also deine primären CTA-Schaltflächen entwirfst, entscheide dich immer für ein solides (ausgefülltes) Schaltflächendesign. Wenn du dann sekundäre oder tertiäre Schaltflächen auf der Seite hinzufügen musst, mach sie zu Geisterschaltflächen, wenn du sie nicht so sehr hervorheben willst.
Diese Designtaktik kann auch nützlich sein, wenn du mehrere CTAs nebeneinander platzieren und den Besuchern zeigen willst, welche Option die beste ist, so wie es America’s Test Kitchen hier macht:
Die Augen der Besucher werden natürlich auf die Schaltfläche „Kostenloser Zugang“ gerichtet sein, die ausgefüllt und als erste in der Sequenz platziert ist. Selbst wenn oben nicht „Beliebteste“ stehen würde, würde dieses Abonnement sicher mehr Klicks und Käufe erhalten, einfach weil das Ghost-Design suggeriert, dass die anderen nicht so wertvoll sind.
8. Gib der Seite ein „klickbares“ Design.
Es gibt eine Sache, die Besucher tun müssen, wenn sie eine Schaltfläche sehen:Klicke. Sie muss also so aussehen, als ob sie anklickbar wäre, wenn sie von nicht anklickbaren Elementen umgeben ist. Der einfachste Weg, dies zu erreichen, ist, ihm die rechteckige oder ovale Form zu geben, die die Menschen mit Schaltflächen assoziieren. Wenn es zu deinem Branding passt, kannst du sie anklickbar machen. Sie muss also so aussehen, als ob sie anklickbar wäre, wenn sie von nicht anklickbaren Elementen umgeben ist.
Der einfachste Weg, dies zu erreichen, ist, ihm die rechteckige oder ovale Form zu geben, die die Menschen mit Schaltflächen assoziieren.
Wenn es zu Ihrem Branding passt, kannst du noch mehr tun, um deine Schaltflächen hervorstechen zu lassen. Die Jumpin-Hero-Image-Schaltfläche hat zum Beispiel zwei Funktionen, die den Besuchern zeigen, dass sie anklickbar ist:
Erstens sieht es so aus, als ob es um seine Ecken herum ein Licht abstrahlt. Zweitens vergrößert sie sich, wenn der Benutzer den Mauszeiger darüber bewegt.
Andere Möglichkeiten, eine Schaltfläche anklickbar zu machen, sind das Hinzufügen eines Schattens zum Hintergrund oder das Anbringen einer abgeschrägten Kante.
Wenn du deine Schaltflächen auf diese Weise gestaltest, reduzierst du Klickfehler und hilfst den Besuchern, deine Aufforderungen zum Handeln schneller zu finden und zu nutzen.
9. Entwerfe ein Schaltflächendesign speziell für mobile Benutzer*innen
Was für Desktop- und Laptop-Benutzer gut funktioniert, ist für Smartphone-Benutzer nicht immer der Fall. Und dabei geht es nicht nur um die Größe oder Farbe der CTA-Schaltfläche.
Nimm z. B. die Eventbrite-Schaltfläche „Tickets“ auf dem Desktop:
Es befindet sich auf der rechten Seite der Seite, direkt unter den grundlegenden Details der Veranstaltung. Es ähnelt dem Design, das wir von E-Commerce-Produktseiten kennen und gewohnt sind.
Auf dem Handy macht diese Art von Design keinen Sinn. Der Designer sollte zwar das Aussehen der Schaltfläche so weit wie möglich beibehalten, aber ihre Platzierung und Funktionalität sollte auf die mobile Nutzung zugeschnitten sein.
Genau das haben die Designer*innen von Eventbrite getan:
Die grüne Schaltfläche „Tickets“ erscheint auf der mobilen Seite zunächst unter den Hauptdetails der Veranstaltung. Wenn der Benutzer scrollt, bleibt sie am unteren Rand der Seite, so dass sie immer präsent ist.
10. Fügen Sie auf bestimmten Schlüsselseiten eine CTA oberhalb des Falzes ein
Zwar sollte jede Seite deiner Website einen Call-to-Action haben, aber es ist nicht immer notwendig, ihn deinen Besuchern als erstes zu präsentieren. Interne Seiten für Dienstleistungen oder Über uns sind informativ. Die Besucher*innen besuchen diese Seiten, um mehr zu erfahren, also gib ihnen die Möglichkeit zu lesen, bevor du sie aufforderst, uns zu kontaktieren“ oder unsere Arbeit zu erkunden“.
Es gibt jedoch einige Seiten, auf denen die CTA an erster Stelle stehen sollte:
- Homepages
- Landing-Seiten
- Produktseiten
Die Produktseite von 23andMe ist ein gutes Beispiel dafür:
Mit einem solchen Design erhalten die Besucher einen umfassenden Überblick über das Produkt und wissen sofort, was der nächste Schritt ist: In den Warenkorb legen. Sie können sich in aller Ruhe auf der Seite umsehen und herausfinden, ob das Produkt das Richtige für sie ist. Wenn sie dann soweit sind, wissen sie, wo sie die CTA-Schaltfläche für die Konvertierung finden.
Durch die Platzierung der Schaltfläche am oberen Rand der Seite in einem ablenkungsfreien Design wird die Konvertierung schnell und schmerzlos.
11. Plaziere Buttons in den Pfaden deiner Besucher*innen
Wenn du eine Website für die User Journey entwirfst, musst du nicht nur darüber nachdenken, wie deine Besucher von einer Seite zur nächsten gelangen. Du musst auch bedenken, wie die Besucher vom Anfang der Seite zum Ende gelangen – und wo sie auf dem Weg anhalten werden.
Untersuchungen von NNG zeigen, dass es zahlreiche Möglichkeiten gibt, wie Menschen einen Text mit den Augen lesen. Das F-Muster zum Beispiel ist eines der häufigsten Lesemuster:
Indem du antizipierst, wohin die Augen deiner Besucher auf der Seite wandern, kannst du deine Schaltflächen in ihrem Weg platzieren.
Diese Eye-Tracking-Studien deuten auch darauf hin, dass es bestimmte Elemente gibt, die die Aufmerksamkeit der Nutzer stärker auf sich ziehen als andere – wie Überschriften und Bilder. Wenn du deine CTA-Schaltflächen richtig gestaltest, macht es nicht viel aus, wenn sie ein wenig vom gewohnten Weg abweichen.
Die Casper-Website macht sich diese beiden Prinzipien des Eye-Tracking zunutze:
Die meisten CTAs auf dieser Seite befinden sich in der Nähe des linken Seitenrands – dort, wo sich die Augen der meisten Besucher*innen konzentrieren. Wir sehen aber auch eine Reihe von CTA-Schaltflächen, die weiter außen auf der Seite platziert sind. Sie sind alle in ein auffälliges Bild eingebettet, von dem wir wissen, dass es die Aufmerksamkeit der Besucher auf sich zieht. Selbst wenn sie also nicht auf dem natürlichen Weg platziert sind, werden die Besucher sie wahrscheinlich trotzdem finden.
12. Lass deine Schaltflächen nicht um die Aufmerksamkeit konkurrieren
Diese bewährte Praxis hat mit Ablenkung zu tun. Oder besser gesagt, mit einem Mangel an Ablenkungen, so dass die Besucher*innen nicht anders können, als sich zu Ihren CTAs hingezogen zu fühlen.
Wenn du dir die Startseite der Merrill Lynch-Website ansiehst, was fällt dir als erstes auf?
Wenn du kein Kunde von Merrill Lynch bist und zum ersten Mal hierher kommst, wird dir wahrscheinlich die leuchtend rote Schaltfläche „Jetzt einsteigen“ ins Auge fallen.
Dies liegt zum Teil an der Farbe der Schaltfläche und dem großen weißen Raum um sie herum. Aber auch das umgebende Design ist teilweise dafür verantwortlich.
Die dunkelblaue Markenfarbe ist eine sichere und stabile Farbe, die die Aufmerksamkeit nicht von der roten Schaltfläche ablenken wird. Das Bild in der Mitte der Seite ist ebenfalls eine sichere Wahl. Wenn Sie ein Bild von feiernden Menschen hätten, die Geld in die Luft werfen, würde das vielleicht einen Teil der Aufmerksamkeit auf sich ziehen. Bei diesem Bild ist das aber überhaupt nicht der Fall. Wenn überhaupt, dann macht es Platz für die CTA.
13. Einen Hover-Zustand erstellen
Wir haben bereits einige Beispiele für Schaltflächen mit Schwebezustandstransformationen gesehen. Dafür gibt es einen guten Grund.
Bei flachen Schaltflächen bietet eine durch Hover ausgelöste Mikroanimation eine sofortige Bestätigung, dass du mit diesem Element arbeiten kannst. Bei nicht flachen Schaltflächen kann die Animation ein kleines Überraschungselement für die Besucher*innen sein, wenn sie es am wenigsten erwarten.
Genau wie bei der Gestaltung von Schaltflächen gibt es eine Vielzahl von Möglichkeiten, wie du eine Schaltfläche in ihrem Hover-Zustand animieren kannst:
- Ändere die Farbe
- Ändere den Text
- Ändere den Stil des Textes
- Hinzufügen oder Entfernen eines Symbols
- Ändere die Form oder Größe der Schaltfläche
Dies ist ein Artikel auf der Delish-Website, in dem die besten Dosencocktails vorgestellt werden:
Einige der Cocktails auf dieser Liste sind mit einem CTA-Button versehen, der Leser*innen auf einen Link auf Drizly verweist. Wenn Leser*innen mit dem Mauszeiger über die Schaltfläche fährt, ändert sich die Farbe von Schwarz zu Türkis (mit einer leichten Verzögerung) und der Text wechselt von einfach zu geneigt.
Es gibt so viele Möglichkeiten, das Design Ihrer Schaltfläche zu verändern. Achte nur darauf, dass es zum Rest Ihres Brandings passt.
14. Das Click-Through-Ergebnis sollte 100%ig klar sein
Der Text, der in der Schaltfläche steht, ist ebenso wichtig wie das Design der Schaltfläche.
Die erste Regel, die du bei der Auswahl des Schaltflächentextes beachten solltest, ist, dass kristallklar sein muss, was als nächstes kommt. Eine Schaltfläche mit der Aufschrift „Klicken Sie hier“ wird nicht dazu beitragen, die Zahl der Klicks zu erhöhen.
Ein Button mit der Aufschrift “ Vereinbare eine Probefahrt“, wie der auf der MINI USA Homepage, wird die Anzahl der Klicks erhöhen:
Jeder, der diese rote Schaltfläche sieht, weiß genau, was er auf der nächsten Seite finden wird: Ein Terminplanungsformular.
Denk nur daran, dass die Erwartung mit der Realität übereinstimmen muss. Daher sollte jede Schaltfläche mit der Aufschrift „Termin vereinbaren“ die Besucher auf eine Seite leiten, auf der sie einen Termin online vereinbaren können. Wenn versucht wird, die Facetime- oder Telefon-App des Geräts zu öffnen, könnte dies zu einem Anstieg der Absprungrate führen, was wiederum die Platzierung der Website beeinträchtigen kann.
Unterm Strich: Stellen Sie sicher, dass der Befehl oder die Einladung genau beschreibt, was als nächstes kommt.
15. Füg Aktionswörter in deine Buttons ein
Eine weitere gute Faustregel für Schaltflächentexte ist es, Wörter zu verwenden, die zum Handeln anregen.
Eine Möglichkeit, dies zu tun, besteht darin, den Text deines Buttons mit einem Verb zu beginnen. Anstatt einer Schaltfläche, die lautet:
„Ebook herunterladen“
sollte es heißen:
„Laden Sie Ihr Ebook herunter“.
Das ist eine stärkere Formulierung und klingt tatsächlich wie eine Aufforderung zum Handeln und nicht nur wie ein weiterer Link, auf den der Besucher*innen klicken soll.
Eine weitere Möglichkeit, zum Handeln aufzufordern, besteht darin, die Aufforderung zum Handeln persönlicher zu gestalten. Du musst ihn nicht unbedingt mit einem Haufen emotionsgeladener Worte versehen.
Nimm zum Beispiel diese Benachrichtigungsleiste auf der The Bump-Website:
Solange Besucher*innen es nicht abbricht, ist es das Erste, was er auf einer Seite sieht.
„Jetzt anmelden“ ist an und für sich kein einzigartiger Call-to-Action. Die Verwendung des Ausrufezeichens macht ihn jedoch zu einem solchen.
In der Texterstellung verwenden wir normalerweise keine Satzzeichen am Ende von Überschriften und anderen kurzen Textabschnitten wie Schaltflächen. Ein Grund dafür ist, dass jedes Zeichen zählt und wir nicht viel Platz verschwenden wollen. Es liegt aber auch daran, dass die Interpunktion für manche Menschen einen nicht so positiven Beigeschmack hat.
Wenn man die Zielgruppe einer Website wie The Bump und den Kontext berücksichtigt, in dem sie erscheint, macht das Ausrufezeichen durchaus Sinn. Eltern und werdende Eltern kommen auf diese Website, um Informationen über Schwangerschaft und Kindererziehung zu erhalten. Das ist eine aufregende Sache, aber manchmal auch ziemlich überwältigend. Der Aufruf, der Bump-Gemeinschaft beizutreten – mit Menschen, die genau das Gleiche durchmachen! – ist ein Grund, sich zu freuen.
16. Benutze Wörter, die im Kontext der Seite einen Sinn ergeben
Es gibt Ausnahmen von den beiden oben genannten Best Practices – nicht für primäre CTAs, aber sicherlich für sekundäre und tertiäre. Es hängt alles vom Kontext ab, in dem die Schaltfläche angezeigt wird.
Schauen wir uns dieses Beispiel auf der Tuft & Needle-Homepage an:
In den oberen Bereichen der Homepage wird zu „Jetzt einkaufen“ aufgerufen. Das macht dort oben Sinn. Aber hier unten, näher an der Fußzeile, brauchen wir diese Art von Schaltflächentext nicht.
Sieh dir den CTA auf der linken Seite an. Alles, was sie sagt, ist „Los geht’s!“. Für sich genommen macht das wenig Sinn. Aber Besucher*innen, die den obigen Text lesen, wissen, dass die Schaltfläche „Zur“ Zielseite führt.
Denk also nicht, dass du immer einen actiongeladenen Text für die Schaltfläche schreiben musst, wenn der umgebende Text die Besucher zum Handeln auffordert.
17. Mach dir keinen Stress über die Anzahl der Wörter im Button
Es gibt im Allgemeinen keine Regeln dafür, wie viele Wörter deine Schaltfläche enthalten muss, um die Anzahl der Klicks zu erhöhen. Es hängt wirklich nur vom Zweck der Schaltfläche und vom Kontext ab.
Die von uns am häufigsten verwendeten CTAs sind zum Beispiel kurz und bündig:
- Kontakt aufnehmen
- In die Tasche stecken
- Abonnieren
Wir müssen keine weiteren Informationen um oder in den Schaltflächen bereitstellen, weil es kein Geheimnis ist, was als nächstes passiert. Aber für vollständig benutzerdefinierte Calls-to-Action ist vielleicht eine längere Schaltfläche erforderlich.
Der Sumo-Blog hat zum Beispiel kürzlich einen Beitrag über die Durchführung eines Social-Media-Audits veröffentlicht. In dem Beitrag befindet sich diese lange CTA:
Sie lautet: „Holen Sie sich ein Exemplar von Sumos Social Media Audit-Vorlage“.
Diese Art von CTA hätte zwar auch als normaler Hyperlink in den Beitrag eingefügt werden können, aber durch die große grüne Schaltfläche ist sie viel leichter zu erkennen. Und die ausführlichere Erklärung innerhalb der Schaltfläche stellt sicher, dass die Besucher*innen wissen, was sie auf der anderen Seite der Schaltfläche finden werden.
Eine Sache, die du beachten solltest, ist, wie sich mehr Text auf die Größe der Schaltfläche auswirkt. Wenn du die Schriftgröße verkleinern musst, damit alles in eine Zeile passt, ist er vielleicht zu lang.
18. Achte auf die Richtungsangaben
Wenn du eine Webseite entwirfst, weißt du, dass sich die Besucher automatisch in eine bestimmte Richtung bewegen werden. Du weißt auch, dass du, wenn du die Seite auf eine bestimmte Art und Weise gestaltest, ihre Augen aktiv in die Richtung lenken kannst, in die sie gehen sollen.
Auch die Schaltflächen können dies tun.
Auf der Visit Music City-Website sehen wir eine Reihe von Möglichkeiten, wie dies in die Tat umgesetzt wurde:
Die erste ist eine nach rechts gerichtete Pfeilspitze mit dem Wort „Weiter“ darunter.
Wir sehen auch, dass die „Mehr erfahren“-Text-CTAs nach rechts gerichtete Pfeile haben. Wenn man jedoch mit dem Mauszeiger über sie fährt, zeigen die Pfeilspitzen weiter nach rechts.
Und dann ist da noch die rote CTA-Schaltfläche. Von außen betrachtet, scheint das Design der Schaltfläche keine Richtungsangaben zu enthalten. Wenn du jedoch mit dem Mauszeiger darüber fährst, wechselt die Farbe von hellrot zu dunkelrot, wobei der Farbwechsel von links nach rechts verläuft.
Diese Richtungshinweise tragen dazu bei, eine Website zu schaffen, die aktiver wirkt, als wäre sie ständig in Bewegung und würde Sie mitreißen.
19. Verwendung von Designs mit inaktivem Status für Ihre Formulare
Anstatt die Schaltflächen aktiv zu halten, wenn sie vom ordnungsgemäßen Ausfüllen eines Formulars abhängig sind, sollten Sie einen inaktiven Status für Ihre Schaltflächen erstellen.
Minted zeigt uns eine Möglichkeit, dies zu tun:
Das Anmeldeformular am Ende der Seite hat eine verblasste Schaltfläche „Anmelden“. Du leuchtest erst dann grün auf, wenn du eine E-Mail-Adresse angegeben hast.
VSP hat eine andere Möglichkeit, dies zu handhaben:
Besucher*innen können erst dann auf „Pläne ansehen“ oder „Mehr erfahren“ klicken, wenn sie eine Antwort in das Formular eingegeben haben. Wenn sie dies tun, wird die inaktive Schaltfläche blau, und sie können mit der Übermittlung ihrer Anfrage fortfahren.
Diese Art von CTA-Schaltfläche zwingt die Besucher*innen dazu, etwas langsamer zu machen, was bedeutet, dass sie weniger Fehlermeldungen erhalten und weniger Frustration ertragen müssen.
A/B-Tests für deine CTA-Buttons
Die CTA-Schaltfläche ist ein wichtiges Element, das die Besucher*innen von verschiedenen Bereichen Ihrer Website zu anderen Bereichen führt – und im Idealfall bis hin zur Konversion. Die einzige Möglichkeit, um sicherzustellen, dass die Klicks und Konversionen für dein spezifisches Publikum maximiert werden, besteht darin, Variationen davon zu testen.
Im Folgenden findest du einige grundlegende Schritte, die du beim A/B-Test deines Schaltflächendesigns befolgen solltest:
Schritt 1: Erstellung deiner Hypothese
Jeder Test muss mit einer Hypothese beginnen.
Selbst wenn deine Seite und deine Schaltfläche Klicks erhalten, glaubst du, dass es etwas gibt, das die Leute zurückhält? Wenn ja, warum?
Du kannst Google Analytics und Heatmapping-Tools wie Hotjar verwenden, um deine Hypothese zu erstellen.
Mit Google Analytics musst du Ziele einrichten, damit du die Klicks auf einzelne Schaltflächen verfolgen kannst. Sobald Sie die Aktivität der Schaltfläche isoliert haben, segmentierst du die Nutzer*innen und findest heraus, ob es bestimmte Personen gibt, die nicht konvertieren.
Hotjar hilft dir mit Heatmaps und Sitzungsaufzeichnungen zu visualisieren, was mit deinen Buttons passiert:
Du wirst nicht die Möglichkeit haben, so viel zu segmentieren wie mit Google, aber die Daten können trotzdem nützlich sein.
Schritt 2: Wähl ein Element zum Testen
Sobald du eine Vorstellung davon hast, was deine Klickraten verbessern könnte, wähle ein Element aus, das du testen möchtest. Zum Beispiel:
- Farbe
- Schriftart
- Schriftgröße
- Icon oder kein Icon
- Umrandung oder keine Umrandung
- Größe der Schaltfläche
- Platzierung der Schaltfläche
- Gestaltung des Hover-Status
- Kopieren
Indem du ein Element nach dem anderen testest, kannst du das Design deines Buttons Stück für Stück verfeinern und es so nah wie möglich an die Perfektion heranführen. Nach dem Test gibt es auch keine Zweifel mehr darüber, welche der Designänderungen deine Konversionsrate verbessert oder verschlechtert hat.
Schritt 3: Stell sicher, dass deine CTA-Schaltfläche in einem leicht zu bearbeitenden Format ist
Dies mag nicht als große Sache erscheinen, aber du wirst eine Menge A/B-Tests mit deinen CTA-Schaltflächen durchführen. Du möchtest also, dass sie in einem Format erstellt werden, das leicht zu ändern ist – und das dir die Flexibilität gibt, jede beliebige Variation zu testen.
Das Call-to-Action-Widget von Elementor ist dafür eine gute Lösung, wenn du einen Block mit einem CTA-Button darin erstellen möchtest. Du kannst auch das Button-Widget verwenden, um einen Button in deinem Design oder Text zu platzieren.
Schritt 4: Einrichten und Ausführen der A/B-Tests.
Wir haben dem A/B-Testing einen ganzen Leitfaden gewidmet. Darin stellen wir dir verschiedene Tools vor, mit denen du deine Designs sowohl innerhalb als auch außerhalb von WordPress einem A/B-Test unterziehen kannst.
Du bekommst eine Aufschlüsselung der Schritte für beide Optionen. Für Google Optimize:
- Erstellung Ihrer ursprünglichen Variante
- Fügen Google Analytics und Google Optimize zu deiner Website hinzu
- Erstellen eines A/B-Test in Google Optimize
Für Elementor und das Plugin Split Test für Elementor:
- Erstelle einen neuen Test
- Test in Elementor einrichten
- Testergebnisse anzeigen
Übrigens, wenn du versuchst, nicht zu viele externe Tools für die Erstellung und Verwaltung deiner Website zu verwenden, bietet Elementor das gesamte Design- und Marketingpaket – und das nicht nur, wenn es um A/B-Tests geht.
Schritt 5: Überwach die Ergebnisse deines A/B-Tests und aktualisiere deinen Button
Leg vor der Durchführung des Tests ein Enddatum und/oder eine Stichprobengröße fest, bei der du aufhören möchtest. Ohne einen definitiven Endpunkt wird Ihr A/B-Test keine genauen Ergebnisse liefern.
Prüfe deinen durchschnittlichen Webseiten-Traffic sowie die aktuellen Klickraten (CTR) für diese Schaltfläche während des von dir gewählten Zeitrahmens. Zum Beispiel:
Zeitrahmen: 4 Wochen (1. Dezember – 31. Dezember)
Durchschnittliches Verkehrsaufkommen: 3.000 Besucher*innen
Durchschnittliche CTR: 3% (90 Besucher)
Das Ziel deines Tests sollte derselbe Zeitraum sein, und du solltest anstreben, dass in diesem Zeitraum ungefähr so viele Besucher*innen getestet werden. 50 % sehen dein ursprüngliches Schaltflächendesign und 50 % sehen deine Variante.
Wenn der Test abgeschlossen ist, kannst du damit beginnen, die Ergebnisse auszuwerten.
Du wirst die Anzahl der Conversions und die Conversion Rate für deine Variante mit dem Originaldesign vergleichen. Du hoffst, dass die Variante besser abschneidet als das ursprüngliche Design und damit deine Hypothese bestätigt, dass das Design für den Nutzer effektiver ist. Es ist in Ordnung, wenn das nicht der Fall ist. Es ist so oder so eine wertvolle Lektion.
Allerdings bedeutet eine höhere Konversionsrate allein noch nicht, dass die Variante ein Gewinner ist. Es muss ein signifikanter Unterschied zwischen den Zahlen bestehen. Dies ist einer der Gründe, warum du eine große Stichprobe von Besuchern brauchst.
Nehmen wir an, dies ist unser A/B-Test:
Mit einer um vier Prozentpunkte höheren Konversionsrate scheint die Variante der klare Gewinner zu sein. Aber wenn man sich die Daten genauer ansieht, ist ein Unterschied von 2 Konversionen bei einem Pool von 50 Besuchern nicht sehr aussagekräftig.
Dieser A/B-Test hingegen würde dir einen klaren Gewinner in Bezug auf das Design der Schaltfläche liefern:
Achte also genau auf den Kontext deiner Ergebnisse. Wenn du das nicht tust, kann es passieren, dass du ein neues CTA-Schaltflächendesign implementierst, das die CTR und die Konversionsrate deiner Seite beeinträchtigt.
Fazit
CTA-Buttons gehören vielleicht zu den kleineren Elementen auf deiner Website, aber sie können leicht zu großer Frustration bei deinen Nutzer*innn führen, wenn sie schwer zu finden oder zu benutzen sind. Diese Frustration kann deine Klick- und Konversionsraten senken und auch deine Absprungraten erhöhen.
Wenn du das Risiko minimieren und den Nutzen deiner CTA-Schaltflächen maximieren möchtest, solltest du sicherstellen, dass jeder Zentimeter davon gut gestaltet ist. Und dann optimierst du das Design, bis du die perfekte Kombination von Elementen – von der Farbe der Schaltfläche bis zum Text – für deine Zielgruppe gefunden hast.
Übersetzt von Lisa Kraus
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/cta-button-design
