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
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
When grouped with Facebook and Twitter, the email icon often becomes a “Share this via email” button.
Contact
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?
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.
