Tecnología · 6o Básico

Ideas de aprendizaje activo

Diseño de Interfaces de Usuario (UI/UX)

El diseño UI/UX requiere que los estudiantes experimenten el diseño desde la práctica, no solo desde la teoría. Al manipular elementos visuales y probar interacciones en actividades concretas, comprenden cómo la simplicidad, la accesibilidad y la jerarquía visual transforman una interfaz en una herramienta útil y agradable para el usuario.

• Objetivos de Aprendizaje (OA)
• OA TEC 6oB: Diseño de Soluciones Tecnológicas

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

Actividad 01

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

Estaciones Rotativas: Principios UI

Prepara cuatro estaciones: accesibilidad (pruebas con ojos vendados), jerarquía (ordenar elementos en papel), colores (seleccionar paletas contrastantes) y navegación (dibujar flujos). Los grupos rotan cada 10 minutos, anotan hallazgos y comparten al final.

¿Cómo podemos diseñar una interfaz que sea fácil de usar para personas con diferentes habilidades?

Consejo de Facilitación

En Estaciones Rotativas, prepare materiales físicos como botones de cartón, pantallas impresas y lupas para que los grupos manipulen elementos y discutan su impacto en la usabilidad.

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 su interfaz que les parecen 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

Actividad 02

• Aprendizaje Basado en Proyectos
• 30 min · Parejas

Parejas: Prototipo de App

En parejas, dibujen en papel la interfaz de una app escolar simple, como un calendario de tareas. Incluyan botones grandes y menús claros. Intercambien prototipos con otra pareja para feedback inicial.

¿Qué impacto tiene la estética de una interfaz en la experiencia del usuario?

Consejo de Facilitación

Para Parejas: Prototipo de App, entregue plantillas de bocetos en papel milimetrado y rotuladores de colores limitados para evitar distracciones innecesarias.

Qué observar

Los estudiantes dibujan en papel un boceto de la pantalla principal de una aplicación simple (ej. una app de notas). Luego, intercambian bocetos con un compañero. Cada uno evalúa el boceto del otro respondiendo: ¿Es fácil identificar dónde escribir? ¿Los botones son claros? ¿Qué sugerencia darías para mejorarla?

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

Actividad 03

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

Clase Completa: Testing de Usabilidad

Proyecta un sitio web común. Los estudiantes lo navegan en sus dispositivos, cronometran tareas como 'buscar un evento' y votan problemas. Discutan mejoras colectivamente.

¿Cómo podemos evaluar la usabilidad de una aplicación o sitio web?

Consejo de Facilitación

Durante el Testing de Usabilidad, asigne roles específicos a cada estudiante: uno observa en silencio, otro guía al usuario y otro registra las dificultades en una tabla clara.

Qué observar

Muestre a la clase dos versiones de una misma pantalla de aplicación con diferencias sutiles en el diseño (ej. tamaño de fuente, color de botón). Pregunte: ¿Qué versión creen que es más accesible y por qué? ¿Cuál les parece más atractiva visualmente?

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

Actividad 04

• Aprendizaje Basado en Proyectos
• 20 min · Individual

Individual: Crítica de Interfaz

Cada estudiante elige una app cotidiana, lista tres fortalezas y tres mejoras en usabilidad. Comparte en foro clase para votación grupal.

¿Cómo podemos diseñar una interfaz que sea fácil de usar para personas con diferentes habilidades?

Consejo de Facilitación

En la Crítica de Interfaz, pida a los estudiantes que comparen dos interfaces reales usando una lista de verificación basada en los principios del día.

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 su interfaz que les parecen 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ñar diseño UI/UX requiere equilibrar creatividad con estructura. Evite clases teóricas largas; en cambio, use ejemplos cotidianos y problemas reales para demostrar cómo los principios se aplican en contextos concretos. Los errores en el diseño son oportunidades de aprendizaje, así que fomente que los estudiantes compartan sus fracasos y soluciones en voz alta. La retroalimentación inmediata entre pares acelera la comprensión de conceptos clave como jerarquía visual o contraste.

Al finalizar las actividades, los estudiantes podrán identificar principios UI/UX en interfaces cotidianas, proponer mejoras basadas en necesidades reales de usuarios diversos y justificar sus decisiones de diseño con argumentos claros y fundamentados.

---

Cuidado con estas ideas erróneas

• Durante Estaciones Rotativas: Principios UI, algunos estudiantes pueden asumir que una interfaz bonita siempre es fácil de usar.

  Durante Estaciones Rotativas, incluya una estación con dos versiones de una misma pantalla: una con muchos colores y otra con paleta limitada. Pida a los grupos que prueben ambas con un compañero que use lentes con filtro de color simulado, observando cuál permite completar la tarea más rápido.

• Durante Parejas: Prototipo de App, algunos pueden creer que todos los usuarios interactúan igual con las interfaces.

  Durante Parejas, entregue a cada grupo un guante grueso o pídales que usen su mano no dominante para simular limitaciones motoras. Mientras prototipan, deben considerar cómo colocar botones para que sean accesibles con gestos limitados.

• Durante Testing de Usabilidad, algunos pueden pensar que más colores brillantes mejoran el diseño.

  Durante Testing de Usabilidad, prepare versiones en escala de grises de una misma pantalla y pida a los usuarios que la naveguen mientras usan gafas con filtro de color. Observen en qué elementos se pierden y discutan cómo el contraste afecta la legibilidad.

---

Metodologías usadas en este resumen

• Aprendizaje Basado en Proyectos