Experiencia de usuario
UX de arriba abajo

Una guía visual completa para entender el diseño centrado en la persona

01 — Definición

¿Qué es la experiencia de usuario?

La UX (User Experience) es la percepción global que tiene una persona al interactuar con un producto digital. No es solo cómo se ve, sino cómo se siente: si es intuitivo, útil y satisfactorio.

Centrado en la persona
Las decisiones de diseño parten siempre de las necesidades, motivaciones y contextos reales de los usuarios.
Más que estética
La UX abarca arquitectura de la información, flujo de navegación, accesibilidad y rendimiento, no solo la apariencia visual.
Basada en evidencias
Las decisiones se avalan con datos: tests de usabilidad, entrevistas y métricas de comportamiento reales.
Proceso iterativo
La UX no termina con el lanzamiento: evoluciona continuamente a partir del feedback y de nuevas necesidades.

02 — Distinción clave

UX vs UI: ¿qué diferencia hay?

UX
Investigación de usuarios
Arquitectura de la información
Mapas de viaje
Tests de usabilidad
Wireframes y prototipos
vs
UI
Colores y tipografía
Iconos e ilustraciones
Componentes visuales
Animaciones y transiciones
Guía de estilo

UX = cómo funciona · UI = cómo se ve · Las dos van de la mano

03 — Metodología

El proceso de diseño UX

1
Investigación (Research)
Entrevistas con usuarios, encuestas, análisis de competidores y estudio del contexto de uso. El objetivo es entender quiénes son los usuarios y qué problemas reales tienen.
Herramientas: entrevistas, encuestas, analítica
2
Definición (Define)
Sintetizar la información en personajes ficticios (personas), mapas de empatía y declaración del problema. Responde a: ¿qué problema tenemos que resolver y para quién?
Herramientas: personas, journey map, HMW
3
Ideación (Ideate)
Sesiones de lluvia de ideas, diagramas de afinidad y técnicas de creatividad colectiva. Se generan muchas ideas sin filtrar para escoger las más prometedoras.
Herramientas: crazy 8s, how might we, bocetos
4
Prototipado (Prototype)
Crear representaciones de baja o alta fidelidad de la solución: desde bocetos en papel hasta prototipos interactivos. El objetivo es materializar la idea lo antes posible.
Herramientas: Figma, Balsamiq, Marvel
5
Validación (Test)
Hacer pruebas con usuarios reales para detectar problemas de usabilidad. Los resultados alimentan de nuevo la fase de investigación y cierran el ciclo iterativo.
Herramientas: tests moderados, eye tracking, A/B

04 — Fundamentos

10 principios heurísticos de Nielsen

1
Visibilidad del estado
El sistema siempre debe informar al usuario de lo que ocurre.
2
Coincidencia con el mundo real
Habla el lenguaje del usuario, no el del sistema.
3
Control y libertad
Permite deshacer y rehacer acciones fácilmente.
4
Consistencia y estándares
Los elementos iguales deben comportarse siempre igual.
5
Prevención de errores
Mejor prevenir que mostrar mensajes de error.
6
Reconocer > recordar
Muestra opciones; no obliga al usuario a memorizar.
7
Flexibilidad y eficiencia
Atajos para usuarios avanzados, sencillez para los novatos.
8
Diseño minimalista
Elimina lo que no aporta valor al flujo principal.
9
Ayuda a reconocer errores
Mensajes claros que explican y proponen soluciones.
10
Ayuda y documentación
Cuando hace falta, ofrece documentación fácil de encontrar y usar.

05 — Errores habituales

¿Qué hay que evitar en UX?

✗
Diseñar sin investigar a los usuarios
→ Haz al menos 5 entrevistas antes de diseñar
✗
Priorizar la estética por encima de la funcionalidad
→ Un botón bonito pero invisible es un botón inútil
✗
No probar con usuarios reales
→ 5 usuarios detectan el 85 % de los problemas de usabilidad
✗
Ignorar la accesibilidad desde el principio
→ Aplica las pautas WCAG 2.1 desde la fase de diseño
✗
No iterar una vez lanzado el producto
→ Recoge datos, detecta puntos de fricción y mejora continuamente

06 — Recursos

Herramientas esenciales de UX

Prototipado
Figma
Diseño y prototipos colaborativos en la nube
Investigación
Maze
Tests de usabilidad remotos y automatizados
Analítica
Hotjar
Mapas de calor y grabación de sesiones
Encuestas
Typeform
Formularios y encuestas para recoger feedback
Colaboración
Miro
Pizarras digitales para talleres e ideación
Flujo
Whimsical
Diagramas de flujo y wireframes rápidos

«El diseño no es solo cómo se ve o cómo se siente. El diseño es cómo funciona.»

— Steve Jobs