|Do icons help your sites usability?|
I think so
There are many discussions on navigation here. It seems there are two sides to the argument. The SEOs and programmers feel that pure text links are invaluable to good web site promotion and usability. Artists and designers feel that navigation is static and needs to grab the attention of the user. Designers use rollover buttons and Flash navigation to spruce up the main interface. The problem with this is that navigation is important, but it should not be the main focus of the page; unless it is a site about navigation. I believe there is a middle ground.
I have found icons can be used in concert with text links. They are small in K, and have the power of a picture. Pictures do say a thousand words. They also have keyword friendly alt tags, names, and titles ;). They can give designers a way to enhance the design.
When someone surfs in from a search engine you only have a couple of seconds to convince them you have exactly what they are looking for. Targeted icons can help persuade them. You have the linked text plus a visual representation of the information on the other end. As an artist I find the conceptual aspect of icons enriching.
Things I wish I knew when I started designing icons
1. Start out in a vector program like Freehand or Illustrator. Create the graphics large. You can add contrast and gradients that will carry over in the shrink down.
2. Don't use PhotoShop except to save as raster and shrink to your preferred size (commonly 16x16, 24x24, 32x32, 48x48). I know many people use it and can create great icons. It is more complicated and a lot more work. PhotoShop’s gif transparency at this size stinks. Use shareware or freeware icon packages for touchup.
3. Be consistent in your design. If you use a building to represent company then you need to incorporate your building into an icon on company policy. Inconsistency is confusing and will damage your site's usability.
I recommend linking the icon. Even though there is a text link next to the icon, people want will click on the icon. Also make sure you have a good idea of who your audience is. I cannot show a dollar symbol or green paper as money in other countries and not expect some users to have some confusion.
Here are some resources
Depends on where the text is.
I've never come across a site that had icons worth their weight. Here's why I don't like them:
- The user has to think about what they are
- They take up bandwidth
- If the user gets the "wrong feel" from them, she'll leave
- They make no sence in the 'code flow' (athough I think that's just the html purist me ;))
Having said that, they can look pretty spiffy, those of you that know pageoneresults will surely agree that his icons work pretty nicely...
I'd definitely go for icons! Like the commercial with Agassi a decade ago:
I would definetly use every thing possible in my arsenal to stimulate the user intellectually,
visually, and hopefully soon lyrically (given user bandwidth increases).
With that said; much more thought has to go into choosing icons then what is currently being
shown on the web sites out there. As Nick mentioned, you do not want to give the wrong impression;
but if you do give the right impression, your site will be just that much more visually pleasant to view.
but dats onlee wat i tink !
Despite the fact that I am Nielsen follower, icons, if selected well, are an excellent tool.
The international siggs are a great example. I have seen some of the same style carried onto web page navigation with great success. I never had to read the menus but the icons were instantly clear where they would lead to.
Examples: VCR button icons (ff,rev, stop, play); envelope; letters in circles (c, i,tm, etc.); Truck with cross on it; a locked & unlocked lock; picture of a printer
I unabashedly LOVE icons... If well designed, they can unobtrusively give a page a little 'lift' image-wise, and not get in anyone's way. A small icon next highlighting a text link can have a great effect on clickthroughs... (as I discovered when I created a tiny "SALE!" graphic to go next to product titles on one site.)
However, I have never used a vector program for designing icons. I used photoshop for a long time, drawing the icons pixel-by-pixel, and recently discovered Iconographer, which works the same way but offers a tailored-for-icons interface that I find very helpful.
I think an icon should be built at the size it will be displayed. More than once I've had a larger graphic that I thought would make a great icon, but when shurnk down, it lost it's sense of proportion... the lines got too thin, or small areas of color practically disappeared. When you're working so small that a single pixel of color will substantially change the overall appearance of the immage, I think working pixel-by-pixel in a bitmap editor is an invaluable technique.
So I suppose the moral of the story between bitmap or vector software for icon creation is: Use whaever works best for you. :)
|The user has to think about what they are |
That is why you need to know your audience and do a little usability testing on friends, family, and who ever will give you some fresh eyes. They don't know what you are trying to create.
Not really. If they are optimized and the color pallet is low.
|If the user gets the "wrong feel" from them, she'll leave |
I think that is true with every aspect. Background color, link color, font, terminology, and every other piece of the design also will have the same impact. Once again designers should always know their audience.
|They make no sence in the 'code flow' (athough I think that's just the html purist me ;) |
I know you are Nick_W. I really can't disagree with you there, but if done well I think you can add more value to your audience than take away from your code flow. Its a give and take. I want to point out the icon (;)) you put in your post. It really says volumes about what you are saying. It is done well and well placed. We are constantly placing these face icons in our posts because, with a small low K picture, you can communicate the true intentions or feelings in your content. WebmasterWorld uses red balls to connote new posts. Brett, this is very effective and a beautiful example of how icons enhance usability.
|More than once I've had a larger graphic that I thought would make a great icon, but when shurnk down, it lost it's sense of proportion... the lines got too thin, or small areas of color practically disappeared. When you're working so small that a single pixel of color will substantially change the overall appearance of the immage, I think working pixel-by-pixel in a bitmap editor is an invaluable technique. |
I understand exactly where you are coming from mivox, but there is a secret that an icon designer that worked for a huge software company let me know. I use a shareware program called microangelo for icon development. It has a wonderful screen capture function. It will screen capture in normal icon sizes. I create my icons in freehand. Then I bring it into PhotoShop. At this point I zoom way out on the picture. PhotoShop’s shrinking abilities are ok but not excellent. But if you zoom out, you can get a better-looking image. Do a screen capture of the image zoomed out. You then paste in your program and use it as a framework. Touch up in our icon program. Touch up may take some time and you may need to go back to the original and tweak and repeat.
I do agree that what works for the individual is always best. I just wanted to let everyone know what works for me.
Icons are neither bad nor good. They're just another tool in your user interaction toolkit and can be used correctly or incorrectly.
Just to elaborate on a few excellent points above:
Somebody posted that a problem with icons is that the user has to decipher them - this is what human factors types call self apparency. It's more of a problem on websites than say an OS, because you may only visit a website once for a few minutes, rather than working with it every day.
As someone else suggested, you're reasonably safe with widely used icons such as envelopes for email and VCR style buttons for backwards and forwards. On this site, I'd say that the user profile and email icons in the forums are fairly well understood, but even here the designer has added text, so there's no confusion. The thread icon - a document with a purple star isn't so obvious.
The worst website icons are those in which the designer has decided to be clever and invent a whole new icon.
If you can, why not write out the words? The internet is about information.. It is not TV. Usually if you have room for a doodle, you'll have room for the words.
If you do use an icon:
1) write out a description to go with it.
2) try to use a real photo... they are as easy to use on the web as drawings... why use cheesy "clip-art"?
Korkus: It's clear you like icons ;)
I wouldn't consider WebmasterWorld's 'red balls' icons though, they're just graphics, as I understand it an Icon is a small picture that describes grapically a concept. (or somehing like that..)
Also, the smileys' are not icons either really, they're emoticons, and like you say, very usefull when tone of voice and body language is not an option....
Gary_Snyder: Good points!
Korkus: I'm picking holes, but you know what i mean ;)
emot-icons = emotion icons. ;) A perfect example as to how a small graphic (an icon) can greatly enhance meaning... in this case, often preventing people from taking offense where none was intended. Which, if you are running a discussion-based site, is a great enhancement to usability.
|write out a description to go with it. |
I apologize for not making my point clear. I think using icons with regular link text enhances usability. It can enhance normal text link navigation and save bandwidth instead of using flash navigation, rollover buttons, and basic graphic text. I think it will greatly damage your usability to use mystery meat navigation. Icons should always have a legend or text. I had to explain to my wife recently what the play triangle, stop square, and other VCR symbols meant. Trust me there is always a lowest common denominator.
|try to use a real photo... they are as easy to use on the web as drawings... why use cheesy "clip-art"? |
I highly discourage people from using photos at icon size. Photos need a high color pallet and will consume bandwidth. They also lose too much quality and recognition at 16x16. I am suggesting artists create their own from scratch, based on the common computer and Internet visual language, and not use "cheesy clip-art". If it works for you that’s great. I am an artist and never want to stifle creativity. For every rule there is an exception.
Nick_W I do understand your feelings. You are on the programmer/SEO side of the argument. You love it clean, lean, and mean. I am not saying that does not work. Tried, tested, and proved that it does. I am suggesting that there may be a more usable solution that is very bandwidth friendly.
Say I have an articles section of my site. I have sectioned my widget articles into 4 categories. In those categories are multiple articles. I put a linked folder icon next to the link text to communicate that multiple documents are at the other end of the link. It tells a user that there is more than just 1 blue widget article there before they choose whether to click or leave.
I think icons are a great tool for communicating information, efficiently.
Take This for example.
How much actual info is there? 2 colors, missing lines, but the brain does the extra work needed. The benefits of icons are huge..if used well :)
[edited by: korkus2000 at 11:47 pm (utc) on June 2, 2003]
[edit reason] Link Depricated [/edit]
One place I feel strongly about using an icon is "Put In Shopping Cart". It helps in one of the frequent areas of confusion on e-commerce sites -- "OK, I found it, now how do I buy the danged thing?"
An icon, well chosen and rightly positioned, makes the purchase process stand out on the page. I am sure to the bottom of my toes that this is a big plus for usability.