# UX y UI

> La UI es lo que ves y tocás en la pantalla; la UX es cómo se siente toda la experiencia.

- Nivel: Básico
- Temas: Software
- URL: https://tidbit.legios.com.ar/es/ux-and-ui/
- En inglés: [UX and UI](https://tidbit.legios.com.ar/ux-and-ui/)

La **UI** (user interface, **interfaz de usuario**) es la parte de un producto que ves y tocás: pantallas, botones, menús, íconos, colores, tipografías, la animación chiquita cuando tocás "enviar". Quienes diseñan UI deciden cómo se ve cada pantalla y cómo se comportan sus piezas, muchas veces en herramientas como Figma, y les pasan esos diseños a los desarrolladores.

La **UX** (user experience, **experiencia de usuario**) es más amplia: cómo se siente resolver algo con el producto de punta a punta. ¿Encontrás el botón que buscás? ¿Sacar un turno con el médico lleva tres pasos o doce? ¿Los mensajes de error se entienden? ¿Qué pasa cuando necesitás ayuda? Quienes trabajan en UX entrevistan usuarios, dibujan su recorrido, arman prototipos rápidos y miran a gente real probándolos, y después cambian lo que confunde.

Las dos se pisan y muchas veces son un mismo puesto ("diseñador UX/UI"), pero pueden fallar por separado. Una app de banco puede ser hermosa y aun así convertir una transferencia en un laberinto: buena UI, mala UX. Un formulario del Estado puede ser feo y sacarte del trámite en dos minutos: UI modesta, buena UX. La accesibilidad, escribir etiquetas claras y elegir qué dejar afuera también son parte del oficio.

## Una analogía

Un restaurante. La UI es la carta, los platos y la decoración; la UX es toda la noche: conseguir mesa, pedir sin enredarte, que la comida llegue a tiempo y poder pagar sin esperar cuarenta minutos la cuenta.

## Para quedarse

- UI: la capa visual e interactiva, pantallas, botones, tipografía y color.
- UX: todo el recorrido para resolver una tarea, y cómo se siente.
- El trabajo de UX se apoya en investigar y probar con usuarios reales.
- Una UI linda no garantiza una buena UX, y al revés tampoco.

## Para seguir leyendo

- [The Definition of User Experience (Nielsen Norman Group, en inglés)](https://www.nngroup.com/articles/definition-user-experience/)
- [Experiencia de usuario en Wikipedia](https://es.wikipedia.org/wiki/Experiencia_de_usuario)
- [Interfaz de usuario en Wikipedia](https://es.wikipedia.org/wiki/Interfaz_de_usuario)

## Términos relacionados

- [Figma](https://tidbit.legios.com.ar/es/figma/): Una herramienta de diseño en el navegador donde equipos enteros diseñan apps juntos.
- [Accesibilidad web](https://tidbit.legios.com.ar/es/web-accessibility/): Que sitios y apps los pueda usar todo el mundo, incluidas las personas con discapacidad.