7 min read

Building the dashboard: designing web interfaces for smart-device data

Shape April 2022 HR 90
Contents
Updated on 26 Jun 2026

A smart device is only as good as the screen that displays its data. The sensors can be accurate and the readings clean, but if the dashboard is a wall of numbers nobody can parse, the whole product feels broken. The interface is where the value of the entire system either lands or evaporates.

Designing for device data is a different discipline from designing a marketing site or a brochure page. A standard website shows controlled content, arranged deliberately and updated on a schedule. A device dashboard shows live data that nobody controls, arriving at irregular intervals, occasionally wrong and occasionally missing. That single difference changes almost every design decision that follows.

This guide covers how to approach a smart-device dashboard properly: why it breaks the usual web rules, how to structure it around the user, and the failure states that catch teams who treat it like any other web project.

Article screenshot

Why device dashboards break the usual web rules

The thing that trips most teams up is simple: the data is alive and unpredictable.

On a standard site, a heading is a heading. It sits there until someone edits it. On a dashboard, a single reading might refresh every second, drop offline for a minute, then return with a value that is clearly wrong because a sensor glitched. The layout has to absorb all of that without breaking, and without quietly presenting a faulty number as if it were reliable.

This is also where engineering and design have to meet early. The cleanest interface cannot rescue data that arrives in an unusable shape. Much of what makes a dashboard readable is determined before the visual design begins, in how the device data is structured, filtered, and delivered to the screen. Working with an experienced IoT development company at the data-pipeline stage, rather than after the interface is built, prevents the costly cycle of designing a screen and then redesigning it once the real data behaves nothing like the demo.

Three properties of device data shape the whole design:

  • It is continuous. Readings keep coming, so the interface needs a sensible default state and clear rules for what updates and how often.
  • It is unreliable. Connections drop and sensors fail, so the design must distinguish fresh data from stale or missing data.
  • It is contextual. A raw number rarely means anything alone. Whether 24°C is good or bad depends on the device, the setting, and the moment.

Start with the question, not the chart

The most common error in dashboard design is building around the data the device produces. The result is a tile for every metric, on the logic that if the device measures it, the screen should show it.

That is the wrong starting point. A good dashboard begins with the question the user opens it to answer.

Different users carry different questions, and each one points to a different screen:

  • A facilities manager checking a building at the start of the day wants to know whether anything failed overnight.
  • A homeowner wants reassurance that everything is running normally.
  • A factory operator needs to know whether immediate action is required.

Design for the question first, and most of the metrics that seemed essential turn out to be reference data that belongs a layer deeper. A useful exercise is to list the user's top three questions in priority order, then build the screen so the first question is answered before the user has finished their first glance.

Shape April 2022 HR 219

Build a clear visual hierarchy

Users scan a dashboard in roughly two seconds, sweeping from top-left to bottom-right and deciding almost instantly whether it is useful. The design has to earn those two seconds.

A handful of principles consistently produce readable dashboards:

  • One headline answer per screen. The single most important state, usually whether the system is healthy, should be the largest element in view rather than buried among identical tiles.
  • Size communicates importance. A large number signals "look here." A small one signals "reference detail." This guides the eye without the user having to think.
  • Group related readings. Data that is interpreted together should sit together, so patterns surface without the user hunting across the layout.
  • Colour reinforces, it never carries meaning alone. A significant share of users cannot reliably distinguish red from green, so status needs a label and a position as well as a hue.

The aim is for the dashboard to answer the primary question before the user has consciously read anything on it.

Design the states that are not "everything's fine"

Demos look polished because the data cooperates. Production is different. Sensors drop offline, readings lag, and devices occasionally send nonsense. An interface that only knows how to display good data fails at the exact moment the user needs it most.

The awkward states deserve as much attention as the happy path:

State

The risk if ignored

How to design it

Stale data

User trusts an old reading as current

Timestamp every live value; show "updated 2 seconds ago" vs "updated 3 hours ago"

Missing data

A gap reads as "all clear"

Use a clearly labelled blank or greyed state, never a default zero

Sensor error

A junk value triggers a wrong decision

Flag implausible readings and mark them as suspect rather than displaying them plainly

Alert

A red dot leaves the user guessing

State what is wrong, how urgent it is, and what to do next

The worst outcome on any dashboard is stale information presented confidently, because it leads the user to a wrong decision while feeling certain. Honest uncertainty consistently beats false precision. Much of this depends on the layer beneath the interface, where data management and analytics determines which readings are trustworthy enough to surface at all.

A practical rule: an alert should answer three things in plain language. A message such as "Freezer 3 above safe temperature for 12 minutes, check the door seal" carries far more value than a coloured indicator, because it hands the user an action instead of a puzzle.

Shape April 2022 HR 32

Design mobile-first, because that is where it gets checked

Many device dashboards are checked on a phone, often while the user is standing in a plant room, a hallway, or a shop floor rather than sitting at a desk. Despite that, dashboards are frequently designed desktop-first and then compressed onto mobile as an afterthought.

The order should be reversed. The mobile view is where a dashboard proves its worth, so the critical glance should be designed for a small screen first:

  • The one status that matters, large and legible, visible without scrolling.
  • Supporting detail one tap away, not crammed onto the same view.
  • Touch targets and spacing suited to someone using the screen one-handed in an awkward setting.

The desktop version can then expand to add depth and history. The mobile version only has to nail the two-second check.

Handle the unglamorous details that build trust

A dashboard people depend on needs several plain, often-overlooked elements handled well. Without them, visual polish counts for little:

  • Loading states that never leave the screen blank or ambiguous.
  • Sensible, clearly communicated behaviour when the connection drops.
  • Precise labelling, so a reading of "24" specifies 24 of what.
  • Access to history, not only the live moment, since most decisions need context on whether a value is normal or new.

None of these win design awards. Together they are the difference between a dashboard a user trusts and one they quietly stop opening.

Shape April 2022 HR 204

A quick checklist before launch

Before a smart-device dashboard ships, it is worth running through a short review:

  • Does the screen answer the user's primary question within two seconds?
  • Is the most important state the most visually dominant element?
  • Can the user tell fresh data from stale or missing data at a glance?
  • Do alerts explain what, how urgent, and what to do next?
  • Does the mobile view handle the critical glance on its own?
  • Are loading, error, and offline states all designed, not just the ideal case?

If any answer is no, the design is not finished, regardless of how refined it looks.

Conclusion

Designing web interfaces for smart-device data is a craft distinct from conventional web design. The data is live and unreliable, the user arrives with a specific question, and the screen has roughly two seconds to answer it. The strongest dashboards are built around that question, structured with a hierarchy that answers it at a glance, and engineered to treat failure states as first-class rather than edge cases.

Handled well, the dashboard recedes into the background in the best possible way, leaving the user with a clear answer instead of a screen full of numbers to decode. For any connected product, that clarity at the last step is what turns accurate data into something genuinely useful.

I'm Tom, a Web Developer at Shape - when I'm not making slick Craft CMS or Shopify websites, I'm usually feeding my sourdough starter or baking a loaf.

Shape April 2022 HR 204
Shape April 2022 HR 202
Shape April 2022 HR 45
Shape April 2022 HR 34
Shape April 2022 HR 231
Don't believe the hype?

See what AI has
to say about us