Rustam K. Lead Designer

How to improve an interface with icons

Icons are found in every interface and for good reason. If they are designed and placed correctly, they can help users to quickly find the necessary information and improve the UX.

Types of icons

Static

They are used for navigation and reinforcing information, they save the user's time and are a great help for those for whom the interface language is not native. For example, by the familiar symbols a user will quickly understand that the support service works 24/7, there is wifi in the hotel etc.

It is important not to confuse the user with incomprehensible icons, whose meaning is clear only to the designer.

Interactive

They are used to indicate an action in the interface. For example, the icon "cart" or "bag" suggests that you can go to the list of unpaid items, and the icon "magnifying glass" means that you can make a search.

It's important not to mislead users with the purpose of the icons. For example, in different services the same icon "heart" can mean "like" and "add to favorites", and the icon "star" - "add to favorites" or "recommend". To simplify the UX and interpretation process, you can add text next to or below the icon.

Functions of icons

Giving visual personality. A set of icons that are used on all sites of the brand and when it is mentioned - are remembered.

Saving the user's time. Human brain processes images faster than text, so icons make it easier to find the information you want.

Saving space. Instead of long descriptions, one icon is enough. Also with the help of icons you can ergonomically place and structure elements which are too numerous in the navigation menu.

When developing icons, it is necessary to take into account several important points:

Icons should be understandable. So that the user doesn't have to think about what they mean.

They should be placed in the expected places. For example, on the website, the cart or feedback button are automatically looked for in the upper right corner. In apps it's customary to see them at the bottom of the screen.

Icons need to be approached holistically, as a system with a specific task in the interface and try to maintain their unity and balance. They should blend in with the entire graphical system that you use, have the same visual weight, color, line thickness, style and be the optimal size for different devices.

If you follow these simple principles of UX/UI design, then icons will be a decoration of the interface, and not a reason for users to be perplexed.