Scrollytelling: creando experiencias web interactivas

Las experiencias digtales han cambiado drásticamente en los últimos años. Contar historias que atrapen cobra relevancia cuando cada clic y scroll conduce a nuevas experiencias, perspectivas y posibilidades. Así surge el “scrollytelling”: scroll + narración. Esta técnica innovadora combina la fluidez del desplazamiento por “scroll” con el poder inmersivo de la narración, redefiniendo la forma en que interactuamos con el contenido en la web.

¿Que es Scrollytelling?

Scrollytelling es la práctica de mostrar elementos de una página de forma progresiva o interactiva a medida que el usuario se desplaza por ella. Es la técnica a través de la cual se combinan el “storytelling”, es decir el arte de narrar historias, con las técnicas de “scroll”, es decir de desplazamiento por la página.

Con scrollytelling los elementos de contenido de una página web pueden aparecer, moverse, desaparecer o cambiar a medida que el lector interactúa con ellos. Los creadores de contenido ahora pueden hacer que su audiencia se sienta parte de la historia, creando experiencias inmersivas y mejorando el texto escrito con multimedia como audio, video y animación.

Esto tiene un gran potencial para todo tipo de contenido, incluidos los informes periodísticos, las narrativas de eventos históricos, las lecciones educativas interactivas e incluso escritos de ficción. Estas avanzadas prácticas de contenido se destacan frente a un universo digital que tiende a la uniformidad.

En Aplyca hemos visto que las compañías buscan lograr un mayor nivel de interacción y dinamismo en sus contenidos mientras que sus plataformas de gestión de contenidos o XP (plataformas de experiencia) apoyan la creación de este tipo de páginas para un equipo editorial existente. Este artículo presenta prácticas esenciales de scrollytelling y opciones de desarrollo para incorporarlas en los sistemas de gestión de contenidos actuales.

Mayor participación de los usuarios a través de contenido interactivo

Imagínese esto: usted llega a una página web y, en lugar de hacer clic en páginas o imágenes estáticas, su viaje a través de la narrativa varía de acuerdo al deslizamiento de sus dedos, o a medida que hace “scroll” por la página. Cada movimiento revela nuevas capas de información, imágenes y perspectivas, creando una experiencia dinámica e interactiva que fomenta el descubrimiento y la exploración. 

En un mundo de contenido web optimizado para motores de búsqueda, donde prevalecen la construcción masiva de contenido y la optimización de palabras clave, producir contenido rico en interactividad, visualización de datos y otros elementos en experiencias innovadoras se vuelve primordial.

Scrollytelling aumenta la participación del usuario al darle a este el control de su navegación, permitiéndole explorar e interactuar con el contenido como más le guste.

Nuestros clientes son receptivos a este tipo de experiencias al referirse a sitios como el New York Times, que cuentan con artículos especiales que tienen mayores niveles de interactividad y calidad en su producción. Sin embargo, a menudo lo ven como un conjunto de técnicas avanzadas fuera del alcance de sus plataformas de gestión de contenidos o de sus equipos editoriales. En Aplyca hemos investigado estas prácticas bajo nuestra iniciativa Aplyca Labs y compartimos aquí nuestros conocimientos con ustedes.

Sabemos que nuestros clientes quieren resaltar su contenido, honrar la premisa de construir experiencias digitales sobresalientes y trascender la producción de contenido orientado únicamente a texto e imágenes. Quieren ir más allá integrando datos, visualizaciones, animaciones y otros elementos dentro de la estructura de sus páginas.

Cuándo utilizar Scrollytelling

Las herramientas de scrollytelling les permiten a los creadores de contenido producir narrativas que se desarrollan orgánicamente, adaptándose al ritmo y las preferencias del usuario. A medida que el lector interactúa con la página se revelan más y más capas de contenido: cada desplazamiento integra a la perfección elementos multimedia como videos, mapas y animaciones. Una técnica consiste en utilizar “steppers” en los que el lector hace clic paso a paso para desplegar capas de la historia.

Como explica Bill Shander en su artículo "El pasado, presente y futuro de scrollytelling", las prácticas utilizadas en la web para mantener a la audiencia interesada y evitar perder lectores han cambiado con el tiempo. Al principio, lo habitual era producir artículos más cortos que hacían que los lectores dieran clic más veces para acceder a contenido adicional. Sin embargo, pronto se hizo evidente que el desplazamiento o “scrolling” era una forma más fácil e intuitiva de interactuar con el contenido. El “scrolling” se considera ahora fundamental para una buena experiencia de usuario.

En lugar de consumir contenido pasivamente, es posible transformarlo y hacerlo más atractivo cuando los lectores se convierten en participantes activos, eligiendo qué tan profundo se sumergen en cada tema y qué caminos exploran. Esta interactividad fomenta una conexión más profunda con el material, haciendo que los temas complejos sean más accesibles.

Las herramientas de scrollytelling son excelentes para:

• Visualización de datos: la información compleja a menudo puede resultar difícil de transmitir. Presentarla con infografías, gráficos y animaciones puede resultar útil.

• Narración de historias: contar narrativas que fluyen a medida que el lector interactúa con ellas crea una experiencia más atractiva.

• Contenido educativo: estas herramientas y prácticas funcionan bien con fines educativos, como lecciones de historia y presentaciones explicativas.

• Informes y presentaciones: Scrollytelling es excelente para mostrar productos, resultados de la empresa y básicamente cualquier tipo de resultado.

• Artículos periodísticos: Tras el impacto del reportaje Snowfall del New York Times, las técnicas de scrollytelling han tenido un auge significativo en el periodismo. La forma en que se integran textos, imágenes, videos y elementos interactivos ha potencializado los informes de investigación para una experiencia noticiosa más inmersiva.

Elementos de scrollytelling

Un elemento central de scrollytelling es el énfasis en el diseño como una herramienta de narración. Los componentes típicos de scrollytelling incluyen infografías, gráficos 3D, animaciones de texto y elementos de audio. Algunas de las prácticas más utilizadas son:

• Desplazamiento horizontal

• Posición fija (sticky position)

• Desplazamiento de video

• Desplazamiento de paralaje (parallax scrolling)

• Desvanecimientos activados por el desplazamiento o “scroll”

• Animaciones activadas por el desplazamiento o “scroll”

• Indicadores de progreso de desplazamiento

Las prácticas que los creadores y editores de contenido decidan utilizar dependerán, entre otros factores, de los datos que necesiten comunicar, la historia que quieran contar, la audiencia a la que está destinado el contenido y el objetivo final de la experiencia inmersiva.

Cada aspecto, desde el diseño y la tipografía hasta los esquemas de color y las transiciones, contribuye al impacto de la narrativa. Las señales visuales guían la progresión del lector, mientras que las animaciones sutiles añaden profundidad y contexto. El resultado es una experiencia inmersiva que cautiva los sentidos y resuena mucho después de que se apaga la pantalla.

Las habilidades editoriales para producir este contenido van más allá de una narrativa textual y requieren habilidades narrativas. Esta estructura de contenido es más similar a los medios cinematográficos o de animación y puede beneficiarse del uso de herramientas como un guión gráfico (“story board”) u otras prácticas similares para definir experiencias interactivas y no lineales.

En Aplyca podemos ayudarle a determinar las mejores opciones de scrollytelling para sus necesidades.

Arquitectura web para scrollytelling

Con una arquitectura de información adecuada y un front-end moderno, las prácticas de scrollytelling se pueden adoptar dentro de los sistemas de gestión de contenidos actuales sin la necesidad de escribir código manualmente para cada contenido.

​​Por ejemplo, realizar un híbrido entre contenido producido a mayor velocidad y con menor interactividad junto con elementos únicos utilizando técnicas de scrollytelling permite enriquecer la experiencia o ayudar a explicar conceptos complejos a los usuarios.

Algunas de las herramientas de desarrollo que se pueden utilizar para crear experiencias y contenido web interactivo incluyen:

• Herramientas de desarrollo: estas requieren ser experto en trabajar con código. Algunos ejemplos son: scrollama.js, waypoints.js, scroll magic, scrollstory.js, HTML y CSS.

• Plataformas y herramientas de diseño web: son excelentes para diseñadores gráficos y diseñadores web y no requieren escribir código. Algunos ejemplos son: Bubble, Flourish, Adobe After Effects, Motion (Apple), LottieFiles, RiveApp, Spline. 

• Plataformas de contenido inmersivo: diseñadas para editores y equipos de contenido. Algunos ejemplos son: Shorthand, vev.design, Webflow, Treedis.

Recuerde que el scrollytelling debe integrarse con cuidado para evitar que su uso resulte en experiencias digitales lentas, confusas o interrumpidas. Como explica acertadamente Robert Kosara, varias cosas pueden salir mal al usar scrollytelling. Este es el caso cuando el desplazamiento o “scrolling” provoca comportamientos inesperados o desalineación entre la forma del contenido y la historia que se quiere contar. Para que esta experiencia de inmersión funcione bien, debe experimentarse de forma fluida y sin esfuerzo.

Contáctenos

El uso de scrollytelling ofrece posibilidades ilimitadas con los avances en la tecnología digital para responder a las crecientes expectativas de los usuarios. Contáctenos para discutir cómo nuestro equipo puede ayudarle a utilizar el poder del scrollytelling para informar, inspirar y conectarse con sus lectores.