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

Icons für Wayfinding Sans

Zu Ralf Hermanns Schrift Wayfinding Sans gestaltete Andreas Wohlleben jetzt 400 Symbole.

mehr

Icon-Design

Juhu, Mutabor hat nochmal einen Band mit ihren beliebten Icons herausgebracht!

mehr

Evolution mit dem Atelier Brückner

Am 8. September eröffnet im Rostocker Zoo das spektakuläre »Darwineum«. Wir waren bereits da und haben einen Blick hinter die Kulissen geworfen!

mehr

Agenturporträt: H-57 Creative Station

PAGE gefällt …: H-57, multidisziplinäre Agentur aus Mailand, deren charmante Entwürfe oft augenzwinkernd sind und manchmal mit Blick zurück auf die 50er.

mehr

Anzeige

Generation Revolution – Erster Teil

In der PAGE 10.2011 stellen wir die Arbeiten der Grafikdesign-Studenten der German University Cairo vor – hier zeigen wir weitere Beispiele.

mehr

Logos und Icons für die multimediale Markenkommunikation

Ab sofort im Handel: PAGE 12.2010

mehr

Legendäre Piktogramme: Neue Otl Aicher Website von Erco und Klickmeister

Nach Otl Aichers Tod 1991 hat Erco, Spezialist für lichttechnische Soft- und Hardware, die Lizenzierung und den weltweiten Vertrieb des legendären Piktogrammsystems übernommen. Jetzt wurde dafür eine neue Website entworfen – und eine Broschüre in limitierter Auflage herausgebracht.

mehr

Jede Menge Icons

Ein Set mit rund 250 Symbolen und Zeichen stellt Paul Armstrong auf seiner Website zum kostenlosen Download bereit. Die Icons haben ein Format von jeweils 18 x 18 Pixeln und sind durchweg in Grautönen gehalten. Die bwpx.icns stehen unter der

mehr

Anzeige

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.