Eines der am weitesten verbreiteten UI-Elemente ist die Buttons. Sie ermöglichen es den Nutzern, mit einem System zu interagieren und zu handeln, indem sie eine Auswahl treffen können. Formulare, Homepages, Dialogfenster und Symbolleisten haben alle Schaltflächen.
Es ist wichtig, zwischen Schaltflächen und Links zu unterscheiden. Website Button Design dient dazu, Besucher/innen auf andere Seiten zu leiten, während Links dazu dienen, die Betrachter/innen auf andere Seiten zu leiten, wenn sie eine Aktion ausführen (abschicken, abbrechen, löschen) sollen (über mich, mehr lesen).
Wenn deine Buttons gut gestaltet sind, ist die Wahrscheinlichkeit höher, dass sie die gewünschte Aktion ausführen. In diesem Beitrag erfährst du, wie du unwiderstehliche Schaltflächen gestaltest, die die Leute auf deiner Website anklicken wollen.
Ideen für das Website Button Design
Im Folgenden haben wir einige ausgezeichnete und schreckliche Methoden für das Design von Schaltflächen aufgeführt, um dir einen Crashkurs zu geben, wie du attraktive Schaltflächen wie die Experten erstellen kannst.
1. Gutes Website Button Design
Knackig: Die Beschriftung und die Farben der Buttons müssen klar, deutlich und leicht zu lesen sein. In den letzten Jahren war das flache Design von Schaltflächen ein beliebter Webdesign-Trend, daher ist dies ein sicherer Stil, den du ausprobieren solltest. Vermeide ausgefeilte, auffällige Schaltflächen, die die Leser/innen ablenken könnten.
Prägnant: Bei Schaltflächen ist es ideal, nur wenig Text zu verwenden. Die Idee ist, nur ein oder zwei Wörter zu verwenden. Alles darüber hinaus wird unpraktisch und verwirrend. Mach eine Pause und frage dich: "Was soll der Leser jetzt auf der Seite tun? "Das erste Wort, das dir einfällt, ist mit Sicherheit ein Verb. Für eine kurze und prägnante Formulierung des Buttons fügst du ein Zeitadverb danach ein.
Kontextuell: Was ist die Funktion des Buttons? Was genau macht er? Buttons, die schwer zu verstehen sind, werden nicht angeklickt. Wenn du eine "Jetzt kaufen"-Schaltfläche hast, sollte sie den Besucher zu einer Seite führen, auf der er seine Kreditkartendaten eingeben kann, und nicht zu einer Seite, auf der die Ware, die er kaufen möchte, beschrieben wird.
2. Schlechtes Website Button Design
Nicht reaktionsfähig: Wenn es um Webdesign geht, ist das mobile Erlebnis das Wichtigste. Da du deine Schaltflächen höchstwahrscheinlich auf einem Desktop-Computer entwirfst, musst du manuell überprüfen, ob sie auch auf mobilen Geräten funktionieren. Wenn du diesen Schritt auslässt, kann es sein, dass deine Schaltflächen zu groß oder zu klein für ein mobiles Gerät sind, was sich auf deine Klickrate auswirkt. Glücklicherweise bieten die meisten CMS-Lösungen eine Schaltfläche, mit der du eine Vorschau deiner Webseiten-Elemente für verschiedene Bildschirmtypen anzeigen kannst, so dass du das Design deiner Schaltflächen entsprechend anpassen kannst.
Keine Farbe: Helle, fette Schaltflächen eignen sich gut als CTAs, da sie die Aufmerksamkeit der Besucher/innen auf wichtige Aspekte der Seite lenken. Denke daran, dass deine Website eine Reise ist, und die Schaltflächen, die du darauf platzierst, sollten wie eine Landkarte dienen. Wenn du keine farbigen Schaltflächen verwendest, wird es deinen Lesern schwer fallen, die Seite zu durchlaufen und zu konvertieren.
Falsch ausgerichtet: Ein ähnliches Problem ist, dass Besucher durch falsch platzierte Schaltflächen verwirrt werden können. Ein einzelner Button in der Mitte eines Absatzes hilft nicht weiter und kann die Sache sogar noch schlimmer machen, wenn deine Buttons nicht an einer Stelle platziert sind, die den Leser dazu ermutigt, mehr zu erfahren oder einen Kauf zu tätigen. Füge Buttons nur dort ein, wo du den Besucher zum Handeln aufforderst, um die Dinge einfach zu halten. Zum Beispiel in der Nähe des Abschnitts mit den Funktionen und Vorteilen, in der Kopfzeile und am Ende der Seite.
Inspiration für das Website Button Design
Bevor du mit der Gestaltung deines eigenen Buttons beginnst, solltest du dir einige kostenlose Vorlagen ansehen, um zu sehen, was es gibt, was zu deinem Stil passt und was für deine Website am sinnvollsten ist.
1. Mach es dir leicht
Es gibt ein altes Sprichwort im Designbereich, das besagt: "Keep It Simple, Stupid" (oder Silly, wenn dir das lieber ist). Das Design von Website Buttons ist da keine Ausnahme. Das Design eines Buttons muss nicht extrem kompliziert sein. Es sollte selbsterklärend und praktisch sein. Andere Trends beim Website Button Design können dem im Weg stehen, was sich negativ auf die Konversionsrate deiner Website auswirken kann. Wenn du also über Ideen für die Gestaltung von Schaltflächen nachdenkst, solltest du dies im Hinterkopf behalten - und nicht zu viel darüber nachdenken. Ein Button sollte das Aussehen eines Buttons haben. Das ist das Wichtigste.
2. Stelle sicher, dass es viel Kontrast gibt
Fast genauso wichtig wie ein auffälliger Button ist es, dass er gut sichtbar ist. Da die Buttons nicht genug Kontrast hatten, um sofort erkennbar zu sein, wurden die Geisterbuttons auf den Grafiken zu einem Trend und verblassten schnell. Die Nutzerinnen und Nutzer konnten sie nicht auf Anhieb ausfindig machen.
Schaltflächen mit geringem Kontrast sollten nicht versteckt werden. Hebe sie mit viel Farb- und Raumkontrast hervor, damit sie sich von den anderen Elementen auf dem Bildschirm abheben. Lasse viel Platz um die Schaltflächen herum, damit sie atmen können. Das macht es den Nutzern leichter, die Schaltflächen als klickbare Objekte zu erkennen, und erleichtert es ihnen, auf sie zu klicken, ohne versehentlich die falsche Schaltfläche auszuwählen.
3. Nutze die Farbe
Ist dir schon mal aufgefallen, wie viele rote oder orangefarbene Schaltflächen es gibt? Weil leuchtende Farben das Auge auf diese Elemente lenken und zum Handeln anregen, werden sie auf diese Weise verwendet. Auch beim Website Button Design ist Farbe heutzutage eine beliebte Technik. Farbe kann den Verbraucherinnen und Verbrauchern auf verschiedene Weise helfen, sich mit einem Design zu identifizieren, von leuchtenden Farbtönen bis hin zu Buttons mit einfachen Farbverläufen.
4. Erstelle eine Mikrokopie, die Vorfreude weckt
Mach diesen Fehler nicht: Die Worte "Hier klicken" stehen auf einer Schaltfläche. (Klingt das nicht spammig?) Die Mikroskopie eines Button-Designs sollte dem Nutzer eine klare Vorstellung davon vermitteln, was passiert, wenn er darauf klickt. Informiere die Nutzer darüber, was sie als Nächstes erhalten werden. Das kann ein einfacher Klick auf "Absenden" sein, um Informationen einzugeben, oder ein Klick auf einen Link zu "Mehr erfahren" oder das Ansehen eines Videos. Teile den Nutzern in der Mikrokopie mit, was die Aktion ist, ganz gleich, was es ist. Diese Information kann dazu beitragen, das Vertrauen der Nutzer/innen zu stärken und die Konversionsrate durch Aktionen/Interaktionen zu erhöhen, die die Menschen ansprechen.
5. Nutze subtile Animationen, um dein Publikum zu fesseln
Auf Websites werden zunehmend zwei Schaltflächen nebeneinander verwendet. Einer ist ausgefüllt, der andere ist geisterhaft. Beide haben eine Schwebebewegung, die die Aufmerksamkeit auf zwei klickbare Optionen lenkt. Der Einsatz von Animationen kann dazu beitragen, die Aufmerksamkeit auf das Website Button Design zu lenken und die Besucher/innen zum Anklicken zu animieren. Hover-Animationen auf Schaltflächen sind zu einem häufigen Nutzerverhalten geworden und dienen den Nutzern als direkter Hinweis, dass sie klicken sollten. Übertreibe es aber nicht. Schaltflächen, die sich drehen, wirbeln und blinken, sind eher lästig als nützlich.
6. Vergrößere sie genug, um sie anzutippen
Schaltflächen sollten einen klickbaren (antippbaren) Bereich mit einem Durchmesser von mindestens 10 Millimetern haben, aber auch größer ist immer akzeptabel. Dieser Ratschlag stammt aus einer Studie des MIT Touch Lab, in der die Größe von Fingerpads im Verhältnis zu Touch-Geräten untersucht wurde. Lasst uns das in den Kontext setzen. Auf einer physischen Computertastatur ist eine typische Taste 15 mal 15 Millimeter groß. Das ist ein hervorragendes Ziel. (Bedenke aber, dass bei unterschiedlichen Bildschirmbreiten deine Taste auf kleinen Geräten verschwinden kann.) Wenn du winzige Schaltflächen verwenden musst, solltest du ihnen einen großen Klickradius geben. Wenn der Nutzer die Schaltflächen selbst übersieht, bleibt um sie herum immer noch genug Platz, um die beabsichtigte Aktion auszuführen. (Die Besucher deiner Website werden es zu schätzen wissen.)
7. Verwende einen Stil, mit dem du bereits vertraut bist
Jeder kennt ein paar verschiedene Arten von Website Button Design. Nutze eine von ihnen.
- Ein ausgefüllter rechteckiger Button mit quadratischen Ecken und Text auf der Innenseite
- Ein gefüllter rechteckiger Button mit abgerundeten Ecken und Text auf der Innenseite
- Ein gefüllter rechteckiger Button mit einem auffälligen Schlagschatten (oben)
- Ein rechteckiger Geisterbutton
8. Platziere sie an einer vorherbestimmten Stelle
Schaltflächen müssen nicht nur wie erwartet aussehen und funktionieren, sie müssen auch an einer Stelle platziert werden, an der sie gesucht werden.
- Dazu gehört die Platzierung der Schaltflächen hinter einer Hauptüberschrift oder einem Inhaltsblock auf Homepages. Schaltflächen werden in der Regel am Text ausgerichtet oder in der Mitte des Bildschirms platziert.
- Schaltflächen zeigen die folgenden Eingaben in Formularen an. In einigen Formularen mit nur einer Eingabe wird die Schaltfläche in der gleichen Zeile wie das Eingabefeld rechts vom Eingabefeld ausgerichtet.
- CTA-Schaltflächen für den allgemeinen Gebrauch werden genau unter dem Inhalt angezeigt, auf den sie verweisen.
- Die Play- oder Start-Buttons für ein Video oder ein Spiel befinden sich häufig in der Mitte des Vorschaubildschirms.
- Die Schaltflächen für E-Commerce oder den Warenkorb befinden sich normalerweise in der oberen rechten Ecke.
9. Vergiss nicht, Feedback zu geben
Reagiert das Website Button Design auf deine Aktionen? Achte darauf, dass das Design der Schaltflächen eine offensichtliche Feedbackschleife enthält. Gib einen visuellen oder verbalen Hinweis darauf, dass die Schaltfläche ihre Aufgabe erfüllt hat. Manche Schaltflächen brauchen länger als andere, bis sie fertig sind. Wenn die neue Seite geladen wird, geben Buttons, die z. B. zu einer anderen Seite oder Website verbinden, eine Feedback, dass der Button funktioniert hat. Wenn die Informationen korrekt ausgefüllt wurden, kann eine Schaltfläche zum Absenden eines Formulars eine "Danke"-Meldung auf dem Bildschirm anzeigen.
10. Nutze Schaltflächen absichtlich
Wenn es zu viele Schaltflächen gibt, ist das Chaos vorprogrammiert. Wo Schaltflächen sinnvoll sind, solltest du sie verwenden. Mach das Design nicht zu unübersichtlich, indem du die Schaltflächen überall verteilst. Die Nutzer/innen wissen dann nicht mehr, wo sie klicken sollen und was am wichtigsten ist. Um die Ziele der Website zu erreichen, spar dir die Schaltflächen. Sie sollten die Besucher zu den wichtigsten Teilen deines Gesamtdesigns führen.
Wie entwirfst du ein auffälliges Website Button Design?
Willst du einen Website-Button gestalten, weißt aber nicht wie? Mit Strikingly bist du auf der sicheren Seite. Mit Strikingly kannst du eCommerce-Buttons entwickeln, die deine Kunden ansprechen und sie zum Kauf deiner Produkte animieren. Übrigens kannst du die Option "Jetzt kaufen" in "Jetzt buchen" ändern. Die Optionen für den Stil und die Ausrichtung einzelner Schaltflächen wurden erweitert! Um einen Button hervorzuheben, kannst du ihn größer machen oder seine Farbe ändern. Du kannst auch die Schriftart der Schaltflächen im Thema deiner Website ändern. Um die Schaltflächen auf deiner Strikingly-Website zu erstellen oder zu ändern, klicke in deinem Site-Editor auf "STYLES". Es erscheint ein Stil-Panel mit Überschriften & Navigation, Abschnitten und Schaltflächen, wie unten abgebildet.
Fazit
Ein Website-Button ist eine Komponente, die eine Handlungsaufforderung in ein Ergebnis umwandelt. Berücksichtige jeden Aspekt dieses Designs, von der Farbe über die Funktion bis hin zur Mikrokopie. Teste das Website Button Design, um sicherzugehen, dass dein Interface die funktionalste Version hat. Wenn du einen funktionierenden Button hast, lass dich nicht von der Mode leiten und ändere das Design. Wenn es um Buttons geht, sollte die Funktionalität immer an erster Stelle stehen.
