Artes Visuales · 8o Básico

Ideas de aprendizaje activo

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

El diseño de interfaz de usuario (UI/UX) requiere que los estudiantes apliquen principios teóricos en contextos tangibles. La interacción activa con aplicaciones reales, bocetos y prototipos digitales permite explorar cómo los usuarios perciben y navegan interfaces, haciendo que los conceptos abstractos como jerarquía visual y contraste cobren sentido inmediato.

• Objetivos de Aprendizaje (OA)
• OA ART 8oB: Uso de Tecnologías Digitales

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

Actividad 01

• Aprendizaje Basado en Problemas
• 30 min · Grupos pequeños

Análisis Grupal: Apps Cotidianas

Muestre capturas de pantalla de apps populares. En grupos pequeños, identifiquen elementos exitosos y problemáticos en usabilidad, como botones intuitivos o menús confusos. Cada grupo presenta dos mejoras específicas con bocetos rápidos.

¿Qué elementos hacen que una aplicación o sitio web sea fácil de usar e intuitivo?

Consejo de Facilitación

En Análisis Grupal: Apps Cotidianas, pida a los estudiantes que comparen aplicaciones similares pero con diseños distintos para destacar cómo la jerarquía visual guía la atención del usuario.

Qué observar

Entregue a cada estudiante una captura de pantalla de una interfaz de aplicación o sitio web. Pida que identifiquen un elemento que consideren bien diseñado y expliquen por qué, y un elemento que podría mejorarse, sugiriendo un cambio específico.

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

Actividad 02

• Aprendizaje Basado en Problemas
• 45 min · Parejas

Wireframe en Pares: App Ideal

En parejas, dibujen wireframes de una app para una tarea escolar simple, priorizando jerarquía y navegación. Incluyan iconos y colores sugeridos. Intercambien con otra pareja para feedback inicial.

¿Cómo influyen los colores, tipografías e iconos en la experiencia de un usuario digital?

Consejo de Facilitación

En Wireframe en Pares: App Ideal, indique a los estudiantes que usen solo formas básicas y texto para evitar distracciones y enfocarse en la estructura funcional.

Qué observar

Muestre a la clase dos iconos diferentes que representen la misma función (por ejemplo, guardar). Pregunte: '¿Cuál icono comunica mejor su propósito y por qué? ¿Qué principios de diseño se aplican aquí?'

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

Actividad 03

• Aprendizaje Basado en Problemas
• 40 min · Grupos pequeños

Prueba de Usabilidad: Rotación

Prepare prototipos impresos de interfaces. Grupos rotan probando tres diseños, cronometrando tareas como 'encuentra el botón de guardar'. Registren confusiones y sugieran correcciones colectivamente.

¿Cómo se puede diseñar una interfaz que anticipe las necesidades del usuario y mejore su interacción?

Consejo de Facilitación

En Prueba de Usabilidad: Rotación, observe cómo los estudiantes ajustan sus diseños después de recibir feedback de otros pares, destacando la importancia de iterar basado en pruebas reales.

Qué observar

Los estudiantes dibujan un boceto simple de una pantalla de inicio para una aplicación imaginaria. Luego, intercambian bocetos con un compañero. Cada compañero debe responder: '¿Entiendo qué hace esta aplicación solo con ver la pantalla? ¿Qué elemento me llama más la atención y por qué?'

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

Actividad 04

• Aprendizaje Basado en Problemas
• 35 min · Individual

Individual: Moodboard Digital

Cada estudiante crea un moodboard en herramienta gratuita como Canva, seleccionando colores, tipografías e iconos para un sitio web temático. Compartan en galería de clase para votación rápida.

¿Qué elementos hacen que una aplicación o sitio web sea fácil de usar e intuitivo?

Consejo de Facilitación

En Individual: Moodboard Digital, recomiende a los estudiantes que seleccionen imágenes que representen emociones o funciones específicas en la interfaz, no solo colores bonitos.

Qué observar

Entregue a cada estudiante una captura de pantalla de una interfaz de aplicación o sitio web. Pida que identifiquen un elemento que consideren bien diseñado y expliquen por qué, y un elemento que podría mejorarse, sugiriendo un cambio específico.

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

Algunas notas para enseñar esta unidad

Enseñar UI/UX en octavo básico funciona mejor cuando se enfoca en la observación crítica antes de la creación. Evite que los estudiantes comiencen diseñando sin antes analizar interfaces reales, ya que esto refuerza la idea de que el diseño es intuitivo en lugar de planificado. La investigación sugiere que los estudiantes aprenden más al comparar diseños buenos y malos que al seguir instrucciones paso a paso, por lo que las actividades colaborativas son esenciales.

Cuando los estudiantes terminan estas actividades, deben poder identificar elementos de diseño en aplicaciones cotidianas, explicar su propósito funcional y proponer mejoras basadas en principios UI/UX. Además, deben colaborar en la creación de interfaces que prioricen la usabilidad sobre lo decorativo, demostrando un equilibrio entre estética y funcionalidad.

---

Cuidado con estas ideas erróneas

• Durante Análisis Grupal: Apps Cotidianas, algunos estudiantes pueden pensar que una interfaz con muchos colores y elementos es más atractiva.

  Guíe una discusión después del análisis comparando dos aplicaciones similares donde una use colores y elementos en exceso y la otra priorice el espacio negativo y el contraste. Pida a los estudiantes que voten cuál es más fácil de usar y justifiquen su elección basándose en la legibilidad y la navegación.

• Durante Wireframe en Pares: App Ideal, algunos pueden creer que el diseño UI se trata solo de hacer que la interfaz se vea bonita.

  Antes de que empiecen a dibujar, pídales que escriban el propósito de cada pantalla en su wireframe. Durante la actividad, pregúnteles: '¿Cómo este botón ayuda al usuario a completar su tarea?' para asegurar que la estética no eclipse la funcionalidad.

• Durante Prueba de Usabilidad: Rotación, algunos pueden pensar que los iconos y tipografías son detalles menores en el diseño.

  Después de la prueba, muestre a la clase cómo los participantes se confundieron en ciertas pantallas y pídales que identifiquen qué iconos o fuentes causaron la dificultad. Esto demuestra que estos elementos definen la intuitividad inmediata de la interfaz.

---

Metodologías usadas en este resumen

• Aprendizaje Basado en Problemas