Todo lo que necesitas saber sobre el scrollytelling

Scroll es una palabra de origen inglés que significa desplazarse a lo largo de una pantalla de ordenador, tableta o teléfono móvil haciendo uso de la rueda del ratón, el touchpad, las flechas del teclado, la barra lateral del navegador web o, normalmente, el dedo pulgar o índice en el caso de las pantallas táctiles.

Telling, por su parte, viene de storytelling, es decir, la acción de contar o relatar una historia y, junto con scroll, forman el acrónimo scrollytelling, que significa contar una historia a medida que te desplazas por una pantalla.

Cómo contar una historia a través del scrollytelling

Existen muchas formas de contar una historia a través del scrollytelling en una página web: puede hacerse mediante textos, imágenes, vídeos, música, animaciones... combinando todos los elementos a la vez o mostrándolos de forma secuencial.

En cualquier caso, lo más habitual es que sea una mezcla de textos breves intercalados con imágenes que aparecen y desaparecen mediante diferentes efectos visuales para enriquecer la historia y hacerla más amena.

A continuación, algunos ejemplos:

Características de un producto

Esto es lo que sucede, por ejemplo, en goodmeat.co (página web de una empresa que produce carne artificial apta para consumo humano), donde el contenido se va revelando a medida que nos desplazamos por las diferentes secciones de la página mediante un efecto parallax que combina imágenes con párrafos cortos.

Como vemos, la estructura narrativa de la historia es muy minimalista, se limita a un eslogan, unos pocos párrafos explicativos y varios enlaces a otras páginas internas que invitan al lector a profundizar en el proceso de creación de la carne artificial.

Historias de formato largo

El scrollytelling puede utilizarse tanto para contar historias breves como para mostrar relatos largos (tanto como sea necesario) de una forma más visual, llamativa y amena, como en esta página web de una exposición virtual del modista Cristóbal Balenciaga, en la que se ha trasladado la información de los paneles explicativos que encontraríamos en la exposición del museo al entorno digital y se ha recurrido al scroll lateral y vertical para simbolizar el paso por las diferentes salas.

Sin embargo, en este caso, la experiencia de usuario es muy diferente a los ejemplos anteriores y la sensación, más que estar visitando una exposición, es la de consultar un catálogo digital de la muestra que permite incorporar elementos audiovisuales.

Así, podemos ver un vídeo de una conservadora que nos muestra cómo se protegen los trajes en los almacenes o podemos hacer clic sobre las imágenes para ampliarlas, que son elementos que quedarían excluidos del formato impreso en papel.

Visualización de datos

Por otra parte, el scrollytelling también es útil para presentar datos complejos de forma asequible para el usuario. Por ejemplo, Radio Televisión Española publicó un minisite para mostrar cómo se desarrolló la campaña de vacunación frente a la COVID-19.

En esta web, el usuario puede:

• Conocer las estadísticas de vacunación de cada una de las Comunidades Autónomas de España realizando una búsqueda a través de un formulario.

• Estar al tanto de las últimas noticias que se se iban publicando a través de un carrusel de diapositivas.

• Escuchar un pódcast en el que se entrevistaba a la Ministra de Sanidad explicando cuál estaba siendo la estrategia de vacunación....

En otros casos, como If the Moon were only 1 pixel, la visualización de datos es completamente diferente. En esta página, se muestra cómo sería la escala de los planetas del Sistema Solar si La Luna midiera un píxel. Así, a través de un long scroll lateral se van presentando los tamaños de los diferentes planetas en relación al satélite de referencia.

En definitiva, el scrollytelling tiene muchas aplicaciones prácticas (tantas como queramos) y es una técnica que puede utilizarse para mostrar las características de un producto, para dar a conocer una exposición virtual o para presentar datos de una forma más atractiva, visual y entretenida.

Beneficios de utilizar el scrollytelling

El scrollytelling tiene cinco grandes beneficios:

• Naturalidad del formato:

• Control del tiempo de navegación: cuando el usuario se desplaza por la pantalla puede detenerse a leer un fragmento de texto o una imagen y permanecer el tiempo que sea necesario hasta que lo haya asimilado. Así, el scrollytelling se asemeja a una presentación de PowerPoint o Keynote que el propio usuario puede controlar.

• Efecto wow: la mayoría de las páginas son muy estáticas. Por eso, cuando un usuario accede a una web que utiliza scrollytelling, se queda asombrado porque la experiencia es completamente diferente. Existe más movimiento, generalmente mejores recursos visuales y ese extra de diseño acaba siendo valorado muy positivamente por el usuario.

• Mayor engagement: sabemos que el tiempo que permanece un usuario en una página web es un factor de éxito que explica el grado de vinculación que tiene con una marca. Es un factor que se puede medir con Google Analytics consultando la tasa de rebote o el tiempo de permanencia en cada página. Con el scrollytelling, se pueden mejorar estos indicadores y, por tanto, el posicionamiento de una web, porque se fomenta la interactividad y se pueden contar historias más extensas de una forma más amena.

• Web responsive: el scrollytelling se adapta a todos los dispositivos (ordenador, tableta y móvil) y a todas las resoluciones posibles, ya que utiliza el responsive design. Así, ya sea en formato horizontal o vertical no se pierde información porque tanto textos como imágenes o animaciones se adaptan. Algo que no ocurre, por ejemplo, con los vídeos, que no pueden ajustarse a determinadas resoluciones dependiendo de si están grabados en horizontal o en vertical.

Por qué contratar a un estudio de scrollytelling

Hacer hincapié en saber contar historias, conocer el medio, saber mantener el ritmo, saber elegir las fotografías, etc.

El scrollytelling es una técnica que requiere de conocimientos sobre diseño web, animaciones CSS y lenguajes de programación como JavaScript. Además, es esencial contar con elementos gráficos de calidad para que produzcan el efecto deseado y, por supuesto, con textos escritos por un profesional del copywriting.

Por este motivo, una página web que utilice el scrollytelling como fórmula narrativa suele encargarse a una agencia especializada, ya que no se utilizan plantillas preformateadas (porque se busca precisamente un diseño único) y se requiere de unas habilidades técnicas y de una dilatada experiencia profesional realizando este tipo de proyectos para que el resultado sea óptimo.

Además, el tiempo de elaboración es mayor si no se cuenta con un diseñador o copywriter especializado en scrollytelling, ya que, aunque se tengan conocimientos de ambas disciplinas, este formato condiciona totalmente el estilo narrativo y es necesario saber cuándo utilizar una frase, un párrafo corto, un texto extenso, una imagen o una animación determinada.

Solo la sabia combinación de todos los elementos es lo que producirá un buen resultado. Por eso, si estás considerando la posibilidad de realizar una página web de estas características, nuestra recomendación es que la solicites a una agencia especializada.