Buttons, Handlungsempfehlungen und Beispiele

Aktionsschaltflächen auf Websites werden häufig vernachlässigt. Designer verstehen manchmal nicht genau, was eine gute Handlungsaufforderung macht, außer attraktiv und in das Gesamtdesign zu passen. Call-to-Action-Buttons sind jedoch zu wichtig, um sie zu verstehen, ohne zu wissen, was sie effektiv macht. Schließlich ist der Hauptpunkt einer Call-to-Action-Schaltfläche der Besucher tun etwas.

Es ist wichtig, mindestens ein grundlegendes Verständnis dafür zu erlangen, wie Farbe, Maßstab, Sprache und andere Faktoren die Conversion-Rate einer Call-to-Action-Schaltfläche beeinflussen. Die Konzepte hier sind nicht kompliziert, aber sie erfordern ein wenig Voraussicht und Planung, um die effektivsten Aktionsschaltflächen innerhalb eines bestimmten Entwurfs zu erstellen. Lesen Sie weiter für weitere Informationen zu diesen Punkten und mehr.

Der Zweck der Schaltflächen "Aufruf zur Aktion"

Aufrufen von Aktionstasten können verschiedene Funktionen erfüllen. Letztendlich, “Aufruf zum Handeln” ist wirklich ein bisschen vage. Alles was es bedeutet ist, dass es der Hauptzweck ist, einen Besucher auf Ihre Website zu bringen etwas tun. Dieses Produkt könnte ein Produkt in den Warenkorb legen, etwas herunterladen, Informationen anfordern oder einfach nur etwas anderes.

Da Call-to-Action-Buttons zu unterschiedlichen Zwecken eingesetzt werden, muss überlegt werden, was der Button erreichen soll. Der Site-Typ, der Zielmarkt und die gewünschte Aktion können alle dazu beitragen, eine Call-to-Action-Schaltfläche am besten zu gestalten.

Arten von Schaltflächen "Aufruf zur Aktion"

Es gibt verschiedene Arten von Aufrufen von Aktionstasten. Während jeder Typ darauf abzielt, dass Besucher eine bestimmte Aktion ausführen, kann sich diese Aktion erheblich unterscheiden. Nachfolgend sind die häufigsten Arten von Aktionsschaltflächen aufgeführt, die auf der gewünschten Aktion basieren.

1. In den Warenkorb legen Buttons

E-Commerce-Websites verwenden im Allgemeinen eine Reihe von Aktionsschaltflächen, die am häufigsten verwendete ist jedoch die “in den Warenkorb legen” Taste. Diese Schaltflächen werden im Allgemeinen auf einzelnen Produktseiten angezeigt. Sie dienen dazu, Kunden zum Kauf eines Artikels zu bewegen. Übliche Designelemente in den Einkaufswagen-Schaltflächen enthalten einfache Formulierungen (z. B. “in den Warenkorb legen” oder “Der Tasche hinzufügen” oder “Kaufe jetzt“) und die Verwendung von Symbolen (normalerweise eine Tasche oder ein Wagen).

2. Schaltflächen herunterladen

Download-Schaltflächen ähneln den Einkaufswagen-Schaltflächen darin, dass sie versuchen, einen Besucher dazu zu bewegen, einen Artikel in Besitz zu nehmen. Bei Download-Schaltflächen entscheiden sich viele Designer für mehr Informationen als andere Schaltflächentypen (z. B. Versionsinformationen oder Download-Größe)..

3. Testschaltflächen

Einige Websites versuchen, ihre Besucher dazu zu bewegen, ihre Angebote zu testen, im Allgemeinen in Form einer kostenlosen Testversion. Dies kann je nach Website ein kostenloser Download oder ein kostenloses Konto sein. Einige Sites verwenden die “weniger ist mehr” Philosophie und halten Sie die Sprache auf den Knöpfen auf einem Minimum, während andere gerne mehr Informationen über den Inhalt der Studie anbieten.

4. Erfahren Sie mehr Schaltflächen

Weitere Informationen-Schaltflächen werden im Allgemeinen am Ende eines Blocks mit Teaser-Informationen verwendet (häufig auf der Startseite). Diese Schaltflächen sind normalerweise einfach, aber oft übergroß, um die Aufmerksamkeit der Besucher auf sich zu ziehen.

5. Tasten anmelden

Anmeldeschaltflächen werden am häufigsten in zwei verschiedenen Versionen angezeigt. Der erste Typ ist normalerweise direkt mit einem Anmeldeformular verknüpft. Der zweite Typ wird normalerweise auf ähnliche Weise wie verwendet “in den Warenkorb legen” Schaltflächen, als Möglichkeit für Benutzer, einen Dienst oder ein Konto zu erwerben oder sich anzumelden, bevor sie tatsächlich ein Anmeldeformular erreichen.

Es gibt andere Arten von Aktionsschaltflächen, diese sind jedoch am häufigsten. Richtlinien, die für die oben genannten gelten, gelten wahrscheinlich auch für andere Arten von Aktionsschaltflächen, die Sie entwerfen.

Negatives Leerzeichen effektiv nutzen

Sie möchten, dass Ihre Aktionsschaltflächen sich von den umliegenden Inhalten abheben und die Aufmerksamkeit der Besucher Ihrer Website auf sich ziehen. Zu diesem Zweck müssen Sie negativen Platz um diese Schaltflächen herum verwenden. Fügen Sie Leerzeichen zwischen Ihren Inhalten und Ihrer Aktionsschaltfläche ein. Dies ist zwar bei einigen Schaltflächen weniger wichtig (und weniger üblich), z. B. beim Hinzufügen von Einkaufswagen-Schaltflächen, bei anderen, z. B. zum Erlernen von mehr, arbeiten Sie mit mehr Platz besser.

Es ist wichtig, den negativen Abstand zwischen den Tasten und der Größe der Tasten selbst auszugleichen. Es geht um Proportionen. Sie möchten, dass Ihre Schaltfläche, der Platz um sie herum und der umgebende Inhalt so aussehen, als würden sie zusammenpassen, auch wenn die Größe unterschiedlich ist. Möglicherweise müssen Sie etwas mit den Dingen herumspielen, um sie richtig aussehen zu lassen.

Einige Richtlinien:

Stellen Sie sicher, dass um Ihren Knopf herum genügend Platz vorhanden ist, damit er sich nicht überladen fühlt
Berücksichtigen Sie Prinzipien wie die Drittelregel oder den Goldenen Schnitt, wenn Sie bestimmen, wie viel Platz Sie einschließen möchten
Negatives Leerzeichen gibt Ihrem Handlungsaufruf die Möglichkeit, sich von Ihren anderen Inhalten abzuheben, und unterscheidet sich von diesen

Größe und Farbe

Es ist sehr wichtig, wie groß die Call-to-Action-Buttons sind. Ein zu großer Knopf wird alles um ihn herum überwältigen. Eine zu kleine Schaltfläche geht beim Mischen aller anderen Inhalte einer Seite verloren. Sie möchten, dass Ihr Knopf groß genug ist, um hervorzuheben, ohne das Design zu überfordern.

Farbe kann für einen großartigen Effekt verwendet werden, um die Größe Ihrer Tasten auszugleichen. Wählen Sie für größere Schaltflächen eine Farbe, die in Ihrem Design weniger ausgeprägt ist (der Hintergrund jedoch immer noch hervorsticht). Für eine kleinere Schaltfläche möchten Sie möglicherweise eine hellere, kontrastreiche Farbe auswählen, um die Schaltfläche wirklich zum Popup bringen zu lassen. Vergewissern Sie sich in beiden Fällen, dass die von Ihnen verwendete Farbe die Schaltfläche voneinander unterscheidet, ohne mit dem Gesamtdesign der Website in Konflikt zu geraten.

Einige Richtlinien:

Ihre Call-to-Action-Buttons sollten idealerweise die größten Buttons auf einer bestimmten Seite sein
Verwenden Sie kontrastierende Farben, um kleinere Tasten hervorzuheben
Verwenden Sie weniger eindeutige Farben, um übergroße Knöpfe besser in den Rahmen zu bringen
Sie rufen Action-Buttons auf, die Aufmerksamkeit erfordern, ohne Ihr Design zu überfordern

Sprache

Der genaue Wortlaut, den Sie in Ihren Aktionsschaltflächen verwenden, kann die Konvertierung erheblich beeinflussen. Vergleichen Sie “Kaufe jetzt” mit “in den Warenkorb legen“. Einer ist viel dringender als der andere. Oder wie wäre es damit? “Versuchen Sie es kostenlos” mit “Kostenlose Testphase“? Einer ist viel schlagkräftiger als der andere und sticht mehr hervor.

Die Sprache, die Sie in Ihrem Aufruf von Aktionstasten verwenden, sollte so einfach und einfach wie möglich sein. Sie möchten, dass Besucher mit einem Blick genau wissen, was sie beim Klicken auf eine Schaltfläche erhalten. Wenn sie es in Frage stellen, bedeutet das, dass sie pausiert haben, was zu niedrigeren Konversionsraten führen kann.

Vergessen Sie auch nicht Ihre Schriftgröße. Der Text Ihres Call-to-Action-Buttons sollte groß und fett sein und der Größe und Farbe des Buttons selbst entsprechen. Stellen Sie sicher, dass ausreichend Kontrast vorhanden ist und der Text gut lesbar ist.

Einige Richtlinien:

Verwenden Sie eine einfache, direkte Sprache
Verwenden Sie für den Haupttext eine große, fette Schrift auf der Schaltfläche
Stellen Sie sicher, dass die Sprache eindeutig eine bestimmte Aktion erfordert

Dringlichkeit schaffen

Sie möchten, dass Besucher Ihrer Website die gewünschten Aktionen mit möglichst wenig Nachdenken durchführen. Während Sie Ihre Besucher nicht täuschen möchten, gilt: Je mehr Möglichkeiten Sie haben, anzuhalten und zu überlegen, was sie tun, desto mehr Möglichkeiten geben Sie ihnen zu sagen “Nein”.

Sie möchten, dass Ihre Knöpfe ihnen den Eindruck vermitteln, dass sie sofort handeln müssen. Sie möchten sie dazu ermutigen, ihre Entscheidung sofort und spontan zu treffen. Dies funktioniert zwar nicht bei jedem Aufruf zur Aktion (insbesondere beim Kauf von Artikeln mit hohem Ticketpreis), aber für kostengünstige oder kostenlose Aktionen ist es wünschenswert, dass Besucher mit wenig Voraussicht auf etwas klicken.

Einige Richtlinien:

Ermutigen Sie Ihre Besucher, sofort zu handeln
Geben Sie Ihren Besuchern keinen Grund zur Pause
Obwohl Dringlichkeit wichtig ist, sollten Sie Ihre Besucher keinesfalls in die Irre führen

Zusätzliche Informationen angeben

Verwenden Sie gegebenenfalls die Aktionsschaltflächen, um den Besuchern zusätzliche Informationen darüber zu geben, was sie erhalten, wenn sie auf die Schaltfläche klicken. Dies ist am häufigsten bei Test- oder Download-Schaltflächen zu sehen. Häufige Beispiele für zusätzliche Informationen sind die Dauer der kostenlosen Testversion oder die Größe eines Dateidownloads. Versionsinformationen werden häufig auch angezeigt.

Denken Sie beim Hinzufügen zusätzlicher Informationen daran, dass Sie sich auf den eigentlichen Handlungsaufruf konzentrieren müssen. Stellen Sie sicher, dass der Text für die Sprache, die die Besucher zum Handeln anregt, am deutlichsten ist, wobei andere Informationen weniger sichtbar sind.

Einige Richtlinien:

Fügen Sie nur zusätzliche Informationen hinzu, wenn diese zur Benutzererfahrung beitragen
Zusätzliche Informationen sind nur für einige Arten von Aktionsschaltflächen verfügbar, insbesondere Download- oder Testschaltflächen
Stellen Sie sicher, dass der Hauptaufruf zum Handeln immer noch der auffälligste Text auf Ihrer Schaltfläche ist

Priorisieren

Es ist wichtig, den Aufruf von Aktionsschaltflächen auf Ihrer Seite zu priorisieren, wenn mehr als eine vorhanden ist. Dies kann auf verschiedene Arten erfolgen, am häufigsten werden jedoch Farbe und Größe verwendet.

Verwenden Sie Farbe, um die wichtigste Schaltfläche auf einer Seite hervorzuheben oder um die weniger wichtigen hervorzuheben. Oder verwenden Sie die Größe, um die wichtigste Schaltfläche hervorzuheben (indem Sie sie größer machen) und die weniger wichtigen Tasten zu betonen.

Icons und Bilder

Durch das Einfügen von visuellen Hinweisen in Ihre Aktionsschaltflächen können Sie auch die Conversion-Raten erhöhen. Ein Symbol eines Einkaufswagens auf “in den Warenkorb legen” B. ein Button oder ein Pfeil auf einem Download-Button sind gute Beispiele. Denken Sie auch an einzigartige Symbole, die Sie verwenden möchten. Stellen Sie jedoch sicher, dass das Symbol zur Benutzererfahrung beiträgt, indem Sie den Zweck der Schaltfläche klarstellen und keine Verwirrung verursachen.

Einige Richtlinien:

Stellen Sie sicher, dass die Symbole, die Sie verwenden, die Bedeutung der Schaltfläche erläutern, anstatt sie zu verwirren
Leicht erkennbare Symbole können Ihren Besuchern sofort die Bedeutung anzeigen
Scheuen Sie sich nicht, weniger häufig verwendete Symbole zu verwenden, solange deren Bedeutung noch klar ist

Beispiele

Hier sind ein paar Beispiele für großartige Call-to-Action-Buttons. Obwohl sie nicht alle perfekt den oben genannten Richtlinien entsprechen, erfüllen sie genug Kriterien, um als großartig zu gelten.

Liveübertragung - Es ist eine gute Strategie, die Schaltflächen "Jetzt kaufen" (für kostenpflichtige Optionen) und "Anmelden" (für kostenlose Optionen) zu unterscheiden.

Windows 7 - Der große, grüne "Get Windows7" -Button ist für Besucher leicht zu erkennen.

Fileshare HQ - Der hellgrüne Knopf hebt sich hier wirklich vom weißen Hintergrund ab.

Logbuch - Durch die Verwendung verschiedener Farben für die Schaltflächen "Download" und "Kaufen" werden diese unterschieden und der Schaltfläche "Kaufen" Priorität eingeräumt.

TasteBook - Diese Schaltfläche verwendet ein Symbol und verwendet einen größeren, fetten Text, um hervorzuheben.

GoodBarry - Ein weiterer hellgrüner Call-to-Action-Button.

Lebensbaum-Creative - Wenn Sie die gleiche Schriftart von der Hauptteilkopie bis zur Schaltfläche Aufruf zur Aktion fortsetzen, entsteht ein Gefühl der Kohäsion.

Der Resumator - Eine leuchtend rote Handlungsaufforderung mit fetter Schrift hebt sich vor dem blauen Hintergrund ab.

Notepod - Ein gutes Beispiel für das Einfügen zusätzlicher Informationen in eine Aktionsschaltfläche.

Inkd - Ein gutes Beispiel für die Priorisierung von Schaltflächen mit Größe.

Elegante Themen - Ein weiteres hervorragendes Beispiel für die Verwendung von Farbe, um sich von den umliegenden Designelementen abzugrenzen.

ZenDesk - Ein weiteres gutes Beispiel dafür, wie ein Knopf mit Farbe hervorgehoben wird.

Storenvy - Ein runder Knopf ist unerwartet und fällt besonders auf, wenn er von einem weißen Rand umgeben ist.

Bara'Mail - Manchmal funktioniert eine Schaltfläche, die sich anpasst, im gesamten Website-Design besser, insbesondere wenn die Aktion weniger dringlich ist.

Mehr Ressourcen

Call to Action-Schaltflächen: Beispiele und Best Practices - aus dem Smashing Magazine
Gute Call-to-Action-Tasten - von UX Booth
Call-to-Action-Buttons: Ist Größe von Bedeutung? - Von Get Elastic
10 Techniken für ein effektives “Aufruf zum Handeln” - Von Boagworld
5 Tipps zum Erstellen eines effektiven Aufrufs zur Aktion - von SitePoint aus