close

Mais Conversões

Como Dobrar a Conversão do seu Site com Testes de Usabilidade na Web

Henrique Carvalho Escrito por Henrique Carvalho em 9 de julho de 2013
Junte-se a mais de 150.000 pessoas

Entre para nossa lista e receba conteúdos exclusivos e com prioridade

usabilidade-na-web

Testes de usabilidade na web são importantes para aumentar as conversões de seu site.

Afinal, se o usuário não encontrar o que ele deseja ou não souber navegar pelo seu site corretamente, você irá perdê-lo.

Nesse artigo, irei compartilhar como fazer um teste de usabilidade em seu site para otimizar suas conversões.

Continue lendo para saber mais sobre:

Como fazer testes de usabilidade na web?

Testes de usabilidade na web geralmente analisam as ações que os usuários tomam em um determinado website para identificar possíveis problemas que façam esse usuário deixar a página.

No artigo sobre os 18 problemas de usabilidade, você pode identificar exatamente quais são esses problemas, se eles ocorrem no seu site e como você pode solucioná-los.

Entretanto, nem sempre é possível identificar esses problemas se você não utilizar um software robusto para isso.

É nesse ponto que entra o software Crazzy Egg, que utilizo aqui no Viver de Blog e em todos meus sites para melhorar a usabilidade deles.

O software é pago e eu não recebo nenhuma comissão ou incentivo para recomendá-lo.

Nesse artigo, mostrarei como utilizo esse software para fazer os testes de usabilidade e uma breve análise dos resultados obtidos.

Identificando onde os usuários clicam através dos Heatmaps

Heatmap-VBD-Home,-6-de-junho-de-2013

Na imagem acima, você pode ver o heatmap (ou mapa de calor) dos cliques na homepage do Viver de Blog.

As áreas em azul mostram onde o usuário está clicando. Quanto mais branca essas áreas ficam, quer dizer que muitos usuários estão clicando no mesmo local.

Breve Análise do Heatmap da HomePage:

  • Para minha surpresa, muitos usuários estão clicando na lupa para pesquisar.
  • A página sobre no menu de navegação também está sendo bem clicada, conforme já esperava.

A página “sobre” do seu site deve estar sempre em evidência, assim como bem otimizada para conversões, já que um visitante novo gosta de saber quem está por trás do site e sobre o que ele se trata. Escrevi em detalhes sobre a captura de emails na página sobre aqui.

  • O botão “quero receber”, assim como o campo para inserir email atraem muitos cliques. Feature-Box funcionando!
  • O termo “aqui” atrai bastante cliques, incentivado pela curiosidade por trás do número R$ 8.295,22 em menos de 14h.
  • O botão “x” no campo de captura de email flutuante na sidebar recebe bom números de cliques.

Os cliques no botão “x” mostram a importância da presença da usabilidade. Se o usuário não deseja ver a caixa flutuante, ele sabe que possui a opção de fechá-la. Ele sabe onde encontrá-la e o que o “x” irá fazer, caso ele aperte esse botão.

  • Facebook é a rede social que atrai mais atenção dentre todas as demais, talvez por estar mais à esquerda. (curta nossa fanpage aqui)

O heatmap é um teste de usabilidade importante e você pode usá-lo para:

  1. Analisar se muitos usuários clicam em uma região que não é clicável. (dica: torne-a clicável)
  2. Perceber se os usuários estão clicando exatamente onde você gostaria. Se não, torne essa área mais visível e atraente.
  3. Verificar como funciona na prática o menu de navegação do seu site.
  4. Se você usa anúncios, o heatmap é uma ótima forma de analisar se eles estão sendo efetivos.
  5. Testes A/B e verificar qual é a diferença entre as landing pages que atrai mais cliques.

Analisando até onde os usuários fazem scroll na página

Scrollmap-VBD-Home,-6-de-junho-de-2013

Na parte inferior da imagem, você pode ver a legenda do que as cores representam.

A ideia do scrollmap segue a do heatmap. Quanto mais quente (branco/amarelo/vermelho), maior é a atenção dos usuários nessa área da página.

Quando mais frio (verde/azul/preto), menor é a atenção dos usuários nessa área da página.

Breve Análise do Scrollmap da HomePage:

  • Por padrão, quanto mais abaixo um item, menos ele tende a ser visto, porque a maioria dos usuários não faz o scroll down completo.

Logo, é natural você esperar em seu website que itens no rodapé (footer) não sejam tão clicados.

  • Rostos atraem atenção.

Não importa se você é feio ou bonito. Colocar o seu rosto por “trás” de um website ajuda você a ganhar mais credibilidade, assim como atrair a atenção dos leitores.

Sabendo disso, fiz questão de que tanto a imagem como os textos “Henrique Carvalho” e “aqui” fossem clicáveis, já que essa área é a mais vista na homepage, dada a cor branca do scrollmap.

  • O “poder”do artigo mais recente.

Essa é outra área que recebe muita atenção. Afinal, existe uma curiosidade para saber qual é o artigo mais recente do site, principalmente para visitantes recorrentes.

  • A área branca (mais quente) não é o topo do site.

Na teoria, a área que você espera atrair maior atenção dos seus leitores é o topo do site.

Digo isso porque assim que o site carrega, você já olha “de cara” o seu topo ou o que se chama de “above the fold“. Design é importante. Portanto, não cometa erros que ferem os princípios de um bom design.

Porém, no Viver de Blog o topo não é a área mais quente, mas sim a área onde o artigo mais recente é mostrado.

Isso ocorre porque visitantes recorrentes já estão acostumados a ver a “feature box” e como seu objetivo principal é ler um novo conteúdo, eles realizam o scroll para baixo.

scrollmap é um teste de usabilidade importante e você pode usá-lo para:

  1. Analisar qual é a região que atrair maior atenção dos seus usuários (e como você pode otimizá-la).
  2. Identificar até onde os usuários fazem 50% do scroll (área em vermelho/amarelo/branco).
  3. Verificar se você está colocando alguma área importante do seu site fora dessa área dos 50%.

Está gostando desse artigo? Então coloque seu email abaixo para ser o primeiro a receber todas as novidades e dicas imperdíveis que irão levar o seu blog/site a um novo patamar.

Fique atualizado!

Insira aqui o seu email para receber gratuitamente as atualizações do blog!

Onde exatamente os usuários clicam?

Overlay-VBD-Home,-6-de-junho-de-2013

Para finalizar a categoria de testes, o overlay, é uma reunião de todos os cliques nessa página. As cores seguem o padrão de quente/frio.

Breve Análise do Overlay da HomePage:

  • O campo de inserir o email é o mais clicado da homepage inteira.

É o único botão em vermelho, recebendo mais cliques que qualquer outra parte clicável do site.

Perceba que o Overlay é importante para complementar o Heatmap por esse motivo.

Ele reconhece TODA a área de inserir email como única e soma todos os cliques nessa área.

Desse modo, uma área que parecia não receber tanta atenção, na verdade, recebe. E bastante!

Como a caixa de inserir email é longa, os cliques são dispersos e podem não revelar corretamente a sua eficiência.

Não é à toa que o Viver de Blog capturou mais de 3.000 emails em apenas 1 mês de “vida”. Todos os detalhes de como nesse artigo.

  • Botão “Quero Receber”.

A mesma análise serve para o botão para cadastrar o email na lista do Viver de Blog.

Como ele é largo, os cliques ficam dispersos, escondendo um pouco a eficácia desse botão no layout do site.

  • Usuários clicam mais no título do que em imagens e o “continue lendo”

Esse é um erro de usabilidade tão comum que vejo em muitos websites e newsletters por email.

O título do artigo não é clicável, sendo somente a imagem e o “continue lendo”.

Ignorar os cliques no título é estragar a experiência do usuário no seu site. Os testes de usabilidade mostram esse padrão em diversos sites.

  • Áreas não clicáveis

Na “feature box“, você pode ver 3 áreas que não são clicáveis, mas recebem alguns cliques. São elas:

  1. Imagem com os “balões coloridos”
  2. Texto “agora”
  3. Texto “Respeitamos sua privacidade, NUNCA enviamos spam!”

O que poderia ser feito: Transformar todas essas áreas não clicáveis em clicáveis. Como?

  1. Na imagem dos “balões coloridos” e no texto “agora” eu poderia colocar um link para uma landing page para captura de email.
  2. No texto sobre privacidade, como recebe muitos cliques, poderia colocar um link para uma landing page mostrando como é seguro cadastrar o email nesse site, já que não enviamos spam e não disponibilizamos seu email para terceiros de forma alguma.

Ideias que poderão ser implementadas, assim como diversas outras, para melhorar a experiência do usuário e as conversões desse site.

overlay é um teste de usabilidade importante e você pode usá-lo para:

  1. Analisar com precisão quais são as áreas que recebem maior números de cliques, mesmo se elas forem largas como o campo de inserir email ou uma imagem.
  2. Identificar áreas não clicáveis que estão recebendo mais cliques do que você imaginava. (e torná-las clicáveis)
  3. Verificar se as áreas que você gostaria que seus leitores mais cliquem são as que de fato recebem mais cliques.

Usabilidade na Web: Os testes acima são apenas um início

usabilidade-na-web

Nesse artigo, analisei apenas a homepage do Viver de Blog. Porém, na minha conta no Crazzy Egg, tenho 20 testes rodando mês após mês nos meus sites.

Apesar do custo mensal com esse software, acredito que o retorno compensa o custo, porque melhorar a experiência do usuário no site e ajudá-lo a encontrar mais rápido o que ele deseja, faz com que você consiga otimizar as conversões do site.

Os 3 testes mostrados acima são apenas um início. O software, embora seja simples de usar e entender, possui mais recursos do que comentei aqui, como a segmentação de cliques por tipo de browser, nova visita x visita recorrente e em cada botão do teste “overlay” você pode clicar no “+” para ter mais informações sobre aquele tipo de clique.

Independente do software que você utilize, o  Click Tale também é uma ótima opção.

O importante é que você entenda melhor como os seus leitores utilizam o seu site e, com essas informações, como você pode otimizá-lo para conversões.

Abaixo, um resumo de todas as dicas compartilhadas nesse artigo:

heatmap é um teste de usabilidade importante e você pode utilizá-lo para:

  1. Analisar se muitos usuários clicam em uma região que não é clicável. (dica: torne-a clicável)
  2. Perceber se os usuários estão clicando exatamente onde você gostaria. Se não, torne essa área mais visível e atraente.
  3. Verificar como funciona na prática o menu de navegação do seu site.
  4. Se você usa anúncios, o heatmap é uma ótima forma de analisar se eles estão sendo efetivos.
  5. Testes A/B e verificar qual é a diferença entre as landing pages que atrai mais cliques. E paraque você consiga montar suas próprias landing pages recomendo essas duas ferramentas: Klick Pages ou Optin Monster (a que usamos no Viver de Blog).

scrollmap é um teste de usabilidade importante e você pode usá-lo para:

  1. Analisar qual é a região que atrair maior atenção dos seus usuários (e como você pode otimizá-la).
  2. Identificar até onde os usuários fazem 50% do scroll (área em vermelho/amarelo/branco).
  3. Verificar se você está colocando alguma área importante do seu site fora dessa área dos 50%.

overlay é um teste de usabilidade importante e você pode usá-lo para:

  1. Analisar com precisão quais são as áreas que recebem maior números de cliques, mesmo se elas forem largas como o campo de inserir email ou uma imagem.
  2. Identificar áreas não clicáveis que estão recebendo mais cliques do que você imaginava. (e torná-las clicáveis)
  3. Verificar se as áreas que você gostaria que seus leitores mais cliquem são as que de fato recebem mais cliques.

Agora é com você!

  • Como você analisa a experiência do usuário em seu site?
  • Qual software você utiliza para fazer testes de usabilidade na web?
  • Você já fez algum teste que tenha melhorado drasticamente as conversões do seu site?

Adoraria saber a sua opinião nos comentários!

Você acredita que criar um blog é pra quem entende de ferramentas e softwares? Eu vou te mostrar o passo-a-passo para você criar um blog do zero ao longo de 7 aulas práticas (100% grátis). Comece agora mesmo!

Curso 100% grátis! Crie seu blog do zero até o lançamento ao longo de 7 dias com 7 aulas totalmente grátis.

Blog do Zero

Conhecer
Blog do Zero

Hey,

o que você achou deste conteúdo? Conte nos comentários.

  • MagnoMedeiros

    Olá Henrique!

    Primeiramente parabéns pelo seu trabalho! Conteúdo de primeira qualidade!
    Tenho pesquisado ultimamente para entre no empreendedorismo digital e seu blog foi um divisor de águas.

    Continue com esse belo trabalho!

    Sobre usabilidade gostaria de saber sua opinião sobre o uso de enquetes para pesquisar os interesses dos usuários como o site? A melhor alternativa seria enquete direto no site ou por e-mail?

    E se existe algum plugin ou software gratuito que dê, pelo menos, dados iniciais para a pesquisa sobre quais links os usuários acessam mais?

    Abraço!

    • Oi Magno!

      O @wellingtonlorindo:disqus já respondeu perfeitamente sua resposta. O Google Analytics é essencial nesse quesito. A ferramenta, embora gratuita, é robusta e vale dar uma pesquisada sobre como utilizá-lo de maneira mais eficaz.

      Abraços!

  • Fabiano Silva

    Parabéns Henrique por mais um post excelente. Informação de primeira.

    Uma coisa que observei no Overlay no feature box é que as palavras que foram clicadas estão negritadas. Talvez esse seja um fator importante a se considerar quando é desejado o clique do usuário em um texto específico.

    Mais uma vez parabéns.

    • Grande mestre Fabiano, tudo certo?

      Obrigado pelo comentário amigo. Você está correto. Palavras em negrito, principalmente com forte contraste (fundo escuro com fonte de cor clara) chamam atenção.

      Grande Abraço!

  • wellingtonlorindo

    A ferramenta de cliques do Analytics é bem interessante e já ajuda bastante, pra quem não está disposto a pagar o Crazzy Egg, que é infinitamente melhor.
    Ela fica em “Google Analytics > Conteúdo > Google Analytics na página”.

    O Visual Website Optimizer também é gratuito por um mês e exclente para testes A/B

    http://visualwebsiteoptimizer.com/

    Parabéns, Henrique!

    • Magno Medeiros

      Obrigado wellington!
      Como meu objetivo agora é dados introdutórios, adquirir o Crazzy Egg, por enquanto, é desnecessário. Mas entrará no planejamento.

      • Oi Magno!

        Estudando um pouco o Google Analytics (GA), você consegue ter muita informação boa sobre seu site.

        O Crazzy Egg é para colocar a “cereja no bolo”, buscando trazer a melhor experiência para o usuário possível, além de alavancar conversões.

        Abraços!

      • wellingtonlorindo

        Fiquei sabendo dessa também, Magno http://www.clicktale.com/
        Ainda não tive tempo de testá-la. A principio a vantagem é que o plano free é por tempo indeterminado.

        • Oi Wellington!

          A ClickTale é mencionada no artigo como uma alternativa (mais robusta e cara) ao Crazy Egg.

          Abraços!

    • Ótimo comentário Wellington!

      Utilizo o VWO para testes A/B em páginas de venda.

      Para landing pages uso Unbounce para A/B test.

      Abraços!

  • Ricardo

    Parabéns, Henrique!

    Mais um post bem abrangente!

    Obrigado!

  • MaxMax

    Uso o http://www.clicktale.com e é muito bom e tem um plano FREE.

    • Realmente o serviço deles é de alta qualidade, além de terem representantes aqui no Brasil.

      Forte Abraço!

  • Eduardo Valente

    Caramba Henrique, que ótima aula! Conteúdo muito valioso.

  • Thales

    Cara, teu trabalho ta sensacional nesse blog.. de verdade!

    • Muito obrigado Thales!

      Continue acompanhando o Viver de Blog.

      Abraços!

  • Thiago Ghilardi

    Artigo interessante porém recomendo o site http://www.testaisso.com.br para realizar testes de usabilidade visto que através dele, você consegue descobrir como os usuários interagem com seu site através de um vídeo e questionário preenchido pelo internauta. Uma proposta de valor muito mais interessante que o crazyegg ou usabilia, pois além de saber onde clicam, você também descobre o tempo que eles levam para realizar cada tarefa além de poder perguntar como foi a experiência do usuário e abrir espaço para melhorias.

  • Se você utiliza wordpress, há um plugin que faz o plugin que faz este mapeamento de onde seus usuários estão clicando http://wordpress.org/plugins/hotspots/screenshots/ .Claro que ele não é tão completo quanto a ferramenta que o Henrique apresentou neste post, mas com ela você já pode ter uma ideia de como esse tipo de análise funcionaria no seu site.

  • Rafael Veloso

    Nossa todo dia que leio um artigo aqui me faz um sacolejo na minha forma de pensar…
    Agora uma dúvida… Estas ferramentas aí o google analitics não faria não?
    Não consegui ver o custo deste serviço no site.
    abraço Rafael

    • Oi Rafael!

      Na página do Crazzy Egg eles até comparam o serviço deles com o do Google Analytics. Infelizmente, o do GA não é tão completo.

      Abs!

  • Priscila Rafael Veloso

    Henrique bom dia. Estive pensando você podia escrever um artigo sobre este tema abordando as possibilidades com o google analitycs. Pois com ele também dá para fazer muitas coisas só que muita gente inclusive eu se resume apenas aos gráficos principais como taxa de rejeição, visitantes, novos x antigos e tempo de navegação.
    abraço

    • Olá!

      Sim, tenho como planejamento escrever esse tipo de artigo aqui no Viver de Blog. Só preciso acertar direitinho meu calendário editorial. 🙂

      Abraços!

  • Douglas Souza

    Como Sempre

    ÓTIMOS ARTIGOS…Parabéns Henrique..

  • Fabíola

    ótimo conteúdo! Interessante cada análise.

  • Pingback: 5 dicas de ouro para criar uma landing page altamente eficiente! | Cresça Educa()

  • Pingback: Links Interessantes sobre Usabilidade | Profª. Cleiane Oliveira >>()

  • Pingback: OS 17 MELHORES PLUGINS GRÁTIS PARA WORDPRESS (E MAIS 6 FERRAMENTAS BÔNUS) – Cantinho do Suporte()

  • Vanessa

    Adorei o artigo, qual ferramenta você indica para esses testes? Eu estou utilizando uma versão free do http://www.inspectlet.com/.

    • Olá Vanessa!

      Utilizo o VWO para testes A/B em páginas de venda.

      Para landing pages uso Unbounce para A/B test.

      Abraços!

  • Pingback: PLUG INS DO WORDPRESS | Estudos WordPress()

  • Pingback: Os 17 Melhores Plugins Grátis para Wordpress (e mais 6 Ferramentas Bônus) : blogdozero.com()

  • Pingback: Os 17 Melhores Plugins Grátis para WordPress (e mais 6 Ferramentas Bônus)()

  • Pingback: 5 dicas de ouro para criar uma landing page altamente eficiente()

  • Pingback: Entrei na academia. E agora? O que devo esperar de resultados? Suas respostas nesse artigo()

  • Guilherme Ferbek

    Excelente!

  • OCP

    Olá Henrique, tudo bem? Have you sampled Decibel Insight? It’s out usability and analytics tool. Experimentar aqui – https://www.decibelinsight.com/Packages/. Muito obrigado

  • No momento não tenho como investir nisso, mas vocês poderiam indicar algum plugin para wp que seja gratuito? Já procurei vários, mas todos são pagos, ou uma versão gratuita apenas por pouquíssimas semanas.
    Obrigada.

    • Olá JmJess!

      Um leitor abaixo recomendou o http://www.clicktale.com , disse que é muito bom e tem um plano FREE. Vale a pena você testar 🙂

      Abraços e sucesso.

      • Olá,
        Entrei em contato com eles, mas me informaram que o plano já não está mais disponível :/
        Mesmo assim obrigada pela indicação!
        Abraços.

        • Por nada! Precisando estamos por aqui 🙂

          Você já baixou o nosso eBook com 87 ferramentas para marketing digital? 61 ferramentas que estão lá são gratuitas e acredito que possa ajudar você!

          Se quiser baixar, é aqui neste link: http://landing.viverdeblog.com/ebook-87-ferramentas-marketing-digital/

          Abraços e sucesso!

          • Acabei de baixar e adorei!
            Muito obrigada 😉
            Abraços e sucesso!

          • Opa JmJess!

            Fico feliz que tenha gostado. Fique à vontade para participar das conversas aqui nos comentários do Viver de Blog, combinado? 🙂

            Abraços e sucesso!

  • jholxd

    Eu to apanhando pra usar esse crazy egg ainda, gerei um snapshot que me deu um mapa. Agora posso clicar em outro snapshot para verificar a atualização de quantos cliques obtive?

    • Olá Jônatas!

      Precisaria entender melhor o que você fez para ver se consigo te ajudar… 🙂

      Abraços e sucesso.

  • Bruno Costa

    Oi Henrique! Eles fazem análise tbm do site no versão mobile?

  • Pingback: Como fazer um blog perfeito: 15 elementos para construir o layout ideal (e mais 7 para você evitar a todo custo!) | EU RECOMENDO()

  • Emerson Ferreira

    São esses detalhes que fazer a diferença né?

    Muito bom o artigo´. Não somente esse mas todos os artigos do viver de blog.

    Abraços
    Emerson Ferreira
    https://blogdoeme.com

    • Opa Emerson! Obrigado! Fico feliz por saber que gostou! 😀

      Abração!

  • Pingback: COMO FAZER UM BLOG PERFEITO: 15 ELEMENTOS PARA CONSTRUIR O LAYOUT IDEAL (E MAIS 7 PARA VOCÊ EVITAR A TODO CUSTO!) – Vender + Online | Aprenda a aumentar suas vendas!()

Junte-se a mais de 150.000 pessoas

Entre para nossa lista e receba conteúdos exclusivos e com prioridade

562 Compart.
Compartilhar253
Compartilhar253
Twittar56
WhatsApp