posted by Matt Ward on Mar 30, 2010.
This is the first article in a six part series, in which we will discuss various aspects of using icons for the web! This particular article looks at what icons are and why they can be an important addition, both in terms of usability and aesthetics.
Icons are a hugely popular design element today – especially on the web – and there are probably dozens of new sets released each and every day. With all that choice, finding and implementing the icons that are right for you can sometimes be a bit of a challenge. It certainly has for me in past projects!
I started to write this article in an effort to look at some of the things that I have learned about using icons on the web. I quickly realized, however, that I had a lot that I could say on the subject, and that the article could swell to epic proportions. So, after a quick poll on Twitter, I decided to break the article down into smaller, more managable chunks and create a series, which I will be posting over the next several weeks.
Today’s article looks at what an icon is, and why they can be an important addition to your websites, both in terms of usability and aesthetics.
What is an Icon?
Before really getting into a discussion of icons, I think it important to briefly at the question of what an icon is. I realize that this might seem like a somewhat elementary question, but I think it’s important. Sometimes, I think that the icon is reduced to being little more than another element, when it is fundamentally so much more than that.
Setting various religious meanings aside, an icon is a representation of something, whether that be a concept, an action, a site, a person and so on. Moreover, the icon must have some intrinsic relationship to the thing that it is meant to represent, because the purpose is for it to be easily recognized and/or related to. This is usually based on the association of an object with whatever you are wanting to represent. A magnifying glass, for instance, is often associated with the action of looking for something, and is thus often associated with search functionality in websites and applications.
However, this same object can also be associated with zooming in (magnifying). This differentiation is a strong reminder of the fact that icons can require context in order to be properly understood.
They can also be understood in terms of tradition. How many people do you think are actually using floppy disks anymore? Not me! None of my computers even have a floppy drive. Yet, because of its longtime use, the floppy disk icon has become the standard for almost any kind of save action.
There is a strong iconographic tradition here, and it can often be beneficial to remain within these traditions. They are proven icons, and there’s usually no point in trying to reinvent them! We’ll discuss this idea a bit more below.
From a usability standpoint, icons can help to make a site more intuitive and easy to navigate, especially for repeat and returning visitors. When the user sees the icon, they will hopefully understand it and – assuming that it is a navigational or functional element – click to achieve the desired effect. They may be transported to a new page, open a modal box or execute some other action. For the purposes of this discussion, the specific action doesn’t really matter (though, of course, for your site it matters entirely). What’s really important is that the icons help guide the user toward that action.
Take, for example, the front page of FreelanceSwitch, which has a bold navigational items for both Freelancers and Clients built right into it’s header:
These navigational items are more lengthy than the normal menu elements, and though they certainly don’t contain a lot of text, the icons help give them context and make the navigation more intuitive to use.
Icons can also help provide a sense of continuity. A single site can have different layouts for different types of pages, and the consistent use of icons can help the user to locate and understand similar functionality across slightly (or sometimes very) different layouts and designs. Again, FreelanceSwitch is a great example. Throughout the site, the user will find various opportunities to subscribe to a feed, either through RSS or Email. Here we can see these options at the top of the sidebar, at the bottom of a single post, and in the footer.
In each case, an identical icon is used for a similar purpose, creating a sense of unity throughout the site. Wherever the user sees the blue RSS icon or the envelope icon, they know that they will be able to subscribe through either their feed reader or via email.
Icons can also be used to create clearer categorization of content. In my recent redesign of the Highland Marketing website, the goal was to prominently feature four main areas of service – lettershop, data services, customer support and postcard packages. So, I used icons to represent each of these areas on the main page.
Then, when you navigate into any of these branches, the same icon would be featured prominently on the left-hand sidebar, with smaller icons of the other three areas for quick navigation between branches of the site.
In the previous design, some users noted that they tended to get lost as they navigated deeper into the site. The icons helped address this usability issue by always providing a quick visual reference as to the current location.
These are just a couple of example of how a site’s usability can benefit from the use of icons, but it certainly goes to show how how important they can be as a design element.
I’ve also found that nicely designed icons can really help with the overall aesthetic of a design, especially if the site doesn’t use a lot of rich graphics in its background. In such cases, icons can be a really great way to break up the flat appearance of all text menus and navigation systems (along with all the usability benefits). They can add a splash of colour and a degree of polish and professional sophistication that can really add a lot to a site’s overall feel.
Icons can also help to round out the overall feel of a site, by matching the aesthetics of the rest of the design. The design for the recently launched MediaLoot is a good example. The main title bar also contains a simple menu, complete with icons.
The icons on this one are simple and monochromatic, with a slight letterpress effect. This works really nicely, because they are located in a menu area, which appears on every page. The menu items and icons are large enough to be noticeable, but also subtle enough as to not be distracting. This contrasts against the other icons in the main area, which are colourful and more detailed, and draw the eye to the content.
Another good example is the n.design studio site, which uses category icons technique described above. The site uses a beautiful hand drawn style, with a paper textured background. As such, shinny and detailed icons probably wouldn’t fit in with the overall theme. Instead, Nick uses simple, monochromatic icons, coloured to match the header text.
In this way, he makes great use of icons to help slightly improve the usability and user experience, while keeping well in line with the overall (and really beautiful) design!
Universally Recognizable Icons
As noted above, building icons into your site designs also allows you to take advantage of some universally recognized symbols. The most popular of these might very well be the RSS symbol, which of course simply indicates the existence of a feed by which readers can actually subscribe to the content of a site. I would say that this one is important enough that no blog or other site which continually publishes new content should be without it!
There are literally hundreds of different versions of the RSS icon available out there on the internet (check out my
Unique and Sensational RSS Icons article for examples). Some are very basic, while others are highly unique and original. The one thing that all have in common, though, is what I call the “signal” (because it looks like something being broadcast), which is that universally recognizable symbol.
There are other symbols that can be used in or as icons with relatively universal recognition:
- Plus Sign: denotes addition of something
- X: denotes closing or deleting something
- Shopping Cart/Bag:
- Information icon: denotes that there is more information
- House: denotes the home page
- Checkmark: denotes that something is included or accepted
- Bird: in recent years, denotes Twitter
This list is by no means exhaustive, but using any of these symbols will help convey meaning quickly and efficiently, simply by means of their universal recognition.
So there you have it. I hope you can see why icons can be such an important part of web design. In the next article, we will look at how to go about finding icons and building your own library. In the meantime, please feel free to share your thoughts!Post A Comment
Also from Echo Enduring Media: