IoT Interfaces, Location and Privacy · 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.

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

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!

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.

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!".

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.

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.

Retrieval practice

Recall check 1 of 4

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?

AAt screen center because status should sit in the middle.

BBottom of the dashboard with the trends - status relates to performance data

CThe task-tested top-left primary zone holds status.

DIn a sidebar - keeps the main dashboard clean for data visualization

Show answer

Answer: C Machine status is the most critical item because an error may require immediate operator intervention.

Retrieval practice

Recall check 2 of 4

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?

AWiden the warning thresholds to 12-30 C so startup variations don't trigger alerts

BRemove warning level entirely - only show critical alerts for temperatures >28 C or <15 C

CAdd a persistence delay - trigger only after the threshold is exceeded for 2+ minutes continuously

DTrain operators to ignore warnings during the first 10 minutes of each day

Show answer

Answer: C A persistence delay, also called temporal debounce, filters a threshold violation that lasts less than two minutes while preserving a sustained warning.

Retrieval practice

Recall check 3 of 4

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

Q3A factory dashboard uses colored status tiles that cannot receive keyboard focus. What change best supports operators using assistive technology?

AAdd text status, keyboard access and screen-reader updates.

BUse brighter tile colours without keyboard focus or text status.

CAdd a printed legend but leave controls unreachable.

DShow the same tiles on a larger monitor only.

Show answer

Answer: A Add text status, keyboard access, and screen-reader announcements for changes.

Retrieval practice

Recall check 4 of 4

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

Q4You're designing one responsive dashboard for a fleet of 50 delivery trucks with IoT sensors, using shared terminology and a common information architecture. It 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 approach is best?

ASeparate dashboards: different terms and navigation on desktop, tablet and phone.

BDesktop-first layout: hide key features as the screen becomes smaller.

CMobile-first layout: truck status on phones, dispatch features on larger screens.

DIdentical layout: keep desktop, tablet and phone views unchanged.

Show answer

Answer: C Mobile-first progressive enhancement makes essential driver status usable on the constrained screen, then adds the supervisor and dispatch views their tasks need.

Print reference

Answers

Answer key.

C · Machine status is the most critical item because an error may require immediate operator intervention.
C · A persistence delay, also called temporal debounce, filters a threshold violation that lasts less than two minutes while preserving a sustained warning.
A · Add text status, keyboard access, and screen-reader announcements for changes.
C · Mobile-first progressive enhancement makes essential driver status usable on the constrained screen, then adds the supervisor and dispatch views their tasks need.