Tecnología y Digitalización · 3° ESO

Ideas de aprendizaje activo

Diseño de Interfaz de Usuario (UI) y Prototipado

Los alumnos de 3.º ESO aprenden mejor diseñando interfaces reales, no solo escuchando teoría, porque manipular herramientas como Figma o Adobe XD les permite ver cómo los principios de diseño se traducen en soluciones prácticas. La creación colaborativa de wireframes y prototipos activa su pensamiento crítico al enfrentarlos a decisiones reales sobre usabilidad y accesibilidad, clave para el diseño UI moderno.

• Competencias Clave LOMLOE
• LOMLOE: ESO - Diseño universal
• LOMLOE: ESO - Empatía y diseño

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

Actividad 01

• Matriz de decisión
• 30 min · Parejas

Pares: Wireframe Inicial

En parejas, los alumnos esbozan en papel la interfaz de una app escolar simple, identificando elementos clave como menú y botones. Luego, digitalizan el wireframe en Figma. Comparten con otra pareja para feedback inicial de 5 minutos.

¿Cómo podéis testear si vuestro diseño es realmente fácil de usar?

Consejo de facilitación

Durante la actividad 'Pares: Wireframe Inicial', pide a cada pareja que elija una app sencilla pero que tenga al menos cinco funciones distintas para garantizar que trabajen con variedad de elementos interactivos.

Qué observar

Entrega a cada alumno una tarjeta con una tarea simple (ej. 'encontrar el botón de contacto'). Pídeles que dibujen el wireframe de la pantalla principal que necesitarían para realizar esa tarea y escriban una frase explicando por qué eligieron esa disposición.

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

Actividad 02

• Matriz de decisión
• 45 min · Grupos pequeños

Grupos Pequeños: Prototipo Interactivo

Grupos de 4 crean un prototipo clickable en herramienta digital, aplicando coherencia visual. Incluyen transiciones entre pantallas. Prueban el prototipo internamente registrando tiempos de navegación.

¿Qué importancia tiene la coherencia visual en el diseño de una interfaz?

Consejo de facilitación

En 'Grupos Pequeños: Prototipo Interactivo', asigna roles rotativos cada 10 minutos (ej. diseñador, probador, anotador) para que todos participen activamente y eviten el trabajo desigual.

Qué observar

Los alumnos presentan un prototipo interactivo simple de dos pantallas. Sus compañeros evalúan el prototipo respondiendo a dos preguntas: '¿Es fácil encontrar la información?' y '¿Qué elemento visual podría mejorarse para guiar mejor al usuario?'. El presentador anota las sugerencias.

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

Actividad 03

• Matriz de decisión
• 40 min · Toda la clase

Clase Completa: Sesión de Testing

Todos los prototipos se proyectan; la clase prueba uno por grupo, cronometrando tareas como 'encuentra el botón de inicio'. Votan mejoras colectivas y ajustan en vivo.

¿Cómo utilizaríais un prototipo para validar vuestras ideas de diseño antes de programar?

Consejo de facilitación

Para la 'Sesión de Testing', prepara un formulario con preguntas estandarizadas que los alumnos deben hacer a sus compañeros para asegurar que el feedback sea útil y comparable entre grupos.

Qué observar

Muestra a la clase dos versiones de un mismo botón (uno con buen contraste y tamaño, otro deficiente). Pregunta: '¿Cuál de estos botones es más accesible y por qué, considerando a usuarios con diferentes capacidades visuales?'

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

Actividad 04

• Matriz de decisión
• 20 min · Individual

Individual: Reflexión de Iteración

Cada alumno revisa feedback recibido, anota 3 cambios en su prototipo y crea versión 2.0. Suben a portafolio digital para autoevaluación.

¿Cómo podéis testear si vuestro diseño es realmente fácil de usar?

Consejo de facilitación

En la actividad 'Reflexión de Iteración', guía a los alumnos para que comparen su primera versión del prototipo con la final, destacando cambios y justificando por qué cada ajuste mejora la experiencia del usuario.

Qué observar

Entrega a cada alumno una tarjeta con una tarea simple (ej. 'encontrar el botón de contacto'). Pídeles que dibujen el wireframe de la pantalla principal que necesitarían para realizar esa tarea y escriban una frase explicando por qué eligieron esa disposición.

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

Algunas notas para enseñar esta unidad

Este tema se enseña mejor combinando teoría inicial breve con práctica inmediata, ya que los alumnos retienen mejor los conceptos cuando los aplican en contexto real. Evita largas explicaciones sobre teoría del color o tipografía antes de que los alumnos hayan experimentado con herramientas digitales, pues pueden resultar abrumadoras. La investigación en diseño educativo sugiere que los errores cometidos durante el proceso de iteración —como botones inaccesibles o menús confusos— son los que más aprendizaje generan, siempre que el docente dirija una reflexión posterior estructurada.

Al finalizar las actividades, los alumnos no solo conocerán conceptos como coherencia visual o diseño universal, sino que serán capaces de aplicarlos para crear interfaces funcionales que resuelvan problemas reales para usuarios diversos. Esperamos que identifiquen errores de diseño comunes, propongan mejoras basadas en feedback y defiendan sus decisiones con argumentos centrados en el usuario.

---

Atención a estas ideas erróneas

• Durante la actividad 'Pares: Wireframe Inicial', algunos alumnos pueden creer que el diseño UI se centra solo en colores y formas bonitas.

  Usa esta actividad para mostrarles que los colores y formas deben guiar la atención hacia elementos funcionales; pide que cada pareja explique por qué colocaron un botón en una posición específica y cómo ese botón ayuda al usuario a completar una tarea.

• Durante la actividad 'Grupos Pequeños: Prototipo Interactivo', algunos pueden pensar que un prototipo que 'se vea bien' basta sin necesidad de testing.

  Incorpora la prueba con usuarios reales en esta fase; los alumnos deben observar cómo sus compañeros interactúan con el prototipo y anotar los puntos de confusión o frustración, como clics en áreas no clickeables o búsqueda fallida de información.

• Durante la actividad 'Sesión de Testing', algunos alumnos pueden considerar que el diseño universal solo beneficia a personas con discapacidades.

  En esta sesión, pide que prueben el prototipo con simulaciones de condiciones reales, como usar el prototipo con el móvil en modo horizontal o aumentando el tamaño del texto, para que vean cómo estos ajustes mejoran la experiencia para todos los usuarios.

---

Metodologías usadas en este resumen

• Matriz de decisión