Icons: The Realm of Pictograms & Ideograms

AUTHOR: Sean Copping-Rice, UX/UI Design Consultant

Pictograms and ideograms, more commonly known as ‘icons,’ are one of the most widely used forms of communication today. We interact with them, both in the real world and in the digital world. In fact, they are one of the oldest forms of recorded communication. Their roots can be traced back almost to the very beginning of time; early cave paintings and later Egyptian hieroglyphics. These people already knew that communication is more based on what is seen than what is written.

UX/UI designers use icons to share clear messages and to help a user to navigate a website or app. This is reminiscent of how road signs support a driver on their journey along a road.

The  language and design of icons  is a clear, concise message that is quickly decipherable, accessible and requires little thought on the users’ part. A UX designer therefore knows that icons need to be kept simple and obvious so that their interpretation is not only meaningful, but also consistent to all who encounter them. Icons that are already within a users’ frame of reference can be decoded even more quickly and, therefore, effectively. A UX designer needs to create icons with this in mind; that the pictures immediately and almost intuitively carry purpose.

This idea of simple, concise and crisp design is not easy. Many may fall into the trap of over designing, which would result in a format that feels cluttered, confusing, too busy and open to many interpretations.

Coco Chanel, herself an iconic designer, advocated the use of this restrained and streamlined simplicity in order to create timeless, classic clothing. Whether or not these are her exact words remains to be seen, but Madame Chanel has become associated with the advice, “Before leaving the house, a lady should look in the mirror and remove one accessory.” Her sentiment applies not only to garments and style, but to design overall. It is recommended that a designer reflects and evaluates what they have created, then remove that which is unnecessary or superfluous. In the case of visual icons, this is even more pertinent. Designs need to be reduced and streamlined, provided that the power of the message is not lost.

My own background is as a digital and graphic designer. I’m expanding my skills by venturing into the UX field. This makes for a natural evolution because I’m already familiar with logo design, themselves illustrations which deliver explicit or implicit instructions. UX is exciting because it allows for designs to be assessed, like a trial run, and then adapted or adjusted before being incorporated. How the design is received directly informs alterations. This is different to work as a digital and graphic designer where what is created is based on an assumption or interpretation of a brief from a client. The recipient of the message, in UX, is pivotal to the process and is as valuable as the creator  responsible for commissioning the design. Testing and analyzing the icon is important to see how users interact with, and respond to, the design.

In the wrong place, or poorly designed, an icon loses its power and can become confusing, or worse, offensive. This can be proven through the example set by Facebook. Facebook decided to add more reaction options to its posts. When there was only the “Thumbs up” option, and someone mentioned something distressing or sad, the thumbs up could seem unkind, punitive or downright hurtful.

Icons are small symbols used on a web or mobile user interfaces (UI) to help guide and support usability, and interaction, by graphically representing a concept or instruction. It is valuable to distinguish between pictograms and ideograms, which are both forms of icons.

Pictograms are simple representations of actual objects. These can be perceived through the senses: see, hear, touch, taste and smell. If designed clearly, anyone should be able to understand instantly what it represents.

Examples of Pictograms:

Ideograms on the other hand, represent abstract ideas. They don’t exist as tangible items and therefore escape the 5 senses. Ideograms emerge through public consensus. The majority of people will take it as understood what the ideogram means. Ideograms are usually graphically displayed as lines and shapes.

Examples of Ideograms:

An easy way to remember how to distinguish between a pictogram and an ideogram is to think of the first letter of the word. Picto = picture. Ideo = idea. Modern society, however, does not always distinguish between one or the other. Often the two are merged. One of the most obvious examples of this combination is the No Smoking sign.

In the digital age, we are increasingly using more and more icons to save space, and say more with less, in a shorter space of time. Take emojis, for example. These popular little facial representations instantly convey something as complex and nuanced as emotion.

When creating icons, the basic SMART Icon Guide can be invaluable.

  1. Is it Simple?
    Can you simplify it further without losing its meaning or message and is it not overloaded with non-essential graphics?
  2. Is it Meaningful?
    Does its message fit within the context of its placement and inform the user?
  3. Is it Appropriate?
    Is its meaning consistent and/or does it have alternate meanings?
  4. Is it Recognizable?
    Is the symbol familiar to the user and/or can its meaning be easily decoded?
  5. Is it Thoughtless/ Teachable?
    Is it intuitive to the user and requires no higher order thinking on their part? Or, if the icon is completely new, can the user grasp and interpret its meaning quickly?

References:

http://www.wearemsd.com/blog/pictograms-ideograms-icons-logos

https://wikidiff.com/pictogram/icon

https://penandthepad.com/difference-between-pictograms-ideograms-8434995.html

https://www.noupe.com/design/the-emergence-icons-pictograms-58839.html

https://www.usertesting.com/blog/2015/08/04/user-friendly-ui-icons/

https://elementary.io/docs/human-interface-guidelines#human-interface-guidelines

https://uxplanet.org/small-elements-big-impact-types-and-functions-of-ui-icons-87c6a74d366e