Boas práticas para uma landing page de sucesso

Boas práticas para uma landing page de sucesso

Na aula passada nós entendemos melhor o conceito de landing page, assim como qual a importância dessas páginas para o desenvolvimento de um negócio próspero. Nesta aula, nós nos aprofundaremos um pouco mais no assunto e traremos alguns casos interessantes do bom uso dessas páginas fora e principalmente dentro da Nuvem Shop. Nossos designers (parceiros e theme designers) têm feito coisas incríveis.

Era uma vez…

Em janeiro de 2009, Jared M. Spool, do UIE (User Interface Engineering),publicou um artigo que ficou mundialmente conhecido como “O botão de 300 milhões de dólares”. Em pesquisas da equipe de Spool foram verificados alguns problemas na experiência de compra dos clientes de um grande site de e-commerce.

A solução que a equipe encontrou para resolver vários deles foi substituir o botão “Cadastro” por “Continuar”; Desta forma os clientes poderiam optar por se registrar ou não no site (o registro era recomendado apenas para que futuras compras fossem realizadas mais rapidamente).

Essa modificação simples significou um aumento de clientes pagantes em 45%. Somente no primeiro mês o aumento do faturamento foi de 15 milhões de dólares. Em um ano, eles alcançaram um total de 300 milhões de dólares. Incrível, não? Sem sombra de dúvidas, o que esse artigo mostra é que pequenos detalhes podem fazer toda a diferença e que proporcionar uma boa experiência para o consumidor pode ter um ROI altíssimo.

Agora, imagine: se pensar/projetar uma boa experiência de compra em 2009 era importante, como será nos dias de hoje? Quando a oferta é muito grande, fornecer uma boa experiência é um diferencial competitivo indispensável. Sem isso é impossível se destacar e sobreviver.

Onde estão os botões de 300 milhões de dólares hoje em dia?

Não queremos  parecer banais nem superficiais com esse título. Acredite, há muito trabalho árduo por trás de bons resultados como esse: unicórnios não existem! O que existe são boas práticas e muita pesquisa e analise.

Na Nuvem Shop nós temos alguns guias para experiência do usuário que nos ajudam na criação e manutenção dos nossos templates. Eles são baseadas nos conceitos de Donald A. Norman (Nielsen Norman Group). Você pode conferir abaixo:

Visibilidade

As funções mais visíveis são aquelas em que o usuário provavelmente será capaz de saber o que fazer em seguida. Quando as funções estão fora de vista, tornam-se mais difíceis de encontrar assim como de saber como usá-las.

Feedback

O Feedback é o retorno de informação que mostra o efeito de uma ação realizada, permitindo que a pessoa continue com a tarefa. Vários tipos de Feedback estão disponíveis no design de interação: áudio, tátil, visual, ou a combinações destes. Sem um Feedback sobre a ação, os usuários podem desligar equipamentos em momentos indevidos ou repetir comandos, executando a mesma tarefa mais de uma vez. Exemplo: exibir uma imagem de carregando quando um botão é pressionado.

Restrições

A maneira mais segura de tornar alguma coisa fácil de usar, com poucos erros, é tornar impossível de fazê-la de outro modo, restringindo a quantidade de escolhas. Quer impedir alguém de inserir uma pilha ou um cartão de memória em sua câmera na posição errada, com a possibilidade de danificar o equipamento? Projete-os de tal modo que eles só se encaixem de uma forma, ou faça-o de um jeito que encaixe perfeitamente independente da forma que for inserido. Exemplo: fazer restrições na configuração cor de fundo de um template para evitar problemas de contraste de cor.

Mapeamento

Mapeamento é um termo técnico que significa o relacionamento entre duas coisas, neste caso, entre os controles e seus movimentos, e os resultados dessa relação no mundo. Exemplo: quase todos os produtos precisam de algum tipo de mapeamento entre os seus controles e as ações que eles executam, como, por exemplo, as setas para cima e para baixo usadas para representar o movimento ascendente e descendente do cursor, respectivamente, em um teclado de computador.

Consistência

Isto se refere ao design de interfaces, onde precisamos ter operações similares com elementos similares para realizar tarefas semelhantes. Em particular, uma interface consistente é aquela que segue essa regra, como o uso da mesma operação para selecionar todos os objetos em qualquer circunstância, ou o uso de um botão sempre na mesma cor, formato e posição para submeter um formulário, seja ele de contato, cadastro ou pesquisa.

Affordance

Affordance é um termo que não tem uma tradução literal para o português, mas refere-se ao atributo de um objeto que permite que as pessoas saibam como usá-lo, por tão óbvio que é, ou pelo seu visual sugerir que é fisicamente possível. Exemplo: um botão convida empurrando (clicar), mostrando um alto-relevo.

Responsiveness

A capacidade de uma interface de se ajustar automaticamente a diversas condições. Exemplo: um site deve ajustar seu layout em celulares.

Estudos de caso Nuvem Shop

Nós separamos três casos de lojas da Nuvem Shop que têm um ótimo desempenho para que você possa se inspirar. Note que duas delas foram feitas por nossos parceiros.

Morango Brasil

Morango Brasil - Nuvem Shop
Pontos importantes

  1. Qualidade das fotografias:  muito importante esclarecer aos lojistas que isso pode fazer muita diferença na escolha de compra de um cliente.
  2. Contraste: perceba que os elementos da página possuem um contraste bem definido. Rapidamente se consegue ler as informações. O botão para comprar está bem definido.
  3. Clareza: meios de pagamento e entrega próximos às informações do produto.

Brutal Kill

Brutal Kill - Nuvem ShopPontos importantes:

  1. Branding: é incrível como a interface “casa” bem com a proposta da marca.
  2. Interface simples e consistente: perceba como o tamanho das fontes é utilizado com muita inteligência. O botão para efetuar a compra também se destaca bastante.
  3. Tamanho das imagens: os atributos dos produtos são bem explorados.

Bolsa Chick

Bolsa Chik - Nuvem ShopPontos importantes

  1. Informação: Perceba o uso inteligente da fonte do título do produto. Apesar do nome do produto ser grande ele pôde dividir espaço com uma outra coluna.
  2. Imagens: O layout acomoda bem muitas imagens.
  3. Contraste: perceba que os elementos da página possuem um contraste bem definido. Rapidamente se consegue ler as informações. O CTA está bem definido.

E você, tem algum caso interessante para compartilhar? Sua loja teve um aumento de faturamento por causa de uma funcionalidade nova? É designer? Seja um parceiro Nuvem e nos ajude a melhorar experiência de milhares de pessoas com compras online. Na próxima aula, conversaremos um pouco sobre 5 aspectos de uma página de produto eficiente.


O que você achou desse conteúdo?


Marcos Paiva

Marcos é designer e tecnólogo em gestão empresarial. É apaixonado por música e seriados da Netflix. Divide seu tempo em cuidar da familia, tentar ter uma banda, trabalhar e dormir (não necessariamente nessa ordem). De vez em quando escreve alguns tweets @marcos_paiva


boas-prticas-para-uma-landing-page-de-sucesso