Tecnología · 2o de Preparatoria

Ideas de aprendizaje activo

Interfaces Gráficas de Usuario (GUI)

El diseño de GUI exige que los estudiantes pasen de lo teórico a lo práctico, donde la teoría se vuelve tangible mediante la creación y prueba de interfaces. La manipulación activa de wireframes, prototipos y feedback real permite a los estudiantes internalizar conceptos abstractos como usabilidad y eventos de usuario de manera concreta y memorable.

• Aprendizajes Esperados SEP
• SEP EMS: Diseño de Interfaces y Experiencia de Usuario

• 25–45 min
• Parejas → Toda la clase
• 4 actividades

Actividad 01

• Enseñanza entre Pares
• 30 min · Parejas

Enseñanza entre Pares: Diseño de Wireframes

Los estudiantes en parejas esbozan wireframes para una app simple, identificando botones y menús clave. Luego, intercambian dibujos y sugieren mejoras en accesibilidad. Finalmente, digitalizan uno usando herramientas gratuitas como Figma.

¿Cómo afecta el diseño de la interfaz a la experiencia y accesibilidad del usuario?

Consejo de Facilitación

Durante el diseño de wireframes en parejas, pide a los estudiantes que justifiquen cada elemento con un objetivo claro, evitando que agreguen elementos solo por estética.

Qué observar

Entrega a cada estudiante una captura de pantalla de una aplicación conocida (ej. una red social, un reproductor de música). Pide que identifiquen dos widgets y describan un evento de usuario asociado a cada uno, explicando brevemente su función.

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

Actividad 02

• Círculo Interno-Externo
• 45 min · Grupos pequeños

Grupos Pequeños: Prototipo Interactivo

Grupos crean un prototipo básico de GUI en Scratch o HTML/CSS con eventos como clics que activan funciones. Prueban entre grupos y registran tiempos de tarea. Discuten ajustes para mejor usabilidad.

¿Qué balance debe existir entre la estética visual y la funcionalidad técnica?

Consejo de Facilitación

En la actividad de prototipo interactivo, asigna roles específicos dentro de los grupos para que todos participen, como diseñador, desarrollador y probador de usabilidad.

Qué observar

Los alumnos presentan un boceto de su diseño de GUI para una función específica (ej. registrarse en una app). Sus compañeros evalúan el diseño usando una rúbrica simple: ¿Es clara la disposición? ¿Son intuitivos los botones? ¿Se considera la accesibilidad? Se discuten dos puntos fuertes y una sugerencia de mejora.

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

Actividad 03

• Círculo Interno-Externo
• 40 min · Toda la clase

Clase Completa: Prueba de Usabilidad

La clase evalúa interfaces existentes en dispositivos compartidos, cronometrando tareas como 'encontrar un botón'. Votan mejoras colectivas y proponen rediseños grupales basados en datos.

¿De qué manera los eventos del usuario disparan procesos específicos en el código?

Consejo de Facilitación

Para la prueba de usabilidad en clase completa, rota entre grupos para observar patrones en las dificultades de los usuarios y guía discusiones sobre soluciones colectivas.

Qué observar

Durante una sesión de diseño, el docente circula y pregunta a los estudiantes: '¿Qué evento de usuario esperas que ocurra cuando alguien haga clic aquí?' o '¿Cómo este elemento de tu diseño ayuda a la accesibilidad del usuario?'

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

Actividad 04

• Círculo Interno-Externo
• 25 min · Individual

Individual: Análisis Crítico

Cada estudiante analiza una app mexicana popular, anotando fortalezas en GUI y proponiendo cambios para accesibilidad. Comparte hallazgos en foro clase para discusión.

¿Cómo afecta el diseño de la interfaz a la experiencia y accesibilidad del usuario?

Qué observar

Entrega a cada estudiante una captura de pantalla de una aplicación conocida (ej. una red social, un reproductor de música). Pide que identifiquen dos widgets y describan un evento de usuario asociado a cada uno, explicando brevemente su función.

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

Algunas notas para enseñar esta unidad

El enfoque más efectivo combina diseño iterativo con evidencia empírica. Evita enseñar GUI como una serie de reglas aisladas; en su lugar, integra ejemplos cotidianos que los estudiantes conozcan bien. La investigación muestra que la retroalimentación temprana y frecuente, incluso con prototipos en papel, mejora significativamente la calidad de los diseños finales. Modela la paciencia: el diseño de interfaces rara vez es lineal y requiere ajustes constantes basados en el usuario.

Los estudiantes demuestran comprensión al diseñar interfaces intuitivas que priorizan la funcionalidad sobre lo decorativo, al explicar con claridad cómo sus componentes responden a las necesidades del usuario y al ajustar sus diseños basándose en evidencia recolectada durante pruebas de usabilidad.

---

Cuidado con estas ideas erróneas

• Durante la actividad de diseño de wireframes en pares, escucha afirmaciones como 'un diseño bonito siempre es fácil de usar'.

  Interrumpe y pide a los estudiantes que identifiquen al menos un botón o menú en su diseño y expliquen cómo garantizan que sea visible y de tamaño adecuado para todos los usuarios, usando criterios como contraste y espacio en blanco.

• Durante la actividad de prototipo interactivo en grupos pequeños, algunos estudiantes asumen que los eventos de usuario se manejan automáticamente.

  Pide a los grupos que escriban en una tarjeta qué código sería necesario para manejar el evento de clic en un botón de su prototipo, y que comparen sus respuestas antes de continuar con la implementación.

• Durante la prueba de usabilidad en clase completa, escucha que los estudiantes dicen que la accesibilidad solo es relevante para personas con discapacidades.

  Durante la discusión posterior, pide a los estudiantes que evalúen si su diseño actual sería usable para alguien con visión reducida o con guantes, usando herramientas como simuladores de daltonismo o limitando el uso del mouse.

---

Metodologías usadas en este resumen

• Enseñanza entre Pares
• Círculo Interno-Externo