Icons are one of the most important elements in interface design, and they are also an essential skill for our UI designers. In our daily work, we often receive requests for icon design and optimization. But what exactly is a good icon? Perhaps many designers do not have a complete evaluation system, but only rely on their feelings, which will lead to undesired consequences such as unstable output effect and too long time-consuming. So I took this opportunity to sort out a set of evaluation system for self-inspection of icon design. There are five dimensions in total. The outline is as follows:
Identify
character
brand
full
detail
1. Identification
The value of judging a thing is what it is used for! The purpose of the icon is to help users understand the information, so "recognition" is the most important and bottom-level value of the icon. If you design an icon and the user cannot understand it, no matter how beautiful the vision is, it is a rootless tree and has no value. Word!
Recognition can be divided into two aspects, one is meaning recognition, and the other is visual recognition.
Let’s talk about meaning recognition first: in simple terms, it is whether your icon can be understood. Of course, it is not that the designer can understand it, but it needs to be decided by the user. Here I share with you a method for judging whether the icon is easy to recognize—— The internal user research method, to put it bluntly, is to ask some internal team members at random. It is best to ask a few more positions. The results obtained in this way are more reliable. The cases are as follows:
When I revised the icon of "Topic", I thought of the "#" of Weibo, so I combined "#" with the bubble box, as shown below:
At this time, I recruited 10 insiders to test, and only 3 could understand the meaning of the icons (these 3 people usually play Weibo), under such data, don't hesitate, this solution must be impossible taken.
When conducting research, at least 80% of the people must be able to understand it to prove that your plan is feasible.
Let's talk about visual recognition: as the name suggests, this has nothing to do with the meaning of the icon, but the visual level, such as size, background color and other factors that hinder user recognition.
Here is a foreign test result, which I saw in an article by a senior. The test includes a set of four styles of icons: black solid icons on a white background, black hollow icons on a white background, white solid icons on a black background, and black icons. The bottom white hollow icon, over a 10-day period, 1260 participants completed a total of more than 25,000 cognitive tests on the icon. Divide the obtained data into four groups for two-way analysis of variance. Under the same statistical conditions, the time for selecting a white hollow icon on a black background is 0.17 seconds slower than the other three combinations, which means that the information b2b data expression ability of this icon will be less. Weak, as shown below:
Therefore, under the support of such theory and data, I have revised some icons as follows:
All icons with a background color are changed from linear to flat. If they cannot be changed to flat (such as a clock), they need to be appropriately thickened and stroked to improve visual recognition. Remember, recognition is the most important value of icons, especially when there is no text description, you must not confuse users, otherwise you are consuming user experience, not empowering user experience!
2. Character
Just think: if a person has no character, then this person has no soul, and the icon is the same, without character, there is no soul. How to create our own character, we need to start from the user and the brand. For example, the users of Tencent Animation are all fans of animation and cosplay, giving people a cute and cute feeling, so we need to make the icons as round as possible:
Like the icon number 2 in the picture above, increase the rounded corners to make the icon look more rounded and cute. Based on such a user population, we also changed some of the original monochrome icons into the following colored icons:
The purpose is to make the cute and lively character of the icon more obvious.
3. Brand
Brand is the latitude that we often mention. There are many genes that are commonly used to extract brands, such as colors, graphics, mascots, etc. Here are two examples, one is the figurative brand gene - mascot:
We have our own brand mascot - Heizi, so we can use it in icon design.
To give another abstract example, extract the brand gene from the logo. Because the font strokes of the logo are relatively thick, it gives a heavy and full feeling as a whole:
Therefore, we can extract the "thick and plump" brand genes from the brand logo. Under such a background, there is no need to worry about whether to use a 2px stroke or a 3px stroke for the icon:
We can definitely use a 3px stroke because it fits both the brand’s DNA and the user’s personality (fat and rounded look cute).
4. Plump
Many times the icons we make are not refined enough, and one of the big reasons is that they are not full enough. How to judge whether the icon is full? My usual measurement method is to add a rectangle on top of the icon to see if the normal area of the icon can be increased.
For example, in the image below, blue is positive and red is negative: