— Understanding Iconography — The Icon Game

Alright. So we are going to play a little game.

I have four sets of icons, all taken from Japanese websites. Take a look through each icon set and write down what you think each icon represents.

Later on, I will translate (technically google translate) the copy associated with each icon.

GO!!

Locondo.jp (Online Footwear Retailer)

Origami.jp (Mobile Payment App)

Rakuten.jp (e-commerce)

Softbank.jp (Cellular Provider)

Alright. Now that you have your guesses locked in, it’s time to reveal the copy associated with each icon!





So how did you do? Some may have been pretty obvious, some not so much.

Going through this activity myself taught me some pretty important things about the use of icons in interface design.

Icons Need Copy

There are some obvious exceptions to this rule such as the search, cart, account and possibly even the favorites icon. These icons are so universal you do not need accompanying copy. Aside from the universal examples, if you do not have copy associated with your icons, your users will be guessing the whole time.

Icons Accelerate Interactions

One of Jakob Nielsen’s usability heuristics for interface design is flexibility and ease of use. The idea behind this heuristic is that accelerators can speed up the interaction for expert users but still be just as beneficial for new users. Icons can be very effective at accelerating user interactions.

Take for example the locondo.jp site. Something as simple as including an icon for quickly navigating to the Men’s accelerates the time it would have taken me to find the Men’s navigation label or filter. The other nice thing about this is that I can just click on the icon without even really thinking.

Icons Are Effective Main Navigational Elements

In most of the above examples, icons serve as main navigational elements. They draw attention and help the user connect the design and navigation of you product with their mental model.

Once a user knows what a navigational element does, they can go in auto mode and get done faster what they want to accomplish.

Icons Are Effective, Supportive Graphical Elements

Strategically placed icons serve as a great way to beef up the effectiveness of your information architecture. As discussed in the point above, icons effectively draw a users attention. When used as supportive graphics elements, icons can help evoke an emotional response to accompanying copy, or it it can help guide users to read the key messages you want them to read.

Well, that’s all I have for now. The exercise proved to be pretty insightful, it taught me the importance of using icons strategically. If you have anything to add, let me know in the comments. I am sure there is more to be learned from this activity.