El impactante Scrollytelling

Facebook
Twitter
LinkedIn

¿Qué utilizan los creadores de sitios web para infundir su narración visual: sus mensajes, su prestigio estético y, por supuesto, una resonancia más profunda entre los usuarios? ¿Cuánto pueden cobrar vida nuestras historias de marca en la hoja en blanco de una página web? 

La respuesta es scrollytelling: una forma ilustre y cada vez más popular de aprovechar una interfaz digital y transmitir su intrincada historia. 

Pero, ¿qué es el scrollytelling? ¿Por qué es uno de los favoritos de los creadores de sitios web? Las respuestas son obvias: sus efectos de diseño avanzados eclipsan las técnicas tradicionales que están potencialmente desactualizadas y no le hacen justicia a su contenido. 

Pero, ¿es el scrollytelling siempre el mejor método para contar su historia? ¿Cómo pueden los creadores de sitios web identificar cuándo esta técnica transmitirá mejor sus mensajes y el valor del producto a los visitantes?

 

Este es, sin duda, un interesante nicho de diseño visual y de información. Vamos a mojarnos los pies con el scrollytelling, hasta los tobillos si se quiere, y admire los casos prácticos de creadores de sitios web que utilizan el scrollytelling para concretar sus objetivos de estrategia de contenido y de marca.

Tabla de contenidos

¿Qué es el Scrollytelling?

Scrollytelling es la fusión del scrolling y del storytelling: una forma de contar dinámicamente historias largas a medida que el usuario se desplaza. En este marco, la actividad del usuario desencadena transiciones entre elementos y métodos de estilo de todo tipo: textos alternos, imágenes cambiantes, fondos interactivos, efectos de animación, cambios de tamaño y más. Juntos, cada elemento se combina y se conglomera para formar una historia fluida y seductora en movimiento. 

Estos efectos visuales se esfuerzan por cautivar a su audiencia, ofreciéndoles contenido atractivo en bandeja de plata. Scrollytelling también se conoce como “visualización narrativa”: una serie de elementos visuales secuenciados juntos de acuerdo con una lógica que transmite un mensaje específico a los visitantes. 

Lo más singular de esta innovadora técnica de narración es que los usuarios contribuyen a su narrativa a través de sus propios gestos individuales. Esto sucede tanto a escala colectiva como individual, ya que puede configurar ajustes independientes para cualquier elemento, como animaciones de entrada cronometradas o efectos de movimiento.

7 Casos de uso donde el Scrollytelling es la respuesta

No encontrará una regla escrita sobre cuándo usar el scrollytelling para su sitio web, pero encontrará casos de uso en los que el scrollytelling es sumamente propicio para el “engagement”  del usuario. 

Estos escenarios van desde historias cronológicas, storytelling de marcas, periodismo, sitios web de comercio electrónico y muchos más. A medida que los creadores de sitios web descubren más y más técnicas de visualización de contenido, nacen más casos de uso del scrollytelling.

Caso de uso #1: Periodismo de formato largo

El virtuosismo de Scrollytelling como forma de periodismo radica en la capacidad de utilizar medios digitales para transmitir información e historias complejas. La historia del chef con dos estrellas Michelin José Andrés en el HuffPost se ajusta a este proyecto: fundó “World Central Kitchen” en 2010, proporcionando soluciones inteligentes para acabar con el hambre y la pobreza a raíz de los desastres.

Una vez que la pandemia de COVID-19 golpeó duramente al mundo, Andrés reconoció la necesidad de mantener la conciencia sobre la escasez mundial de alimentos y distribuir comidas en los barrios de bajos ingresos de las grandes ciudades. Hay un montón de información para transmitir sobre la historia de respuesta a la pandemia de Andrés; lo que inspiró la fundación de World Central Kitchen, la actividad de ayuda en casos de desastre de Andrés desde 2010, el libro que escribió: “We Fed an Island” y mucho más. 

Entonces, en el caso de José Andrés, su cuento de superhéroe culinario se transformó en una experiencia dinámica y atractiva.

Usted también puede hacerlo

Caso de uso #2: El Storytelling de marca

Si aún no se ha dado cuenta, a nosotros, como creadores de sitios web, nos encanta el scrollytelling. Incluso nos hemos encargado de usar Scrollytelling en una de nuestras publicaciones de blog más recientes: “Elementor celebra 5 años”. En esta publicación, compartimos con orgullo algunos de nuestros logros más notables como pioneros en la creación de sitios web, junto con datos divertidos sobre el equipo de Elementor. 

Usamos algunos de nuestros widgets favoritos para darle vida a hechos y declaraciones simples, acentuando el elemento de celebración del cuento de nuestro quinto cumpleaños. A medida que se desplaza hacia abajo, algunos elementos se mueven, algunos cambian de forma y algunos simplemente permanecen fijos donde están. Todo lo que se necesitó fueron algunas animaciones de Lottie, íconos giratorios, animaciones de entrada y, por supuesto, carga diferida: y nació un formato de publicación vibrante y listo para usar.

Usted también puede hacerlo

Caso de uso #3: Páginas de productos

La dinastía Apple tiene la ventaja en términos de lo que pueden hacer con su scrollytelling: pueden concentrarse mucho en las imágenes y tienen menos necesidad de explicar sus productos o proporcionar contexto sobre su valor agregado. 

Esto se debe principalmente a que los productos de Apple son tan populares que, una vez que adquieren un nuevo producto de Apple, cualquier persona familiarizada con el mercado de dispositivos móviles puede reconocer fácilmente el valor agregado y la singularidad del artículo. 

Y así, cuando se trata de scrollytelling, Apple tiene la ventaja de enfatizar los intrincados detalles de su mercancía, en lugar de equilibrar las imágenes con los textos. 

Esto es exactamente lo que vemos en la página del producto AirPods Pro, que tiene la libertad de mostrar interactivamente las diferentes opciones de color de sus auriculares y mostrar un caso de uso de un cliente feliz usándolos. Son libres de elegir muy pocas palabras y pueden ir directamente al grano de lo que hace que los auriculares sean únicos y cómo mejoran la experiencia del cliente, todo sin mucha explicación de lo que realmente es el producto.

Usted también puede hacerlo

Caso de uso #4: Tiendas en línea

Cuando su producto de bebida insignia tiene un hermoso diseño de empaque, el storytelling de su producto puede dispararse. Cuanto más intrincados y elaborados sean las imágenes y los diseños de su marca, más profundidad podrá agregar a su historia. ¿Quién hubiera pensado que se podía decir tanto sobre un tónico social con infusión de cannabis?

Una historia sobre una bebida tan innovadora y original con múltiples facetas involucra muchos detalles: los ingredientes, la historia detrás de ella, cómo se produce, dónde comprarla, cuándo beberla, etc. Con tantos puntos para incluir, el scrollytelling incorpora muchos hechos y cifras en un paisaje visual. 

Y ahora el desafío: abordar muchos pequeños detalles sin sobrecarga cognitiva o demasiada estimulación visual. Aquí es donde los efectos de paralaje resultan útiles, ya que animan los círculos simples y delineados que flotan sobre un fondo sólido. Con interacciones minúsculas que aparecen por primera vez como pequeños detalles de diseño, las pequeñas animaciones de repente se vuelven más grandes.

Usted también puede hacerlo

Caso de uso #5: Portafolios creativos

Contar la historia de su trayectoria profesional y los proyectos que ha realizado tiene el potencial de crear una trama que se complica a medida que se desplaza hacia abajo en la página. Diferentes efectos visuales y animaciones pueden mejorar las miniaturas del proyecto, mostrando su colección de creaciones individuales como una entidad cohesiva. 

El desarrollador de front-end portugués Fábio Azevedo tiene una galería deslizante única donde muestra su flujo de trabajo creativo. Con formas de imagen simples y listas para usar, Fábio crea una galería de miniaturas que logra mostrar muchos estilos de imagen diferentes en una fila, sin bordes, que no parece demasiado caótica o abrumadora para el usuario. Como vemos, aplica su talento consistentemente a cada proyecto, pero cada uno tiene una individualidad concertada. 

La cohesión de la galería de Fábio también es posible gracias a los efectos de desplazamiento que usa, donde la superposición de imágenes desaparece al desplazarse, revelando el nombre del proyecto, el nombre del cliente y los lenguajes de codificación utilizados.

Usted también puede hacerlo

Caso de uso #6: Historias cronológicas e históricas

¿Ha estado alguna vez en Amsterdam? Si no lo ha hecho, no es necesario que viaje muy lejos. Este sitio construido por Marcus Brown y Aristide Benoist cuenta la historia histórica de los emblemáticos canales de Ámsterdam, construidos en el siglo XVII. En resumen, puede considerar que este scrollytelling horizontal es una experiencia turística digital.

Algunos podrían decir que la historia del paisaje geográfico y urbano es aburrida, pero el sitio web de CANALS demuestra lo contrario. La yuxtaposición de imágenes escénicas con fondos de arriba a abajo y textos negros pesados hace que sea increíblemente más fácil apreciar tanto el contenido de la imagen como las palabras escritas de la historia. 

No debemos olvidar que “Canals” comienza su historia a mediados del siglo XIII, hasta el siglo XXI. Como vemos, encontrar el equilibrio de imágenes, texto y movimiento armoniosamente en un espacio confinado no es una hazaña pequeña, pero definitivamente es factible. 

Usted también puede hacerlo

Caso de uso #7: Eventos actuales

Los sitios web comprometidos con la concienciación sobre una causa o evento deben hacer que su historia sea lo más efectiva posible. En esencia, el objetivo de un sitio web como “Every Last Drop” es dar a conocer a las masas su campaña para la conservación del agua. ¿Qué mejor manera de hacer esto que una historia similar a una caricatura de un astronauta pelirrojo que se prepara para trabajar por la mañana?

La cantidad de agua que se desperdicia en el mundo actual es alta, por decir lo menos. En el Reino Unido se desperdician 150 litros de agua por día, una ducha de cinco minutos usa 40 litros, un baño regular usa 80 litros. Es posible que esperáramos que los párrafos de los textos siguieran las imágenes y explicaran cómo estas cifras son posibles para empezar. 

Scrollytelling al rescate. En lugar de largas explicaciones sobre los resultados de la investigación y el razonamiento científico, una historia ilustrada sobre un Joe regular que se dirige al trabajo nos dice todo lo que necesitamos saber. El astronauta representa a un gran segmento de la población mundial, y seguir su rutina diaria nos muestra qué tan rápido el lego consume agua sin darse cuenta. Las pruebas están ahí y no hay una necesidad real de visualización de datos, gráficos, paneles y, sobre todo, párrafos explicativos de arriba a abajo. 

Usted también puede hacerlo

Ahora es su turno de Scrollytell

Hemos hablado de las muchas caras del scrollytelling: cuándo usarlo, qué funciones lo hacen posible, los ejemplos más prometedores y por qué vale la pena. 

Los creadores de sitios web tienen muchas tendencias de la industria para mantenerse al día: efectos de movimiento, diseño 3D, elementos interactivos, y ahora puede combinarlos todos. ¡Manténganos al tanto de sus proyectos de scrollytelling y asegúrese de compartirlos en los comentarios para que podamos echar un primer vistazo!

Autor / Artículo Original

IconMetricasLight

No se vaya sin llenar este

Test de Métricas

Este test es para todos los que saben que lo que
no se puede medir, no se puede mejorar.
Descubra nuevas oportunidades con el único
test de métricas web que incluye las 6 dimensiones
estructurales de optimización.

Este test es para todos los que saben que lo que no se puede medir, no se puede mejorar.
Descubra nuevas oportunidades con el único test de métricas web que incluye las 6 dimensiones estructurales de optimización.

Además es gratis

MetricasLightbox
MetricasLightbox
LogoCircle

¿Necesita Ayuda?

Nuestros expertos esperan por usted. Diligencie los datos para iniciar el chat

© 2022 Yoonta , All rights reserved
sub

Suscribirse

Ingrese sus datos, haga parte del Club Cosecha Conversiones y recibirá información actualizada.