Welcome to WebmasterWorld Guest from 184.108.40.206
Forum Moderators: not2easy
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.
I've never come across a site that had icons worth their weight. Here's why I don't like them:
Having said that, they can look pretty spiffy, those of you that know pageoneresults will surely agree that his icons work pretty nicely...
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 !
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
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
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 ;)
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.
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 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"?
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.
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]
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.