Para onde olham

O que é e porque importa

Quem abre a tua landing ou a tua ficha na App Store decide em poucos segundos se fica. Nesses segundos, vê o que a tua app faz e o botão para a experimentar? Normalmente só descobres depois do lançamento, pelos números.

O Foveacast mostra-te antes. É uma página web gratuita e open source (licença MIT, o código está no GitHub). Arrastas uma captura de ecrã da tua página e devolve-te um mapa de calor, um mapa de cores: onde é claro, é provável que os olhos vão para lá; onde é escuro, provavelmente não. E mostra-o para três momentos: o primeiro segundo, os três primeiros, os sete primeiros.

O modelo aprendeu com dados reais: o estudo UEyes (Jiang, Leiva e colegas, CHI 2023) seguiu com um eye tracker, uma câmara que regista para onde olham as pupilas, 62 pessoas diante de 1980 capturas de sites, programas, apps e cartazes. Tudo corre no teu browser: sem conta, e a imagem não é enviada para lado nenhum.

1. Faz uma boa captura de ecrã

O resultado vale o que vale a captura que lhe dás. Eu faço assim:

1. Abre a tua página no browser do computador, com a janela grande. Fecha o banner dos cookies e qualquer popup: se ficarem, roubam os olhares também na previsão.
2. Captura o primeiro ecrã, o que se vê sem fazer scroll: é aí que se decide o primeiro segundo. No Mac carrega em Cmd+Shift+4 e arrasta sobre a área; no Windows carrega em Win+Shift+S.
3. Para o resto da página, faz uma captura por bloco, não uma só muito comprida. O modelo trabalha com uma versão pequena da imagem, 320 por 240 píxeis: uma página inteira numa única imagem vertical fica esmagada e os detalhes desaparecem.
4. Guarda-a em PNG ou JPG, abaixo de 20 MB. Se tiver mais de 2560 píxeis de largura, a ferramenta reduz-la sozinha.

Para a App Store, abre a ficha da tua app no browser do computador e faz o mesmo. Não é como a vê quem a abre no telemóvel, mas diz-te se o ícone, o nome e as primeiras imagens se fazem notar.

2. Faz o teste

1. Abre allaboutken.com/Foveacast no computador, com o Chrome (ou outro browser baseado em Chromium) ou com o Firefox. Mantém a janela larga: se tiver menos de 900 píxeis, a página pensa que estás num telemóvel e mostra-te um aviso.
2. Da primeira vez descarrega os ficheiros do modelo, cerca de 57 MB: espera que termine. Nas vezes seguintes vai buscá-los à cache do browser e arranca logo.
3. Arrasta a captura para a página, cola-a ou carrega-a com New Image.
4. Espera pela análise: primeiro chega a vista de 3 segundos, depois as outras duas. Clica no mapa de calor para passar de uma vista para outra: First glance (1 s), Quick scan (3 s), Full viewing (7 s).

Com Download PNG guardas a imagem: fica com ela, vais precisar dela para a comparação no fim.

3. Lê as três vistas e o relatório

As cores vão do violeta escuro, pouca atenção prevista, ao laranja, até ao amarelo claro, a mais alta. Duas coisas a saber antes de olhar:

• A escala é relativa à tua imagem: o ponto mais forte é sempre amarelo, mesmo que nada se destaque de verdade. Amarelo não quer dizer «funciona», quer dizer «é o mais forte desta página».
• A mira marca onde o modelo acha que vai cair o primeiro olhar. É uma estimativa, não uma medição.

As três vistas dizem coisas diferentes:

• 1 segundo: o que salta à vista antes mesmo de ler. Contam o contraste, as margens, os rostos, o texto grande.
• 3 segundos: uma primeira volta pela página. Começam a contar os títulos, as imagens grandes, os menus e os botões.
• 7 segundos: uma leitura mais atenta. A atenção chega também aos textos, aos formulários e aos detalhes.

Por baixo do mapa de calor está o relatório, Analysis Report. As partes que mais uso:

• Attention by image region: a regra dos terços, ou seja, a página dividida numa grelha de 3 por 3, com a percentagem de atenção em cada quadrado.
• Eye movement sequence: a ordem prevista em que o olhar passa de uma zona para outra, marcada com números.
• Attention shift: como o centro da atenção se desloca de 1 a 7 segundos. Se desce pela ordem de leitura que queres, a página guia bem.

4. As duas perguntas do primeiro segundo

De todo o relatório, interessam-me duas perguntas. Vejo-as na vista de 1 segundo:

1. Vê-se a promessa? A promessa é a frase que diz o que a tua app faz e para quem. Devia estar clara nas três vistas. Se só acende aos 3 ou aos 7 segundos, provavelmente é pequena demais ou tem pouco contraste com o que está à volta.
2. Vê-se o botão principal? É o que leva as pessoas a descarregar ou a inscrever-se. Se ao fim de 1 segundo continua escuro, provavelmente ninguém o nota antes de sair.

Depois vê quem rouba a atenção: um logótipo, uma foto posta só para enfeitar, duas zonas claras lado a lado a fazer concorrência uma à outra. Decide o que deve ganhar.

Escreve em duas linhas o que viste: é isso que vais dar ao Claude Code.

5. Ajusta a página com o Claude Code

Abre o Claude Code na pasta do teu site e dá-lhe as imagens: arrasta-as para a janela, cola-as com Ctrl+V ou escreve o caminho do ficheiro. Uma alteração de cada vez, senão não sabes o que resultou.

Envio-te a captura da minha landing e o mapa de calor da atenção prevista ao fim de 1 segundo. O botão principal «[texto do botão]» fica quase às escuras: provavelmente ninguém o nota.
Faz com que se destaque: mais contraste com o fundo, mais espaço vazio à volta e, se for preciso, maior ou mais acima.
Não toques nos textos, nas cores da marca nem no resto da página.
Antes de mudar alguma coisa, diz-me em três linhas o que pretendes fazer.

O título «[a tua frase]» só acende na vista de 7 segundos. Quero que se veja no primeiro segundo.
Trabalha só no tamanho, no peso e no contraste do título, e no espaço à volta. Não mudes as palavras.
No fim, faz-me a lista dos valores que mudaste, antes e depois.

No mapa de calor de 1 segundo, [o elemento] é a zona mais clara e tira atenção ao título e ao botão.
Torna-o menos forte, com menos contraste ou mais pequeno, sem o remover.
Deixa o resto como está.

Antes de repetir o teste, abre a página e confirma que tudo continua a funcionar, também no telemóvel.

6. Repete o teste e depois pergunta a pessoas reais

1. Repete a captura com a mesma janela e o mesmo ponto da página, passa-a pelo Foveacast e guarda o PNG. Se mudares o enquadramento, a comparação não conta.
2. Põe lado a lado os dois mapas de calor de 1 segundo, antes e depois. A pergunta é uma só: o botão e a promessa estão agora mais claros, em comparação com o resto da página?
3. Vê também as vistas de 3 e de 7 segundos: mudaste a atenção de sítio, confirma que não a tiraste a algo que importa.
4. Se ficou pior, volta atrás. Se ficou melhor, mantém a alteração e passa à próxima.

E depois não confies demasiado. É uma previsão sobre uma pessoa média que olha para a página sem procurar nada; os teus utilizadores chegam com um objetivo, e quem procura alguma coisa olha de outra maneira. Com textos densos, tabelas e mapas erra mais. Existem serviços pagos com eye tracking medido em pessoas reais, mas para uma verificação antes do lançamento chega isto: usa-o para encontrar os problemas evidentes, depois mostra a página a algumas pessoas reais e pergunta-lhes o que faz esta app e onde clicariam.

Os erros mais comuns

• Passar a página inteira numa única imagem muito comprida. Fica esmagada: faz uma captura por bloco.
• Ler o amarelo como «funciona». É só o ponto mais forte da tua imagem.
• Olhar só para a vista de 7 segundos. A promessa e o botão decidem-se no primeiro.
• Pedir ao Claude Code cinco alterações de uma vez e depois não saber qual ajudou.
• Tomar o mapa de calor pelos teus utilizadores reais. É uma média, não a tua gente.

Checklist

• Captura feita no computador, sem banners nem popups
• Uma captura do primeiro ecrã e uma de cada bloco importante
• A promessa está clara nas três vistas
• O botão principal não está escuro ao fim de 1 segundo
• Pedi ao Claude Code uma alteração de cada vez
• Repeti o teste com o mesmo enquadramento e comparei os dois PNG
• Mostrei a página a algumas pessoas reais

Perguntas frequentes