Icons sind kleine Elemente mit großem Einfluss auf den Gesamteindruck, weil sie auf jeder Seite dutzendfach vorkommen. Die zwei Entscheidungen, die zählen: welches Set, und wie eingebunden.
Ein Set, konsequent
Icon-Sets unterscheiden sich in Strichstärke, Rundung der Ecken, Detailgrad und der Frage, ob sie umrissen oder gefüllt sind. Zwei gemischte Sets erzeugen ein unruhiges Bild, auch wenn niemand benennen kann, woran es liegt.
Auswahlkriterien:
- Vollständigkeit. Enthält das Set die Symbole, die tatsächlich gebraucht werden? Der Test ist eine Liste der eigenen Bedarfe, nicht die Gesamtzahl der Icons
- Strichstärke passend zur Schrift. Eine dünne Schrift verträgt dünne Icons, eine kräftige Schrift kräftige. Ein Set mit 1,5 bis 2 Pixel Strichstärke passt zu den meisten Textschriften
- Einheitliches Raster. Alle Icons in derselben Grundgröße gezeichnet, damit sie nebeneinander gleich groß wirken
- Lizenz. Freie Sets sind in der Regel unter Lizenzen verfügbar, die kommerzielle Nutzung erlauben. Die Lizenz je Set prüfen und dokumentieren
- Pflege. Ein Set, das weiterentwickelt wird, deckt später auch neue Bedarfe ab
Als SVG einbinden, nicht als Schrift
Icon-Schriften waren lange üblich und sind heute die schlechtere Wahl:
- Sie laden eine zusätzliche Datei, häufig von einem fremden Server, was ein Datenschutz- und ein Ladezeitthema ist
- Sie bringen den gesamten Zeichensatz mit, auch wenn fünf Symbole gebraucht werden
- Hilfsmittel behandeln sie als Text und lesen gelegentlich unerwartete Zeichen vor
- Bei fehlgeschlagenem Laden erscheinen Platzhalterzeichen
Eingebettete SVG ist die pragmatische Lösung: Das Icon steht direkt im Markup, wird mit der Textfarbe eingefärbt, skaliert beliebig und lädt keine zusätzliche Datei.
Für Projekte mit sehr vielen Icons ist ein Sprite eine Zwischenlösung: eine Datei mit allen Symbolen, aus der einzelne referenziert werden. Das spart Markup, kostet aber eine Anfrage.
Barrierefreiheit
Drei Fälle, die unterschiedlich behandelt werden:
Dekoratives Icon neben Text. Das Icon illustriert nur, der Text trägt die Information. Es wird für Hilfsmittel ausgeblendet, damit es nicht doppelt vorgelesen wird.
Icon als einziger Inhalt einer Schaltfläche. Etwa ein Menü-Symbol oder ein Schließen-Kreuz. Hier braucht das Bedienelement eine zugängliche Beschriftung, damit klar ist, was es tut.
Icon, das eine Information trägt. Etwa ein Statussymbol in einer Tabelle. Es braucht eine Textalternative, und die Information darf nicht allein über Form oder Farbe kodiert sein.
Zusätzlich gilt: Icons, die zum Verständnis nötig sind, brauchen einen Kontrast von mindestens 3 zu 1 gegen den Hintergrund. Hellgraue Icons auf Weiß fallen durch. Siehe Kontraste prüfen.
Größen und Abstände
- Neben Fließtext: etwa die Höhe der Großbuchstaben, praktisch 16 bis 20 Pixel
- In Schaltflächen: 18 bis 20 Pixel, mit 8 bis 10 Pixel Abstand zum Text
- Als Themen-Symbol in Karten: 24 bis 32 Pixel, gegebenenfalls in einer farbigen Fläche
- Klickfläche bei Icon-Schaltflächen: mindestens 44 Pixel, unabhängig von der Icon-Größe
Der letzte Punkt ist der wichtigste: Ein 20 Pixel großes Icon als Schaltfläche braucht eine umgebende Klickfläche, die deutlich größer ist. Auf Touchgeräten ist das der Unterschied zwischen bedienbar und Glückssache.
Illustrationen
Illustrationen sind sinnvoll, wenn sie etwas erklären: einen Ablauf, ein Verhältnis, einen Zustand. Als Dekoration wirken sie schnell beliebig.
Ein praktischer Einwand gegen die weit verbreiteten kostenlosen Illustrationsstile: Sie kommen auf sehr vielen Websites vor und sind erkennbar. Wer damit arbeitet, bekommt ein Erscheinungsbild, das an tausend andere erinnert.
Die Alternativen: eigene Fotos, die die tatsächliche Arbeit zeigen, oder schlichte Diagramme, die etwas erklären. Beides wirkt spezifischer.
Praktische Regeln
- Ein Set für die gesamte Website
- Als eingebettetes SVG, nicht als Schrift
- Strichstärke zur Textschrift passend
- Mit der Textfarbe einfärben, nicht mit eigenen Farben
- Dekoratives für Hilfsmittel ausblenden, Bedeutungstragendes beschriften
- Klickflächen unabhängig von der Icon-Größe ausreichend groß
- Lizenz je Set dokumentieren
- Icons nicht als Ersatz für Text verwenden, wo Text verständlicher ist
Punkt 8 wird häufig übersehen: Ein Icon ohne Text ist nur dann verständlich, wenn seine Bedeutung allgemein etabliert ist. Bei einem Menü-Symbol ist das der Fall, bei einem branchenspezifischen Symbol in der Regel nicht.