1. Fácil de usar, sin pensar
La usabilidad mide lo fácil que resulta usar una interfaz: si el usuario consigue lo que quería, cuánto tarda, cuántos errores comete y cómo se siente al hacerlo. El libro clásico de Steve Krug sobre el tema lo resume en su título: «No me hagas pensar». Cada vez que alguien duda de dónde pulsar, qué significa un icono o por qué no se envía un formulario, la interfaz le está haciendo trabajar, y en la web la paciencia es corta: si algo cuesta, el usuario se va a la competencia.
Una web usable es como una buena señalización
2. Las diez heurísticas de Nielsen
Jakob Nielsen formuló en los años noventa diez principios generales de usabilidad que siguen siendo la herramienta más usada para revisar una interfaz. Una evaluación heurística consiste en que varios revisores recorran la web anotando qué principios se incumplen y con qué gravedad.
| Heurística | Ejemplo en la web |
|---|---|
| 1. Visibilidad del estado del sistema | Un indicador de carga, el paso 2 de 4 de la compra, «Guardado» |
| 2. Relación con el mundo real | Hablar como el usuario: «Carrito», no «Contenedor de artículos» |
| 3. Control y libertad | Poder deshacer, cancelar o vaciar el carrito fácilmente |
| 4. Consistencia y estándares | El logo lleva al inicio, el carrito está arriba a la derecha |
| 5. Prevención de errores | Desactivar fechas pasadas en un calendario de reservas |
| 6. Reconocer mejor que recordar | Mostrar los últimos productos vistos en lugar de obligar a buscarlos |
| 7. Flexibilidad y eficiencia | Atajos de teclado y filtros para los usuarios expertos |
| 8. Diseño estético y minimalista | Cada elemento que sobra compite con lo importante |
| 9. Ayudar a reconocer y corregir errores | «El código postal debe tener 5 cifras» junto al campo, no «Error 422» |
| 10. Ayuda y documentación | Una sección de preguntas frecuentes y ayuda en el contexto |
3. Navegación y formularios
Navegación
- Menús con pocas opciones, nombradas con palabras del usuario, y la sección actual resaltada.
- Un buscador visible en webs con mucho contenido, que tolere erratas y muestre resultados útiles cuando no encuentra nada.
- Migas de pan en webs con varios niveles y un pie de página con los enlaces secundarios.
- En el móvil, el menú hamburguesa esconde las opciones: si hay tres o cuatro secciones principales, mejor una barra de navegación visible.
Formularios
Los formularios son donde más usuarios abandonan, porque es donde más se les pide. Cada campo que eliminas aumenta el número de personas que terminan. Algunas reglas con mucho efecto:
- Pide solo lo imprescindible y explica para qué lo necesitas.
- Etiquetas visibles encima de los campos; el texto de ejemplo (placeholder) no sustituye a la etiqueta.
- El tipo de campo y el
autocompletecorrectos: el móvil muestra el teclado adecuado y el navegador rellena los datos guardados. - Valida al salir de cada campo, no con cada tecla ni solo al final, y explica cómo corregir el error.
- Botones con verbos que digan lo que pasará: «Crear cuenta», «Pagar 49,90 €».
4. La velocidad también es usabilidad
Una página que tarda en cargar o que se mueve mientras intentas pulsar un botón es una página difícil de usar. Google mide la experiencia real de los usuarios con tres indicadores, las Core Web Vitals, que además influyen en el posicionamiento:
| Indicador | Qué mide | Bueno si |
|---|---|---|
| LCP (Largest Contentful Paint) | Cuánto tarda en verse el elemento principal | Menos de 2,5 s |
| INP (Interaction to Next Paint) | Cuánto tarda la página en responder a una acción | Menos de 200 ms |
| CLS (Cumulative Layout Shift) | Cuánto se mueven los elementos mientras carga | Menos de 0,1 |
En el móvil, además, los objetivos táctiles deben medir al menos unos 44 × 44 píxeles y estar separados, y lo importante debe quedar al alcance del pulgar. Lighthouse, en las DevTools, audita rendimiento, accesibilidad, buenas prácticas y SEO de cualquier página en un minuto.
5. Probar con usuarios reales
Nada sustituye a ver a una persona usando tu web. Una prueba de usabilidad sencilla consiste en pedir a cinco usuarios representativos que realicen tareas concretas («compra un curso para tu hijo») mientras piensan en voz alta, sin ayudarles. Según Nielsen, con cinco personas ya aparecen la mayoría de los problemas importantes. Se mide si completan la tarea, cuánto tardan y dónde dudan, y al final se les puede pasar el cuestionario SUS.
- Pruebas A/B: dos versiones de una página a grupos distintos de usuarios reales, para ver cuál funciona mejor.
- Analítica: dónde abandonan los usuarios, qué buscan y no encuentran (respetando su privacidad y el consentimiento de cookies).
- Mapas de calor: dónde hacen clic y hasta dónde bajan en la página.
Tú no eres el usuario
6. Retos
Dos mejoras pequeñas con un gran efecto: un formulario que se rellena casi solo y unas migas de pan que orientan al usuario.
Mejora el formulario de datos de envío: cada campo con su etiqueta visible (<label>, no solo placeholder); el tipo de campo adecuado para el email (email) y el teléfono (tel); autocompletado del navegador con autocomplete (name, email, tel, street-address y postal-code); el código postal con teclado numérico en el móvil (inputmode="numeric") y pattern de 5 cifras; y un botón que diga lo que hace («Pagar 49,90 €») en lugar de «Enviar».
Añade unas migas de pan que indiquen dónde está el usuario: Inicio (/) › Cursos (/cursos) › Diseño de Interfaces Web (página actual). Usa un <nav> con aria-label="Migas de pan" que contenga una lista ordenada; los dos primeros niveles son enlaces y el último, que es la página actual, lleva aria-current="page".