Series
Work
• 
Making
Cliente
Rams Head Inn

Una experiencia de scrollytelling única, pero sin complicaciones innecesarias, para Rams Heads Inn

Resumen

En esta publicación describimos nuestro proceso de diseño para la página de inicio de Rams Head Inn, basada en una narrativa horizontal o "scrollytelling", pensada para ofrecer una experiencia de usuario impactante e intuitiva. El concepto se aleja de la navegación tradicional al utilizar un hilo narrativo único que guía a los usuarios horizontalmente a través de las diversas propuestas de la posada —como retiros, gastronomía y eventos— sin necesidad de menús complejos. Al priorizar un flujo narrativo coherente e incorporar elementos interactivos como carruseles, el diseño busca presentar eficazmente la "experiencia Rams Head Inn" a los nuevos visitantes, manteniendo la navegación interna del sitio accesible, pero como un elemento secundario frente a la historia visual de la página de inicio.

Una página de inicio que se siente diferente: rompiendo lo convencional para el usuario que llega por primera vez

Ahora estamos pensando en cómo hacer que esto se sienta diferente, solo para generar impacto, pero al mismo tiempo queremos que no sea excesivo. Diferente para causar un "vaya", pero sin ser demasiado complicado, más bien algo clásico. Esto implica que no buscamos algo que tarde segundos en cargar, que requiera animaciones iniciales de espera o que obligue al usuario a pensar cómo usarlo.

Por eso usaremos el desplazamiento lateral como punto de partida. Es decir: los usuarios usarán el movimiento de desplazamiento de su ratón o dispositivo como de costumbre, solo que la dirección del contenido en la pantalla seguirá un flujo de derecha a izquierda.

Comunicar lo que es Rams Head Inn como experiencia, visualmente y mediante un único hilo narrativo

Queremos que los usuarios entiendan de qué se trata todo esto de la misma forma en que alguien lo explicaría con palabras e imágenes: compartiendo las experiencias, señalando fotos y vídeos, y a través de un único discurso. Esto último significa que, en una conversación, el receptor es guiado por lo que dice el interlocutor. En un sitio web tradicional, los usuarios tienen que navegar por pestañas para verlo todo, por lo que podrían perderse cosas por el camino. Esto no significa que el sitio web no vaya a tener un menú para profundizar, sino que la página de inicio servirá como una narración lineal para que los usuarios no tengan que adivinar qué opción del menú elegir a continuación.

La experiencia de "scrollytelling" les permitirá leerlo de la siguiente manera: Rams Head Inn es la isla fuera de una isla, la costa chic pero histórica, los fines de semana largos, los retiros de bienestar, las reuniones familiares, la excepcional experiencia gastronómica de Michael Gilleto, los kayaks, las tablas de paddle surf, los eventos privados, las ovejas Southdown Babydoll Mary y George, la escapada de invierno (probablemente enfatizaremos las actividades de la temporada actual en ciertos momentos del año, mencionando al mismo tiempo que hay actividades todo el año), la película al aire libre de Jaws con la Rams Film Society, y así sucesivamente. En este punto, la visión es:

Ahora bien, el enfoque hacia el usuario no diferiría mucho del que tienen las redes sociales modernas para las publicaciones: uno puede desplazarse, hay unidades de contenido y, para algunas de ellas, hay un carrusel. Pensemos en el típico carrusel de Instagram, por ejemplo; resulta práctico compartir un grupo de elementos multimedia en una sola publicación en lugar de publicar 10 fotos individualmente. Los usuarios que deseen detenerse un momento y leer más podrán hacerlo. Podemos aplicar un enfoque similar en términos de psicología del usuario, específicamente para unidades de contenido como eventos y música en vivo. Podríamos tener un recuadro para "Rams Head Inn es... Eventos" y luego listar una serie de eventos destacados en un carrusel. Podría verse así:

O así, permitiendo a los lectores visualizar los elementos anteriores y posteriores al actual:  

La navegación

Consideremos dos etapas: una predeterminada para mostrar el logotipo y algunos enlaces para profundizar en las páginas:

Luego, a medida que comenzamos a desplazarnos, ocultaremos los enlaces de navegación interna y reduciremos el logotipo:

O una navegación tipo "skunk" en general, con los enlaces mostrados al hacer clic en un menú de hamburguesa y la consulta presentada verticalmente:

En resumen: la experiencia de scrollytelling

Los usuarios llegarán a una experiencia de desplazamiento horizontal. Al principio, la parte izquierda de su vista les ofrecerá una navegación expandida con el logotipo grande y enlaces para explorar las páginas internas del sitio, si así lo desean. Y tan pronto como comiencen a desplazarse, los recuadros que siguen contarán —literalmente— qué es Rams Head Inn.

Y la experiencia continuará así con más información sobre lo que es Rams Head Inn, recorriendo experiencias, diversión en el agua, bodas, escapadas corporativas, reuniones familiares y eventos. Para estos últimos, dado que hay muchos, los agruparemos de esta manera (también aplicable a las noches de música en vivo):

Eso es para la experiencia más importante y principal de la página de inicio. Hay más por hacer, aunque todo girará en torno a este concepto. La página de inicio será de tipo scrollytelling y llevará a los usuarios a las páginas internas, ya sea a través de las tarjetas de historia o de los botones de llamada a la acción persistentes (reservar o consultar).

More on our work and publications

Browse all

Si crees que podemos construir algo juntos, ¡hablemos!

Explora lo que hacemos