Buttons im Webdesign: Gestaltung, Zustände und Best Practices

Ein Element auf Webseiten, was manchmal etwas zu wenig Beachtung findet, sind Buttons. Sie sollen den Besuchern helfen, sich auf einer Seite zurechtzufinden, wichtige Schritte schnell zu erkennen und diese mit wenig Aufwand auszuführen. Neben der Benutzerfreundlichkeit, wird man bei einigen Projekten evtl. auch mehr Wert auf eine mehr Aufmerksamkeit erheischende Gestaltung legen.
In diesem Artikel gehe ich auch darauf ein, wie man Buttons benutzerfreundlich und barrierefrei gestaltet und wie man mithilfe von Mikro-Interaktionen und responsivem Design das Nutzererlebnis optimiert.

Benutzerfreundliches Design

Ein benutzerfreundlicher Button zeichnet sich durch klare, gut lesbare Beschriftungen aus. Auch der Kontrast zwischen Text und Hintergrund ist entscheidend, damit der Button leicht erkennbar ist. Außerdem sorgt ausreichend Padding für eine großzügige Klickfläche, die besonders auf Touch-Geräten wichtig ist. Bei der grundlegenden Gestaltung von einfachen und benutzerfreundlichen Buttons sollte man ein paar zentrale Aspekte beachten:

Klarheit und Einfachheit: Gib Buttons klare und aussagekräftige Beschriftungen, damit Nutzer sofort verstehen, welche Aktion hinter dem Button steckt.
Kontrast und Lesbarkeit: Achte darauf, dass der Button sich durch ausreichenden Farbkontrast vom Hintergrund abhebt.
Größe und Klickfläche: Der Button sollte groß genug sein, damit er leicht angeklickt werden kann, besonders auf Touch-Geräten. Eine großzügige Klickfläche sorgt für bessere Benutzerfreundlichkeit.
Im Allgemeinen empfiehlt es sich, dass die Klickfläche mindestens etwa 44 mal 44 Pixel groß ist, um eine bequeme Bedienung auf Touch-Geräten zu gewährleisten. In der Praxis empfiehlt man oft sogar etwas größere Klickflächen, also um die 48 mal 48 Pixel oder sogar 50 mal 50 Pixel, damit auch dickere Finger oder schnelle Berührungen problemlos funktionieren. Wichtig ist also, dass der Button bequem erreichbar ist, ohne dass man daneben tippt.
Feedback und Zustände: Der Button sollte visuelles Feedback geben, zum Beispiel durch Farbänderungen beim Hover oder beim Klicken, damit die Nutzer wissen, dass ihre Aktion angenommen wurde.
Runde Ecken und Form: Ein sanfter, abgerundeter Stil wirkt oft freundlicher und einladender, aber auch die Form sollte zum Gesamtdesign passen.

Semantik und Barrierefreiheit

Ein gut gestalteter Button beginnt mit der richtigen Semantik. Das bedeutet, dass man immer das <button>-Element verwendet, um sicherzustellen, dass der Button von Screenreadern erkannt wird. Dadurch wird die Zugänglichkeit für alle Nutzer gewährleistet, auch für Menschen mit Einschränkungen.
Es ist nicht nur semantisch korrekt, sondern sorgt auch für eine bessere Zugänglichkeit, zum Beispiel durch Unterstützung der Tastaturbedienung. Verwendet man stattdessen ein <div> oder ein anderes Element, muss man selbst dafür sorgen, dass alle Interaktionen und die Barrierefreiheit gegeben sind. Für eine barrierefreie Gestaltung von Buttons ist es wichtig, auf folgende Punkte zu achten:

Semantik: Nutze immer das <button>-Element, damit Screenreader den Button korrekt erkennen.
ARIA-Attribute für zusätzliche Informationen:
Falls ein Button eine spezielle Funktion hat, kann man ARIA-Attribute nutzen, zum Beispiel:
<button aria-label=“Schließen“>X</button>
Fokus-Management: Achte darauf, dass Buttons per Tastatur erreichbar sind und einen sichtbaren Fokus-Stil haben.
Du kannst den Fokus mit CSS sichtbar machen:
button:focus {
outline: 2px solid #005fcc;
}
Kontraste: Stelle sicher, dass die Farbkontraste hoch genug sind, damit auch Menschen mit Sehschwäche den Button gut erkennen können.

Gestaltung von Buttons in verschiedenen Zuständen

Buttons gewinnen an Benutzerfreundlichkeit, wenn sie auf unterschiedliche Zustände reagieren. Beim Hover-Zustand verändert sich oft die Hintergrundfarbe oder der Schatten, um visuelles Feedback zu geben. Der Focus-Zustand zeigt an, dass der Button aktuell ausgewählt ist, beispielsweise durch eine Bedienung mit der Tastatur. Der Active-Zustand wiederum zeigt, dass der Button gerade gedrückt wird, oft durch eine leichte Einfärbung oder eine Veränderung der Größe. Solche Mikro-Interaktionen sorgen für eine angenehmere und intuitive Benutzererfahrung.

Hier drei Beispiele für unterschiedlich gestaltete Buttons. Du findest die Dateien auf meinem Server web-einfach-machen.de und kannst dir dort den Quellcode anschauen.

Ein Beispiel für einen einfachen Button. Ein hover-Effekt ändert lediglich die border des buttons. Den Quellcode dazu findest du unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/Buttons/simple-button.html.

Ein weiteres Beispiel für einen Button mit box-shadow. Schau dir den Quellcode an unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/Buttons/button_box-shadow.html.

Ein Beispiel für einen auffällig gestalteten Button mit animiertem Glüh-Effekt beim hover- bzw. active-Zustand. Schau dir den Quellcode unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/Buttons/fancy-button.html an.