Diseño web UX/UI: Explorando la experiencia y la interfaz desde la investigación

Este plan de clase está diseñado para que estudiantes universitarios del área de Bellas Artes comprendan y apliquen los principios fundamentales del diseño web enfocado en UX/UI (Experiencia de Usuario e Interfaz de Usuario). A través de la metodología de Aprendizaje Basado en Investigación, los estudiantes investigarán problemas reales relacionados con la usabilidad, accesibilidad y estética de sitios web, desarrollando habilidades críticas para diseñar interfaces que sean funcionales, atractivas y centradas en el usuario.

El objetivo es que los estudiantes no solo aprendan conceptos teóricos, sino que también experimenten el proceso científico para formular preguntas de investigación, recolectar y analizar datos primarios mediante pruebas de usuario y diseñen soluciones creativas fundamentadas en evidencia. Este enfoque conecta directamente con su realidad profesional futura, donde el diseño debe responder a necesidades reales y ser evaluado con rigor.

Además, el plan promueve el trabajo colaborativo, el pensamiento crítico y la reflexión metacognitiva, preparando a los estudiantes para enfrentar desafíos complejos en el diseño digital contemporáneo.

• Analizar principios clave de UX/UI para identificar oportunidades de mejora en interfaces web.
• Formular preguntas de investigación pertinentes para evaluar la experiencia de usuario en sitios web.
• Diseñar prototipos de interfaces web basados en hallazgos de investigación y evidencia empírica.
• Evaluar la usabilidad y accesibilidad de interfaces web mediante pruebas con usuarios reales.
• Reflexionar críticamente sobre el proceso de diseño y su impacto en la experiencia del usuario.

• Computadoras o laptops con acceso a internet (1 por estudiante o por pareja)
• Software de diseño de interfaces (ejemplo: Figma, Adobe XD, Sketch)
• Herramientas para prototipado y pruebas de usabilidad (ejemplo: Maze, Lookback)
• Proyector y pantalla para presentaciones
• Cuadernos o dispositivos para toma de notas
• Material impreso con ejemplos de buenas y malas prácticas UX/UI
• Acceso a sitios web seleccionados para evaluación y análisis
• Plantillas para formular preguntas de investigación y guías para pruebas de usabilidad

• Conocimientos básicos de diseño gráfico y fundamentos de diseño digital.
• Familiaridad previa con conceptos generales de interacción digital y navegación web.
• Habilidades básicas en manejo de software de diseño o prototipado digital.
• Experiencia mínima en trabajo colaborativo y búsqueda de información académica.

Sesión 1: Introducción a UX/UI y planteamiento de preguntas de investigación

Fase de Inicio

Tiempo estimado: 20 minutos

Propósito de la sesión:

Conectar los conocimientos previos sobre diseño con el enfoque UX/UI y contextualizar la importancia de la investigación para crear interfaces efectivas.

Activación de conocimientos previos:

Docente: "Para comenzar, piensen en un sitio web o aplicación que hayan usado recientemente y que les haya causado frustración o agrado. ¿Qué elementos creen que influyeron en esa experiencia?"

Estudiantes: Responden en plenaria y anotan ejemplos concretos.

Motivación y enganche:

Docente: Presenta un dato curioso: "¿Sabían que el 88% de los usuarios no regresan a un sitio web después de una mala experiencia de navegación?"

Se invita a los estudiantes a reflexionar sobre la importancia de un buen diseño UX/UI.

Contextualización:

Docente: Explica cómo el diseño UX/UI influye en la interacción diaria con productos digitales y la relevancia de abordarlo desde una investigación rigurosa.

Fase de Desarrollo

Tiempo estimado: 140 minutos

Presentación del contenido:

Docente: Introduce los conceptos fundamentales de UX (experiencia del usuario) y UI (interfaz de usuario) a través de una breve lectura guiada y análisis de casos de estudio reales.

Actividad 1: Análisis crítico de interfaces

• Objetivo: Analizar principios clave de UX/UI para identificar oportunidades de mejora.
• Instrucciones:
• Docente: Divide a los estudiantes en grupos de 3-4 y asigna un sitio web real para analizar (por ejemplo, una página gubernamental, una tienda en línea, una plataforma educativa).
• Cada grupo debe identificar aspectos positivos y negativos del diseño, enfocándose en usabilidad y estética.
• Usar una plantilla que guíe la observación (navegación, accesibilidad, tiempos de carga, organización visual).
• Organización: Grupos de 3-4 estudiantes
• Producto: Informe breve con observaciones y sugerencias.
• Tiempo: 60 minutos
• Rol del docente: Facilita, responde dudas, fomenta preguntas críticas que profundicen el análisis.

Actividad 2: Planteamiento de preguntas de investigación

• Objetivo: Formular preguntas de investigación para evaluar la experiencia de usuario.
• Instrucciones:
• Docente: Enseña ejemplos de preguntas de investigación en UX/UI (ej: ¿Cómo afecta la disposición de los botones en la tasa de conversión?).
• Los grupos reformulan sus observaciones en preguntas específicas, medibles y relevantes para investigar en la próxima sesión.
• Organización: Grupos de 3-4 estudiantes
• Producto: Lista de 3-5 preguntas de investigación por grupo.
• Tiempo: 60 minutos
• Rol del docente: Revisa preguntas, sugiere mejoras, promueve formulación clara y precisa.

Diferenciación:

Estudiantes adelantados pueden explorar recursos adicionales sobre heurísticas de usabilidad para enriquecer sus análisis. Quienes requieran apoyo reciben ejemplos guiados y acompañamiento más cercano del docente.

Transición:

Docente: Resume la importancia de preguntas claras para guiar la investigación y anuncia que en la siguiente sesión aplicarán métodos para recolectar datos que respondan esas preguntas.

Fase de Cierre

Tiempo estimado: 20 minutos

Síntesis:

Cada grupo comparte en plenaria sus preguntas de investigación y puntos clave del análisis realizado, mientras el docente anota para referencia futura.

Reflexión metacognitiva:

• ¿Qué aspectos de UX/UI les parecieron más relevantes para evaluar y por qué?
• ¿Cómo creen que sus preguntas de investigación pueden ayudar a mejorar una interfaz web?
• ¿Qué dificultades encontraron al analizar las interfaces?

Retroalimentación:

Docente: Ofrece comentarios personalizados y generales sobre la claridad y pertinencia de las preguntas y análisis, resaltando fortalezas y áreas de mejora.

Transferencia:

Docente: Invita a pensar en cómo aplicar el método científico para investigar en diseño digital, preparando a los estudiantes para la siguiente sesión donde harán pruebas con usuarios.

Sesión 2: Investigación de usuarios y análisis de datos

Fase de Inicio

Tiempo estimado: 15 minutos

Propósito de la sesión:

Recordar preguntas de investigación y preparar a los estudiantes para recolectar datos a través de pruebas con usuarios reales.

Activación de conocimientos previos:

Docente: "Repasemos las preguntas que formularon. ¿Qué tipo de datos creen que necesitarán para responderlas?"

Estudiantes: Comparten ideas y anticipan métodos de recolección.

Motivación y enganche:

Docente: Muestra un breve video con ejemplos de pruebas de usabilidad que revelan problemas invisibles a simple vista.

Contextualización:

Docente: Explica cómo la investigación empírica mejora el diseño y evita suposiciones erróneas.

Fase de Desarrollo

Tiempo estimado: 150 minutos

Actividad 1: Diseño de protocolo para pruebas de usabilidad

• Objetivo: Diseñar un procedimiento para recolectar datos sobre la experiencia de usuario.
• Instrucciones:
• Docente: Explica elementos de un protocolo: objetivos, tareas para usuarios, preguntas para entrevista post-tarea.
• Grupos diseñan su protocolo basado en sus preguntas de investigación.
• El docente proporciona plantilla y guía.
• Organización: Grupos de 3-4 estudiantes
• Producto: Protocolo escrito para la prueba de usabilidad.
• Tiempo: 70 minutos
• Rol del docente: Revisa avances, orienta sobre claridad y factibilidad.

Actividad 2: Simulación y aplicación piloto de pruebas

• Objetivo: Ejecutar pruebas piloto para validar el protocolo y generar datos iniciales.
• Instrucciones:
• Grupos realizan pruebas entre ellos simulando usuarios, siguiendo el protocolo diseñado.
• Registran observaciones y respuestas.
• Organización: Grupos de 3-4 estudiantes (roles rotativos)
• Producto: Registro de datos piloto y comentarios para mejorar el protocolo.
• Tiempo: 80 minutos
• Rol del docente: Supervisa, toma notas, sugiere ajustes para mejorar la precisión de la recolección.

Diferenciación:

Quienes finalicen antes pueden comenzar a explorar herramientas digitales para grabar y analizar sesiones. Quienes necesiten apoyo cuentan con ejemplos detallados y acompañamiento individual.

Transición:

Docente: Resume la importancia de un buen diseño de protocolo y anuncia que en la siguiente sesión analizarán los datos y diseñarán prototipos de mejora.

Fase de Cierre

Tiempo estimado: 15 minutos

Síntesis:

Breve discusión en plenaria sobre los desafíos encontrados y aprendizajes sobre la recolección de datos.

Reflexión metacognitiva:

• ¿Qué dificultades tuvieron para diseñar y aplicar el protocolo?
• ¿Cómo creen que la investigación empírica mejora el diseño UX/UI?

Retroalimentación:

Docente: Proporciona comentarios para mejorar los protocolos y enfatiza la importancia de la rigurosidad.

Transferencia:

Docente: Invita a pensar en cómo analizarán los datos para tomar decisiones de diseño en la próxima sesión.

Sesión 3: Análisis de datos y diseño de prototipos UX/UI

Fase de Inicio

Tiempo estimado: 15 minutos

Propósito de la sesión:

Revisar datos recolectados y preparar el análisis para generar mejoras de diseño fundamentadas.

Activación de conocimientos previos:

Docente: "¿Qué patrones o problemas identificaron en los datos de sus pruebas piloto?"

Estudiantes: Comparten brevemente hallazgos.

Motivación y enganche:

Docente: Muestra ejemplos de prototipos basados en análisis de datos reales que mejoraron significativamente la experiencia de usuario.

Contextualización:

Docente: Explica cómo el análisis de datos orienta el diseño y evita conjeturas.

Fase de Desarrollo

Tiempo estimado: 150 minutos

Actividad 1: Análisis cualitativo y cuantitativo de datos

• Objetivo: Interpretar datos para identificar problemas y oportunidades de mejora UX/UI.
• Instrucciones:
• Grupos organizan sus datos en tablas y esquemas.
• Identifican tendencias, problemas recurrentes y feedback relevante.
• Preparan un breve informe con conclusiones.
• Organización: Grupos de 3-4 estudiantes
• Producto: Informe analítico de resultados.
• Tiempo: 70 minutos
• Rol del docente: Apoya con técnicas de análisis, plantea preguntas para profundizar el razonamiento.

Actividad 2: Diseño colaborativo de prototipos UX/UI

• Objetivo: Crear prototipos digitales que atiendan problemas detectados en la investigación.
• Instrucciones:
• Usando software de diseño, grupos desarrollan prototipos iniciales.
• Integran principios de usabilidad y estética acordes con los hallazgos.
• Preparan para presentación y retroalimentación.
• Organización: Grupos de 3-4 estudiantes
• Producto: Prototipo digital funcional básico.
• Tiempo: 80 minutos
• Rol del docente: Facilita acceso a recursos, da feedback sobre diseño y funcionalidad.

Diferenciación:

Estudiantes con mayor dominio pueden explorar interactividad avanzada en prototipos. Quienes requieran apoyo reciben tutoriales y acompañamiento personalizado.

Transición:

Docente: Prepara a los estudiantes para probar sus prototipos con usuarios reales o simulados en la siguiente sesión.

Fase de Cierre

Tiempo estimado: 15 minutos

Síntesis:

Intercambio rápido de ideas sobre las decisiones de diseño tomadas y sus bases en la investigación.

Reflexión metacognitiva:

• ¿Cómo influyeron los datos de la investigación en sus decisiones de diseño?
• ¿Qué mejorarían en sus prototipos si tuvieran más tiempo?

Retroalimentación:

Docente: Comentarios constructivos sobre el uso de evidencia para fundamentar el diseño.

Transferencia:

Docente: Introduce la importancia de la validación final con usuarios reales, tema de la próxima sesión.

Sesión 4: Validación, retroalimentación y reflexión final

Fase de Inicio

Tiempo estimado: 15 minutos

Propósito de la sesión:

Preparar la validación de prototipos y organizar la dinámica de retroalimentación.

Activación de conocimientos previos:

Docente: Solicita a los grupos compartir brevemente qué esperan obtener al probar sus prototipos con usuarios.

Estudiantes: Exponen expectativas y dudas.

Motivación y enganche:

Docente: Presenta casos donde la validación con usuarios cambió radicalmente el diseño final para mejor.

Contextualización:

Docente: Explica cómo la retroalimentación es fundamental para el éxito en proyectos reales.

Fase de Desarrollo

Tiempo estimado: 140 minutos

Actividad 1: Pruebas de usabilidad con usuarios reales o simulados

• Objetivo: Validar los prototipos y recolectar retroalimentación directa.
• Instrucciones:
• Organizar grupos para que otros estudiantes o voluntarios externos interactúen con los prototipos.
• Recolectar observaciones, tiempos, dificultades y sugerencias.
• Registrar todo en formatos previamente diseñados.
• Organización: Grupos de 3-4 estudiantes + usuarios
• Producto: Informe de prueba de usabilidad con datos y comentarios.
• Tiempo: 90 minutos
• Rol del docente: Coordina logística, asegura ambiente adecuado, guía observación y registro.

Actividad 2: Reflexión y mejora final de prototipos

• Objetivo: Incorporar retroalimentación para optimizar el diseño.
• Instrucciones:
• Grupos analizan la retroalimentación recibida.
• Discuten posibles ajustes y los aplican en sus prototipos.
• Preparan una presentación final con justificación de cambios.
• Organización: Grupos de 3-4 estudiantes
• Producto: Prototipo mejorado y presentación final.
• Tiempo: 50 minutos
• Rol del docente: Facilita discusión, ofrece feedback y valida mejoras.

Diferenciación:

Estudiantes con más rapidez pueden preparar preguntas para una sesión de coevaluación. Quienes necesiten apoyo pueden enfocarse en aspectos específicos con ayuda personalizada.

Transición:

Docente: Prepara el cierre final y reflexión global sobre todo el proceso.

Fase de Cierre

Tiempo estimado: 25 minutos

Síntesis:

Creación conjunta de un mapa mental en la pizarra digital con las etapas, aprendizajes clave y recomendaciones para futuros proyectos UX/UI.

Reflexión metacognitiva:

• ¿Cómo influyó la investigación en la calidad de sus diseños?
• ¿Qué habilidades nuevas desarrollaron durante este proceso?
• ¿Cómo aplicarán estos aprendizajes en su vida académica o profesional?

Retroalimentación:

Docente: Brinda retroalimentación integral, resalta el trabajo colaborativo y la aplicación del método científico en diseño.

Transferencia:

Se invita a los estudiantes a seguir investigando y aplicando UX/UI en proyectos personales o profesionales, destacando la importancia de la mejora continua.

Tarea o reto:

Diseñar un mini caso de investigación UX/UI aplicando lo aprendido a un sitio web o app de su interés, que presentarán en la próxima asignatura.

Tipo de evaluación:

• Diagnóstica: Inicio de la Sesión 1 (activación de conocimientos previos sobre diseño UX/UI).
• Formativa: Durante todas las sesiones, especialmente en actividades de análisis, formulación de preguntas, diseño y aplicación de pruebas.
• Sumativa: En la Sesión 4, con la presentación final del prototipo mejorado y el informe de validación, además de la reflexión metacognitiva.

Criterios de evaluación:

• Capacidad para analizar interfaces y detectar elementos UX/UI relevantes (Objetivo 1).
• Formulación clara y pertinente de preguntas de investigación (Objetivo 2).
• Diseño efectivo y fundamentado de prototipos digitales (Objetivo 3).
• Aplicación adecuada de pruebas de usabilidad y análisis de resultados (Objetivo 4).
• Reflexión crítica sobre el proceso y resultados del diseño (Objetivo 5).

Instrumentos sugeridos:

• Rúbrica para informes de análisis y prototipos.
• Lista de cotejo para protocolos y pruebas de usabilidad.
• Observación directa durante actividades grupales.
• Portafolio digital con productos generados en cada sesión.
• Autoevaluación y coevaluación en la última sesión.

Evidencias de aprendizaje:

• Informes de análisis de interfaces y preguntas de investigación (Sesión 1).
• Protocolos y registros de pruebas piloto (Sesión 2).
• Informes analíticos y prototipos digitales (Sesión 3).
• Informe de validación, prototipo mejorado y presentación final (Sesión 4).
• Respuestas a preguntas de reflexión metacognitiva y participación en discusiones.