Laboratorio de pruebas de usabilidad: auditar una tienda difícil de usar y leer una prueba en el navegador

Este laboratorio da a cada estudiante un JupyterLab propio con una pequeña tienda web difícil de usar a propósito: texto gris difícil de leer, enlaces que solo dicen «click here», cajas sin etiqueta, imágenes sin texto alternativo, un contorno de foco eliminado, un error que solo dice «Error 7» y un botón demasiado pequeño para pulsarlo en un móvil. Al lado está el resultado de una prueba de usabilidad de esa tienda con doce personas, cuatro tareas y un cuestionario de diez preguntas, y scripts cortos que auditan la página y leen los números.

No es un laboratorio de ataque. Cada copia no tiene salida a internet ni a ningún otro estudiante, así que no se puede descargar nada en ella y nada de lo que hay dentro puede llegar a nadie más. La tienda es inventada: es una página que arreglar, no una tienda real.

Qué aprenden los estudiantes

A mirar una página como lo hace un usuario: la relación de contraste del texto con su fondo, el texto alternativo de las imágenes, las etiquetas de los formularios, las palabras de los enlaces, el contorno del foco y el tamaño de un botón. Después, a leer una prueba de usabilidad: la tasa de éxito y el tiempo mediano de cada tarea con pandas, los errores que causó cada tarea, y la puntuación que un cuestionario de diez preguntas da a cada persona y al grupo. Por último, a arreglar una página, comprobar el cambio en la vista previa en directo y demostrarlo volviendo a ejecutar la auditoría. Sirve para introducciones a la usabilidad, la experiencia de usuario y la accesibilidad; comprueba la redacción exacta en la unidad de tu propio organismo certificador, aquí no se cita ninguna.

Ejecútalo en tu navegador

El laboratorio inicia un solo servicio, jupyter, que escribe la tienda, los datos de la prueba, las notas, un cuaderno y los scripts cortos en su carpeta de trabajo, y sirve la tienda desde su propia carpeta. Desde la página del laboratorio se abren dos enlaces: JupyterLab, el taller donde el estudiante edita los archivos de la tienda y ejecuta los scripts, y la vista previa (Preview), la tienda misma, que el estudiante actualiza después de guardar un cambio. JupyterLab no pide token, porque la puerta de la plataforma ya sabe quién lo abre. El terminal junto al laboratorio no tiene Python propio, así que llega al del laboratorio con docker exec jupyter, seguido de la orden que se ejecutará dentro.

  1. Abre la página Contenedor. Abre «Crear» en la barra y elige «Ejecutar un contenedor». Cualquiera puede abrir la página, y el laboratorio de Git y el de SQL se inician sin cuenta. Todos los demás laboratorios necesitan una cuenta gratuita: crea una, inicia sesión y pulsa «Iniciar».
  2. Busca el laboratorio. La tarjeta «Laboratorios de ejemplo» lista todos los ejemplos. Busca Pruebas de usabilidad: auditar una tienda web.
  3. Pulsa «Iniciar». «Iniciar» lo ejecuta tal cual, con una sola pulsación. «Editar el archivo primero» abre el archivo compose para que lo cambies antes de iniciarlo.
  4. Ábrelo. En la página del laboratorio, la barra tiene dos enlaces. Pulsa JupyterLab para abrir el taller y Preview para ver la tienda en otra pestaña. Después pulsa Abrir terminal y escribe docker exec jupyter python3 steps/audit.py para ver el recuento de problemas de las dos páginas.

Qué pedir a los estudiantes que entreguen

Los tres archivos de la tienda que han cambiado (index.html, checkout.html y style.css), descargados de JupyterLab con File, Download. Con ellos, la salida de la auditoría y de la comprobación de contraste antes y después, y un párrafo corto con sus propias palabras sobre qué problema encontrado por la prueba arreglaron primero y por qué. Nada se corrige automáticamente: el párrafo muestra si se entendieron los números. Para un trabajo más sólido, pide que relacionen cada arreglo con una nota de un observador o con una tarea de tasa de éxito baja, y que digan qué no puede mostrar la prueba con solo doce personas.

Una lección básica en este laboratorio

Usability Testing Basics es una lección pequeña que se trabaja en este laboratorio. En ella el estudiante lista la carpeta de trabajo y lee las notas de los observadores, comprueba el contraste de los colores de la tienda, audita las páginas, lee la tasa de éxito, el tiempo mediano y la puntuación del cuestionario de la prueba, cuenta los errores y vuelve a ejecutar la auditoría después de un cambio propio.

Las cuentas personales gratuitas la tienen en el módulo Basics, que está en Inicio, y cada centro puede copiarla desde la carpeta Basics de la Biblioteca. Es pequeña a propósito: enseña a un docente qué es una lección trabajada en un laboratorio, y el laboratorio hace el resto. Cópiala en un módulo tuyo para cambiarla.

El código en GitHub

El archivo compose no tiene Dockerfile: ejecuta una sola imagen pública estándar, scipy-notebook de los Jupyter Docker Stacks, fijada a una etiqueta con fecha, con su propia cuenta sin privilegios y 512 MB de memoria. La imagen tiene licencia BSD-3-Clause y nosotros no la distribuimos. El archivo escribe la tienda, los datos de la prueba y los scripts a partir de una semilla fija al arrancar, así que cada copia tiene los mismos números y no se descarga nada, y sirve la tienda con el servidor web sencillo de Python en segundo plano. Los límites son honestos: la tienda son tres archivos pequeños, la prueba es inventada y pequeña, la auditoría comprueba algunos problemas comunes y no todos, no hay más navegador en el laboratorio que el tuyo, y no se puede instalar nada desde internet. No se guarda nada cuando el laboratorio se detiene, así que el estudiante descarga antes sus archivos.

Ponerlo como tarea

Indica en la tarea qué hay que entregar.

  1. Crea el laboratorio. En tu módulo añade una tarea y elige la tarjeta «Laboratorio de contenedores», y después «En un repositorio de GitHub». Indica https://github.com/mitsurutech/lab-usability con la rama main. El archivo compose es el predeterminado, compose.yaml. Haz un fork del repositorio antes si quieres modificarlo, por ejemplo para escribir otra tienda u otros resultados de prueba.
  2. Publica y pruébalo. «Publicar» fija el commit que te mostraron, así que un cambio posterior en el repositorio no altera un laboratorio que ya has asignado. Inicia primero tu propia copia.
  3. Asígnalo. Asígnalo como cualquier tarea, con una fecha de entrega si quieres, e indica en la tarea qué hacer y qué entregar.
  4. Califica lo entregado. Abre la copia de un alumno y el trabajo que ha entregado, califícalo y devuélvelo con un motivo si necesita más.

Prueba este laboratorio, y lo que cuesta

Con una cuenta personal gratuita puedes seguir las lecciones básicas de este laboratorio, con crédito gratuito suficiente cada mes para seguir la mayoría de las lecciones y sin tarjeta. Para una clase, un centro tiene gratis sus primeros 365 días, hasta 50 alumnos, y después paga por alumno y año, con todos los laboratorios incluidos y el profesorado gratis.

Preguntas frecuentes

¿Por qué no hay token ni contraseña que escribir?
A la página web de un laboratorio solo se llega por la puerta de la plataforma, que ya sabe quién eres y deja pasar solo a ti y al personal que enseña tu módulo. Por eso JupyterLab se inicia sin token. No lo ejecutes así en una máquina a la que pueda llegar otra persona.
¿Por qué el terminal usa docker exec jupyter?
El terminal del laboratorio lleva curl, psql y algunos clientes más, pero no Python. docker exec jupyter ejecuta una orden dentro del contenedor del laboratorio, que tiene Python y todas las bibliotecas. JupyterLab tiene también su propio terminal, en File, New, Terminal.
¿Por qué la vista previa no cambia cuando guardo un archivo?
La vista previa es un servidor estático sobre la carpeta de la tienda, así que muestra el archivo tal como está en el disco. Guarda en JupyterLab y actualiza la pestaña de la vista previa; si sigue saliendo la página antigua, actualízala otra vez sin la caché.
¿Pueden los estudiantes cambiar los datos de la prueba o añadir una página?
Pueden editar cualquier cosa de la carpeta de trabajo, pero no desde internet, a la que una copia no llega. Para dar a cada estudiante otra tienda u otra prueba, haz un fork del repositorio, cambia lo que escribe el archivo compose y asigna el fork como laboratorio.