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

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

Los estudiantes aprenden los principios básicos de UI/UX para crear interfaces intuitivas y agradables, considerando la facilidad de uso y la estética.

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

Acerca de este tema

El diseño de Interfaz de Usuario (UI) y Experiencia de Usuario (UX) introduce a los estudiantes de 7° básico en los principios para crear interfaces intuitivas y agradables. Aprenden sobre facilidad de uso, estética visual y accesibilidad, aplicando elementos como jerarquía visual, colores armónicos, tipografía legible y navegación clara. Estos conceptos responden directamente a las orientaciones curriculares de MINEDUC en Diseño de Soluciones Tecnológicas, donde los estudiantes responden preguntas clave: ¿cómo facilita un buen diseño la interacción usuario-software?, ¿qué elementos visuales mejoran la experiencia? y ¿cómo evaluar la intuitividad para distintos usuarios?

En el contexto de la unidad del 2° semestre, este tema conecta con el desarrollo de soluciones tecnológicas reales. Los estudiantes analizan apps cotidianas, identifican fortalezas y debilidades en UI/UX, y proponen mejoras considerando diversidad de usuarios, como niños, adultos mayores o personas con discapacidades visuales. Esto fomenta empatía, pensamiento crítico y habilidades de iteración en diseño.

El aprendizaje activo beneficia particularmente este tema porque permite prototipar interfaces en papel o herramientas digitales simples, testearlas con compañeros y ajustar basado en feedback directo. Estas prácticas hacen tangibles conceptos abstractos, promueven colaboración y generan ownership en el proceso creativo.

Preguntas Clave

1. ¿Cómo un buen diseño de interfaz facilita la interacción del usuario con un software?
2. ¿Qué elementos visuales contribuyen a una experiencia de usuario positiva?
3. ¿Cómo podemos evaluar si una interfaz es intuitiva para diferentes tipos de usuarios?

Objetivos de Aprendizaje

• Analizar la estructura y los elementos clave de interfaces de usuario (UI) en aplicaciones populares para identificar patrones de diseño efectivos.
• 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.
• Diseñar un prototipo de baja fidelidad para una interfaz de usuario simple, aplicando principios de jerarquía visual, legibilidad y consistencia.
• 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.
• 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.

Antes de Empezar

Identificación de Problemas y Oportunidades Tecnológicas

Por qué: Los estudiantes necesitan saber identificar necesidades o problemas para los cuales la tecnología puede ofrecer una solución, lo cual es la base para diseñar una interfaz útil.

Conceptos Básicos de Software y Aplicaciones

Por qué: Es fundamental que los estudiantes tengan una comprensión básica de qué es el software y cómo funcionan las aplicaciones para poder analizar y diseñar sus interfaces.

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.

Cuidado con estas ideas erróneas

Idea errónea común

UI solo se trata de hacer la interfaz bonita, sin importar la funcionalidad.

Qué enseñar en su lugar

UI combina estética con usabilidad; colores llamativos sin lógica confunden. Actividades de testing con pares revelan problemas reales, ayudando a priorizar claridad sobre adornos.

Idea errónea común

Todos los usuarios interactúan igual con las interfaces.

Qué enseñar en su lugar

Usuarios varían por edad, habilidades y contexto; ignorarlo reduce efectividad. Role-playing en grupos diversos simula perspectivas, fomentando diseños inclusivos mediante discusión colaborativa.

Idea errónea común

Más botones y colores mejoran la experiencia.

Qué enseñar en su lugar

Exceso satura y complica; simplicidad guía al usuario. Análisis grupal de apps reales compara diseños minimalistas vs. sobrecargados, aclarando principios de jerarquía visual.

Ideas de aprendizaje activo

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.

45 min·Parejas

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.

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

60 min·Grupos pequeños

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.

30 min·Parejas

Conexiones con el Mundo Real

• Los diseñadores UX de empresas como Google trabajan en aplicaciones como Google Maps, investigando cómo los usuarios navegan por la ciudad y diseñando interfaces que faciliten la búsqueda de rutas y lugares de interés.
• Los desarrolladores de videojuegos emplean principios de UI/UX para crear menús, indicadores de salud y sistemas de inventario que sean fáciles de entender y usar durante el juego, mejorando la inmersión del jugador.
• Los diseñadores de interfaces de aplicaciones bancarias, como la de BancoEstado o Santander, deben asegurar que las transacciones financieras sean seguras, claras y sencillas para todos los clientes, independientemente de su familiaridad con la tecnología.

Ideas de Evaluación

Boleto de Salida

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.

Evaluación entre Pares

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.

Verificación Rápida

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

Preguntas frecuentes

¿Cómo enseñar principios básicos de UI/UX en 7° básico?

Comienza con ejemplos cotidianos como apps de mensajería o juegos. Usa checklists simples para identificar jerarquía, colores y navegación. Integra bocetos en papel antes de digitales para construir confianza, conectando con estándares MINEDUC de diseño tecnológico.

¿Qué herramientas gratuitas usar para prototipos UI/UX?

Figma, Canva o Google Slides permiten crear interfaces interactivas sin costo. Para principiantes, papel y marcadores bastan para bocetos rápidos. Estas opciones fomentan iteración rápida y accesibilidad en aulas chilenas con recursos variados.

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

Actividades como testing de usabilidad con compañeros simulan usuarios reales, revelando confusiones intuitivas. Prototipado iterativo y feedback grupal construyen empatía y refinan diseños. Esto hace abstractos principios tangibles, alineado con Bases Curriculares para habilidades prácticas.

¿Cómo evaluar si una interfaz es intuitiva para distintos usuarios?

Aplica pruebas de usabilidad: observa tiempo de tarea, errores y satisfacción verbal. Usa checklists con criterios como legibilidad y navegación. Pruebas con perfiles diversos (edad, habilidades) en grupos pequeños generan datos accionables para mejoras.