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.

• 7o Básico
• Tecnología
• 4 actividades
• 30 min–60 min

Objetivos de Aprendizaje

1. Analizar la estructura y los elementos clave de interfaces de usuario (UI) en aplicaciones populares para identificar patrones de diseño efectivos.
2. Evaluar la calidad de la experiencia de usuario (UX) de un sitio web o aplicación móvil basándose en criterios como la navegabilidad, la claridad y la satisfacción del usuario.
3. Diseñar un prototipo de baja fidelidad para una interfaz de usuario simple, aplicando principios de jerarquía visual, legibilidad y consistencia.
4. Comparar dos interfaces de usuario diferentes para la misma función (por ejemplo, el proceso de compra en dos tiendas en línea) y justificar cuál ofrece una mejor experiencia de usuario.
5. Explicar cómo la accesibilidad y la inclusión influyen en el diseño de UI/UX para asegurar que las soluciones tecnológicas sean utilizables por diversas audiencias.

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.

Preparación y detalles

¿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.

Setup: Espacio en paredes o mesas dispuestas alrededor del perímetro del salón

Materials: Papel grande/cartulinas, Marcadores, Notas adhesivas para retroalimentación

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

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.

Preparación y detalles

¿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.

Setup: Espacio en paredes o mesas dispuestas alrededor del perímetro del salón

Materials: Papel grande/cartulinas, Marcadores, Notas adhesivas para retroalimentación

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

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.

Preparación y detalles

¿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.

Setup: Espacio en paredes o mesas dispuestas alrededor del perímetro del salón

Materials: Papel grande/cartulinas, Marcadores, Notas adhesivas para retroalimentación

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

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.

Preparación y detalles

¿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.

Setup: Espacio en paredes o mesas dispuestas alrededor del perímetro del salón

Materials: Papel grande/cartulinas, Marcadores, Notas adhesivas para retroalimentación

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

Enseñando Este Tema

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.

Qué Esperar

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

Idea errónea común

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

Qué enseñar en su lugar

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.

Idea errónea común

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

Qué enseñar en su lugar

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.

Idea errónea común

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

Qué enseñar en su lugar

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.

Ideas de Evaluación

Boleto de Salida

Después del Taller de Bocetos, entrega una tarjeta con el nombre de una aplicación escolar imaginaria. Pide que dibujen un boceto simple de su pantalla principal y expliquen en dos frases por qué su diseño facilita la interacción.

Evaluación entre Pares

Durante el Análisis de Apps, pide a cada grupo que presente su evaluación a otro grupo. Los oyentes deben dar un feedback específico usando el lenguaje de UI/UX: 'El botón de descarga es visible, pero el color verde no contrasta bien con el fondo, lo que puede dificultar su uso'.

Verificación Rápida

Después del Testing de Usabilidad, muestra dos prototipos creados por estudiantes para la misma función (ej. inicio de sesión). Pregunta: '¿Cuál prototipo les parece más intuitivo? Señalen un elemento que apoye su respuesta'.

Extensiones y Apoyo

• Challenge: Pide a los estudiantes que rediseñen una interfaz existente eliminando la mitad de los elementos sin perder funcionalidad, usando solo Figma.
• Scaffolding: Para estudiantes que se bloquean, proporciona plantillas con espacios marcados para botones principales y áreas de contenido.
• Deeper: Invita a los estudiantes a investigar sobre accesibilidad digital y diseñar una versión de su app que incluya subtítulos o contraste alto para usuarios con discapacidad visual.

Vocabulario Clave

Interfaz de Usuario (UI)	Es el conjunto de elementos visuales y controles con los que un usuario interactúa para operar un software o dispositivo. Incluye botones, menús, iconos y la disposición general de la pantalla.
Experiencia de Usuario (UX)	Se refiere a la percepción y respuesta general de una persona al usar un producto, sistema o servicio. Busca que la interacción sea útil, fácil de usar y agradable.
Navegación	El sistema que permite a los usuarios moverse a través de las diferentes secciones o pantallas de una aplicación o sitio web. Una buena navegación es intuitiva y predecible.
Jerarquía Visual	La organización y presentación de elementos en una interfaz para guiar la atención del usuario hacia la información más importante primero. Se logra mediante el tamaño, color, contraste y posición.
Prototipo	Un modelo o borrador temprano de un diseño de interfaz. Puede ser un boceto en papel o una versión digital interactiva, utilizado para probar y refinar ideas antes del desarrollo final.