Usability in Icons

http://stiern.com/articles/usability/usability-in-icons/

by Oestrogen • 15 years ago

85 40 15 years ago

RyanGWU82• 15 years ago

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...

gc_val• 15 years ago

Its an inverted floppy disk by the way :) So its not even correct

Tichy• 15 years ago

What would be a good replacement? A little cloud perhaps? :-) Or somebody engraving something on a stone tablet (timeless)?

Wevah2• 15 years ago

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.

amitutk2• 15 years ago

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.

rix0r• 15 years ago

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...

nostromo• 15 years ago

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.

tomjen33• 15 years ago

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.

robin_reala• 15 years ago

Apple got it right with Lion - why bother with Save icons at all? We’ve got enough space now to autosave nearly everything.

crazygringo3• 15 years ago

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.

gojomo• 15 years ago

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!

amitutk2• 15 years ago

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.

harrybr2• 15 years ago

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.

epo• 15 years ago

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.

calpaterson• 15 years ago

Apparently it was his bachelors thesis though, so he's (hopefully) written to academic levels of detail before before...

harrybr2• 15 years ago

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.

gus_massa• 15 years ago

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%

PS: Your decimals leak information. :)

wgx2• 15 years ago

OK, "WWW" is fairly universal, but generally it's best to avoid any text - an icon should be language-independent.

addandsubtract• 15 years ago

Considering that HTTP is a universal protocol and everyone using WWW in their URL, I don't see this as a problem.

Oestrogen2• 15 years ago

Everyone using WWW in their URL? Look at the address bar right now. :)

wgx2• 15 years ago

See my comment again: generally.

ThomPete• 15 years ago

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.

gcb2• 15 years ago

> 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.

Kwpolska• 15 years ago

Do you have different icons in Word, too?

kalleboo• 15 years ago

Yes. Word even localizes the keyboard shortcuts (e.g. in Swedish office, you bold text with command-F for "Fetstil")

gcb2• 15 years ago

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.

peng• 15 years ago

Why not write "Link" instead of "WWW"? Clearer and to the point.

zb• 15 years ago

Because "Link" only means "link" in English, whereas "WWW" means "WWW" everywhere the web is.

ed209• 15 years ago

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.

skrebbel• 15 years ago

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.

crazygringo3• 15 years ago

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.

crazygringo3• 15 years ago

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!

Semiapies• 15 years ago

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.

T-hawk• 15 years ago

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.

Usability in Icons

Related Stories