Qué es la usabilidad de una interfaz
La usabilidad mide con qué facilidad y con qué acierto una persona consigue su objetivo con una interfaz. Los principios de usabilidad son reglas generales que ayudan a ver por qué una pantalla confunde.
Piensa en una máquina de billetes del metro. Alguien pulsa un botón, no pasa nada, y vuelve a pulsar. Un principio te dice qué falta, y con eso sabes qué arreglar.
Al terminar esta lección
Nota
Puedo juzgar una interfaz con principios de usabilidad y decir qué problema tiene cada pantalla.
Palabras clave
| Palabra | Qué significa |
|---|---|
| Interfaz | lo que ves y pulsas para usar un sistema |
| Usabilidad | lo fácil y eficaz que es usar algo |
| Visibilidad | el estado del sistema se ve en todo momento |
| Respuesta | el sistema contesta a cada acción |
| Coherencia | lo mismo se llama y se ve igual en todas partes |
| Prevención de errores | el diseño evita el fallo antes de que ocurra |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
La visibilidad dice dónde estás y qué pasa
El principio de visibilidad pide que la interfaz muestre su estado. Quien la usa debe saber en qué paso va y qué ha hecho ya el sistema.
Una barra de pasos en un pago es visibilidad. También lo es una cifra de artículos junto a la cesta. Sin ellas, la persona adivina, y adivinar cansa.
Ejemplo resuelto: del problema al arreglo
| Problema visto | Principio | Arreglo posible |
|---|---|---|
| No se ve cuántos pasos quedan para pagar | Visibilidad | Una barra que dice paso 2 de 3 |
| Pulsas Comprar y no ocurre nada visible | Respuesta | Un mensaje: tetera añadida a la cesta |
| Un botón dice Pagar y otro Comprar | Coherencia | Usar la misma palabra en toda la tienda |
| Un clic borra el pedido entero | Prevención de errores | Pedir confirmación antes de borrar |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
La respuesta confirma cada acción
El principio de respuesta pide que el sistema conteste a lo que haces. Un botón que cambia de aspecto al pulsarlo, o un mensaje de "pedido enviado", son respuesta.
La respuesta debe ser rápida y clara. Si el sistema tarda, un indicador de carga dice que sigue trabajando. Sin él, la persona pulsa otra vez y puede pedir dos veces.
La coherencia y la prevención de errores
La coherencia pide que lo igual parezca igual. Si Pagar es verde en una página y gris en otra, la persona duda. Una palabra, un color y un sitio para cada función.
La prevención de errores diseña para que el fallo no ocurra. Una casilla que pide confirmar antes de borrar vale más que un mensaje de disculpa después.
Un error frecuente
Advertencia
Mucha gente cree que un principio es una opinión sobre lo bonita que es una pantalla. No lo es. Cada principio se comprueba con un hecho: si la pantalla muestra su estado, si contesta y si evita el fallo. Anota el hecho, no el gusto.
Mirar la tienda del laboratorio con los principios
El laboratorio tiene una tienda de teteras difícil de usar a propósito, y las notas de doce personas que la probaron. Los comandos escriben textos y nombres en inglés, porque así están en el laboratorio.
Mira las notas y busca un principio detrás de cada una. No arregles nada todavía: solo observa.
Leer las notas de los observadores
docker exec jupyter cat notes.mdSe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Buscar el mensaje de error del pago
docker exec jupyter grep -n "Error" shop/checkout.htmlSe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Contar las líneas con un botón
docker exec jupyter grep -c "<button" shop/index.htmlSe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Ejemplo resuelto: notas, principios y hechos
| Lo que anotaron | Principio | Hecho que lo prueba |
|---|---|---|
| P3 pulsó Buy cuatro veces | Respuesta | El botón no cambia ni avisa al pulsarlo |
| P8 preguntó qué es Error 7 | Respuesta | La línea 17 solo dice Error 7, sin explicar nada |
| P5 no sabía adónde iba cada enlace | Coherencia | Muchos enlaces dicen lo mismo, click here |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.