I am available for freelance work - HIRE ME

Icons and the Web – Part 1: Why they Matter

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!

Icons and the Web - Part 1: Why they Matter

Icons and the Web - Part 1: Why they Matter

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.

The popular magnifying glass can help two different purposes

The popular magnifying glass can help two different purposes

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.

The floppy disc icon maintains its meaning, despite the technology being all but obsolute

The floppy disc icon maintains its meaning, despite the technology being all but obsolute

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.

Note: Icons above are from the Bright, Incredibly Detailed 3D and Milky sets, respectively.

Improved Usability

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:

FreelanceSwitch uses icons to help give context to its navigation

FreelanceSwitch uses icons to help give context to its navigation

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.

The continuity of icons on FreelanceSwitch

The continuity of icons on FreelanceSwitch

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.

Different icons used for each branch of the site

Different icons used for each branch of the site

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.

The same icons are used on the individual pages to improve navigation and usability

The same icons are used on the individual pages to improve navigation and usability

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.

Aesthetic Benefits

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.

Subtle letterpressed icons are noticeable but not distracting

Subtle letterpressed icons are noticeable but not distracting

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.

More colourful and detailed icons actually draw the eye towards important content

More colourful and detailed icons actually draw the eye towards important 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.

Simple, monochromatic icons blend perfectly with the overall design

Simple, monochromatic icons blend perfectly with the overall design

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:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Mar 31, 2010

Jacob says:

Hi Matt, great article with great explanations.

It really amazes me in this day and age that there are still people out there without RSS feeds; it just seems like such core functionality it’s hard to imagine how they can succeed without it.

Looking forward to more great design articles from you in the future.

Cheers.

Apr 1, 2010

Matt Ward says:

Thanks man. Yeah the RSS feed is pretty much key today. Not every visitor or user will make use of it, but all major CMS’s make it so easy to produce your own feed that there’s pretty much no excuse for not providing one.

Thanks for stopping by!

Apr 2, 2010

Martin Leblanc says:

Hi Matt

Nice article. I have written a blog post about a similar topic: http://www.iconfinder.net/blog/4/

Best regards,
Martin LeBlanc

Apr 9, 2010

Iconshock says:

Hey Matt,

That was a very interesting article, specially for us. We have great
icons you can check in our web page.
http://www.iconshock.com

Please tell us what you think.

Apr 14, 2010

Andrew says:

Good to revisit icons again in a discussion like this. You’ve given me some good ideas! Even though much of this is common knowledge it’s good to remind yourself every now and then of the power of icons in web development. Look forward to the next icon article.

Leave a Comment

Copyright © Echo Enduring Media 2009-2014