Icons semantisieren: Leitfaden in 4 Schritten

Icons sind keine kleinen Zierelemente auf dem Bildschirm, sondern das kürzeste Vokabular in einer Oberfläche. Icons sind Vokabular, keine Dekoration trifft es genau: Allgemein verständliche Symbole, die Nutzer ohne Text zuverlässig erkennen, gibt es vielleicht ein gutes Dutzend

In der Druckpraxis merkt man das sofort. Die Lupe steht für Suche, das Zahnrad für Einstellungen, der Papierkorb für Löschen, das Pluszeichen für Neu anlegen, X für Schließen, das Haus für Startseite, der Zurück-Pfeil für eine Ebene zurück, das Wiedergabe-Dreieck für Starten. Diese Symbole sind wie häufige Wörter. Sie können allein auftreten

Schwierig wird es außerhalb dieses guten Dutzends. Herz, Stern und Lesezeichen wirken alle wie „Merken“, können je nach Plattform aber Gefällt mir, Markieren oder Später lesen bedeuten. Auch Teilen hat kein einziges Symbol: Apple zeichnet oft ein Quadrat mit Pfeil, Android eher drei verbundene Punkte. Wenn ein Print-Management-System „zur Freigabe senden“, „Druckdaten zurückweisen“ und „erneut an die Druckvorstufe senden“ alles in textlose Icons presst, sieht das zwar sauber aus. Wenn etwas schiefgeht, lobt aber niemand das aufgeräumte Layout

Iconography, also ein Icon-System, ist eine Designmethode, bei der Funktionen, Zustände und Aktionen durch eine erkennbare Gruppe bildhafter Symbole dargestellt werden. In der Druckvorstufe und im Kundenportal soll sie Rätselraten reduzieren, nicht zusätzliche ästhetische Last erzeugen

Ob ein Icon allein verwendet werden kann, entscheidet sich daran, ob jemand, der es zum ersten Mal sieht, innerhalb kurzer Zeit dieselbe Antwort nennt. Nicht daran, ob der Designer selbst findet, dass es passt

Ich nutze dafür eine sehr einfache, aber wirksame Methode. Man nimmt dem Icon den Kontext, zeigt es Kollegen oder Kunden etwa 5 Sekunden lang und fragt: „Was passiert, wenn Sie darauf klicken?“ Streuen die Antworten, kommt Text dazu. Sind sie gebündelt, kann man überlegen, den Text wegzulassen. Dieser Test ist verlässlicher als eine halbe Stunde Diskussion im Besprechungsraum

Gerade in Druck-Interfaces darf man diesen Schritt nicht überspringen, weil hinter vielen Buttons Kosten hängen

・„Datei löschen“ braucht den Papierkorb, aber auch Text, damit Kunden es nicht nur als Entfernen aus der Liste verstehen

・„Proof freigeben“ sollte nicht nur mit einem Häkchen gelöst werden. Ein Häkchen kann je nach Workflow fertig, bestanden, bezahlt oder gelesen bedeuten

・„Erneut hochladen“ kann einen Pfeil zusammen mit „Datei erneut hochladen“ nutzen. Ein rotierender Pfeil allein lässt zu viel Raum für Vermutungen

・Für abstrakte Aktionen wie „zur Preflight-Prüfung senden“ gibt es kein allgemein verständliches Symbol. Direkt Text zu schreiben ist schneller

Wenn ein Team gerade den Kalkulationseinstieg, die Upload-Seite für Kunden oder das interne Auftragsboard überarbeitet, empfiehlt das Beratungsteam der Mai Strategy Wissensakademie, zuerst Buttons mit hohem Fehlerrisiko zu erfassen. Erst danach sollte entschieden werden, welche Icons allein stehen dürfen und welche fest mit einem Label verbunden sein müssen

Ein übergabefähiges Icon-Vokabular macht aus jedem Icon einen klaren Eintrag mit Funktion, Text, Zustand und verbotenen Einsatzfällen. Es reicht nicht, Entwicklern ein Paket SVGs zu geben

Für kleine und mittlere Druckereien empfehle ich 4 Schritte. Es muss nicht gleich ein großes Designsystem werden

・1. Häufige Aktionen auflisten: Suchen, Neu anlegen, Löschen, Herunterladen, Hochladen, Zurück, Freigeben, Zurückweisen, Kalkulation, Zahlung, Auftragsverfolgung. Am besten mit den Funktionen beginnen, die täglich geklickt werden

・2. Symbole markieren, die allein stehen könnten: Lupe, Zahnrad, Papierkorb, Pluszeichen, X, Startseite, Zurück, Wiedergabe. Solche Standardsymbole können Kandidaten sein, der Nutzungskontext entscheidet aber trotzdem

・3. Ein Symbol an genau eine Aktion binden: Wenn der Stift für Bearbeiten steht, steht er auf der ganzen Website nur für Bearbeiten. Nicht auf einer anderen Seite plötzlich für Notiz

・4. Eine visuelle Spezifikation festlegen: dieselbe Icon-Familie, dasselbe Raster, dieselbe Strichstärke. Unterschiedliche Strichstärken wirken wie drei Schriftarten in einem einzigen Katalog

Es geht hier nicht darum, besonders edel auszusehen. Es geht darum, dass Design, Kundenservice, Druckvorstufe und Entwicklung dieselbe Sprache sprechen. Das größte Problem einer Druckerei ist nicht ein falsch gezeichnetes Icon. Das Problem ist, wenn jede Abteilung glaubt, sie verstehe dieses Icon schon

Die Semantik von Icons beeinflusst Auftragseingang und Liefertermin, weil eine falsche Auswahl im Kundenportal später zu Rückfragen im Kundenservice, Rückläufern aus der Druckvorstufe, neuer Produktionsplanung und neu verhandelten Terminen werden kann

Ein typischer Upload-Workflow zeigt das gut. Wenn ein Kunde „Datei löschen“ als „diesen Upload abbrechen“ versteht, glaubt er vielleicht, die Datei liege noch im Entwurf. Wenn der Vertrieb ein Status-Icon sieht, aber nicht weiß, ob es „Zahlung ausstehend“ oder „Prüfung ausstehend“ bedeutet, wird wieder angerufen. Wenn die Druckvorstufe „freigegeben“ und „in Produktion gegeben“ mit ähnlichen Icons darstellt, landet der Produktionsauftrag schnell in der falschen Phase

Für Druckereien sollte die Abnahme von Icon-Design nicht nur prüfen, ob die Oberfläche ordentlich aussieht. Entscheidend ist, ob der Prozess eine Vermutung weniger enthält. Genau darauf achte ich bei SaaS- und Print-Automation-Produkten besonders: Je kleiner die Oberfläche, desto präziser muss das Vokabular sein. Ein Icon auf dem Smartphone wird leichter missverstanden als eine erklärende Zeile in einem Desktop-System

Wenn ein Kundenportal an hochgradig individualisierte Commercial-Printing-Prozesse angebunden wird, brauchen Service-Szenarien wie bei MINDS besonders klare Begriffe für „Kalkulation, Materialauswahl, Proof, Freigabe, Druckfreigabe“. Denn jeder Schritt betrifft Papier, Veredelung, Farbe und Liefertermin

Kleine und mittlere Druckereien müssen nicht gleich die ganze Oberfläche neu bauen. Drei Stellen bringen zuerst spürbar etwas: Upload, Freigabe, Auftragsverfolgung

Ich würde die Bereiche wählen, zu denen jeden Tag Fragen kommen und bei denen jeden Tag falsch geklickt wird. Nicht sofort einer schönen Icon-Bibliothek hinterherlaufen. Erst die Buttons aufräumen, die der Kundenservice ständig erklären muss

・Upload-Seite: Herunterladen, erneut hochladen, löschen und Vorschau sollten Standard-Icons plus Text nutzen, damit Kunden die Dateiverwaltung nicht falsch einschätzen

・Freigabe-Seite: Freigeben, zurückweisen, Anmerkung und Änderung anfordern brauchen eindeutigen Text. Häkchen und Kreuz dürfen die Prozessverantwortung nicht allein tragen

・Auftragsverfolgung: Angebot ausstehend, Zahlung ausstehend, in Preflight-Prüfung, in Produktion, versandbereit sollten primär über Statustext laufen. Icons helfen nur beim schnelleren Erkennen

・Backend-Werkzeugleiste: Interne Funktionen, die täglich genutzt werden, können Schritt für Schritt auf icon-only reduziert werden. Voraussetzung ist, dass Einarbeitung und SOP dasselbe Icon-Vokabular verwenden

Ganz einfach: Überall dort, wo ein falscher Klick zu Korrekturschleifen, Rückläufern, Neuplanung oder Beschwerden führt, bleibt Text stehen. Überall dort, wo es nur um schnelleres visuelles Scannen geht, können Icons nach und nach verdichtet werden

・Icons sind Vokabular in einer Oberfläche. Wenn die Bedeutung nicht stabil ist, dürfen sie nicht allein auftreten

・Außerhalb des guten Dutzends allgemein verständlicher Symbole brauchen die meisten Icons ein Label, das die Semantik auffängt

・Bei der Abnahme von Icons in Prepress-Systemen zählt, ob Kunden weniger raten müssen, nicht ob ein paar Wörter verschwunden sind

・Ein Symbol darf nur an eine Aktion gebunden sein. Sonst übersetzen Kundenservice, Druckvorstufe und Entwicklung jeweils anders

・Wenn es für abstrakte Prozessschritte kein allgemein verständliches Icon gibt, ist direkter Text meist das günstigste Fehlerschutz-Design

Für Teams in Druckproduktion und SaaS ist der nächste Schritt nicht, noch mehr Icons zu zeichnen. Der nächste Schritt ist eine „Icon-Vokabelliste“: die risikoreichen Buttons in den Abläufen Upload, Freigabe, Auftragsverfolgung, Zahlung und Druckfreigabe erfassen und einzeln entscheiden, ob das Icon allein stehen darf, ob ein Label nötig ist und ob eine irreversible Aktion betroffen ist. Diese Liste wird zur Designrichtlinie, aber auch zu Kundenservice-Texten, technischen Benennungen und Schulungsmaterial für neue Mitarbeitende

・Icons sind Vokabular, keine Dekoration