Pictograms are quickly becoming an iconic fad, but they’ve been around since the dawn of time. What are they? What are they good for? Why are they so trendy and should we be worried? All this and more, in what i suspect will be the longest article on icons you’ll read today.
What’s a Pictogram?
A pictogram, or a pictograph is an ideogram that conveys it’s meaning through it’s pictorial resemblance to a physical object. Today we use the term casually for a broad sweep of icons. I personally use it as a reference to the flat-styled, often uni-colored, simplistic portrayal of ideas and objects.
The classic standardized ISO 7001 DOT Pictograms
A history in pictures
While lately popularized by handheld interfaces like the iPhones tab control, Pictograms have never been out of style. Infact, some of the earliest written languages where based on the idea of conveying meaning through simple pictures.
This blog post is not an attempt at a history lesson, but there are some very interesting lines stretching all the way back from the earliest mesopotamian language of Cuneiform and Egyptian Hieroglyphs, through the coats of arms in the middle ages and all the way up to the invention of the printing press. All contributing to the idea of icons and pictograms.
Today we use pictograms in all sorts of situations. Looking for the toilet in the Airport? Or are you following laundry instructions? We interpret any number of pictograms every day.
Pictograms are everywhere around us.
The International Standard
A set of pictograms was defined in the international standard ISO 7001, championed by Roger Cook and Don Shanosky in the seventies with their ‘Department of Transportation’ sanctioned (DOT) pictogram set of fifty universally acknowledged icons. Other known and recognized sets of pictograms include laundry instructions and chemical hazard labels. Many of the well established pictograms are hailed for being universally understandable, crossing language and culture boundaries.
But other than the fact that even people from rural China understands the international symbol for ‘toilet’, what other qualities (and pitfalls) does pictograms hold?
So what are they good for?
Pictograms are in many ways the core of icons. They strive to communicate as clearly as possible by removing details and focusing on the simplicity of the likeness between a physical object and how they are most easily recognized.
This makes pictograms incredibly potent at delivering clear messages as long as the receiver understands the simplified representation. For the average designer, this means that if you’re looking for the most direct route to communicate a known convention – pictograms could be the right tool for the job.
Pictogram-styled icons are all about peeling away layers of details until the simplest recognizable shape remains.
Understanding Context
Pictograms have flourished in the physical world where the context of the message is obvious. Holding your sweater in your hand, the laundry instructions on the inside seems that bit more tangible. That little box with a circle inside crossed out, is fairly easily deciphered as being a warning that you can’t dry tumble this specific clothing item. The box with the circle obviously being a domestic appliance that dries your clothes through centrifugation. See, it’s all about context – the situation you are in helps you interpret the pictograms and their intended meaning. This becomes slightly more fuzzy when taken out of the physical world, which brings us to some of the pitfalls of pictograms.
With Context we can more easily decode the pictograms.
The spawn of a million pictograms
What we need to consider when opting for these simplistic solutions is how well the message will be carried in this style. While the established conventions for pictograms are easily identified in the physical world, the new age of digital conventions are constantly evolving and becoming more numerous. Designers and developers are finding new situations and functionalities where this style of communication is being applied. This basically means that we’ve gone from a few universally understood and recognized pictograms to hundreds of thousands of icons employing the same simple visual vocabulary.
We’re absolutely swimming in these today
In mobile and desktop interfaces as well as corporate branding we see these stylish flat icons reaching for new and fresh ways to illustrate a much wider range of concepts. This isn’t merely confined to the physical representation of objects interacting like many of the older pictograms. This new wave of simplistic icons embraces abstract concepts and multi layered conventions, covering everything from e-commerce to cloud computing. The fact remains that the sheer amount of icons in this style has severely diversified something that used to be very clear and easy to read.
We’ve moved away from the universally understood to much more complex conventions and abstractions.
When to be careful
With all these new and budding pictograms, the landscape has changed. The viewer will need to get familiar with a much wider range of pictograms and flat-styled conventions. This means that unless you’re communicating something within the very obvious digital conventions, you could end up confusing some of your users – especially if you’re trying to communicate something that’s out of the ordinary.
What makes pictograms so powerful is also what makes them so fragile. If you don’t recognize the image being depicted, the convention being communicated or the context it’s being presented in, the icon leaves you very little in terms of contextual hints. All it’s fidelity and details have been shaved away to make it streamlined to deliver a certain message. If the message fails, you’re pretty much screwed.
Why so popular?
Pictograms have seen a surge of popularity in modern interfaces, perhaps partly because our interfaces have grown more advanced and intricate. The simple shapes and subdued colors feel right at home in an interface that might otherwise be filled with content boxes, panes, rows of data and other control elements.
Notice the use of pictograms in modern interfaces. I bet there’s some in your browser right now.
In many ways, pictograms are incredibly easy to work with. You can add them to your existing design without causing too much of a disturbance. Often they are to the point and doesn’t attract attention away from the rest of your design. They certainly cater to the ‘helvetica generation’ of designers that enjoy clean lines and a balanced approach to visual hierarchy.
So what should you take away from this?
It’s not a new trend or a very surprising one. I’m sure one could argue that these icons aren’t even within the confines of ‘pictograms’ any longer, as most of them have moved beyond the universally understood. My point is not to stir debate on the naming conventions. I only ask you to consider the pro’s and con’s when choosing the best vessel for your communication. In some cases higher fidelity icons will do a better job of portraying a more abstract or out-of-the-ordinary convention due to the amount of contextual information build into the detail. Sometimes a clean and neutral pictogram will be the optimal route to deliver a well known message.
During my research i kept bumping into the official ISO 7001 DOT pictogram set. Below i’ve collected the authorized 67 pictograms from the standardized DOT pictogram set. I’ve gathered them in a single illustrator (and svg) file – they are under an open license so anyone can benefit from these. Click the picture below or here to download and use the conventions we all know and love.
If you made it all this way through this long article, why not tweet about it?