Fundamentos de las pruebas de usabilidad

Una tienda tiene las teteras que la gente quiere, un precio justo y buen nombre, y aun así se van al llegar a la caja. Nadie es grosero. Simplemente no supieron qué pulsar. Una página difícil de usar pierde clientes en silencio, y la única forma de saberlo es mirar cómo lo intentan unos cuantos.

• Usabilidad: lo fácil y lo bien que la gente llega a su objetivo con una página.
• Accesibilidad: que también puedan usarla personas con poca vista, con lector de pantalla, solo con teclado o con un móvil pequeño.
• Relación de contraste: cuánto se diferencia el color del texto del color del fondo, de 1 (iguales) a 21 (negro sobre blanco).
• Texto alternativo (alt): palabras que sustituyen a una imagen cuando no se puede ver.
• Tasa de éxito: la parte de las personas que terminaron una tarea.
• Mediana: el valor del medio cuando se ordenan los tiempos.

ls lista la carpeta de trabajo: la tienda, las dos tablas de resultados, las notas, el cuaderno de inicio y los scripts. cat notes.md muestra lo que anotaron los observadores mientras doce personas probaban la tienda. Léelas junto a la vista previa: texto gris difícil de leer, un botón «Buy» pulsado cuatro veces, alguien que pregunta qué es «Error 7». Las notas todavía no son números, pero te dicen dónde mirar.

El script lee los colores de shop/style.css y calcula la relación de contraste de cada pareja de texto y fondo. La pauta de contraste habitual pide al menos 4,5 para el texto normal. El texto del cuerpo, gris sobre blanco, saca 2,85, que es muy poco. El titular, gris oscuro sobre blanco, saca 15,91, que sobra. Otras tres parejas suspenden, entre ellas el color de los enlaces, con 1,89.

La auditoría lee las dos páginas y la hoja de estilos y cuenta cuatro problemas comunes. En la página de inicio, 3 de 4 imágenes no tienen texto alternativo y 5 de 6 enlaces dicen solo cosas como «click here» o «read more», así que quien escucha los enlaces no oye adónde va ninguno. En la página de pago, 3 de 4 cajas no tienen etiqueta, y el único mensaje de error es solo un código. En la hoja de estilos, una regla quita el contorno del foco, la línea que muestra a quien usa el teclado dónde está.

Doce personas probaron cuatro tareas cada una. pandas agrupa las filas por tarea y da la tasa de éxito y el tiempo mediano. Encontrar una tetera salió bien para todos, con una mediana de 27,5 segundos. Pagar fue lo difícil: solo el 50 por ciento terminó la última tarea, con una mediana de 110 segundos. Se usa la mediana porque una persona muy lenta subiría la media.

Después de las tareas, cada persona contestó diez preguntas de 1 a 5. La forma habitual de puntuar convierte las diez respuestas en un número de 0 a 100 para cada persona. Las doce puntuaciones van de 32,5 a 80,0, con una media de 55,0, y las puntuaciones en torno a 68 se suelen leer como normales, así que a la gente esta tienda le resultó más difícil que la mayoría. El segundo script cuenta los errores: la última tarea tiene 34, más que ninguna otra.

Elige un problema, por ejemplo el contorno del foco: en JupyterLab abre shop/style.css, cámbialo, guarda y actualiza la vista previa. Después ejecuta el script de abajo. No arregla nada por sí mismo: vuelve a lanzar la auditoría y la comprobación de contraste, así que los números solo cambian si cambió tu edición. Un arreglo que no se ve ni en los números ni en la vista previa es un arreglo del que no puedes estar seguro.

Abre JupyterLab desde la barra y haz doble clic en start.ipynb. Carga las dos tablas y calcula las mismas tasas de éxito, tiempos y errores, una celda a la vez. Haz clic en una celda y pulsa Mayús e Intro para ejecutarla. La última celda es para tu propia pregunta: ¿la persona más lenta da también la puntuación más baja en el cuestionario?