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.

• 3° ESO
• Innovación Digital y Pensamiento Computacional
• 4 actividades
• 20 min–45 min

Objetivos de aprendizaje

1. Diseñar wireframes básicos para una aplicación móvil o web, aplicando principios de jerarquía visual y espaciado.
2. Crear prototipos interactivos sencillos utilizando herramientas digitales, conectando al menos tres pantallas para simular un flujo de usuario.
3. Evaluar la usabilidad de un diseño de interfaz propuesto por compañeros, identificando al menos dos puntos de mejora basados en criterios de accesibilidad.
4. Comparar dos diseños de interfaz diferentes para la misma funcionalidad, argumentando cuál ofrece una mejor experiencia de usuario y por qué.

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.

Preparación y detalles

¿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.

Setup: Grupos en mesas con plantillas de matrices de decisión

Materials: Plantilla de matriz de decisión, Tarjetas descriptivas de las opciones, Guía de ponderación de criterios, Plantilla para la presentación de conclusiones

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

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.

Preparación y detalles

¿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.

Setup: Grupos en mesas con plantillas de matrices de decisión

Materials: Plantilla de matriz de decisión, Tarjetas descriptivas de las opciones, Guía de ponderación de criterios, Plantilla para la presentación de conclusiones

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

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.

Preparación y detalles

¿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.

Setup: Grupos en mesas con plantillas de matrices de decisión

Materials: Plantilla de matriz de decisión, Tarjetas descriptivas de las opciones, Guía de ponderación de criterios, Plantilla para la presentación de conclusiones

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

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.

Preparación y detalles

¿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.

Setup: Grupos en mesas con plantillas de matrices de decisión

Materials: Plantilla de matriz de decisión, Tarjetas descriptivas de las opciones, Guía de ponderación de criterios, Plantilla para la presentación de conclusiones

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

Enseñando este tema

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.

Qué esperar

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

Idea errónea común

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

Qué enseñar en su lugar

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.

Idea errónea común

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

Qué enseñar en su lugar

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.

Idea errónea común

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

Qué enseñar en su lugar

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.

Ideas de Evaluación

Boleto de Salida

Después de la actividad 'Pares: Wireframe Inicial', entrega a cada alumno una tarjeta con una tarea simple (ej. 'comprar un libro'). Pídeles que dibujen el wireframe de la pantalla principal que necesitarían y escriban una frase explicando por qué colocaron los elementos donde lo hicieron.

Evaluación entre Iguales

Durante la actividad 'Grupos Pequeños: Prototipo Interactivo', pide a los compañeros que evalúen 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 en una tabla compartida.

Verificación Rápida

Después de la actividad 'Sesión de Testing', 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 usuarios con diferentes capacidades visuales?' y pide que justifiquen su respuesta en una frase.

Extensiones y apoyo

• Challenge: Pide a los alumnos que diseñen una interfaz para una app de reciclaje, incluyendo elementos que fomenten la accesibilidad para usuarios con daltonismo, utilizando las herramientas de simulación de Figma.
• Scaffolding: Para estudiantes que luchan con la estructura, proporciona plantillas con secciones etiquetadas (ej. 'header', 'menú principal', 'contenido') y pide que completen solo los elementos esenciales.
• Deeper exploration: Invita a los alumnos a investigar cómo se aplican los principios de diseño universal en aplicaciones reales como Google Maps o Duolingo, analizando un caso concreto en una presentación de 3 minutos.

Vocabulario Clave

Wireframe	Un boceto de baja fidelidad que representa la estructura básica y la disposición de los elementos en una interfaz de usuario, sin detalles visuales.
Prototipo interactivo	Una simulación de un producto digital que permite a los usuarios experimentar la navegación y la funcionalidad básica, mostrando cómo interactúan los elementos.
Flujo de usuario	La secuencia de pasos que un usuario sigue para completar una tarea específica dentro de una interfaz, desde el punto de inicio hasta la finalización.
Jerarquía visual	La organización de los elementos de diseño para mostrar su orden de importancia, guiando la mirada del usuario a través de la información de manera efectiva.
Test de usabilidad	Un método para evaluar qué tan fácil de usar es una interfaz, observando a usuarios reales mientras intentan completar tareas y recopilando sus comentarios.