# UX de apps móviles para productos conectados: consejos de diseño

> Las cinco preguntas que toda pantalla de un producto conectado debe responder y algunas reglas para pantallas de teléfono. Un resumen de UX móvil para apps de IoT, sin importar el framework, con el video completo.

![UX de apps móviles para productos conectados: consejos de diseño](https://tago.io/og/es/blog/mobile-ux-connected-products.png)

Ya sabes que las apps móviles conectadas traen desafíos de diseño que las apps comunes no tienen. Reunimos lo que aprendimos en un video corto: cinco preguntas que toda pantalla debe responder y algunas reglas para pantallas de teléfono. Aquí va el resumen. El video muestra cada una en una app real.

<iframe src="https://www.youtube-nocookie.com/embed/Ur5x06xnT_E" title="UX de apps móviles para productos 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>

*Mira el recorrido completo. Dura menos de seis minutos y muestra cada consejo en una app que funciona.*

## Empieza por las decisiones, no por los datos

Los sensores envían un flujo de valores, pero a tu usuario no le importa una lista de lecturas. Le importa una decisión, como actuar o no. Construye cada pantalla alrededor de ese momento y muestra solo lo que ayuda al usuario a decidir.

## Cinco preguntas que toda pantalla debe responder

Una buena pantalla de producto conectado permite decidir de un vistazo respondiendo cinco preguntas, en orden.

![Diapositiva con el título Preguntas a las que los usuarios quieren respuestas rápidas, la frase No me hagas pensar y cinco preguntas numeradas: Está todo bien, Puedo confiar en esto, Qué cambió, Qué debo hacer, Funcionó.](https://tago.io/images/blog/mobile-ux-connected-products/five-questions.webp)

- **¿Está todo bien?** Primero el estado, al lado el conteo, los problemas arriba. Si todo está bien, la pantalla debería verse aburrida.
- **¿Puedo confiar en esto?** Un número sin hora al lado es una suposición. Pon fecha y hora a cada valor y muestra en gris los desactualizados.
- **¿Qué cambió?** Una notificación por problema, no una por lectura, y cada una nombra el activo al que se refiere.
- **¿Qué debo hacer?** Pon la acción justo al lado del problema, a un toque, y pide confirmación para todo lo que no se pueda deshacer.
- **¿Funcionó?** Un comando tarda en llegar al dispositivo, así que muestra pendiente, luego confirmado o fallido, y cuándo.

## Un teléfono no es un escritorio pequeño

Un dashboard pensado para un monitor grande se convierte en una pared de números diminutos en un teléfono, donde la gente está de pie, usa un pulgar y mira unos pocos segundos. Seis reglas lo mantienen legible:

![Diapositiva con el título Un teléfono no es un escritorio pequeño, las reglas que mantienen una pantalla legible de un vistazo, y seis tarjetas: un número por tarjeta, las tablas se vuelven tarjetas, un gráfico con una serie, el color necesita una palabra, mapas solo para ubicación, dos toques y no diez.](https://tago.io/images/blog/mobile-ux-connected-products/phone-rules.webp)

- Un número por tarjeta, con su unidad y su antigüedad.
- Las tablas se vuelven tarjetas, un valor por fila, lo importante arriba.
- Un gráfico, una serie; un solo rango, el detalle al tocar.
- El color necesita una palabra, porque no todos ven los colores igual.
- Mapas solo cuando la ubicación es lo importante; si no, una lista es más rápida.
- Dos toques, no diez; deja los asistentes de configuración y las ediciones masivas en el navegador.

Nada de esto depende de cómo construyas. Nativo, React u otro framework, son decisiones sobre lo que el usuario necesita ver y hacer. Acierta con las cinco preguntas y tus usuarios notarán la diferencia.

**[Mira el video completo](https://youtu.be/Ur5x06xnT_E)**.

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