Icons

Insbesondere die Markenkommunikation ginge am Stock, gäbe es sie nicht: Icons. Sie wirken verlockend, illustrierend, erklärend, emotionalisierend, deeskalierend – je nach Wahrnehmungskontext und Handlungsszenario ließe sich die Liste der Wirkweisen beliebig verlängern, auch Politik und Satire sind dabei. Sicher ist dies auch ein Grund, warum Type Designer mit einem Faible fürs Gegenständliche immer wieder neue Piktogrammfamilien »gründen« oder in der allgemeinen Wahrnehmung gelernte Symbole in neuen Icon-Fonts zusammenfassen.

Oft zieren die »Neulinge« dann schon bald Leitsysteme und führen Individuen und Personengruppen durch anonyme, öffentliche oder zumindest unübersichtliche Räume, ordnen den Verkehr in ländlichen Gebieten und Ballungsräumen, verschönern Editorial Designs, Apps, Websites und verleihen ihnen – idealerweise – visuelle Brisanz.

mehr

Freefont Jam Icons

Als Outline oder gefüllt, als Font- oder SVG-Datei, für Print oder Web. Die 422 kostenlosen Icons von Michael Amprimo lassen kaum Wünsche offen. mehr

Ein Anti-Faschismus-Trump Symbol erobert das Web

Mike Mitchell hat ein Symbol entworfen, das nach Trumps Äußerungen zu der rechtsextremen Gewalt in Charlottesville die Social Media erobert. mehr

Noun Project, Icons For Change, Icons, Protest

Icons For Change

Mit Noun Project ein Statement setzen – das steckt hinter dem Charity-Projekt …

mehr

Web-Font-Icons erzeugen

Vektorbasierte Web-Font-Icons sind stufenlos skalierbar und immer gestochen scharf. Mobile-Screen-Designerin Annika Brinkmann zeigt, wie man sie produziert … mehr

Anzeige

So wenig Icons wie möglich – aber nicht weniger

Was es bei der Gestaltung von Icons zu beachten gibt, erläutert Informationsarchitekt Oliver Reichenstein im PAGE-Interview.

mehr

Christmas Icons, Icons, Christmas, Weihnachten

Die schönsten kostenlosen Christmas Icons und Piktogramme

Schon genug geshoppt für Weihnachten?

mehr

Icons, Piktogramme und Emojis prägen die moderne Welt

… äußerst wichtig also, sie sorgsam zu gestalten und gezielt einzusetzen. Wir zeigen zwei gelungene, aktuelle Beispiele.

mehr

Icons – Chancen und Grenzen im Corporate und UX Design

PAGE 12.2016: Ab sofort im Handel!

mehr

Anzeige

Icons für alle Fälle

Icons, Piktogramme und Emojis prägen die moderne Lebens- und Informationswelt. Ob für Corporate Design, Packaging oder als Illustration: Icons können echte Eyecatcher sein. Verstehen können sollte man sie trotzdem.

mehr

PAGE 12.2016 ist da!

Im aktuellen Heft erklären UX Designer, Brand Designer, Corporate Designer und Developer, welche gestalterischen und technischen Aspekte im Icon Design wirklich zählen und wie man sie umsetzt.  mehr

BILD / SCHRIFT / ZEICHEN

09.09.2016 - 23.10.2016

Villa Merkel, Esslingen

Die Ausstellung zeigt Kunst und Grafikdesign im Grenzbereich freier und angewandter Gestaltung.

mehr

Deliveroo erhält ein neues Logodesign, neue Website und Kurier-Outfit

Das illustrierte Känguru wird durch ein minimalistisches Logo ersetzt, das an das »Roo« anknüpfen soll …

mehr

Anzeige

PayPal USA: Ein Icon-System erzählt Geschichten übers Online-Bezahlen

Diese Illustrationen visualisieren die Marke PayPal und deren globale Nutzermöglichkeiten.

mehr

Nach 15 Jahren erhält Subway ein neues Logo

Schlicht, flat, zweifarbig. Das ist der frische Look von Subway, inklusive Brand-Icon …

mehr

Schreib mal Icons

Das Netzwerk iA entwickelte die Schrift »Roger That«, mit der sich Wörter in Icons verwandeln lassen. mehr

Instagram Logo, Logo Design, Logo, Instagram

Instagram Logo – neues Icon und App Design im Experten-Check

Austauschbar, modern, generisch, harmonisch oder einfach erwachsen: Was sagt die Community? PAGE hat nachgefragt …

mehr

Anzeige

Oslo City Bike: Diese Brand Identity hat einen ganz eigenen Charakter

Was haben ein Fahrrad und ein Gesicht gemeinsam? Ein illustriertes Brand Icon mit verschiedenen Emotionen …

mehr

Icons für die Kommunikation mit Flüchtlingen

Mit Hilfe von Crowdfunding soll es bald eine auf die Bedürfnisse von Flüchtlingen und ihren Helfern zugeschnittene Version des »ICOON global picture dictionary« geben.

mehr

Als Bestandteil von Firmenlogos dienen Icons als Bildmarken und in vielen Fällen die Wortmarke. Manche Unternehmen können, so es ihnen gelingt, gänzlich zur Marke zu avancieren, auf den Namenszug verzichten – Beispiel Mercedes-Stern –, das gegenständliche Firmenlogo ist zur Ikone geworden, auch wenn die Gründe für derlei Transformationen zum Glück woanders liegen – etwa in der Qualität eines Produkts oder Services.

Immer jedenfalls ist es interessant und erfreulich, wenn eine neue Icon Family im Werden ist und vielleicht sogar neue Maßstäbe setzt. Wir berichten darüber und zeigen die Ergebnisse.



New Iconomy

Icons, Piktogramme und Emojis prägen die moderne Lebens- und Informationswelt – äußerst wichtig also, sie sorgsam zu gestalten und gezielt einzusetzen


Erstveröffentlichung dieses Beitrags: PAGE 12.2016 | Autorinnen: Angelika Eckert & Antje Dohmann


INHALT

1 Eindeutig sollen sie sein: Was zeichnet gute Icons aus? Und wie sollte man sie einsetzen?
2 A/B-Testings zeigen: Nicht immer schneiden Icons besser ab als Geschriebenes
3 Für User Interfaces gilt: Bitte 9 mal 9 Millimeter!
4 Leitsysteme und Informationssysteme: Was brauchen User im virtuellen und konkreten Raum?
5 Arbeiten mit ISO-Normen: Ausbrechen aus gelernten symbolischen Standards?
6 Corporate Design: Harmonie stiften mit der Hausschrift
7 So viele Icons: Wie schafft man Differenzierung in der Flut der Piktogramme und Icon-Familien?

Icons sind so beliebt wie nie. In allen erdenklichen Farben, Formen und Formaten erscheinen sie auf Produkten, Services, Apps, User Interfaces, natürlich in Leitsystemen und Erscheinungsbildern. Ihre Aufgabe: ohne Worte, schnell und eindeutig einen Sachverhalt oder eine Funktionsweise vermitteln. Doch gelingt ihnen das überhaupt? Längst stehen sie in der Kritik, nicht nur, was ihre überwältigende Menge, sondern auch, was ihre Funktion, zum Beispiel im UX Design, angeht. Dem Usability-Experten Donald Arthur Norman, ehemals Vizepräsident der Advanced Technology Group bei Apple, sind die vielen Piktogramme ein Graus, wie Norman in einem Beitrag auf seiner Website schreibt: »Nicht unterscheidbare Icons verschmutzen die Oberfläche der Geräte. Dabei hat die Forschung doch klar gezeigt, dass wir uns ohnehin nur die Bedeutung einiger weniger Icons merken können.«

Zeichen fürs Frauen- und Männer-WC – von buero bauer mal ganz anders und trotzdem eindeutig gestaltet

 

Als Anfang der 1980er Jahre die Bildschirme der neuen Personal Computer ebenso klein waren wie heute die Displays mobiler Geräte, griff Apple als erstes Unternehmen auf UI-Icons zurück. Man denke nur an das freundliche Gesicht, das einem entgegenlächelte, wenn man den Mac hochfuhr. Damit bekam der bis dato textlastige PC plötzlich einen menschlichen, emotionalen Touch. Susan Kare, die das Screendesign – samt Icons – für den ersten Mac entwickelte, ist auch heute noch der Ansicht, dass gute Piktogramme eher Verkehrszeichen als Illustrationen gleichen sollten: leicht verständlich und ohne überflüssige Details. Piktogramme würden nicht automatisch besser, nur weil heute Millionen von Farben zur Verfügung stünden. Außerdem: »Wenn Symbole (Icons oder Logos) sinnvoll und gut gestaltet sind, muss man sie auch nicht so häufig überarbeiten«, stellt Susan Kare auf ihrer Website fest. Doch was macht solch ein »sinnvoll und gut gestaltetes« Icon eigentlich aus?

1. Eindeutig sollen sie sein: Was zeichnet gute Icons aus? Und wie sollte man sie einsetzen?

An Klarheit nicht zu überbieten sind die Icons der Grafik­designerin Susan Kare fürs erste Mac-User-Interface. Die Bombe signalisierte den Absturz des Betriebssystems

Ein gutes Bildzeichen gibt Orientierung und muss deshalb vor allem eines sein: eindeutig. »Ein Icon hilft, Informationen und Funktionen schnell zu erfassen und wiederzuerkennen«, erklärt Burkhard Müller, Executive Creative Director bei deepblue networks in Hamburg. Doch leider sind bildliche Botschaften häufig missverständlich, da mehrdeutig, wie Oliver Reichenstein, Gründer des Agenturnetzwerks iA, betont (siehe Interview). »Auch die überbordende Kreativität ihrer Schöpfer sorgt manchmal für mehr Konfusion als Klarheit.« Einschränken kann man die Mehrdeutigkeit von Bildzeichen durch Konsistenz, indem man jedem Symbol auf der Website oder App streng nur eine Bedeutung zuweist.

Die Regel »Viel bringt viel« gilt nicht für Icons, warnt Burkhard Müller. »Sinnvoll sind Symbole für die wichtigsten Bedienelemente.« Bei einer App sind das in der Regel bis zu fünf Menüpunkte und eine Handvoll Befehle, etwa für »Zurück«, »Schließen«, »Senden« oder »Hinzufügen«. »Das sind Funktionen, die man häufig aufruft, die schnell gefunden werden sollen und die der User sich merken kann«, erklärt Müller. »Versieht man jede Funktion und Unterseite mit einem Icon, wird dieses schnell zu reiner Dekoration, die genau das Gegenteil bewirkt: Das UI wird unübersichtlich und überfrachtet«, so Müller.
Top

2. A/B-Testings zeigen: Nicht immer schneiden Icons besser ab als Geschriebenes

Bereits eingeführte, simple Symbole sind sehr viel effektiver als außergewöhnliche, künstlerische Zeichen, deren Bedeutung oft Interpretationsspielraum lässt. »Deshalb sollten sich eigene Icon-Sets unbedingt an denen des Systems orientieren, die dem User hinlänglich bekannt sind«, rät Lasse Lüders, Geschäftsführer Kreation bei der Agentur für digitale Produkte appmotion in Hamburg. »Ein Haus als ›Home‹ versteht jeder, genauso wie eine Lupe für ›Suchen‹«, sagt Burkhard Müller. Das Zahnradsymbol identifizieren die meisten inzwischen als »Einstellungen« und das Hamburger-Symbol als »Menü«.

Aber selbst hier gibt es Einschränkungen: »Das A/B-Testing hat gezeigt, dass ein Button mit dem Textlabel ›Menü‹ deutlich schneller verstanden und häufiger bedient wird als das Burger-Icon«, so Lasse Lüders. Für eine verbesserte Usability sollten Icons möglichst immer mit textlicher Beschriftung verbunden sein. Textlabels helfen Usern, Symbole schnell und richtig zu interpretieren sowie zwischen informativen und interaktiven Icons zu unterscheiden. Fehlt der Platz, sollten die Labels wenigstens bei Mouse-over erscheinen, empfiehlt Lasse Lüners.
Top

3. Für User Interfaces gilt: Bitte 9 mal 9 Millimeter!

Auch die Größe hat Einfluss darauf, ob ein Icon seinen Zweck erfüllt. Zu kleine Symbole geben vor allem Personen mit Sehbehinderungen Rätsel auf. Auch Nutzer mit eingeschränkter Feinmotorik, wie etwa ältere Menschen, haben Schwierigkeiten, zu kleine Icons mit der Maus oder dem Finger zu aktivieren. Für Apps sollten Icons daher mindestens 
9 mal 9 Millimeter groß sein. Ein weiteres Puzzleteilchen auf dem Weg zu einem guten Icon ist konsequentes Testing. Nur so lässt sich sicherstellen, dass der User die Symbole genauso klar und sinnvoll findet wie das Designteam.
Top

Das First Aid Kit, das buero bauer für Flüchtlingsnotunterkünfte entwickelt hat, bietet in der zweiten Version auch medizinische Piktogramme für häufige Beschwerden

 

4. Leitsysteme und Informationssysteme: Was brauchen User im virtuellen und konkreten Raum?

In Orientierungssystemen spielen Piktogramme von jeher eine tragende Rolle, daran hat auch die Digitalisierung nichts geändert, im Gegenteil. »Leider denken immer noch viele Menschen in Schubladen und bei einem Leitsystem nur an Schilder«, meint Erwin K. Bauer, Gründer von buero bauer in Wien. »Aber Orientierung bedeutet Information, und die findet gleichzeitig in verschiedenen Medien statt.« So gibt es etwa in einem Stadtleitsystem einen gedruckten Plan, eine Website, eine App und Infosäulen – die Datenquelle ist dabei aber stets dieselbe, zum Beispiel OpenStreetMap. Wichtigstes Kriterium für Icons in solchen Kontexten ist ihre Funktionalität. »User-Centered Design« laute das Stichwort, nicht etwa »Design-Centered Design«, so Bauer. »Viele Gestalter denken, wenn sie nach ihrem Geschmack entwerfen und das Ergebnis gut aussieht, wird es auch funktionieren – ein Irrtum.«

»Viele Gestalter denken, wenn sie nach ihrem Geschmack entwerfen und das Ergebnis gut aussieht, wird es auch funktionieren – ein Irrtum«

Erwin K. Bauer, Inhaber des buero bauer in Wien 

Will man den in Leitsystemen verwendeten Icons einen eigenen Charakter und Wiedererkennbarkeit verleihen, lässt sich an einigen kleinen Schrauben drehen. »Man kann die Linienstärke beeinflussen oder die Enden der Linien rund oder eckig anlegen. Ein Icon lässt sich farbig oder schwarzweiß gestalten, flächig oder linear. Man kann es freistellen oder auf eine Fläche setzen. Das war es dann aber auch schon fast«, erklärt Erwin K. Bauer. Letztlich geht es darum – ähnlich wie im Typedesign –, in minimalen Abstufungen die Details anzupassen. Usertests zeigen auch hier, ob die Icons dechiffrierbar oder nur künstlerisch interessant sind. UX und UI Design mit ihren ständigen Evaluierungen sind ein gutes Vorbild für die Entwicklung von Informationssystemen.

Beim gerade als »Design of the Year« nominierten First Aid Kit, dem Icon-basierten Informationssystem speziell für Geflüchtete in Erstunterkünften, arbeitete buero bauer entsprechend mit Fragebögen. Zunächst legten die Wiener Designer gemeinsam mit verschiedenen Hilfsorganisationen fest, welche Zeichen es braucht, dann erarbeiteten sie einen ersten, skizzenhaften Entwurf und gingen damit zu den Dolmetschern, die die Menschen direkt fragten, ob sie die Piktogramme verstehen und was ihnen noch fehlt. Durch das Feedback entwickelt sich das Icon-Set ständig weiter und hat in einer zweiten Version medizinische Symbole für häufige Krankheitsbeschwerden bekommen.
Top

Auch genormte Piktogramme lassen sich modernisieren. Der von buero bauer aus Wien gezeichnete Rollstuhlfahrer im Orientierungssystem für den Campus der Wirtschaftsuniversität Wien liegt jetzt als Best-Practice-Beispiel im Normungsausschuss

5. Arbeiten mit ISO-Normen: Ausbrechen aus gelernten symbolischen Standards?

Bei Bauprojekten sind die Auftraggeber in der Regel konservativer und gehen gern auf Nummer sicher. »Icons sind ja in einer ISO-Norm festgeschrieben, wurden aber überwiegend von Nichtdesignern entworfen«, erklärt Erwin K. Bauer (siehe etwa www.iso7010.de). »Trotzdem wollen Kunden oft genau diese Zeichen haben und sperren sich sogar gegen eine vorsichtige Ästhetisierung.« Anders beim Orientierungssystem für den Campus der Wirtschaftsuniversität Wien. Hier gestaltete buero bauer ein Icon für Rollstuhlfahrer, das etwas von den ISO-Vorgaben abweicht. »Wir haben das mit den Zielgruppen abgestimmt, auf Akzeptanz untersucht und getestet«, berichtet Bauer. Mit dem Ergebnis, dass das Zeichen jetzt als Best-Practice-Beispiel im Normungsausschuss des DIN e. V. liegt.

Krasses Gegenbeispiel zu standardisierten Piktogrammen sind die Mann- und Frau-Icons, die buero bauer für das Wiener Architekturbüro Alexander Diem kreierte. Die Toiletten liegen zentral im Büro, und der Inhaber wollte nicht, dass die Türen nach WC aussehen. Eine weitere Anforderung lautete: Möglichst jeder, der die Waschräume benutzt, sollte anschließend mit dem Architekten über die Icons sprechen. »Unsere beiden Piktogramme funktionieren anders, aber einwandfrei, es ist noch niemand ins falsche Klo gerannt«, schmunzelt Erwin K. Bauer. Je nach Kontext kann man also durchaus einmal mit Standards brechen.
Top

6. Corporate Design: Harmonie stiften mit der Hausschrift

Mehr Freiheit für das Icon gibt es im Corporate Design, da kann es auch einfach mal nur nett aussehen. »Es gibt zunehmend Erscheinungsbilder, die ein Icon einem Keyvisual vorziehen. Weil Piktogramme Zeitgeist sind und eine Lebens- und Informationswelt zitieren, in der wir uns täglich bewegen, wie zum Beispiel iOS 10«, sagt Sebastian Kirmse, Kreativdirektor bei wirDesign in Berlin. »In diesem Fall ist das Icon ein ästhetisches Keyvisual ohne Informationswert.«

»Die Regel ›Viel bringt viel‹ gilt nicht für Icons – im Gegenteil: Sinnvoll sind sie nur für die Funktionen, die der User ständig aufruft und sich merken kann«

Burkhard Müller, Executive Creative Director bei deepblue networks in Hamburg

Sobald Marken ihr Geschäft in den digitalen Raum verlagern, mit Apps, Shops oder dem Internet of Things, brauchen sie Piktogramme jedoch als Informationsvermittler. Mit typografischen Umsetzungen allein kommt man hier nicht allzu weit. Gleiches gilt, wenn es, wie bei Atotech – einem international tätigen Chemieunternehmen, das Leiterplatten und andere Oberflächen beschichtet –, um komplexe Zusammenhänge geht. Diese sollten medienübergreifend auf kleinstem Raum kommuniziert werden. WirDesign schuf dafür ein Piktogrammsystem, das die Spezialanwendungen visualisiert – aber auch zum Erscheinungsbild passt.

»Natürlich kann ein Icon mit seinen geringen Dimensionen und seinem Minimalismus nicht hundertprozentig markenspezifisch sein. Aber man kann Corporate-Design-Elemente zitieren. Winkel, Strichstärken oder Rundungen zum Beispiel, sodass der Gesamteindruck auch mit der Hausschrift harmoniert«, erklärt Sebastian Kirmse. Von einfacheren Zeichen wie männlich oder weiblich leitete das Team formale Kriterien ab und übertrug sie anschließend auf komplexere Darstellungen, zum Beispiel den Prozess des Galvanisierens. An einigen Bildzeichen arbeiteten die Kreativen zwei, drei Wochen, wobei sie zwischendurch immer wieder Tests durchführten, ob die Atotech-Mitarbeiter sie auch wirklich verstehen.
Top

7. So viele Icons: Wie schafft man Differenzierung in der Flut der Piktogramme und Icon-Familien?

Eigentlich ist bereits alles da – sich da überhaupt noch abzuheben ist eine echte Herausforderung. »Geben Sie auf Pinterest mal ›Icons‹ ein, unglaublich, was sich da in den letzten Jahren angesammelt hat«, sagt Olaf Stein, Partner bei Factor in Hamburg. »Dabei sind die meisten Piktogramme linear, was mit ihrer Orientierung am UX Design zu tun hat. Dadurch findet eine gewisse Gleichschaltung statt. Man muss als Marke also schon schauen, wie man Eigenständigkeit 
hinbekommt.«

Eine Möglichkeit der Differenzierung ist eine eigene Farbwelt, wie bei der Weiterentwicklung des Brandings für RE/MAX Europe, ein europaweites Netzwerk von rund 15 000 Immobilienmaklern. Factor legte die Icons flächig an, im amerikanisch blau-weiß-roten Dreiklang, wie er auch in dem RE/MAX-Logo, dem Heißluftballon, vorkommt. Gerne hätten die Kreativen dem Ballon eine ästhetische Auffrischung verordnet, aus markenrechtlichen Gründen war das aber nicht möglich. Zu den reduzierten Piktogrammen gesellen sich Illustrationen in derselben Farbwelt, die die Markenwerte visualisieren. So erkennt man RE/MAX immer öfter auch ohne den Ballon. »Aufgrund des Franchise-Prinzips sind die Designvorgaben nicht bindend, wir machen einfach attraktive Angebote, die die Makler aber gern annehmen«, so Olaf Stein.

Rechte Winkel und klare Rundungen kennzeichnen die Icons, die wirDesign für das Technologie-Start-up Axoom entwarf

 

Bei allem Einsatz, ein Unternehmen, eine Marke oder Dienstleistung durch individuell gestaltete Icons unverwechselbar zu machen und emotional aufzuladen, sollten Designer stets im Kopf behalten, dass Piktogramme gut erkennbar und klar verständlich sein sollten. Andernfalls mutieren sie tatsächlich schnell zu visuellem Lärm.
top


Lesen Sie auch das PAGE-Interview mit dem Informationsarchitekten Oliver Reichenstein.


Wie man vektorbasierte Web-Font-Icons produziert, erläutert Mobile-Screen-Designerin Annika Brinkmann hier und im PAGE eDossier »Mehrfarbige Webfont Icons erstellen«.


Unser PAGE eDossier »Icons & Piktogramme – Typen, Trends, Technik« finden Sie hier.