# UX de apps móveis para produtos conectados: dicas de design

> As cinco perguntas que toda tela de um produto conectado deve responder, mais algumas regras para telas de celular. Um resumo de UX mobile para apps de IoT, independente de framework, com o vídeo completo.

![UX de apps móveis para produtos conectados: dicas de design](https://tago.io/og/pt-br/blog/mobile-ux-connected-products.png)

Você sabe que apps móveis conectados trazem desafios de design que apps comuns não têm. Reunimos o que aprendemos em um vídeo curto: cinco perguntas que toda tela deve responder, mais algumas regras para telas de celular. Aqui vai o resumo. O vídeo mostra cada uma delas em um app real.

<iframe src="https://www.youtube-nocookie.com/embed/Ur5x06xnT_E" title="UX de apps móveis para produtos conectados" class="aspect-video h-auto w-full rounded-xl" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

*Assista ao passo a passo completo. São menos de seis minutos, com cada dica funcionando em um app real.*

## Comece pelas decisões, não pelos dados

Sensores enviam um fluxo de valores, mas seu usuário não quer uma lista de leituras. Ele quer tomar uma decisão, como agir ou não. Construa cada tela em torno desse momento e mostre só o que ajuda o usuário a decidir.

## Cinco perguntas que toda tela deve responder

Uma boa tela de produto conectado permite decidir com um olhar, respondendo a cinco perguntas, nesta ordem.

![Slide com o título Perguntas que os usuários querem ver respondidas rapidamente, a frase Não me faça pensar e cinco perguntas numeradas: Está tudo bem, Posso confiar nisso, O que mudou, O que devo fazer, Deu certo.](https://tago.io/images/blog/mobile-ux-connected-products/five-questions.webp)

- **Está tudo bem?** Status primeiro, contagem ao lado, problemas no topo. Se tudo estiver bem, a tela deve parecer entediante.
- **Posso confiar nisso?** Um número sem horário ao lado é um palpite. Coloque data e hora em cada valor e deixe em cinza os desatualizados.
- **O que mudou?** Uma notificação por problema, não uma por leitura, cada uma dizendo a qual ativo se refere.
- **O que devo fazer?** Coloque a ação logo ao lado do problema, a um toque de distância, e peça confirmação para tudo o que não dá para desfazer.
- **Deu certo?** Um comando leva tempo para chegar ao dispositivo, então mostre pendente, depois confirmado ou com falha, e quando.

## Um celular não é um desktop pequeno

Um dashboard feito para um monitor grande vira uma parede de números minúsculos no celular, onde as pessoas estão de pé, usam um polegar e olham por poucos segundos. Seis regras mantêm a tela legível:

![Slide com o título Um celular não é um desktop pequeno, as regras que deixam uma tela legível num relance, com seis cards: um número por bloco, tabelas viram cards, um gráfico com uma série, cor precisa de uma palavra, mapas só para localização, dois toques e não dez.](https://tago.io/images/blog/mobile-ux-connected-products/phone-rules.webp)

- Um número por bloco, com sua unidade e sua idade.
- Tabelas viram cards, um valor por linha, o que importa no topo.
- Um gráfico, uma série; um único intervalo, detalhes ao tocar.
- Cor precisa de uma palavra, já que nem todo mundo enxerga cores da mesma forma.
- Mapas só quando a localização é o ponto; nos outros casos, uma lista é mais rápida.
- Dois toques, não dez; deixe assistentes de configuração e edições em massa no navegador.

Nada disso depende de como você constrói. Nativo, React ou outro framework, essas são decisões sobre o que o usuário precisa ver e fazer. Acerte as cinco perguntas e seus usuários vão sentir a diferença.

**[Assista ao vídeo completo](https://youtu.be/Ur5x06xnT_E)**.

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