Diseño web: cómo guiar a sus visitantes a través de páginas largas

Los sitios web son cada vez más largos: el sitio promedio en el top 10 de Google de 2016 tenía unas 3 páginas A4. ¿Cómo podemos navegar a través de estas largas páginas?

La sustancia de la URL de un sitio web aumenta constantemente, en cuanto al contenido y su longitud, y siempre se hace más grande: según el proveedor de la herramienta SEO Métricas de búsqueda, un sitio de escritorio en el top 10 de Google de 2016 tenía un promedio de 1500 palabras, mientras que los sitios móviles tenían unas 1000 palabras. Con alrededor de 500 palabras por página A4 en tamaño de fuente estándar (12) en Word, esto da como resultado dos o tres sitios en formato A4. Este contenido es acuñado por la aspiración a la relevancia: se supone que el «contenido holístico», como lo llaman los SEO, cubre el tema para el cual optimizamos una página (ya no optimizamos para términos de búsqueda o palabras clave individuales) de la manera más extensa posible. . Entonces, la optimización holística significa abordar tantas preguntas y posibilidades dentro de una URL, proporcionando contenido relevante de esta manera. Sin embargo, esto también significa que tenemos que proporcionar una nueva forma de navegación para nuestros usuarios, haciéndoles más fácil encontrar su camino, ¿no?

Contenido holístico sin navegación

De todas las cosas, la reacción más fácil al contenido amplio y holístico la proporciona EL punto de referencia del diseño: Apple. En la página de unas 1.700 palabras en el iPad Pro, por ejemplo, no hay opción para navegar más rápido entre las secciones y párrafos, fuera del desplazamiento. Ciertamente, esto se hizo a propósito, manteniendo a los usuarios en la página más tiempo haciéndolos navegar con más cuidado y haciéndolos encontrar partes importantes de contenido por sí mismos. Apple puede darse el lujo de hacer esto porque la mayoría de los clientes son seguidores leales, o al menos están dispuestos a revisar el contenido de la página.

Leyenda de la imagen: Captura de pantalla de Apple.com

Sin embargo, con marcas (muchas) menos populares, esto haría que la tasa de rebote fuera bastante alta, ya que los usuarios no encontrarán el contenido que buscan dentro de su capacidad de atención, que, por cierto, es un promedio de 8 segundos en la web. Es muy probable que simplemente dejen la página sin hacer.

La solución: el enlace ancla

Echemos un vistazo a cómo el sitio más fuerte de la web aborda el tema: Wikipedia. La enciclopedia es pionera en lo que respecta a la optimización holística. Desde hace años, nos ha estado mostrando cómo clasificar perfectamente con el contenido de uno. Hoy en día, es completamente normal que sus usuarios lleguen a las secciones individuales utilizando una tabla de contenido. En el caso de Wikipedia, esto se genera automáticamente y lleva a los usuarios a subtítulos individuales (h2 y h3) a través de enlaces ancla:

Esta navegación con enlaces de anclaje no solo facilita la navegación entre las secciones individuales, sino que también puede tener una influencia directa en el aspecto del llamado fragmento: la vista previa del sitio web en los resultados de búsqueda de Google. Sin embargo, una tabla de contenido no siempre es la solución óptima: mueve información relevante y elementos (medios) en el área de contenido lejos del área de visualización de los usuarios. Además, los usuarios que quieran navegar entre diferentes temas siempre tienen que volver al principio de la página. Por supuesto, podemos decir esto nuevamente: las marcas o plataformas como Wikipedia pueden darse el lujo de hacer esto, pero también creo que la enciclopedia tendrá que cambiar esto con un rediseño en el futuro, ya que de lo contrario, las páginas con mejores reacciones de los usuarios (entonces- llamadas señales de usuario), y la información más relevante en el área de visualización («en la parte superior de la página») disputará la clasificación.

Transformación de navegación

En mi opinión, debido a los contenidos holísticos y la demanda de una experiencia de usuario óptima, el menú de los sitios web ya no debería limitarse a las URL. En su lugar, también tiene que ofrecer una navegación dentro de la URL respectiva a través de enlaces de anclaje. Como yo, como consultor SEO, no tengo una función relacionada con el diseño, a menudo doy tres ejemplos de cómo resolverlo:

1. Navegación separada

La solución más fácil es la de arriba con los elementos del menú alineados uno al lado del otro. A este tipo de menú lo llamo arreglo vertical, ya que el arreglo también describe los llamados verticales. En marketing, las verticales son áreas de aplicación o ramas. Cada vertical representa una URL que está optimizada para la aplicación o solución de rama (el tema o la palabra clave).

La columna de la izquierda (marginalia) obtiene la navegación ancla. Esto crea la conexión con un estilo similar al elemento del menú actual. La dirección de lectura de arriba a la izquierda (logotipo) a abajo a la derecha (URL, navegación, luego navegación de anclaje) también facilita la orientación (por lo tanto, no hay alineación del lado derecho de la navegación de anclaje). Coloco los enlaces de anclaje uno debajo del otro (alineación horizontal) para crear la conexión con el contenido real. Idealmente, los elementos del menú del enlace ancla se resaltan mientras se desplaza, o se animan de manera similar al enlace URL activo en el menú principal, subrayando la conexión entre el menú y el contenido. Todavía hay espacio suficiente para colocar el botón de llamada a la acción más importante (para la optimización de la conversión) y el segundo más importante (botón para compartir) en el encabezado. También se pueden implementar migas de pan (rutas de navegación), selección de idioma y búsqueda, así como un botón opcional de retroceso o desplazamiento hacia arriba. Esta navegación es adecuada para páginas conservadoras con usuarios que todavía están acostumbrados a los controles a través de un menú superior e izquierdo. Sin embargo, las cosas se vuelven más difíciles cuando la navegación se realiza de manera receptiva: entonces, los enlaces de anclaje deben integrarse en la navegación de URL.

2. Navegación vertical combinada

Una forma diferente de combinar URL y enlaces ancla es alinear todo verticalmente en el encabezado:

La ventaja es que solo ocupa poco espacio, dejando más espacio para el contenido real. Ya sea que se use una barra lateral o todo el espacio para el contenido, permanece completamente abierto, lo que otorga una gran flexibilidad. Esto es principalmente útil para la visualización en tabletas y anchos de navegador pequeños. Para mi definición, esto afecta principalmente a los blogs y las páginas orientadas al consumidor que sirven para investigar y navegar. Aquí, los navegantes de sofá con tabletas o usuarios que tienen varias ventanas del navegador abiertas una al lado de la otra son más comunes. La desventaja de esta navegación es que no solo se necesita una pantalla separada para los teléfonos inteligentes, sino también que la cantidad de elementos de menú y enlaces de anclaje suele ser limitada.

Navegación Horizontal Combinada

La última y, para mí, la solución más interesante es la combinación de elementos de menú y enlaces ancla en la columna de la izquierda.

Si bien requiere que el contenido se muestre de una manera atractiva incluso con un ancho de navegador más pequeño, esto tiene muchas ventajas: para empezar, podemos seguir un enfoque de «primero móvil» debido a los elementos del menú alineados uno encima del otro: la navegación se puede mostrar de la misma manera en las resoluciones de escritorio y móvil (idealmente oculto bajo un ícono de hamburguesa para usuarios móviles). Además, no hay límite en la cantidad de URL y enlaces de anclaje. Los especialistas en marketing y los editores pueden desarrollar contenido tan largo como deseen con muchos subtítulos. La navegación sigue la narración del contenido y luego conduce a un botón de llamada a la acción específico de la URL. Desventaja: incluso aquí, en un punto, estamos restringidos en el número de enlaces. Para combatir esto, solo dejamos que los enlaces de anclaje se bloqueen mientras se desplaza.

Conclusión

La navegación con enlaces de anclaje aún se encuentra en sus primeras etapas y (gracias a Dios) no existe una solución de aplicación general. No obstante, recomiendo encarecidamente prestar atención a esto durante el próximo diseño web o relanzamiento (y también seguir algunas reglas básicas de optimización del rendimiento). Aparte de la mayor facilidad de uso, la combinación del menú del enlace de anclaje de URL también ofrece la oportunidad de mejorar los comentarios y las calificaciones en una página, ya que se pueden implementar directamente en el menú como una llamada a la acción y conversión. Especialmente la combinación de comentarios con calificaciones de estrellas brinda oportunidades adicionales para convertir el diseño web en un éxito medible. Esto distingue a su sitio web de la competencia, lo que le permite obtener muchos más visitantes de los que obtendría sin información estructurada. ¿Tiene otras ideas sobre cómo combinar URL y enlaces de anclaje para contenidos holísticos en una navegación sencilla? ¿Ya estás usando algo así en tus proyectos? ¡Dinos en los comentarios!