Dirk Metzmacher 17. März 2008

10 (vermeidbare) Fehler im Icon-Design

Kein Beitragsbild

Es ist natürlich leichter, die Werke anderer Künstler zu kritisieren, als selber kreativ tätig zu werden. Doch, wenn
diese Kritik objektiv und sachlich erfolgt, ist sie interessant und lehrreich. Zahlreiche Beispiele zeigen kleine Fehler im
Icon-Design auf, die sich leicht vermeiden lassen. Das größte Problem ist schnell genannt: Einerseits werden die
Bildschirme immer größer, andererseits werden Icons immer noch aus den guten alten, aber vor allem nicht so leicht skalierbaren, Pixel aufgebaut. Doch nicht nur die verschiedenen Größen machen Probleme.

1. Ungenügende Differenzierung
Wird eine ähnliche Grundlage für mehrere Icons innerhalb eines Sets verwendet, sind falsche Klicks der Anwender vorprogrammiert.

Screenshot

Was schon bei den großen Varianten für Verwirrung sorgen kann, wird bei den Icons in geringerer Größe noch
verschärft. Ein flüchtiger Blick kann so schnell zum Start der falschen Applikation führen. Die hier gezeigten Beispiele
stammen aus den System-Utilities von Mac OS X.

Screenshot

2. Zu viele Elemente
Eine Regel lautet, Icons auf die nötigsten Formen zu reduzieren, die ausreichen, um die mit der Symbolik übertragenen Informationen zu übermitteln. Deshalb sollte die Anzahl der verschiedenen Elemente eines Icons möglichst klein gehalten werden. Das haben einige Designer bei Microsoft wohl noch nicht gehört und das neue Icon-Format von Vista ausgereizt, um überladene Grafiken zu erstellen. Es scheint, man wollte mit den Icons gleich eine ganze Geschichte erzählen. Trotzdem werden die Funktionen, die sich hinter der Bildersammlung verbergen, nicht deutlich. Auch hier
rächt sich dieser Fehler besonders bei den kleineren Versionen der Icons.

Screenshot

3. Unnötige Elemente
Ein Icon sollte leicht zu lesen sein. Es kommt also auf eine eindeutige Symbolik an. Je weniger Elemente nötig sind, um die Funktion zu verbildlichen, desto besser. Es ist also von Vorteil, wenn das ganze Bild die Aussage trägt und nicht nur ein Teil davon. Ein gutes Beispiel für ein unnötiges Element zeigen diese Symbole einer Datenbank:

Screenshot

Kommen diese Icons nur innerhalb der Anwendung zum Einsatz, muss der Betrachter nicht fortlaufend daran erinnert werden, dass es sich um eine Datenbank handelt, weshalb das unnötige Element entfernt und der relevante Part größer angezeigt werden kann. Der Sinn geht dabei nicht verloren, ganz im Gegenteil wird sogar die Übersichtlichkeit erhöht.

Screenshot

Ein weiteres Beispiel eines entbehrlichen Elements, das jedes Icon von BeOS 5 „schmückt“. Da fragt man sich, ob das rote Häkchen als Ersatz für den roten Faden dieser Serie dienen soll oder der Grafiker fertig gestaltete Icons einfach abgehakt hat.

Screenshot

4. Kein durchgängiger Stil im Icon-Set
Um aus einzelnen Icons ein Icon-Set entstehen zu lassen, braucht man einen gemeinsamen Nenner, also einen Stil, der die Icons unter einem Dach vereinigt. Das kann ein einheitliches Farbschema, die gemeinsame Perspektive, die gleiche Grundform oder auch eine Kombination mehrerer dieser Eigenschaften sein. Trotzdem sollte man die Icons so gestalten, das man sie leicht unterscheiden kann, da sich bei zu großer Uniformität wieder die unzureichende Differenzierung negativ auswirkt.

Die Standard-Icons von Windows XP, die dem Nutzer vorgeschlagen werden, wenn er ein Symbol ändern möchte, haben keinen einheitlichen Stil. Eine Zusammengehörigkeit kann man nicht entdecken.

Screenshot

5. Unnötige Perspektiven und Schatten in kleinen Icons
Icons haben sich im Laufe der Zeit verändert und neue Techniken wie etwa Schattenwurf, semi-transparente Bereiche und natürlich weitaus mehr Farben sind dazu gekommen. Ein großer Trend sind auch 3D-Symbole. Dabei sind nicht alle Effekte immer sinnvoll, besonders wenn es sich um Icons der Größe 16 × 16 oder kleiner handelt. Ein Beispiel für „zuviel des Guten“ zeigt GNOME 2.2.0 (RedHat 9). Die perspektivische Darstellung der Symbole ist bei dieser Größe unnötig und sogar kontraproduktiv.

Screenshot

Die Standard-Icons in Windows XP sind mit einem zwei Pixel großen Schatten ausgestattet, doch in der Größe 16 × 16 ist der viel zu groß und die Icons wirken eher verschmutzt. Bei dem Adressbuch-Symbol wird das besonders deutlich. Es sieht eher nach einem Stück Papier mit Fleck aus, denn wie ein Adressbuch.

Screenshot

6. Umständliche Metaphern
Welche Funktionalität das Symbol verbildlichen soll, ist immer ein Kompromiss zwischen Erkennbarkeit und Originalität. Es sollte eigentlich selbstverständlich sein, dass der Betrachter es eher leicht haben sollte, das Icon zu begreifen, als sich über den Einfallsreichtum des Grafikers zu freuen. Da kann man ruhig auf eine schon existierende und bekannte Symbolik zurückgreifen, statt unbedingt auf eine neue Bildsprache zu bestehen.

Ein Beispiel für eine übermäßige Originalität ist das Papierkorb-Icon in OS / 2 Warp 4, das einen Reißwolf zum
Symbolisieren des Löschens einer Datei verwendet. Wenn man böse wäre, könnte man einen Drucker sehen, aus dem die Tentakel einer Krake hängen. Was hinter dem Icon steckt, ist nicht ganz so klar ersichtlich, wie bei einem Papierkorb, weshalb die Wahl des Grafikers leicht fallen sollte.

Screenshot

7. Kulturelle Merkmale bleiben unberücksichtigt
Von Land zu Land, von Kultur zu Kultur, kann sich die Aussage eines Bildes ändern. Und was in Europa als typisch angesehen wird, ist vielleicht in Asien gänzlich unbekannt. Für ein Mail-Programm wird nicht selten der Briefkasten als Symbol verwendet, doch die hier gesammelten Beispiele verschiedener Briefkästen zeigen deutlich, dass es kein typisches Exemplar gibt.

Screenshot

Die Antwort finden Sie in den Informationen zur Gestaltung von Icons für Mac OS X: „Setzen Sie auf eine universelle Bildsprache, die leicht verständlich ist. Vermeiden Sie das Hervorheben von sekundären Aspekten eines Elements“. Bei
dem Symbol für ein E-Mail-Programm ist eine Briefmarke universeller, als etwa der ländliche, amerikanische Briefkasten.

Screenshot

Dabei müssen es nicht gleich kulturelle Unterschiede sein, die zu lustigen Verwechslungen führen. Einmal sollte ich ein Icon für einen Datenfilter gestalten, was mit der Metapher eines Trichters symbolisiert wurde. Die Antwort des Kunden spricht für sich: „Ich verstehe leider nicht, warum Sie für einen Filter das Bild eines Martini-Glases verwenden“.

Screenshot

8. Interface-Elemente in Icons

Wenig ratsam ist auch das Einfügen von Interface-Elementen in Icons, wie etwa diese Radio-Buttons, die leider nicht auf die Auswahl des Nutzers reagieren. Dass dem Betrachter nicht eindeutig klar wird, was sich hinter diesem Symbol verbirgt, bringt uns zu Punkt 6 zurück.

Screenshot

Das Interface des OmniWeb-Browsers zeigt eine Reihe von Icons, doch die „Zurück“- und „Weiter“-Button ahmen das Interface des Fensters nach.

Screenshot

9. Text in Icons
Ein Schriftzug im Icon hört sich eigentlich nicht nach einem Fehler an, doch sollen Icons gerade Worte ersetzen und Information durch eine vereinfachte grafische Darstellung übertragen. Daneben steht zumeist unter dem Icon der Name einer Anwendung. Solche Icons sind nur schwer für lokale Sprachversionen umzusetzen und der Text ist in der kleineren Variante des Icons nicht mehr lesbar. Er wird zu einem „Pixelbrei“.

Screenshot

10. Vektoren und Pixel
Es mag der erste Gedanke sein, ein Icon in einem Vektorprogramm wie etwa Illustrator zu gestalten, da der Vorteil der Skalierbarkeit für sich spricht. In voller Größe sehen diese Vektorgrafiken auch gut aus, aber Icons sind Pixelgrafiken, weshalb es nach der Verkleinerung und Rasterung durch das Anti-Aliasing an den Rändern zu unschönen Ausfransungen oder Rahmen kommen kann. Eine Korrektur nach der Rasterung ist also empfehlenswert.

Screenshot

Dieser Beitrag ist eine freie Übersetzung des Artikels 10 Mistakes in Icon Design von Denis Kortunov, der uns freundlicherweise die Veröffentlichung erlaubt hat. Dankeschön, für die prima Beispiele und Erklärungen.

Dirk Metzmacher

Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

22 Kommentare

  1. Eine nette Auflistung, die man im Hinterkopf haben kann. Bei Punkt 2 und 5 würde ich aber auch teilweise widersprechen. Dass die kleinsten Varianten mit 16×16 Pixeln schlicht gehalten werden sollten, ist klar und sinnvoll.
    Aber gerade bei größeren Icons finde ich mehr Elemente und Details eine angenehme Abwechslung zu den Standard Icons die man sonst so sieht. Und auch die Vista Icons finde ich da in Ordnung, sie passen halt in den cleanen, glossy Style.

  2. Warum kann man diesen Beitrag nicht mehr komplett lesen ?

  3. Vielen Dank für den tollen Beitrag. Hier sieht man, wie viele Sachen beachtet werden müssen beim Icon-Design. Das hilft einen echt weiter.

  4. Einige haben den letzten Absatz leider übersehen, andere gleich korrigiert (Dankeschön dafür!). Natürlich haben wir den Autor gefragt, ob wir das a) übersetzen b) hier präsentieren und c) die gleichen Beispielgrafiken verwenden dürfen. Ist also alles geklärt^^

  5. oh sorry, weiß nicht wieso aber den quellenhinweis habe ich wirklich übersehen.

  6. Dann wendet euch doch besser an das Original:
    http://turbomilk.com/truestories/cookbook/criticism/10-mistakes-in-icon-design/
    Auch wenn drweb sich die „mühe“ gemacht hat ein paar absätze zu übersetzen, wäre doch zumindestein Quellenhinweis der Englishen Version angebracht gewesen… oder?
    Minuspunkt von mir für Drweb

  7. In amerikanischen Blogs läuft derzeit die Schwemme der „10-Tipps-für…“ Beiträgen. Ich habe allerdings nicht immer den Eindruck, daß diese wirklich hilfreich sind. Schon bei diesem Artikel läßt sich darüber streiten, was denn die Alternative zu dem ist, was kritisiert wird? Und ist es wirklich ein Problem, was hier geschildert wird – oder sind es nur subjektive Kriterien, die eine Rolle spielen? Icons in Vektor oder Pixelgrafik – also wirklich… Die größte Unschärfe kommt nicht durch die Art der Grafik sondern durch den schlechten Monitor in die Sache rein.

    Wenn man es genau betrachtt, führt alles, was hier kritisiert wird, zum trendy Web 2.0 Icon. Ob der Erfolg eines Icons tatsächlich in der Einheitlichkeit besteht, wage ich zu bezweifeln. Dazu ist das Design, auch das Interfacedesign, selbst die Usability – zu sehr Moden unterworfen. Alles gibt sich nur diesen typisch amerikanischen Anstrich der Wissenschaftlichkeit. Die Amis sind aber auch die ersten, die das alles gerne selber wieder über den Haufen werfen, wenn es anders kommt. Diese Freiheit im Denken haben sie auf unnachahmliche Weise.

    Also ich für meinen Teil kann behaupten, noch nie, nur auf Grund eines Icondesigns, eine falsche App gestartet zu haben. So eine Begründung habe ich wirklich noch nie gelesen.

  8. Ich glaube ich kann Dir da helfen: Im letzten Satz des Beitrags steht, dass es eine freie Übersetzung ist.
    Ansonsten sehe ich das Problem des icons noch etwas drastischer. Ich kenne kaum Applikationen in denen ein „Icondesign“ gut durchdacht und konsequent durchgesetzte wurde. Vielleicht sollte man mal überlegen so etwas zu erstellen.

  9. @seb
    Den letzten Absatz hast du gelesen?

  10. ich kann mir nicht helfen…

    ich möchte ja wirklich nichts unterstellen – aber ich bin kürzlich über eine englischsprachige webseite gestolpert, deren inhalt diesem hier _sehr_ ähnelte. die texte, die meinung(en) – selbst die grafiken sind identisch.

    das tut der qualität des beitrags keinen abbruch, ich hoffe allerdings dass sich das (dr.we)blog hier nicht zum raubkopierer macht ;)

  11. Fein, fein! Das sind doch wirklich sehr nützliche Tipps.

  12. Was es die Schatten und Perspektiven in Punkt 5 angeht widerspreche ich vollkommen. Das schaut nicht versaut aus und hat im Auge die Wirkung, dass der wenige Platz den die Icons zur Verfügung haben mehr wirkt. Durch Schatten und Perspektive wirkt das Icon nicht so hingeklebt und hässlich, wie der Autor das scheinbar will, sondern nimmt Raum ein und ermöglicht dem Auge das Icon auch als mehr wahrzunehmen, erhöht also die Erkennbarkeit. Man gewöhnt sich der schnell an diese Betrachtungsweise während der Rückschritt, also das fehlen dieser räumlichen Darstellung einem schon ziemlich zu Schaffen macht.

    Ich mag solche Möchtegern Leitfäden überhaupt nicht. Die halben Punkte sind nicht professionell erörtert sondern spiegeln die subjektive Wahrnehmung alter Leute wider, die sie automatisch als gängiges Maxim betrachten.

    Die einzigen Punkte denen ich zustimmen kann sind 1, 3 und 10.

  13. Zu den GNOME-Icons: RedHat 9 ist zwar „erst“ von 2003, dennoch halte ich es angesichts der extrem kurzen Produktzyklen im Linux-(& Co.-)Bereich nicht fair, das hier als Beispiel zu nehmen…

    Wobei natürlich auch heute nicht alles perfekt ist… Das nur mal so am Rande erwähnt.

    Da finde ich schon eher seltsam, dass Apple und Microsoft mit ihren millionen- oder milliardenschweren Entwicklungsbudgets keine vernünftigen Iconsets hinbekommen.

  14. Einfach Genial. Nach einem so schönen Ratgeber für Icondesign habe ich scho seit einiger Zeit gesucht. Und das es diesen nun dank euch auch in der deutschen Übersetzung zu haben gibt ist noch viel besser.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück