Bookmark and Share

Making Your Web Icons Usable

Blythe Langley
Designer

Make your icons recognizable.
I bet when you look at the three icons above, that three distinct things come to mind in terms of the Internet: home, email and print. These are three examples of universally recognized web icons that can be used in a graphical user interface design within your website. How does something become universally recognized you ask? Exposure, the more you see something visually associated with an idea or something verbal, the more you continue to associate the two naturally within your brain. Our minds have been so constantly exposed to these visual images on the Internet and the purpose they serve, that it has become natural for us to associate the visual image with the functionality behind it.

Use text for support.
If you are looking to use icons that are not universally recognizable, this is a good opportunity to use text for support. The last thing that you want to do is confuse your user within your graphical user interface, prompting them to click all sorts of random buttons, only to eventually get confused and leave your site. “Easy to use” is a key component to a successful graphical user interface design. This is usually accomplished with a simple rollover of the mouse.

The question mark icon is widely used across the Internet, but it doesn’t always mean the same thing for everybody. A “?” to some people may mean Frequently Ask Questions, where as within other graphical user interface designs it may direct the user to the “Help” or “Support” area of the site.

Although the areas are related, they may not be the same across all user interfaces, highlighting the opportunity to support your icon with text.

Always use in moderation.
Although icons are fun and can be visually pleasing, too many icons within a user interface design can become confusing and often times overwhelming. Much like the downfall of a user clicking on an icon where they are unsure of its functionality, if there are too many items to click, users may find themselves being taken to different parts of the site they were not searching for. Keep your icon use in moderation to avoid confusion and it will be easier for visitors to navigate within your graphical user interface. The easier it is to navigate, the happier the visitor will be.

Be creative.
Although your icons should be universally recognizable, it doesn’t mean that your graphical user interface design has to be boring and look like every other site out there! Be creative with your icons while allowing them to maintain their ability to be visually recognizable.

Perhaps your icons have a three-dimensional quality to them or have reflections that appear on the background of the site.

Don’t feel as though you have the throw every bell and whistle that exists at them either. Just make sure they are true to the overall look and feel of your site and your brand identity and they support the message that your website is presenting.

Create a family.
The icons on your site should not only support your overall brand identity look and feel, but should also feel like a family. Use consistent colors, style and treatment for all your icons. Consistency across your icons will help your users recognize them easily and be able to distinguish that they are icons representing a certain function.

Consistency.
It is equally important that your icons remain consistent in functionality. If you are using the same icon more than once within a site, it should always be representing the same function. The same is true in the reverse. If you are using an icon to represent the same function in multiple areas within your user interface design, make sure you consistently use the same icon. As mentioned earlier, consistency across your graphical user interface design will help your users to identify icons/functions that will aid them in being able to easily navigate within the site.

Interested in creating effective web icons for your site. Contact us!

Tweet This | Share on Facebook | Digg This