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

La enseñanza de los principios de diseño de interfaz de usuario (UI) requiere que los estudiantes experimenten la organización del contenido desde la perspectiva del usuario. La participación activa en actividades como el Card Sorting o la auditoría de navegación les permite internalizar conceptos abstractos mediante la manipulación concreta de elementos, algo que la exposición teórica no logra por sí sola.

• I Medio
• Tecnología
• 3 actividades
• 30 min–50 min

Objetivos de Aprendizaje

1. 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.
2. Evaluar la accesibilidad de una interfaz de usuario existente para usuarios con discapacidades visuales, aplicando criterios de diseño inclusivo.
3. 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.
4. 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.
5. 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.

Juego de Simulación

⏱ 45 min·Grupos pequeños

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.

Preparación y detalles

¿Cómo afecta la jerarquía visual a la navegación del usuario?

Consejo de Facilitación: En el Card Sorting, pida a los estudiantes que verbalicen sus decisiones en voz alta mientras agrupan las tarjetas, para que revelen sus modelos mentales en tiempo real.

Setup: Espacio flexible para estaciones de grupo

Materials: Tarjetas de rol con metas/recursos, Moneda de juego o fichas, Marcador de rondas

• Aplicar
• Analizar
• Evaluar
• Crear
• Conciencia Social
• Toma de Decisiones

Pensar-Emparejar-Compartir

⏱ 30 min·Parejas

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.

Preparación y detalles

¿Qué importancia tiene la accesibilidad web para personas con discapacidad visual?

Consejo de Facilitación: Durante el Think-Pair-Share, limite el tiempo de discusión en parejas a 3 minutos para mantener el enfoque en la reflexión activa.

Setup: Disposición estándar del salón: los estudiantes se giran hacia un compañero

Materials: Consigna de discusión (proyectada o impresa), Opcional: hoja de registro para parejas

• Comprender
• Aplicar
• Analizar
• Autoconciencia
• Habilidades de Relación

Círculo de Investigación

⏱ 50 min·Grupos pequeños

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.

Preparación y detalles

¿Cómo se logra la consistencia visual en una plataforma multiplataforma?

Consejo de Facilitación: En la Auditoría de Navegación, pídales que documenten cada paso con capturas de pantalla y anotaciones específicas sobre obstáculos o facilidades encontradas.

Setup: Grupos en mesas con acceso a fuentes de investigación

Materials: Colección de materiales fuente, Hoja de trabajo del ciclo de indagación, Protocolo de generación de preguntas, Plantilla de presentación de hallazgos

• Analizar
• Evaluar
• Crear
• Autogestión
• Autoconciencia

Enseñando Este Tema

Este tema se enseña mejor mediante un enfoque basado en problemas, donde los estudiantes enfrentan desafíos reales de diseño. Evite explicar primero todos los principios teóricos; en su lugar, guíelos para que descubran las reglas a través del ensayo y error. La investigación sugiere que los estudiantes retienen mejor los conceptos cuando los aplican en contextos auténticos y reciben retroalimentación inmediata.

Qué Esperar

Al finalizar estas actividades, los estudiantes demostrarán comprender que una buena arquitectura de información no es aleatoria. Sabrán justificar sus decisiones de diseño basándose en la claridad, la jerarquía y las necesidades del usuario, aplicando criterios técnicos y empáticos en sus propuestas.

Cuidado con estas ideas erróneas

Idea errónea común

Durante la Simulación: Card Sorting, algunos estudiantes pueden pensar que el diseño visual (colores, fuentes) es lo más importante para organizar la información.

Qué enseñar en su lugar

En el Card Sorting, enfatice que las tarjetas deben ser neutras (sin imágenes ni colores) y que el foco está en las etiquetas y en cómo los usuarios agrupan conceptos similares. Observe si los estudiantes priorizan la claridad de los nombres sobre elementos decorativos.

Idea errónea común

Durante el Think-Pair-Share: El Camino más Corto, los estudiantes pueden asumir que la ruta más corta siempre es la mejor, sin considerar la carga cognitiva.

Qué enseñar en su lugar

En el Think-Pair-Share, guíelos para que reflexionen sobre el número de clics versus la facilidad de comprensión. Por ejemplo, pregúnteles si prefieren llegar a un destino en 2 clics con una etiqueta confusa o en 3 clics con opciones claras.

Ideas de Evaluación

Boleto de Salida

Después de la Simulación: Card Sorting, entregue a cada estudiante una captura de pantalla de una interfaz de usuario (ej. menú de una app de delivery). 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.

Pregunta para Discusión

Durante el Think-Pair-Share: El Camino más Corto, pida a las parejas que compartan sus rutas con la clase. Escuche si justifican sus decisiones basándose en la estructura lógica del contenido y no solo en la cantidad de pasos.

Evaluación entre Pares

Después de la Collaborative Investigation: Auditoría de Navegación, los estudiantes intercambian sus hallazgos y evaluan si el compañero identificó al menos dos problemas de navegación en una interfaz asignada. Deben escribir una frase de retroalimentación específica sobre cómo mejorar la estructura.

Extensiones y Apoyo

• Challenge: Pida a los estudiantes que propongan una reorganización del menú principal de una plataforma conocida (ej. YouTube o Netflix) para un público infantil, justificando cada cambio con al menos dos principios de diseño UI.
• Scaffolding: Para estudiantes que se bloquean, entregue una lista de principios básicos de arquitectura de información (jerarquía, etiquetado claro, consistencia) y pídales que marquen en qué elementos de su diseño los aplicaron.
• Deeper exploration: Invite a los estudiantes a comparar dos versiones de una misma interfaz (ej. una app de banco antigua y una moderna) y analizar cómo la evolución del diseño UI impactó la experiencia del usuario.

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.