Context by Proximity

A look at how the meaning of icons can change dramatically based on neighboring content.

The Issue with Icons

This is an interesting point that came up in a recent project I’m working on at One Mighty Roar. The site’s original design had a top navigation area that held all of the standard Twitter, RSS, and Facebook links. The last link’s image was an envelope.

The envelope has become a universal way of visualizing email. Just like shopping carts translated over from the real world, symbolizing electronic mail with an envelope just makes sense. Over the past few years however, email has come to be a delivery platform for more than simple Person A reaches Person B.

What’s in the Envelope?

As it turns out, the context of an email icon is determined by the surrounding icons. I’ve put together three examples without any text clues below to illustrate the point.

Subscribe

Subscribe Icon Grouping

When grouped with RSS and subscription options, the email icon becomes another way to reach a feed. This could be via newsletter or email updates.

Social

Social Icon Grouping

When grouped with Facebook and Twitter, the email icon often becomes a “Share this via email” button.

Contact

Contact Icon Grouping

When grouped alone, the email icon stands as a “Here’s how to reach us” standard. Most people would expect this link to bring up either a contact form or mailto link.

Check your Indicators

Realistically, icons won’t always be grouped so logically. With everything above in mind, take a look at this next combo. What might this image’s email icon do?

Mystery Icon Grouping

This brings up an interesting point to UI design. Icons aren’t always straightforward. The same issues that the email icon deals with can translate over to Twitter or Facebook links. Are you linking to your Twitter profile? Or offering a way to share the page via Twitter? There’s a difference between action and reference links.

In the example above of Twitter and Facebook, the reference variation would be links to the Twitter and Facebook accounts instead of the action variation where the icons are links to share.

I think it’s become important to include visual cues that show the exact nature of icons. This could come in form of a “Share This via…” section header for social icons, or even breaking free of the typical icon-based presentation for common site tasks.

I’m interested to hear if anyone else has run into a similar UX issue with their designs. How did you solve it? Drop us a comment below.

Banner icons are from the always-fantastic Social Network Icon Pack via Komodo Media.

Posted Monday, November 15th, 2010 · Back to Top

SPONSOR

Add Comment

23 Comments 11 Mentions

  1. mike i Author Editor

    I dealt with this exact issue the other day when adding icons to a footer for a client’s site. There was a twitter and facebook icon already, and i was adding a “sign up for email newsletter” envelope icon like you show above. When the envelope was next to the other 2 icons it looked like it was for a “share by email” link. I ended up giving some space and adding text “follow us!” and “free newsletter!” to make sure it was clear to everyone.

    ·

  2. Tessa Thornton Author Editor

    I was just pondering this question. Like when you have a twitter icon and it says “x followers” is it necessarily obvious that if you click the icon it will take you to the twitter page? For “share via” links I usually just put them on individual posts, not the whole website, I figure people want to share articles, not usually entire websites.

    ·

  3. Atikusdesign Author Editor

    This is a really interesting topic that I have had a lot of conversations about.

    The most recent was regarding the use of the same icon for different functions within the Twitter for iPad app.

    They use the, what I would call ‘share’ icon in 2 different places on the same page, with both icons having different functions.

    The context an icon is placed in makes a big difference but I think UI designers have to be careful not to rely on icons too much. Test Test Test to make sure things work as you expect.

    ·

  4. Dainis Graveris Author Editor

    Interesting, this is like figures of speech only in icons.

    ·

  5. diegocrusius Author Editor

    I think if you want to use the icon as a “share this via email”, you should use the same sharing ‘sub’-icon that windows uses when sharing files in your envelope, with that hand bellow.

    ·

  6. Derek Jensen Author Editor

    This was very inspiring!

    Sam,
    I’ve had a similar conversation with someone else about just what buttons to put on your site in terms of focus and importance.

    But, I’ve never thought about how each icon, along, will impact its use such as the envelope icon.

    Best,
    Derek

    ·

  7. Laurie Author Editor

    I think the email icon is exactly that, an email icon, regardless of the context, and should not be used for other things like sharing or subscriptions. Create a new “email icon” to represent those. You could still us the same envelop but layer something else on top to represent the share of subscribe context.

    ·

    • Pete Author Editor

      I agree with Laurie. I think its pretty universal that an envelope icon indicates email.

      Also, may i suggest that adding the “title” attribute to an “a” tag is a great way “to add information about the nature of a link” as described by the W3C: http://www.w3.org/TR/html401/struct/links.html#h-12.1.4

      ·

      • Zach Dunn Author Editor

        Laurie – In the ideal world, I would agree. However, since so many “Social Media Icon Packs” exist out there already with just an envelope, it’s unlikely that someone would create a new one for each specific purpose. The most common mixed icon I’ve seen is the RSS/Email overlay, which works well.

        The title attribute would certainly help for those who will hover on the link, but most users go strictly by visual cues.

        ·

  8. Brian Author Editor

    I see your point, and I agree to some extent. The grouping makes perfect sense, and in fact, my be how I attempt to treat the icons in my projects going forward. However, I believe that the majority of site visitors may assume it is an icon meant to contact via email, and not get the correlation we are trying to make with the grouping.

    You can see how I treated the icons on some of the sites I’ve designed here:
    http://www.splitelementdesign.com/webdesign.html

    ·

  9. technology review Author Editor

    Yes , I agree to the point that when an email icon associated with different icons its functionality behavior changes in a way its good and another way its embarrassing for the users

    ·

  10. nisa sanjaya Author Editor

    The context an icon is placed in makes a big difference but I think UI designers have to be careful not to rely on icons too much. Test Test Test to make sure things work as you expect.

    ·

  11. tütüne son Author Editor

    Thank you, very nice. However, some files can not be displayed on your website, be aware of.

    ·

  12. John Author Editor

    You could, for example, put a small ‘at’ (@) in the mail icon, very light and transparent to clarify it’s usage

    ·

  13. Webdesigner UX Author Editor

    Funny way of looking at the email icon, i found my in the same kind of mind set last, when i implemented share and reference icons. Thanks for the clean way to explain it.

    ·

  14. wholesale nike jordan Author Editor

    If your Riches are yours , why don’t you take them with you to the other world ?

    ·

  15. tütüne son Author Editor

    Thanks for the clean way to explain it.

    ·

  16. moedas pw Author Editor

    You have to believe in yourself . That’s the secret of success .

    ·

  17. rift platinum Author Editor

    You have to believe in yourself . That’s the secret of success

    ·

  18. Tree Line Trucks Author Editor

    very simple thank you

    ·

  19. CCNA Training Author Editor

    Is there ant tool for content ? please

    ·

  20. بهینه سازی سایت Author Editor

    very good thanks for sharing

    ·

  21. Zach Smith Author Editor

    Thanks for publishing another great article for us. This is best for any technology related blog.

    ·

 

Build Internet by One Mighty Roar. Since 2008.