{"id":2749,"date":"2012-04-27T16:40:11","date_gmt":"2012-04-27T14:40:11","guid":{"rendered":"http:\/\/www.centigrade.de\/blog\/en\/?p=2749"},"modified":"2020-02-17T10:24:28","modified_gmt":"2020-02-17T09:24:28","slug":"piktogrammeder-neue-letzte-schrei-im-icon-design","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/piktogrammeder-neue-letzte-schrei-im-icon-design\/","title":{"rendered":"Piktogramme – der neue letzte Schrei im Icon Design"},"content":{"rendered":"

Seit Microsoft anhand des Windows Phone und Windows 8 seine neue Herangehensweise an moderne Betriebssysteme vorgestellt hat, beginnen sowohl User Interface Designer als auch ihre Kunden \u201eim Metro Style zu denken\u201c. Dieser entlang der Grundlagen des Schweizer Stils im Grafikdesign<\/a> konzipierte Stil verwendet eine minimalistische Darstellung von Inhalten mit dem Fokus auf serifenlose und klare Typografie. Verbunden damit sind nicht nur Interaktion, Navigation und Informationsarchitektur \u00fcberarbeitet worden, auch die Sichtweise auf Icons hat sich gewandelt \u2013 und damit ebenfalls der Design Prozess f\u00fcr Icons.<\/p>\n

Das von der Idee einer schnellen Orientierung inspirierte Konzept der Metro Style Icons verwendet Darstellungen, wie sie in Metropolen, an Flugh\u00e4fen und Bahnh\u00f6fen zur Orientierung und Ausschilderung verwendet werden – einer unserer fr\u00fcheren Blog Artikel<\/a> griff unter anderem dieses Thema auf. Bei den in ihrer Form einfach gehaltenen Zeichen wird nicht nur auf den Gebrauch von Mehrfarbigkeit verzichtet, auch Details werden so weit als m\u00f6glich reduziert. Dies soll in erster Linie die schnelle und interkulturelle Verst\u00e4ndlichkeit f\u00f6rdern, unabh\u00e4ngig von Text oder Sprache. Internationale Verst\u00e4ndlichkeit ist allerdings bei weitem keine neue Anforderung \u2013 genauso wenig wie die visuelle Verpackung, in der die Metro Icons daher kommen. Analog zu Stra\u00dfenschildern entworfen sind Metro Icons tats\u00e4chlich Piktogramme, die nach M\u00f6glichkeit immer die generischste und in entsprechender Situation salienteste Darstellung verwenden – die ihrerseits beim Nutzer auf das jeweilige mentale Modell passen. Vorangetrieben durch die st\u00e4ndig zunehmende Globalisierung wurden in vielen Arbeits- und Freizeitbereichen Piktogramme bzw. Gruppen von zusammengeh\u00f6renden Piktogrammen standardisiert. Zum einen soll so ihr Wiedererkennungswert gesteigert werden, zum anderen hat man aber auch erkannt, dass beim Design eines Piktogramms eine Menge schief gehen kann.<\/p>\n

Um die Bedeutung von Piktogrammen zu verstehen, muss man sich zun\u00e4chst mit den Charakteristiken piktographischer und symbolischer Sprache besch\u00e4ftigen. Diese ist abzugrenzen von gew\u00f6hnlicher Interface Iconsprache, ihrer Metaphern sowie ihrem konkreten Erscheinungsbild. Auf dieser Grundlage lassen sich f\u00fcnf Kriterien ableiten, die bei dem Design von intuitiven, verst\u00e4ndlichen und \u00e4sthetischen Piktogrammen ber\u00fccksichtigt werden sollten.<\/p>\n

<\/p>\n

Piktogramme und ihr Design verstehen<\/h3>\n

Symbole, Icons und UI Icons<\/h4>\n

Zun\u00e4chst muss ein Blick auf die Terminologie geworfen werden. W\u00e4hrend heutzutage im UI Design das Wort \u201eIcon\u201c in einem ganz anderen Kontext verwendet wird, unterscheiden Sprachwissenschaftler in der Semiotik – der Zeichenlehre – zwischen \u201eIkon\u201c und \u201eSymbol\u201c. Je nachdem auf welche kognitive Weise von einer jeweiligen Abbildung auf ihre Bedeutung geschlossen wird, kann diese Abbildung entweder eine ikonische Bedeutung in sich tragen, oder aber eine symbolische. Die Abbildung selbst stellt dabei das Zeichen, die Generalisierung dar. Ja, das klingt kompliziert; im Verlauf der n\u00e4chsten Zeilen sollte es aber klarer werden. Man achte bitte dennoch auf die Differenzierung zwischen \u201eIcon\u201c – im digitalen Sinne eines UIs – und \u201eIkon\u201c – der Spezifizierung eines Zeichens in der Semiotik – da diese wie gesagt recht unterschiedliche Bedeutungen haben.<\/p>\n

Symbole<\/h4>\n

Kurz gesprochen k\u00f6nnen Icons, Ikone, Symbole und Piktogramme als Repr\u00e4sentationen bestehender Objekte oder Konzepte aufgefasst werden. Doch die Form dieser Repr\u00e4sentation unterscheidet sich in jedem der F\u00e4lle: ein Symbol beruht auf einer Konvention, einem gegenseitigen Verst\u00e4ndnis innerhalb einer kulturellen Region. In unserer westlichen Kultur wird so die Abbildung eines Brotlaibs als Symbol f\u00fcr Nahrung und Zukunft angesehen. In anderen Kulturen haben hingegen Reis oder Getreidebrei diese symbolische Bedeutung.<\/p>\n

Ikon vs. Icon<\/h4>\n

Im Gegensatz zu einem Symbol hat ein Ikon lediglich eine (zumeist) visuelle \u00c4hnlichkeit mit einem Objekt und stellt dadurch eine \u00c4hnlichkeitsbeziehung zwischen Zeichen und Objekt her. Die Bedeutung der Darstellung eines Brotlaibs wird sich dann erst aus dem Kontext ergeben – der f\u00fcr uns UI Designer in den meisten F\u00e4llen durch ein Interface gegeben ist. Ein einen Brotlaib darstellendes UI Icon k\u00f6nnte dementsprechend eine M\u00f6glichkeit abbilden, einen digitalen Brotlaib in einen digitalen Einkaufswagen zu ziehen, um ihn sich sp\u00e4ter nach Hause liefern zu lassen (hier ein interessanter Beitrag zum Thema \u201eEinkaufen via Icons\u201c<\/a> ).
\nWie aber oben schon angesprochen hat sich der Begriff \u201eIcon\u201c, hier im weiteren \u201eUI Icon\u201c genannt, zu einem Grafikelement weiterentwickelt, mit dem innerhalb einer Anwendung navigiert werden kann, man Daten z\u00fcgig auffindet oder Programme \u00f6ffnet. Abgesehen von seiner historischen Bedeutung bezeichnen wir mit dem Wort \u201eIcon\u201c, das im Englischen in beiden F\u00e4llen synonym verwendet wird, also heute ein spezielles grafisches Element, das einen Gegenstand oder aber ein Konzept abbildet, entweder in einer ikonischen, oder aber einer symbolischen Art umschrieben. Um dies in einfachen Worten auszudr\u00fccken schaue man sich das folgende UI Icon an:<\/p>\n

\n

\"\"<\/p>\n

UI Icon mit symbolischer Bedeutung<\/div>\n<\/div>\n

In unserer Rolle als Nutzer eines UIs haben wir gelernt, dass die visuelle Repr\u00e4sentation unseres Planeten in Form eines UI Icons f\u00fcr das Internet steht. Die Schl\u00fcsselworte an dieser Stelle sind \u201ef\u00fcr etwas stehen\u201c \u2013 Symbole stehen f\u00fcr ein gelerntes Konzept.<\/p>\n

Im Gegensatz zu einem Ikon: ein UI Icon mit einer ikonischen Bedeutung zeigt den Gegenstand, den es abbildet, ohne das der Benutzer eine Schlussfolgerung ziehen m\u00fcsste. Das folgende Ikon (und gleichzeitig UI Icon, um genau zu sein) zeigt ein Adressbuch. Nach dem Prinzip von \u201eWhat you see is what you get\u201c wird man genau das hinter diesem Ikon finden, was man sieht: Adressen im digitalen Gegenst\u00fcck eines normalen Adressbuchs.<\/p>\n

\n

\"\"<\/p>\n

UI icon mit ikonischer Bedeutung<\/div>\n<\/div>\n

Piktogramme gestern<\/h4>\n

Zusammenfassend kann gesagt werden, dass die in einem UI Icon verwendete Metapher entweder symbolisch zu verstehen ist, oder aber ein reales Objekt in grafischer Form abbildet. Was aber unterscheidet beide von einem Piktogramm? Lange bevor es Grund zur Differenzierung zwischen Symbolen, Ikonen und UI Icons gab, gab es Piktogramme. So ist es nicht \u00fcberraschend, dass Piktogramme oft als einzelnes Symbol oder Ikon definiert werden, dessen Bedeutung auf die einfachste und grundlegendste Weise dargestellt wird. Um dies zu gew\u00e4hrleisten wird die jeweilige ikonische oder aber symbolische Metapher stilisiert und von allen unn\u00f6tigen Details befreit. Schon im alten \u00c4gypten, Griechenland und Asien war dies die erprobte Vorgehensweise.<\/p>\n

Piktogramme heute<\/h4>\n

In den vergangenen Jahren und Jahrzenten kamen Piktogramme immer dann zum Einsatz, wenn Informationen, beispielsweise in Form von Stra\u00dfen- oder Warnschildern, aber auch als Richtungswegweiser, an die \u00d6ffentlichkeit kommuniziert werden sollten. Um die Verst\u00e4ndlichkeit dieser Zeichen f\u00fcr eine m\u00f6glichst gro\u00dfe Benutzergruppe \u00fcber Kultur und Sprache hinweg zu optimieren wurde von der Internationalen Organisation f\u00fcr Standardisierung (ISO) ein Pool standardisierter Piktogramme angelegt, und in Verbindung damit auch Richtlinien f\u00fcr deren Design sowie Testmethoden zu ihrer Wirksamkeit<\/a>.<\/p>\n

Nachdem sich jedoch die Wirtschaft und damit das Kommunikationsdesign mehr und mehr im Angesicht der fortschreitenden Globalisierung wiederfinden, wird die effiziente Weise, in der Piktogramme ihre Message transportieren, auch f\u00fcr Unternehmen, UI Designer und Entscheidungstr\u00e4ger im Allgemeinen zunehmend interessanter. Weiterhin tr\u00e4gt sicherlich auch der aufkommende Trend in Richtung eleganter, klar strukturierter Interfaces zum anwachsenden neuerlichen Erfolg von Piktogrammen bei. Diesen Trend versucht auch das Windows Phone aufzugreifen, indem die Verwendung visueller Effekte minimiert und Text als vorrangiges Designelement verwendet wird (nachzulesen in den Metro Style Design Principles). In Kombination mit der angestrebten universellen Verst\u00e4ndlichkeit von Piktogrammen scheinen diese eine attraktive Variante f\u00fcr UI Icons darzustellen.<\/p>\n

Piktogramme designen<\/h3>\n

Da Piktogramme der neue letzte Schrei im UI Icon Design zu sein scheinen, dr\u00e4ngt sich die Frage auf, wie ihre Gestaltung eine maximale Wirkung erzielen kann. Die folgenden f\u00fcnf Punkte sollten dabei zumindest einen ersten \u00dcberblick schaffen:<\/p>\n

Bedeutsamkeit<\/h4>\n

Jedem UI Designer ist das Maxim der Eindeutigkeit ein Begriff. Ein jedes UI Element, das man entwirft, sollte so wenig Spielraum zur Interpretation offen lassen wie m\u00f6glich. Mit anderen Worten: es sollte die gr\u00f6\u00dftm\u00f6gliche Klarheit verk\u00f6rpern. Als Gegenstand zur Verdeutlichung kann das folgende Bild eines Stra\u00dfenverkehrsschilds zu Rate gezogen werden, weil es ein gutes Beispiel daf\u00fcr ist, wie man nicht vorgehen sollte – es besitzt keinerlei Bedeutung, au\u00dfer vielleicht als schlechter Witz. Im Gegensatz dazu kommuniziert ein Piktogramm eine einzige bedeutsame Nachricht, welche im optimalen Fall kultur- und sprach\u00fcbergreifend verstanden wird. Im Dienste der Verst\u00e4ndlichkeit sollte daher eine ikonische Repr\u00e4sentation des Objektes gew\u00e4hlt werden. Symbole dagegen sind rund um die Welt vielf\u00e4ltig gepr\u00e4gt, und k\u00f6nnen so f\u00fcr Verwirrung sorgen. Ausnahmen dieser Regel sind nat\u00fcrlicherweise F\u00e4lle, in denen das Symbol globalen Charakter besitzt. Ein gutes Beispiel hierf\u00fcr ist die symbolische Bedeutung einer Diskette, welche tats\u00e4chlich \u00fcberall als Speichern-Aktion ausgelegt wird.<\/p>\n

In der Zeit ihrer Einf\u00fchrung war die Bedeutung eigentlich ziemlich ikonisch, da Disketten tats\u00e4chlich als Speichermedium verwendet wurden. Stellen Sie sich das<\/em> mal vor. Heutzutage sind Disketten dagegen praktisch aus dem Alltag verschwunden, das UI Icon jedoch bleibt weiter bestehen. Denn die Bedeutung hat sich zwischenzeitlich zu einer symbolischen gewandelt, die auf der ganzen Welt verstanden wird – und das obwohl heute keine \u00c4hnlichkeit mehr zwischen Darstellung und tats\u00e4chlichem Objekt besteht (beispielsweise einer Festplatte, einem Server etc.). Dass das Verst\u00e4ndnis des Zeichens als Symbol durchaus nicht mehr mit der urspr\u00fcnglichen ikonischen Bedeutung \u00fcbereinstimmt, aber dennoch funktioniert, illustriert beispielsweise die Anekdote von Patrick Hofmann, User Experience Designer bei Google. Dieser berichtete bei der UPA 2009 Konferenz in M\u00fcnchen von einem Kind, das das Disketten-Icon als \u201eGarage\u201c wahrnahm, in der die gemachten Arbeiten abgelegt werden k\u00f6nnen. \u2013 Aber nun ja, Hauptsache es funktioniert. W\u00e4hrend dieses Symbol, trotz m\u00f6glicher interessanter Interpretationen, global anerkannt ist, k\u00f6nnen echte Probleme aus der Verwendung von Gesten entspringen. Das \u201eDaumen hoch\u201c Symbol, um nur eines zu nennen, wird in einigen Kulturen \u00e4quivalent zum westlichen Mittelfinger verwendet. Dazu w\u00fcrde ich aber angesichts der steigenden Popularit\u00e4t von facebook gerne mal eine Studie sehen.<\/p>\n

Vertrautheit<\/h4>\n

Stellen Sie sich vor, Sie w\u00fcrden versuchen eine geeignete Metapher f\u00fcr das Konzept eines TV-Satelliten zu finden. Vermutlich w\u00fcrden Sie eine Satellitensch\u00fcssel dem orbitalen Satelliten vorziehen. Warum? Weil Sie mit diesem Ende der Signal\u00fcbertragung starker vertraut sind. Obwohl wir wissen, dass orbitale Satelliten ihre Kreise \u00fcber unseren K\u00f6pfen ziehen, ist die Satellitensch\u00fcssel obgleich technisch weitaus weniger bedeutungsvoll, f\u00fcr uns viel gel\u00e4ufiger und wird infolgedessen schneller und intuitiver verstanden.<\/p>\n

Bei der Ausarbeitung eines Piktogramms r\u00fcckt an dieser Stelle eine weitere Frage in den Vordergrund: gibt es allgemeine Darstellungen f\u00fcr das gew\u00fcnschte Konzept? Wenn dem so ist, wie werden die spezifischen Metaphern visualisiert? Existieren solche Darstellungen, die in jedem Fall richtig erkannt werden, und ist ihr Einsatz nicht verboten (zum Beispiel aufgrund von Urheberrechten) so sollte die Form in das eigene Piktogramm \u00fcbernommen werden. Naturgem\u00e4\u00df m\u00fcssen der allgemeine Stil und die markanten Details der eigenen Arbeit adaptiert werden, da jeder Icon Designer entlang seines eigenen Gedankenstrangs arbeiten wird (weitere Informationen wie Centigrade im Bereich Icon Design arbeitet<\/a>); was aber die Form angeht, sollte man immer die am weitesten verbreitete w\u00e4hlen, die augenblicklich verstanden wird und dem Nutzer im Kopf bleibt.<\/p>\n

Kontext<\/h4>\n
Kontext \u2013 im Sinne der Aufgabenanforderung<\/h5>\n

Verwandt mit dem Konzept der Vertrautheit ist die Situation, in welcher ein Nutzer ein Piktogramm wahrnimmt (bei der Rezeption eines Piktogramms mag es zum Beispiel wichtig sein, ob es zwischen anderen Informationsquellen pr\u00e4sentiert wird). Durch selektive Wahrnehmung und Verarbeitung, werden Nutzer zun\u00e4chst nur jene Informationen verarbeiten, die relevant f\u00fcr die Erf\u00fcllung ihrer aktuellen Aufgabe sind. Unterschiedliche Anforderungen werden folglich auch andere mentale Konzepte und Assoziationen abrufen, welche wiederum, wenn sie im Design aufgegriffen werden, bereitwilliger verarbeitet und aufgenommen werden als andere. Dementsprechend lohnt es sich, die Anforderungen der typischsten Anwendungsf\u00e4lle abzusch\u00e4tzen, so dass visuelle Informationen den Kontext der aktuellen Aufgabe des Nutzers aufgreifen.<\/p>\n

Kontext \u2013 im Sinne von Ort und Umgebung<\/h5>\n

Schauen Sie sich dieses Bild an, wiederum von einem Verkehrsschild. Erscheint es Ihnen besonders sinnvoll? Es h\u00f6rt erst auf absurd zu wirken, wenn man die folgenden zus\u00e4tzlichen Informationen erh\u00e4lt: dieses Verkehrsschild ist an einer T-Kreuzung aufgestellt, an der jeweils nach rechts und links eine Einbahnstra\u00dfe abzweigt. In diesen Einbahnstra\u00dfen ist allerdings das Radfahren in beide Richtungen erlaubt.<\/em> Ist der \u00f6rtliche Kontext also bekannt, kann in diesem Fall die Bedeutung erschlossen werden. Anderseits w\u00e4re es aus Sicht der Usability klug gewesen, die beiden Einbahnstra\u00dfenschilder nebeneinander zu platzieren statt untereinander. Aber das ist eine andere Geschichte.<\/p>\n

Ein weiteres brillantes Beispiel f\u00fcr \u00f6rtlichen Kontext ist das untenstehende Piktogramm. W\u00e4hrend es auf einem Taschenrechner als der arithmetische Operator \u201ePlus\u201c verstanden wird, deuten wir das gleiche Motiv auf einem Badezimmerschrank als Aufbewahrungsort f\u00fcr den Erste-Hilfe-Kasten.<\/p>\n

\"\"<\/div>\n

Die Bedeutsamkeit des \u00f6rtlichen Kontexts begr\u00fcndet sich auf dem Aufrufen des mentalen Models f\u00fcr kontextuelle Kategorisierung. Jeder wahrgenommene Stimulus wird gem\u00e4\u00df den Kategorien seiner benachbarten Objekte und der jeweiligen Situation eingeordnet. Demgem\u00e4\u00df muss immer die Umgebung der Piktogramme beachtet werden. Dies wiederum ist ein wichtiger Aspekt, wenn die Notwendigkeit zur Reduktion von Details betrachtet wird:<\/p>\n

Simplizit\u00e4t<\/h4>\n

Die gute alte Diskette als Symbol einer Speichern-Aktion darf, sowohl von einem kognitiven als auch von einem visuellen Standpunkt aus, gut und gerne als einfach und simpel beschrieben werden. Hier steht ein einzelnes Objekt f\u00fcr eine im h\u00e4ufigsten Falle sehr einfache Aktion. Doch wie jeder UI Designer wei\u00df, sind UI Icon-Metaphern nicht immer so schnell gefunden, weil das zu gestaltende Element oft viel komplexer und komplizierter ist. Dann gilt es eine Metapher zu erdenken, die zum einen in den verf\u00fcgbaren Raum passt und zum anderen noch auf klar verst\u00e4ndliche Weise dargestellt werden kann.
\nIn Abh\u00e4ngigkeit zu seiner absoluten Gr\u00f6\u00dfe muss das Design eines Piktogramms simpel gehalten werden – so verabschiedet man sich von der einen oder anderen Metapher schon allein aus dem Grund, dass sie sich weigert in den vorgesehenen Rahmen zu passen. Vor dem Hintergrund eines optimal aussagekr\u00e4ftigen Piktogramms muss der Gedanke von Simplizit\u00e4t allerdings noch weiter gefasst werden:<\/p>\n

Details<\/h5>\n

Piktogramme stellen die generischste Form einer jeden Darstellung realer Objekte dar. Die Details einer jeweiligen Abbildung m\u00fcssen bis zu dem Punkt reduziert werden, an dem jede weitere Wegnahme eines Details die Unkenntlichkeit oder Nicht-Eindeutigkeit des Piktogramms zur Folge h\u00e4tte. Man denke beispielsweise an das am weitesten verbreitetste piktografische Gegenst\u00fcck eines realen Objektes, der Piktogramm-Person:<\/p>\n

\"\"<\/div>\n

Diese stellt eine humanoide Form dar, mit geraden, nicht ausgeformten Gliedma\u00dfen und einem schwebenden Kopf. Ihre Au\u00dfenwirkung ist ganz klar: \u201ewenn du vier Gliedma\u00dfen hast, aufrecht gehst und einen schwebenden Kopf hast, dann ist diese Information f\u00fcr dich von Relevanz\u201c. Zugegeben, der schwebende Kopf ist reine Stilsache. Trotz dessen ist die Bedeutung unmissverst\u00e4ndlich und w\u00fcrde vermutlich nicht einmal von einer Feministin verleugnet werden, ben\u00f6tigte sie die entsprechende Information. Eine Variation dieses Piktogramms war jedoch offenkundig von N\u00f6ten, die eine Transformation der Person zum geschlechtsspezifischen \u201eer\u201c mit sich brachte (wobei die Feministinnen unter uns \u00fcber diese Transformation vermutlich ebenso wenig begeistert sein d\u00fcrften):<\/p>\n

\"\"<\/div>\n

Um eine m\u00e4nnliche Person von einer weiblichen abzugrenzen, wenn auch nur um den Weg zur richtigen T\u00fcr zu weisen, wurden typische physische Gegebenheiten aufgegriffen: ein Mann hat typischerweise breitere Schultern als eine Frau, w\u00e4hrend diese breitere H\u00fcften und schmalere Beine auszeichnen. Gut, der Rock scheint heute aus der Mode gekommen, daf\u00fcr aber schlie\u00dft sich an dieser Stelle der Kreis der Argumentationslinie \u2013 das gegenseitige Verst\u00e4ndnis und geteilte Wissen innerhalb einer kulturellen Region hat sich zum Symbol erhoben; der einstige Rock steht visuell f\u00fcr das schw\u00e4chere Geschlecht. Gleichzeitig macht dieser Umstand das Piktogramm zu einem solchen mit sowohl ikonischer wie auch symbolischer Bedeutung (um Ihnen etwas zum nachdenken mit auf den Weg zu geben\u2026)<\/p>\n

Weiterhin l\u00e4sst sich dieser Grad an Reduktion auf jedes beliebige Objekt \u00fcbertragen, das in einem Piktogramm dargestellt werden soll \u2013 kein unn\u00f6tiges Detail, keine redundante Form oder Kurve sollte verbleiben, die nicht zur Eindeutigkeit der Abbildung ein Zutun hat. Man beachte so auch, dass der schwebende Kopf der weiblichen Person nicht vom Kopf der m\u00e4nnlichen abweicht. Dies ist schlichtweg nicht n\u00f6tig. Doch die Reduktion von Detaills muss auch immer vor dem Hintergrund der interkulturellen und Sprachen \u00fcberspannenden Verst\u00e4ndlichkeit gesehen werden. Sieht das abzubildende Objekt auf der Welt \u00fcberall gleich aus? Das in meinen Augen sch\u00f6nste Beispiel an dieser Stelle ist dieses verbreitete Piktogramm f\u00fcr einen Aufzug:<\/p>\n

\"\"<\/div>\n

Obwohl ein Aufzug in mit den ausgefallensten Formen, Farben und Materialien gebaut werden kann, wird es doch immer eine Kiste bleiben, in der sich Menschen nach oben oder unten bewegen. Ist einem das Konzept eines Aufzugs also \u00fcberhaupt ein Begriff, so wird man das Piktogramm verstehen. Es verzichtet auf die Darstellung elektrischer Schiebet\u00fcren, Etagenkn\u00f6pfe oder laufender Fahrstuhlmusik, Details die, obwohl typisch f\u00fcr viele Aufz\u00fcge, nicht n\u00f6tig sind um das Konzept zu erkennen und den entsprechenden mentalen Inhalt zu triggern. Ganz abgesehen davon, dass diese Zus\u00e4tze das Zeichen mit Informationen \u00fcberf\u00fcllen w\u00fcrden, die auf dem Weg zum Erkennen und Verstehen dekodiert werden m\u00fcssen, und damit den Verst\u00e4ndnisprozess verlangsamen w\u00fcrden.<\/p>\n

Altersgruppen<\/h5>\n

Ein weiterer wichtiger Punkt in der Diskussion um Detaillreduktion und generische Darstellung sind Altersgruppen in Hinsicht auf die Benutzer oder Rezipienten von Piktogrammen. Da Piktogramme zumeist in Situationen Verwendung finden, in denen der breiten \u00d6ffentlichkeit Informationen zuteil werden sollen, m\u00fcssen alle vertretenen Altersgruppen angesprochen werden. Auch hier hat sich der Einsatz von generischen Abbildungen bezahlt gemacht; so k\u00f6nnten Senioren unter Umst\u00e4nden ein Telefon nicht erkennen, das in Form eines iPhones abgebildet wird. Ein Jugendlicher hingegen k\u00f6nnte Probleme mit der Darstellung eines altmodischen W\u00e4hlscheibentelefons bekommen, das Senioren h\u00f6chst gel\u00e4ufig ist. Denn im Gegensatz zur Diskette hat sich hier das \u00e4ltere Gegenst\u00fcck nicht zum Symbol entwickelt. Der Fokus muss hier also auf einem Trade-Off gelegt werden, der eine maximale Spanne an Benutzern abdeckt. Die Relevanz dieses Punktes h\u00e4ngt aber auch vom Einsatzgebiet der jeweiligen Piktogramme ab.<\/p>\n

Alles weitere \u2013 Stil, Farbe, individuelle Anforderungen<\/h4>\n

Wurden die oben erl\u00e4uterten Faktoren in der Konzeption bedacht, so wartet weiterhin die eigentliche (digitale) Umsetzung auf ihren Auftritt. Im Allgemeinen verzichten oben beschriebene Piktogramme auf den Einsatz von Schatten, Schein oder Lichtkante \u2013 kurzum auf Effekte \u00fcberhaupt \u2013 um die Verst\u00e4ndlichkeit und den Erkennungswert zu verst\u00e4rken. So bleiben Farbe, Stil und Unterscheidbarkeit zu beachten:<\/p>\n

Farbe<\/h5>\n

Im Gegensatz zu UI Icons wird bei Piktogrammen in der Regel nur eine Farbe verwendet, um die Umrandung eines Objekts oder die F\u00fcllung seiner Fl\u00e4che darzustellen. Je nachdem, worauf (vor welchem Hintergrund) das Piktogramm sp\u00e4ter zum Einsatz kommt kann eine Hintergrundfarbe hinzukommen. In jedem Fall ist auf einen hohen Kontrast zwischen Vorder- und Hintergrund zu achten, um die Lesbarkeit zu unterst\u00fctzen. Bei Metro Style Piktogrammen f\u00fcr das Windows Phone beispielsweise definiert sich die Farbe \u00fcber die globale Farbeinstellung des individuellen Ger\u00e4ts; der Designer muss hier nur die Form des Piktogramms an sich bereitstellen. Als allgemeine Regel kann festgehalten werden, dass die Verwendung einer zweiten, zus\u00e4tzlichen Vordergrundfarbe nur dann in Erw\u00e4gung gezogen werden sollte, wenn es hierf\u00fcr einen triftigen Grund gibt. Ganz abgesehen von \u00e4sthetischen Beweggr\u00fcnden. Warnzeichen zum Beispiel verwenden Rot als zus\u00e4tzliche Farbe, um Aufmerksamkeit zu erzeugen und auf eine m\u00f6gliche Gefahr hinzuweisen.<\/p>\n

Stil und Unterscheidbarkeit<\/h5>\n

Wie in vielen Bereichen des Designs allt\u00e4glich muss auch dann ein \u00fcbergreifender Stil angestrebt werden, wenn es ein Set von Piktogrammen zu gestalten gilt. In vielen F\u00e4llen wird dieser Stil von Corporate Design Richtlinien abh\u00e4ngen, oder zumindest von diesen beeinflusst werden. So k\u00f6nnte die St\u00e4rke von Linien oder die Rundung von Ecken festgelegt sein. Aber auch die Art oder Sprache der zu w\u00e4hlenden Metaphern kann vorgeschrieben sein, um beispielsweise ein bestimmtes Gef\u00fchl oder eine sonstige Wirkung zu erzielen.<\/p>\n

Fazit<\/h3>\n

Eine wirkungsvolle und unmissverst\u00e4ndliche piktografische Sprache zu sprechen ist nicht ganz so einfach, wie es auf den ersten Blick erscheinen mag. Hat man aber die linguistischen und kognitiven Grundlagen erfasst, k\u00f6nnen Piktogramme auf eine effektive und effiziente Weise eingesetzt werden, um Menschen zu informieren und zu koordinieren \u2013 und das \u00fcber Kulturen und Sprachen hinweg, in einem Bruchteil der Zeit, die das Verstehen eines \u00e4quivalenten Textes erfordern w\u00fcrde. In einem User Interface angewendet k\u00f6nnen zus\u00e4tzlich Zeit und Kosten zur Lokalisierung gespart werden, w\u00e4hrend gleichzeitig ein elegantes und globalisiertes Gef\u00fchl von Offenheit gef\u00f6rdert wird, das auch noch einer maximalen Gruppe von Nutzern zu Gute kommt.<\/p>\n

Doch das einzelne Zeichen muss weiterhin vom Nutzer erschlossen werden. Der Interpretationsprozess schlie\u00dft hier sowohl die aktuelle Aufgabenstellung des Users ein, wie auch den Kontext und sein gegebenes Wissen in verschiedenen Bereichen. So ist der wichtigste Faktor im Design eines Piktogramms die Eindeutigkeit und Verst\u00e4ndlichkeit f\u00fcr eine gr\u00f6\u00dftm\u00f6gliche Nutzergruppe. Simplizit\u00e4t, Lesbarkeit und typische Use Cases m\u00fcssen immer im Fokus gehalten, unn\u00f6tige Details reduziert und das generischste Objekt als Gegenstand der Illustration verwendet werden. Kurz gesagt, rufen Sie sich regelm\u00e4\u00dfig die schwebenden K\u00f6pfe der Piktogramm-Personen in Erinnerung.<\/p>\n

Microsoft, Windows Phone, Windows 8 und Metro sind Marken oder eingetragene Marken der Microsoft Corporation in den USA und\/oder anderen L\u00e4ndern.
\niPhone ist eine Marke oder eingetragene Marke der Apple Inc. in den USA und\/oder anderen L\u00e4ndern.
\nGoogle ist eine Marke oder eingetragene Marke der Google Inc. in den USA und\/oder anderen L\u00e4ndern.<\/div>\n","protected":false},"author":25,"featured_media":0,"template":"","tags":[166,20,48,169,129],"class_list":["post-2749","blog","type-blog","status-publish","hentry","tag-design-prinzipien","tag-icon-design","tag-mobile","tag-piktogramme","tag-windows-phone"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/2749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/25"}],"version-history":[{"count":3,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/2749\/revisions"}],"predecessor-version":[{"id":11362,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/2749\/revisions\/11362"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=2749"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=2749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}