Bloco 1 · Prototipagem

O que é prototipar

Um protótipo é uma representação experimentável de um produto, criada para aprender e testar antes de construir a sério.

Permite validar ideias cedo e barato, evitando construir algo errado.

"Falhar depressa para acertar depressa."

Fidelidade

Maior fidelidade ≠ melhor: escolhe-se conforme o propósito.

Propósito do protótipo

Antes de prototipar, perguntar: o que quero aprender?

• Validar um fluxo (chega-se ao objectivo?).
• Validar a compreensão (percebem a interface?).
• Validar desejo (gostam? usariam?).
• Comunicar uma ideia a stakeholders.

O propósito define a fidelidade e o que se mede.

Paper vs digital

Paper prototyping:

• Rápido, barato, sem ferramentas.
• Ideal para gerar e descartar ideias.
• Bom para co-criação com utilizadores.

Digital:

• Interactivo, partilhável, realista.
• Melhor para testes com sensação de produto.

Começar em papel, evoluir para digital.

Bloco 2 · Prototipagem em Figma

Modo Prototype

No Figma, o separador Prototype liga frames com interacções:

• Selecciona-se um elemento.
• Define-se um trigger (On tap, On drag, While hovering...).
• Escolhe-se uma acção (Navigate to, Open overlay, Back...).
• Define-se a animação (Instant, Dissolve, Move, Smart animate).

Triggers e acções

Transições

• Instant: corte imediato.
• Dissolve: cross-fade.
• Move in / out, Push, Slide: movimento direccional.
• Smart Animate: anima automaticamente diferenças entre frames.

Manter transições coerentes com a navegação (ex: push para avançar, back para recuar).

Smart Animate e overlays

Smart Animate: se dois frames têm camadas com o mesmo nome, o Figma anima a diferença (posição, tamanho, cor) — base para microinterações fluidas.

Overlays: painéis sobre o ecrã (menus, bottom sheets, modais) sem mudar de frame.

Bloco 3 · Protótipos avançados

Limites do Figma

O Figma é excelente para fluxos e transições, mas:

• Tem lógica condicional limitada (variáveis recentes).
• Não simula bem dados reais e estados complexos.

Para interacções mais ricas usam-se ferramentas dedicadas.

ProtoPie

ProtoPie permite protótipos muito realistas sem código:

• Triggers ricos (toque, arrasto, voz, sensores, tilt).
• Responses detalhadas.
• Variáveis e condições.
• Liga sensores reais do telemóvel.

Ideal para microinterações e produtos com lógica.

Framer (introdução)

Framer combina design com código React opcional:

• Protótipos com dados reais.
• Componentes interactivos avançados.
• Publicação como site real.

Mais próximo do produto final; curva de aprendizagem maior.

Variáveis e condições

Protótipos avançados reagem a estado:

SE carrinho > 0  →  mostrar badge
SE login válido  →  ir para Home
SENÃO            →  mostrar erro

Variáveis tornam o protótipo dinâmico (contadores, toggles, formulários) em vez de ecrãs estáticos.

Bloco 4 · Microinterações

O que são microinterações

Pequenos momentos de interacção com um propósito: confirmar, dar feedback, guiar, encantar.

Estrutura (Dan Saffer):

1. Trigger: o que a inicia.
2. Regras: o que acontece.
3. Feedback: o que o utilizador vê/sente.
4. Loops e modos: o que se repete/muda.

Timing e easing

• Timing: 150-300 ms para a maioria. Demasiado lento irrita; instantâneo passa despercebido.
• Easing:
  • ease-out para entradas (rápido→lento).
  • ease-in para saídas.
  • ease-in-out para movimentos contínuos.

Evitar movimento linear (parece robótico).

Princípios de animação aplicados

Adaptados da animação clássica:

• Antecipação: pequeno recuo antes da acção.
• Follow-through: a animação não pára abruptamente.
• Squash & stretch subtil dá vida.
• Staging: animar só o que importa.

Ao serviço da clareza, não da decoração.

Feedback e estados

Cada microinteração comunica estado:

• Botão pressed ao toque.
• Loading durante espera.
• Sucesso/erro após acção.
• Transições entre estados, não cortes secos.

Bloco 5 · Testes de usabilidade

Para que servem

Observar utilizadores reais a usar o protótipo revela problemas que o designer não vê.

Regra: 5 utilizadores detectam ~85% dos problemas de usabilidade (Nielsen).

Testar cedo e com frequência.

Protocolo e recrutamento

• Definir objectivos e tarefas realistas.
• Recrutar participantes do público-alvo (5 chegam por ronda).
• Preparar guião e cenário.
• Não ensinar a usar — observar.

Think-aloud

Pedir ao participante para pensar em voz alta enquanto usa:

• "Estou a procurar o botão de comprar..."
• "Não percebo o que isto faz..."

Revela o modelo mental e os pontos de confusão. O moderador não ajuda nem sugere.

Métricas

Combinar quantitativo (métricas) com qualitativo (observações).

Bloco 6 · Iteração

Analisar resultados

Após o teste:

• Reunir observações de todos os participantes.
• Agrupar problemas por tema.
• Identificar padrões (problema repetido por vários = real).

Separar o que é problema do que é preferência individual.

Priorizar

Nem tudo se corrige de uma vez. Priorizar por:

• Gravidade (bloqueia a tarefa?).
• Frequência (quantos afecta?).
• Esforço de correcção.

Matriz impacto × esforço → escolher os "quick wins" e os críticos.

Do protótipo ao produto

Ciclo de iteração:

Prototipar → Testar → Analisar → Refinar → (repetir)

Quando o protótipo está validado e estável → handoff para desenvolvimento (specs, componentes, estados).

Boas práticas

• Testar cedo, mesmo com baixa fidelidade.
• Um teste pequeno hoje vale mais que um grande "um dia".
• Documentar e partilhar aprendizagens.
• O protótipo serve para aprender, não para impressionar.