Terminology
Usage
Currently EcoOnline’s product suite is filled with icons. Icons when used to excess begin to lose meaning to the user. Not everything needs an icon!
When using an icon, ask yourself:
- Do you really need one and why? Have you tried other ways of drawing attention e.g. font size or weight, colour and or spacing. If it takes you longer than 5 seconds to think of an icon to use or if you’re questioning an icon’s use, it probably doesn’t need to be used at all
- Is it clear what that icon means? If it is obscure or vague as to what the icon is or represents then it can be confusing and led to mistakes and user frustration.
Don’t overuse icons…redundant icons lead to visual clutter and increased cognitive load. Remember “less is more”.
Consistency
Be consistent with your icon usage to avoid creating confusion for the user. If you apply a meaning to an icon that meaning should continue into all areas of your product.
Be consistent with the icon used for the "action".
Don't use different icons for the same "action".
Icons and Text
If an icon is required, aim to pair it with text following the guidelines for Buttons and Calls to Action.
You may think that an icon has meaning or communicates intent, but to the user with no familiarity of the image it means nothing. Associating meaning with an icon takes time and repetition from the user, text helps to reinforce an icon's meaning.
Consider why you’re adding an icon to a button. Is it needed?
Does it add more recognition to the action or is it more decorative? Would it still work without it?
Only remove text from icons when you are confident that the user understands its purpose or you are limited on space. When there are lots of ‘lone icons’ it becomes difficult for the user as if interpreting hieroglyphs.
Icons can represent a single concept such as + which always represents ‘add’, or be thematic in concept such as star which might represent "favourite", "like", "rating" etc. Using an icon appropriately allows our users to create a connection to a concept, so don't over-extend what an icon represents.
Don’t use ambiguous icons without text, as it can lead to confusion and misinterpretation.
Common Actions
Common actions like Edit, Search and Delete are associated with icons that are universally understood. They can be used on their own if required, for example - limited space, repeated items or screen size.
Provide enough space to separate Actions from one another.
Too close can feel cluttered and lead to visual noise and confusion.
In the example below, both implementations are fine. Whether it’s in a button or a list/menu consider the action or the “verb” (Add, Edit etc…) and what it relates to. Standard actions will have recognisable icons that, if an icon is required, it is recommended to use. But in different contexts (often Add actions) it might be a better solution to use an icon for the related item, as long as it is clear what that icon represents.
The Action icon has been used instead of a + as there is an Actions module that the user will more likely make a connection with.
Grouping with Icons
To help reduce the number of icons in your product remember that you can use an icon for a category or group too.
Designing with Icons
Sizing
Be sure icon size is consistent throughout your product. In general, consider the context of the icon when choosing the size such as the size of other icons surrounding it and the balance of other UI elements.
Icons have been designed to work best in four sizes:
16px and 20px
16px and 20px icons are optimised to feel balanced when paired with 14pt and 16pt IBM Plex
24px and 32px
Use 24px and 32px when larger icons are needed, for instance to align with larger text or elements.
Colour
When pairing with text and they need to be the same colour, use color-text-… tokens for the icon and the text.
Text tokens may be darker to meet 4.5:1 AA text contrast ratios. Icon tokens may be lighter as they only need to meet 3:1 non-text ratios.
Position
Icons generally should be placed to the left/start of its text. Times when this is not the case are things like for Navigation (Next or “Opens in new tab”) or Disclosure “Select or Dropdown”.
