Use Icon They Said. It Replaces Thousand Texts They Said…
Did you know that a picture paints a thousand words? (You probably have heard this for like 1000 times)
Let’s try this game and think of 5 words this picture represents.
I showed this picture to the UX team on our weekly sharing day and asked them the same question. We got tons of words! Some of the answers are pretty similar like winter, December, Christmas, snow, and festive. Some of them interpret it as freeze, storm, cold, etc. It’s lots of words coming out from only a single static picture, right?
That’s why it’s now the rise of visual era. Because human brain understands visual information better. We process it 60,000 times faster than text.
Many top sites and apps are now built with this idea as the base. As you can see, portal like Pinterest and Instagram stay popular because they serve you visually pleasing (and infinite…) content. Airbnb also joined the game and was crafted so beautifully it looks like an art site. Digital marketing content, too, is always playing either with infographics or tons of icon.
But then we start to abuse the use of visual…
How did I come to that conclusion?
Let’s narrow the topic a bit and focus on the use of icon in UI. Most of us must have made icon our favorite kits. They help you save space, fast to recognize and overcome the language barrier. As if that were not enough, they are also visually pleasing.
Sometimes we enjoy having them too much that we overlook our users’ needs.
If you are a designer, you must have experienced (regularly…) this kind of request.
Can user understand? (Assuming they can see it…)
I doubt it.
Before making the same mistake when you decide to use icons in the interface, make sure you have familiarized yourself with this guidelines.
1. Ask people what they expect the icons to stand for
What do you think this icon stands for?
How many of you answered with Global, Worldwide, or Browser?
Too bad, it’s Facebook notification icon (app that most of us surf every single day).
Find out your user’s expectation first and test your design.
2. If it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning
Pretend that you need to replace your old TV and plan to get the new one online. You see this set of categories. Where should you head to?
How long you need to decide which category will have TV in it? If it took you more than 5 secs, the icon sets may have fail you.
3. Always include a visible text label
Even for general icons, they may still be misunderstood by users. Take this well-known heart and star icon. The functionality of these icons vary from site to site. That may end with user expecting one outcome and get different one.
4. Ask the user if they can remember the icon meaning
Adding icon to interface is such a satisfying moment, especially when it helps your site looking aesthetically pleasing. But sometimes, we use way toooooooo many icons.
Icons work well when it can grab user’s attention. Too many icons in one view may distract user’s focus, and they will only be a decoration rather than information. In a split second, user will forget the meaning of those icons.
Conclusion
We have to remind ourselves why we’re using icons and what is the added value of that extra icon in our design. Do we need it? Can user understand it?Do it explain correctly the information we are trying to say? Can it replaces those texts?
Cause a word itself is worth a thousand pictures.
Do you remember the very first picture of the post in which I asked all of you to think of 5 words which represents it?
What I actually wanted to express by posting that picture is
This is the most beautiful sight my eyes have ever seen T__T
It may only be one picture of street with snow, but everyone may have different interpretation. My feeling, though, will only reach you after I added those caption.
