Creando un buen storytelling en diseño web

El arte de contar una historia es algo que ha ido siempre vinculado a las manifestaciones culturales humanas. Las historias orales existen desde mucho antes que la escritura y aprendemos, desde niños, la forma narrativa de una buena historia mucho antes que a escribir.

La forma en que contamos una historia llevada al mundo de la publicidad tal y cómo la conocemos hoy se vale de esos mecanismos que ya pertenecían a nuestra cultura desde los anales de la Historia y por ese gusto por escuchar una buena historia. Podemos pensar en anuncios que hayamos visto que nos han emocionado, que conseguimos recordar a lo largo de los años por cómo nos hicieron sentir en un momento por la historia que nos contaban, más allá de lo que la marca nos quiera vender. Y es eso lo que consigue la estrategia de la marca, generar una empatía con el usuario o el consumidor, que sintamos vibraciones positivas que nos hagan pensar en ella sin dudar cuando tengamos la necesidad de adquirir un producto que ella nos puede ofrecer.

Cuando hablamos de una página web, la historia se cuenta de una manera similar pero con una importante diferencia, el usuario puede marcar su ritmo, a través del scroll o de la navegación a través de las diferentes páginas, la propia interactividad que caracteriza a la página web hace que el usuario “controle” el ritmo de esa historia en la que en principio no hay una música que marque el climax de la historia, no hay un narrador que nos guíe pero hay otros elementos que pueden involucrar de manera similar al espectador. En una web nos valdremos del diseño de espacios, de formas o colores para generar pausas, elipsis y resto de elementos que caracterizan la narración de una historia.

Contar una historia

Ya sabemos contar una historia, desde el teatro griego, la estructura de introducción, nudo y desenlace se ha extendido en cualquier forma narrativa y tan sólo deberemos seguirla. La clave, como en cualquier propuesta de diseño es conocer bien a nuestro público, cuáles son sus anhelos, sus frustraciones y sobre todo cómo podemos ayudarle desde nuestra producto o servicio. Si esto lo tenemos claro, tendremos también claro, qué contarle.

Comenzaremos por el primer acto, introduciendo a nuestros personajes, que pueden ser los servicios que la empresa ofrece o bien los productos que queremos mostrar. Tras las presentaciones necesitaremos un elemento de suspense y una llamada a la acción para que el usuario tenga la curiosidad suficiente de avanzar en la narrativa y continuar haciendo scroll o navegando por nuestra web.

Llegamos al segundo acto, donde todo debe cobrar sentido y nos preparamos para la solución de aquél gran problema que es planteado, causando un climax generado por su eminente solución. En el tercer acto, llegamos a la resolución del problema y a la descripción de los pasos a seguir para llegar a ésta y ser el cliente el verdadero protagonista de la historia. Si conseguimos que el usuario llegue aquí, ya tendremos mucho ganado.

Fuente: https://elementor.com/blog/storytelling-in-web-design

Los elementos del storytelling

A la hora de contar nuestra historia y de generar ritmo nos valdremos de elementos y recursos del diseño gráfico y web que nos ayudarán en la generación de sensaciones en el usuario.

El contenido

Imposible no fijarnos en él. Aunque hay multitud de estudios que remarcan que el 90% del contenido no se lee por los usuarios en las páginas web, ese 10% que nos queda es muy relevante para conseguir transmitir lo que queremos contar. En este sentido debemos tratar también la jerarquía tipográfica de los textos, no es sólo qué decimos sino cuándo y cómo lo hacemos, las pausas, la longitud de las frases, todo ello generará una narración coherente en la que el lector se sentirá acompañado y guiado.

Elementos formales

Color, linea, formas, composición, perspectiva, espaciados…, todos ellos son elementos que nos ayudan a transmitir la idea que vamos a contar, muy relacionados con aspectos como los principios de la Gestalt en percepción o la psicología del color.

Interactividad y llamadas a la acción

La forma en la que guiamos al usuario a través de la página web hace que interactúe con la narración como si estuviera participando de la historia que le estamos contando, por lo que usar los elementos interactivos en un lugar adecuado, plantear llamadas a la acción cuando el usuario espera interactuar, es crucial para el éxito de nuestra narrativa.

Un buen ejemplo lo tenemos en la página de equipo de la agencia australiana Humaan la cuál juega mucho con el humor donde los trabajadores de la agencia se muestra en actitudes divertidas con ambientaciones cuidadas tanto en las fotos de grupo como en las fotos individuales del equipo que son muy divertidas y personales. A lo largo de esta sección la agencia nos presenta al equipo, sus protagonistas, generando simpatía hacia ellos para luego contarnos de qué son capaces.

Fuente: https://www.humaan.com

Scrollytelling

Otro variación del storytelling que es exclusiva del diseño web es el llamado “Scrollytelling” que es una manera muy creativa de crear una animación a la vez que el usuario hace scroll en la página. Con este recurso se han llegado a contar historias de manera muy creativa, dejando al usuario simplemente los controles de avanzar, retroceder o parar la animación a la vez que éste controla el scroll. Conocer estos ejemplos es muy útil para coger ideas para nuestros nuevos proyectos de diseño.

Ponemos el ejemplo de la empresa Mirrows, dedicada a la gestión de NFCs para músicos que usa una animación en scroll horizontal que genera una narración como si se tratase de una linea temporal en la que se van sucediendo sucesos y se generan micro interacciones.

Fuente: https://www.mirrows.co

Si revisamos la página de Ipod Pro, vemos un claro ejemplo de cómo la marca nos sumerge en un universo que forma parte de su imagen, negro, blanco y gris junto a imágenes y frases impactantes nos sugieren lujo y diseño.