Tecnología · I Medio · Desarrollo de Aplicaciones y Experiencia de Usuario · 2do Semestre

Principios de Diseño de Interfaz de Usuario (UI)

Los estudiantes exploran los principios de diseño visual, como la jerarquía, el contraste, la alineación y la repetición, para crear interfaces atractivas y funcionales.

• Objetivos de Aprendizaje (OA)
• OA TEC 1oM: Diseño de Soluciones Tecnológicas
• OA TEC 1oM: Programación de Interfaces

Acerca de este tema

La Arquitectura de Información (AI) es la disciplina que organiza y estructura el contenido en entornos digitales para que los usuarios encuentren lo que buscan de manera intuitiva. En I Medio, los estudiantes aprenden a diseñar menús, etiquetas y sistemas de navegación que reflejen el modelo mental del usuario. Este tema es fundamental para la gestión de datos y el diseño de soluciones tecnológicas eficientes.

Los alumnos exploran cómo la organización lógica de la información reduce la frustración y mejora la experiencia general. Se estudian conceptos como el inventario de contenido y los mapas de sitio. La AI se enseña mejor a través de ejercicios prácticos de clasificación y estructuración, donde los estudiantes deben organizar grandes cantidades de información dispar de una manera que tenga sentido para otros, validando sus estructuras mediante pruebas de navegación.

Preguntas Clave

1. ¿Cómo afecta la jerarquía visual a la navegación del usuario?
2. ¿Qué importancia tiene la accesibilidad web para personas con discapacidad visual?
3. ¿Cómo se logra la consistencia visual en una plataforma multiplataforma?

Objetivos de Aprendizaje

• Analizar cómo la aplicación de principios de diseño visual (jerarquía, contraste, alineación, repetición) afecta la usabilidad y la experiencia del usuario en interfaces digitales.
• Evaluar la accesibilidad de una interfaz de usuario existente para usuarios con discapacidades visuales, aplicando criterios de diseño inclusivo.
• Diseñar prototipos de baja fidelidad para una aplicación móvil simple, demostrando la aplicación de al menos tres principios de diseño visual.
• Comparar la efectividad de diferentes esquemas de navegación en un sitio web simulado, justificando la elección basada en la jerarquía de la información.
• Criticar el uso del contraste y la repetición en el diseño de una interfaz gráfica, proponiendo mejoras específicas para aumentar la claridad visual.

Antes de Empezar

Fundamentos de Diseño Gráfico

Por qué: Los estudiantes necesitan una comprensión básica de elementos visuales como color, forma y tipografía para aplicar los principios de diseño de interfaz.

Introducción a la Experiencia de Usuario (UX)

Por qué: Es importante que los estudiantes comprendan el concepto de experiencia de usuario para valorar cómo los principios de UI contribuyen a ella.

Vocabulario Clave

Jerarquía visual	Organización de elementos en una interfaz para guiar la vista del usuario, indicando qué es lo más importante y cómo interactuar con ello.
Contraste	Diferencia notable entre elementos visuales, como color, tamaño o forma, para crear énfasis, mejorar la legibilidad y separar secciones.
Alineación	Disposición de los elementos de manera que sus bordes o centros se alineen en líneas comunes, creando orden, conexión visual y una estructura limpia.
Repetición	Reutilización de los mismos elementos de diseño (colores, tipografías, formas) a lo largo de una interfaz para crear consistencia, cohesión y fortalecer la identidad visual.
Accesibilidad web	Práctica de diseño que asegura que las personas con discapacidades (visuales, auditivas, motoras, cognitivas) puedan percibir, entender, navegar e interactuar con la web.

Cuidado con estas ideas erróneas

Idea errónea común

La arquitectura de información es lo mismo que el diseño visual.

Qué enseñar en su lugar

La AI es el esqueleto y la organización, mientras que el diseño visual es la piel. Las actividades de Card Sorting ayudan a entender que la estructura debe funcionar incluso sin colores ni imágenes.

Idea errónea común

Poner toda la información en la página de inicio es mejor.

Qué enseñar en su lugar

Saturar al usuario causa parálisis por análisis. El aprendizaje activo muestra que una estructura jerárquica clara permite una navegación más rápida y satisfactoria.

Ideas de aprendizaje activo

Juego de Simulación: Card Sorting (Clasificación de Tarjetas)

Se entrega a los grupos un mazo de tarjetas con diferentes contenidos de un sitio web (ej. una municipalidad). Deben agruparlas en categorías lógicas y ponerles un nombre a cada categoría, comparando luego sus estructuras con otros grupos.

45 min·Grupos pequeños

Pensar-Emparejar-Compartir: El Camino más Corto

Se presenta el mapa de sitio de una aplicación compleja. Los estudiantes deben encontrar individualmente cuántos clics se necesitan para realizar una tarea específica y proponer con su pareja una forma de reducir ese número.

30 min·Parejas

Círculo de Investigación: Auditoría de Navegación

Los grupos analizan el menú de navegación de tres sitios web de noticias chilenos. Deben identificar cuál es más claro, qué etiquetas son confusas y proponer un menú ideal que combine lo mejor de cada uno.

50 min·Grupos pequeños

Conexiones con el Mundo Real

• Los diseñadores UX/UI en empresas como Mercado Libre aplican estos principios para crear plataformas de comercio electrónico donde los usuarios puedan encontrar productos, comparar precios y completar compras de forma intuitiva y segura.
• Los desarrolladores de aplicaciones móviles para servicios de streaming como Netflix utilizan la jerarquía visual y la repetición para organizar catálogos extensos, asegurando que los usuarios descubran contenido relevante y mantengan una experiencia de usuario consistente en diferentes dispositivos.
• Los diseñadores de sitios web gubernamentales en Chile, como el portal del Servicio de Impuestos Internos (SII), deben priorizar la accesibilidad web y el contraste para que todos los ciudadanos, independientemente de sus capacidades, puedan acceder a información y realizar trámites fiscales.

Ideas de Evaluación

Boleto de Salida

Entregue a cada estudiante una captura de pantalla de una interfaz de usuario (ej. una página de inicio de una red social). Pídales que identifiquen y escriban un ejemplo de jerarquía visual y un ejemplo de contraste, explicando brevemente su función en esa interfaz.

Verificación Rápida

Muestre a la clase dos versiones de un mismo diseño de interfaz, una con buena alineación y otra desordenada. Pregunte: '¿Qué versión les parece más profesional y fácil de leer? ¿Por qué? ¿Qué principio de diseño se está aplicando o ignorando en cada caso?'

Evaluación entre Pares

Los estudiantes trabajan en parejas para crear un boceto simple de una pantalla de inicio para una app de noticias. Luego, intercambian bocetos y evalúan si el compañero aplicó el principio de repetición en al menos dos elementos (ej. botones, títulos). Deben escribir una frase de retroalimentación específica sobre la consistencia visual.

Preguntas frecuentes

¿Qué es un mapa de sitio (Sitemap)?

Es un diagrama que muestra la jerarquía y las relaciones entre las diferentes páginas o secciones de un sitio web o aplicación, sirviendo como guía para el desarrollo.

¿Qué es el 'Card Sorting'?

Es una técnica de investigación donde los usuarios agrupan temas en categorías que tengan sentido para ellos, ayudando a los diseñadores a crear estructuras de navegación intuitivas.

¿Cómo beneficia el aprendizaje activo a la comprensión de la arquitectura de información?

Al participar en ejercicios de clasificación y diseño de flujos, los estudiantes experimentan de primera mano cómo diferentes personas organizan la información de manera distinta. Esto fomenta una mentalidad flexible y centrada en el usuario, esencial para crear sistemas digitales lógicos.

¿Por qué las etiquetas de los menús son tan importantes?

Porque son las señales que guían al usuario. Una etiqueta ambigua puede hacer que una persona se pierda, mientras que una etiqueta clara y familiar facilita el cumplimiento de tareas.