Button-Design – Tipps für Buttons auf Ihrer Webseite (UX Serie: #2)

Titel Bild Ux-serie #2 - Gutes Button-Design

Wir begegnen ihnen nahezu täglich: Buttons. Sie tragen grundlegend zum Erlebnis einer Webseite bei. In diesem Teil unserer User-Inferface- und User-Experience-Serie dreht sich deshalb alles rund um das Thema Buttons. Wir zeigen, was gutes Button-Design ausmacht und worauf zu achten ist.

Alles an einer Webseite ist wichtig. Sie muss schön und leicht bedienbar sein. Das Design darf keine Schwächen oder Lücken aufweisen.

Denn man hat nur 50 Millisekunden, um Besucher zu überzeugen. Noch viel schlimmer: 57 % der Internetanwender (engl.) würden ein Unternehmen mit schlechtem Webdesign nicht weiterempfehlen. Auch so etwas profanes wie das Button-Design ist hierbei essenziell.

In diesem Artikel gehen wir deshalb weg von den großen Elementen einer Webseite hin zu den kleinen: Buttons. Wir zeigen, wie man bei Themen wie Layout, Farbe, Hierarchie und Zustand den Überblick behält.

Inhalt

Was ein Button ist

Buttons sind fundamentale Elemente einer Webseite. Meistens versteht man unter diesem Begriff alle klickbaren Elemente einer Webseite. Dazu zählen neben den eigentlichen Buttons und Calls-To-Action beispielsweise auch Links.

Doch viel wichtiger ist Ihre Rolle. Denn sie dienen als Verbindungselement zwischen Menschen und Webseite. Als solches ermöglichen Sie die Kommunikation zwischen beiden.

Wieso Buttons essenziell sind

Buttons sind flexibel und für jeden Zweck einsetzbar. Deshalb kommen sie auch an den verschiedensten Stellen einer Webseiten vor.

  • Mehr Informationen erhalten
  • Direkt Produkte oder Dienste erreichen
  • Formulare absenden
  • Produkte in den Einkaufskorb zu legen
  • Transaktionen durchführen

Natürlich gehen die Möglichkeiten weit über die Grenzen dieser Beispiele hinaus. Eins haben sie dabei allerdings immer gemeinsam: Sie helfen dabei Besucher zu erreichen. Ihnen sozusagen das Leben zu erleichtern und sie gezielt weiterzuleiten.

Buttons sind also zwingend notwendig für Unternehmen, die mit Ihren Kunden online auf ihrer Seite kommunizieren wollen. Dabei spielt das Button-Design eine zentrale Rolle.

Was gutes Button-Design ausmacht

Es gibt keine in Stein gemeißelte Regel, wie Buttons aussehen sollen. Jedoch sollte man diese essenziellen Richtlinien beachten:

  • Klarheit: Der Button soll für Besucher klar zugänglich und schnell verständlich sein. Hierbei muss man auf die Farbe des Buttons, sein Layout und den enthaltenen Text achten. Kurz um: Ein Button sollte auch aussehen wie ein Button.
  • Prägnanz: Nach Möglichkeit sollte man den Text des Buttons mit nur ein bis zwei Wörtern ausführen. So muss der Nutzer nicht erst herausfinden, in welchem Zusammenhang die Wörter stehen. Auf diese Weise wird jegliche Verwirrung verhindert.
  • Kontext: Der Besucher soll auf den ersten Blick verstehen, wohin ihn dieser Button bringt oder was er bewirkt.

Tipps für besseres Button-Design

Button-Design scheint auf den ersten Blick relativ einfach. Doch wie bei allem übersieht man schnell wesentliche Faktoren. Folgende Richtlinien sollte man deshalb beachten.

Der Button muss klickbar aussehen

Immer, wenn ein Besucher auf eine Webseite geht, sieht er das User Interface. Folglich muss er herausfinden, welche Elemente für ihn von Bedeutung sind und welche Aktionen sie durchführen. Die Herausforderung ist, dass Benutzer ohne lange Überlegungen das Interface und die enthaltenen Elemente verstehen. Das oberste Ziel ist also abermals: Verbesserung der User Experience.

Als Designer und Ersteller der Webseite kennt man sie selbstverständlich auswendig. Man weiß um alle Interaktionen bescheid und welche Links wo hin führen. Für Besucher, die zum ersten Mal mit der Webseite konfrontiert werden, ist das allerdings nicht so einfach. Sie wissen nicht, wie die Webseite funktioniert oder was genau sie macht.

Man darf sich also nicht auf die eigene Wahrnehmung als Designer verlassen. Tatsächlich muss jeder Zweifel ausgeschlossen werden, sodass der Besucher Sinn und Zweck des Buttons erkennt. Zusätzlich sollte jedem User direkt erkenntlich sein, dass es sich hierbei überhaupt um einen Button handelt.

Designer toben sich gerade bei Buttons oftmals aus. Allerdings sollte man nach Möglichkeit auf bewähre Elemente zurückgreifen. Denn ein noch so originelles Button-Design bringt nichts, wenn der User es nicht versteht. So sind gewohnte Formen und Farben für den Besucher klar verständlich, da er sie schon von anderen Interfaces kennt. Beispiele hierfür sind quadratische Schaltflächen oder abgerundete Ecken.

Bei vielen unserer Buttons setzen wir beispielsweise auf Kontrast. Ein leuchtendes Gelb hebt sich gut vom oftmals blauen Hintergrund ab. Dazu kommen saftige Interaktionen mit dem Button, wenn man die Maus darüber bewegt oder darauf klickt. Aber dazu später mehr.

Leicht zu finden

Ebenso wie Farben und Formen sind Besucher bereits daran gewöhnt, dass Buttons an bestimmen Stellen platziert sind. Die Buttons sollten schon beim Öffnen der Webseite schnell und klar erkennbar platziert sein. Denn in der Geschichte des Internets hat sich noch kein User daran erfreut sich nach Buttons umzuschauen, die sie klicken können.

Anhand dieser Erwartungen ist das Website-Design aufzubauen. So wird sicher gestellt, dass essenzielle Buttons und andere Elemente leicht zugänglich sind. Im weiteren Prozess stellt sich dann heraus, wie man Buttons so hervorheben und betonen kann, dass sie sich klar in die Corporate Identity des Unternehmens einfügen.

Der Grund hierfür ist, dass gute Usability auf Gewohnheit und Voraussehbarkeit beruht. Die Buttons sollen Sinn für den Besucher ergeben. So stellt man sicher, dass die Besucher mit den Inhalten der Webseite umgehen können. Genau das erreicht man eben nur, wenn man dem Design die Erwartungen der User zugrunde legt. So lernen sie schnell, wie sie die Webseite navigieren können und wie sie funktioniert.

Hohe Kontraste ziehen die Augen der Besucher förmlich an. Ferner zeigen sie, wie wichtig dieser Button für den aktuellen Kontext ist. In Verbindung mit negativem Raum lässt sich ein Button optimal hervorheben.

An dieser Stelle spielt auch die visuelle Hierarchie der Buttons eine tragende Rolle. Wichtigere Buttons sollten auffälliger sein. Oft macht es Sinn die Frage zu stellen, welcher Button für den Besucher am wichtigsten ist. Auf dieser Grundlage ergeben sich Designs für Buttons von primärem, sekundärem oder auch tertiärem Interesse.

Auch sollte das Button-Design kohärent auf der ganzen Webseite sein. Es empfiehlt sich ein Grunddesign zu entwickeln. Auf diese Weise weiß der User immer, dass es sich um einen klickbaren Button handelt. Sollten mehrere Buttons ähnliche Funktionen haben, macht es Sinn diese optisch zu gruppieren. Dazu kann das Grunddesign mit kleinen Änderungen angepasst werden.

Interessiert sie dieses Thema?

Mehr Beiträge dazu finden sie in unserer UX/UI-Serie.

Den Button deutlich beschriften

Dem User muss zusätzlich klar sein, was welcher Button macht. Er sollte nicht raten müssen. Hierbei spielt der Text des Buttons eine maßgeblich Rolle.

Generische Beschriftungen wie „OK“ oder „Mehr“ gehören der Vergangenheit an und sollten vermieden werden. Besser eignen sich spezifische Beschriftungen, die klar auf die Funktion des Buttons hinweisen. Denn der Besucher versteht Texte wie „Jetzt herunterladen“ oder „Artikel lesen“ um einiges besser.

So ist sicher, dass der User den Button und seine Aktion versteht und nachvollziehen kann. Des Weiteren erhöht sich hierdurch die Usability, da User weniger anfällig für Fehler sind.

Die Größe des Buttons

Die Button-Größe wird oft als unwichtiges Detail abgestempelt. Sie sollen sich einfach irgendwie in das Design der Webseite einfügen. Allerdings steckt -wie so oft- auch hier der Teufel im Detail.

Vor allem bei mobilen Webseiten spielt die Größe eine wesentliche Rolle. Hier lassen zu große Buttons die Webseite schnell überladen wirken. Im Gegensatz dazu erschweren zu kleine Buttons die Bedienbarkeit. Eine Studie des MIT (engl.) ergab, dass die durchschnittliche Fingerspitze zwischen 8 mm und 10 mm breit ist. Übersetzt in Pixel ergibt sich somit, dass kein Button kleiner als 40×40 Pixel sein sollte.

Während man auf dem Desktop in Sachen Design meistens mehr Spielraum hat gibt es auch hier etwas zu beachten: Fitts‘ Gesetz. Zu kleine Buttons sind nach diesem Gesetz schwer und nur langsam zu erreichen. Für den Einzelfall stellt dies sicherlich kein größeres Problem dar. Bei großen Webseiten besteht allerdings die Gefahr, dass die Usability darunter leidet.

Auch hier macht eine visuelle Hierarchie durchaus Sinn. Auf diese Weise werden dem Besucher zentrale Funktionen klar dargestellt, da sie die größte Schaltfläche in Anspruch nehmen. Das gilt auch für gegensätzliche Button (z.B. „Bestätigen“ und „Abbrechen“). Hierdurch kann der Button mit dem positiven Ergebnis für den User betont werden.

Feedback für Interaktionen

Die Körpersprache von Personen lässt einen wortlos wissen, was diese Person meint oder fühlt. Dem Computer fällt das ganze schon ein wenig schwerer. Er kann nicht einfach kommunizieren. Man muss es ihm am besten schon ganz früh beibringen: bei der Entwicklung. Denn nur so kann zwischen Mensch und Maschine eine annähernd realistische Konversation geführt werden.

Dem User sollte nach dem Klick Feedback gegeben werden, dass seine Interaktion erfolgreich war. Diese Rückmeldung sollte bestenfalls sehr zeitnah geschehen. Anderenfalls besteht die Gefahr, dass der User das Feedback keiner Handlung mehr zuordnen kann.

Für die Umsetzung des Feedback eigenen sich Button-Zustände besonders gut. Dies liegt daran, dass sie meist klar verständlich und unmittelbar sowie technisch leicht zu realisieren sind. So ändert ein Button beispielsweise seine Farbe oder Form, wenn der Besucher mit der Maus über diesen Button schwebt. Auf die gleiche Weise lassen sich so Klicks auf den Button darstellen.

Weit verbreitet ist auch die Verwendung sogenannter „Microinteractions“. Dabei handelt es sich meistens um kleine Animationen, die dem User Rückmeldung für seine Handlungen geben. Mit ihrer Leichtigkeit verbessern sie die Kommunikation zwischen Mensch und Maschine. Des Weiteren führen sie durch ihre fast schon spielerische Art zu einer Erhöhung der Benutzererfahrung. Ein detaillierter Beitrag zu Microinteractions und Animationen folgt hier in Kürze.

Zusammenfassung

Buttons sind für die meisten User und Designer heute schon eine routinierte Selbstverständlichkeit. Dabei lohnt es sich durchaus sich mit dem Button-Design zu beschäftigen. Denn immerhin haben sie einen großen Einfluss auf die Besucher.

Buttons sind unglaublich vielseitig in ihrer Anwendung und werden deshalb auch sehr oft eingesetzt. Doch nicht nur das: Ohne sie gäbe es keine richtige Kommunikation mit einer Webseite. Beim Design der Buttons sollte man sich daher immer an einige Richtlinien halten.

Farbe, Form und Positionierung spielen für die User eine große Rolle. Ein Button sollte klickbar aussehen und da platziert sein, wo er erwartet wird. Auf diese Weise sorgt man für Vertrautheit beim Besucher und erhöht die Benutzererfahrung.

Behandeln Sie Ihre Buttons beim nächsten Projekt also bitte gut. Dann sind die Buttons auch gut zu Ihnen – und das würde sich richtig lohnen.

Brauchen Sie Hilfe?

Sie sind auf der Suche nach einer kompetenten und zuverlässigen Marketing-Agentur? Nun ja, was für ein Zufall. Wir freuen uns auf Ihre unverbindliche Anfrage

Oder kontaktieren Sie uns über das Formular

Internet vector created by stories – www.freepik.com

<