divider
insights
Are You Using Icons to Boost Your User Experience?
fifth
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 linkedin,Amazon’s cart cartor Facebook emojisemoticons ), 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:
icon home icon home icon home
BEST
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:
group togather
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:
deal togather
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:
pig broken
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.
genders
When I showed those symbols to the client, I realized that you may not recognize them if you weren’t around in the 1970s or you didn’t take a women’s studies class in college. Even if you do know what they are, you might not remember which one symbolizes women or men. I ended up using a man and woman outline.
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.
About the Author: Eric Middleton
Embodying the 1Rivet culture, Eric asks himself and others daily: "What have you done for the client today?" He’s a passionate leader who brings an innovative approach and a burst of energy to every client organization.
An expert in program management, data analytics, business analysis and custom development, Eric’s known for his pragmatic approach and his ability to leverage proven methodologies to get things done faster, without compromising quality.
During his nearly two decades of successfully integrating complex IT systems during mergers, acquisitions and divestitures, he’s served dozens of companies in the banking, utility and auto industries.
Prior to founding 1Rivet, Eric was director of enterprise program management at Fannie Mae, director of enterprise program management for SapientNitro and spent as decade as a senior manager at Accenture.
He earned a bachelor’s degree in marketing from Pennsylvania State University, State College, PA, where he enjoyed attending Nittany Lions football games.
When Eric’s not working, you can find him jogging, skiing, woodworking and collecting vintage arcade games from the 1920s-1950s. A Maryland native, Eric lives in Washington, D.C. with his wife, two children, and black lab, Basil.
About 1Rivet
Working from offices in Washington, D.C., New York, Toronto and Valsad, India, the company’s three core divisions offer:
Strategic Technology
IT mergers and acquisitions, systems integration, data integration, data visualization and analytics, delivery management and customer experience.
Outsourcing Services
Development and testing, project management, customer service, IT help desks, mailroom shipping and receiving, administrative assistants and reception, concierge, facilities, MFD management and key ops, conference room management, imaging and records management, audio visual and graphic design.
Talent Acquisition
Strategic hires, contract-to-hires and scalable workforce hires.

Contact Us

separator

Let's Get Acquainted

CONTACT INFO

icon location
Phone
Phone No :
icon email
Email :
info@1rivet.com