Do you know the Meaning of these Icons? -Tips and Unconscious Mistakes when using Icon for better UI

Understanding the theory of user interface is one of the keys to effectively leveraging digital in any business. Using icons instead of many words is an effective strategy to make your apps or documents user-friendly.

The benefits of using icons in graphical UI include:

• Faster to recognize: readers can know the meaning by looking at icons much faster than by reading texts.
• Saving space: You can arrange more information in a limited space, which helps users save time and effort of swiping/scrolling the screen.
• Universal understanding: People from different languages users can understand the meaning without translating the original texts.

We should be aware that there are some crucial tips for effectively using icons.

1. Clarity: When you choose the metaphor, be aware that icons easier to understand are better
2. Readability: When you are confident that the icon is clear enough, you should check if the icon is easy to read. Simple icons with fewer lines have better readability.
3. Alignment: You may know the famous rule of making good documents. Alignment reduces noise for understanding. One thing that can be added is that you should use your own eyes for alignment. Even when the parts of an icon are equally aligned, you may feel they are not aligned well because of human cognition. In such cases, you should follow your eyes.
4. Brevity: Minimum but understandable design is the best.
5. Consistency: Consistency of styles and tones of icons in a single app reduces noise.

Even after taking care of the common rules, we should know a possible generation gap that makes some symbols meaningless for some people. When you google “save icon,” you may find the icons of a floppy disk. We can find these kinds of icons on many software such as Microsoft Excel. These icons help us intuitively understand that “you can save data by clicking /touching here.” Wait, is this obvious for any generations? The answer is no. Many of those born after the 2000s have never seen real floppy discs.

Another example is the icon of a camera. One of my friends told me that her child does not recognize the camera icon because the shape of a camera for her is a smartphone rather than the shape of traditional cameras as we know.

This kind of gap may happen geographically and culturally. For example, when you see the icon of “〇✕” in a Japanese application, “〇” means “good” or “correct” while “✕” means “bad” or “wrong.” This kind of cultural difference can be another source of confusion.

So, how should we deal with the difference of common sense and choose/create more durable icons? First of all, we should not assume that what we think is obvious is not necessarily obvious. One idea is using a more general shape rather than using too specific products. Concepts at a higher level do not change even after the release of new products. Anyways, it should be fun to find common but too classic icons with your friends!