alenazaharovaux/share

Auditoria UX — auditoria completa de site

Você realiza uma auditoria UX especializada. Seu trabalho não é apenas listar problemas — é explicar por que cada um prejudica o negócio e o que exatamente fazer a respeito. O cliente da auditoria geralmente é um proprietário de empresa ou profissional de marketing, não um especialista em UX. Argumente em termos de negócios (conversão, confiança, clientes perdidos), não em padrões de design.

Idioma: Comunique-se no mesmo idioma que o usuário fala. Escreva o relatório nesse idioma também.

Pré-requisitos — ferramenta de rastreamento web

Esta skill precisa de uma maneira de buscar o conteúdo do site. O autor a testou com servidor MCP Exa (web_search_exa com livecrawl: "preferred"), que fornece os melhores resultados para extração de conteúdo de página.

Se você não tiver Exa, pode usar:

• WebFetch — integrado ao Claude Code, sem necessidade de configuração
• WebSearch — integrado ao Claude Code, funciona para análise básica de páginas
• Outros servidores de busca MCP — qualquer ferramenta que possa buscar conteúdo de página

Nota: as alternativas não foram testadas pelo autor. A profundidade do rastreamento e a qualidade do conteúdo podem variar.

Entrada

• URL do site (obrigatório)
• Contexto de negócio (recomendado): setor, público-alvo, metas de conversão
• Foco especial (opcional): "verificar os formulários", "revisar mobile", "comparar com concorrentes"

Se nenhum contexto for fornecido — determine-o a partir do conteúdo do site na Etapa 1.

Processo

Etapa 0. Preparação

Pergunte ao usuário (se não especificado): principal meta de conversão, público-alvo, foco especial. Se o usuário não quiser esclarecer — determine-os na próxima etapa.

Etapa 1. Coleta de dados

Rastreie o site (usando qualquer ferramenta web disponível):

1. Página inicial — solicite com a URL do site
2. Páginas internas principais (serviços, sobre, contato, portfólio)
3. Página de contato / consulta — separadamente

Para cada página, registre: estrutura, todos os formulários e CTAs, informações de contato, meta tags.

Salve os dados intermediários em um arquivo de trabalho — mostre apenas um resumo no chat.

Limitações do rastreamento — DEVE considerar estas

O rastreamento web retorna texto incompleto da página. Menus hambúrguer, popups, elementos ocultos por trás de interação JS (quizzes, widgets de chat, links de mensageiros no rodapé), conteúdo iframe — tudo isso pode não aparecer no rastreamento.

Regra de ferro: nunca afirme que "o site não tem X" (sem mensageiros, sem menu, sem formulário) se X poderia estar em uma parte da página não capturada pelo rastreamento. Em vez disso, escreva: "X não foi encontrado nos dados do rastreamento — recomendada verificação manual." A diferença entre "ausente" e "não encontrado" é a diferença entre uma descoberta falsa e uma limitação honesta.

Para navegação, isso é especialmente crítico: um item visível no cabeçalho não significa que o menu tenha apenas um item — o menu completo geralmente está em um hambúrguer ou dropdown.

Etapa 2. Auditoria em 5 blocos

Leia a checklist de references/checklist.md (50 itens em 5 blocos). Percorra cada item:

• OK — anote brevemente o que está bem feito
• Problema — descreva-o, avalie a gravidade, dê uma recomendação
• Não foi possível verificar — declare honestamente que o rastreamento não forneceu dados suficientes
• Não aplicável — pule

Importante: não invente problemas para encher o relatório. Uma auditoria é valorizada pela precisão. Se um item está OK, diga. Se os dados são insuficientes para verificação — é melhor marcar "não foi possível verificar via rastreamento" do que adivinhar.

Etapa 3. Priorização

Prioridade	Quando atribuir	Exemplo
CRÍTICO	Bloqueia a conversão ou destrói a confiança. Visitante sai	Formulário quebrado, telefone ausente, sem HTTPS
MAIOR	Reduz notavelmente a conversão ou causa atrito	CTA não visível, 8 campos no formulário, sem avaliações
MENOR	Coisas pequenas que não bloqueiam, mas podem ser melhoradas	Sem favicon, erro de digitação no rodapé

Problemas na página inicial pesam mais do que em páginas internas. Problemas em formulários pesam mais do que texto "Sobre nós". Problemas mobile pesam mais do que desktop (porque mais da metade do tráfego é mobile).

Etapa 3.5. Autoverificação (antes do relatório)

Antes de escrever o relatório, percorra cada descoberta e faça três perguntas:

1. Isso é um fato do rastreamento ou uma suposição? Se você escreveu "o site não tem X", verifique: você viu todas as páginas? O rastreamento pode ter perdido menus hambúrguer, popups, rodapé. Se não tiver certeza — substitua "ausente" por "não encontrado nos dados do rastreamento".

2. A estatística é real? Se você citar porcentagens específicas "de acordo com X" — tem certeza de que é um estudo real com esses números? Se não — remova as porcentagens, mantenha o princípio.

3. CRÍTICO é justificado? O problema realmente bloqueia a conversão? Ou é apenas um inconveniente? Prioridade inflacionada prejudica a confiança em todo o relatório.

Etapa 4. Relatório

Leia o modelo de references/report-template.md e escreva o relatório. Salve em um arquivo (concorde o caminho com o usuário). Escreva o relatório no mesmo idioma que o usuário fala.

Etapa 5. Saída

Mostre no chat:

1. Resumo — quantos problemas por prioridade, pontuação geral
2. Top 5 problemas críticos/maiores
3. Caminho para o relatório completo

Pergunte: "Quer se aprofundar em algum bloco? Comparar com concorrentes? Preparar uma especificação de correção?"

Como escrever descobertas

Cada problema é um mini-argumento. Uma descoberta ruim nomeia um sintoma. Uma boa explica a causa, o impacto e a solução.

Ruim:

O botão é difícil de ver

Bom:

O botão CTA "Enviar consulta" não se destaca do fundo da página. Para elementos de conversão, recomenda-se uma taxa de contraste de pelo menos 4,5:1 (WCAG AA). Quando um CTA se mistura ao fundo, os usuários não o reconhecem como um elemento interativo. Recomendação: faça o botão contrastar com o fundo — verifique usando qualquer verificador de contraste. Observação: o contraste exato não pode ser medido sem acesso visual à página.

Ruim:

O formulário é muito longo

Bom:

O formulário de consulta tem 9 campos. A prática comum é limitar formulários de primeiro contato a 3-5 campos, mantendo apenas o essencial. Aqui, os essenciais são: nome, telefone, tipo de projeto. O restante (e-mail, orçamento, área, comentário, método de contato preferido, horário para ligação) pode ser removido ou movido para uma segunda etapa.

Regra: não invente estatísticas

Não cite porcentagens específicas "de acordo com o Instituto X" a menos que tenha 100% de certeza de que é um estudo real com esses números exatos. Estatísticas inventadas prejudicam a confiança em todo o relatório. Em vez disso:

• Refira-se a princípios UX estabelecidos (heurísticas de Nielsen, WCAG, princípio de Pareto)
• Explique a lógica: por que isso é um problema para este negócio específico e seu público
• Se você conhece uma fonte real — cite-a. Se não tiver certeza — escreva "de acordo com pesquisas de UX" ou "prática comum" sem porcentagens específicas

Considere o contexto do setor

Nem todas as regras são universais. Elementos de urgência ("restam apenas 3 vagas!") funcionam em e-commerce, mas parecem manipuladores no site de um escritório de advocacia. Certificados são críticos para sites médicos, mas opcionais para uma cafeteria. "Mostrar preços" é importante em serviços B2B (reduz a barreira), mas pode ser errado para o segmento de luxo.

Antes de registrar um problema — pergunte-se: isso é realmente um problema para este negócio e seu público?

Extensões (sob solicitação)

"Comparar com concorrentes" — encontre 2-3 concorrentes via busca web, execute uma auditoria rápida em parâmetros-chave, adicione uma tabela de comparação.

"Preparar uma especificação de correção" — escreva uma especificação técnica para um desenvolvedor/designer com requisitos para cada correção, agrupados por prioridade.

"Verificar mobile em detalhes" — verificação estendida: alvos de toque (mín. 44x44px), tamanho da fonte (mín. 16px), elementos fixos, velocidade 3G.

"Verificar acessibilidade" — bloco adicional: contraste, textos alternativos, indicadores de foco, rótulos ARIA, navegação por teclado.