Usability in Icons(stiern.com)
stiern.com
Usability in Icons
http://stiern.com/articles/usability/usability-in-icons/
12 comments
It drives my boss crazy that the universal icon for Save is a picture of a floppy disk. We haven't been saving documents to floppy since 1993! But it's also scary to be the first one to buck the trend, so our product uses the same floppy disk as everyone else...
It recently occurred to me that the icon of a phone is of a type of phone that almost nobody uses anymore. And the icon of a camping site uses a model of tent that nobody uses anymore either.
Our kids will be so confused...
Our kids will be so confused...
Similarly, to access music on my iPhone, I click an image of an iPod.
Another anecdote: I heard on some NPR show that most kids don't understand what the sound of a record being scratched to a halt actually is. (This sound: http://www.youtube.com/watch?v=Wn6s1FE-yKQ) When asked, they describe it as the noise that is made on TV when you do a double-take.
Another anecdote: I heard on some NPR show that most kids don't understand what the sound of a record being scratched to a halt actually is. (This sound: http://www.youtube.com/watch?v=Wn6s1FE-yKQ) When asked, they describe it as the noise that is made on TV when you do a double-take.
TIL I guess.
And since I don't qualify as a kid, I am guessing that most mid-twenties wouldn't know either.
And since I don't qualify as a kid, I am guessing that most mid-twenties wouldn't know either.
I think vinyl was still sufficiently popular for most folks in their mid-twenties to recognize it. I'm 25, and several of my grade school classrooms had record players, not to mention all the homes of my parents, their friends, and our extended family.
But as far as I can tell, few folks born in the mid-80s had significant direct experience with records, to the point where there were cultural references to our ignorance. In particular, I remember a sunday morning comic strip when I was young that centered around kids not being able to identify a record player. We were right on the cusp of its obsolescence.
To wit, I couldn't tell you the difference between a 33 and a 45 (well, it's rpm, but are they different sizes?), and I've never owned music on vinyl.
I'd wager that people born in the 90s would be the first to be completely unaware of the origins of the record scratching sound.
But as far as I can tell, few folks born in the mid-80s had significant direct experience with records, to the point where there were cultural references to our ignorance. In particular, I remember a sunday morning comic strip when I was young that centered around kids not being able to identify a record player. We were right on the cusp of its obsolescence.
To wit, I couldn't tell you the difference between a 33 and a 45 (well, it's rpm, but are they different sizes?), and I've never owned music on vinyl.
I'd wager that people born in the 90s would be the first to be completely unaware of the origins of the record scratching sound.
It might have been in the US but although my parents sometimes played records I don't think I have ever heard that sound.
The icon of the dialer on my Android phone is that kind of phone.
Though it might make sense in that case as it is what it replaces.
Though it might make sense in that case as it is what it replaces.
Apple got it right with Lion - why bother with Save icons at all? We’ve got enough space now to autosave nearly everything.
as long as the convention is universally understood, it serves the required purpose.
also, imagine the amazement on your kid's (or grand kid's) face when you explain to them the "origin" of the save icon and how it represents a floppy disk which could contain a full 1.44 Mb of data.
also, imagine the amazement on your kid's (or grand kid's) face when you explain to them the "origin" of the save icon and how it represents a floppy disk which could contain a full 1.44 Mb of data.
When I was a kid, for years I thought the paint-bucket icon for "fill" in paint programs was a graduation cap. After all, it was diamond-shaped and seemed to have a little tassel at the end. It confused me to no end why MacPaint would use that as a 'fill' symbol.
What would be a good replacement? A little cloud perhaps? :-) Or somebody engraving something on a stone tablet (timeless)?
I use an arrow pointing down to a 2D HD icon. Perhaps not the best imagery, but I guess I feel like I can afford to buck tradition.
In a way, that's only postponing the same result as the floppy disk icon.
Its an inverted floppy disk by the way :) So its not even correct
A great example of the wrong way to report user research.
- How many participants were tested? - Who was tested? - What kind of test was it? Survey? Lab study? etc? - Between subjects or within (i.e. did the same people see all the icons)?
I could go on.
- How many participants were tested? - Who was tested? - What kind of test was it? Survey? Lab study? etc? - Between subjects or within (i.e. did the same people see all the icons)?
I could go on.
I guest that the number of participants is 99. (I don't have the real data.)
| Yes U. Not U. | Yes U. Not U.
--------------+-------------------+--------------------
Bold | 99/99 0/99 | 100.00% 0.00%
Italic | 99/99 0/99 | 100.00% 0.00%
Underlined | 99/99 0/99 | 100.00% 0.00%
Strike-t. | 54/99 45/99 | 54.55% 45.45%
L. Chain | 35/99 64/99 | 35.29% 64.71%
L. Globe | 25/99 74/99 | 25.00% 75.00%
Ordered L. | 99/99 0/99 | 100.00% 0.00%
Unordered L. | 93/99 6/99 | 93.94% 6.06%
Image | 78/99 21/99 | 78.79% 21.21%
Undo | 57/99 42/99 | 57.58% 42.42%
Redo | 51/99 48/99 | 51.52% 48.48%
None of which really matters, at all. It's a blog post not a journal paper or a research report. It would have been nice to see a link to a full account but perhaps they couldn't decide how to represent that.
Omitting these details turns it into "a fun discussion". Including these details (even as a footnote) would turn it into a potentially useful piece of research.
Apparently it was his bachelors thesis though, so he's (hopefully) written to academic levels of detail before before...
They seem to suggest the 'winning' icon for their purposes was simply 'www'. (Perhaps, it was also blue and underlined, which are strong cues to average users of linkishness.) But, there's no example image!
Of course their experiment would show that.
It's a widely misunderstood claim that there exist some sort of universally objective way to visualize various features.
Intuition around interfaces is learned through using the interface not by some universally understood metaphors.
Most user don't understand what they are doing conceptually.
The original link (blue color underlined) is the most understood version of a link yet the concept in itself brings no clarity of it's purpose.
The experiment is more or less a self-full-filled prophesy.
It's a widely misunderstood claim that there exist some sort of universally objective way to visualize various features.
Intuition around interfaces is learned through using the interface not by some universally understood metaphors.
Most user don't understand what they are doing conceptually.
The original link (blue color underlined) is the most understood version of a link yet the concept in itself brings no clarity of it's purpose.
The experiment is more or less a self-full-filled prophesy.
Icons, in general, are overrated in my opinion. Only if an icon has a very clear meaning to all it can be safely used. Using an icon anywhere else is a big bet and starts with usability issues. E.g. whoever designed the play/pause/stop/previous/next buttons pulled that off, but it's a risk.
I think a button that says "Save" is much clearer than a floppy disk. I think a button that says "Link" (or "Insert Link") is much clearer than a globe, a chain or whatever weird arrow you can come up with.
I never understood why so much software has so many icons. I also think MS got it right in Office 2007+ with the ribbon, which essentially was made to enable "more text, less reliance on icons".
I don't know any software that I find easy to use that relies on icons.
I think a button that says "Save" is much clearer than a floppy disk. I think a button that says "Link" (or "Insert Link") is much clearer than a globe, a chain or whatever weird arrow you can come up with.
I never understood why so much software has so many icons. I also think MS got it right in Office 2007+ with the ribbon, which essentially was made to enable "more text, less reliance on icons".
I don't know any software that I find easy to use that relies on icons.
Icons in a toolbar are like keyboard shortcuts: they have to be learned, but in the end they're more efficient.
And they're not labelled (but usually have tooltips) because of screen real estate. They're simply faster shortcuts to menu options, or dialog-box options.
And they're not labelled (but usually have tooltips) because of screen real estate. They're simply faster shortcuts to menu options, or dialog-box options.
The big problem with a chain icon is that it depends on English as well, because a "hyperlink" and "chain link" have absolutely nothing to do with each other, except that in English they both contain "link".
I agree with the first commented in the blog... an arrow that points to a page, or an arrow pointing from one page to another.
Kind of makes me feel stupid for never having thought of it, but I'll be using it the next time I solve this problem!
I agree with the first commented in the blog... an arrow that points to a page, or an arrow pointing from one page to another.
Kind of makes me feel stupid for never having thought of it, but I'll be using it the next time I solve this problem!
Before this blog post, I'd always squinted at those chain icons and wondered what in the world they were supposed to be.
Bad visual puns do not usability make.
Bad visual puns do not usability make.
Sure they do. A chain link connects two physical items, such as chain links or a chandelier or a bicycle lock. A hyperlink connects two web pages. The metaphor is sound and doesn't depend on English, albeit that the hyperlink is unidirectional.
I wonder how many of the participants were able to go back and insert a link without any problems after they were told what the chain icon does?
Icons are really useful once you learn how to use a particular interface. It's ok not to get it at first as long as you only need to learn it once.
You will always need to educate customers to some extent, what you need to do is make that learning curve as easy as possible.
Icons are really useful once you learn how to use a particular interface. It's ok not to get it at first as long as you only need to learn it once.
You will always need to educate customers to some extent, what you need to do is make that learning curve as easy as possible.
No wonder kayak recently replaced icons for "details", "pin", etc., with simple text.
A/B test could also provide statistics of how well text v/s icon performs for non-trivial items.
A/B test could also provide statistics of how well text v/s icon performs for non-trivial items.
[deleted]
OK, "WWW" is fairly universal, but generally it's best to avoid any text - an icon should be language-independent.
Considering that HTTP is a universal protocol and everyone using WWW in their URL, I don't see this as a problem.
> Bold: 100%
well, they didn't asked anyone outside of the english speaking world. Where I came from, everyone knows "N" is for bold text.
Also, having studied cognitive sciences in my free time, the author should learn soon that icons are not meant for discovery or explanation. They are place holders. Tokens for your mind to return to effortlessness.
So, the save icon could be an Elephant (my old idea, nobody likes) or a dolar sign or a clown. it doesn't matter. The user have to explore where the save is. then the icon will just serve for him to return.
well, they didn't asked anyone outside of the english speaking world. Where I came from, everyone knows "N" is for bold text.
Also, having studied cognitive sciences in my free time, the author should learn soon that icons are not meant for discovery or explanation. They are place holders. Tokens for your mind to return to effortlessness.
So, the save icon could be an Elephant (my old idea, nobody likes) or a dolar sign or a clown. it doesn't matter. The user have to explore where the save is. then the icon will just serve for him to return.
Do you have different icons in Word, too?
Yes. Word even localizes the keyboard shortcuts (e.g. in Swedish office, you bold text with command-F for "Fetstil")
yep. word. and ctrl+n sets bold. it's all aligned.
and that drives me crazy when i use somebody else's computer in portuguese... the worst offender is that ctrl+A does not select all... don't even remember what it does... but you need ctrl+t to select all. it's a train wreck. and there's no way to quickly change the shortcuts to another language when you sit down at the computer... have to change the computer language.
and that drives me crazy when i use somebody else's computer in portuguese... the worst offender is that ctrl+A does not select all... don't even remember what it does... but you need ctrl+t to select all. it's a train wreck. and there's no way to quickly change the shortcuts to another language when you sit down at the computer... have to change the computer language.