Lesson 6 · Module 4: Advanced Formatting and Data Expressions
Designing for readability: color, visual hierarchy and number formats for executives
Video coming soon
Learn it with your tutor on the live board
Key points from the video
The ten-second briefing
- A storm knocks out power across the service area
- The COO has ten seconds before a press call
- The dashboard has 14 colors and 3 decimal places
- Six indicators, all the same size, no clear headline
- The data was right, but nobody could read it
What you will learn
- Build a visual hierarchy so the headline number wins
- Use color with meaning, and only where it matters
- Format numbers so executives read them in one glance
Visual hierarchy: what gets seen first
- Hierarchy = the order the eye reads the screen
- Top left, biggest, boldest is read first
- Headline KPI, then trend, then map, then detail
- One headline per dashboard
Color with meaning
- Most elements neutral: grays and one brand color
- Red only for a problem, green only for recovered
- Same meaning on every element and every page
- Pair color with a word or icon, never color alone
Numbers an executive reads at a glance
- 48,213 customers out -> 48.2K
- 137 crews deployed -> 137
- $2,360,000 estimated cost -> $2.4M
- Rule: divide by 1,000 or 1,000,000, keep one decimal, add K or M
Worked example: the outage bar chart
- Customers out by district, in thousands
- Default: four bright colors, alphabetical
- Better: gray bars, one accent, sorted
layout: side
kind: bar
title: Customers out, thousands
unit: K
data: {Central: 21.8, East: 6.9, North: 12.4, West: 7.1}
steps:
- at: "four service districts"
show: all
- at: "make every bar gray"
highlight: Central
- at: "sorted from largest to smallest"
sort: desc Layout, spacing and labels
- Align elements to a grid, equal gaps
- Group related items: outages together, crews together
- Titles say what it means: "Customers out now", not "CUST_AFFECTED_SUM"
- Add the last update time near the headline
Where these settings live
- Indicator: value format, unit prefix, conditional color, icon
- Serial chart: category sort, bar color by rule
- Dashboard theme: light or dark, one brand color
- Preview on a phone and a wall screen
Common mistake: decorating instead of informing
- Gradient backgrounds and 3D effects
- A different color for every indicator
- Red header just to match the logo
- Every indicator the same size
- Fix: remove until only meaning remains
Exercise: the five-second test
- Open one dashboard you own or use
- Show it to a colleague for five seconds, then hide it
- Ask: what was the main number? was anything wrong?
- Fix hierarchy, color and number formats, then test again
Recap
- One headline KPI, top left, largest
- Neutral base, color reserved for meaning, always with a word
- Round and abbreviate: 48.2K, not 48,213.00, with a timestamp by the headline
Transcript
The ten-second briefing. Picture the morning after a spring storm. Power is out across four districts, and the chief operating officer opens your ArcGIS Online dashboard ten seconds before a press call. The data is perfect. Every outage point is on the map and the numbers refresh every minute. But the screen shows fourteen colors, customer counts with three decimal places, and six indicators that all look equally important. She can't find the one number she needs, so she calls you instead. That's the real cost of a hard-to-read dashboard: the data is correct, and it still goes unused. This lesson is about fixing that with design, not new data.
What you will learn. By the end of this lesson you'll be able to do three things. First, arrange a dashboard so the most important number is the first thing anyone sees. We call that visual hierarchy, and I'll explain the term in a moment. Second, use color on purpose, so red always means trouble and gray means context. Third, format numbers so a busy executive reads forty-eight point two thousand instead of squinting at forty-eight thousand two hundred thirteen point zero zero. None of this needs new layers or Arcade expressions. It's about the settings you already have in the dashboard editor, used with a clear plan.
Visual hierarchy: what gets seen first. Visual hierarchy just means the order in which the eye reads a screen. Think of a newspaper front page: the big headline first, then the photo, then the small print. On a dashboard, people read from the top left, and they look at big, bold things before small ones. So put your single most important indicator there, large, for example total customers without power. Next comes context, like a serial chart showing whether that number is rising or falling. Then the map answers where. Tables and lists go last, for the analyst who wants detail. If you have six indicators all the same size, you have no hierarchy at all. Pick one headline and let it win.
Color with meaning. Color is the loudest tool you have, so spend it carefully. Start with a neutral base: grays, white, and one brand color for titles. Then give each signal color exactly one job. Red means a problem, such as an open water main break past its repair target. Green means resolved. Amber means watch. Keep those meanings identical on the indicator, the map symbols and the list, so nobody has to relearn them. About one in twelve men has some color vision deficiency, which means red and green can look alike to them. So always pair the color with a word or icon, like "Over target" next to the red number.
Numbers an executive reads at a glance. Now the numbers themselves. An executive needs the size of something, not every digit. The rule is simple: divide by a thousand or a million, keep one decimal, and add K or M. So forty-eight thousand two hundred thirteen customers becomes forty-eight point two K, and two point three six million dollars becomes two point four M. Small counts like one hundred thirty-seven crews stay as they are. That's the whole rule. In the dashboard editor, open the indicator's value formatting, turn on unit prefix and set decimal places to one. If your field stores a different unit, the value conversion factor adjusts it first. No code needed.
Worked example: the outage bar chart. Let's fix a real chart. Here are customers without power across four service districts, in thousands. The default serial chart would give each bar its own bright color and list them alphabetically, which makes the reader do the work. Instead, make every bar gray and give the accent color to one bar only. Now Central clearly stands out with twenty-one point eight thousand customers, almost half the total, and the eye goes straight there. Finally, set the category sort to value, sorted from largest to smallest. Notice how the story now reads itself? The worst district is first, it's highlighted, and the labels already use the K format from the last slide.
Layout, spacing and labels. Layout does quiet work. Line elements up on the grid and keep the gaps between them equal, because uneven spacing looks like a mistake and pulls attention. Group related items: outage counts in one row, crew status in another, so the eye learns where to look. Write titles that say what the number means, like "Customers out now", rather than a raw field name like cust affected sum. And put the last update time right beside the headline. During storm response, a number without a timestamp starts arguments. Executives will ask whether it's current, and a small "Updated 7:42 AM" answers that before anyone asks.
Where these settings live. Everything we've covered lives in the ArcGIS Dashboards editor. On an indicator, the value formatting panel handles decimal places, unit prefix and value conversion. The conditional formatting from earlier in this course, the rules that change an indicator's color when a value crosses a threshold, sets the red and green. On a serial chart, you set the category sort and override the bar colors. The dashboard's theme settings choose light or dark and your brand color. Before you share, preview the dashboard on the screen it will really run on. An operations center wall display and a manager's phone show very different amounts of detail, and a layout that works on your laptop may squeeze your headline indicator on a phone.
Common mistake: decorating instead of informing. The most common mistake is decorating instead of informing. It's tempting to add a gradient background, a different color for every indicator, and a red header because it matches the logo. The trouble is that red now means both "our brand" and "emergency", so on the day a real problem appears, it doesn't stand out anymore. The same happens when every indicator is the same size: nothing is important because everything is. The fix is simple. For each color, border or effect, ask what it tells the reader. If the answer is nothing, remove it. A plain dashboard with one loud number beats a beautiful one nobody can read.
Exercise: the five-second test. Here's your task before the next lesson. Open a dashboard you own, or any public outage or service request dashboard. Show it to a colleague for five seconds, then hide it and ask two questions: what was the main number, and was anything in trouble? If they can't answer, you've found your fixes. Make one indicator the headline, turn secondary elements gray, give red only to problems, and shorten the numbers. Then run the five-second test again with someone new. Keep your before and after screenshots, because we'll use this dashboard in the final project on utility outage response.
Recap. Let's recap. First, build a clear hierarchy: one headline indicator, top left and largest, followed by trend, map and detail. Second, keep a neutral base and reserve color for meaning, with red only for problems and always a word or icon beside it for readers who can't tell colors apart. Third, format numbers for a glance: one decimal, K or M suffixes, and a timestamp near the headline. With these three habits, the chief operating officer from our storm morning finds her number in two seconds instead of calling you.
Explore the animation
The animations from the video, exact and live: play them, pause, drag the slider or jump to a step at your own pace.
Loading the animation...
Lesson summary
- Video watched
- One headline KPI, top left, largest
- Neutral base, color reserved for meaning, always with a word
- Round and abbreviate: 48.2K, not 48,213.00, with a timestamp by the headline