Background
When clients show us their internal company dashboards and ask how to improve their user’s experience, I’m often surprised at the lack of icons used for reporting, especially executive reporting. Executives are busy people who need critical information but don’t have the time to review multiple spreadsheets.
That’s not to say execs don’t want access to the details behind reports. They do. But putting too much data or too many details on the dashboard is like putting the text of a novel on the cover of a book instead of the title.
What belongs on the dashboard? Icons representing the story told by critical organizational information.
Why icons versus words? Most of us retain visual elements better than words. A well-thought out icon can quickly and visually represent an object, action, idea, status or app. Icons are large enough to work well in a finger-friendly user interface and clickable with a mouse. They’re small, so they don’t take up a lot of visual real estate, even on a mobile screen. Most importantly, a good icon conveys meaning at a glance.
That sounds easy, but in practice, it can be challenging to create an icon that represents the same idea to all users, especially diverse groups.
Some icons, like the ubiquitous shopping cart, are recognized around the globe. We all know clicking on the cart takes us to a list of items we’ve set aside to buy. Once we move away from a fairly small list of universal icons ( home for the home page, LinkedIn’s square ,Amazon’s cart or Facebook emojis ), it gets tougher to make meaningful icons or to predict how people will interpret an icon.
Recently, I needed an icon to describe signing off on a process. I picked a pen drawing a squiggly line. It made sense to me. However, the client thought it looked like a part of the male anatomy – let’s just leave it there. Instead of the pen drawing a squiggly line, we used the tip of an antique ink well pen. It’s timeless and everyone knows what it is when they see it. It looks like a pen and can’t be confused with anything else.
There are two lessons to take away from that:
1. Always test an icon’s identity by asking people what they think the icon conveys. Be open to hearing that your icon means something completely different to someone else. If it doesn’t tell the right story, we should pick another icon. If your users aren’t especially homogeneous (think different countries, cultures, genders, knowledge or skills), test your icon with users representing each subgroup.
2. When people don’t know what your icon means, or they interpret it differently than you intended, the problem may be that you’re unclear about what you want the icon to symbolize. Go back and rethink the basic characteristics of the idea you’re conveying.
Finding the Perfect Icon
I spend a great deal of time finding the right icon or group of icons to tell the story when I’m working on data visualization projects. But I rarely construct a unique icon from scratch. There’s no need to do that when there are so many great low-cost and free icon sources. 1Rivet often uses the Noun Project’s library of downloadable icons. It’s free if you give the icon creator credit, but we use the pro version ($9.99 a month) because the icon creators contributing to the site are artists who deserve pay for their work. When selecting an icon it’s critical to consider size and color, too. Stick with a solid color, two-dimensional icon. Skip distracting multicolored, 3D or shadowed options. If you group icons, stick with a few colors that reflect your organizational brand.
See below:
Advanced Iconing
Although they might be two dimensional and single colors, icons don’t have to stay simple or static. When an icon represents an action or changing process, you can add a second dimension, such as size, to convey changes in the underlying data. Let’s say we’re using a hot air balloon to convey how your sales team is progressing in closing a consulting deal (this icon was definitely not chosen to allude to the fact that the large consulting firms we compete against are full of hot air). Hot air balloons can be small or large, so we could use the size of the hot air balloon icon to reflect the size of a sale.
See below:
Hot air balloons float, and we could use the idea of a rising or falling balloon to measure our confidence that a deal will close. A balloon that floats higher, closer to 100%, means the deal is closer than the deal represented by a balloon floating around 50%.
Let’s see it below:
When we have the balloon float and change size, the icon becomes powerful and conveys a deeper meaning. Now, the icon is showing both the size of the deal and our confidence it will close.
Would this work with a pig as an icon? Probably not, because pigs don’t fly, but pigs do have a size, so you could use a pig icon to show progress toward a measurable goal, like savings.
Here’s a pig broken down into multiple pieces to showcase how the saving are broken down:
Sometimes you do everything right, and the icon still doesn’t work for your users. I was redesigning of a set of icons for a company that reports data on mortgages. I was showing the difference between mortgages given to men and women. Originally, I was using the gender symbols for men and women.
This shows there are no absolutes when using icons. You’ve got to go with what’s right (and what makes sense) for your unique user base.
Whether you’re replacing legacy dashboards or creating new ones, let’s talk about how 1Rivet can create attractive, functional user interfaces that truly engage your internal and external audiences. Contact me at Eric.Middleton@1rivet.com.
