UT6 — Implementación de la usabilidad en la web¶

Índice¶

1. UT6-1. Análisis de la usabilidad. Técnicas
2. UT6-2. Identificación del objetivo de la web
3. UT6-3. Tipos de usuario
4. UT6-4. Barreras identificadas por los usuarios
5. UT6-5. Información fácilmente accesible
6. UT6-6. Velocidad de conexión
7. UT6-7. Importancia del uso de estándares externos
8. UT6-8. Navegación fácilmente recordada frente a navegación redescubierta
9. UT6-9. Facilidad de navegación en la web
10. UT6-10. Verificación de la usabilidad en diferentes navegadores y tecnologías
11. UT6-11. Herramientas y test de verificación
12. Glosario rápido
13. Repaso: 8-10 preguntas para autoevaluarte
14. De dónde sale esto (fuentes de la carpeta)

De qué va esta unidad¶

Imagina que entras en la web de una cafetería —pongamos el Café Central, el cliente ficticio con el que trabajamos en las prácticas de este módulo— buscando el horario y el teléfono para reservar una mesa. Si en diez segundos no lo encuentras, ¿qué haces? Casi seguro que cierras la pestaña y buscas otra cafetería. Eso, exactamente eso, es lo que estudia la usabilidad: que las personas consigan lo que han venido a buscar sin esfuerzo, sin frustrarse y sin tener que pensar demasiado.

En las unidades anteriores has aprendido a planificar interfaces, a maquetar con estilos, a meter vídeo e imágenes, a programar interactividad y a hacer sitios accesibles para personas con discapacidad. Esta unidad cierra el círculo: de nada sirve un sitio bonito, accesible y cargado de contenido multimedia si la gente no consigue moverse por él. Vamos a analizar la usabilidad de páginas web reales, a entender qué buscan los distintos tipos de usuario, qué les hace abandonar una web (barreras), por qué la velocidad importa tanto como el diseño, por qué seguir estándares nos salva de más de un disgusto, y cómo se verifica —con técnicas y herramientas concretas— que un sitio es realmente usable en distintos navegadores, dispositivos y periféricos.

Como perfil de desarrollo web de un ciclo DAW, esto te va a acompañar toda tu carrera: tanto si acabas haciendo frontend como si acabas en un equipo de producto, entender la usabilidad es lo que separa a quien programa páginas de quien construye productos que la gente quiere usar.

Qué deberías saber hacer al terminar (resultados de aprendizaje)¶

El resultado de aprendizaje de esta unidad (RA6) dice que desarrollarás interfaces web amigables analizando y aplicando las pautas de usabilidad establecidas. En cristiano, al terminar la unidad deberías ser capaz de:

• Analizar la usabilidad de una web real y detectar sus problemas concretos.
• Valorar por qué usar estándares (HTML, CSS, normas ISO) importa para la usabilidad, no solo para la accesibilidad.
• Modificar una interfaz para adaptarla al objetivo del sitio y al tipo de usuario al que se dirige.
• Comprobar que un documento web se navega bien con distintos periféricos (ratón, teclado, pantalla táctil...).
• Conocer y aplicar distintas técnicas para verificar la usabilidad: evaluación heurística, test con usuarios, encuestas, eye tracking.
• Verificar que la interfaz que has creado funciona igual de bien en distintos navegadores y tecnologías.

UT6-1. Análisis de la usabilidad. Técnicas¶

Antes de analizar nada conviene tener clara una definición. La ISO (International Organization for Standardization) define la usabilidad como "el grado en que un producto puede ser utilizado, en un contexto de uso específico, por determinados usuarios, para conseguir objetivos específicos, con efectividad, eficiencia y satisfacción". Dicho de otra manera: usabilidad es que una persona con capacidades medias pueda usar algo —una web, un mando a distancia, una puerta giratoria— para lo que sirve, sin frustrarse mientras lo hace. Esta segunda definición es de Steve Krug, autor del clásico "No me hagas pensar", uno de los libros de cabecera de la disciplina junto con los de Jakob Nielsen, considerado el padre de la usabilidad web.

Hay una frase que resume muy bien esta unidad: "la usabilidad es una cualidad de la que solo se percibe su falta". Cuando un sitio es usable, no lo notas; cuando no lo es, te quejas.

¿Cómo se analiza si una web es usable? Los materiales de la unidad recogen varias técnicas, que se complementan entre sí:

• Evaluación heurística. Una persona experta en usabilidad revisa la interfaz siguiendo un conjunto de principios o "reglas de andar por casa" (de ahí lo de heurística: viene del griego y significa "medio para descubrir"). Es rápida y barata, y muy útil para proponer soluciones alternativas.
• Test de usabilidad (o test con usuarios). Se observa a usuarios reales realizando tareas reales sobre el sitio. Es la técnica más fiable para detectar dónde están exactamente los problemas, aunque requiere más tiempo y organización. Los dos primeros métodos se complementan: el test de usuarios muestra los problemas y el análisis heurístico es más eficiente para proponer soluciones.
• Encuestas, una vez publicada la página, para medir satisfacción, saber qué navegador o velocidad de conexión usan los visitantes habituales o qué secciones les interesan más. No sirven, en cambio, para resolver problemas concretos de usabilidad.
• Eye tracking (seguimiento ocular): una técnica que registra dónde se fija la mirada del usuario mientras navega. Se usa también en marketing y en la colocación de productos en los lineales de un supermercado. Confirma algo muy importante que dijo Nielsen: la mayoría de usuarios no lee una página de arriba abajo, sino que la hojea («escanea») buscando elementos que llamen su atención.

Dentro de la evaluación heurística, la referencia obligada hoy en día siguen siendo las 10 heurísticas de usabilidad de Jakob Nielsen, desarrolladas originalmente junto con Rolf Molich en 1990 y refinadas por Nielsen en 1994 hasta la lista que usamos hoy; revisadas por el Nielsen Norman Group (NN/g) por última vez en enero de 2024. Las iremos citando a lo largo de esta unidad, pero aquí tienes la lista completa: 1) visibilidad del estado del sistema, 2) correspondencia entre el sistema y el mundo real, 3) control y libertad del usuario, 4) consistencia y estándares, 5) prevención de errores, 6) reconocimiento antes que recuerdo, 7) flexibilidad y eficiencia de uso, 8) diseño estético y minimalista, 9) ayuda a reconocer, diagnosticar y recuperarse de errores, y 10) ayuda y documentación.

Figura: los 10 pósteres resumen de las heurísticas de usabilidad de Jakob Nielsen, tal como los distribuye el Nielsen Norman Group. Cada heurística tiene su propio póster con definición y consejos. Origen: WEB - NNg - 10 heurísticas de usabilidad.pdf.

Figura: los tres objetivos habituales de un test de usabilidad —encontrar problemas, descubrir oportunidades y aprender sobre el comportamiento de los usuarios—. Origen: WEB - NNg - Test de usabilidad 101.pdf.

Ejemplo actual — herramientas de análisis remoto. Hoy en día empresas de diseño usan plataformas como Maze, Lookback o UserTesting para lanzar tests de usabilidad remotos y no moderados en cuestión de horas, algo que hace veinte años exigía citar físicamente a los participantes en un laboratorio.

En las noticias — rediseños tras estudios de usabilidad. Es habitual que medios digitales y bancos anuncien rediseños de sus webs o apps "basados en estudios de usabilidad con usuarios reales" cuando lanzan una nueva versión de su interfaz. Según se informa en este tipo de comunicados, el proceso suele incluir tanto evaluación heurística por parte de un equipo de diseño como sesiones de test con clientes reales antes de publicar el cambio definitivo.

Ideas clave de esta sección¶

• Usabilidad ≠ estética: es que la gente consiga sus objetivos con eficacia, eficiencia y satisfacción (ISO).
• Evaluación heurística y test de usabilidad se complementan; las encuestas y el eye tracking aportan matices.
• Las 10 heurísticas de Nielsen son el marco de referencia más citado en evaluación heurística.

UT6-2. Identificación del objetivo de la web¶

Todo diseño de interfaz empieza por una pregunta que parece obvia pero que muchas veces se olvida: ¿para qué existe esta web?. Según los materiales de la unidad, entre los objetivos que hay que tener en cuenta al diseñar pensando en la usabilidad están:

• Permitir una búsqueda rápida, cómoda y eficiente de la información.
• Facilitar la navegación de los usuarios por el sitio.
• Facilitar la interactividad de los usuarios con el sitio.
• Tener en cuenta las necesidades reales de esos usuarios.

Esto conecta directamente con la norma ISO 9241-151 (publicada en julio de 2008, que detalla principios para el diseño de sitios web usables), cuya primera área de trabajo es precisamente "decisiones de diseño de alto nivel y estrategia de diseño", y se pregunta: ¿cuál es el objetivo del sitio y cómo se deja claro a sus usuarios? y ¿quiénes son los usuarios y cuáles son sus objetivos?.

No es lo mismo diseñar la web de una tienda online, donde el objetivo final es vender, que la de una ONG, donde el objetivo es conseguir donaciones o voluntariado, o la de una administración pública, donde el objetivo es que el ciudadano complete un trámite. Cada objetivo condiciona qué elementos deben estar más visibles, qué llamadas a la acción hay que destacar y qué información puede quedar en un segundo plano.

Ejemplo actual — el Café Central. Si estuviéramos diseñando la web de nuestro cliente ficticio, el Café Central, el objetivo principal probablemente no sería "vender online", sino conseguir que la gente decida ir a tomar algo: eso significa que el horario, la ubicación y quizá la carta tienen que estar a un clic de la portada, por delante de la historia del local o la biografía del propietario.

En las noticias — rediseños centrados en el objetivo del sitio. Cuando una empresa de transporte o una aerolínea rediseña su web, suele explicar que el cambio busca "simplificar la compra del billete", dejando el objetivo comercial principal —vender el billete— más accesible desde la portada, en detrimento de contenidos informativos que antes competían por el espacio.

Ideas clave de esta sección¶

• Antes de diseñar hay que tener clarísimo el objetivo del sitio: es la base de todas las decisiones posteriores.
• La ISO 9241-151 sitúa esta pregunta en el primer nivel de decisiones de diseño.

UT6-3. Tipos de usuario¶

Cada usuario es un mundo, literalmente. Los materiales de la unidad insisten en que, para diseñar pensando en las personas que van a usar el sitio, hay que tener en cuenta sus características, sus expectativas, sus capacidades y aptitudes, qué información necesitan, cómo acceden a la web, qué experiencia previa tienen, qué conocimientos poseen o si tienen alguna discapacidad. También pesan las limitaciones técnicas: qué plataforma usan y qué tipo de conexión tienen.

Una misma web puede tener que servir a distintos perfiles de usuario: visitante o invitado, usuario registrado, colaborador, usuario experto o administrador. A cada perfil se le suele presuponer un grado de experiencia distinto en el uso de la web, pero en cualquier caso hay que garantizar la usabilidad para todos ellos.

Además, se puede clasificar a los usuarios por su comportamiento ante ciertos elementos de diseño. Los materiales recogen ejemplos muy reconocibles:

• Usuarios que abandonan una página si un elemento animado tarda más de tres segundos en descargarse y no pueden saltárselo.
• Usuarios que abandonan páginas con demasiados elementos decorativos porque tardan en cargar.
• Usuarios a los que les molestan las ventanas emergentes que interrumpen la lectura.
• Usuarios que huyen de párrafos de más de cinco líneas que ocupan toda la ventana del navegador y buscan sitios más fáciles de leer.

Ejemplo actual — perfiles en una misma plataforma. Piensa en una plataforma como WordPress o Canva: la misma interfaz sirve a un usuario que solo quiere ver una página ya publicada (sin cuenta), a alguien que edita contenido de forma habitual (registrado) y a un administrador que gestiona plugins, permisos y configuración avanzada. El reto de diseño es que cada perfil vea justo la complejidad que necesita, ni más ni menos.

En las noticias — apps que "se adaptan" al usuario. Es habitual que aplicaciones de aprendizaje de idiomas o de finanzas personales anuncien que ajustan la interfaz según el nivel de experiencia detectado del usuario (por ejemplo, mostrando tutoriales solo a quien empieza). Según se informa en ese tipo de anuncios de producto, la idea es no sobrecargar a usuarios avanzados con ayudas que ya no necesitan.

Ideas clave de esta sección¶

• No hay "un" usuario: hay perfiles (visitante, registrado, colaborador, experto/administrador) con necesidades distintas.
• El comportamiento ante la espera, la decoración excesiva o los textos largos permite anticipar el abandono.

UT6-4. Barreras identificadas por los usuarios¶

Una barrera de usabilidad es cualquier obstáculo que hace que un usuario no consiga completar lo que ha venido a hacer, o que lo consiga con más esfuerzo del razonable. A partir de los comportamientos vistos en el punto anterior, podemos convertir cada "motivo de abandono" en una barrera concreta que hay que evitar en el diseño:

• Tiempos de carga excesivos en elementos multimedia (animaciones, vídeos, imágenes pesadas) sin posibilidad de saltarlos.
• Sobrecarga decorativa: elementos gráficos que no aportan información y que ralentizan la página.
• Interrupciones no solicitadas, como ventanas emergentes que tapan el contenido que se está leyendo.
• Bloques de texto muy largos sin estructurar, que desaniman la lectura.
• Lenguaje poco cercano al usuario: jerga técnica, tecnicismos legales o vocabulario demasiado culto para el público al que se dirige el sitio.
• Enlaces rotos o engañosos, que llevan a un contenido distinto del esperado.

Sobre el lenguaje, los materiales insisten mucho: hay que usar un vocabulario cercano al usuario, con frases sencillas, en segunda persona ("si tienes alguna pregunta..." en lugar de "en caso de que algún usuario tenga alguna pregunta..."), evitando el subjuntivo, el lenguaje figurado ambiguo y las estructuras complejas. No es lo mismo un portal de jurisprudencia para profesionales del derecho que uno de divulgación legal para el público general: el vocabulario "cercano" cambia según a quién te dirijas.

Ejemplo actual — banners de cookies. Un ejemplo muy actual de barrera de usabilidad son los avisos de cookies que tapan el contenido y obligan a interactuar antes de poder leer nada, especialmente cuando el botón de "rechazar todo" está escondido o requiere varios clics frente al "aceptar todo", que está siempre a la vista.

En las noticias — sanciones por diseño engañoso (dark patterns). En los últimos años distintas autoridades europeas de protección de datos han sancionado a empresas por diseñar interfaces de cookies o de cancelación de suscripción que dificultan deliberadamente que el usuario ejerza sus derechos. Según se ha informado en varios casos, el problema no era solo legal: era, ante todo, una barrera de usabilidad construida a propósito.

Ideas clave de esta sección¶

• Cada "motivo de abandono" identificado en los usuarios se traduce en una barrera de diseño que hay que evitar.
• El lenguaje cercano y sencillo es, en sí mismo, una forma de eliminar barreras.

UT6-5. Información fácilmente accesible¶

Aquí "accesible" no se refiere (solo) a la accesibilidad para personas con discapacidad que viste en la UT5, sino a algo más amplio: que cualquier usuario, tenga los conocimientos técnicos que tenga, encuentre la información que busca de forma cómoda y rápida. Para lograrlo, los materiales de la unidad señalan dos claves:

1. Una buena organización de los contenidos del sitio.
2. Un buen diseño del sistema de navegación.

Tanto si el sitio es sencillo como si tiene cientos de páginas, el usuario debe poder llegar a la información que necesita sin perderse. Si el sistema de navegación es engorroso, o el buscador interno no encuentra lo que el usuario sabe que existe, la consecuencia es siempre la misma: abandono.

Conviene comprobar sistemáticamente tres cosas en cualquier sitio web:

• Que todos los contenidos son accesibles desde el menú principal o desde algún enlace.
• Que no existen enlaces que no llevan a ninguna parte.
• Que todos los enlaces muestran el contenido que se esperaba al pulsarlos.

Los enlaces rotos, o los que llevan a un contenido inesperado, dan una imagen muy pobre de un sitio web. Y hay un consejo muy práctico que se repite en los materiales: evita poner enlaces a páginas "en construcción"; mejor no publicar el enlace hasta que el contenido esté terminado.

Otra directriz relacionada con hacer accesible la información es dar respuesta inmediata a las acciones del usuario y avisarle siempre que ha ocurrido algo tras interactuar con la interfaz (por ejemplo, tras enviar un formulario). El usuario nunca debe quedarse preguntándose "¿ha pasado algo o no?".

Ejemplo actual — mega menús de e-commerce. Tiendas online grandes como Amazon o Zalando organizan miles de productos mediante mega menús desplegables con categorías y subcategorías visibles de un vistazo, en lugar de obligar al usuario a hacer clic varias veces "a ciegas" para descubrir dónde está lo que busca.

En las noticias — buscadores internos con IA. Numerosos medios de comunicación y tiendas online han incorporado en los últimos años buscadores internos basados en lenguaje natural (a menudo apoyados en modelos de IA) para que el usuario encuentre contenido aunque no use las palabras exactas del título original. Según se informa, el objetivo declarado suele ser precisamente reducir el abandono por no encontrar la información.

Ideas clave de esta sección¶

• Información accesible = buena organización de contenidos + buen sistema de navegación.
• Comprobar siempre: nada inalcanzable, ningún enlace roto, ningún enlace engañoso.

UT6-6. Velocidad de conexión¶

Este es uno de los puntos donde más ha cambiado el discurso desde que se escribieron los apuntes clásicos de la unidad (en torno a 2013, según sus metadatos) hasta hoy, así que aquí priorizamos la fuente más reciente, un artículo de web.dev (el portal de buenas prácticas web de Google), sin perder de vista lo que ya se sabía entonces.

Ya en los materiales "clásicos" se avisa de que hay usuarios que abandonan directamente una página si un elemento tarda más de tres segundos en descargarse, y se recomienda incluso hacer encuestas para averiguar qué velocidad de conexión tienen los usuarios habituales de un sitio, porque eso ayuda a decidir qué elementos incorporar y cuáles sería mejor suprimir.

La fuente actual va más allá y lo convierte en una cuestión de negocio, no solo de comodidad:

• El rendimiento retiene usuarios. Los sitios que cargan rápido y responden con rapidez a las acciones del usuario atraen y retienen mejor que los que van lentos. La BBC descubrió que perdía un 10% adicional de usuarios por cada segundo extra que su sitio tardaba en cargar.
• El rendimiento mejora las conversiones. Varios casos de estudio documentados por Google muestran mejoras reales al optimizar las llamadas Métricas web esenciales (Core Web Vitals): Vodafone consiguió un aumento del 31% en el LCP (la métrica que mide cuánto tarda en aparecer el contenido principal de la página) que se tradujo en un 8% más de ventas; Rakuten 24 aumentó sus ingresos por visitante un 53,37% y sus conversiones un 33,13% tras invertir en estas métricas; redBus mejoró su interacción (medida con la métrica INP, Interaction to Next Paint) y sus ventas subieron un 7%.
• El rendimiento es experiencia de usuario, no solo un dato técnico. Un estudio de consumidores citado por web.dev muestra que la respuesta de estrés ante los retrasos de carga de una página es comparable a la de ver una película de terror o resolver un problema matemático, y mayor que la de esperar en la cola de caja de una tienda física. Los dispositivos móviles, además, tienen menos CPU y memoria, así que son especialmente sensibles a sitios pesados.

Figura: la misma web cargando en una conexión lenta (fila superior, sigue en blanco a los 7 segundos) frente a una conexión rápida (fila inferior, el contenido aparece a los 2 segundos). Origen: WEB - web.dev - Por qué importa la velocidad.pdf.

Ejemplo actual — Core Web Vitals como factor de posicionamiento. Google usa las Métricas web esenciales (Core Web Vitals) como parte de los factores que tiene en cuenta para el posicionamiento en buscadores, así que una web lenta no solo pierde usuarios: también puede perder visibilidad en las búsquedas.

En las noticias — INP sustituye a FID. En marzo de 2024, Google sustituyó oficialmente la métrica FID (First Input Delay) por INP (Interaction to Next Paint) dentro de las Métricas web esenciales, para medir mejor la capacidad de respuesta real de una página a lo largo de toda la visita del usuario, no solo en la primera interacción. Fue un cambio comentado ampliamente en la comunidad de desarrollo web front-end.

Ideas clave de esta sección¶

• Los usuarios abandonan páginas lentas casi de inmediato; hoy existen métricas estándar (Core Web Vitals) para medirlo.
• La velocidad afecta a retención, conversión y posicionamiento, no solo a la "sensación" de calidad.

UT6-7. Importancia del uso de estándares externos¶

Usar lenguajes y normas estándar (HTML, XML, XHTML en su momento, y las normas ISO relacionadas con usabilidad) no es un capricho técnico: es una garantía de futuro. Si un sitio está construido con estándares, se adaptará mejor a futuros cambios tecnológicos, nuevas versiones de navegadores y nuevos dispositivos, y crecerá sin problemas. Si además se usan hojas de estilo separando el aspecto visual del contenido (como aprendiste en la UT2), el mantenimiento y la adaptación a distintas necesidades de los usuarios es mucho más sencillo.

Los materiales de la unidad recogen un conjunto de normas ISO relacionadas con la usabilidad que conviene conocer, aunque sea a nivel de "qué cubre cada una":

El uso de lenguajes que cumplen estándares garantiza, sobre todo, la continuidad del sitio: que siga funcionando cuando cambien los navegadores o aparezcan nuevos dispositivos. Y aunque usabilidad y accesibilidad no son lo mismo (una web usable no tiene por qué ser accesible para todo el mundo), cuando se diseña teniendo en cuenta la accesibilidad, el sitio termina siendo más usable para un mayor número de personas, en más situaciones y contextos.

<!-- Ejemplo propio: HTML5 semántico frente a "todo con <div>" -->
<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Ejemplo actual — el validador del W3C. El World Wide Web Consortium (W3C) mantiene un validador de marcado (validator.w3.org) que cualquier desarrollador puede usar de forma gratuita para comprobar que su HTML cumple el estándar. Es una herramienta habitual en los flujos de trabajo profesionales antes de publicar un sitio.

En las noticias — evolución rápida de los estándares CSS. En los últimos años, selectores CSS que llevaban tiempo esperando soporte, como :has(), han pasado a estar disponibles en todos los navegadores principales casi al mismo tiempo, gracias a que los fabricantes de navegadores colaboran cada vez más estrechamente en la implementación de los estándares del W3C. Esto reduce el riesgo de que una web deje de funcionar bien en un navegador concreto.

Ideas clave de esta sección¶

• Los estándares (HTML, CSS, normas ISO de usabilidad) garantizan continuidad ante cambios de navegador y dispositivo.
• Usabilidad y accesibilidad no son sinónimos, pero se refuerzan mutuamente.

UT6-8. Navegación fácilmente recordada frente a navegación redescubierta¶

Aviso: ninguna de las fuentes de la carpeta usa literalmente esta expresión. Lo más cercano en el material "clásico" es la máxima "reconocer es mejor que recordar", y la fuente actual que mejor la desarrolla es el artículo del Nielsen Norman Group sobre reconocimiento frente a recuerdo. Aquí explicamos esa relación tal como aparece en las fuentes.

Los apuntes clásicos, al hablar de sencillez de navegación, citan una frase de Bruno Munari que ya viste en la UT1: "cada uno ve lo que sabe". Si a un usuario se le presenta un sistema de navegación que le recuerda a situaciones que ya conoce, le costará mucho menos adaptarse. Y rematan la idea con una máxima muy directa: "reconocer es mejor que recordar". Si la ubicación de los elementos de navegación es consistente y persistente, y el lenguaje de los enlaces es claro, el usuario no tendrá que recordar dónde estaba la información: la reconocerá en cuanto la vea.

El artículo del NN/g sobre memoria y usabilidad desarrolla esta misma idea con psicología cognitiva. Distingue dos formas de recuperar información de la memoria:

• Recuerdo (recall): hay que reconstruir la información desde cero, con pocas pistas. El ejemplo clásico en una interfaz es iniciar sesión: el usuario tiene que recordar su usuario y su contraseña con apenas ninguna ayuda.
• Reconocimiento (recognition): basta con identificar como familiar algo que se muestra delante del usuario. El ejemplo clásico es un menú: el sistema muestra las opciones disponibles y el usuario solo tiene que reconocer la que busca.

El reconocimiento es más fácil que el recuerdo porque cuenta con más pistas: cuantas más pistas hay disponibles, más "activa" está esa información en la memoria y más fácil es recuperarla. Por eso las preguntas tipo test son más fáciles que las de respuesta abierta.

Aplicado a la navegación web, esto significa que un buen sistema de navegación no debería obligar al usuario a memorizar el camino que ha seguido para volver a encontrarlo la próxima vez (navegación que depende del recuerdo); debería, en cambio, ofrecer pistas visibles y reconocibles —menús persistentes, migas de pan, historiales, elementos recientes— que permitan redescubrir el camino sin esfuerzo cada vez que se visita el sitio, aunque no se recuerde exactamente dónde estaba cada cosa.

Figura: los carteles "Estás aquí" de los centros comerciales son el ejemplo clásico de diseño que favorece el reconocimiento: no hace falta recordar el plano completo del edificio para saber a dónde ir. Origen: WEB - NNg - 10 heurísticas de usabilidad.pdf.

Figura: Amazon (y la mayoría de tiendas online) muestra listas de productos vistos o comprados recientemente. El usuario no tiene que recordar qué estaba mirando: lo reconoce en cuanto lo ve. Origen: WEB - NNg - Reconocimiento frente a recuerdo.pdf.

Figura: ejemplo de lo contrario: iconos sin etiqueta de texto que obligan al usuario a recordar (o adivinar) qué hace cada uno, en vez de reconocerlo directamente. Origen: WEB - NNg - Reconocimiento frente a recuerdo.pdf.

Ejemplo actual — gestores de contraseñas y passkeys. El inicio de sesión es el ejemplo por excelencia de navegación basada en el recuerdo (hay que recordar usuario y contraseña). Desde 2023, Google, Apple y otras grandes plataformas han empezado a impulsar las passkeys, un sistema de acceso que sustituye la contraseña por reconocimiento biométrico o del dispositivo, precisamente para eliminar la carga de memoria que supone el recuerdo.

En las noticias — autocompletado e historiales de búsqueda. Los principales buscadores llevan años mostrando el historial de búsquedas recientes y sugerencias mientras el usuario escribe, convirtiendo una tarea de recuerdo puro (pensar los términos exactos) en una tarea de reconocimiento (elegir entre las sugerencias mostradas).

Ideas clave de esta sección¶

• "Reconocer es mejor que recordar" (DIW03) y "recognition rather than recall" (NN/g) apuntan a la misma idea.
• Una navegación bien diseñada se puede redescubrir con pistas visibles, sin depender de que el usuario la memorice.

UT6-9. Facilidad de navegación en la web¶

Al diseñar una interfaz web es importante que sea atractiva, pero es más importante que cumpla las expectativas de los usuarios en lo relativo a navegación, contenido y organización. Una interfaz se considera usable si el usuario es capaz de responder en todo momento a cinco preguntas: ¿Dónde estoy? ¿Cómo llegué aquí? ¿A dónde puedo ir después? ¿Qué puedo hacer ahora? ¿Cómo vuelvo atrás?

Para que esas preguntas tengan siempre respuesta fácil, el sistema de navegación debe cumplir varias propiedades:

• Consistencia. Los elementos de navegación deben ser coherentes en todas las páginas del sitio: mismo tema visual, mismos colores, mismo comportamiento al pasar el ratón por encima. Si una barra de navegación cambia de aspecto de una sección a otra, el usuario pierde la confianza en que sabe cómo funciona el sitio.
• Persistencia. Los elementos de navegación deben colocarse siempre en el mismo sitio (normalmente en la parte superior de la página, formando parte o justo debajo del encabezado). Que un usuario tenga que "buscar" el menú de navegación en un sitio distinto en cada página es un fallo grave: los materiales ponen como contraejemplo un sitio antiguo donde el menú estaba escondido en el pie de página, y además su primer enlace ("Home") estaba roto.
• Sencillez. El sistema de navegación debe dar siempre acceso a la página principal, y apoyarse en elementos reconocibles: el logotipo (que enlaza a portada), el mapa del sitio, el sistema que muestra el camino recorrido desde la portada —al que hoy se llama habitualmente migas de pan o breadcrumbs, aunque DIW03.pdf describe el elemento sin usar ese término— y el menú principal con las secciones del sitio.

<!-- Ejemplo propio: migas de pan con marcado accesible -->
<nav aria-label="Miga de pan">
  <ol>
    <li><a href="/">Inicio</a></li>
    <li><a href="/carta/">Carta</a></li>
    <li aria-current="page">Postres</li>
  </ol>
</nav>

Cuando el usuario está inmerso en un proceso con varios pasos (por ejemplo, una encuesta o un proceso de compra), es fundamental mantenerlo informado del progreso: cuántos pasos ha dado, cuántos le quedan, y permitirle volver atrás para corregir algo sin perder lo ya hecho. La idea de fondo, otra vez, es que el usuario debe sentir que tiene el control.

Por último, no hay que olvidar que la web es el mundo de los hiperenlaces, pero no todo el mundo navega solo con el ratón. Los navegadores modernos permiten usar el teclado para acceder a casi todo:

Los atajos de teclado ahorran mucho tiempo, pero solo los usan con soltura los usuarios más avanzados y las personas que no pueden manejar el ratón por alguna discapacidad visual o motora, o que usan teclados virtuales programables. Por eso conviene comprobar siempre que un sitio se puede recorrer enteramente con el teclado, sin depender del ratón.

Figura: el historial de búsquedas es una ayuda de navegación que reduce la carga de memoria del usuario dentro de un buscador. Origen: WEB - NNg - Reconocimiento frente a recuerdo.pdf.

Figura: las rutas habituales aparecen en los mapas, pero quien conoce bien la zona puede tomar atajos; en una interfaz, esto equivale a ofrecer accesos directos para usuarios avanzados sin obligar a usarlos. Origen: WEB - NNg - 10 heurísticas de usabilidad.pdf.

Ejemplo actual — migas de pan en e-commerce. Prácticamente cualquier tienda online grande (Amazon, Zalando, MediaMarkt...) usa migas de pan del tipo Inicio > Electrónica > Portátiles > Portátiles gaming para que el usuario sepa exactamente dónde está y pueda volver a un nivel anterior con un solo clic.

En las noticias — navegación inferior fija en apps móviles. En los últimos años, muchas apps y sitios responsive han adoptado una barra de navegación inferior fija (bottom navigation) con los accesos principales siempre visibles y en el mismo sitio, siguiendo el mismo principio de persistencia que describen los materiales clásicos, pero adaptado a pantallas táctiles pequeñas.

Ideas clave de esta sección¶

• Consistencia + persistencia + sencillez son las tres propiedades clave de un buen sistema de navegación.
• Hay que poder responder siempre a "¿dónde estoy?, ¿cómo llegué?, ¿a dónde voy?, ¿cómo vuelvo?".
• La navegación debe funcionar también solo con teclado, no únicamente con ratón.

UT6-10. Verificación de la usabilidad en diferentes navegadores y tecnologías¶

Este contenido aparece tratado de forma bastante ligera en los materiales de la carpeta, así que lo decimos con honestidad: no hay una técnica específica de "pruebas multinavegador" desarrollada paso a paso como sí ocurre con el test de usuarios (ver UT6-11). Lo que sí encontramos, y que conviene enlazar, son dos ideas relacionadas:

Por un lado, ya vimos en UT6-7 que usar estándares es, precisamente, lo que garantiza que un sitio se comporte igual ante "futuros cambios en la tecnología, nuevas versiones de navegadores, dispositivos móviles, etcétera". Es decir: la verificación multinavegador empieza, en realidad, desde el propio código, escribiendo HTML y CSS estándar en lugar de trucos específicos de un único navegador.

Por otro lado, al describir el material necesario para un test de usabilidad (ver siguiente apartado), los materiales clásicos señalan que hay que disponer de toda la tecnología necesaria —incluida la tecnología asistiva si participan personas con discapacidad— y que también conviene hacer pruebas en equipos con conexiones lentas y en dispositivos portátiles. Esa recomendación es, en la práctica, el germen de lo que hoy llamamos pruebas cross-browser y cross-device.

El criterio de evaluación de la programación es claro en lo que se espera: "se ha verificado la usabilidad del interfaz web creado en diferentes navegadores y tecnologías", y también que se ha comprobado la navegación "mediante distintos periféricos" (ratón, teclado, pantalla táctil, lector de pantalla...). En la práctica profesional actual, esto se traduce en comprobar el sitio en varios navegadores (Chrome, Firefox, Safari, Edge), en varios tamaños de pantalla (móvil, tablet, escritorio) y con distintos periféricos de entrada.

Ejemplo actual — laboratorios de pruebas en la nube. Herramientas como BrowserStack o Sauce Labs permiten probar una web en decenas de combinaciones reales de navegador, sistema operativo y dispositivo sin tener que comprar físicamente cada móvil o tableta, algo que se ha vuelto habitual en equipos profesionales de control de calidad web.

En las noticias — actualizaciones de navegador que rompen webs. De vez en cuando aparecen noticias sobre actualizaciones de un navegador (por ejemplo, cambios de política de cookies o de seguridad en Safari o Chrome) que dejan de funcionar correctamente en sitios que dependían de comportamientos no estándar. Según se ha informado en casos así, la causa suele ser precisamente no haber seguido los estándares del W3C al construir el sitio.

Ideas clave de esta sección¶

• Este contenido está poco desarrollado en los PDF de la unidad: se apoya, sobre todo, en la relación entre estándares (UT6-7) y continuidad ante nuevos navegadores/dispositivos.
• El propio proceso de test de usabilidad (UT6-11) es el marco práctico donde se recomienda probar con distintos equipos, conexiones y dispositivos.

UT6-11. Herramientas y test de verificación¶

Un test de usabilidad es una medida concreta y objetiva de la usabilidad de un sitio web, tomada a partir de usuarios reales realizando tareas reales. Permite verificar si existen problemas y, si los hay, encontrar una posible solución. Se recomienda realizarlo cuanto antes —a ser posible antes de publicar el sitio— y, si se puede, después de un análisis heurístico previo.

Los materiales clásicos detallan los elementos que hay que planificar en cualquier test:

• El momento: cuanto antes, mejor.
• Las personas: cuántos participantes, con qué características, si se incluyen personas con distinto grado de discapacidad y distinto nivel de experiencia.
• La duración: depende del número de personas.
• El lugar: debe permitir que los participantes se sientan cómodos y no interactúen entre sí.
• El material: toda la tecnología necesaria, incluida tecnología asistiva si procede, y también pruebas en conexiones lentas y dispositivos portátiles.
• El test en sí: qué tareas se pedirán, en qué momento y cuánto tiempo se considera razonable para cada una.

La fuente actual del Nielsen Norman Group amplía y actualiza este esquema con conceptos muy usados hoy en cualquier equipo de UX:

• Los tres elementos centrales de un test: el facilitador (guía al participante, le da las tareas y observa su comportamiento), las tareas (actividades realistas que el participante podría hacer en la vida real) y el participante (un usuario representativo del público real del producto).
• Test cualitativo frente a cuantitativo. El cualitativo busca descubrir problemas y recoger impresiones (es el más habitual); el cuantitativo recoge métricas como el porcentaje de tareas completadas con éxito o el tiempo empleado en cada tarea, y sirve para fijar valores de referencia (benchmarks). Para un estudio cualitativo típico, se recomienda un grupo de cinco participantes, suficiente para detectar la mayoría de los problemas más comunes.
• Test presencial frente a remoto. Dentro del remoto, se distingue entre moderado (el facilitador interactúa con el participante a distancia, por ejemplo mediante videollamada) y no moderado (el participante realiza las tareas solo, en su propio tiempo, y la plataforma de test registra la sesión en vídeo para su análisis posterior).
• Coste. Un estudio "low cost" puede resolverse en tres días de trabajo (planificar, testear con 5 usuarios, analizar resultados) y unos pocos cientos de dólares en incentivos para los participantes; estudios más ambiciosos (comparar varios diseños, varios países, varios grupos de usuarios, o usar equipamiento como el eye tracking) pueden llegar a costar mucho más.

Los materiales clásicos añaden, además, un elemento muy práctico y muy poco recordado: el formulario de selección de participantes, que sirve para comprobar si un candidato encaja con el perfil de usuario que se quiere estudiar, y que —cuando se busca incluir a personas con discapacidad— debe incluir preguntas específicas sobre el tipo de discapacidad, qué tecnología de apoyo utilizan (lector de pantalla, dispositivo de puntero alternativo...) y qué necesitarían para participar cómodamente en la prueba (por ejemplo, accesibilidad física del local, o formato de la documentación en braille o audio).

Figura: los tres elementos centrales de cualquier test de usabilidad —quien lo dirige, las tareas que se piden y quien participa—. Origen: WEB - NNg - Test de usabilidad 101.pdf.

Figura: flujo de información en un test de usabilidad presencial o remoto moderado: el facilitador administra las tareas y observa, el participante las realiza y da feedback. Origen: WEB - NNg - Test de usabilidad 101.pdf.

Figura: en un test remoto no moderado, la plataforma de pruebas sustituye al facilitador: entrega las tareas, graba la sesión en vídeo y el investigador analiza después la grabación. Origen: WEB - NNg - Test de usabilidad 101.pdf.

Figura: una sesión real de test de usabilidad presencial, con el portátil del participante, el de la facilitadora y un monitor externo para que ella pueda seguir la pantalla del participante. Origen: WEB - NNg - Test de usabilidad 101.pdf.

Ejemplo actual — la práctica del Café Central. En la práctica de esta unidad (UT06TE01) tú mismo vas a hacer un pequeño estudio de usabilidad de la web del Café Central: es exactamente lo que describe esta sección a pequeña escala, con tareas concretas (por ejemplo, "encuentra el horario" o "reserva una mesa") y observando cómo se desenvuelve alguien —un compañero, un familiar— al intentarlo.

En las noticias — la "regla de los 5 usuarios". La recomendación de testear con cinco participantes en estudios cualitativos, popularizada por Jakob Nielsen hace más de veinte años, sigue citándose habitualmente en artículos y cursos de UX actuales como punto de partida razonable para equipos con presupuesto limitado, aunque también se matiza que para estudios cuantitativos o con varios grupos de usuarios hacen falta bastantes más participantes.

Ideas clave de esta sección¶

• Un test de usabilidad tiene tres piezas: facilitador, tareas y participante.
• Cualitativo (descubrir problemas) frente a cuantitativo (medir con métricas); presencial, remoto moderado o remoto no moderado.
• El formulario de selección de participantes ayuda a formar un grupo de prueba representativo, incluyendo a personas con discapacidad.

Glosario rápido¶

Repaso: 8-10 preguntas para autoevaluarte¶

1. ¿Qué dos técnicas de análisis de usabilidad se complementan entre sí, mostrando una los problemas y siendo la otra más eficiente para proponer soluciones?
2. ¿Por qué las encuestas no son una buena técnica para resolver problemas de usabilidad, según los materiales de la unidad?
3. Nombra al menos tres objetivos de una web relacionados con la usabilidad.
4. ¿Qué diferencia hay entre un usuario "visitante" y un usuario "administrador" en una misma web?
5. Cita tres barreras de usabilidad relacionadas con la velocidad o el peso de una página.
6. ¿Qué norma ISO detalla los principios de diseño de sitios web usables en cinco áreas, y en qué año se publicó?
7. Según la BBC, ¿qué porcentaje adicional de usuarios perdía por cada segundo extra de carga?
8. Explica con tus palabras la diferencia entre reconocimiento y recuerdo, y pon un ejemplo de cada uno en una interfaz.
9. ¿Qué tres propiedades debe cumplir un buen sistema de navegación web?
10. ¿Cuántos participantes se recomiendan habitualmente para un test de usabilidad cualitativo, y qué diferencia hay entre un test remoto moderado y uno no moderado?

De dónde sale esto (fuentes de la carpeta)¶

• DIW03.pdf — Material "clásico" (hacia 2013, según los metadatos del PDF) del temario de usabilidad web: definiciones, normas ISO, tipos de usuario, barreras, navegación (consistencia, persistencia, sencillez), teclado/ratón, análisis heurístico y test de usabilidad, formulario de selección de participantes.
• WEB - NNg - 10 heurísticas de usabilidad.pdf — Las 10 heurísticas de Jakob Nielsen (Nielsen Norman Group), última revisión enero de 2024, con ejemplos e imágenes.
• WEB - NNg - Reconocimiento frente a recuerdo.pdf — Artículo de NN/g (enero de 2024) sobre memoria, reconocimiento y recuerdo aplicados al diseño de interfaces.
• WEB - NNg - Test de usabilidad 101.pdf — Artículo de NN/g (última revisión julio de 2026) sobre qué es un test de usabilidad, sus elementos, tipos y coste.
• WEB - web.dev - Por qué importa la velocidad.pdf — Artículo de web.dev/Google (actualizado en noviembre de 2023) sobre el impacto de la velocidad en retención, conversión y experiencia de usuario, con casos reales (BBC, Vodafone, Rakuten 24, redBus).

Nota sobre contradicciones o antigüedad: cuando el material clásico (DIW03.pdf, hacia 2013 según sus metadatos) y las fuentes actuales (WEB - ...pdf) tratan un tema afín, se ha priorizado la fuente más reciente, tal como se indicó para esta unidad. Es el caso, sobre todo, de la velocidad de conexión (UT6-6, donde se ha dado prioridad a las Métricas web esenciales de web.dev) y de la navegación reconocida/recordada (UT6-8, donde se ha combinado la máxima clásica "reconocer es mejor que recordar" con el artículo actual de NN/g sobre reconocimiento y recuerdo).