Unidad 1 · Diseño de UI/UX
Fundamentos, diferencias, historia, principios clave y ejemplos de buenos y malos diseños.
[Docente] · [Institución] · [Fecha] — Usa las flechas o haz clic en cualquier zona del mapa.
Objetivos de aprendizaje
qué es UX y qué es UI con tus propias palabras.
el alcance, las preguntas y los entregables de cada una.
los hitos que dieron origen a las interfaces actuales.
un producto real con criterios de usabilidad y accesibilidad.
Actividad · 5 minutos
Fundamentos
Todo lo que una persona percibe y siente antes, durante y después de usar un producto, servicio o sistema.
Basado en ISO 9241-210 y en Don Norman, quien popularizó el término en Apple en los años 90.
¿Quién es el usuario?
¿Qué necesita lograr?
¿Dónde se frustra?
¿Lo logra con facilidad?
Fundamentos
El punto de contacto entre la persona y el sistema: lo que ve, toca, escucha y manipula. Gráfica, de voz, táctil o de comandos.
Diferencias
| Aspecto | UX | UI |
|---|---|---|
| Enfoque | Cómo funciona y se siente | Cómo se ve y se manipula |
| Métodos | Entrevistas, mapas de viaje | Guías de estilo, sistemas de diseño |
| Entrega | Flujos, wireframes, prototipos | Mockups y componentes |
Clasifica la tarea: ¿UX o UI?
Una analogía para recordar
Dónde va la cocina, cómo circulas, si entra la luz, si es cómoda para vivir.
Pintura, manijas, interruptores y muebles: lo que tocas y ves cada día.
Una casa linda con mal plano se vende… pero nadie quiere vivir en ella.
Historia y evolución
Xerox Alto: ventanas, íconos y ratón en una interfaz gráfica.
Apple Macintosh lleva la interfaz gráfica al público masivo.
Don Norman publica el libro hoy conocido como La psicología de los objetos cotidianos.
Norman, en Apple, populariza «experiencia de usuario».
Jakob Nielsen publica sus 10 heurísticas de usabilidad.
El W3C publica las pautas WCAG 1.0.
El iPhone impone la pantalla multitáctil.
Sistemas de diseño (Material Design), voz e IA.
Principio 1 · Usabilidad
ISO 9241-11: grado en que un usuario logra sus objetivos con eficacia, eficiencia y satisfacción en un contexto dado.
¿Fácil la primera vez?
¿Rápido con práctica?
¿Lo recuerdo al volver?
¿Pocos y reparables?
¿Es agradable?
Cinco componentes según Jakob Nielsen (Nielsen Norman Group).
Toca cada tarjeta para ver un ejemplo
Principio 2 · Accesibilidad
Las WCAG del W3C la organizan en cuatro principios, POUR:
Texto alternativo, subtítulos, buen contraste.
Todo funciona con teclado, con tiempo suficiente.
Lenguaje claro y comportamiento predecible.
Compatible con lectores de pantalla.
Contraste mínimo de texto normal, nivel AA: 4.5:1 (WCAG 2.x). Esta presentación se puede recorrer completa solo con el teclado.
Ejemplos · Buen diseño · Toca cada tarjeta
Una sola tarea en primer plano: un cuadro de texto.
Heurística 8Unos segundos para arrepentirte tras enviar.
Heurísticas 3 y 9Ves dónde está el vehículo y cuánto falta.
Heurística 1Ejemplos · Mal diseño · Toca cada tarjeta
Manija para jalar en una puerta que se empuja.
Heurística 2Florida, 2000: casillas desalineadas con los nombres confundieron a votantes.
Heurísticas 4 y 5Suscribirse en un clic; cancelar exige llamar.
Heurística 3