Por qué todos las confunden
'UI/UX' se dice como una sola palabra tan a menudo que la mayoría asume que es un solo trabajo. No lo es — y la confusión no es inofensiva. Un fundador que piensa 'UI' cuando en realidad el problema es 'UX' contratará a un diseñador visual para arreglar un problema que en realidad está en el flujo de checkout, gastará el presupuesto en un botón más bonito, y verá el mismo porcentaje de usuarios abandonar en el mismo paso. La solución nunca fue visual. Era estructural. Saber cuál de los dos problemas tienes en realidad es la diferencia entre gastar dinero y desperdiciarlo.
Las definiciones, sin rodeos
UI — User Interface (Interfaz de Usuario)
Todo lo que puedes ver y con lo que puedes interactuar físicamente: botones, colores, tipografía, iconos, espaciado, animaciones. La UI es la superficie — la capa visual e interactiva entre la persona y el sistema. Es artesanía que puedes capturar en una captura de pantalla.
UX — User Experience (Experiencia de Usuario)
Todo el recorrido que una persona hace para conseguir algo — qué tan fácil es, cuántos pasos requiere, si tiene sentido, si la persona se siente segura o perdida. La UX es estructural — no puedes capturarla en una captura de pantalla, solo puedes medirla, en tareas completadas y abandonadas.
8 formas de distinguirlas
Foco
UI
Cómo se ve y se siente el producto — color, tipografía, espaciado, iconos.
UX
Cómo funciona el producto para quien lo usa — todo el recorrido, de principio a fin.
La pregunta que responde
UI
"¿Se ve bien?"
UX
"¿Tiene sentido?"
Qué se entrega
UI
Mockups, guías de estilo, librerías de componentes, pantallas pixel-perfect.
UX
Flujos de usuario, wireframes, personas, mapas de recorrido, informes de usabilidad.
Herramientas del oficio
UI
Figma, paletas de color, sets de iconos, escalas tipográficas.
UX
Entrevistas a usuarios, mapas de recorrido, tests A/B, analítica, card sorting.
Cómo se mide el éxito
UI
Consistencia visual, alineación de marca, atractivo estético.
UX
Tasa de finalización de tareas, tiempo en tarea, tasa de abandono, puntuación de satisfacción.
Cuándo entra en el proceso
UI
Más tarde — una vez validado el flujo, la UI le da una cara.
UX
Antes — antes de que exista un solo píxel, la UX decide qué es el flujo.
Cómo se ve lo "bueno"
UI
Un botón que parece clicable. Espaciado consistente. Un lenguaje visual coherente.
UX
Un checkout que toma 3 pasos en vez de 8, porque nadie tuvo que detenerse a pensar.
Cómo falla cada una
UI
Una interfaz preciosa que nadie sabe cómo usar — todo estilo, cero mapa.
UX
Un formulario que funciona perfecto pero parece de 2004 — toda lógica, cero pulido.
¿Crees que sabes distinguirlas? Compruébalo.
Aquí hay 6 decisiones reales de producto. Para cada una, decide si arregla la UI o la UX — luego revisa la explicación. Sin registro, sin seguimiento, solo seis segundos de honestidad sobre cuánto sabes realmente de la diferencia.
Un botón de checkout es morado, tiene esquinas redondeadas y una sutil animación al pasar el cursor.
No son rivales — se necesitan mutuamente
Una UI impresionante envuelta alrededor de un flujo confuso solo hace que la confusión se vea más cara. Una UX brillante enterrada bajo una interfaz torpe e inconsistente hace que la gente desconfíe de algo que en realidad funciona. Los sitios y productos que convierten nunca son uno u otro — son decisiones de UX (qué construir, en qué orden, con cuántos pasos) expresadas mediante la artesanía de la UI (cómo se ve y se siente una vez construido). Ninguna de las dos arregla lo que la otra rompió.
¿Necesitas un sitio donde la UX y la UI realmente estén de acuerdo?
Hablemos →About
Patrick Chen — desarrollador independiente y diseñador web detrás de Sublimearts.io. Me piden 'mejorar la UI' más a menudo de lo que el problema real es la UI. Normalmente es el flujo. Este es el artículo que desearía poder simplemente enviar en vez de explicarlo cada vez.