Tecnología y Digitalización · 3° ESO · Creación de Contenidos y Diseño Web · 2o Trimestre

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

Los alumnos aprenden a diseñar interfaces de usuario (UI) atractivas y funcionales, utilizando herramientas de prototipado.

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

Sobre este tema

El diseño de interfaz de usuario (UI) y el prototipado permiten a los alumnos de 3.º ESO crear interfaces atractivas y funcionales para aplicaciones web o móviles. Aprenden principios como la coherencia visual, que asegura que elementos como botones y menús sigan patrones consistentes para guiar al usuario de forma intuitiva. Utilizan herramientas como Figma o Adobe XD para esbozar wireframes y prototipos interactivos, aplicando empatía para considerar necesidades diversas y diseño universal, alineado con LOMLOE.

En la unidad de Creación de Contenidos y Diseño Web, este tema fomenta el pensamiento iterativo: los estudiantes validan ideas mediante prototipos antes de programar, respondiendo a preguntas clave como la importancia de testear usabilidad o mantener coherencia visual. Esto conecta con competencias digitales al promover accesibilidad y experiencia de usuario centrada en el humano.

El aprendizaje activo beneficia especialmente este tema porque los prototipos se construyen y prueban en equipo, haciendo visibles errores de usabilidad que la teoría sola no revela. Actividades prácticas como rotaciones de testing convierten conceptos abstractos en experiencias reales, fortaleciendo la empatía y el diseño iterativo.

Preguntas clave

1. ¿Cómo podéis testear si vuestro diseño es realmente fácil de usar?
2. ¿Qué importancia tiene la coherencia visual en el diseño de una interfaz?
3. ¿Cómo utilizaríais un prototipo para validar vuestras ideas de diseño antes de programar?

Objetivos de Aprendizaje

• Diseñar wireframes básicos para una aplicación móvil o web, aplicando principios de jerarquía visual y espaciado.
• Crear prototipos interactivos sencillos utilizando herramientas digitales, conectando al menos tres pantallas para simular un flujo de usuario.
• 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.
• Comparar dos diseños de interfaz diferentes para la misma funcionalidad, argumentando cuál ofrece una mejor experiencia de usuario y por qué.

Antes de Empezar

Conceptos básicos de diseño gráfico

Por qué: Los alumnos necesitan comprender principios visuales como el color, la tipografía y la composición para crear interfaces atractivas.

Introducción a la web y aplicaciones

Por qué: Es fundamental que los alumnos tengan una idea general de cómo funcionan las aplicaciones y sitios web para poder diseñar sus interfaces.

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.

Atención a estas ideas erróneas

Idea errónea común

El diseño UI se centra solo en colores y formas bonitas, sin importar la funcionalidad.

Qué enseñar en su lugar

La UI debe priorizar usabilidad; colores guían la atención, pero botones intuitivos evitan frustración. Pruebas en parejas revelan problemas reales, como clics fallidos, ayudando a equilibrar estética y función mediante iteraciones grupales.

Idea errónea común

Un prototipo basta con verse bien; no necesita testing con usuarios.

Qué enseñar en su lugar

El testing valida usabilidad real; usuarios reales descubren confusiones no previstas. Rotaciones de prueba en clase simulan usuarios diversos, fomentando empatía y ajustes basados en datos observados.

Idea errónea común

Diseño universal es solo para personas con discapacidades.

Qué enseñar en su lugar

Aplica a todos: tamaños de texto legibles benefician a fatigados visualmente. Discusiones en grupo sobre accesibilidad inclusiva corrigen esto, probando prototipos con simulaciones como pantallas pequeñas.

Ideas de aprendizaje activo

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.

30 min·Parejas

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.

45 min·Grupos pequeños

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.

40 min·Toda la clase

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.

20 min·Individual

Conexiones con el Mundo Real

• Los diseñadores UX/UI en empresas como Google o Spotify utilizan herramientas como Figma para crear prototipos interactivos de nuevas funciones. Estos prototipos se prueban con usuarios antes del desarrollo para asegurar que las aplicaciones sean intuitivas y agradables de usar.
• Los desarrolladores de videojuegos emplean el prototipado para diseñar las interfaces de los menús y los HUDs (Heads-Up Displays). Esto les permite probar la claridad de la información y la facilidad de acceso a las opciones antes de implementar la programación final del juego.

Ideas de Evaluación

Boleto de Salida

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.

Evaluación entre Iguales

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.

Verificación Rápida

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?'

Preguntas frecuentes

¿Cómo enseñar diseño UI y prototipado en 3º ESO?

Introduce principios con ejemplos reales de apps cotidianas, luego pasa a herramientas gratuitas como Figma. Enfócate en iteración: wireframe, prototipo, test, mejora. Integra empatía pidiendo perfiles de usuario ficticios para guiar diseños inclusivos, alineado con LOMLOE.

¿Qué herramientas usar para prototipos en ESO?

Figma es ideal por ser gratuita, colaborativa y web-based; permite prototipos interactivos sin código. Alternativas: Canva para principiantes o Adobe XD. Enseña exportar para compartir, enfatizando coherencia visual en grids y tipografías consistentes.

¿Cómo el aprendizaje activo ayuda en prototipado UI?

Actividades como testing en rotación hacen tangible la usabilidad: alumnos prueban prototipos ajenos, miden tiempos y anotan confusiones, revelando fallos invisibles en solitario. Esto fomenta empatía al simular usuarios reales y promueve iteraciones rápidas, reteniendo mejor conceptos que lecturas pasivas.

¿Por qué testear prototipos antes de programar?

Evita rehacer código por errores de diseño; un prototipo valida flujo intuitivo y coherencia. Sesiones de clase con cronómetros cuantifican usabilidad, respondiendo a '¿es fácil de usar?'. Ahorra tiempo y enseña diseño centrado en usuario, clave en LOMLOE.