Eine Lupe steht für die Suche, drei Striche öffnen das Menü, ein Mülleimer löscht. Für geübte Augen sagt so ein Symbol auf einen Blick, was passiert. Reicht das schon, damit jeder Besucher die Seite bedienen kann?
Oft eben nicht. Steht ein Icon ganz allein da, ohne ein Wort daneben und ohne eine hinterlegte Beschriftung, bleibt es für Hilfssoftware stumm. Und manch ein Symbol versteht ohnehin nicht jeder gleich. Du brauchst dafür kein neues Design. Ein paar saubere Entscheidungen machen Symbole für alle lesbar.
Warum ein Icon allein nicht reicht
Ein Symbol ist ein Bild, und ein Bild braucht eine Beschreibung, damit es auch ohne Sehen ankommt. Screenreader-Nutzer hören sich die Seite vor. Trifft die Stimme auf einen reinen Bild-Knopf ohne Text, hat sie nichts zu sagen.
Im besten Fall liest die Software dann einen kryptischen Dateinamen vor, im schlechtesten herrscht Stille an genau der Stelle, an der eine Aktion wartet. Die Lupe in der Ecke wird zum unsichtbaren Knopf, das Hamburger-Menü zur Sackgasse.
Dasselbe Prinzip kennst Du vom Bild in Worte fassen: Was das Auge sofort erfasst, muss als Text mitgeliefert werden, damit es niemand verpasst. Bei einem Icon-Button geht es genauso um den Namen der Aktion, die dahintersteckt.
Wenn ein Symbol nicht überall dasselbe meint
Selbst sehende Besucher deuten Symbole verschieden. Ein Herz speichert auf der einen Seite einen Merkzettel, auf der anderen vergibt es ein „Gefällt mir". Drei Punkte öffnen mal ein Menü, mal weitere Optionen. Eindeutig ist hier wenig.
Manche Bildchen sind reine Konvention, die man gelernt haben muss. Die Diskette als Speichern-Knopf kennt jeder, der mit Disketten aufgewachsen ist. Jüngere Besucher haben so ein Ding nie in der Hand gehalten und raten.
Je seltener oder kreativer ein Symbol, desto größer das Rätselraten. Ein kurzer Text neben dem Bild oder darunter nimmt die Unsicherheit für alle heraus, lange bevor jemand probehalber draufklickt.
Jedem Icon-Button seinen Namen geben
Die wichtigste Regel ist schlicht: Jeder Knopf, der nur aus einem Symbol besteht, bekommt eine hinterlegte Beschriftung. Diese Beschriftung benennt die Aktion, nicht das Aussehen. „Suche öffnen" hilft weiter, „Lupe" beschreibt nur das Bild.
Du musst diese Beschriftung nicht selbst eintippen, sie ist Sache der Umsetzung. Aber Du kannst sie einfordern und Du kannst das Ergebnis prüfen. Klar benannte Knöpfe sind ohnehin der Kern klarer, bedienbarer Buttons, was der eigene Beitrag dazu vertieft.
Am sichersten fährst Du, wenn das Wort sichtbar neben dem Symbol steht. Ein Papierkorb mit dem Wort „Löschen" daneben versteht jeder sofort, mit oder ohne Hilfssoftware. Wo der Platz fehlt, hilft ein kurzer Text, der beim Berühren mit der Maus erscheint, als zusätzliche Stütze.
- Aktion benennen: „Menü öffnen" statt „Hamburger", „Schließen" statt „X".
- Sichtbarer Text: Wo Raum ist, das Wort direkt neben das Symbol setzen.
- Bei der Agentur nachfragen: Hat jeder reine Icon-Knopf eine vorgelesene Beschriftung?
Form und Farbe brauchen ein zweites Signal
Ein Symbol transportiert seine Bedeutung gern über die reine Form: ein grüner Haken für Erfolg, ein rotes Kreuz für Fehler. Wer Farben anders wahrnimmt, sieht hier zwei ähnliche Zeichen ohne klaren Unterschied.
Darum trägt ein gutes Symbol seine Aussage doppelt. Der Haken meint Erfolg durch seine Form, ein kurzes „Erledigt" daneben bestätigt es in Worten. So bleibt die Botschaft stehen, auch wenn die Farbe wegfällt. In den Grundsatz, Farbe nie als alleinigen Träger einzusetzen, fügt sich das nahtlos ein.
Verlass Dich also nie darauf, dass eine Form oder eine Farbe für sich spricht. Ein erklärendes Wort kostet wenig Platz und macht aus einem hübschen Zeichen eine verlässliche Information.
Dezent und konsistent bleibt im Kopf
Symbole wirken am stärksten, wenn sie ruhig und einheitlich bleiben. Wenn überall bunte Icons blinken, geht der Blick verloren und nichts sticht mehr heraus. Setze Symbole sparsam, dort wo sie führen, und gib ihnen Raum.
Genauso zählt Wiederkehr. Wenn das Speichern-Symbol auf jeder Seite dasselbe Bild trägt und immer an ähnlicher Stelle sitzt, lernt der Besucher es einmal und findet sich danach überall zurecht. Wechselnde Bilder für dieselbe Sache erzwingen ständiges Neulernen.
Halte auch den Stil zusammen. Symbole aus einem Guss, in gleicher Linienstärke und Größe, wirken aufgeräumt und ruhig. Diese Ruhe hilft jedem, der schnell erfassen will, was eine Seite anbietet, und sie schont besonders Augen, die leicht ermüden.
Der schnelle Selbsttest am Bildschirm
Du erkennst stumme Symbole oft in wenigen Minuten, ganz ohne Technikwissen. Geh Deine wichtigsten Seiten durch und schau gezielt auf jeden Knopf, der nur aus einem Bild besteht.
Drei Fragen führen schnell zum Ergebnis:
- Allein verständlich? Würde ein fremder Besucher ohne den Text drumherum wissen, was dieses Symbol auslöst?
- Hat es einen Namen? Steht ein Wort daneben oder erscheint eines beim Berühren mit der Maus?
- Überall gleich? Meint dasselbe Symbol auf jeder Seite dasselbe?
Wo eine Antwort Nein lautet, liegt eine Stolperstelle. Notier sie und gib die Liste an Deine Agentur weiter. Das sind kleine, klar benennbare Aufgaben, die zusammen einen großen Unterschied machen.
Fazit — Symbole, die jeder versteht
Icons sind eine schöne Abkürzung, solange ihre Bedeutung bei jedem ankommt. Ein hinterlegter Name macht den stummen Knopf hörbar, ein Wort neben dem Zeichen nimmt das Rätselraten, ein ruhiger und gleichbleibender Einsatz hält die Seite übersichtlich.
Geh einmal mit den drei Fragen durch Deine Seite und behebe die Lücken. Deine Symbole sprechen danach mit allen Besuchern, und Dein Design verliert dabei nichts.