Joyent

Joyent Weblog

Iconic

By justin 5 April 06

I have a huge amount of respect for designers like our very own Bryan Bell who can create a great icon that really communicates well inside a tiny 16–20px area, but let’s be honest, there’s a lot of awful, useless icons out there.

Icons can be wonderful things. The mind can respond really well to visual cues and symbolism, so a really good icon can help you find something in an interface really fast. A color, a shape, relative position or some other characteristic sets this particular icon apart from everything else on the page and when you need it, you can find it without really thinking about it.

A bunch of icons can also brighten up a dull interface, generally take up less room and provide that eye candy that clients and management seem to love. Hooray for the icon!

But an icon can’t solve everything.

New or infrequent users of an interface need to be able to absorb the controls and options fast – they’re not recognising icons, they’re deciphering them, so unless the icon follows a completely obvious or ubiquitous pattern (like a trash can for deleting something, or a plus sign for adding something, or a little house for “home”, or a magnifying glass for searching) you really need words as well.

Call me a minimalist, call me boring and practical, whatever, but sometimes the best way to say something is with a word.


  1. At first I thought this post referred to the favicon of this site and thought “oh yes, that required real talent to make.”

    — Johan Svensson    840 days ago    #

  2. Don’t even get me started on social bookmarking icons a lot of people seem to be pasting all over their blogs. Seriously, I haven’t a clue what half of them are – and I don’t care.

    — Adam Schillng    840 days ago    #

  3. Speaking as someone who has been working on UI design for a web app, I’ve come up with a sort of working rule for icon use. That is that the utility of icons and “word buttons” is limited by the degree of competition that each faces in the overall UI zoo. Icon clutter can make an interface nearly impossible to decipher at first, but once someone does attain some familiarity with your interface, they are more instantly recognizable.

    In a long list of buttons, such as on a toolbar, I think icons are almost essential to prevent the interface from seeming like a paragraph. That’s not to say that you shouldn’t also use words where necessary, but words alone are just as susceptible to incomprehension because people don’t really read an interface.

    Words are more effective when used in isolation; icons are more effective when used in competition.

    — Luke Andrews    840 days ago    #

  4. There is a good point to be made about using icons to indicate availability or remind people of functionality, they do not usually aid discovery, hence the use of tooltips everywhere.
    Language has its place, but you have to pick one language then, or offer multilingual support in your application, which is feasible for desktop apps, but less so for web based ones.

    — Gavin Bell    840 days ago    #

  5. I don’t think there’s any difference in the feasibility of multilingual application that’s desktop or web based—you either go to the trouble of doing it, or you don’t. But you raise an interesting point about words — you have to pick a language, whereas a well-designed (where feasible) icon speaks in hundreds of languages.

    — Justin French    840 days ago    #

  6. A big problem I have with icons is that some applications/sites use too many. This leads to icons used for functions that very few people use.

    Take ‘Word’ for example. We all understand Bold, Italic, Underline, and the justify icons. But I’m looking now and I see one that looks like a document symbol with an A inside and a box around part of the A that makes the A red. I hover over it and it says “Format Gallery”. Is there not a way to represent that easier?

    Also, am I the only one who can’t stand ‘Save’, ‘Print’, ‘New Document’, and ‘Open’ in toolbars?

    — Matt Thomas    840 days ago    #

  7. I somewhat agree with you. I tend to think that a good balance between text and images is the key concept, quoting Barbara Kuhr: “Words and pictures can never be separated” (from The Art & Science of Web Design, J. Veen, page 16). Personally I try to stay away of “over-iconized” visual strategies, I mean, it’s quite interesting how different your approach would be if you’d be designing a standalone application (e.g. a desktop app) which means almost total control over the GIU environment, or, on the other hand, if you’d be dealing with a web application, which mostly involves a web browser, then the environment changes dramatically and you’d loose a lot of control over the interface. To illustrate this let’s just take a look at my Firefox Bookmarks Toolbar right now, I mean there’s at least three different “B” icons, that is, Blogger, Bloglines, Blogsome, so on, then, given that you hipotetically choose a “captionless” toolbar configuration, chances are that you’d take some time to learn “which is what” there. Anyway, to wrap up IMO web apps should use both icons and text to deliver quality in terms of user experience.

    — Nano Taboada    815 days ago    #

Commenting is closed for this article.