Diseño de Interfaces · Unidad I · HCI
Diseño Centrado
en el Usuario
Interfaces pensadas para personas
El usuario es el centro de todo proceso de diseño
Investigación UX
Prototipado
Pruebas de usabilidad
Iteración continua
Accesibilidad
Definición

¿Qué es el Diseño
Centrado en el Usuario?

Team designing
DCU EN ACCIÓN

El Diseño Centrado en el Usuario (DCU) es un enfoque de desarrollo de sistemas interactivos donde el objetivo es crear productos altamente usables y accesibles, centrado en comprender las necesidades, deseos y limitaciones de los usuarios finales en cada etapa del proceso de diseño.

— ISO 9241-210: Ergonomics of human-system interaction

💡 El DCU no pregunta "¿podemos construir esto?" sino "¿los usuarios necesitan esto y pueden usarlo?"
Importancia

¿Por qué importa el DCU?

😊
Satisfacción
Usuarios satisfechos usan el producto más tiempo y lo recomiendan. Netflix diseña cada pantalla basándose en datos de comportamiento.
🎯
Usabilidad
Las interfaces usables reducen errores y tiempo de aprendizaje. Un botón bien ubicado puede aumentar conversiones hasta 30%.
♿
Accesibilidad
1 de cada 4 personas tiene alguna discapacidad. Diseñar inclusivo amplía el alcance del producto a toda la población.
✨
Experiencia
La experiencia positiva genera lealtad. Los usuarios de Apple tienen una retención del 92% porque la UX está en el centro.
⚡
Eficiencia
Detectar problemas de diseño en etapas tempranas es 100x más barato que corregirlos en producción.
📊 IBM reportó un retorno de $100 por cada $1 invertido en UX durante el proceso de diseño.
Arquitectura

Modelo Arquitectónico
de la UI

Presentación / UI
Lógica / Controlador
Datos / Modelo
  • Presentación: lo que el usuario ve e interactúa. Botones, formularios, pantallas, animaciones.
  • Controlador: gestiona las acciones del usuario. Recibe eventos, procesa solicitudes y conecta capas.
  • Modelo: datos y reglas del negocio. Base de datos, APIs, lógica de aplicación.
  • DCU se enfoca en la capa de Presentación pero sus decisiones impactan toda la arquitectura.
Modelo Abstracto

Modelo de Interacción
Usuario–Sistema

🧑‍💻
Usuario
Tiene objetivos y tareas que quiere completar
🖱️
Input
Acciones: clic, teclado, voz, gesto
⚙️
Sistema
Procesa y genera respuesta lógica
🖥️
Output
Resultado visible: pantalla, sonido, vibración
🔄
Evaluación
El usuario interpreta y decide su próxima acción
🎯 El DCU rediseña este ciclo para que cada paso sea intuitivo, rápido y satisfactorio para el usuario.
Estrategia

Estrategia de Diseño
Centrado en el Usuario

Team collaborating
TRABAJO EN EQUIPO
Investigar primero

Entrevistas, encuestas, análisis de usuarios reales antes de diseñar.

Prototipar rápido

Bocetos, wireframes y prototipos interactivos antes del desarrollo.

Probar con usuarios

Tests de usabilidad con personas reales, no suposiciones del equipo.

Iterar y mejorar

El diseño perfecto no existe al primer intento. Mejorar es el proceso.

Procesos

Proceso del DCU

1
Fase 1 · Investigación
Comprender el contexto de uso: entrevistas, encuestas, observación de usuarios, análisis de la competencia y revisión de datos de uso.
2
Fase 2 · Análisis
Definir requisitos: personas, user journeys, historias de usuario, definición de necesidades y objetivos del usuario.
3
Fase 3 · Diseño
Crear soluciones: bocetos, wireframes, prototipos de baja y alta fidelidad, guías de estilo y sistemas de diseño.
4
Fase 4 · Evaluación
Probar con usuarios: tests de usabilidad, A/B testing, heurísticas de Nielsen, análisis de métricas de uso.
↺
Ciclo · Iteración
Mejorar continuamente: el proceso es cíclico. Los hallazgos de evaluación alimentan una nueva ronda de diseño.
Análisis

Análisis Centrado
en el Usuario

research-dashboard.ux
48
Entrevistas realizadas
312
Respuestas de encuesta
8
Tests de usabilidad
94%
Satisfacción post-rediseño
Técnicas de investigación
Entrevistas en profundidad
1:1 con usuarios para entender motivaciones
Encuestas cuantitativas
Datos estadísticos de grandes grupos
Observación contextual
Ver al usuario en su entorno real de uso
User Journey Mapping
Mapear toda la experiencia del usuario
Ciclo de vida

Ciclo de Vida
de la Interfaz de Usuario

🔄
🔍
Investigar
📐
Diseñar
🚀
Lanzar
✅
Evaluar
🔍 Investigar
Comprender quiénes son los usuarios, qué necesitan y cómo usan tecnología similar.
📐 Diseñar
Crear wireframes, prototipos y guías de estilo basados en hallazgos de investigación.
🚀 Lanzar
Implementar la interfaz y desplegarla ante usuarios reales con métricas activas.
✅ Evaluar
Tests de usabilidad, análisis de métricas y retroalimentación para mejorar.
Análisis de Tareas

Análisis de Tareas del Usuario

Flujo de compra en una app de e-commerce — cómo el DCU optimiza cada paso

🏠
Inicio
Usuario abre la app con un objetivo claro
🔍
Buscar
Barra de búsqueda prominente y sugerencias inteligentes
📦
Seleccionar
Imágenes claras, precio visible, botón CTA destacado
🛒
Carrito
Resumen claro sin sorpresas en precios ni pasos ocultos
✅
Pagar
Formulario mínimo, múltiples métodos, confirmación inmediata
📱 Amazon redujo su proceso de compra a 1 clic con el análisis de tareas del DCU — incrementando conversiones 30%.
Buenas interfaces

Características de una
Buena Interfaz

Bien diseñado
  • ✅ Jerarquía visual clara con espaciado generoso
  • ✅ Máximo 5–7 opciones de menú con íconos
  • ✅ Alto contraste WCAG AA+ (4.5:1 mínimo)
  • ✅ Botones con área táctil ≥44px y feedback visual
  • ✅ Mensajes de error claros con soluciones
  • ✅ Consistencia en colores, tipografías y patrones
  • ✅ Carga en menos de 3 segundos (Google ranking)
Mal diseñado
  • ❌ Pantallas saturadas sin jerarquía visual
  • ❌ 15+ opciones sin íconos ni agrupación lógica
  • ❌ Texto gris sobre fondo gris claro
  • ❌ Botones diminutos imposibles de tocar en móvil
  • ❌ "Error 404" sin contexto ni redirección
  • ❌ Cada pantalla con estilo diferente sin coherencia
  • ❌ Tiempos de carga de 8–10 segundos sin feedback
Herramientas

Herramientas para
DCU y UI/UX

🎨
Figma
Diseño de interfaces, prototipos interactivos y colaboración en tiempo real. Estándar de la industria UX.
WIREFRAMES PROTOTIPOS
🧩
Maze / UserTesting
Plataformas de testing remoto con usuarios reales. Mapas de calor, grabaciones y métricas de usabilidad.
TESTING MÉTRICAS
🗺️
Miro / Mural
Tableros colaborativos para journey maps, workshops, affinity mapping y design thinking en equipo.
UX RESEARCH COLABORACIÓN
🔥
Hotjar / Clarity
Mapas de calor, grabaciones de sesión y análisis del comportamiento real de usuarios en producción.
ANALYTICS HEATMAPS
Caso práctico

Caso Práctico:
App de Delivery de Comida

Decisiones de DCU en la app
🔍 Búsqueda prominente
El usuario quiere encontrar comida rápido. La barra de búsqueda va primero, siempre visible.
🏷️ Categorías con íconos
Filtrar por tipo de comida reduce la carga cognitiva y acelera la decisión.
⭐ Reseñas y tiempo
El tiempo de entrega y rating visibles eliminan la incertidumbre del usuario.
🛒 Checkout simplificado
Máximo 3 pasos para pedir. Guardar dirección y método de pago para repetir fácil.
Actividad en clase

✏️ Aplica el DCU:
Rediseña una App

  1. 1
    Elige una app con una experiencia que te haya frustrado o confundido (puede ser de tu institución, banco, transporte, gobierno, etc.).
  2. 2
    Define el usuario principal: ¿quién la usa?, ¿cuál es su objetivo?, ¿qué problema intenta resolver?
  3. 3
    Identifica 3 problemas de usabilidad concretos usando los criterios vistos: jerarquía, contraste, navegación, claridad.
  4. 4
    Dibuja (en papel o digital) un wireframe rápido de cómo mejorarías UNA pantalla aplicando DCU.
  5. 5
    Explica tu propuesta al grupo en 2 minutos: problema identificado, usuario afectado y solución propuesta.
Duración: 15–20 minutos Individual o parejas Boceto en papel válido
Conclusiones

Lo que aprendimos hoy

👤
Usuario primero
Toda decisión de diseño parte de las necesidades reales del usuario, no de las preferencias del equipo.
🔄
Proceso iterativo
El DCU no es lineal. Investigar → diseñar → probar → mejorar es un ciclo continuo y necesario.
✨
Experiencia
No vendemos pantallas ni botones. Diseñamos experiencias que resuelven problemas reales con elegancia.
♿
Accesibilidad
Diseñar para todos amplía el impacto. Accesibilidad no es opcional, es responsabilidad profesional.
⚡
Simplicidad
La mejor interfaz es la que el usuario no nota porque simplemente funciona sin esfuerzo cognitivo.
🧠

"No diseñes interfaces
para pantallas.
Diseña experiencias
para personas."

— Principio fundamental del Diseño Centrado en el Usuario

Diseño de Interfaces
DCU · Unidad I
¡Hasta la próxima!