As histórias (ou o storytelling) têm ganhado muita força na era em que nossa sociedade é submetida a um tsunami de informações dia após dia. Por conta da associação com emoções que boas histórias podem causar, há maior chance de informações passadas nessas narrativas serem incorporadas ao repertório de quem as consome.

Os escritores contam as histórias utilizando palavras. Fotógrafos através de imagens. Produtores audiovisuais através de vídeos e outros recursos gráficos. No mundo cada vez mais digital em que vivemos, chegou a hora de os programadores/desenvolvedores assumirem seu papel. Porém, como alquimistas modernos que são, os programadores têm o desafio maior de combinar texto, imagem, vídeo, recursos gráficos e elementos de interação em uma história coerente e que se adapte a vários tipos de suporte (desktop, tablet, celular etc.).

O desafio não para por aí. Os protagonistas normalmente não são personagens palpáveis, mas sim marcas, empresas ou causas. Há ainda a questão de se tratar de um universo aberto, no qual que é difícil controlar (e, em alguns casos, até não recomendável) a progressão do leitor.

Com todas essas dificuldades, é claro que ao desenvolver um site, muitas vezes, não estamos contando uma história nos moldes clássicos ou em uma narrativa completa, com começo, meio e fim. Porém, estamos utilizando recursos usados no storytelling para dar uma nova cara às nossas ideias e argumentos. Em outras palavras, um storyfication do nosso conteúdo web. Vamos falar sobre alguns recursos utilizados nas melhores histórias que podemos aplicar aos nossos projetos.

O elemento herói

Quando se trata do herói ou do protagonista da história, podemos recorrer ao pesquisador Joseph Cambell, que estudou as diversas histórias da mitologia e roteiros modernos para chegar a uma estrutura comum chamada de “A Jornada do Herói”. Essa sequência de etapas, que é base na escola Hollywoodiana, dá diversos insights sobre como uma história deve ser conduzida.

Nosso herói, que no nosso contexto pode ser um produto, uma empresa, uma causa ou o próprio cliente/leitor, pode ser conduzido através de alguns passos dessa estrutura. É importante entender que o herói não inicia perfeito. Ele possui falhas, dúvidas e precisa de ajuda, assim como superar diversas provações, com altos e baixos. Isso é o que permite ativarmos nossa empatia e nos conectarmos com a narrativa.

1. Mundo Comum
2. O Chamado da Aventura
3. Recusa do Chamado
4. Encontro com o mentor
5. Cruzamento do Primeiro Portal
6. Provações, aliados e inimigos
7. Aproximação
8. Provação difícil
9. Recompensa
10. O Caminho de Volta
11. Ressurreição do Herói
12. Regresso com o Elixir

Progressão: começo, meio e fim

Como falamos anteriormente, um site é um universo aberto, em que um usuário pode navegar livremente e sem qualquer ordem pré-estabelecida. Além disso, muitos sites não têm necessariamente todas as etapas e atos presentes. Porém, é útil termos em mente qual é o papel de cada um na construção da história.

O começo ou o primeiro ato de uma história trabalhará a questão de contexto. No primeiro ato, há desde a conscientização de um problema até a superação da resistência ao chamado da aventura (passo 1 a 4 na Jornada do Herói). Esse é o momento de introduzir sobre o que estamos falando e qual problema estamos solucionando. Em um site, esse ato está situado principalmente na homepage. Há um enfoque maior no conteúdo acima da dobra, onde há o espaço para se inserir um curiosity gap (abrir uma brecha para curiosidade), que instigue o usuário a continuar na sua história. Segundo o autor Lowenstein, isso ocorre quando se pode identificar uma lacuna entre o que atualmente se sabe e o que se gostaria de saber.

O desenvolvimento da história é onde acontecem todos os desafios e provações (etapas 5 a 8 na jornada). Esse é o ato em que os argumentos e os fatos que embasam sua mensagem são inseridos. É um excelente espaço para um maior grau de elementos de interatividade, pois melhora a assimilação e cria um fator surpresa, retirando a passividade do usuário.

A conclusão da história é quando há o retorno ao mundo inicial, mas transformado pela jornada ou pela solução apresentada. Aqui há a oportunidade de se mostrar o problema exibido inicialmente transformado pela solução apresentada. Nem sempre essa etapa está presente nesse contexto de storyfication de sites.

Quando há a necessidade de se contar uma história que necessite se manter mais fiel à progressão de começo, meio e fim, um recurso muito útil são os layouts One-Page, que deixam claro para o usuário-leitor qual é a sequência a ser seguida.

Causando as emoções certas

Muitas vezes, queremos provocar emoção no usuário-leitor, já que conectar mensagem e emoção é um caminho seguro para ser memorizado e tirar o consumidor da inércia. Mas todas as emoções têm esse mesmo efeito?

Intuitivamente, podemos pensar que emoções positivas são melhores nesse sentido. Porém, baseado na pesquisa de Jonah Berger sobre quais artigos no New York Times eram mais compartilhados (e diversas outras aplicações), pouco importa se a emoção gerada é positiva ou negativa. O que importa para se conduzir usuários à ação é se uma emoção ativa ou relaxa o leitor. Exemplos de emoções que ativam são admiração, excitação, diversão (positivas), raiva e ansiedade (negativas). Exemplos de emoções que relaxam são contentamento (positiva) e tristeza (negativa).

Concretizar abstrações

Bill Gates tem uma fortuna estimada em US$ 90 bilhões. Isso é obviamente impressionante, mas é algo tão longe da nossa realidade que é até difícil entender essa proporção. E se disséssemos que alguém levaria 285 anos só para conseguir contar até US$ 90 bilhões? Ficou muito mais claro o quanto essa cifra é impressionante, certo?

Abstrações são processos difíceis de serem processados por nós. Concretizar através de detalhes específicos e analogias é um recurso utilizado por todos bons contadores de histórias. Números são excelentes argumentos, mas são difíceis de lembrar. Ao trazer as informações com um comparativo mais concreto e próximo da bagagem do leitor comum, podemos entender com maior facilidade sua proporção e significados.

Desenvolvedores possuem ao seu dispor diversas ferramentas de data visualization muito avançadas. Isso auxilia a concretização de proporções, linhas do tempo, progressões e conexões de uma maneira que mil palavras não poderiam contar.