Maersk icon library
Icons serve many purposes, but in digital user interfaces the most common are the following:
- Improve recognition and recall
- Overcome language barriers
- Enhance the aesthetics
- Draw attention to important parts of the UI
- Conserves display area by using icons instead of text
- Create a more unique brand experience
Four types of icons
One main challenge we face when working with icons is that while in some cases it is relatively easy for the user to interpret the intended meaning of an icon, in other cases a whole range of different meanings can be attributed to a single icon.
To help us understand why this is happening, we can turn our heads towards the science of semiotics and the different forms that icons can take. Yvonne Rogers, Professor of Interaction Design at University College London, has identified four types of iconic representation:
- Resemblance icons when representations are simple and concrete
- Exemplar icons when representations are complex
- Symbolic icons when representations involve well-established and recognisable symbols
- Arbitrary icons when representations are to be used as standards
By knowing the 4 types of icons, we can make more informed decisions on what icons to use and asses how effective an icon is in conveying the right meaning.
Visual representation
Whether an icon is easy to comprehend, not only depends on what type of icon is used, but also how close the icon is to what it should represent. The more direct the connection is between the icon and what it should convey (be it an object, operation, message etc.), the easier it is to understand and the more effective the icon becomes.
As digital user interfaces are maturing we are seeing that more icons are becoming “standardised” e.g. the use of the “burger icon” to represent a menu or the cog icon used for representing settings.
Add a label
It is always a good rule of thumb to add a label to icons to reduce misunderstandings - especially for icons where there are no common understanding of what the icon stands for and where a “standardisation” or best practice have not been established.
Consistency
It can be very helpful to have some guidelines around how to use specific icons within the same application and test how people understand the icons, so you do not end up using the same icon for different things and use icons that conveys something very different from what was intended. Icons that are used in the same application should also share a common style and colour for optimal performance.