O que é um protótipo?
Protótipo é uma versão simulada de um produto digital, em que as telas se conectam e respondem ao clique como se o sistema já existisse. Em inglês, o termo é prototype, e o processo de criá-lo é chamado de prototipagem.
O protótipo parece funcionar sem funcionar de verdade. Por trás dos botões existe um mapa de ligações entre telas, sem banco de dados nem código de produção. Essa simulação basta para observar uma pessoa tentando concluir uma tarefa.
O valor do protótipo está no momento em que ele aparece: antes do desenvolvimento. Mudar um fluxo no protótipo custa horas de design. Mudar o mesmo fluxo depois de programado custa semanas de equipe. Por isso a prototipagem faz parte do repertório básico de UX.
Como funciona na prática?
A prototipagem parte de estruturas já definidas e avança em rodadas curtas:
- Escolha o fluxo a testar. Um protótipo cobre um caminho específico, como “encontrar um plano e assinar”.
- Reúna as telas desse fluxo, evoluídas a partir do wireframe e da arquitetura de informação.
- Conecte os elementos: ao tocar no botão, o protótipo leva à tela seguinte. Inclua os caminhos de erro, como campo em branco.
- Rode um teste de usabilidade: peça a usuários que cumpram a tarefa e observe em silêncio.
- Ajuste o que travou e repita.
Protótipos variam em fidelidade. O de baixa fidelidade usa blocos cinza, útil para validar sequência de telas. O de alta fidelidade traz a camada de UI, com cores, textos reais e componentes do design system, e serve para testes finais.
Exemplos de uso
- Uma fintech prototipa o fluxo de abertura de conta, descobre em teste que cinco de sete participantes travam na etapa de foto do documento e reescreve as instruções antes de programar.
- Um e-commerce testa dois protótipos de checkout, um em página única e outro em três passos, com dez clientes reais antes de decidir o investimento de R$ 40.000 no desenvolvimento.
Erros comuns
- Prototipar o produto inteiro, gastando semanas em telas que ninguém vai testar.
- Criar o protótipo e nunca colocá-lo na frente de um usuário.
- Buscar alta fidelidade cedo demais, quando a dúvida ainda é sobre o fluxo.
- Simular só o caminho perfeito e ignorar erros, exatamente onde as pessoas mais travam.
Perguntas frequentes sobre protótipo
Qual a diferença entre protótipo e wireframe?
O wireframe é o esboço estático de uma tela: mostra quais elementos existem e onde ficam. O protótipo conecta telas em um fluxo navegável e responde a cliques. O wireframe responde “o que vai aqui”, e o protótipo responde “essa sequência funciona quando alguém usa”. Na prática, o wireframe costuma virar protótipo.
Protótipo precisa de código?
Não. Ferramentas de design criam protótipos ligando telas por áreas clicáveis, sem programação. Protótipos codificados existem quando a dúvida envolve comportamento técnico, como desempenho. Para validar fluxo, texto e clareza, a simulação sem código já responde à maior parte das perguntas.
Quando vale a pena prototipar?
Vale sempre que a decisão for cara ou incerta: fluxos de cadastro, checkout e redesenhos completos. Para uma alteração pequena e reversível, como trocar o texto de um botão, um teste direto na página costuma responder mais rápido do que um protótipo.