What are the guidelines for icon design in UI?

Icons are a visual representation of an object, idea, or action. In a graphical user interface (GUI), icons must convey meaning and brand image and be visually appealing. The figure below shows different types of icons on a phone’s home screen.

Guidelines for icon design

It is helpful to do research and try using standard icons or icons that are commonly used. If users are already familiar with icons, they will find it easy to use your interface. However, if you must design new icons, the following should be kept in mind:

• Use the 5-second rule, i.e., if it takes you more than 5 seconds to think of an icon to use in a situation, it is likely that the icon will not convey meaning.

• Test the recognizability of icons by asking people what they think the icon stands for.

• Test the memorability of icons by asking users if they remember what the icon stands for few weeks after they were initially shown the icon.

• Keep the design simple by avoiding too many graphic details.

Universal Icons

Although universal icons are rare, a few icons have made their way to being universally recognized, such as home, search magnifying glass, etc.

Some icons are still struggling to become universally recognized. While the envelope icon is usually used for email across the world, a few old interfaces used it for text messaging. This leads to users who shift from old phones to new phones getting confused. Another example is that of the three-line hamburger icon, which is usually used to display the menu. However, some interfaces use it for other purposes, such as displaying lists.

A commonly misunderstood icon is the heart. The icon is used both for liking something as well as adding something to favorites or lists. The star icon is also used to add something to favorites. This often confuses some users.

Text labels

Icons need a text label regardless of how well they convey meaning. Only a few icons are standard icons and are understood by everyone. Therefore, it is safer to include labels to avoid ambiguity. Even standard icons must have a label to eliminate any chance of ambiguity for new users.

Icon labels should be visible at all times and not only when the user touches or hovers over them. This will increase the interaction cost and thus provide a poor user experience.

Relative size

We must keep in mind that an icon that is visible and grabs user attention on a mobile screen should do the same on a desktop screen. If the size of the icon on both screens is kept the same, then the same icon would capture approximately 20% of the screen space on a mobile phone and 3.5% on a desktop screen. This means that the icon will not get the required attention on the desktop. A probable solution would be to remove the icon from the desktop and show the open menu in case of a menu icon and change the relative size in other cases where this is not possible.

Conclusion

Icons are an essential part of an interface and help improve user experience. However, a poorly designed icon confuses the users and does more harm than good. The first priority should be to ensure that icons convey meaning, followed by ensuring that they are aesthetically pleasing.