Tecnología · 3o de Preparatoria · Desarrollo de Aplicaciones y Arquitectura de Software · II Bimestre

Principios de Diseño de UI/UX

Los estudiantes exploran los principios fundamentales de diseño de interfaces de usuario (UI) y experiencia de usuario (UX), como usabilidad, accesibilidad y estética.

• Aprendizajes Esperados SEP
• SEP EMS: Diseño de Interfaces y Experiencia de Usuario
• SEP EMS: Innovación y Diseño Digital

Acerca de este tema

Los principios de diseño de UI/UX abordan la creación de interfaces intuitivas y experiencias placenteras para el usuario. Los estudiantes analizan usabilidad, que mide la facilidad de uso y reduce frustraciones; accesibilidad, que garantiza inclusión para personas con discapacidades; y estética, que equilibra atractivo visual con funcionalidad. Estos elementos responden directamente a preguntas clave como el impacto de la usabilidad en la satisfacción del usuario y la importancia del diseño inclusivo.

En el plan SEP de Tecnología para preparatoria, este tema se integra en Desarrollo de Aplicaciones y Arquitectura de Software, fomentando innovación digital y diseño de interfaces. Los alumnos desarrollan competencias para evaluar y mejorar aplicaciones reales, conectando teoría con práctica profesional en un mundo cada vez más digital.

El aprendizaje activo beneficia este tema porque permite a los estudiantes prototipar interfaces, probarlas con compañeros y iterar diseños basados en retroalimentación real. Estas actividades convierten conceptos abstractos en habilidades prácticas y memorables, preparando a los jóvenes para proyectos auténticos.

Preguntas Clave

1. ¿Cómo la usabilidad impacta directamente la satisfacción del usuario con una aplicación?
2. ¿De qué manera el diseño inclusivo mejora la accesibilidad para todos los usuarios?
3. ¿Por qué la coherencia visual es crucial para una buena experiencia de usuario?

Objetivos de Aprendizaje

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

Antes de Empezar

Fundamentos de la Programación Estructurada

Por qué: Comprender la lógica de programación ayuda a entender cómo las decisiones de diseño impactan la funcionalidad y la estructura de una aplicación.

Introducción a la Arquitectura de Software

Por qué: Tener una noción de cómo se estructuran las aplicaciones facilita la comprensión de dónde se integran los principios de UI/UX en el ciclo de desarrollo.

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.

Cuidado con estas ideas erróneas

Idea errónea común

UI y UX son lo mismo.

Qué enseñar en su lugar

UI se centra en elementos visuales como botones y colores, mientras UX abarca la experiencia completa de interacción. Actividades de prototipado en parejas ayudan a los estudiantes a diferenciarlos al probar diseños y recibir feedback directo sobre fluidez.

Idea errónea común

La estética es más importante que la usabilidad.

Qué enseñar en su lugar

La usabilidad prioriza funciones intuitivas; la estética las complementa. Evaluaciones grupales de apps reales revelan cómo diseños bonitos pero confusos frustran usuarios, fomentando priorización mediante discusión colaborativa.

Idea errónea común

Accesibilidad solo aplica a personas con discapacidades.

Qué enseñar en su lugar

El diseño inclusivo beneficia a todos, mejorando navegación general. Pruebas simuladas en clase permiten experimentar limitaciones, corrigiendo esta idea mediante empatía y ajustes iterativos en equipo.

Ideas de aprendizaje activo

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.

45 min·Parejas

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.

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

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

60 min·Grupos pequeños

Conexiones con el Mundo Real

• Los diseñadores UX de Google trabajan en aplicaciones como Google Maps para asegurar que la navegación sea intuitiva y accesible para conductores de todas las edades y niveles de habilidad tecnológica, mejorando la seguridad vial.
• Los desarrolladores web de Netflix deben considerar la accesibilidad para que personas con baja visión puedan disfrutar del contenido, implementando funciones como subtítulos descriptivos y alto contraste.
• Las empresas de banca digital, como NuBank o Klar, invierten fuertemente en UI/UX para que sus aplicaciones sean fáciles de usar y generen confianza en los usuarios al realizar transacciones financieras complejas.

Ideas de Evaluación

Boleto de Salida

Entrega a cada estudiante una tarjeta con el nombre de una aplicación conocida (ej. WhatsApp, Instagram, YouTube). Pide que escriban dos principios de UI/UX que creen que esa aplicación aplica bien y una sugerencia para mejorarla, justificando brevemente.

Verificación Rápida

Muestra dos versiones de una misma pantalla de aplicación con diferencias claras en usabilidad o estética (ej. botones mal alineados vs. bien alineados). Pregunta a los estudiantes: '¿Qué versión prefieren y por qué? ¿Qué principio de diseño se está aplicando mejor en esa versión?'

Evaluación entre Pares

Los estudiantes trabajan 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.

Preguntas frecuentes

¿Cómo impacta la usabilidad en la satisfacción del usuario en apps?

La usabilidad reduce tiempos de aprendizaje y errores, aumentando la retención de usuarios hasta en 400% según estudios. Interfaces intuitivas generan confianza y lealtad. En clase, pruebas de usuario reales muestran cómo un botón mal colocado causa abandono inmediato, guiando mejoras concretas.

¿Qué es diseño inclusivo en UI/UX?

El diseño inclusivo asegura que interfaces sean accesibles para diversos usuarios, con alto contraste, soporte a lectores de pantalla y navegación simple. Cumple estándares WCAG. Actividades prácticas como simular discapacidades ayudan a estudiantes a crear productos equitativos y éticos.

¿Cómo el aprendizaje activo ayuda a enseñar principios de UI/UX?

El aprendizaje activo, como prototipos y pruebas con pares, hace tangibles conceptos abstractos. Estudiantes iteran diseños basados en feedback real, desarrollando criterio crítico. Esto supera lecturas pasivas, ya que la retroalimentación inmediata refuerza usabilidad y accesibilidad, alineándose con SEP para competencias prácticas.

¿Por qué la coherencia visual es crucial en UX?

La coherencia mantiene patrones uniformes en colores, tipografías e iconos, reduciendo carga cognitiva. Usuarios navegan intuitivamente sin reaprendar. Análisis de apps en grupos revela cómo inconsistencias confunden, promoviendo diseños profesionales y eficientes.