Principios de Usabilidad (UX) y Experiencia de Usuario

El tema de usabilidad y experiencia de usuario requiere que los alumnos experimenten el diseño desde la práctica, porque entender estos principios de forma teórica sin probarlos en interfaces reales no transforma su forma de pensar. La manipulación activa de interfaces, bocetos y flujos les ayuda a internalizar por qué algunos diseños funcionan mejor que otros, convirtiendo conceptos abstractos en herramientas concretas que pueden aplicar de inmediato.

• 3° ESO
• Innovación Digital y Pensamiento Computacional
• 4 actividades
• 30 min–45 min

Objetivos de aprendizaje

1. Identificar los principios clave de la usabilidad (visibilidad del estado del sistema, relación entre sistema y usuario, control y libertad del usuario, consistencia y estándares, prevención de errores, reconocimiento en lugar de recuerdo, flexibilidad y eficiencia de uso, diseño estético y minimalista, ayuda para reconocer, diagnosticar y recuperar errores, y ayuda y documentación) en interfaces digitales existentes.
2. Analizar la experiencia de usuario (UX) de una aplicación o sitio web, evaluando su intuición, eficiencia y satisfacción general.
3. Diseñar un prototipo de baja fidelidad para una interfaz de usuario simple, aplicando al menos tres principios de usabilidad para mejorar la experiencia.
4. Criticar el diseño de una interfaz digital basándose en los principios de la experiencia de usuario, proponiendo mejoras concretas.
5. Explicar la importancia de la empatía y el diseño centrado en el usuario para crear productos digitales exitosos.

Estudio de caso

⏱ 45 min·Grupos pequeños

Rotación de Estaciones: Pruebas de Usabilidad

Prepara cuatro estaciones con webs o apps simples: evalúa jerarquía visual, consistencia, feedback y accesibilidad. Los grupos rotan cada 10 minutos, anotan problemas y proponen mejoras. Discute colectivamente al final.

Preparación y detalles

¿Qué elementos hacen que una página web sea intuitiva para cualquier usuario?

Consejo de facilitación: Durante la Rotación de Estaciones, asigna roles específicos a cada grupo para que todos participen activamente, como 'observador', 'registrador' y 'entrevistador'.

Setup: Trabajo por grupos en mesas con el material del caso

Materials: Dossier del caso (3-5 páginas), Guía o rúbrica de análisis, Plantilla para la presentación de conclusiones

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

Estudio de caso

⏱ 30 min·Parejas

Pares: Diseño de Wireframe Intuitivo

En parejas, dibuja wireframes para una web escolar usando principios UX. Intercambian diseños, simulan navegación y registran frustraciones. Iteran basados en feedback mutuo.

Preparación y detalles

¿Cómo influye la jerarquía visual en la retención de información por parte del usuario?

Consejo de facilitación: En el diseño de Wireframe Intuitivo, proporciona ejemplos concretos de interfaces familiares para que los alumnos comparen y ajusten sus propuestas.

Setup: Trabajo por grupos en mesas con el material del caso

Materials: Dossier del caso (3-5 páginas), Guía o rúbrica de análisis, Plantilla para la presentación de conclusiones

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

Estudio de caso

⏱ 40 min·Grupos pequeños

Grupos Pequeños: Mapa de Flujo de Usuario

Crea mapas de usuario para una tarea común, identificando pasos, dolores y soluciones. Prueba el mapa con otro grupo y ajusta para minimizar frustración.

Preparación y detalles

¿Cómo diseñaríais un flujo de usuario que minimice la frustración y maximice la eficiencia?

Consejo de facilitación: Para el Mapa de Flujo de Usuario, pide a los grupos que expliquen su proceso en voz alta mientras dibujan, para detectar lagunas en su lógica.

Setup: Trabajo por grupos en mesas con el material del caso

Materials: Dossier del caso (3-5 páginas), Guía o rúbrica de análisis, Plantilla para la presentación de conclusiones

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

Estudio de caso

⏱ 35 min·Toda la clase

Clase Completa: Evaluación Colectiva de Apps

Proyecta apps populares, vota intuitividad por principios UX y debate mejoras. Registra datos en pizarra compartida para visualizar patrones comunes.

Preparación y detalles

¿Qué elementos hacen que una página web sea intuitiva para cualquier usuario?

Consejo de facilitación: En la Evaluación Colectiva de Apps, usa aplicaciones que los alumnos conozcan bien para que la discusión sea más auténtica y participativa.

Setup: Trabajo por grupos en mesas con el material del caso

Materials: Dossier del caso (3-5 páginas), Guía o rúbrica de análisis, Plantilla para la presentación de conclusiones

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

Enseñando este tema

Este tema se enseña mejor cuando los alumnos experimentan la frustración de una interfaz mal diseñada y luego rediseñan soluciones basadas en evidencia. Evita iniciar con definiciones abstractas; en cambio, usa ejemplos visuales y pruebas prácticas para que construyan su comprensión desde la observación y el error. Investiga sugiere que los conceptos de UX se asimilan mejor cuando los alumnos actúan como usuarios finales antes de convertirse en diseñadores, por lo que las actividades deben fomentar esa empatía inicial.

Qué esperar

Al finalizar estas actividades, los alumnos deberían ser capaces de identificar principios clave de UX en interfaces cotidianas y argumentar por qué funcionan o fallan. Además, deberían poder aplicar estos principios en sus propios diseños, demostrando que entienden la relación entre jerarquía visual, feedback y eficiencia. La evaluación de sus entregas y discusiones mostrará si han integrado estos conceptos más allá de la memorización.

Atención a estas ideas erróneas

Idea errónea común

Durante la Rotación de Estaciones, algunos alumnos pueden creer que una interfaz con muchos colores y animaciones es siempre usable.

Qué enseñar en su lugar

Durante la Rotación de Estaciones, observa cómo los grupos anotan las dificultades de las interfaces sobrecargadas y corrige esta idea llevándolos a discutir qué elementos distraen o confunden al usuario.

Idea errónea común

Durante el Diseño de Wireframe Intuitivo, algunos pueden pensar que la UX solo importa en webs profesionales.

Qué enseñar en su lugar

Durante el Diseño de Wireframe Intuitivo, pide a los alumnos que comparen sus bocetos con interfaces simples que usen a diario, como menús de apps escolares, para demostrar que la UX mejora cualquier diseño.

Idea errónea común

Durante el Mapa de Flujo de Usuario, algunos pueden afirmar que la jerarquía visual no afecta la retención de información.

Qué enseñar en su lugar

Durante el Mapa de Flujo de Usuario, usa ejemplos donde los alumnos prueben su propia retención: muestra dos versiones de un mismo flujo, una con jerarquía clara y otra sin ella, y pide que memoricen detalles clave en un tiempo limitado.

Ideas de Evaluación

Boleto de Salida

Después de la Rotación de Estaciones, entrega a cada alumno una captura de pantalla de una interfaz web o app identificada en las estaciones. Pide que identifiquen y describan brevemente dos principios de usabilidad aplicados correctamente y uno que podría mejorarse, explicando por qué.

Pregunta para Discusión

Después de la Evaluación Colectiva de Apps, realiza una lluvia de ideas guiada preguntando: 'Si tuvierais que diseñar una aplicación para pedir comida a domicilio, ¿qué tres cosas haríais para que fuera lo más fácil y agradable posible de usar?' Anota las respuestas en la pizarra y discute cómo se relacionan con los principios de UX trabajados.

Evaluación entre Iguales

Durante el Diseño de Wireframe Intuitivo, los alumnos trabajan en parejas para crear un boceto simple de una pantalla de inicio. Luego, intercambian bocetos y se dan feedback mutuamente utilizando una lista de verificación de 3-4 principios de usabilidad clave, indicando si el boceto los cumple o no.

Extensiones y apoyo

• Challenge: Pide a los alumnos que rediseñen una interfaz existente identificada como problemática durante las pruebas, incorporando al menos tres principios de UX discutidos.
• Scaffolding: Para estudiantes que luchan con la jerarquía visual, proporciona una plantilla con secciones marcadas para que coloquen elementos según su prioridad funcional.
• Deeper: Invita a los alumnos a investigar sobre diseño universal y accesibilidad, proponiendo mejoras concretas para una app o web que usen frecuentemente.

Vocabulario Clave

Usabilidad	Se refiere a la facilidad con la que los usuarios pueden utilizar una interfaz para lograr sus objetivos de manera efectiva, eficiente y satisfactoria.
Experiencia de Usuario (UX)	Abarca todas las percepciones y respuestas de una persona que resultan del uso o la anticipación del uso de un producto, sistema o servicio. Es un concepto más amplio que la usabilidad.
Interfaz Intuitiva	Una interfaz que permite a los usuarios comprender y operar el sistema sin necesidad de instrucciones complejas, basándose en convenciones y expectativas comunes.
Jerarquía Visual	La organización y presentación de elementos en una interfaz para guiar la atención del usuario hacia la información más importante, utilizando tamaño, color, contraste y posición.
Flujo de Usuario	La secuencia de pasos que un usuario sigue para completar una tarea específica dentro de una interfaz digital, desde el inicio hasta la consecución del objetivo.