Dashboards That Pop: Color
Hi everyone! I’m Jen, a Technical Consult that focuses on app configuration. I’ve become a bit notorious amongst my team for my stockpile of design tips, tricks, and tools. I thought I would share some of these with you all while I’m between projects. This series, Dashboards That Pop, will focus on ArcGIS Dashboards, with each individual blog focusing on a specific design topic.
Today we’ll talk about color and how you can break away from the default color palettes. Conscious use of color helps your dashboard stand apart from the crowd and gives it an extra level of polish.
Here’s a dashboard I put together that explores non-earthquake seismic activity using the Global Earthquake Archive data from the Living Atlas. In this dashboard, I used mostly the default options, including:
- Organization's Default Basemap
- Symbology Colors
- Chart Colors
- Dashboard ‘Dark’ Theme
While it’s not bad, it could be so much better. There are some issues here that can be a bit confusing to users. The charts and the map are all symbolized by Event Type. The colors are similar, but slightly different. They also don’t correspond at all. Red on the charts represents ‘Volcanic Eruptions’, but the somewhat darker red in the map symbolizes ‘Nuclear Explosions’. Every element needs its own legend because the colors are not consistent. Not only does this take up valuable real estate, but it also requires more effort from users to really understand what the data is showing them.
Now let’s look at a version of that dashboard where I made conscious color decisions that were consistently applied.
What a difference! Spending a little bit more time considering color has turned our serviceable dashboard into a finished product. While the data is the same, this second dashboard is more inviting and easier for users to comprehend.
Color Decision Points
Basemap
I started thinking about my Dashboard color palette long before I even started building out my dashboard. I knew I wanted to use a ‘dark’ theme for my dashboard, so I used a dark basemap that would complement the data and the dashboard.
None of the basemaps match your dashboard vision? Add John Nelson’s Global Background layer to your map and change the color to match your color palette. Experiment with the different blend modes and transparency settings. Even adding a subtle tint to the basemap helps create a cohesive look. I want my map to feel like a part of my dashboard, and not something completely different thrown into the dashboard.
Category Colors
Once I decided upon my category colors, I stuck with them. The event type color is the same in the map, donut chart, serial chart, and list. Not only does this look nice, but it also creates ‘visual cues’. These visual cues increase a user’s understanding and help with recall. The meaning behind the color is reinforced every time they interact with one of these elements. They can move throughout the dashboard focusing on the data instead of constantly having to read or look up what each element’s color choices are.
This also allows me to get away with removing various legends. The colors are consistent, so the pie chart legend applies to the rest of the elements. I now have room to add additional information in the form of a list.
Dashboard Theme
I tweaked the dashboard dark theme a bit based on the colors from my basemap. I used a color picker extension to grab the hex colors of the water and land. I then implemented those as the element background and dashboard background colors. You can really see how this slight change allows my map to melt into the dashboard when we zoom all the way out.
I also changed the text color to one that compliments the rest of my color palette and applied that color to element borders. When selecting colors for general text or elements that do not use your established category, you want something that coordinates with your category colors, but is not easily confused with them.
My Go-To Color Tools
Color Picker
I use a color picker browser extension to grab and match colors from a variety of sources. This is especially helpful when trying to design something that matches a company website or brand. If your organization blocks browser extensions or you want to grab a color from a non-browser-based application, you can cheat using built-in tools. Take a screenshot of the color you want to grab and open it in Paint 3D. Use the color picker in Paint 3D to grab the hex code.
Palette Generator
There are some people who just instinctively know what colors go together. I am not one of those people, so I cheat and use a color palette generator. Currently, my favorite one is Coolors. You can start with a specific color and ‘lock it’. Then simply press the space bar to see matching colors. When you like one, lock it in. Continue until you have your palette.
Important: Use the glasses icon to see how your colors will look to folks with color blindness and tweak your colors accordingly.
Contrast Checker
A must for using colors with text. If you don’t have enough contrast between your background color and your text color, your text will be difficult to read, especially for folks who are vision impaired.
Once again, I like to use Coolors. If your colors do not pass, you can click the ‘Click to fix’ link and get color recommendations based on your input colors.
Add your color related tips and tools in the comments.
Happy Dashboarding!