Andreas Eichelberg
Geschrieben von Andreas Eichelberg am 27 June 2018

Icons sind ein Teil unserer Kultur seit jeher. Tatsächlich sind sie gewissermaßen älter als die geschriebene Sprache: Wenn wir verschiedenste Piktogramme der europäischen Höhlenmalerei hinzuzählen, kommen wir auf ein Alter von 30.000 Jahren (ungefähr).

Wenn wir so durch die Zeit gehen; Keilschrift, Hieroglyphen, Totempfähle, Verkehrsschilder, …  

Eines ist ganz klar: Menschen mögen Bilder und Bilder machen es möglich auf kleinstem Raum auf eine Weise zu kommunizieren wo sonst viele Wörter von Nöten wären (ein paar tausend, um ein gewisses Klischee zu bedienen).

Auch heute können wir die eindrucksvolle Stärke von Icons im täglichen Leben einfach sehen. Schau einfach mal auf dein Smartphone: Du siehst eine Menge Icons. Auch wenn manche nicht sofort offensichtlich erscheinen, im Laufe der Zeit lernen wir jedes dieser Icons mit der App dahinter zu verknüpfen. Die Alternative? Eine Liste oder Netz von Wörtern - wäre aber einfach nicht so effektiv.

Zeitgleich jedoch werden Icons oft falsch oder auf eine Weise benutzt, dass sie den Benutzer eher verwirren anstatt zu helfen. Das kann insbesondere der Fall im Web sein.

In diesem kurzen Beitrag möchte ich ein paar Kernfrage rund um Icons aufgreifen (und diese beantworten). Fragen, welche du selbst stellen würdest.

Fangen wir mit der wohl offensichtlichsten (aber am wenigsten gefragten) Frage an:

Brauchst du Icons?

Wie bei so vielen Dingen die irgendwie alle tun, vergessen wir manchmal einen Schritt zurück zu gehen und sicherzustellen, dass in der Situation, in der wir uns gerade befinden, Icons überhaupt von Nöten sind.

Die beste Möglichkeit diese Frage zu beantworten, ist sich zu überlegen WOFÜR Icons überhaupt da sind und folglich herauszufinden ob das in diesem speziellen Falle zuträglich ist.

Die folgende Liste ist nicht vollständig, aber sie hilft Licht ins Dunkle zu bringen:

Icons agieren super als Zielobjekte und insbesondere super als “Touch Zielobjekte” auf Bildschirmen von mobilen Geräten.  In anderen Worten: Sie richten die Aufmerksamkeit des Benutzers aus und implizieren “Action”. In dem Screenshot unterhalb dieser List sieht man eine Heat-Map Analyse von eimem unserer Kunden, Swrve. Sie demonstriert eindrucksvoll wie die Icons den Text-Titeln die Show stehlen - Menschen mögen Bilder!

Icons entfachen entweder sofort einen Wiedererkennungswert - oder entfachen diesen über die Zeit hinweg. In manchen Fällen (wir werden darauf später mehr ins Detail gehen) spart diese visuelle Abkürzung durch Icons Zeit und Denkaufwand für den Nutzer.

Icons können ein familiäres Konzept unterstützen. Wenn du zum Beispiel eine Reihe von Produkten hast aber deren Zusammenhang vermitteln willst (Denk zum Beispiel an die Microsoft Office Produkte) sind Icons eine super Möglichkeit dies zu übermitteln. Hier lohnt es sich in Icons zu investieren.

Icons sind international. Natürlich wirst du in den meisten Fällen Icons zusammen mit Wörtern benutzten. Die Icons selbst jedoch können in jedem UI jeder Sprache benutzt werden ohne Veränderung.

Letztendlich können Icons auch einfach aus ästhetischen Gründen genutzt werden. Sie schauen gut aus, oder sie sehen zumindest besser aus als alleinstehende Wörter. (Solange sie in guter Qualität vorliegen).

Wenn mindestens zwei dieser Punkte auf deine eigene Seite oder Produkt zutreffen, solltest du vielleicht darüber nachdenken in Icons zu investieren und diese innerhalb deiner Seite/ deines Produktes / deiner Startseite zu nutzen - und natürlich innerhalb anderer relevanten Medien.

Solltest du Icons wiederverwenden oder eigene kreieren?

Anfangs ist es immer der beste Weg Icons eines gut etablierten Konzepts  wieder zu verwenden. Nutzer sind mittlerweile an bestimmte Konventionen gewöhnt und es bringt in den seltestens Fälle einen Vorteil das Rad hier neu zu erfinden. Das “Hamburger” Menu-Icon ist ein gutes Beispiel. Noch extremer ist das On/Off (An/Aus) Icon das wohl weltweit einheitlich verstanden wird.

Auch wenn man über Icons nachdenkt, welche mehr abstrakte Konzepte oder Features widerspiegeln sollen, lohnt es sich dennoch nachzusehen, was es bereits gibt, anstatt ganz von vorne anzufangen. Es kann ein ganzes Stück Zeit einsparen aber wie bereits erwähnt: “Ist der Nutzer schon mit etwas familiär?” ist die Schlüsselfrage hier. Es ist essentiell sich immer im Kopf zu behalten, dass Icons immer an Wiedererkennung/Merkbarkeit gescheitert oder populär geworden sind. Jeder Kaltstart in diesem Bereich sollte davon profitieren. Bei Kooba würden wir immer einen Blick auf Font Awesome, Material Design und The Noun Project neben anderen werfen, und sei es nur für die Inspiration. Vergiss niemals, dass Icons auf diesen Seiten ganz nach deinen Wünschen editiert werden können, bis sie genau deinen Anforderungen entsprechen.

Manchmal jedoch wird man seine Icons von Grund auf selbst produzieren wollen. Der Smartphone Bildschirm ist hier wieder ein treffliches Beispiel. Es ist nicht wirklich möglich oder wünschenswert dein ganzes Business / dein Service auf ein einziges Icon zu reduzieren. Du musst nur den Kunden mit der Zeit erlauben sich an deine Wahl zu gewöhnen. Das gleiche gilt für Icons die für bestimmte Elemente einer Produktreihe stehen. Hier wirst du mutmaßlich Pionierarbeit leisten wollen.

Was uns zu der nächsten Frage bringt:

Welche Art von Icon sollte ich produzieren?

Bevor wir diese Frage beantworten, ein kleiner Rat: In fast allen Fällen ist es ratsam Icons zusammen mit Text zu nutzen. Das wirkt zunächst unintuitiv. Sind Icons nicht dazu da Platz einzusparen und eine visuelle Abkürzung zu gehen? Gut, ja und nein. In den meisten Fälle sind Icons jedoch zu verwirrend um ganz alleine zu funktionieren. Wenn du dir also nicht sicher sein kannst, dass dein Icon 100% selbstbeschreibend ist (und das ist einfach herauszufinden; frag einfach mal deine Zielgruppe) dann bleib dabei: Entwirf das Icon zur Nutzung neben Text.

Nichtsdestotrotz ist dies natürlich eine Frage von Ausdruck und Mode. Um auf zweiteres zuerst einzugehen: Dies ist einfach was die Leute erwarten und Konventionen diktieren die Regeln der Ausführung. Wir haben in den letzten Jahren Icons gesehen welche von beinah fotorealistischem Antlitz sich hin zu einfachen, flachen, eleganten Design entwickelten. Aber vielleicht gehen sie den weg auch wieder zurück….

Die Bedeutung des Icons an sich ist da interessanter. Wir reden hier von der Wahl der Ausrichtung eines Icons (oder mehrere zusammenhängender Icons). Es gibt mehrere Wege um dies zu erreichen, wovon die drei geläufigsten wahrscheinlich folgende sind:

Icons können eine direkten oder zumindest indirekte Ähnlichkeit zu den Dingen haben die sie repräsentieren. Ein gutes Beispiel ist das Kamera Icon wie wir es auf modernen Smartphones finden, welches - nun gut - ein Bild von einer Kamera ist.

Icons können Analogien nutzen oder auf das Endresultat einer Aktion oder auf assoziierte Eigenschaften eines bestimmten Features verweisen. In diese Kategorie fallen (es ist schwerer sich hier festzunageln) Icons wie das Launchpad-Icon der MacOS Familie oder die Sonne als Icon, was gerne für Wetter Applikationen genutzt wird.  

Letztendlich können Icons auch komplett willkürlich sein, oder zumindest dem Nutzer zunächst total willkürlich vorkommen. Hier würde ich das Zahnrad-Icon (Systemeinstellungen) hinzuzählen oder auch das klassische On/Off (Ein/Aus) Icon. Diese Art von Icon können beinahe alles sein. Sicher würde jemand völlig neues auf unserem Planten Schwierigkeiten dabei haben, diese Icons zu dekodieren - Langzeitnutzer und Konsorten empfinden sie als sofort verständlich.

Idealerweise, für jede Familie von Produkten oder Features, gehören deine Icons eher nur zu einer dieser Kategorien anstatt diese anzupassen und zu vermischen. Es hilft dem Benutzer nicht wenn man ein Icon für ein bestimmtes Produkt oder Feature wählt und dieses Icon völlig abstrakt alleine dasteht - insbesondere wenn es sich eigentlich in einer Familie mit anderen Icons befindet.



Die beiden erstgenannten Kategorien benötigen Wahrscheinlich keine weitere Erklärung - und die meisten Icons die man auf den o.g. Seiten finden kann, fallen eben in diese Kategorien. Auch wenn die letzte Kategorie sich eher wie der weniger vielversprechende Ansatz anfühlt - Es kann sich bezahlt machen original Icons für eine Produktreihe zu entwerfen. Genutzt nebst Wörtern oder passenden Namen (sie müssen die Bürde der Wiedererkennung nicht alleine tragen), können sie ganz auf Wiedererkennung und Widerruf konzentriert designed werden.

In mancherlei Hinsicht ist dieser Ansatz gar nicht so weit weg von dem Konzept der Farb-Kodierung und kann auf gleiche Art und Weise verstanden werden. Es gibt letztendlich keinen genauen Grund warum Powerpoint rot und Excel grün ist. Aber im Laufe der Zeit haben sich diese Zusammenhänge verfestigt und erweisen sich als visuelle Abkürzung wenn wir über ebendiese reden. Als Beispiel dafür: Wir mögen die Zendesk Suite. Es wäre sehr optimistisch zu behaupten, dass die Icons für “Support”, “Chat” und so weiter alleine funktionieren würden, aber zusammen mit dem Text tun sie das super. Sie sind unvergesslich, spaßig und konsistent. Bei Icon Design kann sich Originalität auszahlen.

Andreas Eichelberg

Author: Andi ist Ansprechpartner in unserem Berlin-Studio. Neben Front-End-Development steht er unseren Kunden mit Rat und Tat zur Seite. Er liebt sauberen Quellcode, vorzugsweise CSS/SASS.