Designing dashboards people can scan

Dashboard UX design is a hierarchy, not a gallery of charts. A person should be able to scan three things in order: what changed, what needs a decision, and what can wait. If the screen makes them hunt for those three, it is a report wearing a dashboard's clothes.

People open a dashboard because something in the day depends on it. They are not there to admire the completeness of the data model. Nielsen Norman Group's guidance on attention is blunt about the opening: to earn more than a glance, the value has to be clear within about 10 seconds. On a dashboard, that value is the change and the decision, placed where the eye lands first.

What changed

The top of the screen belongs to the delta. A number without a comparison is a trivia card. "42 open leads" means little until the person knows whether that is more than yesterday, worse than the threshold, or the same as always.

Show the comparison in the same glance as the figure. A word is often clearer than a sparkline: "6 more than yesterday," "2 past the deadline," "flat since Monday." Use the unit the job uses. Traders think in positions and moves. A sales lead thinks in calls due. An operator thinks in orders that failed. The chart type is secondary to that unit.

Trade Moai, a public trading-interface concept in Hanabi's selected work, is built around this kind of scan: positions a person can read quickly, and enough clarity to decide. The lesson for any dashboard is the order of information. The move comes before the history. History is available. It does not lead.

Color can mark change, and color cannot be the only mark. A red number that is also labeled "down" still works for someone who does not see the red. Pair the color with a word or a sign. Keep the palette small. If everything is highlighted, nothing changed.

Time range is part of "what changed." Put the range in plain language near the figures: today, this week, since the last session. A silent default of "last 30 days" makes every number slightly untrustworthy. When the person changes the range, the figures should update together. Mixed ranges on one screen are a common way dashboards lie by accident.

What needs a decision

A dashboard fails when it informs and then abandons. Under the change, or inside the row that changed, put the action that the change implies. "3 payments failed" sits next to a way to see those payments. "A position moved through your limit" sits next to the control the product actually offers.

Do not turn the dashboard into the whole tool. The decision can open a focused view. The dashboard's responsibility is to make the existence of the decision unmistakable, and to send the person to the right record with the context still intact. If they arrive on a detail page and have to search again, the scan was wasted.

Limit the number of decision rows. Five items that need a human are a queue. Fifty items with equal visual weight are a dump. Sort by urgency the job would recognize: deadline, size, risk, age. Let the rest collapse under a count. "12 more with no change" is a respectful way to show that you looked and nothing is required.

Empty of decisions is a successful state. Say so. "Nothing needs you today" is a complete dashboard for that morning. Filling the void with motivational charts teaches people to ignore the top of the screen.

Write the decision in the team's real verb. "Review" is vague. "Call back," "close," "adjust," "refund" tell the person what the click means. If two rows need different verbs, they may be two different jobs sharing a page. Consider splitting the queues rather than inventing a verb vague enough to cover both.

What can wait

Everything else is the third tier: context, trends, and records that are healthy. It should be visibly quieter. Smaller type, less contrast, placed below or behind a disclosure. A person scanning should be able to skip it without feeling they missed an alarm.

This tier is where teams usually put their favorite charts, because the charts were hard to build. Move them down. A twelve-month trend is useful on a Friday review. It is in the way on a Tuesday morning when two orders failed. Give the trend a home that matches its cadence. Weekly charts can live on a weekly view. They do not have to greet every session.

Tables belong in this tier when they are reference, and in the decision tier when a row is actionable. The distinction is the presence of a verb. A table of every customer is reference. A table of customers whose renewal is inside seven days is a queue. Label them differently so the person knows which one they can leave.

Filters are how "what can wait" stays out of the way. Offer a small set that matches real questions: mine, overdue, this market, this owner. A filter bar with twenty dimensions is another dashboard hiding on top of the first one. Start with the two filters people already apply in their heads.

A layout that matches the scan

You do not need a novel grid. You need a reliable one.

Put the change in a band the width of the page, with a small number of figures. Three figures is plenty. Under it, a single column of decisions on a phone, and a list or a tight table on a wide screen. Context sits last. On a phone, context can be a separate segment the person opens, so the decision list is the whole first view.

Alignment does more for a scan than decoration. Figures share a baseline. Labels sit in the same place on every card. The primary action sits in the same column of every row. When the eye drops one row, it should find the same kind of fact.

Avoid card mosaics that mix sizes for visual interest. Uneven cards force the eye to re-learn the layout on every visit. A dashboard is a tool people see daily. Sameness is a kindness. Save visual surprise for a change of state, such as a row that newly needs a decision.

Loading is part of the layout. If the numbers pop in at different times and shove the list downward, the scan starts over. Reserve the space. Show the last known figures if they are still honest, and say when they were true. A layout that jumps has failed the scan even if the final composition is handsome. Cumulative layout shift is the engineering name for that jump. The design name is simpler: the page should not move under the eyes.

How to test a scan

Sit with one person who uses the numbers. Ask three questions and do not help.

1. What changed since yesterday?
2. What, if anything, do you need to do?
3. What are you happy to ignore?

Time the silence before the first answer. If they are still reading labels after a slow count to ten, the hierarchy is buried. Watch their eyes, or simply watch the pointer. Wandering is information.

Then try the morning when nothing is wrong. The "all clear" screen is the one teams forget to design, and it is the screen people see most. It should be calm and specific. A blank chart is not calm. It looks broken.

Test with ugly data. A long account name, a negative number, a zero, a figure that is late. The hierarchy that only works with round demo numbers is not a hierarchy yet. Ask the person to find yesterday's change again after you resize the window. If the phone version promotes a chart above the queue, fix the order before you add another widget.

If the product still has too many rooms, the scan will not survive the extra doors. Fewer screens make the product easier to read is the companion piece: merge the steps, then give the remaining view a top, a middle, and a quiet end.