Ohne gute Buttons geht nichts – Newsletter 7/2024

Der letzte Newsletter hatte bei mir den Arbeitstitel „Grundlagen der UX – mehr als klare Buttons und schöne Sites“. Denn das ist es, was viele unter UX verstehen im Web: klare Buttons und schöne Sites. So kam es dann zum Titel „UX-Design: etabliert & missverstanden“.
In dieser Newsletter-Ausgabe will ich mich nun tatsächlich ganz den Buttons widmen. Sie sind zwar beim Weiten nicht das Einzige und vor allem nicht das Erste, um das wir uns kümmern müssen. Aber sie sind fundamental für den Erfolg jeder Website – und doch sind sie auf zu vielen Sites nicht so gut wie sie sein könnten. Es leiden damit Verkäufe, Downloads, Kontaktaufnahmen und vieles mehr.

Buttons sind die wichtigsten Elemente

Auf Ihrer Website nehmen Buttons nur wenig Raum ein, und doch spielen sie eigentlich die Hauptrolle: Buttons entscheiden darüber, ob Ihre Site erfolgreich ist. Denn über sie interagieren die Besuchenden mit Ihrer Seite. Diese bestellen etwas per Button-Klick, sie bestätigen die Anmeldung zum Newsletter per Button-Klick, sie schicken eine Rückrufbitte an Ihr Unternehmen per Button-Klick. Oder sie tun es eben nicht.
Dabei geht es nur selten darum, dass ein Button bei konzentrierter Arbeit nicht gefunden wird. Das kann passieren, aber selten sind die Designs so schlecht, dass das passiert. Aber ein Button, der eher unauffällig ist, wird in der Summe seltener geklickt. Je größer und auffälliger Buttons gestaltet sind, desto höher ist die Wahrscheinlichkeit, dass durchschnittliche Besuchende sie anklicken. Mit guten Buttons verbessern Sie also die Konversion, die Umwandlung von Besuchenden in Interessenten oder sogar in Kundinnen oder Kunden.
Daher ist es so wichtig, dass Ihre Buttons optimal gestaltet sind. Doch was macht einen guten Button aus?

Gute Buttons, schlechte Buttons

Im Folgenden die wichtigsten sechs Faktoren, die gute Buttons auszeichnen:

Erkennbarkeit als Button

Klingt logisch, wird aber trotzdem oft falsch gemacht: Buttons müssen klar als solche erkennbar sein. Am leichtesten erreichen Sie das, wenn sie eine auffällige Farbe und einen Schatten haben. Diese visuellen Hinweise signalisieren den Nutzenden, dass es klickbare Elemente sind. Ein häufiges Problem ist, dass Buttons nicht genügend auffallen und Nutzende sie deshalb übersehen. Dies passiert, wenn der Kontrast zwischen der Farbe des Buttons und dem Hintergrund nicht hoch genug ist oder der Button zu nah an anderen Designelementen steht und somit visuell mit ihnen verschmilzt.
Natürlich funktionieren Buttons ohne Schatten auch. Die derzeitige Mode sagt nämlich: Buttons tragen keine Schatten. Kein Problem, dann müssen Ihre Buttons einfach durch die gute Gestaltung der anderen Parameter klar herausstechen.

Button auf Ikea.de — Der Button an sich besteht aus schwarzem Text auf Weiß bei Ikea.de. Durch den kräftigen Hintergrund, die typische Form, ordentliche Größe und die Platzierung ist der Button aber bestens als solcher zu erkennen.

„Jetzt shoppen“ ist weder als Button noch als Link erkennbar (Westwing.de). Nur durch den Textinhalt und das „>“ kommt man überhaupt darauf, dass das verlinkt sein soll. Außerdem ist die Sichtbarkeit vor dem Hintergrund schlecht.

Sichtbarkeit und Weißraum

Buttons brauchen genug Weißraum, um sich von anderen Elementen abzuheben. Das heißt, es muss ausreichend Platz um ihn herum sein, auf dem nur die Hintergrundfarbe steht (die nicht weiß sein muss, der Fachbegriff ist trotzdem Weißraum).
Ein gut platzierter Button sollte sofort ins Auge fallen und nicht im visuellen Rauschen der anderen Elemente auf der Seite untergehen. Je unruhiger eine Seite z.B. durch viele kleinteilige Elemente, durch komplexe Bilder oder Videos ist, desto mehr Weißraum brauchen Sie für Ihre Buttons. Ausreichender Abstand zu anderen Elementen erhöht die Sichtbarkeit. Weißraum schafft eine visuelle Trennung und lenkt den Blick der Nutzenden auf den Button.

Erwartungskonforme Platzierung

Platziere Buttons da, wo Nutzende sie erwarten. Das bedeutet: am Ende eines Formulars, zentral auf einer Landing Page oder in Bereichen, in denen eine Interaktion naheliegt. Nutzende haben bestimmte Erwartungen, wo sie interaktive Elemente erwarten – diese sollten Sie nicht enttäuschen.
Ein klassisches Beispiel: Der „Absenden“-Button in einem Formular sollte stets am Ende des Formulars stehen, nicht irgendwo in der Mitte. Und man setzt ihn üblicherweise unter das letzte Textfeld und zwar linksbündig. Denn das Auge folgt dem linken Rand der Seite, dort, wo der Text in den Textfeldern beginnt.
Ebenso sollte ein „Kaufen“-Button auf einer Produktseite gut sichtbar und in direkter Nähe zur Produktbeschreibung und zum Preis platziert sein.

Formular auf Otto.de mit erwartungskonformer Platzierung Button — Auf Otto.de ist der „weiter“-Button erwartungskonform platziert und auffällig, wie er sein sollte. Er nimmt hier die ganze Breite der Formularfelder ein, was auch gut funktioniert und dann in der Smartphone-Ansicht wie am Desktop fast gleich aussieht.

Optimale Größe

Machen Sie Buttons groß genug. Das ist einerseits gut für deren Sichtbarkeit. Aber es ist auch gut für deren Klickbarkeit. Eine Mindestgröße von 44 x 44 Pixeln hat sich bewährt, um eine einfache und komfortable Interaktion zu gewährleisten. Größere Buttons sind leichter zu treffen, insbesondere auf Touchscreens. Aber auch mit der Maus ist es deutlich einfacher, größere Buttons zu treffen.
Zu kleine Buttons können Frustration verursachen, wenn Nutzende sie nicht präzise anklicken können. Ein ausreichend großer Button reduziert Fehlklicks und erhöht die Zufriedenheit der Nutzenden.

Zara.de Startseite ohne Buttons — Sieht cool aus, aber weit und breit ist auf Zara.de kein Button zu sehen. Natürlich wissen Besuchende, wo sie klicken können – attraktiv für sie ist das aber nicht. Und die Elemente sind dazu viel zu klein und dadurch nicht nur schwer leserlich, sondern auch mühsam zu treffen.

Button-Hierarchie

Haben Sie mehr als einen Button in einem Bereich, den Nutzende auf einmal sehen, dann helfen Sie den Nutzenden, indem Sie kommunizieren, welches die wichtigsten Buttons sind:

Call-to-Action (CTA) Buttons (Handlungsaufforderungen): Diese sollten klar erkennbar und hervorstechend sein, um die wichtigste Aktion zu betonen. Ein CTA-Button sollte sich durch Farbe, Größe oder Platzierung deutlich von anderen Buttons abheben. Zum Beispiel könnte der „Jetzt kaufen“-Button in leuchtendem Orange dargestellt sein, während sekundäre Buttons in einem gedämpften Grau gehalten werden.
Primäre und sekundäre Buttons: Unterschiedliche Stile für Haupt- und Nebenaktionen helfen Nutzenden, die Wichtigkeit der jeweiligen Aktion zu verstehen. Primäre Buttons, die die Hauptaktion darstellen, sollten visuell dominanter sein, während sekundäre Buttons, die alternative oder unterstützende Aktionen anbieten, dezenter gestaltet werden sollten. Sie geben damit den Nutzenden die Hilfestellung, dass im Normalfall der auffällige Button die richtige Wahl ist, Ihre Empfehlung. Die weniger auffälligen Buttons sind nur in selteneren Fällen notwendig. Es sollte möglichst in einem Set von neben- oder untereinander stehenden Buttons nur einen primären Button geben. Versuchen Sie sich auch bei den sekundären Buttons zu beschränken und denken Sie daran, dass Sie mit jedem Button mehr, den Nutzenden eine Entscheidung abfordern, ob sie diesen klicken sollen oder einen anderen.
Zusammenspiel von Buttons und Links: Denken Sie auch darüber nach, ob es immer Buttons sein müssen. Manchmal sind Links ausreichend. Durch die Kombination von Buttons mit Links haben Sie eine weitere Hierarchiestufe zur Verfügung: Links werden meist als noch weniger wichtig und als noch seltener benötigt empfunden als Links.
Sorgen Sie unbedingt auch dafür, dass Sie konsistent bleiben: Primäre, sekundäre Buttons und Links sollten Sie soweit möglich auf Ihrer gesamten Site für entsprechende Dinge einsetzen (Zum Beispiel CTAs als primäre Buttons, Zusatzoptionen als sekundäre und Hintergrundinfos als Links).

Saturn.de hat keine Button-Hierarchie — Die auffälligsten Buttons sind die für die Service-Highlights auf Saturn.de. Die Produkt-Kacheln haben gar keine Buttons – was Platz spart, aber weniger zum Klicken animiert. So gibt die Seite Besuchenden keine visuelle Hilfe durch klare Auszeichnung der wichtigsten Elemente.

Feedback auf Buttondruck

Nutzende müssen sofort merken, ob ihr Klick oder Tipp auf einen Button geklappt hat. Ein visuelles Feedback ist essenziell. Farbwechsel, kleine Animationen oder andere visuelle Rückmeldungen zeigen Nutzenden, dass ihre Aktion registriert wurde. Das schafft Vertrauen und verbessert die Nutzererfahrung.
Zusätzlich kann eine Bestätigungsmeldung sinnvoll sein, z.B. „Ihre Anfrage wurde verschickt“.

Fazit

Sehen Sie sich am besten gleich jetzt die wichtigsten Seiten Ihrer Website einmal an. Springen die Buttons klar heraus? Kneifen Sie die Augen leicht zusammen oder nehmen Sie Ihre Lesebrille ab, wenn Sie eine tragen. Erkennen Sie sofort, welches die wichtigsten Buttons sind, von denen Sie gern wollen, dass Besuchende sie klicken/tippen?
Wenn Sie wieder klar schauen: Ist deutlich, was primäre und was weniger wichtige sekundäre Buttons sind?
Und was passiert, wenn man die Buttons tatsächlich betätigt? Gibt es sofort Feedback? Passiert, was Nutzende erwarten?
Mit dieser Minikontrolle stellen Sie sicher, dass Sie bezüglich Buttons alles getan haben, um den Erfolg Ihrer Website sicherzustellen.