Tecnología · 7o Básico

Ideas de aprendizaje activo

Diseño de Interfaz de Usuario (UI) y Experiencia de Usuario (UX)

Los estudiantes de 7° básico aprenden mejor UI y UX cuando trabajan con sus manos, ya que estos conceptos requieren visualización y prueba concreta. Al diseñar interfaces, la teoría abstracta cobra sentido al aplicarla en proyectos tangibles, lo que refuerza la conexión entre estética, funcionalidad y necesidades del usuario.

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

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

Actividad 01

• Paseo por la Galería
• 45 min · Parejas

Taller de Bocetos: App para Escuela

Los estudiantes dibujan en papel la interfaz de una app escolar simple, como registro de tareas. Incluyen botones claros, menús intuitivos y colores accesibles. Comparten bocetos en parejas para feedback inicial.

¿Cómo un buen diseño de interfaz facilita la interacción del usuario con un software?

Consejo de Facilitación

Durante el Taller de Bocetos, insiste a los estudiantes que cada elemento en su diseño responda a una función específica, no solo a una preferencia estética.

Qué observar

Entrega a cada estudiante una tarjeta con el nombre de una aplicación conocida (ej. YouTube, Instagram, una app de noticias). Pide que escriban dos elementos de UI que les parezcan bien diseñados y una sugerencia para mejorar la UX de esa aplicación.

• Comprender
• Aplicar
• Analizar
• Crear
• Habilidades de Relación
• Conciencia Social

Actividad 02

• Paseo por la Galería
• 50 min · Grupos pequeños

Análisis de Apps: Evaluación Grupal

En grupos pequeños, seleccionan tres apps comunes (ej. WhatsApp, Duolingo). Registran en tabla elementos UI positivos (iconos claros) y UX negativos (navegación confusa). Discuten mejoras colectivas.

¿Qué elementos visuales contribuyen a una experiencia de usuario positiva?

Consejo de Facilitación

En el Análisis de Apps, pide a cada grupo que elija una app diferente para evitar duplicación y fomentar la discusión sobre variados enfoques de diseño.

Qué observar

Los estudiantes trabajan en parejas para dibujar un boceto simple de la pantalla principal de una aplicación imaginaria. Luego, intercambian bocetos y evalúan: ¿Es fácil entender qué hace la aplicación? ¿Los botones principales son visibles? Escriben una pregunta para su compañero sobre su diseño.

• Comprender
• Aplicar
• Analizar
• Crear
• Habilidades de Relación
• Conciencia Social

Actividad 03

• Paseo por la Galería
• 60 min · Grupos pequeños

Prototipo Digital: Figma Básico

Usando Figma gratuito o Canva, crean prototipos interactivos de una interfaz. Prueban navegación simulada y evalúan usabilidad con un checklist. Iteran una versión tras pruebas.

¿Cómo podemos evaluar si una interfaz es intuitiva para diferentes tipos de usuarios?

Consejo de Facilitación

Al guiar el Prototipo Digital en Figma, muestra primero cómo usar herramientas básicas como marcos, colores de la paleta y capas para mantener el proceso ordenado y accesible.

Qué observar

Muestra a la clase capturas de pantalla de dos interfaces diferentes para la misma función (ej. registro en un servicio). Pregunta: '¿Cuál de estas interfaces creen que es más fácil de usar y por qué? Señalen un elemento específico que les ayude a decidir.'

• Comprender
• Aplicar
• Analizar
• Crear
• Habilidades de Relación
• Conciencia Social

Actividad 04

• Paseo por la Galería
• 30 min · Parejas

Testing de Usabilidad: Role-Playing

Un estudiante actúa como usuario (niño, adulto mayor). Otro presenta prototipo y observa interacciones. Registra confusiones y propone ajustes en grupo.

¿Cómo un buen diseño de interfaz facilita la interacción del usuario con un software?

Consejo de Facilitación

En el Testing de Usabilidad con Role-Playing, asigna roles específicos como 'usuario principiante' o 'usuario con baja visión' para que la experiencia sea realista y reveladora.

Qué observar

Entrega a cada estudiante una tarjeta con el nombre de una aplicación conocida (ej. YouTube, Instagram, una app de noticias). Pide que escriban dos elementos de UI que les parezcan bien diseñados y una sugerencia para mejorar la UX de esa aplicación.

• Comprender
• Aplicar
• Analizar
• Crear
• Habilidades de Relación
• Conciencia Social

Algunas notas para enseñar esta unidad

La enseñanza efectiva de UI/UX en este nivel combina práctica guiada con reflexión constante. Evita dar respuestas directas; en su lugar, guía a los estudiantes con preguntas como '¿Qué crees que hará el usuario aquí?' para desarrollar pensamiento crítico. Investiga sugiere que la colaboración en parejas o grupos pequeños mejora la creatividad y reduce la frustración, ya que los errores se perciben como oportunidades de mejora colectiva.

Los estudiantes demuestran comprensión al crear interfaces que sean claras, agradables y útiles para un público específico. Usan criterios de jerarquía visual, colores y tipografía para comunicar ideas efectivamente, y evalúan diseños de otros con argumentos basados en principios de UX.

---

Cuidado con estas ideas erróneas

• Durante el Taller de Bocetos, algunos estudiantes pueden enfocarse solo en hacer su interfaz colorida y llamativa, ignorando la funcionalidad.

  Durante el Taller de Bocetos, pide a los estudiantes que primero identifiquen los elementos esenciales de su app (como el botón de inicio o el menú) y luego decoren. Usa una lista de verificación en la pizarra con preguntas como '¿Qué necesita el usuario ver primero?' para guiar su diseño.

• Durante el Análisis de Apps, algunos pueden asumir que una app popular es necesariamente usable para todos.

  Durante el Análisis de Apps, asigna a cada grupo una app y pide que identifiquen al menos dos tipos de usuarios para quienes el diseño podría ser difícil (ej. niños, adultos mayores). Luego, discutan cómo mejorar la experiencia para esos grupos.

• Durante el Prototipo Digital, algunos añadirán tantos botones y colores como sea posible creyendo que esto mejora la experiencia.

  Durante el Prototipo Digital, muestra ejemplos de interfaces minimalistas y pregunta: '¿Qué elementos sobran?'. Usa la herramienta de 'deshacer' para corregir diseños y enfatiza que cada añadido debe justificarse con una necesidad del usuario.

---

Metodologías usadas en este resumen

• Paseo por la Galería