# Prototipagem Protótipos de baixa e alta fidelidade, em papel e em Figma, e quando usar cada um. Página: https://resumos.rgo.pt/cadeiras/ipc/prototipagem/ Um **protótipo** é uma versão incompleta do sistema, construída para responder a uma pergunta concreta: este fluxo faz sentido, este ecrã comunica, este botão é encontrado. Prototipar é barato; programar a solução errada é caro. A fidelidade do protótipo deve acompanhar a pergunta: quanto mais cedo, mais grosseiro. ## Baixa fidelidade: papel e esboços Protótipos de **baixa fidelidade** são esboços em papel: retângulos por ecrãs, rabiscos por botões, post-its por menus. Servem para testar estrutura e fluxo, não aspeto. Têm duas vantagens decisivas: fazem-se em minutos, por isso geras alternativas em vez de te agarrares à primeira; e ninguém os confunde com produto acabado, por isso os comentários incidem no essencial em vez da cor do botão. A técnica clássica é o **mágico de Oz** (_Wizard of Oz_): uma pessoa simula o sistema. O “utilizador” toca no botão de papel e tu trocas o ecrã pelo seguinte. Testas fluxos inteiros sem uma linha de código. ![Três folhas de papel em sequência. Tocar em Nova sessão leva aos dois blocos com sala, escolher um bloco leva à confirmação. Tu, o mago, trocas as folhas.](https://resumos.rgo.pt/cadeiras/ipc/prototipagem/figura-1.svg) ## Alta fidelidade: clicável e realista Protótipos de **alta fidelidade** parecem e comportam-se quase como o produto: ecrãs desenhados em ferramentas como o Figma, com navegação clicável, texto real e dados plausíveis. Servem para testar detalhe (rótulos, hierarquia, microinterações) e para apresentar a decididores. O risco é inverter a ordem: polir cedo demais prende a equipa ao desenho atual e inibe críticas. Regra prática: baixa fidelidade para divergir (muitas ideias, fluxos alternativos), alta fidelidade para convergir (afinar a solução escolhida). Nunca testes usabilidade geral num protótipo de alta fidelidade sem teres testado o fluxo em papel primeiro. Pergunta de teste: o utilizador encontra o caminho entre ecrãs? Custo: minutos e três folhas. Mede-se: hesitações, toques fora das zonas ativas, desistências. Não se mede aspeto. Pergunta de teste: o utilizador percebe rótulos, hierarquia e estados? Custo: horas de desenho por ecrã. Mede-se: erros de interpretação, tempo por tarefa, satisfação. Só depois de o fluxo passar no papel. ## Mini guia: protótipo clicável no Figma Para a app de estudo em grupo, o clicável responde “o fluxo convence antes de programar”. Faz assim: 1. Um _frame_ por ecrã: grupo com “Nova sessão”, dois blocos com sala, confirmação com resumo. Texto real, dados plausíveis (“Qua 14 , B207”). 2. Liga os ecrãs: seleciona o botão, arrasta a ligação para o _frame_ seguinte, escolhe “On click” com “Navigate to”. Cada zona ativa tem um destino; o resto fica propositadamente morto. 3. Usa variantes para estados: o botão “Nova sessão” tem versão normal e premida; a confirmação tem versão com e sem notificação enviada. Testas estados sem duplicar ecrãs. 4. Partilha o _link_ de protótipo com o colega e observa: onde clica primeiro, onde hesita, o que tenta arrastar. Regista como numa sessão de papel, porque é a mesma pergunta com outra fidelidade. Para ver variantes na prática: [Vídeo: Figma Tutorial: Variants](https://www.youtube.com/watch?v=y29Xwt9dET0) A miniatura vem do YouTube. O vídeo só carrega quando clicas. [Abrir no YouTube](https://www.youtube.com/watch?v=y29Xwt9dET0) ## O que um bom protótipo cobre Limita o âmbito à pergunta. Para testar “o utilizador encontra a sala livre”, bastam três ecrãs: propor horas, ver sugestões, confirmar. Tudo o resto pode ser estático ou inexistente. Define também o que acontece fora do caminho feliz: se o utilizador tocar onde não há nada, o facilitador diz “essa parte ainda não está pronta” e regista o desvio, porque tocar fora do guião é um dado, não uma falha do teste. ## Exemplo: o fluxo que podes clicar Os três ecrãs em versão clicável. Carrega nos botões e repara no registo: diz sempre em que ecrã estás, como o facilitador diria numa sessão de papel. ```html

Grupo de estudo

Ecrã atual: grupo

``` ```css div { border: 1px solid #999; padding: 12px; margin-bottom: 8px; } button { padding: 8px 16px; cursor: pointer; } #registo { font-style: italic; } ``` ```js const nomes = { ecra1: "grupo", ecra2: "blocos", ecra3: "confirmação" }; for (const botao of document.querySelectorAll("[data-go]")) { botao.onclick = () => { for (const id of ["ecra1", "ecra2", "ecra3"]) document.querySelector("#" + id).hidden = id !== botao.dataset.go; document.querySelector("#registo").textContent = "Ecrã atual: " + nomes[botao.dataset.go]; }; }; ``` ## Exemplo: fluxo de três ecrãs em papel Para a app de estudo em grupo, desenha em três folhas: (1) lista do grupo com botão “Nova sessão”; (2) dois blocos sugeridos com sala (“Qua 14 , B207” e “Qui 10 , B112”); (3) confirmação com resumo e botão “Notificar grupo”. Pede a um colega que combine uma sessão para quarta sem lhe explicares nada. Tu és o computador: quando ele toca em “Nova sessão”, pões a folha 2 à frente; quando escolhe um bloco, mostras a 3. Observa e anota: hesitou entre os blocos porquê, procurou um botão de voltar atrás, percebeu que a notificação é automática. Se ele tocar fora das zonas ativas, não corrijas; pergunta no fim o que esperava encontrar ali. O que registar em cada sessão Para cada tarefa anota: concluiu sem ajuda, com ajuda ou desistiu; tempo aproximado; número e tipo de erros; citações literais de confusão (“pensei que isto apagava”). Estes são os dados brutos que vais transformar em correções na [avaliação de usabilidade](https://resumos.rgo.pt/cadeiras/ipc/prototipagem/avaliacao-usabilidade/). ## Para saber mais * Figma, [Guide to prototyping in Figma](https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma): o guia oficial, com ligações, interações e partilha. ## Para levar para a próxima página Protótipos respondem a perguntas, do papel ao clicável, e cada sessão gera dados. Falta o método para transformar observações em decisões: planear tarefas, medir e iterar. É a [avaliação de usabilidade](https://resumos.rgo.pt/cadeiras/ipc/prototipagem/avaliacao-usabilidade/).