develop free website

Was Sie schon immer über Icons wissen wollten,

aber bisher nicht zu fragen wagten…

Gute Icons verbessern jedes Nutzererlebnis – sie bringen mehr Übersichtlichkeit, eine bessere Auffindbarkeit sowie eine höhere visuelle Attraktivität mit sich. Davon profitiert auch Ihr Angebot.

Welches Wissen bringt die Zielgruppe mit, damit die Metapher korrekt interpretiert wird? Entspricht der grafische Ausdruck dem Umfeld und der Erwartungshaltung, erfüllt das Symbol die beabsichtigte Funktion? Kann das Icon nachträglich für andere Zwecke angepasst werden?

Gibt es überhaupt universell verständliche Symbole? Welche Sorte von Icons holt die meisten Klicks? Und aus welchem Dateiformat lassen sich alle anderen ableiten? Testen Sie Ihr Wissen mit unseren drei Fragen.

Das kleine Icon-Quiz:

1. Frage

Welches der folgenden Symbole assoziieren die Benutzer am ehesten mit dem Begriff «Standort»?

A. ein Kompass

B. Karte oder Plan

C. Pin-Markierung

D. ein Globus


Korrekte Antwort: C

Ein quantitativer Test der NNGroup zeigt, dass etwa 90% der NutzerInnen das Pin-Symbol mit einem Standort assoziieren. Dieses Symbol wird vor allem als Markierung für einen spezifischen Ort wahrgenommen, und dabei meistens für den aktuellen eigenen Standort.

2. Frage

Auf welches der folgenden Symbole wird am häufigsten geklickt, um das Tab eines Akkordions zu öffnen ?

A. Pfeil nach unten (Caret)

B. Plus-Zeichen

C. Pfeil nach rechts

D. Keines davon, ein Akkordeon-Tab ohne Icon


Korrekte Antwort: A
Laut einer Studie der NNGroup ist der Pfeil nach unten (Caret) die erfolgreichste Variante. Ein Pfeil nach rechts oder ein Pluszeichen schneidet nicht besser ab als die Verwendung überhaupt keines Icons.
Wenn kein Symbol vorhanden ist, tippen die Benutzer eher auf die Textbeschriftung als auf den leeren Bereich in diesem Tab.

3. Frage

Welches Dateiformat ist aufgrund seiner Skalierbarkeit und einfachen Bearbeitung die beste Wahl für das Erstellen von Icons?

A. JPG

B. PNG

C. GIF

D. SVG

Icon-showing-a-vectorized-SVG-Logo


Korrekte Antwort: D

Das SVG-Dateiformat (Scalable Vector Graphics) wird von allen aktuellen Browsern und auch Print-Programmen wie InDesign® unterstützt. Diese Icons sind vektor-basiert und behalten daher in jeder Grösse scharfe Konturen, anders als pixel-basierte Dateiformate wie GIF, JPG oder PNG.

Und welche anderen Formate eignen sich für Icons ?

Diese Eigenschaften haben vektor-basierte Datei-Formate:

Icon-showing-a-vectorized-SVG-Logo


Das SVG-Dateiformat wird von allen aktuellen Browsern und auch Print-Programmen wie Adobe InDesign® unterstützt. Diese Icons behalten in jeder Grösse scharfe Konturen, können animiert und transformiert werden, und alle anderen Datei-Formate lassen sich daraus ableiten — deshalb unser Favorit!

PDF-fileformat-icon


Das PDF-Format wurde 1992 von Adobe auf den Markt gebracht, um eine möglichst grosse Abwärts-Kompabilität für digitale Dokumente zu gewährleisten. Falls Ihre Icons ausschliesslich für Ihre Drucksachen bereit gestellt werden sollen, kann das PDF-Format dafür durchaus in Betracht gezogen werden.

EPS-fileformat-icon


Das EPS-Format gilt als veraltet, und wird heute meistens durch das SVG-Format abgelöst. EPS-Dateien sind in der Printwelt teilweise noch recht verbreitet. Sie können im Programm Adobe Illustrator® geöffnet und in ein aktuelles Format konvertiert werden.

Diese Eigenschaften haben pixel-basierte Datei-Formate:

GIF-fileformat-icon


Das GIF-Dateiformat ist auf maximal 256 Farben beschränkt, und wird im Netz für flächige Grafiken wie Logos und Icons eingesetzt. Es ist als Meme-Format beliebt, weil es animiert werden kann, und es unterstützt dazu 1-Bit Transparenzen.

JPG-fileformat-icon


Das JPG-Format ist aktuell der Standard für fotografische Abbildungen, sowohl digital als auch für den Print-Bereich. Diese Dateien sind aber immer verlustbehaftet, da bei jedem Speichern eine Kompression statt findet. Transparenz wird nicht unterstützt.

PNG-fileformat-icon


Das PNG-Format wurde aus Lizenz-Gründen als Alternative zum GIF-Format entwickelt. PNG-8 kann ebenfalls maximal 256 Farben darstellen. PNG-24 hat die volle Farbtiefe, und kann auch halb-transparente Pixel zeigen. Beide Formate sind vor allem im Netz verbreitet, PNG-24 auch in der Printwelt.

«Ein Icon ist wie ein guter Witz — es muss sofort verstanden werden, aber seine Eleganz entfaltet sich erst auf den zweiten Blick.»
— Saul Bass, Graphic Designer

Webadressen & Fachliteratur

Die ersten 30 Jahre in der Geschichte der Computer-Icons werden auf der Website historyoficons.com aufwändig animiert dargestellt – sehr unterhaltsam, und auf jeden Fall einen Besuch wert.

Jon Hicks heisst der Designer hinter den bekannten Logos von Firefox und Mailchimp. Er hat auch das Icon Handbook veröffentlicht, das aus seinem Webshop momentan gratis als PDF herunter geladen werden kann.

Die Diplomarbeit des Gestalters Holger Ziemann trägt den Titel Icons – Bildzeichen verstehen und gestalten und ist als Buch in der AV-Edition erschienen. Dort gibt's auch eine Leseprobe als PDF.

Das umfassende Standardwerk Digital Icons that Work von Kate Kaplan und Kelly Gordeon wurde 2024 von der NNGroup veröffentlicht. Beide Autorinnen arbeiten dort als User Experience Expertinnen.