Deaktivierte Buttons – ihr Einfluss auf die User Experience

Häufig findet man auf Webseiten oder Web-Applikationen deaktivierte Buttons. In diesem Artikel erfährst du, welche Probleme sie auslösen können und was bessere Alternativen sind.

Welchem Zweck dienen deaktivierte Buttons?

Bedienbare UI-Elemente wie Buttons oder Links können verschiedene Zustände haben, z. B. „aktiv“, „angewählt“, mit der Maus darüber schwebend („hover“) oder eben „deaktiviert“ („disabled“). Laut Google Material Design zeigt der deaktivierte Status an, dass ein UI-Element nicht interaktiv bzw. ansteuerbar ist. So können mögliche Aktionen gezeigt werden und es wird deutlich, wo sich Steuerelemente auf dem Interface befinden.

Wo findet man deaktivierte Buttons?

Deaktivierte Buttons sieht man häufig auf Anmelde- oder Registrierungsformularen:

Mailchimp Registrierungsseite: Initial ist der SignUp-Button deaktiviert.

Auf der Mailchimp-Registrierungsseite ist der SignUp-Button initial deaktiviert. Erst, wenn alle erforderlichen Felder ausgefüllt sind, ist er aktiv und klickbar.

Mailchimp Registrierungsseite: Alle Felder sind ausgefüllt und SignUp-Button ist aktiv

Ähnlich verhält es sich auf der Work-Seite von Airbnb mit einem initial deaktivierten Button in einem Eingabefeld: 

Airbnb Work-Seite mit deaktiviertem Button

Auch Instagram und Trello arbeiten mit inaktiven Buttons:

Instagram Anmelde-Seite mit deaktiviertem Button
Trello Anmelde-Seite mit deaktiviertem Button

In Account-Einstellungen wie diesen hier von Duolingo, Airbnb und Pinterest sind Buttons ebenfalls oft deaktiviert:

Beispiel Duolingo: Einstellungen mit einem deaktivierten Button
Beispiel Airbnb: Einstellungen mit einem deaktivierten Button
Weiteres Beispiel Airbnb: Einstellungen mit einem deaktivierten Button
Beispiel Pinterest: Einstellungen mit deaktivierten Buttons
Beispiel Pinterest: Einstellungen mit aktiven Buttons nach Ausfüllen eines Eingabefeldes

Häufig werden auch Funktionen, die für einen User aus irgendwelchen Gründen nicht verfügbar sind, deaktiviert dargestellt, wie hier ebenfalls bei Mailchimp:

Rechnungseinstellungen Mailchimp: Button "Chat with us" ist deaktiviert.

Warum sind inaktive Buttons problematisch?

Nicht nutzbare Bedienelemente

Buttons sind UI-Elemente, mit denen man interagieren kann. Sie lösen Aktionen aus, die das Front- oder Backend einer Webseite beeinflussen. Oft werden Buttons auch für Verlinkungen genutzt (obwohl dies aus verschiedenen Gründen nicht empfohlen wird, da dafür Links vorgesehen sind). In jedem Fall sind Buttons bedienbare Elemente eines User Interfaces. Ein Button, der keine Aktion auslöst, kann Verwunderung, Ratlosigkeit oder sogar Frustration auslösen. Dies begründet sich darin, dass nicht immer klar ist, warum ein Button nicht bedienbar ist. 

Zu geringer Kontrast

Ebenfalls problematisch ist der oft sehr geringe Kontrast auf deaktivierten Buttons, was sie schwer erkennbar bzw. lesbar macht. Dies stellt insbesondere für Menschen mit eingeschränkter Sehfähigkeit ein Problem dar. Ihnen können so wichtige Informationen entgehen.

Deaktivierter SignUp-Button mit geringem Kontrast

Kein Feedback

Klickt man auf einen inaktiven Button, passiert sehr häufig nichts. Es erscheint dann meist keine Information darüber, warum dieser Button nicht anklickbar ist. Die Nutzer werden quasi auf sich allein gestellt und dürfen darüber grübeln, was sie falsch gemacht haben oder warum eine Option für sie nicht verfügbar ist. Es fehlt ein effektives Error-Handling.

Sie regen zum Nachdenken an

Deaktivierte Buttons können viele Fragen aufwerfen: Was steht auf dem Button? Warum funktioniert der Button nicht? Warum ist er deaktiviert? Was habe ich falsch gemacht? Ein sehr bekanntes Buch von Steve Krug “Don’t make me think” beschäftigt sich ausschließlich mit dieser Problematik. Nutzer haben schlichtweg keine Lust über solche Dinge nachzudenken. Sie möchten Aufgaben erledigen und das mit möglichst geringem Aufwand.

Nicht barrierefrei

Screenreader oder Schalter (Hilfsmittel zur Steuerung eines Computers ohne Maus oder Tastatur) können deaktivierte Buttons oft gar nicht ansteuern. Dies kannst du ganz einfach selbst ausprobieren, indem du mit der Tab-Taste navigierst. Inaktive Buttons werden meist einfach übersprungen und existieren dann für jemanden der nicht sehen kann, auch nicht.

Was sind bessere Alternativen?

Allein aufgrund der fehlenden Barrierefreiheit sollte man komplett auf inaktive Buttons verzichten. Wenn mit Klick auf einen Button eine Aktion aufgrund unvollständiger Informationen oder Berechtigungen nicht ausgeführt werden kann, sind passende Fehlermeldungen das Mittel der Wahl.

Es gibt unzählige Webseiten, die nicht mit deaktivierten Buttons arbeiten. Hier zeige ich euch Beispiele wie ein gutes Error Handling aussehen kann. Bei H&M erhält der Nutzer sowohl visuelles (farblich als rote Umrandung der Eingabefehler und symbolisch in Form eines “x”) als auch inhaltliches Feedback: “Bitte gib eine E-Mail-Adresse ein” usw.

H&M Anmelde-Pop-Up: Fehlermeldungen bei Nichteingabe von E-Mail und Passwort.

Ebenso bei Amazon und Skype:

Amazon Anmeldeseite: Fehlermeldung bei Nichteingabe von E-Mail.
Skype/Microsoft Anmeldeseite: Fehlermeldung bei Nichteingabe von E-Mail, Tel-Nr, Skype-Name

Gmail zeigt eine Fehlermeldung an, wenn man versucht eine E-Mail zu verschicken, ohne einen Empfänger angegeben zu haben: 

Gmail-Fehlermeldung: "Geben Sie mindestens einen Empfänger an".

Klickt man im Zalando Online-Shop auf “In den Warenkorb”, ohne eine Größe ausgewählt zu haben, öffnet sich automatisch das Dropdown für die Größenauswahl.

Zalando Online Shop: Produktdetailseite
Zalando Online Shop: Produktdetailseite, Dropdown für Größenangabe geöffnet

Wenn man bestimmte Berechtigungen nicht hat (weil dies z. B. nicht Teil des gewählten Preispaketes ist), kann es dennoch sinnvoll sein, nicht verfügbare Optionen anzuzeigen. Dies funktioniert aber nur, wenn man einen entsprechenden Hinweis anzeigt. So wissen Anwender, dass es diese Option gibt, wo diese zu finden wäre und warum sie aktuell nicht nutzbar ist. Dies sorgt meiner Meinung nach für eine bessere User Experience, als Dinge zu verstecken. Ändern sich dann nämlich Berechtigungen, fragt man sich nicht, ob man zuvor etwas übersehen hat.

Ich finde, dass Mailchimp dies hier gut gelöst hat: 

Mailchimp Einstellungen: "Create Audience"-Button ist deaktiviert, darüber Kasten mit Info, dass man Upgraden muss um mehr Audiences erstellen zu können.

Das einzige Manko ist der viel zu geringe Kontrast auf dem Button.

Fazit

Deaktivierte UI-Elemente sind nicht barrierefrei, bringen Nutzer zum Nachdenken und können die User Experience negativ beeinflussen. Am besten ist es gar keine inaktiven Elemente anzuzeigen und wenn doch, den Anwender über den Grund für die Deaktivierung zu informieren. Generell ist ein effektives Error-Handling unverzichtbar.

Quellen