Tecnología · 6o Grado

Ideas de aprendizaje activo

Diseño de Interfaz de Usuario (UI) Básico

El diseño de interfaz de usuario requiere experimentación práctica porque los estudiantes aprenden mejor cuando aplican principios abstractos a casos concretos. Al manipular elementos visuales en papel o digitalmente, internalizan conceptos como jerarquía y accesibilidad que de otra forma podrían quedar en la teoría.

• Aprendizajes Esperados SEP
• SEP NEM, Campo Formativo Saberes y Pensamiento Científico: Diseña y crea prototipos de soluciones digitales, considerando la interfaz de usuario (UI).
• SEP NEM, Eje Articulador Artes y experiencias estéticas: Aplica principios básicos de diseño visual para crear interfaces claras, intuitivas y atractivas.

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

Actividad 01

• Enseñanza entre Pares
• 30 min · Parejas

Enseñanza entre Pares: Wireframes en Papel

En parejas, los estudiantes esbozan wireframes de una app simple para pedir comida, priorizando botones grandes y menús claros. Intercambian dibujos con otra pareja para probar usabilidad en 5 minutos. Discuten mejoras basadas en el feedback recibido.

¿Cómo puedes diseñar una aplicación para que sea fácil de usar incluso para alguien que nunca la ha visto?

Consejo de Facilitación

Durante la actividad de pares, pida a los estudiantes que verbalicen su proceso de diseño mientras dibujan, usando frases como 'Este botón debe estar aquí porque...'.

Qué observar

Entrega a cada estudiante una tarjeta con el nombre de una aplicación conocida (ej. WhatsApp, YouTube). Pídeles que escriban dos elementos de su interfaz que consideran muy fáciles de usar y uno que podría mejorar, explicando brevemente por qué.

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

Actividad 02

• Aprendizaje Basado en Proyectos
• 45 min · Grupos pequeños

Grupos Pequeños: Prototipo Digital Básico

Grupos de 4 usan herramientas gratuitas como Canva o Figma para crear una pantalla de login intuitiva. Incluyen colores accesibles y navegación lógica. Cada grupo presenta su prototipo a la clase para una ronda de pruebas rápidas.

¿Qué elementos visuales son clave para guiar al usuario a través de una interfaz?

Consejo de Facilitación

En la creación de prototipos digitales, limite a los grupos a tres colores y cuatro botones para evitar sobrecarga visual y enfocar el aprendizaje en jerarquía.

Qué observar

Muestra a los estudiantes dos versiones de una misma pantalla de aplicación, una con un diseño claro y otra desordenada. Pregunta: ¿Cuál interfaz es más fácil de entender? ¿Qué elementos visuales (colores, tamaño, posición) hacen la diferencia?

• Aplicar
• Analizar
• Evaluar
• Crear
• Autogestión
• Habilidades de Relación
• Toma de Decisiones

Actividad 03

• Aprendizaje Basado en Proyectos
• 40 min · Toda la clase

Clase Completa: Galería de Críticas

Todos pegan sus wireframes en la pared. La clase camina como 'usuarios' probando diseños ajenos y deja post-its con sugerencias. Al final, cada estudiante actualiza su propio diseño con las observaciones colectivas.

¿Cómo influye la disposición de los botones y textos en la experiencia del usuario?

Consejo de Facilitación

En la galería de críticas, asigne roles específicos: un 'usuario novato', un 'usuario experimentado' y un 'diseñador', para que cada perspectiva analice la misma interfaz.

Qué observar

Los estudiantes dibujan un boceto de la pantalla principal de una aplicación inventada. Luego, intercambian bocetos con un compañero. Cada uno debe señalar un botón o elemento y explicar su función y si es fácil de identificar.

• Aplicar
• Analizar
• Evaluar
• Crear
• Autogestión
• Habilidades de Relación
• Toma de Decisiones

Actividad 04

• Aprendizaje Basado en Proyectos
• 20 min · Individual

Individual: Iteración Personal

Cada estudiante revisa su wireframe inicial con las reglas de UI aprendidas. Añade jerarquía visual y prueba solo con un compañero. Registra cambios en un diario de diseño para reflexionar sobre la usabilidad.

¿Cómo puedes diseñar una aplicación para que sea fácil de usar incluso para alguien que nunca la ha visto?

Qué observar

Entrega a cada estudiante una tarjeta con el nombre de una aplicación conocida (ej. WhatsApp, YouTube). Pídeles que escriban dos elementos de su interfaz que consideran muy fáciles de usar y uno que podría mejorar, explicando brevemente por qué.

• Aplicar
• Analizar
• Evaluar
• Crear
• Autogestión
• Habilidades de Relación
• Toma de Decisiones

Algunas notas para enseñar esta unidad

Enseñe este tema con un enfoque basado en iteraciones rápidas: primero introduzca conceptos con ejemplos cotidianos como botones de ascensores o menús de restaurantes. Evite explicar teoría antes de que los estudiantes experimenten el problema. Use el error como herramienta pedagógica, destacando que cada 'fracaso' en testing es un paso hacia una solución mejor. La investigación en diseño UX muestra que los estudiantes retienen más cuando ven el impacto inmediato de sus decisiones en la usabilidad.

Los estudiantes demostrarán comprensión mediante bocetos que comunican funciones claras, prototipos que guían al usuario sin instrucciones y críticas que identifican elementos que facilitan o dificultan la navegación. La evidencia de éxito incluye interfaces donde el usuario puede completar una tarea sencilla en tres pasos o menos.

---

Cuidado con estas ideas erróneas

• Durante la actividad Pares: Wireframes en Papel, watch for students who add multiple colors, icons, or decorative elements to make their interface 'look pretty'.

  Detenga el grupo y pida que identifiquen el elemento principal de su interfaz (ej. 'buscar un video') y eliminen todo lo que no sea esencial. Luego, pregunte: '¿Este elemento ayuda al usuario a completar la tarea principal?'. Use la actividad para demostrar que la simplicidad atrae la atención hacia donde debe ir.

• Durante la actividad Grupos Pequeños: Prototipo Digital Básico, watch for groups that make all buttons the same size 'to be fair'.

  Pida a los grupos que definan una acción principal (ej. 'comprar') y hagan ese botón más grande que los demás. Luego, pregunte: '¿Por qué este botón es diferente?' y guíelos a descubrir que el tamaño debe reflejar prioridad, no igualdad.

• Durante la actividad Individual: Iteración Personal, watch for students who refuse to change their design after peer feedback.

  Recuérdeles que el diseño UI es iterativo y muestre ejemplos de apps populares que han cambiado sus interfaces con el tiempo (como Instagram). Use la actividad para resaltar que el feedback de otros usuarios es valioso para mejorar la usabilidad.

---

Metodologías usadas en este resumen

• Enseñanza entre Pares
• Aprendizaje Basado en Proyectos