Diseño Centrado en el Usuario

Presentación

Diseño Centrado en el Usuario

Clic para interactuar · ESC para salir

Fundamentos del DCU

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

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.

Definición según ISO 9241-210:

El DCU es un proceso de diseño ergonómico enfocado en la ergonomía de la interacción humano-sistema.

Principio fundamental: 💡 El DCU no pregunta “¿podemos construir esto?” sino “¿los usuarios necesitan esto y pueden usarlo?”

El usuario es el centro de todo proceso de diseño.

¿Por qué importa el DCU?

El Diseño Centrado en el Usuario tiene un impacto directo en el éxito de cualquier producto digital:

😊 Satisfacción del usuario

Usuarios satisfechos usan el producto más tiempo y lo recomiendan
Netflix diseña cada pantalla basándose en datos de comportamiento real

🎯 Usabilidad mejorada

Las interfaces usables reducen errores y tiempo de aprendizaje
Un botón bien ubicado puede aumentar conversiones hasta 30%

♿ Accesibilidad universal

1 de cada 4 personas tiene alguna discapacidad
Diseñar inclusivo amplía el alcance del producto a toda la población

✨ Experiencia positiva

La experiencia positiva genera lealtad de marca
Los usuarios de Apple tienen una retención del 92% porque la UX está en el centro

⚡ Eficiencia en el desarrollo

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

Modelo Arquitectónico de la UI

La arquitectura de una aplicación moderna se divide típicamente en tres capas:

🎨 Presentación / UI

Lo que el usuario ve e interactúa
Botones, formularios, pantallas, animaciones
El DCU se enfoca principalmente en esta capa

⚙️ Lógica / Controlador

Gestiona las acciones del usuario
Recibe eventos, procesa solicitudes y conecta capas
Traduce inputs en operaciones

💾 Datos / Modelo

Datos y reglas del negocio
Base de datos, APIs, lógica de aplicación
Persistencia de información

💡 Importante: El DCU se enfoca en la capa de Presentación, pero sus decisiones impactan toda la arquitectura del sistema.

Modelos y Estrategias

Modelo de Interacción Usuario–Sistema

El DCU rediseña el ciclo de interacción para que cada paso sea intuitivo, rápido y satisfactorio:

Flujo de interacción:

🧑‍💻 Usuario → Tiene objetivos y tareas que quiere completar
🖱️ Input → Realiza acciones: clic, teclado, voz, gesto
⚙️ Sistema → Procesa y genera respuesta lógica
🖥️ Output → Muestra resultado visible: pantalla, sonido, vibración
🔄 Evaluación → El usuario interpreta y decide su próxima acción

Este ciclo se repite constantemente durante la interacción. El objetivo del DCU es hacer cada iteración del ciclo lo más fluida y natural posible.

Estrategia de Diseño Centrado en el Usuario

Cuatro pilares fundamentales para implementar DCU exitosamente:

🔍 Investigar primero

Entrevistas, encuestas, análisis de usuarios reales antes de diseñar
No asumas, descubre qué necesitan realmente

✏️ Prototipar rápido

Bocetos, wireframes y prototipos interactivos antes del desarrollo
Fallar rápido y barato en papel, no en código

🧪 Probar con usuarios

Tests de usabilidad con personas reales, no suposiciones del equipo
Observa cómo usan realmente tu diseño

🔄 Iterar y mejorar

El diseño perfecto no existe al primer intento
Mejorar continuamente es el proceso, no el fracaso

Proceso del DCU

El proceso de Diseño Centrado en el Usuario es cíclico e iterativo:

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

Fase 2 · 📊 Análisis

Definir requisitos basados en hallazgos
Crear personas y user journeys
Historias de usuario y definición de objetivos

Fase 3 · 🎨 Diseño

Crear soluciones de diseño
Bocetos, wireframes, prototipos de baja y alta fidelidad
Guías de estilo y sistemas de diseño

Fase 4 · ✅ Evaluación

Probar con usuarios reales
Tests de usabilidad, A/B testing
Heurísticas de Nielsen, análisis de métricas

Ciclo · ↺ Iteración

Mejorar continuamente
Los hallazgos de evaluación alimentan una nueva ronda de diseño
El proceso nunca termina realmente

Análisis y Ciclo de Vida

Análisis Centrado en el Usuario

Técnicas fundamentales de investigación UX:

🎤 Entrevistas en profundidad

Conversaciones 1:1 con usuarios para entender motivaciones profundas
Preguntas abiertas sobre comportamientos y necesidades

📊 Encuestas cuantitativas

Datos estadísticos de grandes grupos de usuarios
Validación de hipótesis a escala

👁️ Observación contextual

Ver al usuario en su entorno real de uso
Descubrir comportamientos que los usuarios no mencionan

🚶 User Journey Mapping

Mapear toda la experiencia del usuario
Identificar puntos de fricción y oportunidades de mejora

Métricas típicas de investigación:

Entrevistas realizadas
Respuestas de encuesta
Tests de usabilidad completados
Nivel de satisfacción post-rediseño

Ciclo de Vida de la Interfaz de Usuario

El desarrollo de una interfaz sigue un ciclo continuo de cuatro fases:

🔍 Investigar

Comprender quiénes son los usuarios
Qué necesitan y cómo usan tecnología similar
Análisis del contexto de uso

📐 Diseñar

Crear wireframes y prototipos
Desarrollar guías de estilo basadas en hallazgos de investigación
Iterar sobre conceptos visuales

🚀 Lanzar

Implementar la interfaz diseñada
Desplegarla ante usuarios reales
Activar métricas de seguimiento

✅ Evaluar

Tests de usabilidad con usuarios reales
Análisis de métricas de uso y comportamiento
Recopilar retroalimentación para mejorar

El ciclo se repite constantemente, cada iteración mejora el producto.

Análisis de Tareas

Ejemplo práctico: Flujo de compra en una app de e-commerce

El DCU optimiza cada paso del proceso:

🏠 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

Caso de éxito: 📱 Amazon redujo su proceso de compra a 1 clic con el análisis de tareas del DCU — incrementando conversiones 30%.

Buenas Prácticas

Características de una Buena Interfaz

✅ Interfaces bien diseñadas:

Jerarquía visual clara con espaciado generoso
Máximo 5–7 opciones de menú con íconos descriptivos
Alto contraste WCAG AA+ (4.5:1 mínimo)
Botones con área táctil ≥44px y feedback visual
Mensajes de error claros con soluciones propuestas
Consistencia en colores, tipografías y patrones
Carga en menos de 3 segundos (impacta ranking de Google)

❌ Interfaces mal diseñadas:

Pantallas saturadas sin jerarquía visual
15+ opciones sin íconos ni agrupación lógica
Texto gris sobre fondo gris claro (bajo contraste)
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 para DCU y UI/UX

🎨 Figma

Diseño de interfaces y prototipos interactivos
Colaboración en tiempo real
Estándar de la industria UX
Tags: WIREFRAMES, PROTOTIPOS

🧩 Maze / UserTesting

Plataformas de testing remoto con usuarios reales
Mapas de calor, grabaciones y métricas de usabilidad
Tags: TESTING, MÉTRICAS

🗺️ Miro / Mural

Tableros colaborativos para journey maps
Workshops, affinity mapping y design thinking en equipo
Tags: UX RESEARCH, COLABORACIÓN

🔥 Hotjar / Clarity

Mapas de calor y grabaciones de sesión
Análisis del comportamiento real de usuarios en producción
Tags: ANALYTICS, HEATMAPS

Caso Práctico: App de Delivery de Comida

Decisiones de DCU aplicadas en una app de delivery:

🔍 Búsqueda prominente

El usuario quiere encontrar comida rápido
La barra de búsqueda va primero, siempre visible
Reduce la fricción en el objetivo principal

🏷️ Categorías con íconos

Filtrar por tipo de comida reduce la carga cognitiva
Íconos visuales ayudan a escanear rápidamente
Acelera la decisión del usuario

⭐ Reseñas y tiempo de entrega

Información clave visible en cada tarjeta
El tiempo de entrega y rating eliminan la incertidumbre
Usuarios deciden con confianza

🛒 Checkout simplificado

Máximo 3 pasos para completar el pedido
Guardar dirección y método de pago para repetir fácil
Cada fricción eliminada aumenta conversión

Actividad Práctica

✏️ Aplica el DCU: Rediseña una App

Objetivo: Aplicar los principios de DCU para mejorar una experiencia de usuario real.

Pasos a seguir:

Elige una app problemática
- Selecciona una app con una experiencia que te haya frustrado o confundido
- Puede ser de tu institución, banco, transporte, gobierno, etc.
Define el usuario principal
- ¿Quién la usa?
- ¿Cuál es su objetivo?
- ¿Qué problema intenta resolver?
Identifica 3 problemas de usabilidad
- Usa los criterios vistos: jerarquía, contraste, navegación, claridad
- Sé específico con ejemplos concretos
Dibuja un wireframe rápido
- En papel o digital
- Mejora UNA pantalla aplicando DCU
- Enfócate en resolver los problemas identificados
Explica tu propuesta al grupo
- Presentación de 2 minutos
- Problema identificado
- Usuario afectado
- Solución propuesta

Detalles:

⏱️ Duración: 15–20 minutos
👥 Individual o en parejas
✏️ Boceto en papel es 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 personales del equipo

🔄 Proceso iterativo

El DCU no es lineal
Investigar → diseñar → probar → mejorar es un ciclo continuo y necesario

✨ Diseñamos experiencias

No vendemos pantallas ni botones
Diseñamos experiencias que resuelven problemas reales con elegancia

♿ Accesibilidad es responsabilidad

Diseñar para todos amplía el impacto
Accesibilidad no es opcional, es responsabilidad profesional

⚡ La simplicidad gana

La mejor interfaz es la que el usuario no nota
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