Icons Context by Proximity

proximityProximity, usability and interactivity are most vital concept in modern web design. They affect web design in several manners. Yet they neglected by most of us. In this article, we have taken a review on proximity regarding icons in web layout. Although Icons don’t carry universal meaning, in this shorts review, you will learn that how the meaning of icons can change noticeably based on adjacent content.

The Issue with Icons

This is very interesting point that comes up in focus while you redesign a web layout. Yet it is neglected so many times. Throughout recent years, almost every original design had a top navigation area that bound all of the standard Twitter, RSS, and Facebook links.

When you see a icon image of envelope, you will easily notice it as email link. The envelope has become a universal symbol of visualizing email. Just like shopping carts translated over from the real world, visualizing 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 physical delivery of letter of any mail.

What’s In the Envelope?

As it turns out, the framework of an email icon is determined by the surrounding icons. To give simple narration, here are three examples without any text clues below to illustrate the point.



When envelop icon is grouped with RSS and subscription options, the email icon becomes another way to show subscribe link of a feed. It could be via newsletter or email updates.



And when it is grouped with Facebook and Twitter, the email icon often becomes a “Share this via email” button.



When this icon is placed alone, the email icon stands as a “Reach Us” or “Contact Us” standard. Most people would expect this link to show up either a contact form or a mailto link.

Check Out Your Indicators of Iconic Element


Most of web designers probably don’t group icons so logically. While keeping everything in mind, take a look at the next grouped icons.

Above grouped icons brings up an interesting point to UI design. Icons aren’t always clear-cut and easy to understand. The same issues that the email icon deals with can translate over to Twitter or Facebook links. Linking a profile on Twitter/Facebook and offering a way to share the page via Twitter/Facebook are two different things. There’s a lots of difference between action and reference links. Remember that Twitter can have both a profile link and action.

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

Hence, it is became important to include a visual indication that show the exact behavior 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 would like to hear solutions if anyone else have regarding similar UX issues. Just write us a comment below.