Tips and Guidelines for Icon Usability

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.

Website Icons

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.

Top-6 Website Design Mistakes Every Designer should Avoid

While designing an app, you must consider a few things like whether it reduces your cost of marketing and operations. Read more

Top 8 Wireframing Tools to Help You with Your App or Website

The process of creating an app or a website becomes much easier with wire-frame tools at your disposal. The website Read more

Measure and Improve your Apps User Experience Using Google’s HEART Framework

Designing and developing a user experience is not as great as data-driven UX design. The concept of UX helps us Read more

Keval Padia is the founder & CEO of Nimblechapps, a fast-growing mobile app development company. The current innovation and updates of the field lures him to express his views and thoughts on certain topics.