Habilidades de Pesquisa Heurística de UX
Realiza avaliações heurísticas baseadas nos princípios de design centrado no ser humano e gera um relatório com os resultados.
Pré-requisitos
Antes de realizar a avaliação heurística, verifique as seguintes condições a partir do prompt fornecido. Se alguma delas não puder ser confirmada, faça as perguntas apropriadas. Se a avaliação for realizada em um ambiente onde estas condições não são atendidas, avise previamente que os resultados podem não ser suficientemente completos.
Definição do Alvo
- A avaliação pode ser feita em um dos dois modos:
- Modo Página Inteira: Avalia uniformemente todas as páginas de um website especificado.
- Modo Reprodução de Jornada: Avalia a experiência ao percorrer uma jornada do cliente especificada.
- O alvo da avaliação (lista de URLs para o modo página inteira, ou a URL inicial da jornada para o modo reprodução de jornada) deve estar claro.
- No modo de reprodução de jornada, o resumo da jornada do cliente (ex.: "pesquisar informações sobre X", "fazer contato") deve estar claro.
Definição do Ambiente Alvo
- Especificar o ambiente de acesso do usuário alvo (PC / Dispositivo Móvel).
Confirmação da Disponibilidade do Método de Pesquisa
- O código-fonte do website alvo (HTML, CSS, JavaScript) deve estar acessível.
- Playwright ou uma ferramenta E2E equivalente deve estar disponível.
- Deve ser possível acessar e interagir com o website alvo usando a ferramenta E2E.
Princípios
- Os resultados da avaliação devem ser gerados em Português.
- A avaliação deve seguir os 10 princípios de usabilidade de Nielsen, com uma pontuação de 1 a 10 para cada princípio.
- Qualquer problema específico identificado em cada princípio deve ser relatado sem omissões.
Processo de Avaliação
A avaliação deve ser executada em etapas, seguindo o processo abaixo:
-
Criação da Estrutura do Site / Diagrama de Navegação
- Use ferramentas E2E como Playwright para interagir com as telas e realizar o seguinte:
- No modo página inteira, entenda a navegação entre as telas do website listado e crie a estrutura do site.
- No modo reprodução de jornada, crie um diagrama de navegação que represente a sequência de telas para realizar a jornada do cliente.
- Use ferramentas E2E como Playwright para interagir com as telas e realizar o seguinte:
-
Validação Dinâmica / E2E (Confirmação da Jornada do Cliente Alvo)
- No modo página inteira, use ferramentas E2E como Playwright para acessar cada website e interagir com os principais elementos de UI:
- Durante a interação, verifique se os princípios de usabilidade estão sendo atendidos e atribua as pontuações.
- No modo reprodução de jornada, use ferramentas E2E como Playwright para reproduzir a jornada do cliente alvo:
- Durante a jornada, verifique se os princípios de usabilidade estão sendo atendidos e atribua as pontuações.
- No modo página inteira, use ferramentas E2E como Playwright para acessar cada website e interagir com os principais elementos de UI:
-
Análise Estática de Código
- Leia o código-fonte (HTML, CSS, JavaScript) das páginas web (listadas ou navegadas) e verifique a validade da estrutura DOM, o uso de tags semânticas, a validade dos atributos, a configuração de WAI-ARIA, etc.
Definição dos Status de Avaliação
Atribua um dos seguintes status a cada princípio:
- 1 a 10: Pontuação de 1 (mais baixo) a 10 (mais alto).
- Não aplicável: Quando não existirem funcionalidades ou elementos de conteúdo relevantes para o princípio em questão.
Formato de Saída
O resultado da avaliação deve ser gerado como um arquivo .md organizado conforme a estrutura Markdown abaixo, juntamente com imagens de screenshot de toda a página web alvo (com a localização dos problemas demarcada por um retângulo vermelho e o número do problema indicado). A estrutura de pastas deve ser a seguinte:
├ huristic-research-result-[nome-do-dominio].md
└ screenshots
├ screenshot-[URL-do-website].png
└ ...
Relatório de Avaliação Heurística
1. Resumo da Avaliação
- Data e hora da avaliação
- (No modo reprodução de jornada) Jornada alvo
- Lista de URLs alvo
- Ambiente de teste (PC / Móvel)
Estrutura do Site / Diagrama de Navegação
Apresente a estrutura do site ou o diagrama de navegação em um bloco de código na sintaxe Mermaid.
Resumo de Resultados Globais
| Princípio | Pontuação | Justificativa / Comentário |
|---|---|---|
| 1. Visibilidade do status do sistema | 1~10 ou Não aplicável | Inserir justificativa / comentário |
| 2. Correspondência entre o sistema e o mundo real | 1~10 ou Não aplicável | Inserir justificativa / comentário |
| 3. Controle e liberdade do usuário | 1~10 ou Não aplicável | Inserir justificativa / comentário |
| 4. Consistência e padronização | 1~10 ou Não aplicável | Inserir justificativa / comentário |
| 5. Prevenção de erros | 1~10 ou Não aplicável | Inserir justificativa / comentário |
| 6. Reconhecimento em vez de memorização | 1~10 ou Não aplicável | Inserir justificativa / comentário |
| 7. Flexibilidade e eficiência de uso | 1~10 ou Não aplicável | Inserir justificativa / comentário |
| 8. Design estético e minimalista | 1~10 ou Não aplicável | Inserir justificativa / comentário |
| 9. Ajuda os usuários a reconhecer, diagnosticar e se recuperar de erros | 1~10 ou Não aplicável | Inserir justificativa / comentário |
| 10. Ajuda e documentação | 1~10 ou Não aplicável | Inserir justificativa / comentário |
2. Lista de Problemas e Propostas de Melhoria
Para cada problema específico, indique o princípio correspondente e relate no formato abaixo:
Issue-XX: [Número do problema, título resumido do problema]
- Princípio correspondente: Nome do princípio correspondente.
- Localização: URL da página alvo, seletor CSS ou posição no código.
- Posição na página: Descrição concisa de onde o problema está na página (ex.: título abaixo do banner principal).
- Ação realizada: Inspeção visual ou descrição de qual ação produziu o problema.
- Descrição do problema: Qual problema está ocorrendo.
- Exemplo de usuários afetados: Quem é particularmente afetado (ex.: usuários de leitores de tela, usuários de teclado, pessoas com baixa visão).
- Solução proposta: Descreva a solução proposta. Se houver uma sugestão de correção específica, mostre o exemplo de código no formato abaixo:
- Exemplo de código com problema (Before):
<!-- Padrão de implementação problemático --> - Exemplo de código recomendado (After):
<!-- Padrão de implementação que resolve o problema -->
- Exemplo de código com problema (Before):
3. Observações Complementares
Inclua quaisquer observações notáveis durante a avaliação (erros de JavaScript, mau funcionamento, etc.).
Referências
references/hcd-10-usability-heuristics.md- Os 10 princípios de usabilidade de Nielsen (texto original em inglês)references/hcd-standards.md- Resumo das normas ISO relacionadas ao Design Centrado no Ser Humano (HCD). Consulte aqui para a definição de usabilidade.references/examples_01.md- Exemplo de avaliação 1 com base no formato de saídareferences/huristic-research-result-www.soumu.go.jp.md- Exemplo de avaliação 2 com base no formato de saída (resultados da avaliação do site do Ministério de Assuntos Internos e Comunicações do Japão)/references/screenshots/screenshot-https_www.soumu.go.jp.png- Exemplo de avaliação 2 (screenshot do site do Ministério)/references/huristic-research-result-www.digital.go.jp.md- Exemplo de avaliação 3 com base no formato de saída (resultados da avaliação do site da Agência Digital do Japão)