5 Tipps zum Entwerfen eines erfolgreichen Buy-Buttons

Wenn Sie Designer oder Online-Vermarkter sind oder zufällig eine Website besitzen, auf der Sie etwas verkaufen möchten, müssen Sie irgendwann einen richtigen "Kaufen-Button" entwerfen. Und dann werden Sie schnell herausfinden, dass Sie einfach eine “kaufe jetzt” Text auf einem blauen Rechteck reicht einfach nicht aus, wenn Sie auf gute Ergebnisse hoffen.

Glücklicherweise ist das Entwerfen eines richtigen "Kauf-Buttons" nicht so schwierig, wenn Sie ein wenig Grundwissen kennenlernen. Hier geht.

Vor allem die Text auf Ihrer Schaltfläche ist das Wichtigste, Es gibt jedoch einige andere Funktionen, die angesprochen werden müssen. Warum sage ich, dass der Text am wichtigsten ist? Stellen Sie sich das vor - was ist der Sinn eines schön gestalteten Buttons, wenn der Text darauf steht “Fahr zur Hölle!”? Fall abgeschlossen. Gute Kopie ist, wo die Gelder gemacht werden.

Im heutigen Artikel diskutieren wir 5 entscheidende Merkmale von einem richtigen "Buy-Button". Lass uns einen Blick darauf werfen!

1. Gesamtstil

Dies ist der Nr. 1-Punkt auf dieser Liste, nicht ohne Grund, da dies das wichtigste Merkmal ist.

Du möchtest verwandeln Sie Ihren Knopf in eine lila Kuh. Dies ist ein von Seth Godin populärer Begriff. Kurz gesagt, Sie möchten, dass es bemerkenswert ist; mit bemerkenswert meine ich etwas, das nicht übersehen werden kann. So etwas wie eine lila Kuh mitten auf einer Weide.

Einige Designer sind nicht besonders gut darin. Es ist verlockend, eine Schaltfläche zu erstellen, die sich wunderbar mit den Farben und dem Stil der Website verbindet, auf der sie sich befindet. Zunächst scheint es eine sehr gute Idee zu sein, nur nicht.

Das Problem ist, dass ein solcher Button alles andere als bemerkenswert ist. Sie möchten nicht, dass Ihre Schaltfläche eingeblendet wird. Sie möchten, dass es hervorsticht. Daher sollte es als völlig separates Element erstellt werden, das zufällig auf einer Website angezeigt wird, nicht als etwas, das mit dieser Website übereinstimmen muss.

Lassen Sie mich nur ein gutes Beispiel für einen lila Kuhknopf geben.

Mozilla Firefox

So sieht eine Firefox-Download-Seite aus. Ich möchte, dass Sie eine Sache bemerken. Die Schaltfläche auf der linken Seite, die Schaltfläche zum Herunterladen, sieht auf dieser Seite nicht anders aus. Es ist das einzige grüne Ding. Es ist der einzige Ort, der das Firefox-Logo präsentiert. Es ist eines der größten Elemente dort. Es befindet sich oberhalb der Falte.

Alle diese Eigenschaften machen diese Schaltfläche extrem sichtbar. Es ist eine lila Kuh. Wenn Sie sagen, dass Sie es nicht sehen, versuchen Sie einfach jemanden zu beeindrucken.

In einer Nussschale: Bemühen Sie sich, einen bemerkenswerten Knopf zu haben.

2. Aussehen

Lass uns beginnen mit die Farbe.

Wenn Sie bemerkenswert sein möchten, verwenden Sie eine Farbe, die an keiner anderen Stelle der Seite verwendet wurde. Genauso wie Firefox-Jungs auf ihrer Website. Sie können ein Tool wie Color Scheme Designer verwenden, um eine Farbe zu finden, die mit dem aktuellen Farbschema Ihrer Website gut aussieht, aber immer noch sehr unterschiedlich ist.

Und “anders” ist das Stichwort hier. Wenn Ihre Website überwiegend blau ist, möchten Sie keinen blauen Kauf-Button. Du willst keine Blautöne. Sie wollen nichts, was bläulich aussieht. Sie wollen Rosa, Orange usw. Ich bin sicher, dass Sie den Punkt verstehen.

Noch ein Trick. Orange ist als die sichtbarste Farbe direkt nach Rot bekannt. Aber nicht alle negativen Emotionen, die Rot auslöst (Dinge wie “halt”, “Achtung!”, und “Achtung”). Die beliebteste orangefarbene Schaltfläche im Internet finden Sie unter amazon.com.

Das nächste worauf man sich konzentrieren möchte ist die Größe der Schaltfläche. Nun, was soll ich sagen, es muss groß sein. Je größer es ist, desto besser. (Wieder Firefox-Beispiel.)

“Kann ich es noch größer machen??” ist eine gute Frage, die Sie während der Entwurfsphase stellen sollten. Mach es viel.

Sollte es sein einfach oder auffällig? Ein Knopf kann nicht zu auffällig sein. Schauen Sie sich noch einmal den Firefox-Button an. Es ist auffällig. Es hat einen orangefarbenen Fuchs, aber es sieht immer noch aus wie ein Knopf. Und das ist eine Grenze, die Sie nicht überschreiten können. Wenn Ihre Schaltfläche nicht so aussieht, als würde jemand darauf klicken.

Deshalb gibt es keine einfache Antwort auf die bessere - auffällig oder einfach. Sie müssen nur selbst herausfinden. Test immer teilen. Erstellen Sie zwei Schaltflächen, eine auffällige und eine einfache. Verwenden Sie beide gleichzeitig und sehen Sie, welche die bessere Leistung bringt. Das Google Website-Optimierungstool hilft Ihnen dabei.

Nur ein kurzes Beispiel für eine einfache Schaltfläche.

ThemeFuse

Wie Sie sehen, verwendet der Button keine orangefarbenen Füchse, ist aber dennoch gut sichtbar. Tatsächlich bietet ThemeFuse (ein Premium-WordPress-Theme-Store, an dem ich teilnehme) ein kleines Programm namens Shortcodes. Unter anderem ermöglichen diese Shortcodes das Erstellen gut aussehender Schaltflächen.

Zum Beispiel mit nur einer Zeile aus:

[button link = "domain.com"] Klicken Sie hier, um mein fantastisches Produkt zu kaufen! [/ button]

Ich bekomme dieses Ergebnis:

3. Schriftart

Serifenlose Schrift ist der Standard für alle Arten von Tasten. Das liegt daran, dass serifenlose Schriftarten für jeden Online-Gebrauch sehr gut lesbar sind. (Auf der anderen Seite sind Serifenschriften für gedruckte Publikationen besser geeignet.)

Sie möchten, dass die Kopie auf Ihrer Schaltfläche so gut wie möglich lesbar ist, da es sich um den wichtigsten Text auf der Seite handelt. All-Caps sind keine gute Idee. Mixed-Case funktioniert viel besser. Mit gemischten Buchstaben meine ich, dass der erste Buchstabe jedes Wortes ein Großbuchstabe ist. (Außer für Wörter wie “zum”, “das”, “und”, usw.)

(Bildquelle: Gomediazine)

Einige sichere Schriftarten, die Sie verwenden können, sind: Arial, Helvetica, Franklin Gothic, Myriad oder jede andere klassische Sans-Serif-Schrift.

Was ist nun mit der Farbe? Die Kopie sollte natürlich in einem starken Kontrast zur Farbe der Schaltfläche stehen. Du willst nicht grau auf grau. Sie möchten Schwarz auf Weiß oder Blau auf Orange.

Wieder muss der Text gut lesbar sein.

4. Platzierung

Die beste Platzierung hängt vom Design Ihrer Website ab, was wahrscheinlich nicht überraschend ist. Es gibt jedoch noch einige Regeln, die es wert sind, eingehalten zu werden.

Legen Sie es in die naheliegendster Ort möglich. Versuchen Sie nicht, hier kreativ zu sein. Die Platzierung sollte für den Kunden / Benutzer offensichtlich sein.

Jedes Mal, wenn jemand die Website besucht, erwartet er bestimmte Dinge an bestimmten Orten. Dinge wie: Logo in der oberen linken Ecke, Warenkorbzusammenfassung in der oberen rechten Ecke, Urheberrechtsklausel in der Fußzeile usw. Sie müssen herausfinden, was der naheliegendste Ort für einen Kaufknopf ist, und ihn einfach dort ablegen.

Natürlich muss es gleichzeitig der sichtbarste Ort sein. Dies bedeutet zwei Dinge:

1. Es absolut muss platziert werden oberhalb der Falte, und
2. Fürchte dich nicht vor Leerzeichen. Whitespace ist ein Freund eines jeden guten Webdesigners. Denken Sie daran, es spielt keine Rolle, wie viel Sie auf einer Website platzieren können. Was zählt, ist, wie viel Sie davon entfernen können.

Sie können Ihre Platzierungsstrategie auf Steroide setzen, indem Sie die Schaltfläche duplizieren und am unteren Rand der Seite platzieren. Auf diese Weise können Personen, wenn sie die gesamte Seite durchlesen, unten noch etwas unternehmen.

5. Zusätzliche Elemente

Dies ist das Sahnehäubchen. Zusätzliche Elemente verbessern die Sichtbarkeit Ihres Knopfes noch weiter. Beispiele für Elemente: Pfeile, Einkaufswagen, Lupen, Pluszeichen oder verschiedene Branding-Elemente.

Mein Lieblingsbeispiel - das Firefox-Beispiel - verwendet ein wirklich cooles Zusatzelement - den orangefarbenen Fuchs (auch bekannt als Logo)..

Eine Faustregel ist die Verwendung zusätzlicher Elemente Betonen Sie den Zweck der Schaltfläche. Zum Beispiel funktionieren zwei nach unten zeigende Pfeile für eine Download-Schaltfläche. Ein Einkaufswagen-Symbol funktioniert gut mit einer Add-to-Cart-Schaltfläche (das Amazon-Beispiel oben). Lupe funktioniert gut mit einer Suchtaste. Und so weiter.

Sie können auch einige Branding-Elemente verwenden. Zum Beispiel: Standard-RSS-Symbol mit einer Schaltfläche zum Abonnieren von Feeds, ein Vogelsymbol mit einer Follow-me-on-Twitter-Schaltfläche, ein orangefarbener Fuchs mit einer Download-Firefox-Schaltfläche, ein eigenes Logo mit einem Buy-my- Stoffknopf.

Hier sind einige Beispiele:

Wakeinteraktiv

Commercialiq

Mediatempel

Unlocking.com

Sofasurfer.eu

Uploadify

Power von "Free"

Ein weiterer Trick ist die Verwendung des mächtigsten Wortes in englischer Sprache - KOSTENLOS. Immer wenn etwas als kostenlos beworben wird, fangen die Leute an, vorhersehbar irrational zu sein Dan Ariely, "Das Upside of Irrationality", um herauszufinden, was ich meine.)

Mehr Beispiele:

Freshbooks

Wufoo

Freeagent.com

Was kommt als nächstes?

Wenn Sie sich mit Photoshop oder einer ähnlichen Software auskennen, können Sie gleich jetzt einen schönen Button erstellen. Eine andere Möglichkeit ist, ein glücklicher Besitzer eines WordPress-Themes von ThemeFuse zu werden, wie ich es bereits in diesem Beitrag erwähnt habe.

Was empfehlen Sie beim Entwerfen eines großartigen Kaufknopfes?? Ich würde gerne diesen Beitrag mit Ihren Meinungen aktualisieren.