Stiern

via Ad Packs

Usability in Icons

In many apps, icons are used to illustrate a specific function — it can be used for everything from information to actions. But if the user doesn’t understand the icon, what’s the point?

When designing icons, you want to strive for creating/using isomorphic icons — that is, icons that represent their real-life companion — eg. trash can, brush, eraser, etc. As long as you can do a somewhat decent depiction, these icons will be usable. But what when there is no real-life companion?

As an example, I’m going to use the icon for a link. “A link?” you say. “Everyone knows what the icon for a link looks like!” What is the first icon that comes to mind when thinking of inserting a link in an e-mail, a blog post, or in your CMS? A chain? A globe? A …? Yeah, there are a couple of different icons for inserting links, and you might think they’re all logical. But they’re not necessarily.

How do the big guys do it?

Examples of link icons in apps and websites

As you can see, most CMSes and apps use a chain. The only one really separating from the rest is Facebook, using a note — and I think that makes even less sense than a chain.

Only geeks understand link icons

I’m a geek myself, so I can say it — only geeks understand link icons. In 2010, I wrote my bachelor project with Morten Keilow. The project aimed at exploring how little documentation you could leave in a CMS, and still have even the most non-savvy person use it with no issues. When we created the interface design, we used a chain icon without even giving it any thought.

We gave the test participants a list of assignments to perform, one of which was inserting a link. What really surprised us was, that almost no one could figure out how to insert a link. We decided on testing the link icon out of context together with other icons regularly used in CMSes and text editors, and the results were really surprising.

The icons used in our test

Several of our test participants understood the chain icon as “binding something together” or “linking to elements together”, which is not altogether wrong — the issue is that they do not understand what they are binding together — and thus, the icon doesn’t work as intended. The globe icon brought comments like “You can visit the Internet”, “Search”, or “Upload to the Internet”.

Icon Did understand Did not understand
Bold 100 % 0 %
Italic 100 % 0 %
Underlined 100 % 0 %
Strike-through 54.55 % 45.45 %
Link 1 (chain) 35.29 % 64.71 %
Link 2 (globe) 25 % 75 %
Ordered list 100 % 0 %
Unordered list 93.94 % 6.06 %
Image 78.79 % 21.21 %
Undo 57.58 % 42.42 %
Redo 51.52 % 48.48 %

All in all, only 35.29 % of the test participants understood the chain icon, and only 25 % understood the globe icon. While we didn’t set a minimum for success, clearly, 25 % is not good when it comes to usability. When being interviewed one of our participants asked:

“Why not just write WWW? Everyone understands that!”

It is possible that someone would understand WWW as “visit the internet” or similar, but we found that every single test participant understood this icon. This probably isn’t the best solution — however for now, at least based on our tests, it is the most usable icon for explaining a link.

I would love to do another test of any other icons that might be better, so if you have any ideas, please write in the comments below.

117 comments

Leave one yourself

  1. There are a couple of points that spring to mind.

    Anyone knowing that they want to add a link, is probably knowledgable enough to know the icon they want is the ‘link’

    The icon that really bugs me is the ‘floppy disk’ for save. Most teenagers today have never even seen a floppy disk!

  2. Not to be pointing out the obvious or anything, but if people are unable to understand doodles representing links, and want you to write www instead of a pictogram, just write the word link. Icons are used to decrease clutter and increase functionality, no? Well www in almost any non-monospaced font out there, is much larger than link or if your audience is a little more savvy, the word url. Look:
    WWW
    LINK
    URL
    www
    link
    url

    If images aren’t cutting it, say what you mean. Then just place it along side the icons for bold, underline, and italic, so that all the icons with letters in them can hang out and be friends and one rogue word icon isn’t randomly hanging out with the rest of the unintelligible doodles.

    I’ve been a nerd forever, and the little chain always looked wrong to me. Once you draw more than one link, its no longer ‘link’. It’s ‘chain’, and wtf is ‘chain’? We only understand it because we’ve been conditioned to.

  3. Insted of www what about URL with an underline?

  4. This is a great observation. I’m working on enhancing Drupal’s wysiwyg editing and have been grappling with how to refine the linking systems in CKEditor and TinyMCE. You’re right on about how baffling the “chain” icon is, but the deeper problem is that all these systems want to you click a button to create a link.

    My solution is to embed an input box in the editor’s bottom tool bar with a label that says “Link” in front of it and a search engine selector behind it. Select text in the editor and type a URL or search term into the text area, which will autocomplete for search terms, and link to the result clicked by the user.

    We’re in a very early stage of development but even now, creating links feels significantly more fluid and obvious. And no more chains!

  5. I don’t see what the fuss is about. Icons are just a matter of getting used to. The chain has been use for ages as the link icon and anybody that has created an email or done anything other than play Farmville probably knows what it is for.

    I don’t hear people complaining about the power icon you see on all sorts of appliances. You know, the circle with stripe (http://findicons.com/search/power).
    Near to nobody knows why it is the icon for power on/off… it’s just an icon/symbol and we get used to it.

  6. Blue “link” with an underline should be more than sufficient. What is actually says shouldn’t matter. It is the blue underlined text thats important.

    How about a blue “lorem” underlined. ;-)

    I typically remove the “Underline” button from editors too since underlining text isn’t good practice anymore.

  7. So why aren’t the software that we design smarter than this?
    Look at Twitter or Facebook. They allow you to simply paste or write a url into the current document/textarea and they will convert these into working links.
    If a user would like to edit the anchor/link text then as soon as they pasted the link, underline it and convert into a clickable object with an icon or whatever (think: those pesky paste-icon-popups MS Word introduce when pasting text) for interaction which provides the user with options to change to text, alt text or whatever other property is important.

    Most people won’t care if the link has a nice anchor text or displays a long url. And if you don’t want long urls… shorten them!

  8. Are you going to publish your bachelor project on your website?
    Might be quite interesting for people who create online software/apps :)

  9. Symbols and logos are important and having universal standards when it comes to these things are equally important. I for one understood what each meant but for beginners I bet they have no clue.

    It would just make sense to have a blue color in the link symbol just as much as it makes sense to have a bold letter for the bold symbol as these are what happens when you click on the symbol.

  10. A wise person in China using an ideographic (icon-based) language knows 5000 glyphs. To make another adverb, they must memorize the 5001th icon and then communicate it to everyone else.

    A PhD candidate in western Europe knows 25,000 words. To make another adverb, they just add “ly” to something they already know and everyone knows what they mean.

    Icon-based operating systems are inherently limited when compared to command-line systems. “Link” _means_ something while a funky chain symbol is just one of 5001 icons.

    1. Although I understand what you’re getting at in using the example of the Chinese language as a rebuttal to the use of icons in UI design, the way you laid out your argument is inaccurate.

      Written Chinese is based upon a rather simple set of radicals inherent to each character that an individual proficient in Chinese would be able to grasp even they don’t know the exact definition of a word.

      For example, the radical for water is something found in a number of characters that have some relationship to water. If someone wanted to know a new word that utilizes the water radical, they wouldn’t have to necessarily need to memorize the word. They would already possess the foundation for the word in their understanding of the water radical.

      If anything, the use of a simple system of using radicals as the basis of all written Chinese makes learning vocabulary much faster than most Western languages. Does this make sense?

      The same goes for iconography in UI Design. I’m not saying this is always the case, but there should be some sort of simple visual cue inherent to a particular icon or iconography set that’s enough of a signal to the user that the relationship is something they’re familiar with and can find parallel with a prior experience even if they don’t exactly know what it means.

      I think aiming at 100% recognition is impossible. I think a better aim is find that threshold where one can offer a design that’s able to convey the best to the most users without a lot of confusion. Again, this is awfully hard and something that I as a UX designer deal with on a daily basis.

  11. how about “LINK” instead of “WWW”?

    1. +1 for “link”, blue and underlined

      Or even for www (lowercase), blue underlined.

      For those saying that it is english, then also Bold, Italic and Underline should be changed.
      In Italy we have Grassetto, Corsivo and Sottolineato (G, C, S).

      Bye.

      1. +2 for “link”, blue and underlined

  12. Sparrow, a beautiful email client for Mac OS X, uses the same “www” concept for a link. They underline the “www”.

    http://sparrowmailapp.com/

  13. The ‘www’ text link works only for links to other resources on the web. What about email links? Or anchor links? For english-only CMS implementations, I prefer to click on the word ‘link’. Simple.

  14. Surely a blue letter (A), or even “WWW” with a blue underline would suffice?

  15. The ‘chain’ icon has never made sense to me, and I think I know why: it is essentially a verbal pun. The link that one clicks on is called ‘link’ as a contraction from ‘hyperlink’, the original term. The ‘link’ in a chain has no semantic or meaningful connection with a hyperlink; the only relationship between them is this coincidence of naming in English. So we have this strange pathway: -> the invented word “hyperlink” -> the English word “link”-> a picture of a chain. The relationship between the first and the last is utterly obscure unless one has understood this strange sequence, which would be incomprehensible to a non-English speaker, and even to most non-geek English speakers.

  16. I’ve not had time to read all the comments, so someone may have remarked on this already, but if you had both of the link icons in the same menubar in the same survey… of course few people understood them. I wouldn’t, if I saw both of them, because I would never think there’d be two items that do the same thing.

    Have I misunderstood? :)

    1. subscribing, had same feeling when looked @ the icons in the article

  17. Thanks for the post! :)

    I agree with most of the comments: a blue underlined WWW should work out. (At least as long as emails keep using blue underlined links..)

  18. Hi. I enjoyed your article and agree. Some icons are easier to design than others. One reason being is that most icons in your list are designed with visual elements (signs) that have become somewhat universal in the developed world: people gets them straight away through usage.

    However, the icon representing “link” in itself is not yet universal enough to convey the meaning you want people to get. Maybe you should show an icon that depicts an action of linking things to each other. Go one step further in the process of putting the metaphor together.

    I have designed a collection of icons for a software application before. I found the following book quite useful while I was going through that design process: “The Icon Book: Visual Symbols for Computer Systems and Documentation” by William Horton. This book is an interesting and useful read, do not get frustrated or put out by the dated examples. They are still extremely relevant.

    Cheers, Gloria

  19. Sig figs. You have too many.

  20. Blue underlined text with a hand cursor on it. The text could be “www” or “http”.

    1. I’d say it feels too busy for an icon. (line + cursor + text, with color).

    2. Keep in mind designers often have to make these things at 16×16 pixels, or even 8×8. Image based icons work a lot better than text based ones at these small sizes.

  21. You have “linking to elements together”,

    Shouldn’t it be “linking two elements together”,?

  22. Actually I think the Italic-Icon is pretty diffcult to read by itself. Rather looks like a dash. Take it out of context and no-one will ever know what this is meant to be.

    Also I watched the mock-up video you linked to, where it is improved a bit. I somehow find it unfortunate it is called italic, so it somehow makes sense to use an i for this. I guess other italic letters would be easier to identify.

  23. How about something with an arrow?
    Stackoverflow for example has the world with an arrow on top of it.
    Third icon here: http://cdn3.sstatic.net/stackoverflow/Img/wmd-buttons.png

  24. The challenge about icon design is make it recognizable and understandable with out text. the LINK concept is quite easy to make (there are tons of links icons on the web) but what about a difficult concepts ?

  25. How about two pages linked by an arrow pointing from the middle of one to the middle of the other.

    You could try variations:
    page with an arrow pointing out of it,
    page with an arrow pointing into it,
    arrow pointing to side of page

  26. Very useful experiment.

    I’m working on an interface right now and am trying to use icons so effectively there is little to no need for text accompanying my form fields.

    Given your results, I may have to re-think things.

  27. I’m a bit surprised that only 35% of your test subjects understood what the chain icon does. But on the other hand I’m also surprised that most people think that vim is not the best editor in the world:)

    From now on I’ll use “www” icon.

    P.S.
    BTW, great job.

  28. Blue link with WWW should be enough :)

    but i very appreciate the stats :)
    tx for the post :p

  29. I don’t get your point. If some of the icons contain 3 letters (ABC) or numbers (123), why not make an icon with the 4 letter word “link” that is underlined? It is so obvious and used many times already ..

    1. Agreed. If you are don’t go give up on finding a useable icon for international recognition, by using letters “WWW” why not simply use Link as the commenter suggests?

    2. Exactly my thoughts, WWW makes no sense to me. Nice Article

    3. And what about non-English speakers?

      1. Here in Argentina (spanish) we say ‘link’ too, because hipervinculo (hyperlink) or vinculo (link) are very long words.

  30. Very nice article, and a very unique way of looking at usability.

    I believe we all are stuck with the old Microsoft office mindset, using these icons without questioning it.

    On the other hand, most other people who do not really use computer that much, the chain and the mountain and sun scene in a picture frame will sure give them hard time figuring what it means.

    I guess, what i learned from this is that small things like this can also be reinvented. :)

  31. I’m curious as to what percentage of users – both of your CMS and of the Web in general – know the term ‘link’ at all (i.e. Do they even have a term for ‘those things you click on? If you said ‘point at the links on this page’, would they know what you meant?)

  32. Great post, I feel like I see countless examples of semantically vague icons on a daily basis. Even ubiquitous icons like the twitter icon isn’t always clear (retweet this or visit a user’s twitter page?).

    These opaque icons just add more noise to pages making it harder to see the things that actually matter.

  33. Link is a four letter word? Why use an icon.
    Say ‘link’

    1. “Link” is an English word. Part of the advantage of using icons only is the built-in internationalisation; you don’t need to translate your button labels to several different languages to allow non-English speakers to use it.

      However, since nearly every link begins with “http://”, you could try that (with or without the “://”), since it is language-independent.

      1. The problem with using ‘http://’ is that browsers like Chrome no longer even display that.

        I can guarantee my mother (why does everyone use their mothers as the example of unfamiliar users?) wouldn’t have a clue what http means.

  34. Great post!

  35. Great post. I consider myself a geek but whenever I’m switching between CMSes (for different client projects or for testing) I have a hard time finding/recognizing the link button. This only happens with this button. Thanks for making your report available. Really enjoying in so far.

  36. Hmm, Just out of curiosity, perhaps a Link like this might work?!

    http://leichtgewicht.at/extras/LinkIcon.png

    My way of thinking: Users think its a text that is clickable (a link) so that Icon might be worth a shot.

    1. Nice icon. I think depicting the action is a step in the right direction.

  37. Interesting tests!

    I’m curious about the background of the participants:
    How much knowledge or experience did they have with CMS-systems? How often did they surf in the internet? Was there a relation between internet-affinity and the understanding of the icons?

    1. We tried finding test subjects that were as non-savvy as possible. As I recall, almost no one had used a CMS before. We asked them to think out loud when doing the test, and found that a lot of them were confused with the icons that are more CMS-specific. Most understood the basic text editing icons, but beyond that we saw almost only confusion.
      They were all used to surfing, using Facebook and checking mail.

      1. In my experience training college faculty, I find that many have no concept of what makes up a link. For example, they may paste a URL into a textbox without any problem, but getting them to integrate hyperlinks into the normal flow of text is foreign to them. They want to start with the URL. They don’t think to write some prose first, then select the text they want to become the hyperlink and click an icon to make it active. I think this is the fundamental problem for novices. This is why you still see, “To read more about this topic, click here: http://some_really_deep_link.”

        1. LOL. I cannot tell you how hard it is to convince academics that link text is NOT the same as a url that someone will click on. And they also will not let go of the idea of printing out a 50-plus character url in a print document in small type as if anyone is going to type that thing in.

  38. The Joomla! icon you have included is actually from JCE, my Joomla! WYSIWYG Editor extension. The latest beta removes the green plus icon to return to a simple chain image. Perhaps I should rethink that?

    Joomla!, like WordPress, uses TinyMCE as the default WYSIWYG editor which uses that chain icon, which I think is similar to an icon used in an early version of Word.

    Most users are used to seeing this type of icon or something similar as the button for linking because they are familiar with Word, GMail or Hotmail (although Word describes it as a ‘Hyperlink’??) and that is one reason to continue to use them. Change it to something else and you’re likely to get a whole lot of confused people wondering where the link function went.

    It would be interesting however to know what those participants who didn’t get the chain or globe icon were actually looking for…

    @MATTHEW The problem with using a word like “Link” as the icon is that it is not easily translatable, you’d need to have a separate icon for each language that had a different word for link, WWW however may not need translating.

  39. Very interesting article! The amount of people that can’t recognize the ‘undo’ and other icons it got me think about how we can be wrong sometimes.

    Congrats!

    1. It all depends on how people associate concepts with that icon.

      For suppose the same icon can serve for

      1. “going back ” and what it means be going back, for some may not be clear and in general users don’t spend that time analysing the information.

      2. “undo” – which is correct in this case.

      As long as something is prone to be associated with multiple concepts, somebody will make an error.

      Very informative.

      -Vam

  40. João Oliveira

    May 25, 2011 at 6:11 pm

    I was surprised to see so many people failing to recognize undo and redo buttons…. O.o

  41. One set of icons I’ve found to be confusing at times – and would be worth testing, IMHO – is the toggle between the WYSIWYG and HTML versions of the content of the post/entry/article/etc. Some systems have two buttons next to each other, others use one and hide the active state to show the opposite version as a button. Some systems represent the HTML version as “HTML”, or the same with carats around it, or just “Code”. And then there’s “WYSIWYG”, “Visual”, “Design”, and other names for the actual look of your post. WordPress and other CMSs cannot agree on what to do here.

  42. ironically I was looking for the twitter icon to tweet this blog post but couldn’t find it then realised the unfamiliar ‘Tweet this’ text link!

    1. Heh, guess you’re right about that. Might have to rethink that :)

  43. Is your project available somewhere? It sounds really interesting.

    1. Hi Ricardo,

      I’ll see if I can dig out the report somewhere. If you’re interested you can look at one of our earlier mockup videos at http://www.vimeo.com/11881247

    2. So, I’ve found my report. Unfortunately, it’s a compressed version, so the text isn’t searchable. Anyway, it’s in my Dropbox.

  44. If you’re going to use 3 wide characters for “WWW”, why not just use 4 normal ones and write “link”? Can it be any communicated with any more clarity?

    1. very true lol

    2. Yes, perfectly clear unless you happen to be one of the 5 billion or so people who don’t speak English. The point of using icons is to communicate without words. Following the “Why not just spell out Link logic”, why have icons at all?

  45. There are a number of formal methods, processes, and tests for meaningfulness and comprehension that are used when developing and creating icons for online and offline applications. These processes are also incorporated as ISO World standards that can be looked up.
    The icon used in an application is NOT simply the best guess graphical conception coming out of the head of a graphics designer.. There is much in the process that involves the intended users of these icons which need to be involved early in the development cycle as they should be in any user-centric approach to UX, UI, HCI, or HF.

  46. Icons generally are not a good way to give a user an initial understanding of what a feature or function is. Over time, they provide a sort of visual mnemonic that may become more relevant to the use than the label, but only over time, and only with use. For example, on first read the little paintbrush icon in Microsoft Word in no ways describes the function it represents: painting an existing style onto another element. However, over time users will look for the paintbrush, not the label, because it’s more distinct than simply a label.

    1. Hmm, not sure I agree. If the users have to learn what an icon means, the icon is not good enough (and I guess you should consider not using an icon at all). For instance, if a long-time Word user visits Photoshop for the first time, he’s likely to become confused — Word’s use of the paintbrush is very different from that of Photoshop.

      1. I agree Peter. Icon use goes far beyond web applications.
        Symbols have been used to communicate ideas far longer
        than words have. Many symbols are used to communicate
        critical ideas like “Don’t eat this because it will kill you” or “Danger” and so forth. Well-designed icons communicate immediately and without having to educate the user/reader. If the icon fails to communicate immediately, then a new design is needed.

  47. Despite still using the chain the Gmail example is on the right track. Your run of the mill internet user understands blue underline text will take them elsewhere. This, combined with the pointer cursor are cues for links. I don’t see why this couldn’t be translated into an icon?

    1. Completely agree with this. ‘Link’ as blue and underlined would do the trick in my opinion.

        1. Stefan Lundström

          August 16, 2011 at 10:22 am

          Using Link is english, perhaps something you like to avoid when making buttons. I like the blue underlined www suggestion.

          1. English is the de facto language of the Web, using ‘Link’ underlined in blue would work fine for the majority of use cases. Important ones, anyway. Even if someone couldn’t read it, the imagery of blue text underlined in blue would be more than sufficient for getting the point across.

            1. are you talking about 1 milliard
              chinese people?
              arabs? how many of them?
              i wonder if you have ever
              seen a computer which was not
              “in english”…
              a.

            2. American is the de facto language of the web, perhaps, but it sure as hell isn’t English. E.g. try coding HTML in English and you won’t get very far (i.e. centre, colour, etc.)

  48. Interesting post – thanks. Looking over the collection of icons it seems to me that Google’s is the clearest – by tapping into the blue/underlined default link style, it’s visually clear that what it’s suggesting is a hyperlink. Could be worth exploring.

    1. I haven’t thought about that. It actually makes sense that the icon for a link is styled like a link. Thanks!

  49. Excellent post! Being a systems developer for a CMS mysel, i could definitely benefit alot from all you’re research, I would love to read your report some time!

Trackbacks

  1. [...] “Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them. [...]

  2. [...] “Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them. [...]

  3. [...] “Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them. [...]

  4. [...] “Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them. [...]

  5. [...] “Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them. [...]

  6. [...] “Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them. [...]

  7. [...] “Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them. [...]

  8. [...] “Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them. [...]

  9. [...] “Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them. [...]

  10. [...] “Usability &#1110n Icons,” Peter Steen Høgenhaug Icons &#1072r&#1077 used t&#959 illustrate a particular function, anything fr&#959m information t&#959 actions. Th&#1110&#1109 article &#1089l&#1072r&#1110f&#1110&#1077&#1109 wh&#1072t needs t&#959 b&#1077 considered wh&#1077n designing th&#1077m. [...]

  11. [...] “Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them. [...]

  12. [...] “Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them. [...]

  13. [...] “Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them. [...]

  14. [...] “Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them. [...]

  15. [...] “Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them. [...]

  16. [...]  Peter Steen Høgenhaug進行了一個測試,為了衡量人們如何理解一個CMS編輯器的icon。結果顯示:只有35%的使用者理解“插入連結“的icon,甚至是經典的“上一步”和“重做”icon也只有一半的使用者認識。 [...]

  17. [...]  Peter Steen Høgenhaug進行了一個測試,為了衡量人們如何理解一個CMS編輯器的icon。結果顯示:只有35%的使用者理解“插入連結“的icon,甚至是經典的“上一步”和“重做”icon也只有一半的使用者認識。 [...]

  18. [...] 丹麥設計師 Peter Steen Høgenhaug 曾在 2011 年進行一個測試,他準備了一些網頁介面上常用的圖示給受測者看,讓受測者辨別該圖示的意思。在這之前他必須先整理出大部份的設計是否具有共通性,像是網路上常見的代表「超連結」(hyperlink)的圖示,大多是使用鏈條的圖案,只有臉書使用了便條紙與圖釘的圖案來表示: [...]

  19. [...] Usability in Icons - In many apps, icons are used to illustrate a specific function — it can be used for everything from information to actions. But if the user doesn’t understand the icon, what’s the point? [...]

  20. [...] 原文链接:Usability in Icons 更多 document.getElementById("bdshell_js").src = "http://share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours(); UI Design 发表评论? [...]

  21. [...] 清晰性是只有文件才能表达出的一种境界。佛经里面也提到了文字般若,很难修行到的。相比起来,图标表达就更像牵着一只野兽,不容易控制,有时候会显得很冗余有时候会显得隐晦。 如一个放大镜图标,可以表达的意思是“缩放”,也可以表达“查找”的意思。一个向下的箭头,可以表达的意思是“下载”或者“保存”或就是“下拉”。一个回退箭头,用户并不知道是否可以保存自己的操作。X 有时候表示“关闭”有时候表示“取消“有时候表示“删除”。 有一个讨论中说到,如果你对微软World中的标准图标非常熟练,那么你已经中毒了,到了人群中会分不清左右。 还有“发送消息”功能,很少软件中会写着“发送消息”,一般是用一个右箭头或者一个信封图标,虽然这些图标都不能清晰的表达功能的意思,但是有时候为了界面美观,可能会牺牲清晰性。这也是一种折衷。 [...]

  22. [...] /الرموز وبين قابلية استخدام الموقع سنبحر قليلاً فى دراسة قام بها Peter Steen لدراسة علاقة الايقونات بقابلية [...]

  23. [...] /الرموز وبين قابلية استخدام الموقع سنبحر قليلاً فى دراسة قام بها Peter Steen لدراسة علاقة الايقونات بقابلية [...]

  24. [...] enjoyed this article on icon usability. User testing never ceases to amaze me (people are weird and think/ do unexpected things, as it [...]

  25. [...] Stiern – Usability in Icons [...]

  26. [...] на английском: Usability in Icons. Понравилось? Быть всегда в курсе новых [...]

  27. Our favorite tweets of the week Aug 22-Aug 28, 2011 | SEO For WEBSITES

    August 30, 2011 at 10:11 am

    [...] Usability in Icons – http://ow.ly/6caXj [...]

  28. [...] Usability in Icons | Stiern Länk-ikonen är kanske den svåraste att förstå, och känna igen? [...]

  29. [...] Usability of the Link IconAugust 19, 2011 at 10:43 am – Leave a CommentPeter Steen Høgenhaug has posted the results of a usability test focused “aimed at exploring how little documentation you could leave in a CMS, and still have [...]

  30. [...] Stiern has a great and really thoughtful piece about how we denote linking in CMS (and elsewhere around the web). The ubiquitous linking chain has been proven over and over to not be quite intuitive enough for non-geek CMS users (he outlines the study he did in the article), but no one seems quite sure what the next best thing is, that stays easy and icon-able. [...]

  31. [...] Booth publicerade en artikel om ikoner nyligen. Jag är lite insnöad på ikoner just [...]

  32. [...] Usability in Icons | Stiern [...]

  33. [...] Usability in Icons [...]