{"id":2675,"date":"2012-04-27T16:40:11","date_gmt":"2012-04-27T14:40:11","guid":{"rendered":"http:\/\/www.centigrade.de\/blog\/en\/?p=2675"},"modified":"2020-02-17T10:24:28","modified_gmt":"2020-02-17T09:24:28","slug":"pictograms-the-new-sliced-bread-in-icon-design","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/en\/blog\/pictograms-the-new-sliced-bread-in-icon-design\/","title":{"rendered":"Pictograms \u2013 The New Sliced Bread in Icon Design"},"content":{"rendered":"

After the introduction of Microsoft\u2019s new approach to user interface design with its current mobile device Windows Phone and upcoming operating system Windows 8, user interface designers and clients alongside them are beginning to \u201cthink Metro style\u201d. Based on Swiss Graphic Design<\/a> principles (established in the 1950\u2019s) and focusing on clean typography, not only interaction, navigation and information architecture have changed, but the understanding of and thereby design process for icons has, too.<\/p>\n

As discussed in one of our blog articles about UI guidelines for mobile devices<\/a>, the concept of Metro style icons is inspired by the idea of quick wayfinding, using pictographic signs found in metropolitan areas, airports or train stations. These simple-shaped icons are not only reduced in both color and detail, but especially shall strive for understandability across cultures and languages. This requirement is by no means new, nor is the Metro icons\u2019 attire. Designed along the lines of traffic signs using the most generic and salient mental model available, Metro icons are in fact pictograms, which against the background of spreading globalization have been standardized in many areas of deployment. Not only for reasons of maximizing their recognition and thereby their value was standardization a good idea, but also because a lot can go amiss in designing a pictogram.<\/p>\n

To understand the significance of pictograms and their design one must first of all engage in the characteristics of pictographic and symbolic language and discern these from usual interface icon metaphors, speech and appearance. When this is accomplished five points should be taken into consideration while designing intuitive, understandable and aesthetic pictograms.<\/p>\n

<\/p>\n

Understanding pictographic language<\/h3>\n

Symbols, icons and UI icons<\/h4>\n

First of all one has to meddle in terminology a bit. Apart from the use of the word \u201cicon\u201d in a UI context, linguists differentiate between the words \u201cicon\u201d and \u201csymbol\u201d, depending on how the meaning of the given depiction is to be deduced. In short, a \u201csign\u201d (the generalization) can either have an iconic meaning (then called icon) or a symbolic one (then called symbol). Don\u2019t worry, this will become clearer as you read on. The fact that icons nowadays have an additional meaning when talking about UIs is not very helpful, as the terms can easily be mixed up \u2013 to avoid this, the icon from a linguistic point of view will be forth on called plainly \u201cicon\u201d. The digital version in a user interface will be called \u201cUI icon\u201d.<\/p>\n

Symbols<\/h4>\n

Icons, symbols and pictograms can in a nutshell be defined as representations of given objects or concepts. But the form this representation takes differs in each case: a symbol originates from a convention, depending on the respective common understanding within a cultural area. The depiction of bread, in our Western culture, would therefore have the symbolic meaning of sustenance and future.<\/p>\n

Icons \u2013 as in \u201cicon\u201d and \u201cUI icon\u201d<\/h4>\n

In contrast to a symbol an icon bears a (in most cases) visual resemblance to an object. Perceived as an icon the depiction of bread will \u201conly\u201d represent a similarity relationship to its object, which together with the context of perception will give meaning to the icon. For us UI designers the context will most probably be some kind of interface. A UI icon depicting bread could therefore, for instance, be a means of drag- and dropping a loaf of bread into your digital shopping cart, to be delivered later that day (see this online article<\/a> for an interesting fun fact about \u201cshopping via UI icons\u201d). But as stated above , the term \u201cicon\u201d has evolved to mean a graphic element designed to navigate in a given system, locate data, access or open applications, etc. So, apart from the historic meaning of the word icon as a \u201cpicture resembling a real object\u201d we have come to call a specific graphic element in UIs \u201cicon\u201d as well – although actually it is a depiction of a metaphor \u2013 which can either carry a symbolic meaning, or an iconic one. \u00a0To put all this in plain words, look at the following UI icon:<\/p>\n

\n

<\/p>\n

UI icon with symbolic meaning<\/div>\n<\/div>\n

We as users have learned, that the representation of our planet stands for \u201cinternet\u201d, when encountered in a digital interface. Note, that here the significance lies in the words \u201cstands for\u201d. It is often characteristic to symbols that they stand for something.<\/p>\n

Opposed to that, icons don\u2019t. A UI icon with an iconic meaning does not stand for anything, it merely depicts it, no inferences or deductions included or needed. For instance, the following icon (and UI icon for that matter) represents an address book. Here you will find exactly what you can see: addresses in the digital counterpart of an address book.<\/p>\n

\n

<\/p>\n

UI icon with iconic meaning<\/div>\n<\/div>\n

Pictograms in history<\/h4>\n

In summary, the metaphor of a UI icon is meant to be either symbolic or depicts a real-world object, depending on how the meaning of it is inferred. But what sets them apart from pictograms? What we now call the \u201cfirst pictograms in history\u201d had been around for quite some time before any need for differentiating between symbols, icons or UI icons had arisen. Therefore, it comes as no surprise that a pictogram often enough is defined as a single symbol or icon<\/em>, conveying its meaning by the most elementary and plain design possible. For this reason, its metaphor \u2013 may it be symbolic or iconic \u2013 is stylized and stripped off unnecessary details. Even in ancient Greece, Egypt or Asia this minimalistic approach to design was already the spirit of the age.<\/p>\n

Pictograms today<\/h4>\n

For the last couple of years and decades pictograms have been used mainly in areas of deployment, where information relevant to the public was to be conveyed, as in road signs, warning signs, direction pointers and so on. To make these understandable to an audience as large as possible \u2013 even across cultures and languages \u2013 the International Organization for Standardization (ISO) has created a pool of standardized pictograms and also a set of design guidelines and testing methods<\/a>.<\/p>\n

But as commercial communication and with it communication design faces more and more challenges of globalization and diverse information distribution, also companies, UI designers and industrial decision makers in general are attracted to the effective way pictograms state their message. Another reason for the trend of using pictograms will certainly also be the current notion for elegant, clean and quiet interface structures, which have been introduced more and more over the near past. \u00a0This as well is what the Windows Phone and Windows 8 are trying to achieve, minimizing static visual effects and using text as the main design element (stated very clearly in their Metro Style Design Principles\u00a0(no longer available)). Combined with its feature of widespread understandability a pictogram seems to offer an attractive solution where interface icons are concerned.<\/p>\n

Designing pictograms<\/h3>\n

As pictograms seem to be the new sliced bread, how are they designed to maximum effect? The following 5 points should at least give a head start on this issue:<\/p>\n

Meaningfulness<\/h4>\n

Common to any UI designer is the maxim of unambiguity. The UI element you create should be as little open to interpretation as possible, in other words, its meaning should be as clear as possible. For matters of demonstration this picture of a road sign would be how not to do it (the signs header \u201cGe\u00e4nderte Verkehrsf\u00fchrung\u201d translates to \u201ctraffic route changed\u201d). This probably won\u2019t mean a lot to anyone, except maybe as a mean joke. A pictogram, in contrast, is to have one single meaningful message, which in an optimal case has the same meaning across cultures and languages. To this end, one should choose an iconic representation of the given object; using a symbol instead of an iconic representation could lead to confusion, since symbols are very versatile around the globe. A visual resemblance to the real object as in iconic representations should do the trick, though. The exception to the rule here are of course cases, in which a symbol will be understood everywhere.<\/p>\n

A good example of a global symbolic meaning nowadays is the floppy disc for a digital save-action. When first introduced it was actually pretty iconic in meaning, since people actually used floppy discs as their storage device. Imagine that. Now that floppy discs have practically disappeared the UI icon remains, but its meaning has become a symbolic one, understood around the world, but not stating a similarity relationship between depiction and real-life object (like a hard-drive or server). But the symbol seems to work as well, as Patrick Hofmann, User Experience Designer at Google narrated at the UPA2009 in Munich. He spoke of a child, who perceived the floppy disk to be a garage, where he could store his files. Well, what ever works. While that symbol, inspite of interesting interpretations, seems to be globally acknowledged, real problems can arise from gestures. The thumbs-up symbol, to state just one, will in some cultural areas be received as an equivalent to our Western middle-finger. Although I would be interested in a study about this since facebook has grown beyond popular.<\/p>\n

Familiarity<\/h4>\n

Imagine you were trying to find a metaphor for the concept of satellite TV, while you already have your mind made up about what depiction to use for cable TV, internet streaming, or any other means to watch your daily news program available. You would probably choose the satellite dish rather than the orbital satellite as your metaphor. Why? Because you are more familiar to this end of the signal transmission. Although we know that orbital satellites cycle above our head all the time, the satellite dish, in spite of being the technically least important piece in the process, is much more familiar to us, and therefore will be understood faster and more intuitive than the satellite itself. When contemplating a pictogram another perspective arises at this point: are there common depictions in use of the concept you are looking for? If so, how are the specific metaphors visualized? If there are any in existence, that are commonly used and will be recognized, and if it is not prohibited (e.g. for copyright reasons), duplicate the metaphor into your own pictogram. Naturally the overall style and identifying effects of your own work will have to be adapted, since every professional will work along his individual train of thought (further information on \u201cThe Centigrade Way\u201d<\/a> of icon Desig); but where the shape itself is concerned use the widespread one, that users will remember and understand instantly.<\/p>\n

Context<\/h4>\n
Context \u2013 as in context of requirement<\/h5>\n

Related to the concept of familiarity it is also important what users require of the situation in which they are currently perceiving a pictogram (when perceiving an informational pictogram, for example, it may be important whether it is located amidst other sources of information). Along the lines of selective processing they will first of all process the information relevant to meeting their task requirements at that given time. Different requirements will trigger different mental concepts and associations, which in turn, if addressed in the design, will be processed and incorporated more readily than others. Hence, it will be helpful to anticipate which requirements might be typical in most common use cases, so that the visual information is within the context of the task a user is performing. This idea might not seem very specific to pictograms and yes, it can be applied to UI icon and even interaction design in general. In combination with the requirement of keeping the pictogram very simple though it is rather helpful. Before getting to simplicity in pictogram design another pointer in the direction of context relevance has to be given:<\/p>\n

Context \u2013 as in context of placement<\/h5>\n

Look at this picture, again of a road sign. Does it make a lot of sense to you? It only stops seeming absurd when the following additional information is given: this road sign is put up at a t-juncture; from this t-juncture there is a one-way-street that leads to the right, and a one-way-street that leads to the left. Additionally, bicycles may come and go in both directions, disobeying the one-way-rule<\/em>. So, if the context of placement is clear the meaning can be inferred. On the other hand, from a usability point of view it still would have been more prudent to place the two one-way-street signs directly adjacent to each other, instead of beneath each other. But that again is a different story.<\/p>\n

Another splendid example for context in this respect is this one: the pictogram below could mean \u201cplus\u201d, when thought of as a button on a calculator. In the context of a sticker on a bathroom cabinet it would rather mean \u201cfirst-aid equipment\u201d.<\/p>\n

<\/div>\n

Context as in placement will trigger the mental model of contextual categorization. Any content will be sorted into the category of its surrounding objects and situation. So it must always be contemplated, in which context the pictogram will be used. This again is a point of importance when the reduction of detail necessary for a pictogram is contemplated:<\/p>\n

Simplicity<\/h4>\n

The floppy disc as a symbol for a save-action is, both from a cognition point of view and a visual one, a pretty simple one. A single object stands for (in most cases) a simple action. Any UI icon designer will know that it is not always like that. In many cases the meaning of the element a designer is supposed to create is much more complex and complicated. Then, a metaphor must be found, that will fit into the confined window of both the actual space you have at your disposal and the even larger confinement of a very simple depiction. In any case a pictogram design has to be kept, in dependence with its actual size, simple. Some metaphors have to be abandoned simply because they could not be crammed into the confines of the slice at hand. But when pondering on a potential pictogram simplicity goes an even longer way – here one not only has to reduce detail as to fit the metaphor into the given space or not to visually overcrowd the element on the whole, which would kill any chance of speedy understandability and recognition.<\/p>\n

Details<\/h5>\n

In a pictogram the details of every given depiction of a real object must be reduced to a point, where the most generic model of this object will remain. Think of the best known pictogram style counterpart of a real life object, the pictogram person:<\/p>\n

<\/div>\n

It is a humanoid shape, with completely straight features, unformed extremities and a floating head. It says plainly: \u201cif you have four limbs of some sort, walk erect and have a floating head, this information is relevant to you.\u201d Ok, the floating head can be put down to stylization, but the meaning is instantly clear anyhow. Not even a feminist would defy the meaning when in need of the information depicted. For obvious reasons a variation of the pictogram person still had to be made, transforming it into a \u201chim\u201d, although this had probably not left the feminists among us any happier:<\/p>\n

<\/div>\n

To distinguish a male from a female person as to point out which restroom-door to walk through, the typical physical differences between women and men were incorporated: the man has wider shoulders than the woman, whereas the woman has wider hips and slimmer legs. Ok, the skirt is not too typical nowadays, but there we have arrived back at mutual yet outdated understandings within cultural areas, that have turned to symbols \u2013 which makes this pictogram both symbolic and iconic simultaneously (just to give you something to think about on your way to work tomorrow\u2026)<\/p>\n

In any case this degree of reduction of detail can be transcribed to any object when designing it for a pictogram \u2013 no detail, shape or curve must remain, that is not mandatory in conveying the objects identity. Note for instance, that the woman\u2019s floating head does not differ from the man\u2019s. Connected to the thought of reduction of detail must also be the requirement of cultural independence and independence of language. Does the object you wish to illustrate look the same around the world, or at least in the cosmopolitan areas around the world? My favorite example here is the pictogram for an elevator:<\/p>\n

<\/div>\n

Although an elevator can come along in a multitude of different constructions and looks, in the end it will still be a box containing people going up or down. This pictogram, if you are familiar to the idea of a lift at all, will talk to you very plainly. It refrains from showing you sliding doors, floor buttons or the obligatory elevator music, which although characteristic to most elevators, are not needed to identify the concept; and would only crowd the sign with information having to be decoded before reaching the answer as to what one is looking at.<\/p>\n

Age groups<\/h5>\n

Another important point when talking about the use of generic and stripped-off-all-detail depictions is age groups. Because pictograms are often used in situations where information is to be given to the general public practically all age groups are to be addressed. It has been proven that in this respect it is also prudent to use generic depictions. For instance, an elderly person might not recognize an iPhone-shaped object to be a phone, whereas a youngster nowadays might not recognize an old-fashioned dial-phone respectively familiar to the elderly. Why? Because opposed to the floppy disc, a dial-phone is not a symbol, it does not universally stand for anything. So a trade-off must be made that will serve a maximal range of users. The relevance of this point will of course depend on the area of employment of a given pictogram.<\/p>\n

Everything else \u2013 as in general style, color and individual frameworks<\/h4>\n

When the above factors of interest have been incorporated successfully what remains is the (digital) realization itself. In general pictograms as described above refrain from using any effects like shadows, glows or textures, again to amplify readability and conciseness. So there are color, style and distinction to think about:<\/p>\n

Color<\/h5>\n

For pictograms (in contrast to UI icons), usually only one color is included to draw the outlines of an object or respectively fill its surface. Depending on what the pictogram will actually be placed upon there might be a background color as well. Important in any case is a high contrast between foreground- and background color to support readability. In case of Metro Style pictograms for e.g. the Windows Phone the color of the pictogram is defined by the overall color settings of the individual device, so here only the metaphor itself will have to be provided by the designer. As a general rule: the use of more than one color as a foreground color should have good reason, apart from any aesthetic one. Warning signs for instance use read as a second color to draw the eye and signal possible harm.<\/p>\n

General style and distinction<\/h5>\n

As common to many design tasks an overall style will have to be created for a set of pictograms. In many cases this style will have to abide corporate design regulations or at least be defined by existing surroundings. This might go as far as to determining how thin a line must be or whether rounded corners are permitted, but can also include regulations about how the metaphors are to be devised as to create a particular effect or feeling.<\/p>\n

Conclusion<\/h3>\n

Pictographic language is not as simple to conduct as it suggests at first glance. But if the basics are mastered pictograms can be used to great effect, both to inform and coordinate people of different cultures and languages at a fraction of the time that plain text would take. If incorporated in an application it can reduce time and cost for localization and bring forward a modern, elegant and globalized feeling of openness, being usable for a maximum of possible user groups.<\/p>\n

But the single sign has still to be inferred through a process of interpretation constructed from the task at hand, context and knowledge. The latter for one will vary in different parts of the world and different cultural areas. This is the main factor, that should always be in front of your mind\u2019s eye when designing a pictogram. Make it legible and unambiguous to as great an audience as possible. Focus on the situation the user will typically be in. Strip it from all unnecessary detail and use generic objects as representations. Or \u2013 to put it in a nutshell \u2013 \u00a0always remember your users\u2019 floating heads.<\/p>\n

Microsoft, Windows Phone, Windows 8 and Metro are trademarks or registered trademarks of Microsoft Corporation in the US and\/or other countries. iPhone is a trademark or registered trademark of Apple Inc. in the US and\/or other countries.
\nGoogle is a trademark or registered trademark of Google Inc. in the US and\/or other countries.<\/div>\n","protected":false},"author":25,"featured_media":0,"template":"","tags":[166,100,20,83,48,169,129],"class_list":["post-2675","blog","type-blog","status-publish","hentry","tag-design-prinzipien","tag-design-prozess","tag-icon-design","tag-kommunikation","tag-mobile","tag-piktogramme","tag-windows-phone"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/2675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/users\/25"}],"version-history":[{"count":2,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/2675\/revisions"}],"predecessor-version":[{"id":11363,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/2675\/revisions\/11363"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/media?parent=2675"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/tags?post=2675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}