Cómo diseñar narrativas poderosas en dispositivos móviles

Las historias no siempre tienen que contarse en el formato Érase una vez…. Echa un vistazo a las películas, por ejemplo. Algunas historias se cuentan en orden cronológico, mientras que otras saltan alrededor de una línea de tiempo. Hay historias contadas desde la perspectiva del protagonista mientras que otras permiten ver la historia desde el punto de vista de todos. Además, las historias pueden ser tristes, divertidas, dramáticas o todas las anteriores.

Hay un montón de variaciones en cómo se puede contar una historia. Sin embargo, hay una cosa que todos deben tener en común:

Necesitan de alguna manera atraer al lector a la narrativa.

La narración de historias es una herramienta muy poderosa para los sitios web, pero se aplican las mismas reglas. No importa cómo cuente la historia, solo necesita atraer al visitante.

Hoy, lo guiaré a través de varias técnicas de narración de historias y le daré algunas ideas sobre cómo puede diseñar este tipo de narraciones en sus propios sitios web móviles o PWA.

Cómo diseñar narrativas poderosas en dispositivos móviles

La narración de historias es una gran herramienta para sitios web móviles.

Una de las razones es que la pantalla más pequeña te obliga a ser más conciso con la narrativa . Eso significa que puede hacer que los visitantes lleguen más rápidamente al clímax de su historia, lo que acelerará su tiempo de conversión.

Otra razón por la que la narración funciona tan bien en dispositivos móviles es porque es más fácil atraer a los visitantes a la historia. Todo lo que necesita hacer es darle a su sitio una sensación de libro y rápidamente se sumergirán en él.

Además, puede dejar que las imágenes hablen la mayor parte del tiempo y reducir las largas historias que los fundadores de la empresa querrían contar sobre sus empresas.

Hay una industria, en particular, que creo que hace un trabajo excepcional al contar historias de esta manera, y esa es la industria de la cerveza y el alcohol. Si lo piensa bien, este tipo de empresas no pueden darse el lujo de simplemente empujar sus productos en la cara de los consumidores. Aquí hay algunas razones de por qué:

1. “Vamos a emborracharte” no es un punto de venta muy fuerte o único. Pero una historia que atraiga al cliente y lo haga parte de la narrativa puede serlo.
2. Para evitar la parálisis de análisis que conlleva elegir un tipo de licor o cerveza entre docenas de opciones similares, las marcas usan historias para diferenciarse.
3. Puede construir relaciones leales y a largo plazo con los clientes de manera más efectiva al convertir sus productos en experiencias únicas.

En pocas palabras : al crear sitios para productos o servicios en espacios altamente competitivos, la narración puede ser un verdadero cambio de juego. En cuanto a cómo lograr eso a través del diseño, veamos algunas de las técnicas de narración más comunes y ejemplos que muestran cómo se logran.

Ginebra de aviación

¿Qué tipo de historia cuenta el sitio?
El viaje guiado

¿Qué tipo de empresas se benefician de este tipo de narración?
Este tipo de técnica de narración es mejor para las empresas nuevas que tienen un fuerte componente de marca. De esa manera, la compañía no es solo otro negocio parecido que ingresa al espacio. Ofrece algo más entretenido y atractivo que alienta a los posibles clientes a subirse al carro, incluso el día 1.

La “mascota” es una de las mejores maneras de hacer que este tipo de narración funcione porque se convierte en la guía de los visitantes para explorar el sitio y todo lo que tiene para ofrecer.

Piense en Flo de Progressive, William Shatner para Priceline o The Old Spice Guy. En el momento en que ves estas mascotas, no puedes evitar preguntarte a qué tipo de "aventura" te llevarán a continuación. Es una manera fantástica de construir seguidores leales.

¿Cómo es el método narrativo de The Guided Journey?
En el caso de Aviation Gin, el copropietario Ryan Reynolds no solo ha prestado su poder de estrella, sino también el sentido del humor por el que es bien conocido a la marca.

Al ingresar al sitio móvil, la cara de Reynolds es lo primero que ven los visitantes:

El video (y la cita ridícula debajo) es lo que esperarías de Reynolds, haciendo bromas mientras presenta a los visitantes un mundo absurdo que probablemente inventó en el acto. También es breve, va al grano y sin duda dejará a los visitantes pensando:

Vale, vale, tengo que probar esta ginebra.

Desplácese hacia abajo una vez y encontrará esta invitación para conectarse con Reynolds a través del boletín de Aviation Gin:

Aunque reduce un poco el humor de Reynolds, continúa retratándolo como el piloto de este viaje que los visitantes están a punto de emprender. Y si sabemos algo sobre lo que quieren nuestros usuarios, es un movimiento brillante. Reynolds no solo aparece frente a ellos con un anuncio ocasional (como hacen tantas empresas con sus portavoces). De hecho, está integrado en la experiencia.

Además, Aviation Gin ha construido el resto del sitio web para que funcione como un vuelo, con ingeniosos juegos de palabras y gráficos relevantes.

Este sitio web de una página está muy bien hecho de principio a fin, y una gran parte de eso se debe a la historia con la que se han comprometido:

• Somos Aviation Gin.
• Ryan Reynolds lo llevará a su destino.
• ¿No quieres venir a dar un paseo?

Es una gran narrativa. Y para aquellos que no saben quién es Ryan Reynolds, el sitio web abotonado con sus analogías de vuelo y juegos de palabras también debería ser suficiente para atraerlos.

pacto-navio

¿Qué tipo de historia cuenta el sitio?
El cuento inmersivo

¿Qué tipo de empresas se benefician de este tipo de narración?
Este es otro enfoque efectivo para contar historias si está creando un sitio para un nuevo negocio. En este caso, sin embargo, no hay una persona de la vida real que pueda acompañarlos en el viaje de la marca. En cambio, debe confiar en la fuerza de la marca y su capacidad para diseñar algo que se sienta inmersivo.

Esto será especialmente útil si la empresa no ha existido durante mucho tiempo y no tiene mucho historial o reconocimientos a los que recurrir. Solo asegúrese de tener un enfoque claro para su historia, para que los visitantes no intenten desviarse del camino que ha creado para ellos.

¿Cómo es el método narrativo de The Immersive Tale?
Para construir una historia inmersiva en un sitio web móvil, debe enmarcarla como una aventura. De esa manera, los visitantes ni siquiera piensan en el botón de menú. En su lugar, están listos para seguirle el juego y dejar que los guíe por el sitio.

Pacto-Navio maneja bien este tipo de narración. Hay una serie de razones por las que esto también funciona.

Primero, cada parte de la historia tiene una página completa dedicada:

Esta, por ejemplo, es la página de inicio. Al principio, todo lo que ven los visitantes es la brújula, pero luego las dos manecillas se mueven desde el este (Francia) y el oeste (Cuba) para simbolizar los dos países de donde proviene el ron.

Esta es otra razón por la que este sitio se siente tan inmersivo. Desde el principio, el sitio web mueve activamente a los visitantes desde el punto de entrada hasta su destino. Y lo digo literalmente .

El sitio está lleno de animaciones. No son abrumadores ni innecesarios. Cada uno de los elementos en movimiento (incluso las transiciones entre los cambios de página horizontales) es sutil pero relevante.

El diseño del sitio en su conjunto debe hacer que los visitantes se sientan como si estuvieran leyendo una historia épica de aventuras. Pero este es un sitio web; no un libro que se limita a contar una historia en las páginas.

El sitio móvil de Pacto-Navio permite a los visitantes decidir cuándo quieren detenerse y explorar un poco más. Y cuando lo hacen, se revela más de la historia:

En cierto sentido, este estilo de sitio web, donde cada página está representada por una sola tarjeta y se pueden hojear como las páginas de un libro, es una de las formas más atractivas de contar una historia.

Cada página y el gráfico correspondiente se sirven de uno en uno. Luego, cuando los visitantes eligen explorar más, la historia se relata brevemente mientras pequeñas animaciones los mantienen enfocados en avanzar por la página. Realmente se siente como si estuvieras leyendo un libro.

samuel adams

¿Qué tipo de historia cuenta el sitio?
La carta de amor

¿Qué tipo de empresas se benefician de este tipo de narración?
Si alguna vez leyó un libro o vio una película donde la ubicación física (generalmente una ciudad) tiene un papel que desempeñar en la historia, entonces sabe cuán emocional puede llegar a ser una experiencia.

Tome cualquiera de las películas de Woody Allen, por ejemplo. Muchos de ellos están ambientados en la ciudad de Nueva York o en ciudades exuberantes de Europa, y se siente como si las ciudades mismas fueran personajes. Lo mismo ocurre con los libros. Stephen King hace esto mucho, como con el Overlook Hotel en The Shining o Shawshank Prison en The Shawshank Redemption . Los lugares juegan un papel tan importante como las personas en las historias.

Lo crea o no, esto es algo que puede hacer con su sitio móvil si es para una empresa con fuertes vínculos con un área geográfica.

¿Cómo es el método narrativo de The Love Letter?
Samuel Adams es una cervecería con fuertes lazos con Boston, Massachusetts.

La gente de Boston tiene una tendencia a ser defensores ferozmente leales de las marcas y negocios locales, y la relación que tienen con esta cervecería no es diferente. Por eso no sorprende que el sitio web de Samuel Adams esté dedicado a:

1. la ciudad de Boston,
2. La gente de Boston.

Piense en ello como una carta de amor a todas las cosas de Boston.

El sitio móvil comienza con lo siguiente:

No se menciona la cerveza de Samuel Adams en esta imagen de héroe. Esta es una llamada a la acción: brinda por alguien .

Este video muestra a los comediantes brindando por las personas que cambiaron sus vidas y los empoderaron para hacer lo que hacen. Es una forma muy sincera de iniciar a las personas en su viaje con Samuel Adams.

Un poco más abajo en la página, la cervecería explica por qué los comediantes hicieron estos brindis en primer lugar:

Pero no son solo los famosos a los que la marca ha pedido participar en su brindis colectivo. El siguiente video es una oda a la ciudad de Boston y sus residentes.

Los visitantes ven a los residentes famosos de Boston (como Big Papi de los Medias Rojas de Boston dando su amor y respeto a la ciudad), pero no son solo las figuras de renombre las que hablan en el video:

Además de ver hermosas tomas de la ciudad de Boston, puedes ver a la gente real de la ciudad. En la captura de pantalla de arriba está uno de los sobrevivientes del bombardeo del maratón de Boston. Pero también puedes ver un equipo de remeros dirigiéndose al río Charles, una barbería y gente boxeando en un gimnasio.

Claro, las botellas de cerveza de Sam Adams se pueden ver en los brindis que da la gente, pero sigue siendo un video conmovedor y una hermosa oda a la ciudad de Boston. Y debido a que este sitio está completamente separado de la tienda de Samuel Adams, ayuda a mantener el enfoque de las personas en el proyecto de tostadas y el sentimiento positivo que genera.

Wintrip Brew Company

¿Qué tipo de historia cuenta el sitio?
La novela gráfica

¿Qué tipo de empresas se benefician de este tipo de narración?
Hay toneladas de ejemplos de novelas gráficas y cómics que luego se convirtieron en películas o programas de televisión exitosos:

• Los muertos vivientes
• vigilantes
• Ciudad del pecado
• V de Venganza
• Fantasma en la concha

A decir verdad, este estilo de narración no funcionará para la mayoría de las marcas porque requiere que una marca sea vanguardista, oscura o que supere los límites para que funcione. También necesita una marca que esté 100% enfocada en su producto. Eso no significa que no pueda tener una historia propia original o inspiradora para contar, pero el ritmo de una historia como esta realmente debe centrarse en lo que estás vendiendo.

Si eso es algo con lo que está trabajando y tiene las habilidades creativas para diseñar un sitio que represente las páginas dramáticas y de ritmo rápido de una novela gráfica, es una excelente manera de capturar y mantener la atención de su audiencia.

“

¿Cómo es el método de narración de The Graphic Novel?
No hay una sola forma de diseñar sitios web utilizando este método de narración. Eso es porque hay mucha variación en la forma en que se diseñan las novelas gráficas y los cómics. Batman , por ejemplo, es oscuro y malhumorado. Watchmen tiene que ver con el diseño retro exagerado. Y, luego, está The Walking Dead que simplemente se siente sucio.

Tienes que decidir qué tipo de "ventaja" quieres darle a tu sitio. Pero una cosa es segura: debe tener un contraste sorprendente entre la oscuridad y la luz.

Este es el sitio móvil de Wintrip Brew Co.:

Si no supieras nada mejor, podrías pensar que este es un sitio para una novela gráfica o incluso un videojuego.

Pero esta es, de hecho, la forma en que Wintrip Brew Co. da la bienvenida a sus visitantes, y es una excelente primera impresión. Después de todo, ¿quién diablos se tomaría la molestia de diseñar una página de inicio para que pareciera una novela gráfica si el resto del sitio no hiciera lo mismo?

No hay razón por la que los visitantes no quieran seguir tropezando por este camino.

Cada centímetro de este sitio se siente como una novela gráfica. Hay personajes extraños dispersos por todas partes, que invitan a los visitantes a explorar más de cada página (como el chef con ojos de zombi de arriba).

Luego, está la historia real contada en las páginas:

La tipografía se mantiene simple y, sin embargo, el llamativo contraste de color le da una ventaja. Si los visitantes no se dan cuenta de las señales sutiles que emite el diseño de la fuente, entonces las palabras que están repletas de actitud ciertamente lo harán.

Si bien me encantaría mostrarle cómo está diseñada la página "Cerveza", las palabras que contiene son increíblemente arriesgadas. Basta con decir que lo que ve arriba es la punta del iceberg en términos de empujar los límites.

Pero está bien porque de eso se trata esta marca. Es evidente, incluso en la forma en que elaboran sus cervezas, que quieren atraer a los bebedores de cerveza que buscan algo más oscuro y vanguardista. Y el diseño de este sitio web ha establecido el tono perfecto para eso.

Yuengling

¿Qué tipo de historia cuenta el sitio?
La línea de tiempo

¿Qué tipo de empresas se benefician de este tipo de narración?
La línea de tiempo es mejor utilizada por marcas que tienen un largo historial. Estas son las empresas que han estado en funcionamiento durante más de 100 años. También se aplicaría a las empresas que tienen docenas de hitos que han acumulado a lo largo de los años.

Es posible que no obtenga muchos de estos que pasan por su camino, pero cuando lo hace, The Timeline es una hermosa manera de contar la historia de una empresa (y sus leales patrocinadores).

En cuanto a por qué optaría por este método de narración, es una de las formas más eficientes de hacerlo. De lo contrario, terminaría con páginas increíblemente largas tratando de recapitular todo lo que una marca ha logrado a lo largo de los años, y eso sería una pérdida de tiempo tratando de diseñar algo así y una gran prueba para la paciencia de sus visitantes.

En cambio, una línea de tiempo corta una historia en piezas pequeñas, digeribles y aún muy impresionantes.

¿Cómo es el método de narración The Timeline?
Este es obvio. Comenzará con el comienzo de la historia de la marca (por lo general, cómo se conocieron los fundadores o se les ocurrió su idea) y terminará hoy. En el camino, compartirá algunas palabras y algunas imágenes llamativas para resaltar los hitos.

Veamos el ejemplo de Yuengling, que es la cervecería más antigua de los Estados Unidos. La línea de tiempo de la compañía comienza con un solo párrafo introductorio y un video:

Los visitantes que quieran tomarse el tiempo para obtener esta introducción pueden hacerlo con facilidad. El resto puede pasar directamente a la línea de tiempo que comienza con la fundación de la empresa en 1829.

Lo que siempre es bueno de la línea de tiempo de una empresa es poder ver qué tan consistente ha sido desde el principio. Incluso si una empresa ha cambiado de manos o ha sufrido cambios de nombre, muchas veces el diseño de su marca o el producto en sí permanece sin cambios.

Puede ver un indicio de eso arriba con el diseño de Porter, que no es diferente al diseño actual de algunos de los empaques de Yuengling.

A medida que avanza la historia, los visitantes aprenden más sobre la empresa: sus victorias, sus pérdidas y los cambios que ha realizado por el bien de sus clientes.

En última instancia, ese es el objetivo que debe tener el diseño de la historia de una marca en una línea de tiempo. No debería ser para que pueda mostrar el premio tras el premio recibido. Si desea mantener a los visitantes comprometidos y convertirlos en clientes al final, debe mostrarles cómo se incluyen en la historia.

En la captura de pantalla anterior, el resumen de 1996 dice:

La demanda de Yuengling en realidad comienza a exceder la capacidad de la cervecería. Se toma la decisión de retirarse de los mercados fuera del área local.

Este es exactamente el tipo de cosas que los clientes quieren ver cuando buscan marcas a las que permanecer leales. Esto demuestra la lealtad de la marca para brindarles a los clientes un producto de alta calidad en lugar de enriquecerse (lo que podría haber hecho fácilmente).

Terminando

Como puede ver, hay muchas formas de contar una historia a través del diseño. Y aunque los sitios web anteriores se ven bien cuando se ven en pantallas más grandes, donde realmente brillan es en los dispositivos móviles. Esto se debe a que los diseñadores pueden crear experiencias que se sienten más como si estuvieras pasando las páginas de un libro en lugar de tener que desplazarte por interminables cantidades de texto en la web.

La lista anterior no es exhaustiva, ya que puede contar historias de todo tipo de formas para las empresas. Simplemente escuche lo que sus clientes tienen que decir sobre sus empresas y luego cree un viaje que coincida con el que tomaron (o el desvío en el que se encuentran hoy).