Tecnología · 6o Básico · Diseño de Soluciones Tecnológicas · 2do Semestre

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

Los estudiantes exploran los principios de diseño de interfaces intuitivas y experiencias de usuario satisfactorias.

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

Acerca de este tema

El diseño de interfaces de usuario (UI/UX) introduce a los estudiantes a crear pantallas intuitivas y experiencias agradables en apps y sitios web. En 6o básico, exploran principios como simplicidad, accesibilidad y jerarquía visual, considerando usuarios con diferentes habilidades, como discapacidades visuales o motoras. Analizan cómo colores, botones y navegación impactan la usabilidad diaria, respondiendo preguntas clave sobre diseño inclusivo, estética y evaluación.

Este tema se alinea con las Bases Curriculares de MINEDUC en Tecnología, específicamente OA TEC 6oB de Diseño de Soluciones Tecnológicas. Fomenta habilidades prácticas como empatía con el usuario, iteración de prototipos y pruebas de usabilidad, conectando con unidades de programación y robótica para soluciones integrales.

El aprendizaje activo beneficia este tema porque los estudiantes prueban diseños reales con pares, identifican problemas en sesiones de testing y refinan iterativamente. Actividades como mockups en papel o evaluaciones grupales hacen concretos conceptos abstractos, mejoran la retención y desarrollan pensamiento crítico colaborativo.

Preguntas Clave

1. ¿Cómo podemos diseñar una interfaz que sea fácil de usar para personas con diferentes habilidades?
2. ¿Qué impacto tiene la estética de una interfaz en la experiencia del usuario?
3. ¿Cómo podemos evaluar la usabilidad de una aplicación o sitio web?

Objetivos de Aprendizaje

• Diseñar prototipos de interfaces de usuario para una aplicación móvil simple, aplicando principios de jerarquía visual y contraste.
• Evaluar la usabilidad de un sitio web educativo existente, identificando al menos tres puntos de mejora relacionados con la navegación o la legibilidad.
• Explicar cómo los principios de diseño accesible benefician a usuarios con diferentes discapacidades, como la visual o la motora.
• Comparar dos interfaces de usuario de aplicaciones similares, argumentando cuál ofrece una mejor experiencia de usuario y por qué.

Antes de Empezar

Introducción a la Programación y Algoritmos

Por qué: Comprender la lógica de cómo funcionan las aplicaciones ayuda a los estudiantes a pensar en la estructura y el flujo de una interfaz.

Elementos de Diseño Gráfico

Por qué: Tener nociones básicas sobre color, forma y composición facilita la comprensión de la jerarquía visual y la estética en las interfaces.

Vocabulario Clave

Interfaz de Usuario (UI)	Es el conjunto de elementos visuales y controles que permiten a una persona interactuar con un dispositivo o aplicación, como botones, menús y pantallas.
Experiencia de Usuario (UX)	Se refiere a la percepción y satisfacción general que tiene una persona al usar un producto, sistema o servicio, enfocándose en la facilidad de uso y la eficiencia.
Usabilidad	Mide qué tan fácil es para un usuario aprender y usar una interfaz para lograr sus objetivos de manera efectiva, eficiente y satisfactoria.
Accesibilidad	Se refiere al diseño de interfaces que pueden ser utilizadas por todas las personas, independientemente de sus capacidades físicas o cognitivas, incluyendo personas con discapacidades.
Jerarquía Visual	Es la organización y presentación de elementos en una interfaz para guiar la vista del usuario y destacar la información más importante primero.

Cuidado con estas ideas erróneas

Idea errónea común

Una interfaz bonita siempre es fácil de usar.

Qué enseñar en su lugar

La estética atrae, pero la usabilidad prioriza funciones claras y accesibles. Pruebas activas con usuarios reales revelan confusiones ocultas, como botones mal ubicados. Discusiones en grupo ayudan a priorizar funcionalidad sobre adornos.

Idea errónea común

Todos los usuarios interactúan igual con las interfaces.

Qué enseñar en su lugar

Las diferencias en edad, habilidades o dispositivos afectan la experiencia. Simulaciones en parejas, como usar una mano o colores limitados, muestran inclusividad. Esto fomenta empatía mediante observación directa.

Idea errónea común

Más colores brillantes mejoran el diseño.

Qué enseñar en su lugar

Colores excesivos distraen y reducen legibilidad. Actividades de contraste con impresiones en escala de grises corrigen esto. Grupos evalúan y refinan, aprendiendo estándares de accesibilidad.

Ideas de aprendizaje activo

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.

45 min·Grupos pequeños

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.

30 min·Parejas

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.

35 min·Toda la clase

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.

20 min·Individual

Conexiones con el Mundo Real

• Los diseñadores UX/UI de empresas como Google trabajan en aplicaciones populares como Google Maps, asegurando que la navegación sea intuitiva y la información sea fácil de encontrar para millones de usuarios en todo el mundo.
• Los desarrolladores web de plataformas de comercio electrónico, como Mercado Libre, aplican principios de UI/UX para crear sitios web donde los clientes puedan buscar productos, comparar precios y realizar compras de forma segura y sencilla.
• Los creadores de videojuegos diseñan interfaces de control y menús de juego considerando la accesibilidad para jugadores con diferentes niveles de habilidad y posibles discapacidades, para que la experiencia sea disfrutable para todos.

Ideas de Evaluación

Boleto de Salida

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

Evaluación entre Pares

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?

Verificación Rápida

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?

Preguntas frecuentes

¿Cómo enseñar diseño UI/UX en 6o básico según MINEDUC?

Enfócate en principios simples como simplicidad y accesibilidad, usando ejemplos cotidianos como apps escolares. Integra key questions del currículo con prototipos en papel y testing grupal. Esto alinea con OA TEC 6oB, desarrollando soluciones tecnológicas inclusivas mediante iteración práctica.

¿Cómo el aprendizaje activo ayuda en UI/UX?

Actividades como estaciones rotativas o testing de usabilidad permiten a estudiantes experimentar fallos reales, refinar diseños colaborativamente y empatizar con usuarios diversos. Estas prácticas hacen abstractos principios tangibles, mejoran retención del 70% según estudios pedagógicos y fomentan habilidades del siglo XXI como iteración y feedback.

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

La estética genera confianza inicial y placer, pero debe apoyar usabilidad. Colores armónicos y tipografías claras guían la atención sin abrumar. Evalúa con escalas de satisfacción post-testing para medir equilibrio entre forma y función en diseños estudiantiles.

¿Cómo evaluar usabilidad de una interfaz en clase?

Usa pruebas cronometradas: asigna tareas como 'encuentra el menú' y mide éxito, tiempo y frustración. Herramientas simples como checklists o encuestas grupales cuantifican mejoras. Repite iteraciones para mostrar progreso, alineado con estándares MINEDUC de diseño iterativo.