Icons sind praktisch. Ein kleiner Papierkorb für „Löschen“, eine Lupe für „Suchen“, ein Herz für „Merken“ oder ein Pfeil für „Zurück“. Auf den ersten Blick wirkt das alles sauber, modern und platzsparend. Genau deshalb sieht man auf vielen Webseiten und in Apps immer mehr Buttons, die nur noch aus einem Symbol bestehen.
Das Problem ist: Nicht jedes Icon ist für jeden Menschen sofort verständlich. Was für den einen eindeutig aussieht, kann für den anderen völlig unklar sein. Und wenn ein Button nicht verstanden wird, wird er vielleicht gar nicht benutzt. Im schlimmsten Fall führt das dazu, dass Besucher eine Webseite abbrechen, weil sie nicht wissen, was sie tun sollen.
Gerade beim Thema Barrierefreiheit wird oft unterschätzt, wie wichtig klare Buttons sind. Ein Symbol allein reicht häufig nicht aus.
Ein Icon ist nicht automatisch eindeutig
Viele denken: „Das erkennt man doch.“ Aber genau da liegt der Fehler. Icons sind gelernte Zeichen. Man versteht sie meistens nur, weil man sie schon oft gesehen hat.
Eine Lupe steht heute fast immer für Suche. Das funktioniert meistens gut. Aber bei vielen anderen Symbolen wird es schon schwieriger. Was bedeutet ein Stern? Favorit? Bewertung? Wichtig? Speichern? Und was bedeutet ein Herz? Liken? Wunschliste? Spenden? Gesundheit?
Noch schwieriger wird es bei abstrakten Icons. Drei Punkte, ein Zahnrad, ein Schieberegler, ein kleines Quadrat mit Pfeil, ein Kreis mit Haken. Wer regelmäßig digitale Oberflächen nutzt, kann sich vieles zusammenreimen. Aber nicht jeder Besucher ist technisch sicher. Nicht jeder kennt die typischen App-Symbole. Und nicht jeder hat die Geduld, erst durch Ausprobieren herauszufinden, was ein Button macht.
Ein guter Button sollte nicht zum Rätsel werden.
Icons sparen Platz, kosten aber oft Verständlichkeit
Natürlich gibt es Gründe, warum Designer gerne Icon-Buttons verwenden. Sie sehen aufgeräumt aus, nehmen wenig Platz ein und passen gut in moderne Layouts. Besonders auf dem Smartphone ist Platz wertvoll.
Aber Platzersparnis darf nicht wichtiger sein als Verständlichkeit. Wenn ein Button zwar hübsch aussieht, aber nicht klar ist, was passiert, wurde am falschen Ende gespart.
Ein Beispiel: In einem Online-Shop gibt es neben einem Produkt nur ein kleines Symbol. Vielleicht ein Herz, vielleicht ein Lesezeichen, vielleicht ein Plus. Einige Nutzer verstehen sofort, dass sie das Produkt merken können. Andere sind unsicher. Wird das Produkt in den Warenkorb gelegt? Wird es gespeichert? Öffnet sich eine Liste? Passiert etwas im Kundenkonto?
Ein kurzer Text wie „Merken“ oder „Zur Wunschliste“ würde diese Unsicherheit sofort auflösen.
Menschen nutzen Webseiten unterschiedlich
Barrierefreiheit bedeutet nicht nur, dass eine Webseite mit einem Screenreader funktioniert. Es geht auch darum, dass Inhalte und Funktionen möglichst viele Menschen erreichen.
Dazu gehören zum Beispiel:
- Menschen mit Sehbehinderung
- ältere Nutzer
- Menschen mit motorischen Einschränkungen
- Nutzer mit wenig technischer Erfahrung
- Menschen mit Konzentrationsproblemen
- Besucher, die eine Sprache nicht perfekt beherrschen
- Personen, die gerade unter Zeitdruck stehen
Ein Button mit klarer Beschriftung hilft fast allen. Man muss weniger nachdenken, weniger raten und macht seltener Fehler. Das klingt simpel, ist aber ein großer Unterschied in der Nutzung.
Gerade bei wichtigen Aktionen sollte nie unklar sein, was ein Button macht.
Für Screenreader sind reine Icon-Buttons oft problematisch
Ein Icon allein ist für einen Screenreader nicht automatisch verständlich. Wenn der Button nicht sauber beschriftet ist, wird eventuell nur etwas wie „Button“ vorgelesen. Manchmal wird auch der Dateiname des Icons ausgegeben oder gar nichts Sinnvolles.
Für sehbehinderte Menschen ist das extrem frustrierend. Sie hören dann, dass es einen klickbaren Bereich gibt, wissen aber nicht, welche Funktion dahintersteckt.
Ein Button für die Suche sollte für den Screenreader also nicht einfach nur ein Lupen-Icon sein. Er braucht eine eindeutige Bezeichnung wie „Suche öffnen“ oder „Suchen“. Das kann sichtbar als Text neben dem Icon stehen oder technisch korrekt für Hilfsmittel hinterlegt werden.
Am besten ist oft eine Kombination: Icon plus sichtbarer Text.
Besonders kritisch sind wichtige Aktionen
Nicht jeder Icon-Button ist gleich problematisch. Ein kleines dekoratives Symbol ist weniger kritisch als ein Button, der eine wichtige Aktion auslöst.
Besonders vorsichtig sollte man sein bei Buttons wie:
- Kaufen
- Löschen
- Speichern
- Absenden
- Termin buchen
- Datei hochladen
- Konto erstellen
- Zahlung starten
- Zurücksetzen
- Vertrag abschließen
Bei solchen Funktionen sollte sofort klar sein, was passiert. Niemand sollte sich fragen müssen, ob ein Klick harmlos ist oder etwas Endgültiges auslöst.
Ein Papierkorb-Icon ohne Text kann zum Beispiel gefährlich sein. Löscht der Button einen Eintrag? Entfernt er nur etwas aus einer Liste? Wird sofort gelöscht oder kommt noch eine Nachfrage? Ein Text wie „Löschen“ oder „Aus Warenkorb entfernen“ macht die Aktion viel klarer.
Icon plus Text ist meistens die bessere Lösung
Die beste Lösung ist oft nicht „Icon oder Text“, sondern beides zusammen. Ein Icon kann den Button schneller erkennbar machen. Der Text erklärt die Bedeutung.
Beispiele:
- Lupe + „Suchen“
- Papierkorb + „Löschen“
- Pfeil + „Zurück“
- Herz + „Merken“
- Kalender + „Termin buchen“
- Stift + „Bearbeiten“
- Diskette oder Haken + „Speichern“
So profitieren beide Seiten: Die Oberfläche bleibt visuell schnell erfassbar, aber die Bedeutung ist trotzdem klar. Das ist besonders bei Webseiten für Unternehmen, Online-Shops, Buchungsseiten und Kontaktformularen sinnvoll.
Wann reine Icon-Buttons okay sein können
Es gibt Fälle, in denen reine Icon-Buttons funktionieren können. Zum Beispiel bei sehr bekannten Symbolen oder in Bereichen, in denen Nutzer die Funktion schnell lernen. Auch in engen Navigationsleisten oder Toolbars kann ein Icon-Button sinnvoll sein.
Aber dann sollte er wenigstens gut umgesetzt sein. Dazu gehört:
- Das Icon muss eindeutig sein
- Der Button braucht eine verständliche technische Beschriftung
- Es sollte möglichst einen Tooltip geben
- Der Button muss per Tastatur erreichbar sein
- Der Fokuszustand muss sichtbar sein
- Die Funktion darf nicht überraschend sein
Ein reines Icon ist also nicht automatisch falsch. Aber es braucht mehr Sorgfalt, als viele denken.
Tooltips allein reichen nicht immer aus
Manche Webseiten lösen das Problem mit Tooltips. Wenn man mit der Maus über ein Icon fährt, erscheint ein kurzer Hinweis. Das ist besser als gar nichts, aber nicht perfekt.
Auf Smartphones gibt es kein klassisches „Darüberfahren“ mit der Maus. Außerdem nutzen nicht alle Menschen eine Maus. Wer mit Tastatur, Touchscreen oder Hilfstechnologie unterwegs ist, bekommt den Tooltip vielleicht gar nicht oder nur schwer.
Ein Tooltip kann helfen, sollte aber nicht die einzige Erklärung für eine wichtige Funktion sein.
Klare Buttons verbessern auch die Conversion
Barrierefreiheit wird häufig als Pflicht oder Zusatzaufwand gesehen. Dabei verbessert sie oft ganz nebenbei die Nutzung für alle.
Wenn ein Button klar beschriftet ist, klicken Menschen eher darauf. Wenn der nächste Schritt verständlich ist, brechen weniger Besucher ab. Wenn ein Formular leicht zu bedienen ist, kommen mehr Anfragen an.
Ein Button mit „Jetzt Termin anfragen“ ist viel eindeutiger als nur ein Kalender-Symbol. Ein Button mit „Angebot senden“ ist klarer als ein Pfeil-Icon. Und „In den Warenkorb“ ist besser als ein kleines Einkaufswagen-Symbol, wenn es wirklich um den Kaufprozess geht.
Gute Beschriftungen nehmen Unsicherheit raus. Und Unsicherheit ist einer der größten Gründe, warum Nutzer abspringen.
Fazit: Ein Button sollte erklären, was er tut
Buttons sind keine Dekoration. Sie sind Handlungselemente. Sie sollen Menschen helfen, den nächsten Schritt zu machen. Wenn sie nur aus Icons bestehen, geht diese Klarheit oft verloren.
Ein Icon kann unterstützen, aber der Text macht die Funktion eindeutig. Besonders bei wichtigen Aktionen sollte man deshalb nicht allein auf Symbole setzen. Kurze, klare Beschriftungen machen eine Webseite verständlicher, barriereärmer und angenehmer zu bedienen.
Am Ende ist ein guter Button wie ein guter Hinweis im Alltag: kurz, eindeutig und genau dort, wo man ihn braucht.
Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.