Are your icons working for you?

Icons and infographics are so integral to all GUIs (OS’s and online) that, like the street signs outside your window, we hardly notice them, even when we’re using them. And that’s exactly the way it really should be. The first time we see one it should help explain a concept behind a menu item, button or link — perhaps with a shopping cart silhouette next to a purchase option or a disk next to the ‘save’ option. After the first time, we then tend to use them as flags or landmarks to move around interfaces we are familiar with.

However, there are time when that imagery can work against what you’re trying to achieve. Sometimes it can be as simple as emphasizing the wrong part of an interaction. In an online shopping situation, do you mark the ‘BUY’ button with coins or bills — emphasizing what the user is losing — or do you associate the process with the shopping cart or bag, emphasizing what your user is gaining. We don’t have to bug the Amazon board room to know the answer to that one.

I saw another case in point today. About a month ago I installed a new Antispam extension for Thunderbird — the curiously named ‘Spamato‘. The system works nicely by combining a number of techniques and allowing you to adjust the relative influence of each one. The system learns quickly, but still requires you to manually tag good and bad mail for it to learn from.

While the decisions it made were generally excellent, I had a small but nagging issue. Every time I went to mark an email as spam, I felt a strange sense of unease. Often I’d find myself hovering over that ‘SPAM’ button, wanting to push it, but with a nagging doubt, which I could never quite put my finger on. I felt like I was doing something wrong, but I couldn’t figure out why.

Finally, I took a moment to analyze what was happening and figured it out.

The text on the button is fine — it say ‘Spam’. Simple and succinct. However the icon is of an envelope overlapped by the classic red, barred circle — the universal symbol for ‘Don’t’ or ‘No‘ or ‘Forbidden‘. Read together, you could interpret the imagery as ‘No Mail‘ or ‘Not Mail‘ — one way of describing spam, I guess.

Spamato's antispam icons

However, in the setting of an email client, the iconic image of an envelope is used so often that it almost loses it’s meaning. Envelope icons are used, naturally enough, throughout all levels of the application, and there are six more just on the main navigation panel.

So, when I hover my mouse over that button, what message am I subconsciously getting?

The big red ‘Not‘ symbol and the word ‘Spam‘. My conscious mind knows from experience that this is the Spam tagging button, but somewhere deeper, a part of my brain is screaming ‘No! It says NOT SPAM!!!‘. Precisely the opposite result to what the icon is trying to achieve.

Likewise, the accompanying button for tagging ‘good mail’ is marked with the negative ‘Not Spam’ label, but then paired with a positive, affirming green tick. Not quite as psychologically potent as that red circle device, but still counterintuitive to my way of thinking, anyway.

I’ve got an idea these icons are actually generic and used in other antispam extensions including Spambayes so they’ve made their way onto a lot of desktops.

So, am I being to too picky? Is it just me?

I might put some thought into designing some new icons that support their labels a little more. In fact maybe new labels might make sense. ‘Good’ and ‘bad’ are simple concepts that are more deeply wired into our heads than ‘spam’ and ‘Not spam’, so maybe it makes sense to tap into those deeper ‘gut feelings’.

Perhaps you have some ideas yourself? I’d be interested to see some other approaches.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.deanclatworthy.com Dean C

    I agree entirely with you Alex!

  • Stewart Pratt

    “So, am I being to too picky? Is it just me?”

    Not at all. It screams wrong to me as well, and I think it’s far from uncommon for developers to produce confusing implementations of marking a ‘negative’ flag like this.

    My first thought would be be to replace the red glyph with a thumbs down and the green with a thumbs up. I’m not sure that’s ideal, but it’s better. I guess there would be trademark issues with showing a tin of Spam and a tin of Spam with a cross through it :)

  • http://www.sitepoint.com/ mattymcg

    Interesting. I still struggle with the default “spam” button on Thunderbird, both on Windows (a flaming fire) and Mac (what looks like a recycling bin). So to be fair to the developers of Spamato, it’s clearly not an easy problem to solve. What is the best graphic to use for “mark as spam”?

  • http://www.tyssendesign.com.au Tyssen

    What is the best graphic to use for “mark as spam”?

    The graphic that Opera uses is of a box with a skull & crossbones on it. Seems like a good choice to me.

  • Stewart Pratt

    a box with a skull & crossbones on it

    But that might be the icon for buried treasure :)

  • http://www.sitepoint.com/ Kevin Yank

    The “Not Spam” label should definitely change. The ThunderBayes extension I use has the same green check mark icon, but with the label “Ham”. It’s better, but too obscure.

    Something like “Good” or “Allow” would be much closer to the mark. Can anyone think of a layperson-friendly antonym for “Spam”?

  • http://www.domedia.org/ junjun

    But that might be the icon for buried treasure :)

    Your email client has buried treasures?

  • http://www.sitepoint.com/ Kevin Yank

    SitePoint author Ian Lloyd had a similar criticism of an icon in Apple’s newly-released iPhoto 8.

  • http://www.donnellanswebservices.co.uk spence_noodle

    The icon for “spam”, should be an icon of the tin of spam.

  • Joshua Paine

    Unlike mattymcg above, I’ve thought the default spam icon (a roaring flame) was brilliant from the first moment I saw it: “Yes! That’s exactly what I’d like to do to this junk mail!”

    One thing’s for sure: the default icon will be more familiar to Thunderbird users than anything an extension dev could come up with. So why on earth would you setup a mail client to now have two different button[s/ sets] with different graphics to perform the same task? Thunderbird’s default single two-mode button (with unchanging graphic, only changing label) is probably worse than dedicated spam/no spam buttons, so I think the ideal setup would have made the built-in button inaccessible but added “Junk” and “Not Junk” icons with the same flame for Junk and (perhaps) something analogous for Not Junk–a moderately happy smiley? a glass of water? I resist the urge to simplify “Not Junk” to “Good” or some such, because it annoys me when programs want to specify how I feel about something. If your friend wrote a group email to say that his child had died, it would be ironic to the point of painful to correct a spam misfiling by saying the message was “Good”. (MSIE’s “Favorites” bother me for the same reason: the login for my online banking is only a “favorite” when business is good; this article with which I vehemently disagree is not a favorite; etc..)

    All that said, I’ve turned off Thunderbird’s junk mail filing completely since I installed ASSP on my mail server.

  • kenoa

    Great to find this discussion about design decisions of spam buttons. We have a similar Feature Request in the Spamato project and I guess we will make some changes in the next release. However, I am still not sure about the details… but discussions like this will help to build something better, no questions. Thanks!

  • http://www.sitepoint.com AlexW

    I’d probably avoid the visual association of mail with meat products. Firstly the spam canned meat product isn’t sold everywhere on earth, so many areas would have no historical setting to use to understand what the icon means. It’s a pretty marginal product these days anyway so many people could have walked past it in stores for 25 years without ever noticing it.

    Secondly the ‘Ham/Spam’ assumes ham is good and spam is bad. If you’re vegetarian, or Jewish or just don’t like pork, it would feel wrong associating a food you dislike with mail you like.

    I think my spam button would be a dirty, grimy, disheveled looking letter — perhaps slimey green, brown stained, crumpled and with flies buzzing about it. Good mail would glow blue-white with radiant light beams glinting from it.

    Really tap into that pure good vs dirty bad feel.

  • http://www.sitepoint.com AlexW

    Ok, here’s a quick mockup I threw together this morning for the spam button. It looks pretty gross, but that fits with what we think about spam.

    http://www.sitepoint.com/images/blogs/yuck.png

    It needs a fair bit of polishing and simplification to get it to work better at the smaller size, but I’m happy with the basic feel.

  • LiQ

    Your email client has buried treasures?

    It most certainly does! Search for “Pr0n” or “Funny videos” and it’s all there ;)

  • Louis S

    I really like the mockup you made. Like you said, it’s gross, and I’m not sure I would want to see it in my email client every day, but any ambiguity there may have been is gone. Is it spam? Yes. Click.

  • ryannj

    Can’t we just call it “Junk”? It seems as though there are more associations we can make with “Junk” than “Spam”. Is there a difference between the two? I noticed that your mockup also has a button for Junk. What’s the difference?

  • http://www.sitepoint.com AlexW

    Personally I quite like the flame icon, but I’m not so keen on using the word ‘Junk’. The words ‘Junk’ and ‘trash’ are often entirely interchangable and the trash can metaphor has been used since at least the early 80’s macs to label stuff that no longer has value – often that will include files/mail you wanted, but don’t need any more.

    Ideally I wouldn’t want to risk confusing mail I never want to see (spam) with good mail I’m just cleaning up.

  • David

    The flame icon appears to be appreciated because it illustrates what you want to do with the mail. Another idea along those lines might be a big foot or hammer smashing down on the envelope.

  • CptHightop

    No Alex, you’re not being too picky. Part of good UI design is making the UI intuitive to use, as you have already pointed out.

    While the choice of icons is definitely not a good one, keep in mind that most of the people who design plug-ins are developers not designers. Many of them have probably never really thought of bringing a designer on board either. These people are usually focused on what they are developing and give the design aspect of it little if any thought.

    So how do we go about improving the designs of free/open-source software? Maybe as designers, we should volunteer our time, as these developers have, and help them create better designs for the UIs they are developing?

    BTW, I personally think that as far as the aforementioned icons go, the ubiquitous red circle with a line through it, and nothing else accompanying it, would be a good choice for the Spam icon (its something you don’t want), while a lone green check mark would be a good choice for the mail you want to keep. In my mind, icons should be as simple as possible while conveying as much as possible. Given the context, an email client and the associated spam plug-in, I believe that would be pretty intuitive.

  • stoons

    hmmm… I hadn’t much considered my Incredimail “Report as Junk” icon
    http://www.stoons.ca/spam-junk.jpg

    Looking at it, it doesn’t make much sense to me. Is that supposed to be a “spy”?

    I like your spam/not spam icons.

  • sharpize

    I agree but I don’t think the tick for ‘ok’ posts would save me rather than loose me. Imagining that I am quite tired and have had icons in my face all day I would probably hover over the red ‘no’/spam and just leave it for another day.

    A good icon for that in my humble opinion would be an envelope behind bars! haha. Possibly a halo or wings over the positive mail. But not horns for negative because calling something devilish can actually be construed as a good thing too.

  • redwall_hp

    Mozilla could change the spam icons to be cans of SPAM, with checkmarks/”x”s.

  • Anonymous

    CptHightop: Removing the text would be worse – you would have to guess or look up which context the program was using the first time, and remember it or guess or look it up again subsequently. Do the symbols take the default as good mail or spam? Does the green tick mean “yes, this is good mail” or does it mean “yes, it is safe to delete this as it is spam”? Does the red line and circle mean “no, this is not good mail” or does it mean “no, don’t delete this, it’s not spam”?

    Yes/No (or tick/cross, thumbs up/down etc.) are rarely intuitive by themselves, they need context unambiguously defined. As it says in the original article – even when you know the context, you can still have a nagging doubt if there is space for ambiguity, and that’s about as unintuitive as you can get.

  • http://www.jtresidder.com/ jtresidder

    Pfff, typo’d my password and ending up posting anonymously. The above post was mine – I have nothing to hide! ;)

  • inLip

    I think the spam icon should be made to look more like spam. best way i see it, is a simple small back font icon that reads ‘spam’ which highlights. meh…but that’s just me.