Enlaces en la misma página ¿bien o mal?

Hace años, cuando los monitores empezaron a aumentar de tamaño y de resolución, se empezó a dejar de usar los enlaces en la misma página, o como en aquel entonces era su denominación habitual, los enlaces ancla.

Un ancla en aquel entonces era un recurso habitual de diseño. En una página larga de mucho contenido se colocaban varias anclas al principio y el usuario iba directamente al contenido que quería sin tener que cargar varias páginas, ya que con una bastaba.

Captura de la web de la EPA, un buen ejemplo de uso de enlaces en la misma página o ancla.

Al final, un recurso hecho para facilitar la carga y la usabilidad en un tiempo en que las conexiones no eran demasiado rápidas derivó en la construcción de páginas demasiado largas e imposibles de cargar de más de un mega de tamaño (por el uso de fondos o imágenes en exceso). En ellas, o el usuario se desesperaba cargándolas o se perdía porque se confundía y no entendía por qué había dos tipos de enlaces: uno que le llevaba a otro sitio en la misma página y otro que le cambiaba a otra página.

Finalmente, las anclas se dejaron de usar, debido en parte al aumento de la velocidad de conexión y al abandono del paradigma de diseño en el que todo tenía que caber en la primera pantalla que se veía.

Con la llegada de los dispositivos móviles los enlaces en la misma página han vuelto a usarse, ya que permiten mostrar al usuario los contenidos al principio de la página y luego saltar automáticamente al contenido que prefiera sin tener que desplazar el dedo por toda la página en páginas de sólo texto.

Para ayudar a acabar con la confusión y los mitos sobre los enlaces en la misma página o ancla, Norman Nielsen ha escrito un artículo al respecto que hoy reseñamos aquí.

Pros y contras de los enlaces en la misma página

Pros: una página con contenido sólo de texto carga mucho más rápido en una conexión limitada -como puede ser la de un móvil que se ha quedado sin datos-, lo que ayuda a los usuarios a navegar fácilmente por el contenido de la página actuando como índice. También mejoran la hallabilidad de la página al saber el usuario qué contenido se va a encontrar en ella y al poder navegar o descartarlo rápidamente.

Contras: los enlaces en la misma página son confusos, porque no siguen el esquema mental de los usuarios que creen que al hacer clic en un enlace los llevará a otra página.

Usos de los enlaces en la misma página

Los enlaces en la misma página (o anclas) tienen varios usos beneficiosos desde el punto de la usabilidad y la experiencia de usuario:

• Tablas de contenidos: las anclas pueden servir como tablas de los contenidos que el usuario se va a encontrar y como guía de navegación en la página. En el caso de contenidos para móviles, esta mejora se ve incrementada ya que el usuario se hace una idea del contenido al principio de la navegación y puede ir directamente al que le interesa.
• Índices y FAQs: los enlaces en la misma página sirven para hacer de índices. Por ejemplo, en un catálogo con innumerables marcas, te pueden llevar a las que empiezan por una letra determinada ayudando al escaneo rápido de contenidos. Lo mismo pasa con las FAQs. Un enlace en la misma página nos puede llevar a la respuesta de la pregunta que nos interesa.
• Volver a arriba (o abajo): este tipo de enlaces en la misma página nos ayudan a volver a los índices de contenidos y seguir navegando fácilmente por sus contenidos.

Pautas para usar enlaces en la página responsablemente

Finalmente Norman Nielsen da unas pautas para que usemos los enlaces en la página responsablemente:

• Considera la longitud del contenido: para que un enlace en la página sea efectivo, el contenido tiene que tener una longitud considerable en su totalidad y poder ser leído secuencialmente que es cuando tienen mayor sentido y funcionan mejor las anclas desde el punto de la experiencia de usuario.
• Usa enlaces y encabezados claros: intenta que los textos de los enlaces y los encabezados sean claros y concisos. Es decir, que sean lo que el usuario se va a encontrar cuando haga clic en el enlace.
• Diferencia los enlaces en la misma página: los enlaces en la misma página se deben de diferenciar con algún texto explicativo tipo “En esta página”, “Secciones de esta página”, “Preguntas más frecuentes”, “Índice de contenidos” o similares. En algunos casos resaltar visualmente de alguna manera los enlaces en la misma página  también es una buena idea.
• Confirma el salto: cuando un usuario hace clic en un enlace en la misma página, espera que se le lleve directamente a la sección donde espera. Para confirmar esto y no desconcertar al usuario lo mejor es que el texto del enlace en la página y el del encabezado de la sección sean el mismo para no crear confusión en el usuario.
• Considera hacer los enlaces en la misma página un submenú sticky: cuando se llevan los enlaces en la misma página a un diseño de escritorio, lo mejor es que los enlaces en la página se transformen en un submenú sticky que acompañe al usuario y le ayude en la navegación, mejorando la hallabilidad de la página y mejorando la experiencia del usuario en ella.
• Si usas submenús sticky, asegúrate de mostrar la posición del usuario: cuando usemos submenús sticky debemos asegurarnos de que el usuario sabe dónde se encuentra dentro de la página para no desconcertarlo.

Para finalizar, Norman Nielsen recomienda que siempre que podamos usar enlaces en la misma página los usemos sobre los acordeones (los elementos de interacción normalmente señalados por un + u otro símbolo similar que se abren y muestran el contenido), salvo en caso que los contenidos sean de poca longitud. Ya que los acordeones necesitan una interacción innecesaria para ver el contenido y crean una confusión aún mayor en el usuario que la que pueden crear los enlaces en la misma página.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.