Protótipo e teste de design

1) Por que é necessário

• Hipótese → Protótipo → Teste → Insight → Iteração → Solução.

2) Níveis de Fidelidade e quando selecioná-los

Low-fi (sketches/papel): estrutura e fluxo; 30-90 min por iteração.
Mid-fi (esqueleto clicado): navegação, textos, estados; Entre 0,5 e 2 dias.
High-fi (visual/animação): percepção, microinterdições; 1-5 dias.
Código-proto ( + dados reais): produtividade, disponibilidade, pattern complexos (KYC, pagamentos); 2-10 dias.

Regra: Começamos com um nível mínimo suficiente para responder a uma hipótese.

3) Formatos de protótipos

Paper/Wireflow: cenários rápidos, ecrãs de banda desenhada.
Clicabel (Figma/Framer/ProtoPie): transições, ramais condicionados, pseudo-formas.
Wizard-of-Oz: «Magia por trás do esquadrão», uma lógica complexa simulada por um pesquisador.
Protótipo de código (React/Flutter): gestos, performance, A11y, integração com API.
Conteúdo protótipo: textos, estados vazios, erros/avanços.

4) Onde testar e como

• Modernizáveis: profundidade que esclarece questões, think-aloud.
• Imoderado: velocidade, zoom, tarefas simples.

• Excluídos: geografia mais ampla, gravação de tela/chamada de vídeo.
• Face: contexto, eye-tracking/gestos, dispositivos físicos.

• Testes de Yusabiliti (cenários de tarefas).
• O walkthrough cognitivo.
• Avaliação eurística (Nielsen 10).
• Triagem de cartas/Tree-testing (navegação).
• Testes de 5 segundos (primeira impressão).
• Teste de preferência (opções de tela/estilo).
• Desirability testing (cartões emo).
• Pesquisa diurna (ciclos longos).

5) Plano de teste (modelo)

1. Objetivo: que hipótese verificamos (por exemplo, «o novo fluxo KYC reduzirá o time-to-verify em 30%»).
2. Cenários de tarefas: 4-6 chave, com critério de sucesso.
3. Artefato - links de protótipos/versões.
4. Métricas: Task Sucess, Time-on-Task, Errors, SEQ (1-7), SUS (após a sessão), UMUX-Lite.
5. Perfil, mercados, N (5 a 8 entrevistados por ciclo).
6. Procedimento: entrada aquecimento da tarefa pesquisa de de brife.
7. Segurança e ética: consentimento de gravação, dados pessoais/pagamentos não coletados.
8. Logística: dispositivos/navegadores, grade de slots, folha de cheque do moderador.

6) Conjunto de métricas e normas

Task Sucess (%): meta de ≥80% em etapas críticas.
Time-on-Task: Mediana de cenário (comparado com o de controle).
Erro Rate: frequência de erros críticos/menores.
O SUS: ≥68 é uma norma básica, o ≥80 é ótimo.
SEQ (1-7): avaliação da complexidade da tarefa (o objetivo é ≤3).
NPS/CSAT após o cenário: por necessidade.
Sinais comportamentais: derramamento, retornos, back- , rage-cliques.

7) Recall e amostra

A quem chamar: segmentos reais (novatos/experientes, regiões/idiomas, dispositivos).
Quanto: 5-8 para um ciclo de qualidade; para A/B - estatísticas (veja abaixo).
Screening: Cortando os testadores profissionais, exigindo experiência em tarefas relevantes (por exemplo, pagamentos online).
Motivação: honesta, sem distorção de comportamento (não paguemos com bónus de produto para testes de jogo responsável).

8) Cenário do moderador (conspiração)

O objectivo é «Testamos o design, não você».
Consentimento de gravação, confidencialidade.
Aquecimento: experiência anterior, similar.
Tarefas: «Imagine o que você quer...» (mínimo de orientação).

«Diga-me o que espera ver», «O que é embaraçoso?»

Uma sondagem curta, um agradecimento.

9) Análise e priorização de descobertas

Taxonomia de problemas: Navegação, Compreensão, Entrada, Feedback, Espera/Hora, Segurança, Localização/A11u.
Seriedade: Blocker/Major/Menor/Cosmetic.
Frequência: Quantos entrevistados enfrentaram.
Impacto no negócio: conversão, riscos de complacência (CUS/pagamentos), transações.
Prioridade = Seriedade x Frequência x Influência.

Relatório (1 página): alvo, amostra, insights-chave (5-7), exemplos de citações, links de vídeo para momentos, solução e proprietário da tarefa.

10) A/B e experimentação

O que testar é claramente um fator (CTA, ordem de passos, formato de campo).
Métricas: conversão passo/vórtice, CTR, tempo, errador rate, cancelamento.
Tamanho da amostra: Contamos com o efeito desejado (por exemplo, uplift 5-10%, power 80%, = 5%).
Ética e riscos: para pagamentos/conclusões minimizar danos: lançamento canário, capas de tráfego, cancelabilidade.
Testes multivariantes só em grandes quantidades.

11) Ferramentas e artefatos

Protótipos: Figma/Framer/ProtoPie; para o código - React/Next.
Gravação e analista: screen/câmera, cartões térmicos, sessão replay, eventos.
Modelos: plano de teste, cenário de moderador, formulário de consentimento, folha de cheque de brife, modelo de relatório de uma página, decidição de £.
Dados fictícios/impessoais, barras de pagamento e KYC.

12) Disponibilidade (A11y) e localização em testes

Verificamos a navegação com tabelas, anéis de foco, 'aria-live' para brindes/erros.
Contraste AA em temas claros/escuros.
Teste de Linguagens Longas (DE/TR), formatos de datas/moedas, SE.
Textos falados de erros/avanços, alternativas a ícones.

13) Especificidades de flow chave (iGaming)

Registro/CUS: exigência, fotos-dicas, ETA («até 2 minutos»), erros de documento.
Pagamento/depósito/retirada: limites, comissões, prazos, regra same-method; textos de rejeição; passo de confirmação.
Bónus/missões: condições transparentes, progresso, estatais; evitar patterns escuros.
Jogo responsável: tom neutro, limitação fácil, acesso à ajuda.

14) Transferência para o desenvolvimento (handoff) e design-QA

Pacote Handoff: protótipo + especificações (estados, animações, tokens), texto microopy, chaves i18n, A11y-requisitos.
Definition de Done (UX): estado loading/empty/erro/sucess, foco/teclado, localização.
Design-QA: comparação com layout, interatividade, contraste/foco, texto, varredura em dispositivos/navegadores.

15) Folhas de cheque

Antes do teste

• A hipótese e a questão do estudo são formuladas.
• O nível Fidelity corresponde à tarefa.
• Os cenários e critérios de sucesso estão prontos.
• Recados e slots foram confirmados, e o consentimento foi preparado.
• O protótipo é aberto em dispositivos/navegadores de destino.
• Barras para ações sensíveis (pagamento/CUS).

Após teste

• Os contornos e os times estão reunidos.
• Os problemas foram marcados pela gravidade e frequência.
• As decisões foram definidas, os proprietários foram designados.
• A definição está atualizada e o mapa de trânsito.
• Relatório curto produzido (1 página) e vídeo demo (≤5 min).

16) Anti-pattern

Testar «beleza» em vez de cenários e tarefas.
Misturar várias hipóteses no mesmo teste.
Fornecer perguntas/dicas até o usuário tentar.
Mostrar apenas «caminho de sorte» - sem erros ou estados vazios.
Ignorar A11u/localização «antes da produção».
Tirar conclusões sobre 1-2 os entrevistados sem confirmação.
Realizar A/B sem calcular a potência da amostra.

17) Modelos rápidos

• «Se levarmos a escolha do pagamento para o primeiro passo, a conversão do depósito aumentará 7%, porque reduziremos as restrições inesperadas mais tarde».

• Adicione a conta de 500 UAH usando o cartão de crédito.

• O usuário termina a reposição sem ajuda e em ≤90 segundos.

• «Quão difícil foi a tarefa?» (1 - muito fácil... 7 - muito difícil)

• Blocker: Preso e não pode completar o Major: atrapalha seriamente o Menor: desacelera o Cosmetic: não atrapalha.

18) Esparguete final

Comece com o low-fi, aumenta o Fidelity apenas se necessário.
Teste os cenários, não as telas.
Мерь Task Success/Time/Errors + SEQ/SUS.
Priorize a gravidade x frequência x influência.
Suporte A11y e localização em cada ciclo.
Documenta as decisões e transmite um handoff exaustivo.