Monday, January 18th, 2010
The use of icons has run rampant on websites today. Their ability to relay information using reduced real-estate, availability of augmented bandwidth and overall appearance are some of the major influences. However, icons may not always be the best solution. Sometimes they are confusing to users and cluttering web pages or may even go against the web 2.0 philosophy of ‘less is more.’ In this article, I’ll attempt to share my opinion and some ideas on the matter; please feel free to comment.
First let’s establish some pros and cons for icons and then see how they apply to different web solutions:
Pros:
- Great real-estate to meaning ratio (a picture is worth a thousand words)
- Help to establish a theme or look
- Re-enforce branding
- Can be language independent
Cons
- May confuse user, or the meaning might not be apparent. (they may not think of the same thousand words…)
- Requires more tech savy to comply with accessibility rules and remain search engine optimized.
- Icons on websites
The tendency is to use icons to brighten up a site or provide a variety of links in a small amount of web real-estate. However, designers must take into account the variety of traffic that could come across their site given the reach of the internet. A website’s traffic may vary in culture, language and internet experience. The meaning you’ve implied may not be apparent to your users, thus its important to choose wisely.
Therefore, correctly using Icons in website design takes considerable thought. There are a very select set of icons that are somewhat standard on the web: a magnifying glass for search; a house to represent the home page; an envelope to represent contact information. Careful attention as a developer must be taken when using these icons or any other graphical navigation. Use titles and alt-tags to adhere to accessibility and SEO requirements.
Icon navigation can also be used to propagate brand and theme on a website, but always include word links along side of it or you’ll confuse your viewers. Have a look at Google, Facebook or any other high-traffic site and you’ll notice a lack of icon navigation altogether.
Icons in Web applications
Using icons in a web application is much more justifiable for a variety of reasons. Firstly, web applications are usually a little more complicated, requiring more interaction in the same amount of space. Users are not simply taking information in, but adding or contributing information and interacting with the page. Therefore, real-estate is often at a higher value. Secondly, the rate of interaction is much higher, or hopefully much higher if your application is successful, therefore, users will learn the icons navigation over time. Icons will obviously increase the learning curve and may slightly reduce the adoption, but your application may end up being more efficient in the long run. After all, the gains in efficiency throughout a software’s life cycle should outweigh the loss in initial learning, especially with proper documentation and training.
The better systems integrate this learning process/training directly into the user interface, effectively using descriptive terms along-side icons where space permits, hopefully during an objects first use, and only using the icon where space is limited. The opensource email solution Zimbra has some good examples of this:
The top navigation bar is dynamically sized based on a users resolution, displaying both icons and words when size permits and shrinking to only display icons when required.
Developers propagated the same icons through out the iPhone application, effectively playing off the knowledge that a user had gained from using the web interface.
These may not seem like a huge step, as much of this is common sense, but great programs are built one great key at a time.
SilenceIT Inc.
(613) 627-4370
(613) 288-0555
You can skip to the end and leave a response. Pinging is currently not allowed.