Artes Visuales · 8o Básico · Diseño y Funcionalidad: Objetos con Sentido · 1er Semestre

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

Introducción a los principios básicos del diseño de interfaces digitales, enfocándose en la experiencia del usuario.

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

Acerca de este tema

El diseño de interfaz de usuario (UI/UX) introduce a los estudiantes en los principios básicos que hacen que una aplicación o sitio web sea intuitiva y accesible. En octavo básico, exploran elementos como jerarquía visual, contraste, alineación y el uso estratégico de colores, tipografías e iconos para guiar la atención del usuario. Estos conceptos se conectan directamente con las Bases Curriculares de Artes Visuales, específicamente el estándar OA ART 8oB sobre el uso de tecnologías digitales, fomentando la creación de objetos con sentido funcional.

En el contexto de la unidad 'Diseño y Funcionalidad: Objetos con Sentido', los estudiantes analizan cómo anticipar necesidades del usuario mejora la interacción digital. Aprenden que una buena interfaz reduce frustraciones y promueve eficiencia, integrando principios de composición visual con empatía hacia el usuario final. Esto desarrolla habilidades críticas como el pensamiento crítico y la iteración en diseño.

El aprendizaje activo beneficia particularmente este tema porque permite a los estudiantes prototipar interfaces reales, probarlas con pares y refinarlas basados en retroalimentación inmediata. Actividades prácticas convierten conceptos abstractos en experiencias tangibles, fortaleciendo la retención y la aplicación creativa en contextos digitales cotidianos.

Preguntas Clave

1. ¿Qué elementos hacen que una aplicación o sitio web sea fácil de usar e intuitivo?
2. ¿Cómo influyen los colores, tipografías e iconos en la experiencia de un usuario digital?
3. ¿Cómo se puede diseñar una interfaz que anticipe las necesidades del usuario y mejore su interacción?

Objetivos de Aprendizaje

• Analizar la efectividad de diferentes elementos de diseño (colores, tipografías, iconos) en la usabilidad de aplicaciones móviles conocidas.
• Comparar dos interfaces de usuario (UI) de sitios web similares, evaluando cuál ofrece una mejor experiencia de usuario (UX) basándose en principios de diseño.
• Diseñar un boceto de interfaz de usuario para una aplicación simple, justificando las decisiones de diseño en relación con la anticipación de las necesidades del usuario.
• Explicar cómo la jerarquía visual y el contraste guían la interacción del usuario en una interfaz digital.

Antes de Empezar

Principios de Composición Visual

Por qué: Es fundamental que los estudiantes comprendan conceptos como equilibrio, contraste, ritmo y unidad para poder aplicarlos en el diseño de interfaces.

Introducción a las Tecnologías Digitales

Por qué: Los estudiantes deben tener familiaridad básica con el uso de dispositivos digitales y aplicaciones para poder analizar y diseñar interfaces.

Vocabulario Clave

Interfaz de Usuario (UI)	Es el medio a través del cual una persona interactúa con una máquina, sistema o aplicación. Incluye los elementos visuales y de control que el usuario ve y usa.
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 intuitiva, eficiente y satisfactoria.
Jerarquía Visual	Organización de los elementos en una interfaz de manera que se indique su orden de importancia, guiando la mirada del usuario hacia la información clave.
Tipografía	El arte y la técnica de arreglar tipos (letras y caracteres) para hacer el lenguaje escrito legible, legible y atractivo cuando se muestra.
Iconografía	El uso de símbolos visuales (iconos) para representar acciones, objetos o ideas, facilitando la comprensión rápida en una interfaz.

Cuidado con estas ideas erróneas

Idea errónea común

Más colores y elementos hacen una interfaz más atractiva.

Qué enseñar en su lugar

Una interfaz efectiva prioriza la simplicidad para evitar sobrecarga visual. Discusiones en grupo sobre pruebas de usabilidad ayudan a los estudiantes a comparar diseños minimalistas con recargados, descubriendo cómo el contraste y el espacio negativo guían mejor al usuario.

Idea errónea común

UI se enfoca solo en lo estético, sin importar la funcionalidad.

Qué enseñar en su lugar

UI y UX están interconectadas: el diseño visual debe servir a la experiencia fluida. Actividades de prototipado en parejas permiten iterar basados en pruebas reales, corrigiendo ideas erróneas al observar cómo fallos estéticos generan frustración en la navegación.

Idea errónea común

Los iconos y tipografías son detalles secundarios.

Qué enseñar en su lugar

Estos elementos definen la intuitividad inmediata. Análisis colaborativo de apps revela cómo iconos universales y tipografías legibles aceleran la interacción. Retroalimentación grupal en pruebas fortalece esta comprensión práctica.

Ideas de aprendizaje activo

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.

30 min·Grupos pequeños

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.

45 min·Parejas

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.

40 min·Grupos pequeños

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.

35 min·Individual

Conexiones con el Mundo Real

• Los diseñadores UX/UI en empresas tecnológicas como Google o Meta trabajan en equipos para crear y mejorar las interfaces de aplicaciones populares como Gmail o Instagram, asegurando que millones de usuarios puedan navegar y utilizar las plataformas de manera sencilla y agradable.
• Los desarrolladores web y diseñadores gráficos colaboran para crear sitios web funcionales y estéticamente atractivos para museos, como el Museo del Louvre o el Museo de Arte de São Paulo, permitiendo a los visitantes explorar colecciones y obtener información de forma intuitiva antes o después de una visita física.
• Los diseñadores de videojuegos utilizan 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 y la jugabilidad en títulos como 'League of Legends' o 'Among Us'.

Ideas de Evaluación

Boleto de Salida

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.

Verificación Rápida

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í?'

Evaluación entre Pares

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é?'

Preguntas frecuentes

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

Comience con análisis visual de interfaces cotidianas, como apps de mensajería, destacando jerarquía y contraste. Pase a prototipos manuales o digitales donde estudiantes anticipen necesidades del usuario. Conecte con estándares MINEDUC enfatizando funcionalidad en objetos digitales, usando herramientas accesibles como papel o Canva para iteraciones rápidas.

¿Qué rol juegan colores e iconos en el diseño de interfaces?

Los colores guían emociones y atención: azules para confianza, rojos para alertas. Iconos universales reducen texto y aceleran navegación. En aula, experimentos grupales con variaciones muestran cómo malas elecciones generan confusión, fomentando decisiones informadas basadas en empatía usuario.

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

Actividades prácticas como prototipar y probar interfaces convierten teoría en experiencia directa. Estudiantes en grupos rotan roles de diseñador y usuario, identificando problemas reales y refinando diseños. Esto construye empatía, iteración y retención superior a lecciones pasivas, alineándose con Bases Curriculares para tecnologías digitales.

¿Cuáles son herramientas gratuitas para diseñar UI en el aula?

Use Canva, Figma (versión gratuita) o papel con marcadores para wireframes iniciales. Estas permiten colaboración en tiempo real sin costo. Integre con celulares para pruebas móviles, asegurando accesibilidad en contextos chilenos y enfocando en principios visuales antes de software avanzado.