Crie uma página inicial melhor com o StoryBrand Framework

As páginas iniciais são como vitrines. Eles devem dar ao consumidor uma ideia do que a empresa faz, quem está administrando a empresa e pelo menos uma dica dos produtos e serviços que ela oferece, sejam eles itens reais para venda, informação ou entretenimento.

Assim como uma vitrine, os designs da página inicial podem atrair as pessoas a olhar mais profundamente ou podem falhar em capturar a atenção de um visitante (ou pior, afastá-los ativamente). Transmitir claramente uma história de marca é um método que os designers de UX podem usar para manter as pessoas no site e engajadas o suficiente para explorar além da página inicial (a estrutura StoryBrand fornece um bom roteiro para isso).

Qual é o objetivo de uma página inicial?

O objetivo de uma página de destino é converter visitantes, enquanto o objetivo de uma página inicial é engajar os visitantes com a marca e oferecer soluções para seus problemas. Se feito de forma eficaz, um visitante da página inicial pode se transformar em um cliente – potencialmente um cliente recorrente.

As páginas iniciais melhoraram rapidamente nas últimas décadas graças às análises e às equipes de marketing e design que fizeram melhorias de desempenho com base nesses dados.

Em 1993, quando existiam apenas 600 sites, o único método para medir o tráfego de um site era um log do servidor que contava o número de visitantes. Em seguida, vieram os contadores de visitas e, eventualmente, conjuntos de análises mais abrangentes que forneceram informações sobre visitantes únicos, visualizações de página e taxas de rejeição.

Usando esses dados analíticos, os designers de UX são capazes de otimizar o posicionamento da chamada para ação, melhorar a velocidade do site, teste A/B, usar vídeos para envolver os visitantes, usar imagens de alta qualidade para cativar a atenção das pessoas e incluir ferramentas de mensagens para melhorar o desempenho de uma página inicial. No entanto, isso garantirá a lealdade e a confiança dos consumidores?

Três armadilhas comuns ao projetar páginas iniciais

As empresas – e por designers de extensão – se deparam com três armadilhas principais ao criar uma página inicial:

1. Eles não se concentram nas coisas importantes. Eles contam às pessoas tudo sobre as características de seu serviço ou produto. As pessoas não se importam com isso. Eles querem saber que o negócio vai resolver seu problema e melhorar sua vida.
2. As empresas não comunicam sua mensagem com clareza. Como diz Tony Haile da Chartbeat, um site tem menos de 15 segundos para capturar a atenção de um visitante.
3. Eles têm um produto ruim que não resolve o problema de ninguém. Não há muito que um designer possa fazer por um negócio se for esse o caso.

O que é a estrutura StoryBrand?

Apesar do que algumas empresas parecem acreditar, um logotipo não é igual a uma marca. Longe disso; uma marca é uma promessa por trás da qual está a razão de sua existência.

As pessoas escolhem uma marca em detrimento de outra por razões racionais e emocionais. Mensagens poderosas da marca podem produzir fidelidade à própria marca, e não apenas aos produtos individuais que ela cria. Uma mensagem clara e consistente é vital para atingir esse objetivo. O que diferencia uma marca da concorrência é a história da marca.

O storytelling é muito utilizado por empreendedores para seduzir investidores em pitches e redes sociais. Empresas como a Apple entendem e integram o poder de contar histórias claras e simples em tudo o que fazem. Eles sabem que não é sobre eles; é sobre seus clientes.

A estrutura StoryBrand é uma fórmula de narrativa criada por Donald Miller para ajudar as empresas a comunicar suas mensagens mais poderosas de forma simples e clara. Em seu livro Building a Story Brand , Miller afirma: “seu cliente deve ser o herói da história, não sua marca. Este é o segredo que todo negócio de sucesso fenomenal entende.”

Como usar o StoryBrand com um cliente

Seja uma pequena empresa ou uma marca multimilionária, o cliente deve entender que confundir seus clientes custará dinheiro. Esclarecer sua mensagem por meio da fórmula da StoryBrand, como Miller coloca, “organizará seu pensamento, reduzirá seu esforço de marketing, eliminará a confusão, aterrorizará a concorrência e, finalmente, fará com que seus negócios cresçam novamente”.

Miller compara a construção de uma StoryBrand a escrever uma história para um roteiro. Ele divide em sete pontos da trama.

Um personagem que quer algo (a pessoa que usa o site) encontra um problema (sua necessidade), então encontra um guia (o negócio) que lhe dá um plano (indica os próximos passos) e o chama para a ação (botão de chamada para ação), o que resulta em uma história de sucesso (compram o produto) e os ajuda a evitar o fracasso (lembrete do que aconteceria se não comprassem).

Essa estrutura pode ser reconhecida em quase todos os filmes de sucesso. Também pode ser aplicado a uma empresa e seus clientes. O próximo passo é o cliente escrever a história da sua marca seguindo esta estrutura:

1. Um personagem : O cliente é sempre o herói da história, não a marca. Cabe aos designers de UX descobrir o que os clientes desejam da marca, geralmente por meio de pesquisa de UX e testes de usuários. Eles precisam se concentrar nos desejos que impulsionam as pessoas, coisas como conservar recursos financeiros, economizar tempo, construir redes sociais ou ganhar status.
2. Tem um problema : O vilão no arco StoryBrand é o problema do personagem. É útil personificar esse problema e entender que os produtos da empresa são como armas que o cliente pode usar para vencê-lo. As empresas tendem a se concentrar na solução de problemas externos, mas os clientes compram soluções para problemas internos . As pessoas têm três níveis de conflito:
   - Externos (a maioria das empresas tenta resolver problemas externos)
   - Interno (como frustração, intimidação, insegurança)
   - Filosófico (por que essa história importa?)
3. E atende a um guia : O guia é o negócio ou a marca. Os clientes precisam de alguém para cuidar do problema. Sua percepção da marca será crucial para sua confiança. Duas coisas devem ser comunicadas:
   - Empatia (mostrar uma compreensão da dor que o cliente pode sentir)
   - Autoridade (dará ao cliente a confiança de que a marca é capaz de ajudá-lo)
4. Quem lhes dá um plano : A empresa mostra ao cliente o que ele precisa fazer em seguida. Os clientes ainda não têm certeza se devem comprar até que seja mostrado um plano de ação simples. Os designers de UX podem definir os próximos passos exatos para os clientes. Eles também podem aliviar qualquer ansiedade que o cliente possa ter, abordando as preocupações relacionadas ao produto ou serviço.
5. E chama-os à ação : Chamadas à ação eficazes facilitam compras ou inscrições.
6. Isso os ajuda a evitar falhas : O que está em jogo para o cliente? O que eles perderão se não comprarem dessa marca?
7. E termina em sucesso : diga aos clientes como essa ação específica pode mudar sua vida. Mostre a eles como serão suas vidas depois que comprarem o produto e como essa resolução os fará sentir. Três maneiras sólidas pelos quais os contadores de histórias terminam uma história são permitindo que o personagem:
   - Ganhar poder ou posição
   - Encontre alguém ou algo que os torne completos
   - Experimentar alguma forma de auto-realização que também os torna inteiros

Como usar o StoryBrand Framework em uma página inicial

Uma página inicial nunca deve ser sobre o negócio. Deve ser sobre seu cliente potencial.

Como em um primeiro encontro, as impressões são importantes e o objetivo é gerar interesse. Os designers de UX precisam ser estratégicos em qual conteúdo é incluído e como é organizado. Seguir a estrutura, conforme explicado na seção anterior, ajudará os designers a garantir que as mensagens certas sejam colocadas nos lugares certos.

Embora possa parecer simplista, existem apenas cinco elementos importantes a serem considerados ao projetar uma página inicial.

O título

Os títulos, às vezes usados ​​em combinação com uma imagem atraente, são colocados na parte superior de uma página inicial. Em quase todos os casos, os títulos devem ser centrados no cliente e mostrar ao visitante que a marca tem algo que os beneficia. Os títulos devem:

• Comunique os benefícios ao cliente
• Identifique um problema que o visitante tem e assegure-lhe que a marca pode resolvê-lo para ele
• Descreva o que a empresa faz de forma clara e concisa

Crie confiança mostrando autoridade

É imperativo posicionar o negócio como guia e solução para o problema do cliente. Os designers de UX que dominam a arte de criar confiança terão mais facilidade em convencer as pessoas de que essa marca em particular é a solução certa para seus problemas. Eles podem fazer isso por:

• Incluindo depoimentos de clientes importantes que recomendam a marca
• Exibição dos logotipos das empresas com as quais a marca trabalhou
• Mostrando dados específicos sobre o número de usuários, transações, etc.
• Apresentando prêmios e elogios, trabalhos publicados, aparições na mídia e realizações semelhantes
• Mostrando imagens da equipe ou da sede da empresa

Chamada para ação

Criar uma conexão emocional com os visitantes da página inicial é o primeiro passo para convertê-los em clientes. Uma vez que essa conexão emocional é feita, cabe ao apelo à ação para selar o acordo.

Existem dois tipos de chamadas para ação:

1. As chamadas para ação diretas são para pessoas que sabem que estão prontas para comprar ou se inscrever e incluem linguagem como "Comprar", "Inscrever-se" ou "Começar". Clicar nesses CTAs levará o comprador diretamente a um formulário para concluir sua transação.
2. Os apelos à ação transitórios são para visitantes que ainda não estão prontos para comprar. Eles podem precisar de mais tempo e informações antes de se comprometerem. Eles vêm na forma de botões "Mais informações", "Experimente gratuitamente" ou "Entre em contato".

Alguns apelos à ação podem combinar os dois ou colocá-los lado a lado (muitas vezes vistos como um par de botões “Compre agora” e “Saiba mais”).

Imagens envolventes

Independentemente da seriedade do conteúdo de uma página inicial, a estrutura StoryBrand exige um final feliz. Ao selecionar as imagens, tenha em mente que algumas delas devem dar aquela sensação de “felizes para sempre”.

As imagens apelam às emoções dos visitantes, particularmente imagens de pessoas felizes. Mostrar fotos de pessoas felizes ajuda as pessoas a imaginar como seria seu próprio final feliz se fizerem a compra.

Pequeno texto

Quanto menos texto, melhor. Muitos consumidores não lêem longos blocos de texto, por isso é melhor transmitir a mensagem da marca com o mínimo de palavras possível.

Os designers de UX devem ajudar os clientes a compartilhar sua história da maneira mais simples.

Páginas iniciais bem-sucedidas respondem a perguntas-chave

Uma página inicial bem-sucedida será capaz de capturar o interesse do visitante em menos de cinco segundos. A partir daí, terá cerca de 15 segundos para responder às três perguntas que as pessoas se fazem (muitas vezes inconscientemente) ao visitar uma página inicial:

• O que eles fazem?
• Como eles podem me ajudar?
• O que tenho que fazer para comprar ou contratar?

Os designers de UX podem usar a estrutura StoryBrand para criar uma página inicial que capture imediatamente o interesse e responda a essas perguntas de maneira eficaz. Ele oferece um caminho claro para o sucesso tanto para o designer quanto para a marca.

Deixe-nos saber o que você pensa! Por favor, deixe seus pensamentos, comentários e feedback abaixo.

• • •

Leia mais no Blog Toptal Design:

• Todas as tendências valem a pena? Os 5 principais erros de UX mais comuns que os web designers cometem
• Como criar uma página de destino eficaz
• Construído para converter - Práticas recomendadas de design de página de destino
• O melhor guia para design de sites de comércio eletrônico
• O Guia Completo para Arquitetura da Informação