Advertisement
User Experience

Use and Abuse of Icons in the Modern Age

by

The number of icons we see on daily basis is amazing. They are everywhere around us, both online and offline. We love to use them. They enhance the aesthetic of our sites and can provide a better user experience. Sometimes however, we forget the reason behind using an icon, and that's when it becomes easy for icons to lose their effectiveness.


Universal Communication Mechanism

The primary attribute for icons is being a common visual language which effectively bridges language gaps. They're instantaneously recognizable and remove open interpretation. This makes them perfect for a digital context, as the Internet is shared by many people and their corresponding cultures.

Screenshot of The Noun Project

Screenshot of The Noun Project

Designing an icon which is universally readable is still a huge challenge. Our cultures all have graphic conventions which can lead to confusion about the meaning behind some custom-designed icons.

Exploring a new interface consisting of many icons can be challenging at first sight. It takes us a while to become aware of where everything is and get used to each icon's meaning. For this reason, labeling icons (using the title attribute, or perhaps custom tooltips) will improve the effectiveness for learning a new interface and is considered a best practice. In actual fact, it's widely accepted that icons in combination with labels are more quickly processed by users.


Create Visual Interest

One of the most common mistakes we make is that we use too many icons in a given setting. Icons are most effective when they improve visual interest and grab the user's attention. They help guide users while they're navigating a page. Use too many icons and they'll become nothing more than decoration. Their use for navigation on a webpage can often cause dilution.

Facebook uses so many icons, they act more as decoration.

Facebook uses so many icons, they no longer serve to create visual interest but act more as decoration.
icons-windows

Certain Windows interfaces use complicated icons, which fail to provide a clean interface and thus decrease the ease of use.

By limiting the amount of icons you use, you will grab the attention of the user faster, making navigation easier.

The footer of The Verge makes cleverly use of icons. Here, the icons have a clear added value and it doesn't feel as cluttered.

The footer of The Verge makes clever use of icons. Here, the icons have a clear added value and the layout doesn't feel cluttered.
In this screenshot of Behance, the icons are carefully balanced to understand the page quicker.

In this screenshot of Behance, the icons are carefully balanced to make understanding the page quicker.
Even though this artwork page on Artsy contains a lot of icons, because of the simple branding of the website, the icons work perfectly to help the user make navigation choices.

Even though this artwork page on Artsy contains a lot of icons, because of the simple branding of the website, the icons work perfectly to help the user make navigation choices.

Icon kits are great, but sometimes it's better to try and design your own icons, or edit existing icons (with permission) to suit your needs. The look and feel of a website should be reflected in the icons you use. As you can see in the examples, this shouldn't necessarily be a very difficult task, and it's definitely something you can keep in mind to improve the branding of your website. It's the little details which make the difference between a great website and an exceptional website.

On the other hand, creating a contrast from the regular branding can make it even easier to build visual interest. Here's an example from Twitter. See how the button to write a tweet stands out?

icons-twitter

In terms of visuals, interface icons should be varied enough to be distinctive, whilst being consistent enough to work as a cohesive whole.

The biggest pitfall is in using icons because they offer up an aesthetic, not because they communicate. Great icons are both visually pleasing and communicate with users.


Provide Functionality & Feedback

Without icons, we would be obliged to use text to describe certain functionality to our users. Whilst this makes interfaces accessible, can you imagine a video player only using text that says "play", "pause", "like", "fullscreen"? Icons provide familiar metaphors to communicate quickly.

The power of icons is used to grasp how this video player works pretty quickly and efficiently.

The power of icons is used to grasp how this video player works pretty quickly and efficiently.
The combination of color and a recognizable icon provides feedback - something's wrong.

The combination of color and a recognizable icon provides feedback: something's wrong.

It's also possible to give users feedback through icons, usually done in combination with color. For example, a green checkmark shows users that a username is available. A cross in a red box tells the user they didn't re-enter a new password correctly. Icons can add wonderful support, especially if applied real time. In the example above, I get notified if I'm entering something which isn't a URL real time. The concept behind this has many potential purposes, all of which improve user experience.


Technical Constraints

We're now living in a time with different screen sizes, fluid layouts and varying pixel densities. This has had a major influence in how we deal with images and thus it only makes sense that it also influences how we deal with icons.

We are increasingly in the habit of optimizing images for different devices, but we can also tailor our icons to create a flawless experience. A particular icon may work extremely well at 200px, but is its message still clearly conveyed at 12px, or does its detail become blurred? Recently, we published an article that deals with responsive iconography, explaining this concept further.


Ignoring Conventions

Icons are abused by ignoring common practices. When users become accustomed to recognising an icon as meaning something, altering the action behind that icon is extremely confusing.

For this reason, standards are continually being proposed and existing iconography refined. Take a look at what Andy Clarke has to say about an icon standard for responsive navigation .

The most important rule remains though: don't step away from existing user patterns. Although a fancy new menu icon sounds like a great way to challenge your design skills and come up with a unique design, at the same time it could be a disaster for usability.

Discussing Hollow Icons

More recently, a blog post published on Medium criticized the use of hollow icons, after the recent release of iOS 7. It claimed that the use of hollow icons require more "work" from users. This blog post has been widely discussed in the web design community. There are different, interesting point of views. Though, what we all agree on is the fact that iconography should make sense to the user. Which, of course, is all about conventions.

Aubrey Johnson's animated GIF, demonstrating the work our brain's undertake in processing icons
Aubrey Johnson's animated GIF, demonstrating the work our brains undertake in processing icons

Conclusion

I had one goal in mind when writing this article: to remind us all to ask ourselves why we're using icons on websites we create. For many of us it has become an automatisation to include them in our projects as a matter of course. Next time, ask yourself what the added value of that extra icon is and how it compares to the other icons on the website.


Useful Resources

Related Posts
  • Web Design
    Case Studies
    Exploring the Human-Centric WebHuman retina
    Some time ago I published an article describing a workflow which supports and emphasizes human-centric thinking in web design. In this article, we'll examining websites that apply this methodology and see how human-centric design has contributed to their success.Read More…
  • Web Design
    Design Theory
    Understanding the Composite Parts of Your DesignFourier retina
    In this article we're going to look at a simple analogy which will illustrate effective ways of communicating through design. Once we've established the idea, we'll take a look at some familiar examples to drive the point home.Read More…
  • Code
    Theory
    Mobile & Emotional DesignEmotional design 400
    The process of designing an application, both functionally and aesthetically, has a large impact on how users feel about the final product. Emotional design can help to improve the user experience significantly. In this article, I will talk about what emotional design is, how you can apply it, and give some examples of applications that already implement emotional design.Read More…
  • Web Design
    User Experience
    The Finer Details of UX for KidsUx kids 2 retina
    In the previous article we discussed what we mean when we refer to "kids", the unique challenges they bring, as well as some key considerations when designing UX for kids. In this post we'll discuss items UX professionals should pay close attention to after they hand off their formal UX.Read More…
  • Web Design
    Design Theory
    Building Visual Hierarchy into Your DesignsDsfd hierarchy visual retina
    It’s important to remember that hierarchy has not only to do with content and the words that you have on a page. The imagery you include in your designs, from photos through to icons, buttons and any other visual elements other than text, has a big impact on the hierarchy and perception of your website.Read More…
  • Web Design
    Design Theory
    The Future of User InterfacesInterface retina
    We are web designers and developers. As obvious as our work is (we build interactive media applications) there's a deeper meaning to what we do. We analyze design problems and explore different concepts to solve them. This also means that we think of the communication between a device and the user. We develop that communication. We design what the user sees and does.Read More…