webadviser.io

Usability: Well-designed icons ease recognition

Usability: Well-designed icons ease recognition

Source: WebAdviser

Icons in web and app design are extremely useful because they help users find their way faster. There are certain UX rules and principles that must be followed when designing icons.

But sometimes instead of easing recognition, icons confuse the users because of poor design, wrong color choice and too much details.

In this article, I will try to outline and give examples of well-designed icons that help users recognize and predict actions.

Visual meaning enhanced by text

When designing and using an icon, the most important thing is to have a clear meaning. The visual itself has to be immediately understood.

It can be even better for the users if you use corresponding text labels with icons to make the users grasp the meaning instantly.

Icon Usability - Visual meaning enhanced by text

Source: Google (screenshot)

Despite the fact that products are widely known, Google don’t rely on that. They follow the best practices in UX and have a clear text label below every icon in the menu. It helps users understand the information without any hesitation.

Simple and Clean

Although detailed icons are such an eye candy, it is better to keep them simpler and clean.

The more details an icon have, the less likely is for the user to get the meaning right away because they make the recognition process slower.

In web and app navigations, it is better to create and use icons that are stylized so that the meaning is clear.

It is worth keeping icons simple and clean for the sake of the different mobile devices emerging almost every day. Incomplex icons scale down better and look good at every handheld device.

Icon Usability - Simple and Clean

Source: SketchCleaner (screenshot)

SketchCleaner website features a section where all the features are explained. The single features are enhanced with a corresponding icon. Although the icons use color gradient and some of them are having lots details, they are clear enough and the users who are familiar with the software can easily understand the meaning of the feature even if they only scan the text.

Brand style and consistency

If your brand relies on icons to help recognition, you may want each and every icon to follow simple rules.When creating a website or app that is featuring a lot of icons, be sure that you establish the style at the very beginning.

Consistent approach to icon design and style will be very helpful when your app or website grows and new items or pages are added in the long term.

Brand style and consistency

Source: Airbnb(screenshot)

Airbnb are one of the greatest examples of companies with outstanding design, style and brand consistency. In their accommodation listings, they have an “Amenities” section which shows details about the place. As you can see at the image, the available feature is enhanced with a simple line icon together with a label next to it. On the other side, the features that are not available are crossed and in a lighter shade of gray. By doing that, they allow users to focus on what is available right away.

Opt for SVG file format

Using icons in SVG format is something you should consider. Unlike PNGs or JPEGs, SVGs look sharper on every device and allow JavaScript and CSS style manipulation.

Another plus is the fact that SVGs are smaller in size, so you keep the website pages and app with lots of icons smaller so that they load faster.

Usability testing

Alongside with great design, icons have to be tested in order to check if the serve their role and purpose. It is very important for the icons to be associated with their functionality.

You can test the icons with a group of users and see if they meet their expectations. It can be a group of people within your company that are new to the website or app design.

By doing usability testing, you will know if the icons are appropriate and if there’s a need for improvement.

Do you need custom icon design? We can help you! Contact us to get started.

No time to get the job done?
We have plenty.