A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.
I'm creating a web application at work. I'm looking to replace some of the boring buttons with space-saving icons + tooltips.
We all know that the floppy-disk is "Save", the loopy-arrow is "Undo" and the old stupid open-door that was "Exit".
How do I know which ones are good metaphors and which are standard? Where can I find a list of standard visual metaphors? Any whitepapers or design recommendations you've seen?
I once saw a dictionary of international pictograms, hundreds of them, in a book whose title I've forgotten at the local library ... I mean the signs you'll see in an international airport for example, with signs for toilets, police, danger, currency exchange etc etc ... wonderful how comprehensible they all were ... for example like the ones off http://www.get2testing.com/Pics_TOC_E.htm ... they're not computer-specific, but they are comprehensible.
Interesting. I was looking for metaphors for common software actions such as "Apply", "Submit Changes", "Select All", "Filter Results", "Clear", etc. Things that are common in many forms, but not so common as to be present in Excel or Word toolbars.
Does anyone have anecdotal icons/visual metaphors that they think 'get the job done'?
I think you'll have problems with this.
For an icon to become a standard it has to be in wide use. A company such as Microsoft with ubiquity can start using the same "New Document" glyph in all its apps so it becomes a de facto standard.
A tools maker such as Borland can offer alternative "standard" glyphs with their development environment which in effect creates a competing standard.
But ... what's boring about clarity? I'm writing this in IE6 right now and at the top of the screen I see a magnifying glass. Is that Search, or Zoom, or what? Fortunately MS put the word "Search" right next to it to make it clear.
A better example is the one next to it: a five-pointed yellow star. How does a five-pointed yellow star mean "Favorites" to the unitiated? Again, fortunately the explanatory word is right there.
To the right of both of these is a glyph that looks vaguely like a recycling symbol. It has no explanatory text. What does it mean? Hmmm. I hover my mouse over it and two seconds later a balloon opens up saying "History." Why did I have to hover my mouse? If I had been looking for a "history" button I certainly wouldn't have looked for a round symbol vaguely resembling a recycling symbol ... Why not just a button with the legend "History" (or whatever the word is in your native tongue)? That would have been explicitly clear, and in three weeks (or months) when I want to see history again I wouldn't have to hover over a bunch of glyphs again to re-find the button.
Remember the old axiom: "form follows function." It's not boring to the user to be able to find, quickly, the actions s/he wants to perform. It gets VERY boring to be presented with a screenful of glyphs, most of which have no relationship to their function, and have to hover over them to determine their function.
For the things that have been done a gazillion times (New, Save, Exit, etc.) use the standard button glyphs everyone else uses. For everything else, my suggestion is that you put WORDS on the buttons.
No. Putting words on buttons is the worst mistake you can make: it assumes that your software will only be used in English. Believe it or not, it might be clear to you what "Search" means, but it's unlikely to mean much to the average Mongolian goat-herder.
(And words are ambiguous too, anyway. Does that search button look for text on the current page, or does it open a web search engine?)
So why not store text as text, and have it localised? Because some languages don't represent computer concepts as concisely as English, that's why. "History" would fit nicely on a button, but what do you do with languages that have to say "recently viewed documents"? It rather takes away the whole point of a toolbar altogether, which is to provide compact shortcuts.
(People who want text already have it, anyway. See that thing above the toolbar with all writing on it? That's a menu system, that is, and it's got all the text you could possibly want right there.)
Friday, September 02, 2005
Random Transmission, you might find something useful here: www.stockicons.com
These are from the guys who designed the Windows XP icons, if that helps. Their other site, www.iconfactory.com , might also give you a few ideas.
Friday, September 02, 2005
Random, I hate to sound like a pandering sychophant, but I think you might get some help from Joel's book "User Interface Design for Programmers." Bought it; read it; was very good.
But for actually helpful thoughts....
Finding a metaphor to express a Noun is easy; finding one for a Verb is very difficult. All of the functions you want to represent as icons are verbs--it'll be a tough fight to discover something that makes sense in your mind. It'll be even more challenging to ensure that it makes sense to everyone else.
Several years ago, there was a frustrating phase on the Web where a lot of web sites were expressing menu options as icons...and no words ("alt" tag, anyone?). Some were carefully thought out, and others were just downright senseless. But, what wound up happening was everyone started calling these schemes "mystery meat menus." The trend died a few weeks later.
Might I suggest a phased approach? Don't get hung up on finding visual metaphors just yet. Use words instead (and not on buttons--have to agree). Less risky, and you'll be concentrating on the important stuff...like functionality, navigation, etc. Then, when you have the metaphors sketched and passed muster with your friends, colleagues, etc., knock 'em dead with version 2.
Saturday, September 03, 2005
Devising a visual metaphor that works across cultures is very difficult. Even closely related cultures may have problems with each other's iconography.
The textbook example is the old "you've got mail" icon (http://canada.aol.com/portal/images/icon_mail.gif) which shows a post box with the flag raised to indicate there is mail in it. This works in an American context because it depicts a real life item.
Postal delivery does not work the same way in any other country that I know of, so the icon simply doesn't have the same resonance. OK, we can figure out what it means, but ...
The other difficulty with icons is that, unless you know what it's supposed to be a representaion of, it's usually impossible to tell. The limited pixel count is against you here.
Monday, September 05, 2005
Don't spend any time on it at all. Just put something there, and do a usability test. That will tell you what people who haven't been staring at your application day in and day out think, which will be faster and more effective than anything you can come up with.
I find icons are a bit easier to pick out on the screen than text. The user will learn the icons for the functions they use frequently.
Mohonri the Programmer
Friday, September 09, 2005
Couple of thoughts:
Putting *English* words on buttons would assume an English audience.
Round here, we moved away from communicating with pictures around the time we left the caves, and words have continued to work better for the last few thousand years...
Friday, September 16, 2005
This topic is archived. No further replies will be accepted.Other recent topics
Powered by FogBugz