Tips and Guidelines for Icon Usability


Keval Padia

There are icons everywhere around us, be it smartphones or websites or software. Not only online, but even the offline world is filled with icons. Some of these icons like play, pause, and print are so common that don’t require any additional explanation.

We know exactly how they function. This is the most common aspect of a design or an icon- usability. The main objective of usability design is to help a user in achieving their objective quickly and easily.

Also Read: Basic Tips on Designing for Mobile Augmented Reality

Benefits Offered by Icons

  1. Space. Icons help in saving a lot of space. This is important especially for platforms like smartphones where the use of an icon can save some space. As it is there is limited screen space on a device like a smartphone.
  2. Recognizable. Icons are easy to recognize. Making use of common icons in a design will help the user in instantly recognizing them. This also helps largely with tasks and navigation.
  3. Touch Target. Icons are good as they make the perfect touch target. The standard icon size for any device is 1 cm by 1 cm. This can make the icon an ideal target which can be easily tapped by your finger.
  4. Universal. Icons don’t need a language, they themselves work as a language. Icons are very easily understood even if the user doesn’t understand or speak your language.
  5. Aesthetics. Icons are also more aesthetically appealing than text. A well-designed icon will definitely improve the look of a website or an app and make it more aesthetically appealing.

Common Mistakes

When there is a mistake made while designing an icon, it can affect the user experience. The biggest mistake is making an assumption that your user will understand the meaning of a particular icon. Some of the common mistakes that caused usability issues are as follows:

  • Using an icon that doesn’t convey the right meaning or using an unrelated icon.
  • Not having enough space for icons on smartphones.
  • No corresponding text labels with the icons.
  • Being way too creative and compromising the recognition aspect of the icon.
  • Not using a commonly recognized icon.
  • Adding too much graphic detail to an icon.

Types of Icons

  1. Universal Icons. There are few icons that have universal recognition and can be easily recognized by users all over the world. For example, the symbols for home or print. But these icons can have different meanings based on the interface.
  2. Icons with Conflicting Meaning. Using a commonly used pictogram will often cause trouble. These two icons compete with each other and the functionality of these icons differ from app to app.
  3. Unique icons. Icons are usually not strong visual representations and can often be bad for anything abstract.

Guidelines for Avoiding Common Mistakes

  • Familiar icons will work far better than trying to reinvent the wheel and bringing in a new icon.
  • Make use of icons in order to save space. This also improves recognition in toolbars and navigation.
  • The icons you use must be quick to recognize. Use icons that have been used before.
  • There should be no experimentation with the file type icon for file downloads.
  • An icon should always communicate something. Do not overuse it or just use it only for decoration.
  • If it takes more than 5 seconds to think of the icon you used, forget about it. It won’t work.
  • Make an icon simple and familiar as it must communicate the function and the actual purpose of the icon.
  • The space around the icon must be 1cm x 1cm for easy tapping and legibility.
  • Icons are good targets for devices with limited space.
  • The icons must be consistent and close-knit.
  • Always make use of labels for icons.
  • A user must be able to tell the use of an icon without a text label.
  • Avoid any icon that could represent multiple meanings or conflicting meanings.
  • The “heart” and “star” icons must be used carefully as they can confuse the users.
  • Make minimum use of complex shapes and graphic details.
  • The shapes and colors used must be distinct that would help the user recognize the icon.
  • Do not use similar icon for different purpose and a different icon for a similar purpose.
  • If you are ever confused, remember that the best icon is a text label.

Wrap Up

In the article above, there are tips and tricks and also UI/UX guidelines that many newcomers can go through and learn. This is important as UI/UX is one of the major and basic things in the development of an app.

Related Post

Better UX/UI Design Can Improve Your Engagement in 2022
06 Jan 2022173 Views

How Better UX/UI Design Can Improve Your Engagement in 2022?

Have you ever visited a website trying to purchase a product but then quickly left because the check-out process was too complicated? Well, that...

Difference Between a Sketch, Wireframe, Mockup, and Prototype
18 Aug 2021273 Views

What’s The Difference Between a Sketch, Wireframe, Mockup, and Prototype?

A sketch, wireframe, mockup, and prototype are all very different things, but they are all interconnected. These are very similar exercises that...

Rounded Corners on Buttons
12 Dec 2018190 Views

Do Rounded Corners on Buttons Make Sense?

Every few months, the user interface and user experience design have some or the other kind of advancements and those advancements become the...