Tecnología · 2o de Secundaria · Diseño de Soluciones y Prototipado · V Bimestre

Diseño de Interfaz de Usuario (UI) y Experiencia de Usuario (UX)

Los estudiantes exploran los principios de diseño de UI/UX para crear interfaces intuitivas y agradables para el usuario.

• Aprendizajes Esperados SEP
• SEP Secundaria: Diseño y Creación de Prototipos

Acerca de este tema

El diseño de Interfaz de Usuario (UI) y Experiencia de Usuario (UX) enseña a los estudiantes a crear interfaces digitales intuitivas y placenteras. La UI se enfoca en elementos visuales como botones, colores y tipografías, mientras que la UX evalúa la usabilidad, eficiencia y satisfacción del usuario completo. En esta unidad, exploran principios como jerarquía visual, consistencia, retroalimentación inmediata y accesibilidad para diferentes capacidades.

Este contenido se integra al plan de SEP para Tecnología en secundaria, específicamente en Diseño de Soluciones y Prototipado. Los alumnos responden preguntas clave: diferenciar UI de UX, identificar elementos que mejoran la experiencia y asegurar inclusión. Analizan apps cotidianas como WhatsApp o Google Classroom, detectan problemas y proponen mejoras, alineándose con estándares de creación de prototipos funcionales.

El aprendizaje activo beneficia este tema porque los estudiantes construyen y prueban prototipos reales con herramientas simples como papel o Figma gratuito. Iterar con feedback de pares hace tangibles conceptos abstractos, desarrolla empatía por el usuario y fortalece habilidades de diseño iterativo esenciales para el mundo digital.

Preguntas Clave

1. ¿Cómo se diferencia el diseño de interfaz de usuario de la experiencia de usuario?
2. ¿Qué elementos visuales y de interacción contribuyen a una buena experiencia de usuario?
3. ¿Cómo se asegura que una interfaz sea accesible para personas con diferentes capacidades?

Objetivos de Aprendizaje

• Comparar los principios de diseño de UI y UX al analizar aplicaciones móviles comunes.
• Evaluar la efectividad de elementos de diseño visual y de interacción en interfaces de usuario existentes.
• Diseñar bocetos de baja fidelidad para una interfaz de usuario que mejore la experiencia de un usuario específico.
• Explicar cómo los principios de accesibilidad benefician a usuarios con diversas capacidades en el diseño de interfaces.

Antes de Empezar

Identificación de Problemas y Oportunidades

Por qué: Los estudiantes necesitan saber cómo identificar necesidades o problemas para poder diseñar soluciones de interfaz que los aborden.

Herramientas Básicas de Dibujo y Bocetado

Por qué: La capacidad de dibujar bocetos simples es fundamental para representar ideas de interfaz antes de usar herramientas digitales.

Vocabulario Clave

Interfaz de Usuario (UI)	La parte de un sistema digital con la que el usuario interactúa directamente. Incluye elementos visuales como botones, menús y diseño general.
Experiencia de Usuario (UX)	La percepción y respuesta general de una persona al usar un producto, sistema o servicio. Se enfoca en la usabilidad, accesibilidad y disfrute.
Usabilidad	La facilidad con la que los usuarios pueden aprender y utilizar un producto para lograr sus objetivos de manera efectiva y eficiente.
Jerarquía Visual	La organización de elementos en una interfaz para indicar su orden de importancia, guiando la mirada del usuario a través del contenido.
Accesibilidad	El diseño de productos y servicios para que puedan ser utilizados por personas con la más amplia gama de capacidades.

Cuidado con estas ideas erróneas

Idea errónea común

UI y UX son lo mismo.

Qué enseñar en su lugar

La UI es solo el aspecto visual, mientras UX abarca emociones y eficiencia total. Actividades de pares comparando diseños ayudan a los estudiantes mapear diferencias y ver impactos en usabilidad real.

Idea errónea común

Un diseño bonito garantiza buena UX.

Qué enseñar en su lugar

La estética atrae, pero UX requiere pruebas de tareas reales. Pruebas en grupo revelan problemas ocultos, como clics confusos, fomentando iteraciones basadas en evidencia.

Idea errónea común

La accesibilidad solo importa para personas con discapacidades.

Qué enseñar en su lugar

Todos ganan con alto contraste y navegación simple. Discusiones inclusivas en clase amplían perspectivas y mejoran diseños para diversidad real.

Ideas de aprendizaje activo

Rotación por Estaciones: Principios UI

Prepara cuatro estaciones: colores y contraste, tipografía y legibilidad, iconos intuitivos, navegación consistente. Los grupos rotan cada 10 minutos, experimentan con ejemplos impresos o digitales y anotan observaciones. Cierra con una discusión grupal sobre elecciones clave.

45 min·Grupos pequeños

Enseñanza entre Pares: Wireframes Rápidos

En parejas, los estudiantes esbozan wireframes para una app escolar simple, como un calendario de tareas. Usan papel y lápices para priorizar elementos UI. Intercambian con otra pareja para feedback inicial de usabilidad.

30 min·Parejas

Pruebas de Usabilidad en Grupo

Grupos crean prototipos en cartón o apps básicas. Un estudiante 'usuario' prueba la interfaz mientras otros observan y registran confusiones. Rotan roles y ajustan basado en datos recolectados.

50 min·Grupos pequeños

Galería Crítica: UX Colectiva

Exhibe prototipos en el salón. La clase camina, vota con post-its por lo más intuitivo y discute accesibilidad. Cada equipo itera una mejora inmediata.

35 min·Toda la clase

Conexiones con el Mundo Real

• Los diseñadores de UX en empresas como Mercado Libre trabajan para optimizar la experiencia de compra en línea, asegurando que los usuarios encuentren productos fácilmente y completen transacciones de forma segura.
• Los desarrolladores de aplicaciones educativas como Duolingo utilizan principios de UI/UX para crear interfaces atractivas y fáciles de usar que motiven a los estudiantes a practicar idiomas de manera constante.
• Los equipos de diseño de software en startups tecnológicas crean prototipos de interfaces para nuevas aplicaciones móviles, probándolos con usuarios potenciales para validar su funcionalidad y atractivo antes del lanzamiento.

Ideas de Evaluación

Boleto de Salida

Entregue a cada estudiante una tarjeta con el nombre de una aplicación conocida (ej. WhatsApp, YouTube). Pida que escriban dos elementos de UI que les gustan y una sugerencia de UX para mejorarla, justificando brevemente cada punto.

Evaluación entre Pares

Los estudiantes trabajan en parejas para dibujar un boceto simple de la interfaz de una aplicación. Luego, intercambian bocetos y evalúan la claridad de la navegación y la posible facilidad de uso, proporcionando una retroalimentación constructiva sobre un aspecto a mejorar.

Verificación Rápida

Presente en pantalla dos versiones de una misma interfaz (una bien diseñada, otra no tanto). Pregunte a los estudiantes: ¿Cuál interfaz es más intuitiva y por qué? ¿Qué principios de UI/UX se aplican mejor en la primera opción?

Preguntas frecuentes

¿Cómo se diferencia el diseño de UI de UX?

UI se centra en elementos visuales y táctiles como botones y layouts, asegurando atractivo y claridad. UX evalúa el camino completo del usuario, midiendo facilidad, velocidad y placer en tareas. En clase, compara apps: un botón bonito (UI) no salva una app lenta (mala UX). Esto guía prototipos centrados en usuario.

¿Qué elementos visuales mejoran la experiencia de usuario?

Jerarquía con tamaños y colores guía la atención, consistencia reduce aprendizaje, retroalimentación como animaciones confirma acciones. Espaciado adecuado evita sobrecarga. Estudiantes prueban estos en wireframes para ver impactos directos en intuición y satisfacción.

¿Cómo hacer una interfaz accesible?

Usa alto contraste, texto escalable, navegación por teclado y descripciones alternativas en imágenes. Prueba con simuladores de daltonismo o lectores de pantalla. Incluye diversidad en pruebas de usuario para cubrir discapacidades visuales, motoras y cognitivas, alineado con estándares web.

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

Actividades como prototipar en papel y probar con pares convierten teoría en práctica, revelando fallos reales que lecturas no muestran. Feedback iterativo construye empatía y habilidades de diseño. Rotaciones y galerías fomentan colaboración, haciendo conceptos memorables y aplicables a proyectos futuros.