# Mobile App UX for Connected Products: Design Tips

> The five questions every connected-product screen should answer, plus a few rules for phone screens. A framework-agnostic summary of mobile UX for IoT apps, with the full video walkthrough.

![Mobile App UX for Connected Products: Design Tips](https://tago.io/og/blog/mobile-ux-connected-products.png)

You know connected mobile apps come with design challenges that regular apps don't have. We put what we learned into one short video: five questions every screen should answer, plus a few rules for phone screens. Here's the summary. The video shows each one in a real app.

<iframe src="https://www.youtube-nocookie.com/embed/Ur5x06xnT_E" title="Mobile App UX for Connected Products" class="aspect-video h-auto w-full rounded-xl" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

*Watch the full walkthrough. It runs under six minutes and shows every tip in a working app.*

## Start from decisions, not data

Sensors send a stream of values, but your user doesn't care about a list of readings. They care about one decision, such as whether to act or not. Build each screen around that moment, and show only what helps the user make the call.

## Five questions every screen should answer

A good connected-product screen lets someone decide at a glance by answering five questions, in order.

![A slide titled Questions users want quick answers, with the line Don't make me think, and five numbered questions: Is everything OK, Can I trust this, What changed, What should I do, Did it work.](https://tago.io/images/blog/mobile-ux-connected-products/five-questions.webp)

- **Is everything OK?** Status first, count beside it, problems on top. If all is fine, the screen should look boring.
- **Can I trust this?** A number with no time next to it is a guess. Timestamp every value, and gray out stale ones.
- **What changed?** One notification per problem, not one per reading, each naming the asset it's about.
- **What should I do?** Put the action right next to the problem, one tap away, and confirm anything you can't undo.
- **Did it work?** A command takes time to reach the device, so show pending, then confirmed or failed, and when.

## A phone is not a small desktop

A dashboard built for a big monitor turns into a wall of tiny numbers on a phone, where people stand up, use one thumb, and glance for a few seconds. Six rules keep it readable:

![A slide titled A phone is not a small desktop, the rules that keep a screen glanceable, with six cards: one number per tile, tables become cards, one chart one series, color needs a word, maps only for location, two taps not ten.](https://tago.io/images/blog/mobile-ux-connected-products/phone-rules.webp)

- One number per tile, with its unit and its age.
- Tables become cards, one value per row, what matters on top.
- One chart, one series; a single range, detail on tap.
- Color needs a word, since not everyone sees color the same way.
- Maps only when location is the point; otherwise a list is faster.
- Two taps, not ten; leave setup wizards and bulk edits in the browser.

None of this depends on how you build. Native, React, or another framework, these are decisions about what the user needs to see and do. Get the five questions right, and your users will feel the difference.

**[Watch the full video](https://youtu.be/Ur5x06xnT_E)**.

[llms.txt](https://tago.io/llms.txt)