Why are icons important in user interface design? What tips and principles should the user interface designer consider in the design and selection of icons?
You must have heard that sometimes a picture says a thousand words. This can be said about designs and pictures. That is, sometimes a design, shape, symbol or sign can convey a world of meanings and concepts to the viewer in the shortest possible time. The best example is traffic signs, which almost all of us are familiar with and understand as soon as we see them.
This important feature of shapes, symbols, and images is used in product design, especially product user interface design. In the UI/UX design of sites and applications, it is important to help the user have a satisfactory interaction with the product. There is no other way to build that interaction except with the help of UI elements.
Icons are one of the most important elements in product user interface design. This is why the UI designer must follow the principles and pay attention to some points in the design and selection of icons.
In this context, the two questions that were raised at the beginning are answered. Also, the most practical and important tips and principles that every user interface designer should know about choosing icons are discussed.
Table of Contents
Icon selection in UI design
The job of a user interface designer is to design user interaction interfaces with websites and applications (buttons, types of menus, icons, etc.). These are the interfaces that allow the user to take an action (such as buying, paying a bill, or downloading a movie) that he wants to do in the product. If the UI design is not done properly, the user’s overall interaction with the product (user experience) will be disturbed and he will leave the website unsatisfied.
The importance of icons and icon selection in UI design lies in this point. Icons are attractive and very quickly and easily direct the user to do something (interactive) or find a part of the website. In other words, icons make it easier for the user to interact with the product. In addition, they occupy less space on the screen and can be animated to attract more attention from users.
Types of icons in the user interface
Icons are divided into three categories:
- Universal icons: icons such as the magnifying glass icon that all users know and that give meaning and concept in every part of every website that is used.
- Unique icons: icons that are designed specifically for a product and users do not recognize them. Users should learn their meaning in interacting with the product. For this reason, below the unique icons, there is a short text explaining them.
Ambiguous icons (Conflicting icons): icons that have different meanings and concepts in different products. On a website, the heart icon may mean “add to favorites” and in an application (Instagram) the heart icon means “like”.
4 practical tips in icon design and selection that every UI designer should know
The task of the UI designer is not to design graphic elements. That is, iconography and icon design are usually not the work of the user interface designer. Although some UI designers may have the ability and skill to design icons, this task is usually left to graphic designers. The main task of the user interface designer is to choose the most suitable icons for the product.
Many icon packs contain up to several thousand ready-made icons. UI designers usually use these packs and choose the most suitable generic and obscure icons for the product. Not all products are as big and complex as websites like Amazon that need unique icons. However, user interface designers should observe the following points and principles in designing and selecting all three types of icons for a product, which are an integral part of the user interface and product user experience:
1. Icons should be clear and legible
Users should see and understand the icons on the screen at a glance. Icons are small visual elements. Therefore, they should have a clear design and be placed somewhere in the product where they can be easily seen. That is, they should not be affected by the size, color, or movement of the adjacent elements on the screen and get lost. In addition to clarity, unique icons should not be too busy or elaborately designed.
The clarity and readability of icons are important because it has a direct impact on conveying the meaning of icons to users.
2. Icons should be simple and familiar
Designers should choose the simplest and most familiar icons for users. If the shopping cart icon or a light bulb is to be chosen among different designs, you should choose the simplest and most similar to the shape of a shopping cart or light bulb in reality. Here, simply means few details and no special style.
3. Icons must be aligned
An icon may consist of several components. For example, the icon consists of a circle with a positive inside. Now, what happens if that plus sign is not exactly in the middle of the circle? First, it looks asymmetric and ugly to the user, and second, it confuses the user. The user does not understand what this icon means and whether there was a special reason that the positive sign was not placed in the center of the circle and was tilted to the left or right.
4. Icons should be compatible with the overall design of the product
The UI designer should not forget that icons are one of the visual elements of the page and are supposed to complete the product design and be placed next to other elements. So, the designer should not be selective in choosing icons. It should proceed in full coordination with the product design and product design team. The UI/UX design should be uniform throughout the product to maintain the integrity and coherence of the product and to ensure that the user’s interaction with the product is satisfactory.
Therefore, the user interface designer should choose icons with consistent features and styles to be used throughout the product. That is, the icons of the home screen cannot be black, without shadow and hollow, and the icons of one of the pages can be gray, shaded, and solid. This is why system design is used to design the UI of products such as Google and Apple. When the selection of icons is based on the design of the product system, their uniformity and compatibility are guaranteed.