Home

Luis Abreu

Product Design

Email Twitter

Optimizing UI Icons for UIs

Is speed of recognition the only metric in UI icon design?

Jun 15, 2014

3 min read

This is a quick response to this really nice and comprehensive article from Alla Kholmatova titled “Optimizing UI icons for faster recognition”.

The argument in that article is that speed of recognition is an important metric to take into account when designing icons for User Interfaces. There’s also a mention of an older article simply titled “Hollow Icons” by Aubrey Johnson.

It should also be noted that there was no significant difference between filled vs line icons in Alla’s, or this other research conducted by Curt Arledge.

I totally agree that speed of recognition is indeed a very valuable metric, but I would like to add something more.

I’ve recently attended a talk by Evgenia Grinblo which echoed some of my thoughts on how people approach (User) Experience Design these days.

The gist of her talk is that we tend not to drop old knowledge from areas such as print or graphic design. and that is preventing us from becoming better designers.

In her presentation, she explains how important it is to learn about the medium you’re designing for. Understand how certain design decisions can shorten the phone’s battery life — a tool that can be essential in case of an emergency.

Before reading Alla’s article, I was writing one on Privacy in iOS 8. For research, I watched over 17 hours of WWDC 2014 videos so I could understand how iOS 8 and OS X Yosemite will impact my work as a Designer.

On one of the talks — Designing Intuitive User Experiences, Mike Stern, when talking about navigation best practices, mentions how important it is for navigation icons to make selection obvious.

This is where the legacy knowledge needs to be updated. Traditional semiotics deals with static icons — such as road signs, where there’s no dynamism or user interaction. Graphic design is also useless in the sense a print newspaper or poster has only a single state and no interactivity whatsoever.

User Interfaces are not immutable, they convey battery status, synchronization progress and much more.

Accessibility

Accessibility is something we have to consider, i.e.: we cannot rely on just color to differentiate between states.

I’d like to remind you that 1 in 12 people have some kind of colorblindness, and we’re not always aware of it as Mark Walker very well pointed out in the latest UX Brighton on Accessibility. Accessibility isn’t an “Us vs Them” scenario, eventually, with age, even people with 20/20 sigh might end up needing glasses.

Going back to Mike’s point about making selection obvious: differentiate states not just through color, but through both shape and color.

Using only Color to convey state

a grid of star icons with normal and active states conveyed only through color and how they appear to a person without colorblindness

Notice the difference? Now try this:

a grid of star icons with normal and active states conveyed only through color and how they might appear to a colorblind person

That’s how it looks for the millions of perfectly normal people with Pronatopia. I use Sim Daltonism to validate my work and prevent situations like this from happening.

Using Color and Shape

a star icon in its normal and active state, the active state using shape and color to differentiate itself

Even without color information, the active state should still be substantially different for people with colorblindness. For others the line icon won’t represent a significant challenge and perfectly fulfill its purpose.

Conclusion

My point is: (User) Experience Design requires a different mindset, it requires an holistic approach instead of focusing too much on a single metric such as Efficiency or part of the process such as Research.

Sometimes it’s all about making good decisions.

Note: I’m not advocating for line icons to be used in all situations, they’re used to demonstrate the use of shape and color.

Hope this is useful and clear, if you have any comments feel free to ping me on Twitter over at @lmjabreu.

latest articles

All articles

latest work

All work