Diseño UI/UX

UX decide cómo funciona un producto; UI decide cómo se ve esa decisión. Ninguno basta por sí solo — uno aporta claridad, el otro confianza.

Caso de estudio

Llevar 13 áreas a una sola pantalla

Aplicamos en nuestro propio producto lo que predicamos. dmu ONE reúne 13 áreas de negocio –finanzas, ventas, CRM, proyectos, operaciones, inventario, abastecimiento, recursos humanos, marketing, informes, archivo y configuración– y 67 funciones en un solo flujo móvil. La captura de pantalla real a continuación muestra cómo esa simplificación se traduce en la interfaz.

Pantalla de inicio de la aplicación dmu ONE en un teléfono Android
  • Navegación13 áreas, no apiñadas en un único menú inferior, sino organizadas en una jerarquía que prioriza lo más usado.
  • Jerarquía de la informaciónLas operaciones diarias están arriba; los informes y la configuración quedan un nivel atrás.
  • ContrasteEl color de acento aparece solo donde se necesita una acción; el resto de la interfaz permanece discreto.

01

Dos disciplinas distintas, una sola experiencia.

El diseño UX (experiencia de usuario) determina para quién existe un producto, qué problema resuelve y con qué pasos se llega a esa solución. La investigación, la arquitectura de la información, los flujos de usuario y las pruebas de usabilidad son las herramientas de esta disciplina. El diseño UI (interfaz de usuario), en cambio, es donde estas decisiones se vuelven visibles y tangibles: color, tipografía, estados de los botones, microinteracciones.

Separar ambos resulta útil con fines didácticos, pero en la práctica son inseparables. Una interfaz que parece impecable pero en la que el usuario no encuentra lo que busca es un éxito de UI y un fracaso de UX; un diseño con el flujo correcto pero que no transmite confianza es lo contrario. Un buen producto exige que ambos sean acertados al mismo tiempo.

02

Primero la estructura, luego la pantalla.

El proceso UX no empieza con una pantalla, sino con preguntas: ¿qué intenta hacer el usuario aquí?, ¿qué información necesita primero?, ¿qué paso genera fricción innecesaria? Las respuestas a estas preguntas construyen la arquitectura de la información — el esqueleto que determina qué contenido va dónde y en qué jerarquía.

Una vez que la arquitectura de la información está clara, entran en juego los flujos de usuario y los wireframes de baja fidelidad. En esta etapa aún no hay color ni tipografía — la única pregunta es si el flujo tiene sentido. Las pruebas son baratas en este punto — mover un recuadro cuesta mucho menos que volver a programar desde cero una pantalla ya desarrollada.

03

La coherencia surge de un sistema, no de pantallas sueltas.

El diseño UI no consiste en vestir un wireframe con lenguaje visual — es una disciplina de ingeniería en sí misma. Un botón no se diseña una sola vez — se diseña junto con sus estados normal, hover, presionado, deshabilitado y de carga. Cuando falta alguno de estos estados, el usuario pierde la capacidad de "hablar" con la interfaz.

Por eso, un trabajo de UI maduro no produce pantallas sueltas, sino una biblioteca de componentes: tarjetas reutilizables, campos de formulario, insignias, reglas de espaciado. El soporte de tema claro/oscuro en las interfaces propias de DMU es también resultado de este enfoque sistemático — un mismo conjunto de componentes que se mantiene coherente bajo dos condiciones de luz distintas.

04

La accesibilidad no es una capa añadida después.

Un contraste de color suficiente, un tamaño de texto legible, áreas táctiles cómodas de pulsar y un etiquetado compatible con lectores de pantalla — todo esto es el diseño mismo, no una capa añadida más tarde como "actualización de accesibilidad". Para un usuario con baja visión, un contraste insuficiente es una barrera tan real como lo es un área táctil diminuta para un usuario con capacidad motriz limitada.

Estos principios también generan una mejor experiencia para todos: un contraste alto sigue siendo legible bajo la luz del sol, y unas áreas táctiles generosas tampoco penalizan a un usuario en movimiento. La accesibilidad consiste en diseñar para el conjunto completo de condiciones reales de uso, no para un segmento reducido de usuarios.

05

El proceso es la prueba, no una afirmación.

Unificar 13 áreas de negocio y 67 funciones en una sola aplicación móvil no fue un ejercicio teórico de UX — fue un problema real que exigió investigación, arquitectura de la información, prototipado, pruebas de usabilidad e iteración constante. dmu ONE es el resultado de ese proceso, y la forma más honesta de describir el enfoque UI/UX de DMU es mostrarlo directamente.

Desarrollo de aplicaciones móviles: aplicaciones móviles a medida que escalan según su número de módulos