Principios de Diseño de UI/UX

La enseñanza de principios de UI/UX requiere que los estudiantes vivan la experiencia del diseño, no solo la teoricen. La acción directa, como prototipar o evaluar interfaces reales, convierte conceptos abstractos en aprendizajes concretos y memorables. Los talleres prácticos y el análisis de casos reales generan conexiones inmediatas entre la teoría y su aplicación profesional.

• 3o de Preparatoria
• Tecnología
• 4 actividades
• 40 min–60 min

Objetivos de Aprendizaje

1. Analizar cómo los principios de usabilidad (facilidad de uso, eficiencia, satisfacción) afectan la adopción de aplicaciones móviles por parte de usuarios jóvenes.
2. Evaluar la accesibilidad de una aplicación web popular (ej. un sitio de noticias o red social) para usuarios con discapacidades visuales o motoras, identificando al menos tres barreras de diseño.
3. Diseñar un prototipo de baja fidelidad para una aplicación educativa simple, aplicando principios de coherencia visual (colores, tipografía, espaciado) para mejorar la experiencia del usuario.
4. Comparar dos interfaces de usuario de aplicaciones similares (ej. dos apps de música), justificando cuál ofrece una mejor experiencia de usuario basándose en criterios de usabilidad y estética.

Paseo por la Galería

⏱ 45 min·Parejas

Taller: Prototipado de Wireframes

Los estudiantes dibujan wireframes simples para una app móvil en papel. Luego, los prueban intercambiándolos con una pareja para identificar problemas de usabilidad. Finalmente, iteran el diseño incorporando sugerencias. Proporciona plantillas y ejemplos de apps comunes.

Preparación y detalles

¿Cómo la usabilidad impacta directamente la satisfacción del usuario con una aplicación?

Consejo de Facilitación: Antes del taller de Wireframes, pide a los estudiantes que lleven ejemplos de interfaces que les frustren o que admiren, para usarlos como referencia durante la actividad.

Setup: Espacio en paredes o mesas dispuestas alrededor del perímetro del salón

Materials: Papel grande/cartulinas, Marcadores, Notas adhesivas para retroalimentación

• Comprender
• Aplicar
• Analizar
• Crear
• Habilidades de Relación
• Conciencia Social

Análisis de Estudio de Caso

⏱ 50 min·Grupos pequeños

Análisis de Estudio de Caso: Evaluación de Apps Reales

Selecciona tres apps populares. En grupos, evalúa usabilidad, accesibilidad y estética usando una rúbrica compartida. Registra fortalezas y debilidades con capturas de pantalla. Discute hallazgos en plenaria.

Preparación y detalles

¿De qué manera el diseño inclusivo mejora la accesibilidad para todos los usuarios?

Consejo de Facilitación: Durante el Análisis de Apps Reales, asigna a cada grupo una app diferente para evitar repeticiones y fomentar diversidad de perspectivas en la discusión.

Setup: Grupos en mesas con materiales del caso

Materials: Paquete del estudio de caso (3-5 páginas), Hoja de trabajo del marco de análisis, Plantilla de presentación

• Analizar
• Evaluar
• Crear
• Toma de Decisiones
• Autogestión

Desafío de Línea de Tiempo

⏱ 40 min·Grupos pequeños

Desafío de Línea de Tiempo: Diseño Inclusivo

Diseña una interfaz accesible para un sitio web educativo. Considera colores de alto contraste, navegación por teclado y texto alternativo. Prueba con compañeros simulando discapacidades visuales o motoras. Ajusta según retroalimentación.

Preparación y detalles

¿Por qué la coherencia visual es crucial para una buena experiencia de usuario?

Consejo de Facilitación: En el Desafío de Diseño Inclusivo, proporciona materiales tangibles como gafas con lentes empañados o audífonos con ruido ambiental para simular limitaciones sensoriales.

Setup: Pared larga o espacio en el piso para construir la línea de tiempo

Materials: Tarjetas de eventos con fechas y descripciones, Base de línea de tiempo (cinta o papel largo), Flechas de conexión/hilo, Tarjetas de consigna para debate

• Recordar
• Comprender
• Analizar
• Autogestión
• Habilidades de Relación

Rotación por Estaciones

⏱ 60 min·Grupos pequeños

Rotación por Estaciones: Principios UI/UX

Crea cuatro estaciones: usabilidad (pruebas cronometradas), accesibilidad (lectores de pantalla), estética (análisis de grids) y coherencia (comparación de pantallas). Los grupos rotan, documentan observaciones y comparten conclusiones.

Preparación y detalles

¿Cómo la usabilidad impacta directamente la satisfacción del usuario con una aplicación?

Consejo de Facilitación: En las Estaciones de Principios UI/UX, coloca un cronómetro visible en cada estación para mantener el ritmo y evitar que los grupos se queden estancados en un solo tema.

Setup: Mesas/escritorios dispuestos en 4-6 estaciones distintas alrededor del salón

Materials: Tarjetas de instrucciones por estación, Materiales diferentes por estación, Temporizador de rotación

• Recordar
• Comprender
• Aplicar
• Analizar
• Autogestión
• Habilidades de Relación

Enseñando Este Tema

Este tema se enseña mejor con un enfoque basado en proyectos y aprendizaje colaborativo. Evita clases magistrales largas; en su lugar, usa demostraciones breves seguidas de práctica guiada. La investigación en diseño instruccional muestra que los estudiantes retienen mejor los principios cuando los aplican inmediatamente a problemas reales, en lugar de memorizar definiciones. Prioriza la retroalimentación inmediata y el trabajo en equipo para reforzar el aprendizaje.

Qué Esperar

Al finalizar las actividades, los estudiantes podrán identificar y explicar los principios de usabilidad, accesibilidad y estética en interfaces digitales. Demuestran comprensión al justificar sus decisiones de diseño y al proponer mejoras basadas en evidencias, usando un lenguaje técnico preciso y colaborativo.

Cuidado con estas ideas erróneas

Idea errónea común

Durante el Taller de Prototipado de Wireframes, escucha a los estudiantes confundir los términos UI y UX.

Qué enseñar en su lugar

Interrumpe el taller después de 15 minutos y pide a cada pareja que cree dos columnas en su hoja: una para elementos de UI (colores, tipografía, botones) y otra para elementos de UX (flujo de navegación, tiempo de carga, feedback de usuario). Luego, discutan cómo ambos aspectos interactúan en su prototipo.

Idea errónea común

Durante el Análisis de Apps Reales, algunos estudiantes pueden argumentar que una app es exitosa solo por su diseño visual.

Qué enseñar en su lugar

Pide a los grupos que elijan una app con un diseño atractivo pero que hayan tenido problemas para usarla. Luego, deben presentar un caso en el que priorizarían la usabilidad sobre la estética, usando ejemplos concretos de su experiencia.

Idea errónea común

Durante el Desafío de Diseño Inclusivo, algunos pueden creer que la accesibilidad solo afecta a un pequeño grupo de usuarios.

Qué enseñar en su lugar

Al finalizar el desafío, organiza una puesta en común donde cada equipo comparta una mejora que idearon para su interfaz. Luego, pregunta: '¿Quién se beneficia de este cambio además de las personas con discapacidades permanentes?'. Guía la discusión para que identifiquen beneficios para todos los usuarios.

Ideas de Evaluación

Boleto de Salida

Después del Análisis de Apps Reales, entrega a cada estudiante una tarjeta con el nombre de una aplicación conocida. Pide que escriban dos principios de UI/UX que crean que esa aplicación aplica bien y una sugerencia para mejorarla, justificando brevemente con ejemplos de la app que analizaron.

Pregunta para Discusión

Después del Taller de Prototipado de Wireframes, muestra dos versiones de un mismo wireframe: una con problemas de alineación y otra con elementos bien organizados. Pide a los estudiantes que discutan en parejas qué versión permite una mejor experiencia de usuario y por qué.

Evaluación entre Pares

Durante las Estaciones de Principios UI/UX, pide a los estudiantes que trabajen en parejas para dibujar un boceto simple de una pantalla de inicio para una nueva app. Luego, intercambian bocetos y evalúan el del compañero basándose en dos criterios: '¿Es fácil identificar las funciones principales?' y '¿El diseño visual es agradable?'. Deben dar una retroalimentación constructiva usando un formato de rúbrica sencilla.

Extensiones y Apoyo

• Challenge: Pide a los estudiantes que rediseñen una interfaz existente aplicando los tres principios simultáneamente, documentando cada decisión con capturas de pantalla y justificaciones técnicas.
• Scaffolding: Para estudiantes con dificultades, proporciona plantillas de wireframes con espacios predefinidos para elementos clave (botones, menús) y guías visuales de alineación.
• Deeper exploration: Invita a los estudiantes a investigar cómo los principios de UI/UX varían en diferentes culturas o regiones, comparando interfaces de apps populares en Latinoamérica, Asia y Europa.

Vocabulario Clave

Usabilidad	Se refiere a la facilidad con la que un usuario puede aprender y utilizar un producto (aplicación, sitio web) para alcanzar sus objetivos de manera efectiva, eficiente y satisfactoria.
Accesibilidad	Diseño de productos y servicios que puedan ser utilizados por todas las personas, independientemente de sus capacidades físicas, sensoriales o cognitivas, garantizando la inclusión.
Estética	La cualidad del diseño que se relaciona con el atractivo visual y la armonía de los elementos de la interfaz, contribuyendo a una experiencia de usuario agradable y memorable.
Prototipo	Una versión preliminar o modelo de una interfaz de usuario que permite probar y visualizar el diseño antes de la implementación final, facilitando la retroalimentación y la iteración.
Coherencia Visual	El uso consistente de elementos de diseño como colores, tipografías, iconos y espaciado a lo largo de toda la interfaz para crear una identidad visual unificada y predecible.