Tecnología · I Medio

Ideas de aprendizaje activo

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.

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

• 30–50 min
• Parejas → Toda la clase
• 3 actividades

Actividad 01

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

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

Qué observar

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.

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

Actividad 02

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

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

Qué observar

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

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

Actividad 03

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

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

Qué observar

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.

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

Algunas notas para enseñar esta unidad

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.

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

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

  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.

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

  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.

---

Metodologías usadas en este resumen

• Juego de Simulación
• Pensar-Emparejar-Compartir
• Círculo de Investigación