Gib mir ein Zeichen. Icons und Piktogramme

Ein Bild sagt mehr als 1000 Worte – wo Raum und Zeit für lange sprachliche Hinweise fehlen, kommen Icons und Piktogramme ins Spiel.

Überall begegnen sie uns, die kleinen Helferlein, die einem sagen, wo es lang geht oder was man zu tun hat. Im realen Leben heißen sie Piktogramme, in der digitalen Welt Icons. Im besten Fall sind sie wirklich eine Hilfe, im schlimmsten Fall so kryptisch, das man verzweifelt eine Erklärung sucht.

Icons vertreten Dinge oder Sachverhalte, um Informationen schnell zu vermitteln.

Was ist denn eigentlich ein Icon? Peirce definierte das Icon (vom griechischen, eikón »Bild«) als ein Zeichen, das einen Gegenstand hauptsächlich durch Ähnlichkeit und der mit dem Gegenstand gemeinsamen Eigenschaften darstellen kann. Diese Definition kommt dem Icon des Computerzeitalters schon sehr nahe. Nach der Definition von Eco –  „Ein Zeichen ist alles, was sich als signifizierender Vertreter für etwas anderes auffassen lässt.“ – kann das Icon als ein Zeichen im allgemeinen Sinne gewertet werden.

Anders als Piktogramme, die uns den Weg zu real greifbaren, sehr analogen Tatsachen weisen (Toiletten, Ausgang, Fahrstuhl, Gepäckausgabe, Ticketverkauf usw.), stehen Icons in digitalen Umgebungen oft für Tätigkeiten oder Funktionen: Seit es Kassettenrekorder und Stereoanlagen gibt, haben wir gelernt, dass das nach rechts zeigende Dreieck »Abspielen« und zwei senkrechte Balken »Anhalten« bedeuten – inzwischen haben sich diese Zeichen überall als Icon durchgesetzt – auf YouTube wie auf Kaffeeautomaten.

Ein typisches Beispiel liefert die ikonographische Darstellung der Sonne als eines Kreises, von dem strahlenförmig Linien ausgehen. Das Bild entstand ursprünglich durch die Erfahrung, wenn wir die Sonne mit halb geschlossenen Augen betrachten. Ein Kreis, von dem diskontinuierlich Strahlen ausgehen, scheint auch die wissenschaftliche Idee der Sonne gut nachzuahmen. (Quelle: Umberto Eco – Einführung in die Semiotik)

Sonne am blauen Himmel mit zusammengekniffenen Augen betrachtetKinderzeichnung einer SonneTastatur Icons Monitor Helligkeit weniger und mehr

Kinder übernehmen diese abstrahierte Darstellung der Sonne von anderen Kindern. Diese Konvention wird bei Erwachsenen nun Grundlage für weitere Konventionen, die mit dem eigentlichen Gegenstand »Sonne« nur noch wenig zu tun haben: Zwei Icons auf der Tastatur, die Kreise mit verschieden langen strahlenförmigen Linien zeigen, stehen jetzt für »Monitor-Helligkeit verringern« oder »Monitor-Helligkeit erhöhen«.
Und hier schließt sich der Kreis. Die verbleibende Gemeinsamkeit ist das Blinzeln bei Helligkeit.

Icons werden ständig neu- oder weiterentwickelt.

Das Disketten-Icon für »Speichern« musste irgendwann sterben, weil es die Gegenstands-Vorlage nicht mehr gab und es damit unverständlich wurde. Das gleiche Schicksal erwartet ein Piktogramm-Schild, das man hier und da an Aussichtsplätzen noch findet: Es zeigt eine Balgenkamera! Heutige Teenies verstehen das vermutlich nicht mehr.

Teide Aussichtsplatz Pictogramm
Andere Icon-Klassiker blicken mittlerweile auf eine richtige Geschichte zurück. Ein schönes Beispiel ist der Abfalleimer auf dem virtuellen Schreibtisch. Rechnerleistungen, Grafikkarten, Farbwiedergabe des Monitors, gestalterische Moden wie 3D oder Flatdesign haben dieses Icon im Laufe der Jahre geformt und verändert.
Der Einrichtungsgeschmack der Designer hat offensichtlich ebenfalls Spuren hinterlassen:

Trash can macintosh historyDass die Entwicklung ein Icon nicht unbedingt besser macht, wird dabei auch deutlich. Bei extrem kleinen Darstellungen funktioniert das neue Icon nämlich nicht: Beim »Löschen«-Button in der Fensterleiste des aktuellen Mac OS begegnet uns auf einmal wieder die simple Ur-Tonne. Konsistent ist das nicht gerade. Man darf gespannt sein, wie die Entwicklung weitergeht. Wann kommt der Schwingdeckel?

Trash Can Yosemite

Icons müssen einfach bleiben, um schnell erfassbar zu sein.

Bei der Icon-Entwicklung sollte man nicht versuchen, auf Gedeih und Verderb die ganze Geschichte zu erzählen. Ein mit Detailinformationen überfrachtetes Bildchen wird kein gutes Icon, sondern ein wirres, schlecht erfassbares Gebilde. Abstraktion und Reduktion – Grundfähigkeiten des Designers in der visuellen Kommunikation – sind nirgends gefragter als bei der Gestaltung von Icons und Piktogrammen.
Aber Reduktion und Abstraktion stoßen an Grenzen: Das Ergebnis muss allgemeinverständlich und nachvollziehbar bleiben, möglichst ohne Spielraum für Fehlinterpretationen.
Wo für eine Information eine bestimmte Visualisierung bereits allgemein akzeptiert ist, sollte der Designer nicht in falsch verstandenem Originalitätswahn unbedingt eine neue erschaffen. Hier ist es im Sinne einer reibungslosen Kommunikation besser, vorhandene Zeichen zu verwenden.

Icons können missverstanden und fehlinterpretiert werden

Icons muss man lernen – das soziale und kulturelle Umfeld spielt bei der Einordnung und Identifizierung von Zeichen eine große Rolle.

Seit den 60er Jahren werden Frauen auf Piktogrammen mit ausgestelltem Kleid abgebildet. In Europa und Nordamerika tragen Frauen mittlerweile öfter Hosen als Röcke, das Zeichen ist also eigentlich gar nicht mehr zeitgemäß. Trotzdem hat sich dieses »westliche« Piktogramm international durchgesetzt – auch in Kulturkreisen, in denen traditionell ein anderer Dresscode herrscht. Es wurde gelernt und als allgemeingültig akzeptiert.
Icons auf Flughäfen haben eine so breite, multikulturelle Zielgruppe, dass Designer-Organisationen wie die AIGA an ihrer Normierung arbeiten, damit sie kulturübergreifend verstanden werden.

Ein naheliegendes und scheinbar harmloses Zeichen kann auch unerwarteten Imageschaden bewirken. Als IT-Fachleute den Begriff Cloud erfanden, war ihnen vermutlich nicht bewusst, dass nicht nur positive Assoziationen damit verbunden werden können. Nun war der Name in der Welt, und das Icon dafür zeigt eine Wolke, logisch. Ein  flüchtiges Wasserdampfgebilde, das seinen Inhalt großzügig über die Landschaft verteilt, als Speicherort für Daten? Misstrauische User sehen in der Cloud eher die Weiterentwicklung des Abfalleimers. Man packt Dateien rein und schwupp – weg sind sie. ;)

IMG_4716_sEin kleines Piktogramm auf Weinflaschen warnt vor dem Alkoholgenuss in der Schwangerschaft. Uns sind (bisher unbestätigte) Gerüchte zu Ohren gekommen, dass das Zeichen in nicht-europäischen Ländern angeblich grob missverstanden worden sein soll: Wein wurde hier und da als Verhütungsmittel betrachtet…

Icons sind technischen Entwicklungen unterworfen.

Die Entwicklung der Technik macht immer neue Icons nötig – und stellt Designer wie User vor neue Herausforderungen: Zum Beispiel bei der Erklärung der Gestensteuerung. Dass eine Hand mit gestrecktem Zeigefinger und zwei Pfeilen nach rechts und links nicht stellvertretend für die Drohung »Das darfst Du nicht« steht, sondern für das Wischen auf Tablet und Smartphone, muss erst gelernt werden.

Aber auch umgekehrt kann die Entwicklung und Akzeptanz eines Icons die Technik verändern. Drei untereinander angeordnete Querbalken bedeuten »Navigation/Menü« und haben das Webdesign verändert. Weil inzwischen die meisten Webuser dieses Icon begriffen haben, muss die Navigation nicht mehr zwangsläufig eingeblendet sein, sogar der Begriff kann ganz verschwinden.

Icon für das Einblenden der NavigationIcon für das Einblenden der NavigationIcon für das Einblenden der Navigation

Seit Websites auch auf kleinen Monitoren funktionieren müssen, geht man immer mehr dazu über, vom Kleinen ins Große zu denken – »Mobile First« heißt das Zauberwort im responsiven Webdesign. Unter diesem Gesichtspunkt spielt das Icon-Design eine zentrale Rolle.

Die Qualität der Icons verbessert die Usability einer Website.

Bei der Website der Fotoakademie Ralf Müller haben wir Icons in der Navigation eingesetzt. Nur im ausgeklappten Zustand wird die Navigation mit dem Textlink angezeigt. Wenn der User den Zusammenhang zwischen Icon und Textlink gelernt hat ist das Ausklappen der Navigation nicht mehr nötig. Die Seiten können dann direkt über die Icons angesteuert werden. Die AGB hinter einem Handschellen-Icon zu verstecken, war zugegebenermaßen mehr ein Gag.

Schnellauswahl über Icon Navigation aufgeklappter ZustandSchnellauswahl über Icon Navigation eingeklappter Zustand

 

Das Design der Icon-Familie

Das Icon-Design ist stark von dem übergeordnetem Corporate Design abhängig, kann aber auch den Stil beeinflussen. Wie bei der von uns gestalteten Website des Ingenieurbüros Strätgen können die Icons auch mal illustratives Element sein und für das Design die zentrale Rolle spielen.

Icons auf der Strätgen Website

Die Icons untereinander sollten ein geschlossenes Bild vermitteln. Ein festgelegtes Raster, eine bestimmte Farbgebung, wiederkehrende Grundformen oder Strichstärken helfen, den Icon-Stil unverwechselbar zu machen. Bei Web-Icons müssen vorher in enger Zusammenarbeit mit den Entwicklern und Interface-Designern die Einsatzmöglichkeiten und alle auftretenden Größen geklärt werden.

Oft steht das Icon stellvertretend für ein Produkt, für Dienstleistungen oder eine Produktgruppe. Wie beim Webshop Letterpresso, im Familienreisenprospekt* von Rucksack Reisen und auf der Website* von ONE WORLD Reisen mit Sinnen:

Produkt Icons der Letterpresso Website

Icons der Rucksack Reisen Website

Icons der Reisen mit Sinnen (OneWorld) WebsiteBei Icons, die nur aus Linien und Umrandungen aufgebaut sind, wie z.B. hier auf unserer Website, darf die Linienstärke ein Pixel nicht unterschreiten. Rundungen und Schrägen sind anders zu behandeln als horizontale und vertikale Linien. Auch hier gilt wieder »Mobile First«: Ausgehend von den kleinsten Icons, die nur beim Smartphone zum Einsatz kommen, haben alle Linien sämtlicher Icon-Größen genau die gleiche Pixelbreite. Bei den größeren Varianten sind nur die Innenräume und Abstände verändert worden.

Icons der Posdiena Wrobel Kommunikationsdesign Website

 

Die eigenen Icons als Schrift installieren.

Texter oder Redakteure möchten Icons u.U. im laufenden Text einsetzen oder einfach in eine Website einpflegen. Dann bietet es sich an, die Icons als eigenen Font einzusetzen.

Was bei Icon-Bildern nicht geht, ist bei Icon-Fonts ohne weiteres möglich: Da es sich um Schriften handelt, sind diese Icons problemlos durch die Schriftgröße skalierbar und können beliebig eingefärbt werden. Sie können sowohl am Zeilenanfang als auch mitten im Text stehen und folgen somit dem Textumbruch. Als Webfont können sie bei der Gestaltung der Internetseite nützlich sein oder als Open Type Font (OTF) auf dem PC oder Mac.

Icons bieten viele Möglichkeiten. Sie verschaffen dem Projekt einen individuellen Charakter, eine gute Usability, lockern Texte auf. Wir beraten Sie gerne weiter.

* nicht mehr aktuell

Merken

Merken

Gepostet von am

Gepostet unter Design + Grafikdesign
Verschlagwortet mit , , ,

kommentieren




Bitte ein Update!

Kennen Sie unseren Newsletter »Update PW«?
Drei- bis viermal im Jahr informieren wir Sie damit zu Themen aus Design, Internet und/oder Marketing, Social Media, Work-Life, empfehlen Bücher oder nützliche Tools. Die bisherigen Inhalte können Sie hier anschauen.
Selbstverständlich benutzen wir Ihre E-Mail-Adresse ausschließlich für den Versand unseres Newsletters und geben sie nicht an Dritte weiter. Bestellen Sie den Newsletter bitte hier:

* erforderlich

Bevorzugtes E-Mail-Format: