Website-Buttons sind ein wichtiger Bestandteil des Webdesigns – gut designte Buttons helfen dir dabei die Ziele deiner Webseite zu erreichen, Kundenaktionen auf die gewünschte Verkaufspage zu lenken, Aufmerksamkeit zu erregen und Websites ein professionelles Aussehen zu verleihen, sowie zum Kaufabschluss zu verhelfen. In diesem Artikel zeigen wir dir, wie man effektive Website-Schaltflächen entwirft und geben Tipps, wie man sie für die größte Wirkung einsetzt.
Buttons sollen auch wie Buttons aussehen
Im Webdesign gibt es State-of-the-Art Elemente, ein wesentliches davon sind Buttons. Der User muss sofort wissen, was anklickbar ist und was nicht, damit er jedes Element auf deiner Webseite entschlüsseln kann. Je mehr du dich an gängige Regeln hältst, umso leichter wird es. Generell gilt: Je mehr Aufwand man hat, um die Benutzeroberläche zu entschlüsseln, desto weniger erfolgreich wird deine Webseite sein. Denn der User klickt dann schnell weiter, wenn es zu mühsam wird.
Hier ist die Frage berechtigt: wie erkennt der Benutzer bestimmte Elemente wieder? Da wir alle ständig im Web sind, selbst unsere Kinder bereits in frühem Alter unweigerlich mit dem Web konfrontiert werden, können wir alle auf Erfahrungen zurückgreifen. Es gibt bestimmte visuelle Zeichen, die Buttons erkennbar machen (wie z.B. Größe, Form, Farbe, Schatten, Icons etc.).
Interaktion ist ein wichtiger Bestandteil von Buttons für seine Identifikation. Er sollte eine Interaktion ausführen, damit man wahrnimmt, dass hier etwas angeklickt werden kann. Ist sich ein Benutzer nicht sicher, ob es sich um ein anklickbares Element handelt, dann ist die erste Aktion, um dies zu prüfen, dass er den Cursor über das Element bewegt.
Probleme von schlechtem Button-Design im mobilen Bereich
Ein schwaches Button-Design ist im mobilen Bereich ein noch größeres Problem. Um zu verstehen, ob ein Element auf einer Webseite interaktiv ist oder nicht, kann der Desktop-User den Cursor auf das Element bewegen und prüfen, ob eine Aktion das Element verändert, also ob es interaktiv ist. Mobile Benutzer haben diese Möglichkeit nicht. Diese können das Element nur anklicken, um zu prüfen, ob es interaktiv ist.
Die richtige Button-Größe ist entscheidend
Unterschreite nicht die Mindestgröße für Buttons
Es gibt natürlich ein Mindestmaß für Buttons, das auf keinen Fall unterschritten werden sollte. Das hat den Hintergrund, dass im mobilen Bereich ein Button mit dem Finger zum eine entsprechende Größe erfordert. Zusätzlich hat es die Aufgabe, dass ein Button hervorstechen soll, das gilt dann ebenso für die Desktop-Version. Wird ein Button leicht übersehen, geht deine Webseite am eigentlichen Ziel vorbei.
Eine Studie der Nielson Norman Group hat ergeben, dass ein Button die Mindestgröße von 10mm x 10mm haben sollte.
Designe verschiedene Button-Hierarchien
Für jede Webseite sollte es einen Design für den primären Button geben. Der primäre Button ist auffällig gestaltet. Es gibt neben dem primären noch den sekundären Button. Dieser darf ruhig dezenter ausfallen und soll dem primären Button nicht die Schau stehlen. Meist hat der primäre Button viel Farbe und der sekundäre weniger Farbe. Je nach Webseite kann man auch von einem tertiären Button Gebrauch machen, was jedoch selten vorkommt. Der tertiäre Button ähnelt vom Stil meist Verlinkungen mit farbigem Text und Unterstrich und/oder Icon.
Bedenke die verschiedenen Status-Möglichkeiten für Buttons
Je nach Interaktion können Buttons verschiedene Zustände annehmen. Wir listen hier die State-of-the Art Button-Zustände auf, die du auch gestalten solltest:
- Active (aktiver Zustand): der aktive Zustand wird angezeigt, wenn der Button angeklickt werden kann.
- Disabled (deaktivierter Zustand): wenn eine Schaltfläche nicht anklickbar ist. Dies macht z.B. Sinn, wenn ein Formular noch nicht abgesendet werden kann, aufgrund fehlender Daten.
- Hover: Auf Desktop Geräten kann der Zustand verändert werden, wenn der Cursor über das Element bewegt wird. Dies ist ein perfektes Indiz dafür, dass der User eine Aktion setzen kann. Du solltest diesen Zustand auf jeden Fall umsetzen.
Wähle für deine Website-Buttons Farben, die sich vom Rest deiner Website abheben
Um sicherzustellen, dass deine Buttons hervorstechen und Aufmerksamkeit erregen, ist es wichtig, die richtigen Farben zu wählen. Buttons sollten generell einen Kontrast zum Gesamtbild deiner Website bilden und sich dennoch gleichzeitig gut einfügen. Wähle keine zu hellen oder extreme Farben, da sie optisch nicht ansprechend sind und Kunden irritieren könnten. Konzentriere dich stattdessen darauf, Farben zu verwenden, die mit dem Rest deiner Webseite übereinstimmen. Bei manchen Designs wirkt es gut, wenn man die Komplementärfarbe zur Hauptfarbe der Website wählt. Stelle sicher, dass die Textgröße der Website-Buttons gut ausgerichtet und lesbar ist.
Gut lesbarer Text ist Voraussetzung für einen guten Button
Die Textgröße spielt eine wichtige Rolle, damit deine Buttons die User auch interessieren. Wenn der Text zu klein ist, kann es für Betrachter schwierig sein, diese zu lesen und darauf zu klicken. Wenn es andererseits zu groß ist, können Betrachter überwältigt oder abgelenkt werden, wenn sie andere Elemente auf Ihrer Seite vergleichen. Stellen Sie sicher, dass die Textgröße aller Buttons einheitlich und leicht lesbar ist, indem du verschiedene Größen testest, bevor du sie auf deiner Website verwendest. Generell hat sich etabliert, dass der Text auf Buttons immer zentriert ist, das sollte auch so eingehalten werden.
Nutze beim Design negativen Raum, um Interesse und Klarheit zu schaffen
Als negativer Raum wird jener Bereich bezeichnet, der nicht den Inhalt, die Aufmerksamkeit darstellt. Es beschreibt den Hintergrund oder auch die Grundfläche in des Objektes. Dieser negative Raum hilft dabei, wesentliche Elemente hervorzuheben und Fokus und Klarheit zu schaffen. Wenn du es zwischen Text und Schaltflächen platzierst, können Sie verhindern, dass Betrachter überwältigt oder abgelenkt werden, was insgesamt zu einer besseren Benutzererfahrung führt.
Stelle sicher, dass der Negativraum nicht mit den übrigen Elementen deiner Website kollidiert, indem du verschiedene Abstände testest.
Eine konsistente visuelle Sprache hilft den Benutzern
Visuelle Konsistenz
Das Erstellen visuell konsistenter Buttons, die für Ihre Website-Besucher leicht zu erkennen sind und mit denen Sie interagieren können, sollte Priorität haben. Die Etablierung einer klaren visuellen Sprache hilft, Verwirrung zu vermeiden, indem sichergestellt wird, dass alle umsetzbaren Elemente konsistente Symbole, Designakzente, Beschriftungen und andere visuelle Elemente verwenden. Für Buttons sollte es das Design für den Hauptbutton, jedoch auf für einen Zweitbutton geben. Bei Bedarf natürlich auch für ein drittes Level. Hier ein paar Beispiele, wie Buttons visuell unterschiedlich gestaltet werden können.
Konsistenz bei der Verwendung des Textes
Auch bei der Verwendung des Textes sollte auf Einheitlichkeit geachtet werden:
- Verwende die gleiche Anzahl an Wörtern.
- Verwende die gleiche Struktur: z.B. Verb + Nomen (mehr Informationen), Adverb + Verb (mehr erfahren), Nomen + Verb (Informationen downloaden)
Verwende etablierte Symbole und Icons
Affordance ist ein Designprinzip, bei dem Elemente so aussehen und sich so anfühlen, als ob mit ihnen auf irgendeine Weise interagiert werden kann. Schaltflächen sollten auffallen und klar beschriftet sein, um Verwirrung bei den Benutzern zu vermeiden. Die Schaffung von Konsistenz über Schaltflächen und andere umsetzbare Elemente hinweg durch die Verwendung konsistenter Symbole und Designakzente wie Pfeile, Kreise und Textbeschriftungen trägt wesentlich dazu bei, dass Besucher verstehen, was Ihre Website bietet. Alle Labels sollten die von ihnen ergriffenen Maßnahmen in angemessener Weise kommunizieren, ohne zu wortreich zu sein.
Schlussfolgerung
Eines der wichtigsten Elemente deiner Webseite ist der Button, da dieser normalerweise den User zur Interaktion führt. Überlege dir dein Button-Design gut und probiere aus, bis es dir gefällt und du der Meinung bist, dass es zum Identität deines Auftritts passt.
