When is it the Right Time to Use Icons?

When is it appropriate to use icons in your application? This is a decision I always have to make when creating a complex application. There are several key factors that you can use to support your reasoning for utilizing icons. It’s important to know why to use icons over some other method. What things should you avoid when creating icons and what should you do to create potentially successful icons.

Why Use Icons?

First a brief synopsis of why you may want to use icons.

• Icons are meant to increase the speed of visual scanning
• Icons should be the same size and used consistently across your application.
• Some icons are so recognizable: print, save, it becomes common sense. Frequently though when building a new application you will find the need to develop your own icons based on new functionality.

So how do you know when to break out the design tools and create some new icons? Here are some common indicators that let you know it’s time to possibly look at branding icons across your application.

When To Use Icons

• The functions you are representing are common and existing mental models. Icons that fall in to this category include print, save, pdf etc.. Pretty much everyone on the web can identify a print icon and understands that something is going to get printed when clicked.
• If space is tight in your application and future implementations may make this problem worse. In this case you really need to look at the application as a whole (we will be doing this in later examples) and identify similar functions idea for icons.
• If using an icon would help spatially an visually withlearn ability. An example of this would be if there are many secondaryfunctions in your application in the same area. In this instance too muchtext even if the text clearly states the function can hinder the visual recognition.

Studies have proven humans can recognize pictures faster then text.

Things You Should Do With Your Icons

• Do make all your icons similar across your application or brand
• Do make all your icons adhere to the same size when in proximity to other icons.
• Do use size in order to emphasize function prominence or importance
• Do use standard icon sizes 12 x 12 16 x 16
• Do make sure icons mean something
• Do test your icons & icon sets to make sure users can quickly identify the function

Things You Should Never Do With Icons

• Do not make icons blatantly different in the same applications or brands
• Do not over use  icons purely for decoration
• Do not use icons if you are unable to visually depict the function
• Do not change functions of an icon across your application or brand.

Are You Convinced?

Hopefully you have a quick idea about when you should use icons. There is no cut and dry path, but the guidelines above will help you to identify icon requiring situations or solutions.

Related articles:

1. How Can I Speed up Proto-typing & Visual Design Mocks with Hybrid Design Proto-typing?
2. Which Widget is the Right Widget for My Application Design?
3. Did You Know Paper-Prototyping Adds Value If Done Right?
4. UI Design Series 1: Web Application Design Where’s The Vision? What’s The Value?