Diseño UX/UI de apps móviles: de los flujos a la pantalla

El diseño UX/UI de apps móviles decide si una persona entiende tu aplicación en segundos o la abandona a los dos minutos. UX y UI suelen mencionarse juntos y a veces se confunden. Esta guía explica qué es cada cosa, cómo se trabaja desde el flujo hasta la pantalla final y cómo comprobar con usuarios reales que el diseño funciona.

UX y UI: la diferencia

	UX (experiencia de usuario)	UI (interfaz de usuario)
Se pregunta	¿Se puede lograr lo que vine a hacer, sin esfuerzo?	¿Se ve claro, ordenado y coherente?
Trabaja con	Flujos, estructura, textos, cantidad de pasos	Color, tipografía, botones, íconos, espaciado
Se nota cuando	Falla: la gente se pierde o abandona	Falla: la app se ve desprolija o confusa

Una analogía: la UX es la distribución de una casa (que la cocina quede cerca del comedor); la UI es la terminación (colores, aberturas, muebles). Una linda terminación no arregla una mala distribución.

Empezar por las personas, no por las pantallas

Antes de dibujar, conviene responder tres cosas: quién va a usar la app, qué quiere lograr y en qué contexto. No es lo mismo alguien que reserva un turno desde el celular mientras camina que un empleado que carga datos todo el día en el mismo equipo. Esas respuestas definen qué va en primer plano y qué queda en un segundo nivel.

Flujos de usuario

Un flujo es el recorrido de una persona para completar una tarea: desde que abre la app hasta que logra su objetivo. Mapearlo en papel o en un diagrama simple permite ver pasos sobrantes, decisiones confusas y casos especiales, como qué pasa si no hay conexión o si el usuario se equivoca. Cuanto menos pasos y menos decisiones tenga el camino principal, mejor suele resultar.

Wireframes: el esqueleto

Los wireframes son bocetos de baja fidelidad, en blanco y negro, que muestran dónde va cada elemento sin preocuparse por el estilo. Sirven para discutir estructura con el cliente a bajo costo: mover un botón en un boceto toma minutos; hacerlo en una app programada toma mucho más. Del boceto se pasa a un prototipo navegable que simula la app; hay más detalle en la guía de prototipo de una app.

Diseño visual y sistema de diseño

Con la estructura validada llega la interfaz: paleta de colores, tipografías, íconos, estados de los botones y pantallas finales. Es recomendable definir un conjunto de componentes reutilizables (botones, campos, tarjetas), llamado sistema de diseño. Da coherencia, acelera el desarrollo y facilita que la app crezca sin perder consistencia.

Guías de plataforma

Android e iOS publican sus propias guías de diseño (Material Design y las Human Interface Guidelines de Apple). Los usuarios ya tienen hábitos con cada sistema: dónde está el botón de volver, cómo se navega, cómo se ve un diálogo. Respetar esas convenciones reduce la curva de aprendizaje. Aun con una app multiplataforma, conviene decidir qué comportamientos se adaptan a cada sistema y cuáles se unifican. Las guías se actualizan, así que consultalas en su versión vigente.

Principios que se repiten en buenos diseños

• Una acción principal por pantalla, visible y fácil de tocar con el pulgar.
• Textos claros, en el idioma y el tono de tu público, sin jerga técnica.
• Retroalimentación: que la app avise si algo se guardó, está cargando o falló.
• Prevención de errores: validar en el momento y explicar cómo corregir.
• Contraste y tamaños legibles, lo que además es parte de la accesibilidad en apps móviles.
• Estados vacíos y de error pensados, no dejados al azar.

Pruebas con usuarios

La única forma confiable de saber si un diseño funciona es observarlo en uso. No hacen falta laboratorios: se le pide a unas pocas personas del público real que intenten una tarea con el prototipo, sin ayuda, y se observa dónde dudan o se equivocan. Algunas pautas:

1. Definí tareas concretas («reservá un horario para el jueves»), no preguntas generales.
2. Dejá que se equivoquen; no los guíes ni expliques.
3. Anotá dónde se frenan y qué dicen en voz alta.
4. Corregí lo más repetido y volvé a probar.

Con pocas personas ya aparecen los problemas más evidentes, pero no esperes que una prueba chica sea representativa de todo tu público.

Errores comunes

• Diseñar para el gusto propio y no para el del usuario.
• Saltear los bocetos y discutir sobre la app ya programada.
• Copiar pantallas de otras apps sin entender el porqué.
• Meter todas las funciones en la pantalla inicial.
• Descuidar los textos, que son parte central de la experiencia.

El diseño es una etapa dentro del proceso general descripto en cómo crear una app. Si querés revisar el diseño de una idea o una app existente, escribinos desde el formulario de contacto.