Icon-Design
Web-Icons und Usability

WorkspaceZubehör

Symbole helfen Nutzern, komplexe Zusammenhänge zu erfassen. Allerdings nur, wenn diese sie verstehen. Internet Professionell zeigt, wo Icons helfen können und wie Sie eigene Piktogramme perfekt gestalten.

Piktogramme

Icon-Design

Unsere Welt wird immer komplexer. Mehr Informationen müssen in kürzerer Zeit vermittelt werden. Kein Wunder also, dass Piktogramme, kleine prägnante Grafiken, in allen Lebenslagen helfen. Ob auf Verkehrsschildern, dem heimischen Desktop oder im Web, Piktogramme sind überall zu finden. Ein Ausrufezeichen warnt vor Gefahren oder weist auf aufregende Informationen hin, ein stilisierter Bauarbeiter mit Schaufel nervt auf Autobahnen und Websites. Rein begrifflich werden die Piktogramme für den Computer auch als Icons bezeichnet.

Selbsterklärend?

Sagt eine Grafik mehr als tausend Worte? Die Antwort ist in der Praxis eher ein »vielleicht« und hängt hauptsächlich von der Erklärkraft des Bildes ab. Die Erklärkraft wiederum besteht aus dem, was der Nutzer schon weiß, dem Gelernten und der Assoziierfähigkeit des Nutzers. Sprich, er muss das Gelernte auf das aktuelle Icon übertragen. Ein gutes Beispiel dafür sind WC-Symbole, die zwischen dem WC für Damen und dem für Herren unterscheiden. Der Nutzer hat in langjähriger Erfahrung gelernt, dass das Symbol auf der WC-Tür für die Unterscheidung Damen und Herren dient. Außerdem kennt er einige Unterscheidungsmerkmale – meist hauptsächlich die Symbolform. Das heißt, auch wenn die jeweiligen Symbole von der Norm auf öffentlichen Toiletten abweichen, hat der Nutzer kein Problem, das Symbol zu erkennen.

Im Web gibt es ähnlich gut gelernte Symbole: Beispielsweise steht ein Einkaufswagen-Symbol in allen Webshops für den Warenkorb, egal, ob es grün oder gelb ist und welcher Stilrichtung es folgt. Druckersymbole sind schon etwas schwieriger. Zwar sind sie auch gut gelernt, aber die Formgebung ist nicht ganz so eindeutig wie beim Einkaufswagen. Hier gilt es also schon, bei der Icon-Entwicklung große Sorgfalt walten zu lassen.


Neue Icon-Welt

Icon-Design

Icons haben unbestreitbar einige Vorteile: Der Nutzer begreift sehr schnell, was mit einem Icon gemeint ist, wenn er die Bedeutung wie beim erwähnten Einkaufskorb oder Druckersymbol bereits gelernt hat. Oder um es fachlicher auszudrücken: Die Dechiffrierung von Icons in Bedeutung gelingt sehr schnell. Außerdem sind Icons natürlich ein optischer Blickfang. Gerade auf Web-2.0-Sites wie Blogger.com werden Icons gern eingesetzt. Sie sind dort nicht nur eine Auflockerung neben den großen Farbflächen, sondern tragen viel zu einem der wichtigsten Charakteristika von Web-2.0-Seiten bei: der einfachen und klaren Erscheinung. In eine ähnliche Richtung gehen die häufig als Icons verwendeten Zahlen.

Die Frage ist nun, wie der Webdesigner mit Icons umgeht. Sie können nur ein einzelnes Icon beispielsweise als Warenkorb einsetzen, oder aber Sie verwenden einen vollständigen Icon-Satz. Aber ob nun ein Icon oder mehrere: Sie müssen zum Corporate Design und zur Gestaltung Ihrer Website passen. Nichts stört mehr als ein Icon, das aus der Reihe tanzt. So haben sich die verschiedenen Symbole der Betriebssysteme zwar im Lauf der Jahre verändert. Trotzdem ist aber immer noch recht klar zu erkennen, welche Symbole beispielsweise zu Windows oder zu einem Mac gehören und damit aus einem Guss sind.

Die Schwierigkeit bei Icons liegt also in der Entwicklung. Zum einen müssen Icons zum Design passen, zum zweiten benötigen mehrere Icons eines Sets gemeinsame Merkmale und zum dritten müssen alle Icons die gewünschte Aussage treffen. Bei Icons für komplexe und vom Nutzer noch nicht gelernte Funktionen bedeutet das meist, dass das Icon mit Text verbunden werden muss. So setzen viele Websites mit Icons vor allem aus dem Web-2.0-Umfeld auf die Verbindung von Icon und Text und bringen ihren Nutzern damit bei, was eigene Icons bedeuten. Beim zweiten Besuch wird sich der Besucher dadurch deutlich schneller zurechtfinden. Text und Bild unterstützen sich so gegenseitig.


Icon-Entwicklung

Icon-Design

Welche Schwierigkeiten in der Entwicklung von eigenen Icons liegen, wird deutlich, wenn Sie an das Piktogramm für die Weiblichkeit denken. Dabei handelt es sich um ein Kreuz unter einem Kreis. Dreht man dieses Symbol um 180 Grad, wird aus der Weiblichkeit das Piktogramm für eine Kirche. Eine um 180 Grad gedrehte Bedeutung. Das heißt also, kleine Änderungen in der Icon-Optik – hier dem Betrachtungswinkel – haben direkten Einfluss auf Bedeutung und Verständlichkeit von Icons. Um hier Fehler zu vermeiden, sollten Sie bei der Entwicklung zielgerichtet vorgehen. Als Erstes gilt es zu definieren, was Sie mit Ihren Icons erreichen möchten.

Die Ziele können Informationsvermittlung und abstrakte Darstellung von komplexen Zusammenhängen sein. Icons können aber auch nur den Text ein wenig unterstützen oder auflockern. Außerdem ziehen Icons die Aufmerksamkeit auf sich, wenn nicht zu viele verwendet werden. Hier ist es besonders wichtig, die eigenen Inhalte zuerst einmal zu gewichten und dann eine passende Menge an Symbolen zu finden. Die Menge der sinnvoll einsetzbaren Icons ist allerdings nicht nur vom Inhalt abhängig, sondern auch von der Position und vom Umfeld. Verwendet eine Website beispielsweise viele Bilder, können Icons ruhig etwas in den Hintergrund treten (zum Beispiel bei Etsy), während sie auf einer grafischen Site wie Blogger.com mehr optisches Gewicht haben.

Neben den Zielen benötigen Sie geeignete Charakteristika für Ihre Icons. Die Bandbreite reicht hier vom Comic-Stil über Schwarz-Weiß-Icons bis zu Miniatur-Fotos. Diese Charakteristika ergeben sich aus Ihrem Corporate- und Website-Design und natürlich aus der Wirkung, die Sie mit den Symbolen erzielen möchten. Der Stil ist außerdem davon abhängig, in welchen Größen und Formaten Sie ein Icon verwenden möchten. Ein sehr detailreicher Stil wird mit einem Favoriten-Icon auf 16 x 16 Pixel nicht funktionieren. Im Folgenden werden einige Charakteristika für Icons diskutiert, die auch eine komplette Icon-Welt definieren können.


Form und Richtung

Icon-Design

Bei der Form gilt es, zu entscheiden, ob das Piktogramm auf einem Hintergrund steht. Der Hintergrund kann rechteckig oder rund sein und rahmt die Inhalte des Icons ein. Bei frei stehenden Icons kann der Rahmen dagegen eine Outline sein oder aber das Icon steht auf einem Schatten, falls dies die Symbolgröße zulässt. In einem Icon-Satz ist die Form so wichtig, dass sie auf jeden Fall einheitlich sein sollte. Ein Icon mit Hintergrund passt eben nicht zu einem freigestellten. Aber auch kleinere Formunterschiede wie zwischen harten, eckigen Kanten und runden Passagen können die Gemeinsamkeiten eines Icon-Satzes zerstören.

Bei der Richtung sind Symbole sehr sensibel. Beispielsweise sollten Sie Pfeile nicht auf den Kopf stellen: Ein Pfeil nach unten symbolisiert im Web meist einen Download, ein Pfeil nach rechts dagegen »Weiter« und ein Pfeil nach links »Zurück«. Hier spielt das Bezugssystem natürlich auch eine Rolle: Im Web ist der Pfeil nach unten der Download, in einem Hochhaus beim Fahrstuhl gibt er die Richtung nach unten an, im Parkhaus weist er darauf hin, wo man das Ticket einschieben muss. Auch wenn Sie Symbole nur für das Web einsetzen, sollten Sie an andere Kontexte denken, in denen das Icon eingesetzt werden könnte.

Farbwelt und CI

Icons in einem Set oder einer Serie sollten natürlich zueinander passen. Verwenden Sie beispielsweise Blau als Grundton, sollte dieser sich in allen Icons wiederfinden. Unterteilen Sie dagegen Bereic
he der Website in verschiedene Farben, müssen die jeweiligen Icons natürlich farblich zum Bereich passen. In der Entwicklung ist es empfehlenswert, erst die Charakteristika anhand eines oder weniger Icons herauszuarbeiten und diese dann auf das ganze Set zu übertragen.

Begrifflichkeiten

Beim Entwerfen von Piktogrammen sollten Sie auch die darzustellende Begrifflichkeit genauer prüfen. Wollen Sie beispielsweise ein Icon verwenden, das Musik darstellt, gibt es verschiedene Möglichkeiten: ein Ohr, eine Note, einen Lautsprecher oder einen Kopfhörer. Das Ohr visualisiert am ehesten den Begriff Hören, während eine Note an das Notenblatt oder eine Melodie erinnert und bei vielen Nutzern vermutlich die Assoziation »selber spielen« weckt. Das heißt, die Note ist mit einer deutlich aktiveren Bedeutung aufgeladen. Lautsprecher sind dagegen eher mit Lautstärke und Lärm beziehungsweise Sound im Allgemeinen belegt.

Der Kopfhörer visualisiert zu guter Letzt zwar auch das abgeschottete, individuelle Hören, kann aber eventuell mit Ohrschutz und damit Arbeitsschutz verwechselt werden. Im Web wird der Kopfhörer auch oft zur Regelung der Lautstärke verwendet.


Technik und Tools

Icon-Design

Zu guter Letzt sollten Sie bei der Konzeption von Icons beachten, wofür sie verwendet werden sollen. Wenn Icons auch im Print-Bereich, beispielsweise in Unternehmensbroschüren, zum Einsatz kommen sollen, müssen sie von Anfang an groß genug und eventuell gleich als Vektoren angelegt werden. Ansonsten ist später teures Nachbauen in einem Vektorgrafikprogramm wie Adobe Illustrator notwendig. Im Web sind vor allem bei kleinen Dateigrößen die so genannten Treppeneffekte bei schrägen Linien zu beachten. Hier muss oft auf Pixelebene nachkorrigiert werden. Bei sehr kleinen Größen kommt man um den Treppeneffekt natürlich nicht herum.

Als Dateiformat bietet sich für Icons prinzipiell jedes der Webformate an. Häufiger besitzen Icons weniger Farben und lassen sich gut als PNG-8 oder GIF speichern. Sie sollten allerdings das Original immer in größerer Auflösung und mit allen Farben vorhalten.

Einziger Sonderfall bei den Icons sind die Favoriten-Icons, die das Dateiformat ICO verwenden. Um sie zu erzeugen, verwenden Sie entweder einen Icon-Spezialisten wie das Icon-Builder-Plug-in für Photoshop oder Sie lassen sie sich hier online generieren.

Fazit

Icons bereichern eine Website, wenn sie richtig eingesetzt werden. Das Wichtigste ist, dass der Nutzer die Icons auch wirklich erkennen und schnell erfassen kann. Sollte er ein Icon noch nicht kennen, benötigt er Unterstützung durch einen Text oder beispielsweise ein Rollover oder eine Quickinfo mit Erklärung.