CategoríaDiseño de producto

Navegación y etiqueta de enlace: qué dice la investigación

9 minutos de lectura

La navegación decide si el resto de la página llega a verse, y la etiqueta de enlace decide si el clic cae donde la persona espera. El NN/g midió parte de ese costo a lo largo de dos décadas de artículos, y las mediciones son más útiles que los eslóganes construidos encima de ellas. El índice de tema de navegación (en inglés) reúne los textos que sostienen este post.

Qué mide la investigación en navegación

Dos preguntas aparecen en el archivo. ¿Encontró la gente la navegación, y cuánto esfuerzo costó una vez que empezaron a buscarla? El estudio de navegación oculta (en inglés) atacó la primera con una prueba cuantitativa en 2016: 179 participantes, 6 sitios, tres condiciones.

Todas las cifras de la próxima sección vienen de ese único estudio, así que comparten los mismos límites. Una ronda, seis sitios, un estilo de interfaz.

Menú oculto: cuándo funciona y qué cobra

En el escritorio, el uso de la navegación cayó del 48% cuando estaba visible al 27% cuando estaba oculta. En el celular la distancia fue mayor: 86% con el menú combinado contra 57% con el oculto. El descubrimiento de contenido cayó más del 20%. La dificultad percibida subió 21% contra el menú visible y 11% contra el combinado. Las tareas tardaron al menos 39% más en escritorio y 15% más en celular. Llegar a la navegación costó de 5 a 7 segundos extra en escritorio y unos 2 en celular (NN/g (en inglés)).

Una caída así tiene un costo, pero no es una condena. El estudio de 2025 sobre reconocimiento del ícono (en inglés) confirma que el ícono de tres líneas ya es una convención familiar, leída por la mayoría como menú principal. También declara lo que no midió: reconocimiento, no tiempo ni éxito de tarea. Reconocer el ícono no borra el precio de ocultar el menú.

En la posición, los textos coinciden. No ocultes la navegación en el escritorio. En el celular, muestra hasta cuatro enlaces de primer nivel, y ocultar el resto es aceptable por encima de eso. Usa el ícono estándar, ponlo en la esquina que la gente espera, etiquétalo como “Menú” y dale contraste y padding. Luego mantén otras rutas abiertas, con enlaces en el cuerpo, búsqueda visible y pie de página.

Cuántos ítems antes de volverse scroll

Un menú expandible cobra en dos momentos. Primero la persona tiene que notar el disparador, después elegir un ítem. La revisión sobre menús expandibles (en inglés) separa el segundo costo en búsqueda visual más movimiento del puntero. La ley de Fitts gobierna el movimiento, así que un objetivo pequeño y lejos del cursor cuesta más tiempo. Un menú lineal por eso castiga sus propios últimos ítems, y esa es una razón para que sea corto.

El diseño puede bajar ese costo. Alinear el disparador con el ítem del medio recorta el recorrido promedio. Un megamenú rectangular mantiene los ítems más cerca en conjunto. Un menú radial deja cada ítem equidistante y paga por ser poco familiar. Un marking menu convierte la dirección en atajo y, en modo experto, omite abrir el menú.

Con el toque, la pregunta es otra. El dedo puede no estar en el disparador cuando el menú abre, así que lo que cuenta es dónde aparece el panel respecto de donde probablemente están las manos.

La guía sobre dropdowns (en inglés) trata el widget como sobreutilizado y nombra cuatro usos legítimos: dar un comando, navegar, llenar un formulario y elegir un atributo. Mantén la etiqueta visible con el menú abierto. Deshabilita en gris una opción no disponible en vez de quitarla, para conservar la posición que la persona aprendió. Un dropdown largo con scroll obliga al puntero a bajar por un corredor, costo que la steering law predice. Donde escribir es más rápido, como estado o país, usa el campo de texto. Vale lo mismo para un dato que la persona sabe de memoria, como el mes de nacimiento. En el escritorio, mantén la navegación global fuera de un dropdown, y da soporte al teclado.

Evita también el menú que cambia por culpa de otro menú en la misma página.

El texto de 2007 a favor del breadcrumb (en inglés) enmarca la ruta como navegación secundaria de una línea. Muestra dónde está la página, da acceso en un clic a los niveles de arriba, ayuda a quien llegó de una búsqueda o de un enlace externo y ocupa casi nada. El autor declara no tener la cifra exacta de cuántas personas usan la ruta y no haber creído que la pregunta mereciera un estudio propio.

La guía de 2018, revisada en 2026 (en inglés), aprieta las reglas. El breadcrumb complementa la navegación en vez de sustituirla, y muestra la jerarquía del sitio y no el historial de la sesión. En un sitio con varios caminos, muestra un único camino canónico. Incluye la página actual como último ítem, sin enlace. Enlaza solo páginas reales. Descarta la ruta cuando la jerarquía tiene uno o dos niveles, y usa un separador de un carácter.

Etiqueta de enlace y las cuatro S

Una etiqueta tiene un trabajo antes del clic: decir qué hay del otro lado. La guía sobre etiquetas de enlace (en inglés) lista cuatro cualidades, todas empezando con S. Específica quiere decir que la etiqueta nombra el destino, y “saber más” es el nuevo “clic aquí”. Sincera quiere decir que el enlace es una promesa, y una promesa rota encoge las ganas de volver a hacer clic. Sustancial quiere decir que la etiqueta tiene que sostenerse sola, porque la persona escanea enlaces y salta la frase de alrededor. Sucinta quiere decir ninguna palabra de más, con la información útil al principio.

Las cuatro tiran en direcciones distintas, y el artículo lo admite. Específica empuja la etiqueta a ser más larga, y más larga es más difícil de escanear. El ajuste común es empezar por el sustantivo que la persona busca. Es el mismo problema de responder a la intención de búsqueda, donde etiqueta y consulta tienen que encontrarse.

Enlace visitado y lo que decide el estado visual

La apariencia de un enlace transmite información, además de estilo. Las guías para visualizar enlaces (en inglés) pidieron alguna vez color más subrayado. Una nota del editor de 2026 revoca esa regla visual y remite al criterio 1.4.1 de WCAG 2.1, que exige que el color por sí solo no separe un enlace. La mayoría de los lectores hoy combina color, posición y contexto.

Lo que quedó después de la revisión es un aviso. No uses el color de enlace en texto que no es enlace, y no dejes que un enlace parezca texto común.

El estado visitado es más discreto y más útil. El artículo sobre enlaces visitados (en inglés) defiende que el color cambiado dice dónde estuvo la persona, dónde está y a dónde puede ir todavía. Si se ignora la convención, la gente reabre páginas por accidente, pierde el lugar, confunde dos enlaces parecidos y se rinde antes.

Este problema es difícil de detectar en una prueba. Casi nadie se queja del color de los enlaces. La gente solo da vueltas en círculo.

Dos cifras de ese artículo no tienen fuente declarada, así que quedan fuera de cualquier resumen.

Paginación, scroll infinito y listas largas

Una lista larga necesita estrategia, y el tamaño de la colección elige cuál. La comparación de opciones para páginas de listado (en inglés) ordena las alternativas. La paginación numerada sirve a una colección grande y ofrece control preciso. Cargar todo de una vez sirve a un sitio pequeño. El scroll infinito funciona con pocos ítems y buenos filtros, y falla en una colección grande. Ahí el pie de página queda inalcanzable y la persona pierde su posición en la lista. Un botón de “cargar más” alcanza el pie de página y cae bien en el celular, siempre que diga el total, cuánto ya cargó y cuánto falta.

Una regla vale para todas. Cuando alguien abre un ítem y vuelve, devuélvelo al punto donde dejó la lista. El mismo problema de listado aparece en páginas de producto con dato denso, donde la colección es el propio producto.

Donde gana el otro lado

Los textos del archivo no siempre coinciden, y vale la pena tener a la vista las cinco divergencias de abajo.

  • Breadcrumb en el celular: el texto de 2007 llama a la ruta libre de problemas y barata. La revisión de 2018 dice que el costo supera el beneficio en el celular, porque la ruta se parte en varias líneas y el objetivo queda pequeño.
  • Ruta completa contra ruta corta: 2007 quiere el camino entero por consistencia. 2018 manda acortarla en el celular y luego admite que el consejo choca con su propia regla de mostrar la ruta completa.
  • Subrayado: el texto de 2004 quería color más subrayado. La nota del editor de 2026 revoca la regla visual y lleva al lector al criterio 1.4.1 de WCAG 2.1.
  • Familiaridad del ícono: el estudio de 2016 mide un costo alto por ocultar la navegación. El estudio de 2025 encuentra el ícono ampliamente reconocido, pero declara que midió solo el reconocimiento y reafirma el consejo antiguo. Es un límite de alcance, no una revocación, y el texto debe decirlo así.
  • Mecanismo: el estudio de 2016 explica el costo por percepción y cognición. Los artículos de menú y de dropdown explican el mismo defecto por movimiento, con la ley de Fitts y la steering law. Las explicaciones se complementan en vez de competir.

Una etiqueta también tiene que sobrevivir a la traducción, lo que empuja la misma disciplina hacia decisiones de contenido multilingüe.

Fuentes

Más textos

Ver todos los textos