Ikonografie ist der Bestand an Symbolen einer Oberfläche samt den Regeln, nach denen sie gezeichnet und eingesetzt werden. Dazu gehören die Wahl der Motive, die Strichstärke, das Raster, auf dem die Zeichnungen sitzen, und die Entscheidung, ob ein Symbol eine Beschriftung bekommt. Ein Symbolsatz verhält sich wie eine Schrift: Er fällt erst auf, sobald ein Zeichen aus der Reihe fällt.
- Ikonografie
Der Bestand an Symbolen einer Oberfläche samt den Regeln, nach denen sie gezeichnet und eingesetzt werden.
Beispiel: „Die Ikonografie legt fest, dass alle Symbole linear gezeichnet sind und auf einem Raster von 24 Pixeln sitzen.“Auch: Iconography oder Ikonographie. In der Kunstgeschichte bezeichnet Ikonografie die Deutung von Bildmotiven, im Interface-Design ist der Symbolsatz gemeint.
Abgrenzung zum Icon: Das Icon ist das einzelne Zeichen, die Ikonografie der ganze Satz mit seinem Regelwerk. Der Unterschied entspricht dem zwischen einem Buchstaben und einer Schriftfamilie.
Nur eine Handvoll Symbole wird ohne Beschriftung verstanden
Verlässlich erkannt werden das Haus für die Startseite, die Lupe für die Suche, der Drucker und das Kreuz zum Schließen. Bei allem anderen raten Besucher. Das Herz bedeutet auf der einen Seite „gefällt mir“ und auf der anderen „merken“, und die drei Punkte heißen auf jeder Plattform etwas anderes. Die Nielsen Norman Group rät deshalb zu einer Beschriftung, die dauerhaft sichtbar ist und kein Hover braucht.
Der Burger-Button ist der bekannteste Grenzfall. Er wird im Eintrag zur Off-Canvas-Navigation behandelt.
Ein Symbolsatz braucht gemeinsame Regeln
Symbole aus verschiedenen Bibliotheken fallen sofort auf, weil Strichstärke und Rundungen voneinander abweichen. Festzulegen sind die Rastergröße, die Stärke der Linien und die Entscheidung zwischen linearer und gefüllter Zeichnung. Dazu kommt die Frage, wer das nächste Symbol zeichnet, wenn eine neue Funktion dazukommt.
Wir empfehlen, den Satz aus einer gepflegten Bibliothek zu übernehmen und nur die fehlenden Motive selbst zu zeichnen. Ein Symbol, das in zwei Größen gebraucht wird, braucht zwei Zeichnungen: Was bei 48 Pixeln fein wirkt, verschwimmt bei 16.
Symbole sind Bedienelemente und werden auch so geprüft
Ein Symbol, das eine Handlung auslöst, braucht einen Namen für Screenreader und eine Tippfläche in Fingergröße. Dazu kommt der Kontrast: Das Erfolgskriterium 1.4.11 der WCAG verlangt für grafische Elemente, die zum Verstehen oder Bedienen nötig sind, ein Verhältnis von mindestens 3:1 zum Hintergrund. Hellgraue Symbole auf weißer Fläche fallen dort regelmäßig durch.
Für rein dekorative Symbole gilt der umgekehrte Weg. Sie werden vor Screenreadern versteckt, damit die Vorlesereihenfolge frei von Meldungen wie „Grafik Pfeil rechts“ bleibt.