February 26, 2014

116 Views

How iconic can be your UI?

Invariably, everybody knows what J means. The SMILEY. Wouldn’t chat messages seem odd if you replace the smiley with words?

Importance of Smiley
 Illustration: Balakrishnan R

The Smiley icon really saves such awkward conversations.

Icons and User interfaces have almost become inseparable now. As a designer, I like to create icons and as a user, I like to use them.

We learnt to see before we learnt to read

People have always been in love with pictures. Pictures tend to attract more visual attention than words and we tend to remember visuals better than words.

What do you visualize when I say ‘a computer’?

Computer picture versus Word
Illustration: Balakrishnan R

Obviously, the picture.

It is a very well-known fact that users do not like to read and icons ensure that they don’t have to. Those few pixels convey much information than several lines of text.

You don’t need to be a da Vinci to create icons

Designers absolutely love creating icons, but unlike paintings, icons are not created to show a designer’s artistic talent. If the users do not understand what the icon means, however beautiful it is, it serves no purpose. Icon definitely needs to look good, but should not end up just as a pretty picture.

In the same way, icons are not puzzles. Designers try to be creative when designing and come up with an extraordinary idea, which only they may understand. This is where logo design differs from icon design. It really excites me to create new concepts, but then I understood that there’s really no need to reinvent the wheel. There is no harm in using an icon that everybody is familiar with. The more simple and familiar the icon is, the better it is. It is even more evident when we look at the shift of the design trend from skeumorphism to flat design. With the introduction of iPhone, designs were exactly mimicking the real world with realistic textures and objects; but now the minimalistic and flat design approach is gaining momentum.

How iconic can be your UI?
Well-designed icons can communicate universally. You can even say that they reduce the cost by eliminating the need for translating the text. Best example could be signs on International Airports, which needs to direct people from different cultures and speaking different languages.

Icons can save a lot of space on your UI, which otherwise would have been a text marathon. It gives the elegance to the interface.

I have been all praise for icons. Does it mean that icons can replace every word on the UI? No. Sometimes, icons cannot substitute words. ‘OK’ can be understood by everyone universally. You don’t need to replace it with a P tick mark. It almost occupies the same amount of space. It really serves no purpose. In fact, a tick mark means ‘wrong’ in some European countries.

I have absolutely no idea what some icons on my old DVD remote means. I don’t really use them. You don’t create icons just because you can.

In some projects I have worked on, the requirement was to revamp the UI and improve the usability but all they thought they needed was to create beautiful icons. Icons, by themselves do not improve the usability. You cannot make a bad website usable by having good icons.

Icon and words aren’t rivals. Research shows that when icons and words are used together, it aids faster recognition.

With UI design getting simpler every day, it is important that we understand the role of icons. Icons have a really important purpose in the UI. Unless the icon serves a purpose, it is just a pretty picture.

References

Horton, W. (1994). The icon book: Visual symbols for computer systems and documentation. USA: John Wiley & Sons, Inc.
Weidenbeck, S. (1994). The use of icons and labels in an end user application program: an empirical study of. Behaviour and Information Technology, 18, 68-82.
Retrieved May 21, 2013, from Wikipedia: http://en.wikipedia.org/wiki/Tick_(check_mark)
Gócza, Z. (n.d.). Retrieved May 21, 2013, from UX Myths: http://uxmyths.com/post/715009009/myth-icons-enhance-usability