¿Navegación intra o multipágina? Cómo combinar ambas para una experiencia de scrollytelling

¿Sitio de una sola página o de varias? ¿Por qué no ambos?

Durante la creación del sitio para The Harvest Companies, surgió el debate sobre si debíamos optar por un sitio de una sola página o uno de varias. Por nuestra parte, queríamos darle un toque cinematográfico y pensamos principalmente en el desplazamiento vertical para contar la historia. Para el desplazamiento, tiene sentido contar con contenido desde el principio. Por otro lado, en cuanto a la arquitectura de la información, no teníamos mucho contenido, por lo que si hubiéramos optado por varias páginas, la página de inicio no se habría beneficiado del enfoque narrativo mediante desplazamiento, que es nuestra herramienta preferida para lograr ese efecto cinematográfico. Entonces se nos ocurrió: ¿por qué no un híbrido? Las páginas de "Sobre nosotros" y "Programas" condensan toda la información que presenta a la Harvest Media Foundation. Por su parte, "Proyectos" y "Prensa" enumeran elementos que, potencialmente, son externos. En cuanto a "Contacto" y "Donar", son áreas orientadas a la acción, distintas de las secciones informativas mencionadas. Así que nos decidimos por un modelo híbrido: una página principal combinada con varias páginas secundarias.

La navegación

La estructura de navegación se divide en dos niveles diferenciados:

Navegación principal en una sola página

Cubre la experiencia central de una sola página, guiando a los usuarios a través de la narrativa de la página de inicio con detalles de presentación de la marca, información sobre la organización y sus programas.

A medida que el usuario se desplaza hacia abajo, la línea vertical funciona como un índice de la página, con una línea más oscura superpuesta que indica el progreso actual. Además, las secciones principales de la página (Sobre nosotros y Programas) se resaltan como activas siempre que el índice se alinea con ellas.

Enlaces de la capa secundaria

Contiene enlaces que cumplen funciones distintas fuera de la página de inicio, incluidos Proyectos y Prensa (ambos enlazan a recursos externos), junto con Contacto y Donar. (Nota: se denominan secundarios no por falta de importancia, sino porque ocupan una capa de navegación independiente).

‍

La transición de la sección principal al contenido enmarcado

Desde la sección principal, al inicio del desplazamiento, ocurren varias cosas (además de los elementos de navegación). Inicialmente, el fondo de video muestra un efecto de rebote en su primer fotograma que invita a los usuarios a desplazarse y sugiere movimiento; no es totalmente estático, incluso cuando los usuarios aún no han interactuado. Luego, cuando los usuarios comienzan a desplazarse hacia abajo, el video se activa: se reproduce fotograma a fotograma siguiendo la acción de desplazamiento del usuario (el video avanza o retrocede según el movimiento). Otro elemento que se convierte en una parte sutil de la interacción es la tercera línea del título: hay un cambio entre los términos "storytellers", "creatives", "visionaries" y "media entrepreneurs", activado por la acción de desplazamiento del usuario.

Al pasar a la parte inferior de la página, el contenido se enmarca para posicionar a The Harvest Media Foundation como una ventana, un marco o una lente a través de la cual se observa su trabajo. Metafóricamente, esta transición representa el paso del exterior al núcleo de lo que hace la fundación.

Distribuir imágenes con movimiento, sin saturación y permitiendo ver varias a la vez

Estamos utilizando el concepto de una galería tipo carrusel con imágenes rotativas.

Implementamos este componente de carrusel doble para lograr un doble objetivo dentro de una estructura de página de inicio tipo scrolltelling: mostrar una extensa galería de más de 20 imágenes sin imponer una longitud de desplazamiento excesiva a los usuarios ocasionales, al tiempo que permitimos una navegación fluida y completa para los usuarios interesados. Las ventajas clave de este diseño interactivo incluyen:

• Capacidad de pausa independiente: Al pasar el cursor sobre cualquiera de las filas, su movimiento se detiene para una inspección detallada, mientras que la fila adyacente continúa moviéndose para mostrar más imágenes. A la inversa, pausar la segunda fila deja la primera activa.
• Eficiencia frente a los deslizadores estándar: Evita la limitación de una sola imagen de los deslizadores convencionales de un solo marco.
• Eficiencia frente a las cuadrículas estáticas: Elimina el desplazamiento vertical excesivo y los clics manuales necesarios para ver los detalles.
• Exploración continua: A diferencia de los diseños de carrusel único donde la pausa detiene todo el flujo de imágenes, los carruseles dobles garantizan que la navegación no se interrumpa.

El resto de la página busca cumplir con el requerimiento "editorial"

La sección Acerca de se presenta con una interfaz de estilo revista para cumplir con el enfoque editorial:

‍

Programas principales es la sección que sigue después de Acerca de.

‍

Una sección de llamada a la acción interrumpe al usuario para destacar el enfoque de integridad artística de la propuesta.

‍

A continuación, tenemos una llamada a la acción para enviar una palabra.

‍

Y dado que los enlaces clave siempre están visibles en la parte superior de la navegación enmarcada de Harvest Media Foundation, el pie de página solo muestra lo que no se había mostrado anteriormente.