Dashboards That Pop: Icons
Welcome to the second installment of Dashboards That Pop. Today we will be talking about icons. Icons are used to communicate ideas visually. When done well, icons create a visually interesting and engaging dashboard, and help your users better understand and remember the data presented. Reading information takes more brain power than processing visual information. Remember, we’ve been looking at stuff longer than we’ve been reading stuff. This is especially true when you look at all of human history.
Let’s take a look at this dashboard that uses the Intermodal Passenger Connectivity Database in the ArcGIS Living Atlas to display the number of transportation modes available in various terminals in Connecticut, New York, and New Jersey.
Think about how long and how much of an effort it took you to get an idea of what data is being displayed. Also consider how interesting the dashboard is overall. Does it catch your eye and draw you in?
Now let’s incorporate some icons into the dashboard.
How does this dashboard compare to the first one? Can you immediately get an understanding of the data? Is it more interesting to look at?
Icon Best Practices
Clarity
In order to be successful, your icons must clearly be understood by your audience. Have you ever gone out to a new restaurant that has tried to get creative with their bathroom signs? Instead of the bathroom signs we all know, you are presented with an elephant and a potato (Don’t think too hard about this folks, it’s not supposed to make sense). I’m sure the designer thought it made perfect sense, but the rest of us are just left confused. Do not be that guy/gal.
If you are unsure of what a icons are commonly used to represent a specific idea, try googling your idea plus the word ‘icon’.
Complexity
Avoid overly complex icon designs and think about the size that the icon will be displayed. If your users can’t even make out what that fuzzy shape is, how can they be expected to decipher the meaning behind it?
Pop Quiz: What is this icon?
A mothy umbrella? A weird plant? Nobody knows! (Ok, I know. It's a vampire).
Accessibility
If you have an icon in your dashboard that is conveying a specific message, as opposed to being purely decorative, you should also include some descriptive text. If we look back at my second dashboard, we can see that I didn’t remove the travel type text once I added the icons.
Including the text ensures that my dashboard is accessible. Say I had an icon that completely relied upon an icon to provide context.
For someone who is visually impaired and using a screen reader to access the dashboard, that indicator might as well look like this.
Icons in ArcGIS Dashboards do not have alt text available for screen readers, so only ‘32’ will be read aloud to the user. Random numbers with zero context are not helpful. Including some descriptive text in your indicator ensures that everyone has the information they need to understand your dashboard.
Including text also ensures that any user who is confused about the meaning of the icon can simply use the text explanation instead.
If you want to see how your dashboard performs with a screen reader, you can use Edge’s Read Aloud tool to find out. Open your dashboard using Microsoft Edge. Click on the three dots in the corner and select Read Aloud.
Icon Types
I used a variety of different ‘icon types’ in my dashboard:
- Built-in
- Custom
- HTML symbols
Built-in Icons
These are the icons available to you in the icon selector. These are pretty straightforward; simply pick the icon you want to use.
In my dashboard, the air, rail, and bus icons are all built-in icons.
Custom Icons
If none of the built-in icons work, you can always add your own custom icon. This is a bit more complicated because you can’t just upload an icon. Instead, you need to copy the SVG code into the custom icon box.
SVGs are a vector-based image format. They are able to scale cleanly without the pixelation you can get with other image formats. You can find the SVG code of an SVG by opening it in a text editor. All of that text can then be copied and pasted into the custom icon box.
Tip: If you would like to change the icon color through the dashboard interface, or incorporate dynamically colored icons using Arcade, find the portion of the SVG code that starts with fill. Remove the hex code from the fill portion so it looks like fill=””.
In my dashboard, the ferry, bike, and state icons are all custom.
HTML Symbols
If you are wondering how I managed to get an icon into the top text of my Mode indicators, it is through the use of HTML Symbols. These are just Unicode text that can be copied and pasted anywhere you can add text. While the symbol options can be limited, they can come in handy. You can also use emojis in this manner as well.
Icon Tools and Resources
Online Icon Repositories
Be sure to follow any attribution rules and usage guidelines outlined on each site.
Symbols and Emojis
Happy Dashboarding!