Primeiras aulas do curso UX Produto: monitore, mensure e teste o seu projeto

UX Produto: monitore, mensure e teste o seu projeto

Heatmaps - 1- Introdução

Seja bem-vindo ao Curso UX Produto. O curso tem como objetivo mostrar como identificar os pontos que podem ser melhorado na experiência do usuário, consumidor do seu produto/serviço. Se você melhora o seu produto, melhora a sua empresa e todos se beneficiarão.

Apresentaremos a Hotjar, uma ferramenta de monitoramento que analisa os mapas de calor do seu site, como o usuário se comporta ao preencher um formulário... Veremos também a relevância de pegar o feedback do usuário, por exemplo, a pontuação de um aplicativo. Por que é interessante ter esse tipo de informação? Trata-se apenas de um moda ou terá algum intuito? Veremos como tudo tem um intuito.

Falaremos também sobre teste de usabilidade. Por que é tão importante validarmos uma ideia? Será que como UXer, consigo pensar como um usuário?

No curso, abordaremos ainda questões de acessibilidade e como fazer um bom aproveitamento de um orçamento enxuto.

Heatmaps - 2- Heatmap Hotjar

Vamos dar uma olhadinha na plataforma da MusicDot, que oferece cursos como a Alura, porém voltadas para música. Encontraremos lá cursos de teclado, piano, violão e até de canto. A MusicDot será o nosso cliente.

O dono da empresa explicou que eles investiram alto em um vídeo institucional, mas ele não está sendo assistido pelos usuários. Primeiramente, vamos analisar em que lugar da página está o vídeo.

video institucional

Para chegar até o vídeo, tivemos que dar um scroll na página (descer a barra de rolagem). Talvez, este seja um dos fatores que esteja dificultando a visualização. Será que o usuário está realizando a ação de descer a barra de rolagem? Ou será que ele acessa diretamente os links iniciais da home?

musicDot home

Existe uma maneira de descobrir como o usuário está navegando na nossa página. Uma forma bem trabalhosa seria contratar pessoas que observassem o acesso dos usuários em sua casas... Mas esta não é uma opção viável! Por isso, temos ferramentas de monitoramento como o Hotjar.

Hotjar

Você consegue criar facilmente uma conta, sem grande burocracia. Após criarmos uma conta, faremos o login e acessaremos um painel de controle. Nosso objetivo com a ferramenta é identificar se o usuário está fazendo o scroll na página. Dentro do Hotjar, encontramos diversas ferramentas que irão nos auxiliar a ver o mapa de calor do site.

painel de controle hotjar

Começaremos clicando em "Heatmaps", e depois, em "View Heatmap", localizado na parte inferior da página. A análise do site do MusicDot começou no dia 22 de setembro de 2016. Na página seguinte, clicaremos na opção do menu "Scroll".

scroll

Agora, conseguimos ver o mapa de calor considerando o Scroll.

mapa de calor scroll

De acordo com o mapa, aproximadamente 3% dos usuários estão entrando no site sem rolar a página. Vamos ver o acesso até a parte em está o vídeo institucional:

mapa do video institucional

Segundo o mapa, cerca de 70% dos usuário estão saindo da página antes de chegarem no vídeo. Ou seja, só 30% chegam até o ponto em que poderiam assisti-lo. Se nosso objetivo é fazer com o que o vídeo seja mais visualizado, uma solução é movê-lo mais para cima adicionando um bom destaque.

video com destaque

A parte do "Heatmap do Hotjar", indica os pontos em que os usuários deixam a página da MusicDot, por exemplo, vamos ver a porcentagem de usuários que chegam até o rodapé:

mapa do rodapé

Aproximadamente 10% dos usuários chegam até o rodapé e uma porcentagem semelhante chega aos depoimentos. Parece óbvio disponibilizar os itens mais importantes logo no começo da página. É comum termos dificuldade em disponibilizar o conteúdo de acordo com sua prioridade e a parte de arquitetura de informação - levando em consideração o objetivo do usuário e do negócio - acaba sendo descuidada.

Heatmaps - 3- Como criar o heatmap

Como criaremos o mapa de calor utilizando o Hotjar? Como instalaremos o Hotjar no nosso site? Se você já trabalha com Front-end ou Back-end, vai achar a tarefa bem simples. Mesmo se não lidar com código, também achará simples.

Começaremos clicando em "Heatmaps" e depois no botão "Tracking Active", localizado na parte superior à direita.

tracking code

Em uma nova janela, vamos visualizar o código de rastreamento que devemos incluir.

codigo de rastreamento

Após copiá-lo, devemos colar o código no <head> da nossa página. Veremos onde colocamos o trecho referente no código da página do MusicDot:

codigo musicdot

Dentro do código-fonte do MusicDot, encontraremos a tag <head>, nesta adicionamos o trecho do hotjar. Geralmente, no JavaScript, é uma boa prática adicionar no fim. Mas o Hotjar nos recomenda adicionar na parte superior. Após a inclusão, veremos como criar o mapa de calor.

new heatmap

Na seção "Heatmaps", clicaremos no botão verde "New Heatmap", bastante chamativo.

conta basic

Em seguida, selecionaremos a conta Basic. Com ela, o Hotjar usará 1000 visualizações para gerar o mapa de calor. No nosso caso, criaremos o mapa de calor da página de "Contato". Escolheremos um nome para o mapa, além de adicionarmos a URL exata do link. Teremos ainda a possibilidade de acessarmos as opções avançadas, nas quais podemos definir os elementos que não devem ser incluídos na análise, por exemplo, o rodapé. Entretanto, nosso desejo é que o mapa inclua todos. No fim, clicaremos no botão "Create Heatmap", no canto inferior.

Create Heatmap

Um pop-up será exibido, nos informando que o mapa foi criado. Assim, nós já conseguiremos ver o mapa "Contato" listado na seção "Heatmaps".

mapas listados

Quando o número de PageViews chegar a 1000, ele irá parar a análise por ter atingido o limite da conta. Note como foi simples criar um heatmap. Outra ferramenta interessante que o Hotjar oferece é a análise do mapa de calor pelos cliques do usuário.

botao de login

Vemos que o mapa nos indica uma grande incidência no botão de "login". Se ele é clicado com tanta frequência, para melhorar a experiência do usuário, seria interessante aumentar o tamanho do botão. Poderíamos pensar também que devemos dar destaque para o botão "Matricule-se". Mas será que vale a pena dar tanta atenção para esse botão call to action?

Observe que os usuários clicam bastante nos links das categorias dos cursos.

botoes de categorias dos cursos

Vemos que os radio buttons também foram clicados, por isso, poderíamos aumentar o seu tamanho.

radio buttons com 15 cliques

Percebemos também que a parte do telefone tem sido muito clicada, mas não temos um link nele associado que abra o aplicativo para ligações. O que poderia ser útil para quem está acessando o site de um celular. O Hotjar nos permite também criar um mapa de calor que analisa os movimentos do usuário na página.

mapa de movimento

O mapa nos confirma como os botões do canto superior direito são bastante utilizados. Existe a vantagem também de selecionar o tipo de dispositivo que queremos analisar: computador, tablet ou celular.

separação por dispositivos

Caso seja preciso enviar os dados para alguém, temos a opção de fazer o download de um arquivo de imagem com todas as análises.

jpg com analises

Vimos como é simples trabalhar com o Hotjar para verificar as ações realizadas pelo usuário em uma página.

Sobre o curso UX Produto: monitore, mensure e teste o seu projeto

O curso UX Produto: monitore, mensure e teste o seu projeto possui 97 minutos de vídeos, em um total de 34 atividades. Gostou? Conheça nossos outros cursos de UX - User Experience em Design & UX, ou leia nossos artigos de Design & UX.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda UX - User Experience acessando integralmente esse e outros cursos, comece hoje!

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1017 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana