UX Design · Study deck

Interface Design: Dashboards

Think of a dashboard like the instrument panel in a car.

UX Uma is your guide for this deck.

interfacedashboardsvisualization
UX Uma, the module guide, in a scene from this chapter.
iotclass.org

After studying this chapter

Learning objectives

You will be able to:

  • Design effective IoT dashboards: Select appropriate widgets for different data types and use cases
  • Apply information hierarchy principles: Position critical metrics for optimal user attention and scanning
  • Configure widget thresholds: Set normal, warning, and critical ranges for alert management
  • Create responsive layouts: Adapt dashboards for desktop, tablet, and mobile devices
iotclass.org

Major section

For Kids: Meet the Sensor Squad!

Dashboard design is like being a weather reporter for machines!

  • The Sensor Squad was buzzing with excitement!
  • They had been chosen to help design the new "Mission Control Center" for the Chen family's smart home.
  • But there was a problem -- when they showed their first design to the family, everyone was confused!
iotclass.org

Major section

For Kids: Meet the Sensor Squad! (continued)

Yellow means 'pay attention.' Red means 'help needed!' Why can't the dashboard work the same way?".

  • "There are too many numbers!" said Dad, squinting at the screen. "I can't find the temperature anywhere!" said Mom. "Why is everything the same color?" asked little Emma.
  • the LED had an idea. "Let's use COLORS!
  • I can see everything I need in one second!" said Mom.
iotclass.org

Major section

For Kids: Meet the Sensor Squad! (continued)

Temperature Terry called an emergency meeting. "Friends, we're showing them EVERYTHING we know, but they only need to see what's IMPORTANT!".

  • Like how traffic lights are always at the top of the pole!".
  • the battery chimed in, "We should make the numbers BIG for important things and small for details.
  • Like how my battery icon shows big when I'm running low!".
iotclass.org

Major section

Common Dashboard Mistakes

Small Touch Targets: Buttons and controls too small for touch.

  • Most of these mistakes are really one problem wearing different costumes: the interface is asking for more attention than the operator has to give.
  • Keyboard Navigation: All controls accessible via keyboard.
  • Status Announcements: Non-visual alerts for state changes.
iotclass.org

Deck summary

Key takeaways

Dashboard design is like being a weather reporter for machines!

  • Yellow means 'pay attention.' Red means 'help needed!' Why can't the dashboard work the same way?".
  • Temperature Terry called an emergency meeting. "Friends, we're showing them EVERYTHING we know, but they only need to see what's IMPORTANT!".
  • Small Touch Targets: Buttons and controls too small for touch.
iotclass.org

Retrieval practice

Recall check 1 of 3

UX Uma says: answer from memory, then check your reasoning.

Q1You're designing a dashboard for a factory floor monitoring system. The operator needs to see: (1) machine status (running/stopped/error), (2) production count, (3) temperature readings, and (4) 7-day production trends. Where should you place the machine status indicator?

AIn the prominent primary-status zone established by task testing (top-left in this proposed layout)
BCenter of the screen - important information should be in the middle where everyone can see it
CBottom of the dashboard with the trends - status relates to performance data
DIn a sidebar - keeps the main dashboard clean for data visualization
Show answer

Answer: A Correct!

iotclass.org

Retrieval practice

Recall check 2 of 3

UX Uma says: answer from memory, then check your reasoning.

Q2A smart building dashboard monitors HVAC systems. Temperature thresholds are set to: Normal (18-24 C), Warning (15-18 or 24-28 C), Critical (<15 or >28 C). During testing, operators complain about 'alert fatigue' - too many warnings. Analysis shows 85% of warnings occur briefly during HVAC startup. What's the BEST solution?

AAdd a persistence delay - trigger only after the threshold is exceeded for 2+ minutes continuously
BWiden the warning thresholds to 12-30 C so startup variations don't trigger alerts
CRemove warning level entirely - only show critical alerts for temperatures >28 C or <15 C
DTrain operators to ignore warnings during the first 10 minutes of each day
Show answer

Answer: A Correct!

iotclass.org

Retrieval practice

Recall check 3 of 3

UX Uma says: answer from memory, then check your reasoning.

Q3You're designing a dashboard for a fleet of 50 delivery trucks with IoT sensors. The dashboard will be used by: (1) dispatch managers on desktop computers, (2) supervisors on tablets during warehouse walks, and (3) drivers checking their own truck status on smartphones. Which responsive design approach is BEST?

AMobile-first design with progressive enhancement - start with essential truck status for drivers, add management features for larger screens
BBuild three completely separate dashboards optimized for each device type
CDesktop-first design that scales down for smaller screens by hiding features
DUse identical layouts across all devices - consistency is more important than optimization
Show answer

Answer: A Correct!

iotclass.org

Print reference

Answers

Answer key.

  1. A · Correct!
  2. A · Correct!
  3. A · Correct!
iotclass.org