Here’s what you need to know about Icons as an UX designer
Reflection point : Types of icons and their meanings
I’m sure you must have heard the phrase ‘A picture is worth a thousand words’. Because of how our brain is wired, we find it easy to perceive, process and recall visual information quickly than words. Our brain distinguishes images that we see and words that we read very differently and responds much better to picture stimulus. This phenomenon is explained by the Picture Superiority Effect. It is based on the notion that human memory is extremely sensitive to the symbolic modality of presentation of an event information.
From pre-historic cave paintings to hieroglyphs and cuneiform scripts, the evolution of communication for the purpose of interaction has developed from visual expression of ideas and actions through the use signs and symbols. Languages were developed through this process and is a learned function that humans developed over time to communicate visual ideas in written format.
Thanks to our fore-fathers, the modern day use of icons in digital interfaces is much like the signs and symbols that they developed as a communication medium. Icons visually represent an object, concept or an abstract idea in the most simplest form. They are visually engaging, quick to communicate concepts and hard to forget. They circumvent the obstacles of language barriers and spatial constraints. The use of icons is not only limited to our phones and computers; they are everywhere around us.
A quick observational study around your apartment can help you dig up hundreds of iconic representations in objects that you see and use everyday. Before beginning to identify, it is important to know the different types of icon classifications. Yvonne Rogers, director of the Interaction Centre at University College London in her article Icons at interface: their usefulness (1989), classifies icons into four different types -resemblance icons, exemplar icons, symbolic icons and arbitrary icons.
Resemblance icons are analogous and depict the objects that they represent. A quick tour around the house and I was able to find plenty of references for resemblance icons. For example, the display in the microwave oven had a multitude of touch capacitive buttons and each function accompanied a resembling icon with a label. In this context, the clock icon indicates time which needs to be set for each cooking cycle. The fan icon indicates the existence of an exhaust system (i.e for convection cum microvave oven), a fast pre-heat icon combining elements of a thermometer with a fast forward symbol. All these icons are simple, straight-forward and given the context, they are direct representations of their real world conventions and are easily relatable.
Exemplar icons are representations of a general class of objects or an object that represents the concept, usually of high complexity. At this point I’m neck deep in my kitchen finding icons in Tupperware containers!!. A cup and fork icon represents that the material of the product is safe to be used for food consumption. Here the object (cup and fork) is used as an encompassing signifier of the idea — food safety. In a similar fashion, the snowflake icon indicates that the product is safe for the use in freezer. Here the object has an associated relationship with respect to the meaning of the concept (snow is affliated to low temperatures).
Symbolic icons represent concepts that are higher level abstractions of an idea than what the image depicts. I found two icons in an old packaging box that were symbolic representations of the concept they signified and carried no direct meaning when viewed individually. The umbrella with raindrops symbol indicates that the packaging can be damaged when it comes in contact with water and hence it needs to be kept safe in a dry place. The cracked wine glass icon denotes that the contents of the packaging are fragile and hence need to be handled with care. In both these instances there is no physical interaction of an umbrella or a wine glass but are used as symbolic signifiers of the idea.
Arbitrary icons have no physical or analogous correspondence with the image depicted and must be learned to understand its meaning. I saw a few symbols in my modem that had absolutely no relevance to any wordly objects and were merely abstract shapes. The symbols used to represent power button, wifi signal and ethernet cable do not bear any physical or conceptual resemblance to their functionalities. Despite that, they are universally accepted as icons for what they stand for and are used across different products.
Takeaways
Icons are everywhere. They have been around since the pre-historic ages except with different terminologies. As times changed, the use of signs and symbols have evolved to meet the need of the hour. Today icons are heavily used in almost all digital platforms. They simplify our lives in ways we may not be consciously aware but is sub consciously imbibed in our knowledge systems. As UX Designers, it is important to learn about what icons mean with respect to the context in what they try to signify to create meaningful interactions.
References:
http://vanseodesign.com/web-design/icon-index-symbol/
