Tecnología · 3o de Preparatoria

Ideas de aprendizaje activo

Principios de Diseño de UI/UX

La enseñanza de principios de UI/UX requiere que los estudiantes vivan la experiencia del diseño, no solo la teoricen. La acción directa, como prototipar o evaluar interfaces reales, convierte conceptos abstractos en aprendizajes concretos y memorables. Los talleres prácticos y el análisis de casos reales generan conexiones inmediatas entre la teoría y su aplicación profesional.

• Aprendizajes Esperados SEP
• SEP EMS: Diseño de Interfaces y Experiencia de Usuario
• SEP EMS: Innovación y Diseño Digital

• 40–60 min
• Parejas → Toda la clase
• 4 actividades

Actividad 01

• Círculo Interno-Externo
• 45 min · Parejas

Taller: Prototipado de Wireframes

Los estudiantes dibujan wireframes simples para una app móvil en papel. Luego, los prueban intercambiándolos con una pareja para identificar problemas de usabilidad. Finalmente, iteran el diseño incorporando sugerencias. Proporciona plantillas y ejemplos de apps comunes.

¿Cómo la usabilidad impacta directamente la satisfacción del usuario con una aplicación?

Consejo de Facilitación

Antes del taller de Wireframes, pide a los estudiantes que lleven ejemplos de interfaces que les frustren o que admiren, para usarlos como referencia durante la actividad.

Qué observar

Entrega a cada estudiante una tarjeta con el nombre de una aplicación conocida (ej. WhatsApp, Instagram, YouTube). Pide que escriban dos principios de UI/UX que creen que esa aplicación aplica bien y una sugerencia para mejorarla, justificando brevemente.

• Recordar
• Comprender
• Aplicar
• Habilidades de Relación
• Autogestión

Actividad 02

• Análisis de Estudio de Caso
• 50 min · Grupos pequeños

Análisis de Estudio de Caso: Evaluación de Apps Reales

Selecciona tres apps populares. En grupos, evalúa usabilidad, accesibilidad y estética usando una rúbrica compartida. Registra fortalezas y debilidades con capturas de pantalla. Discute hallazgos en plenaria.

¿De qué manera el diseño inclusivo mejora la accesibilidad para todos los usuarios?

Consejo de Facilitación

Durante el Análisis de Apps Reales, asigna a cada grupo una app diferente para evitar repeticiones y fomentar diversidad de perspectivas en la discusión.

Qué observar

Muestra dos versiones de una misma pantalla de aplicación con diferencias claras en usabilidad o estética (ej. botones mal alineados vs. bien alineados). Pregunta a los estudiantes: '¿Qué versión prefieren y por qué? ¿Qué principio de diseño se está aplicando mejor en esa versión?'

• Analizar
• Evaluar
• Crear
• Toma de Decisiones
• Autogestión

Actividad 03

• Desafío de Línea de Tiempo
• 40 min · Grupos pequeños

Desafío de Línea de Tiempo: Diseño Inclusivo

Diseña una interfaz accesible para un sitio web educativo. Considera colores de alto contraste, navegación por teclado y texto alternativo. Prueba con compañeros simulando discapacidades visuales o motoras. Ajusta según retroalimentación.

¿Por qué la coherencia visual es crucial para una buena experiencia de usuario?

Consejo de Facilitación

En el Desafío de Diseño Inclusivo, proporciona materiales tangibles como gafas con lentes empañados o audífonos con ruido ambiental para simular limitaciones sensoriales.

Qué observar

Los estudiantes trabajan en parejas para dibujar un boceto simple de una pantalla de inicio para una nueva app. Luego, intercambian bocetos y evalúan el del compañero basándose en dos criterios: '¿Es fácil identificar las funciones principales?' y '¿El diseño visual es agradable?'. Deben dar una retroalimentación constructiva.

• Recordar
• Comprender
• Analizar
• Autogestión
• Habilidades de Relación

Actividad 04

• Rotación por Estaciones
• 60 min · Grupos pequeños

Rotación por Estaciones: Principios UI/UX

Crea cuatro estaciones: usabilidad (pruebas cronometradas), accesibilidad (lectores de pantalla), estética (análisis de grids) y coherencia (comparación de pantallas). Los grupos rotan, documentan observaciones y comparten conclusiones.

¿Cómo la usabilidad impacta directamente la satisfacción del usuario con una aplicación?

Consejo de Facilitación

En las Estaciones de Principios UI/UX, coloca un cronómetro visible en cada estación para mantener el ritmo y evitar que los grupos se queden estancados en un solo tema.

Qué observar

Entrega a cada estudiante una tarjeta con el nombre de una aplicación conocida (ej. WhatsApp, Instagram, YouTube). Pide que escriban dos principios de UI/UX que creen que esa aplicación aplica bien y una sugerencia para mejorarla, justificando brevemente.

• Recordar
• Comprender
• Aplicar
• Analizar
• Autogestión
• Habilidades de Relación

Algunas notas para enseñar esta unidad

Este tema se enseña mejor con un enfoque basado en proyectos y aprendizaje colaborativo. Evita clases magistrales largas; en su lugar, usa demostraciones breves seguidas de práctica guiada. La investigación en diseño instruccional muestra que los estudiantes retienen mejor los principios cuando los aplican inmediatamente a problemas reales, en lugar de memorizar definiciones. Prioriza la retroalimentación inmediata y el trabajo en equipo para reforzar el aprendizaje.

Al finalizar las actividades, los estudiantes podrán identificar y explicar los principios de usabilidad, accesibilidad y estética en interfaces digitales. Demuestran comprensión al justificar sus decisiones de diseño y al proponer mejoras basadas en evidencias, usando un lenguaje técnico preciso y colaborativo.

---

Cuidado con estas ideas erróneas

• Durante el Taller de Prototipado de Wireframes, escucha a los estudiantes confundir los términos UI y UX.

  Interrumpe el taller después de 15 minutos y pide a cada pareja que cree dos columnas en su hoja: una para elementos de UI (colores, tipografía, botones) y otra para elementos de UX (flujo de navegación, tiempo de carga, feedback de usuario). Luego, discutan cómo ambos aspectos interactúan en su prototipo.

• Durante el Análisis de Apps Reales, algunos estudiantes pueden argumentar que una app es exitosa solo por su diseño visual.

  Pide a los grupos que elijan una app con un diseño atractivo pero que hayan tenido problemas para usarla. Luego, deben presentar un caso en el que priorizarían la usabilidad sobre la estética, usando ejemplos concretos de su experiencia.

• Durante el Desafío de Diseño Inclusivo, algunos pueden creer que la accesibilidad solo afecta a un pequeño grupo de usuarios.

  Al finalizar el desafío, organiza una puesta en común donde cada equipo comparta una mejora que idearon para su interfaz. Luego, pregunta: '¿Quién se beneficia de este cambio además de las personas con discapacidades permanentes?'. Guía la discusión para que identifiquen beneficios para todos los usuarios.

---

Metodologías usadas en este resumen

• Círculo Interno-Externo
• Análisis de Estudio de Caso
• Desafío de Línea de Tiempo
• Rotación por Estaciones