Microsoft Clarity: análise do comportamento de usuários com IA

Configurações e segurança - Apresentação

Apresentando o curso e o instrutor

Se hoje você se encontra em um cenário no qual trabalha em um ou mais produtos, seja individualmente ou em uma empresa, e ainda não sabe como as pessoas usuárias estão se comportando enquanto interagem com o seu produto — isto é, que tipo de interação realizam, onde clicam, para onde navegam e o que estão visualizando — este curso foi feito para você. Seja bem-vinde a mais um curso da Alura.

Se você ainda não me conhece, por favor, deixe-me apresentar. Eu sou Matheus Vilain, sou Designer de Produto, especialista em sistemas de design, autor do livro Design System: Design System (Sistema de Design) Além do Layout (Layout), publicado pela Casa do Código, e também sou professor aqui na Alura.

Audiodescrição: Eu sou um homem de pele branca, com cabelo, sobrancelhas, olhos e barba castanho-escuros. Meu cabelo é bastante curto, diferente da minha barba, que é bastante longa e cobre praticamente todo o meu pescoço. Estou usando óculos redondos na cor madeira e um moletom totalmente branco, com NASA (NASA) em vermelho escrito no centro. À minha frente há um microfone preso por um braço articulado; atrás de mim há uma estante com alguns livros e alguns bonecos, e ao lado também está minha belíssima costela.

Explicando a ferramenta Clarity e seus benefícios

Neste curso, nós vamos estudar em profundidade, com um projeto em mente, como visualizar métricas e dados reais e ativos no Clarity (Clarity). O Clarity (Clarity) é uma ferramenta da Microsoft (Microsoft) 100% gratuita para visualizarmos o comportamento das pessoas usuárias.

Se você tem um site, um aplicativo ou um produto digital e quer saber como as pessoas usuárias estão, de fato, interagindo ao longo das páginas — desde onde clicam, o que visualizam, o que digitam nos próprios campos e formulários, entre outros detalhes — o Clarity (Clarity) é a ferramenta ideal. De forma gratuita, sem necessidade de cadastrar cartão (e vale mencionar: o Clarity (Clarity) não possui plano pago; é gratuito para sempre), ele permite visualizar todo tipo de interação, inclusive com recursos de IA, para compreendermos a melhor forma de avaliar se o seu site ou produto está indo bem e se há oportunidades de melhoria, com base em como as pessoas usuárias já vêm interagindo.

Antecipando funcionalidades e próximos passos

Vamos percorrer cada uma das funcionalidades que o Clarity oferece, com foco principalmente em dois recursos que, com certeza, você utilizará com mais frequência: o heatmap (mapas de calor) e as gravações. Neles, podemos observar como a pessoa usuária está interagindo: o cursor se movendo, a digitação nos campos e todas as demais ações dentro do site; tudo isso pode ser acompanhado diretamente na ferramenta.

Te espero no próximo vídeo, para iniciarmos nossos estudos. Até lá, obrigado!

Configurações e segurança - Configurando o Clarity

Iniciando um novo projeto no clarity

Nosso ponto de partida para trabalhar com o Clarity é instalá-lo no nosso site ou, em resumo, dentro do nosso produto digital. No nosso painel, já vemos "GranaFlow", que é o projeto deste curso. Porém, para entendermos como criar um novo projeto e seguir com a instalação, vamos demonstrar o processo.

Ao acessar o Clarity e realizar o login na conta, visualizamos, no canto superior esquerdo, o botão "Novo projeto". Ao clicar nesse botão, é aberto um modal que pergunta inicialmente duas coisas: se é um site ou se é uma aplicação. Vamos selecionar "site", que é o modelo tradicional. Em seguida, vamos inserir um nome, como "site teste", e o domínio, por exemplo, teste.com.br. Na seção de setores do site, indicamos a categoria que mais se identifica com o nosso negócio ou produto digital. Vamos selecionar "Entretenimento" e, então, clicar para adicionar o projeto.

O Clarity cria o projeto e nos leva a uma interface que chamaremos, entre parênteses, "quase pronto", que é o título exibido. Nessa tela, há uma série de informações, incluindo algumas guias que o Clarity fornece para gestão após termos os primeiros dados — toda a parte de checklist (por exemplo, 0/7 concluído) —, além de alguns vídeos curtos abaixo que ensinam como usar o Clarity e apresentam algumas funcionalidades. Vamos omitir esses passos agora, pois o que realmente queremos ver é a seção superior, onde instalamos o Clarity no projeto.

Apresentando as opções de instalação

O Clarity oferece três maneiras de instalação:

• por meio de plataformas de terceiros;
• instalação manual, que consideramos a mais prática;
• instalação usando NPM, com as instruções fornecidas na própria interface.

Ao falarmos de plataformas de terceiros, já encontramos uma orientação clara: Shopify, Squarespace, Wix, WordPress e várias outras. Podemos clicar e visualizar opções como Google Tag Manager (GTM), Zapier, HubSpot e, ao final, Bubble, SharePoint, Wix, Weebly e Joomla. Para quem trabalha com WordPress, funciona muito bem. Em resumo, há um portfólio amplo de interfaces nas quais podemos realizar a instalação do Clarity.

Essa seção é separada porque, em muitos projetos, trabalhamos com um construtor de sites, como Wix ou WordPress, e, em diversas situações, não sabemos lidar com código para acessar o código-fonte e executar uma instalação manual. Essa orientação torna tudo mais prático.

Utilizando a instalação manual e apoio da ia

No nosso caso, estamos considerando o próprio código do GranaFlow: todo o site foi desenvolvido em Next.js. Para não precisarmos procurar manualmente onde instalar o script, podemos solicitar que a IA faça isso por nós. Acessamos a instalação manual, obtemos o trecho de código utilizado para iniciar o rastreamento no site, copiamos e podemos repassar esse conteúdo para a IA. Também poderíamos enviar para a cloud (nuvem), utilizar o OpenAI Codex e pedir que realize a instalação.

Aqui está o trecho de código de instalação manual fornecido pelo Clarity, que deve ser copiado. Ele cria a função global clarity e injeta o script de rastreamento usando o ID do projeto:

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "h88b9xxktt");
</script>

Demonstrando a inserção do script no html

No projeto do GranaFlow, utilizamos um framework (estrutura de desenvolvimento) JavaScript, o Next.js. Entretanto, sites mais simples, que utilizam apenas HTML e CSS, são mais práticos, e não precisaríamos solicitar apoio da IA.

Fazendo um exemplo rápido, vamos considerar um arquivo HTML. Esse arquivo possui uma estrutura muito simples, com o elemento HEAD, que concentra os metadados do site, e o BODY, onde fica o conteúdo e toda a parte visual, o front-end (camada de interface).

Para visualizar essa estrutura base, considere o seguinte HTML mínimo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

A orientação é: copiar e colar o código da cloud (nuvem) no elemento HEAD do site ou da aplicação. Basicamente, copiamos o trecho, retornamos ao arquivo e verificamos que a tag HEAD termina com TITLE (título do site). Esse código deve ser colado ao final do HEAD.

Fazendo exatamente isso, o resultado fica assim — repare que o script do Clarity foi adicionado logo após a tag title, antes do fechamento do head:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        (function(c,l,a,r,i,t,y){
            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
        })(window, document, "clarity", "script", "h88b9xxktt");
    </script>
</head>
<body>
    
</body>
</html>

Concluindo a instalação e orientando próximos passos

Depois de colar, salvamos e publicamos o site; o rastreamento começará após alguns minutos. Às vezes pode demorar algumas horas — eventualmente, até um dia. A partir daí, o Clarity passa a registrar o mapa de calor e as gravações das pessoas que acessarem o site ou o produto digital.

Com isso salvo, tudo já funcionará. A instalação é muito simples. O Clarity fornece toda a orientação e, se necessário, podemos pedir ajuda à IA para realizar esse procedimento.

Vale mencionar que, em empresas de tecnologia, muitas vezes quem realiza esse tipo de instalação não é a equipe de design, mas sim as equipes de engenharia, desenvolvimento e tecnologia, que têm acesso ao repositório e ao código do site para implantar em produção.

Nos vemos no próximo vídeo para continuar falando sobre esta parte central da ferramenta. Nos vemos!

Configurações e segurança - Ética e privacidade de dados

Apresentando configurações iniciais do projeto

Depois que o Clarity estiver instalado no site, há algumas configurações muito úteis que podemos fazer na área do projeto. Vamos mostrá-las agora.

Primeiro, o menu "Visão geral" serve exatamente para alterar, modificar ou atualizar qualquer dado da mesma informação que inserimos ao registrar o projeto. Nome, URL do site e setor do site não têm grande impacto, mas, se precisarmos mudar algo — por exemplo, se o domínio do site for atualizado —, acessamos aqui e modificamos para deixar tudo em ordem.

A Clarity também traz a mesma lista de verificação que mostramos na página "quase pronto", para verificarmos se ainda há algo em curso nesta fase inicial de configuração do Clarity pela primeira vez. No nosso caso, há dois itens que ainda não foram concluídos: adicionar mais de um membro ao projeto (já vamos mostrar como funciona) e configurar para não capturar o tráfego de determinados endereços IP, algo muito importante que também vamos ensinar.

Gerenciando membros e permissões da equipe

Falando primeiro sobre membros no projeto, o terceiro menu, "Equipe", inicialmente mostra apenas nosso usuário: nome, e-mail e cargo. Há até um link "sair da equipe", que nem faz sentido existir, porque a equipe é composta apenas por nós. Podemos adicionar novas pessoas: ao clicar para adicionar, é aberta uma janela modal solicitando o e-mail da pessoa e seu papel.

• Se atribuirmos o papel de membro, uma série de configurações não ficará habilitada para essa pessoa.

• Se atribuirmos o papel de Admin (administrador/a), o nível será o mesmo do nosso; essa pessoa poderá editar qualquer coisa e, inclusive, poderá nos remover do próprio Clarity.

Vale mencionar: o Clarity não cria um usuário do tipo Owner (proprietário/a do projeto). Todas as pessoas com papel de Admin (administrador/a) estão no mesmo nível, independentemente de quem tenha criado o projeto.

Configurando bloqueio de endereços IP

Agora, sobre o bloqueio de IP, é importante configurarmos isso no projeto, sobretudo se considerarmos que a equipe é grande e muitas vezes realiza testes em produção. Equipes de design, engenharia e desenvolvimento, e também de QA (Garantia de Qualidade), costumam acessar o site para testar. A partir do momento em que alguém entra no site e começa a interagir, o Clarity já contabiliza isso como uma sessão, leva a interação para o mapa de calor, registra a sessão e contabiliza tudo o que essa pessoa fez.

Muitas vezes, não queremos mapear essas pessoas, porque não são usuárias reais. Nesse caso, estaríamos considerando alguém que testou uma funcionalidade do site ou produto e que não é, necessariamente, uma pessoa usuária. Poderíamos acabar analisando alguém que, na verdade, é um(a) colega da empresa. Para evitar esse tipo de métrica enviesada, que não provém de uma pessoa usuária ou cliente real, podemos bloquear o endereço IP das pessoas da equipe, conforme descreve a própria ferramenta.

Por exemplo, talvez queiramos bloquear as visitas ao site feitas por membros da equipe. Ao abrir a opção "Bloquear endereço IP", será exibida uma janela modal: informamos o nome da pessoa; se quisermos bloquear nosso próprio IP, há uma opção específica; e, em seguida, inserimos o endereço IP no campo indicado.

Ao adicionarmos essa pessoa, ela poderá continuar acessando o site normalmente; a única diferença é que o Clarity deixará de mapeá-la no sistema. Assim, não serão gerados novos mapas de calor, não haverá novas gravações e isso não terá impacto nas métricas do painel.

Configurando mascaramento de dados e encerrando

No painel, na área de configurações, há diversas outras informações, mas há um destaque que queremos mostrar e que consideramos um dos mais importantes: a opção de mascaramento.

Quando trabalhamos, por exemplo, em um e-commerce (comércio eletrônico) ou em um SaaS (Software como Serviço), sabemos que são plataformas nas quais normalmente as pessoas usuárias vão se inscrever, contratar um serviço e, na maioria dos casos, inserir dados de cartão de crédito. O cartão de crédito, como sabemos, geralmente é um campo que não exibe o valor real: aparece com aqueles pontos, como um campo de senha. Isso vale para o CVV, o código de segurança do cartão. Contudo, todos os demais —o número do cartão, a data de vencimento— e, em muitos casos, até o próprio CVV podem estar ocultos ou completamente visíveis, dependendo da implementação.

O Clarity pode mapear tudo o que uma pessoa escreve dentro do produto: se digitou o nome, o sistema mapeará; se digitou o número do cartão de crédito, também mapeará. Essa opção de mascaramento é fundamental para a segurança de ambas as partes: a segurança da pessoa usuária, da pessoa cliente, e a segurança da empresa para a qual trabalhamos.

Para evitar esse tipo de problema, podemos mascarar todo tipo de imagem, conteúdo ou texto que aparece no Clarity. Se a pessoa digitar algo em um campo de texto, em vez de exibir o que está sendo digitado, o sistema mostrará apenas os pontos de senha, ocultando totalmente a informação. Dessa forma, deixamos de correr o risco de receber dados de cartão de crédito ou informações confidenciais que a empresa não deveria receber. Esse tipo de informação, embora a pessoa cliente a forneça para se inscrever ou contratar um serviço, é criptografada; a única pessoa que realmente conhece os dados do cartão é a própria pessoa cliente, porque foi quem utilizou o cartão. A empresa não armazena isso em uma base de dados.

Para não correr esse risco, podemos marcar —e recomendamos fortemente: marque ao menos a opção de mascarar imagens e textos— ou, se for necessário elevar o nível de segurança, mascarar todo tipo de informação dentro do site, o que ocultará todo o texto. Isso depende do nível de segurança desejado. Podemos realizar testes, verificar como fica na gravação e, talvez, deixar o modo “Relaxado” se não houver nada tão sensível no site que precise ser mascarado. Às vezes não há campos com informações que exijam segurança; nesse caso, o modo Relaxado pode ser mais adequado. Entretanto, “Equilibrado” e “Rígido” são os que normalmente usamos, e essa é a nossa recomendação.

Veremos nas aulas como isso funciona na prática. O mascaramento realmente oculta tudo: tanto o texto do site quanto o texto digitado nos próprios campos. Exploraremos isso mais adiante.

Essas são algumas configurações do Clarity que consideramos relevantes e que podem ser importantes para o seu caso. Nós nos vemos na próxima aula para falar mais sobre uma das funcionalidades que mais veremos: o mapa de calor. Nos vemos!

Sobre o curso Microsoft Clarity: análise do comportamento de usuários com IA

O curso Microsoft Clarity: análise do comportamento de usuários com IA possui 115 minutos de vídeos, em um total de 34 atividades. Gostou? Conheça nossos outros cursos de UX Research em UX & Design, ou leia nossos artigos de UX & Design.

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

• Configurações e segurança
• Métricas com mapas de calor
• Comportamento do usuário
• Extraindo conhecimento
• Fundamentando decisões