Tecnología · 2o de Secundaria

Ideas de aprendizaje activo

Diseño de Interfaz de Usuario (UI) y Experiencia de Usuario (UX)

Los conceptos de UI y UX cobran vida cuando los estudiantes experimentan con materiales concretos y reciben retroalimentación inmediata. Trabajar con prototipos físicos, bocetos y pruebas reales les permite conectar teoría con problemas tangibles que enfrentan los usuarios.

• Aprendizajes Esperados SEP
• SEP Secundaria: Diseño y Creación de Prototipos

• 30–50 min
• Parejas → Toda la clase
• 4 actividades

Actividad 01

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

Rotación por Estaciones: Principios UI

Prepara cuatro estaciones: colores y contraste, tipografía y legibilidad, iconos intuitivos, navegación consistente. Los grupos rotan cada 10 minutos, experimentan con ejemplos impresos o digitales y anotan observaciones. Cierra con una discusión grupal sobre elecciones clave.

¿Cómo se diferencia el diseño de interfaz de usuario de la experiencia de usuario?

Consejo de Facilitación

Para la Rotación por Estaciones, prepare materiales específicos para cada principio (ej. tarjetas con ejemplos de jerarquía visual) y limite el tiempo en cada estación a 8 minutos para mantener el ritmo.

Qué observar

Entregue a cada estudiante una tarjeta con el nombre de una aplicación conocida (ej. WhatsApp, YouTube). Pida que escriban dos elementos de UI que les gustan y una sugerencia de UX para mejorarla, justificando brevemente cada punto.

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

Actividad 02

• Enseñanza entre Pares
• 30 min · Parejas

Enseñanza entre Pares: Wireframes Rápidos

En parejas, los estudiantes esbozan wireframes para una app escolar simple, como un calendario de tareas. Usan papel y lápices para priorizar elementos UI. Intercambian con otra pareja para feedback inicial de usabilidad.

¿Qué elementos visuales y de interacción contribuyen a una buena experiencia de usuario?

Consejo de Facilitación

En los Wireframes Rápidos en pares, entregue hojas en blanco y lápices de colores limitados (3 por equipo) para evitar que los estudiantes pierdan tiempo en detalles superfluos.

Qué observar

Los estudiantes trabajan en parejas para dibujar un boceto simple de la interfaz de una aplicación. Luego, intercambian bocetos y evalúan la claridad de la navegación y la posible facilidad de uso, proporcionando una retroalimentación constructiva sobre un aspecto a mejorar.

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

Actividad 03

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

Pruebas de Usabilidad en Grupo

Grupos crean prototipos en cartón o apps básicas. Un estudiante 'usuario' prueba la interfaz mientras otros observan y registran confusiones. Rotan roles y ajustan basado en datos recolectados.

¿Cómo se asegura que una interfaz sea accesible para personas con diferentes capacidades?

Consejo de Facilitación

Durante las Pruebas de Usabilidad en Grupo, asigne roles claros: un usuario, un observador que anote silenciosamente y un anotador de tiempos. Esto evita que los estudiantes se distraigan con múltiples tareas.

Qué observar

Presente en pantalla dos versiones de una misma interfaz (una bien diseñada, otra no tanto). Pregunte a los estudiantes: ¿Cuál interfaz es más intuitiva y por qué? ¿Qué principios de UI/UX se aplican mejor en la primera opción?

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

Actividad 04

• Análisis de Estudio de Caso
• 35 min · Toda la clase

Galería Crítica: UX Colectiva

Exhibe prototipos en el salón. La clase camina, vota con post-its por lo más intuitivo y discute accesibilidad. Cada equipo itera una mejora inmediata.

¿Cómo se diferencia el diseño de interfaz de usuario de la experiencia de usuario?

Consejo de Facilitación

En la Galería Crítica: UX Colectiva, coloque los proyectos en paredes separadas y pida a los estudiantes que roten en silencio para escribir notas adhesivas con observaciones específicas sobre cada diseño.

Qué observar

Entregue a cada estudiante una tarjeta con el nombre de una aplicación conocida (ej. WhatsApp, YouTube). Pida que escriban dos elementos de UI que les gustan y una sugerencia de UX para mejorarla, justificando brevemente cada punto.

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

Algunas notas para enseñar esta unidad

Enseñar UI/UX requiere equilibrar creatividad con estructura. Los docentes deben modelar el pensamiento en voz alta al analizar diseños, usar ejemplos cotidianos para conectar con la experiencia de los estudiantes y evitar corregir demasiado pronto. La iteración es central: muestre cuántas veces se refinó un diseño antes de llegar a la versión final.

Los estudiantes demuestran comprensión al identificar principios de diseño en ejemplos reales, proponer mejoras basadas en pruebas de usabilidad y justificar decisiones con evidencia recolectada durante las actividades. La colaboración y el análisis reflexivo son clave.

---

Cuidado con estas ideas erróneas

• Durante la Rotación por Estaciones: Principios UI, algunos estudiantes pueden pensar que UI y UX son lo mismo al ver ejemplos visuales.

  Use la estación de consistencia para mostrar dos versiones de una app: una con botones de colores distintos para cada acción y otra con colores repetidos. Pida que comparen cuál es más fácil de usar y relacionen esto con la diferencia entre UI (apariencia) y UX (funcionalidad).

• Durante los Pares: Wireframes Rápidos, algunos pueden creer que un diseño bonito garantiza buena UX.

  Después de que los equipos terminen sus bocetos, pida que intercambien wireframes y completen una tarea específica (ej. 'Inicia sesión'). Observen si la navegación intuitiva prima sobre la estética, destacando que la UX se prueba con acciones reales.

• Durante la Galería Crítica: UX Colectiva, algunos pueden asumir que la accesibilidad solo beneficia a personas con discapacidades.

  En la galería, coloque dos versiones de una interfaz: una con texto pequeño y bajo contraste, otra con texto grande y alto contraste. Pida que los estudiantes usen lentes con filtro de color (disponibles en apps gratuitas) para simular daltonismo y noten cómo las mejoras benefician a todos.

---

Metodologías usadas en este resumen

• Rotación por Estaciones
• Enseñanza entre Pares
• Análisis de Estudio de Caso