Mini-Projecto · Protótipo interativo de alta fidelidade, testado com utilizadores
Contexto
Cada aluno (ou par) planeia, desenha e testa um protótipo interativo de alta fidelidade de um fluxo completo de um sistema interativo, usando Figma ou Penpot. O trabalho cobre todo o percurso desta UC: entender os utilizadores, estruturar a informação, desenhar ecrãs consistentes e responsivos, adicionar interatividade e lógica, garantir acessibilidade, planear e (idealmente) conduzir um teste de usabilidade, e preparar a entrega ao desenvolvimento.
Escolher um produto e um fluxo central com sentido, por exemplo: uma app de reservas (restaurante, ginásio, consultas), uma app de mobilidade partilhada, uma app de tarefas ou hábitos, ou uma loja com checkout.
Requisitos
Funcionais
- Fluxo completo de pelo menos 5 a 6 ecrãs ligados, do início ao objetivo, incluindo pelo menos um caminho alternativo (erro ou vazio).
- Interações reais: gatilhos, transições coerentes e pelo menos um overlay (menu, painel ou modal).
- Microinterações: pelo menos 3, cada uma com gatilho, regra e feedback definidos (não apenas decorativas).
- Estados dos componentes: incluir, no mínimo, carregamento, erro ou validação, e um estado vazio.
- Variável e lógica condicional: pelo menos um elemento que reaja a um estado (contador, ativação condicional de um botão, ou equivalente).
- Acessibilidade: contraste adequado, alvos de toque com área suficiente e texto alternativo definido para as imagens com significado.
- Plano de teste de usabilidade: objetivos, perfil de recrutamento, 3 tarefas em formato de cenário, método (think-aloud) e pelo menos 3 métricas.
Não-funcionais
- Relatório: descrição do protótipo, plano de teste, resultados ou expectativas, e iteração proposta.
- Ficheiro organizado: páginas e frames com nomes claros, componentes reutilizáveis identificados.
Fases
Fase 1 · Utilizadores e fluxo (1h30) Definir o tema, o utilizador-alvo e um cenário concreto; mapear o fluxo completo com o caminho principal e pelo menos um caminho alternativo.
Fase 2 · Wireframes e arquitetura (1h30) Wireframes de baixa fidelidade de todos os ecrãs do fluxo, com a grelha e a hierarquia de conteúdo definidas antes de qualquer cor.
Fase 3 · Ecrãs de alta fidelidade (2h30) Aplicar tipografia, cor, ícones e um pequeno sistema de componentes reutilizáveis; garantir consistência entre todos os ecrãs e verificar a adaptação a pelo menos duas larguras de ecrã.
Fase 4 · Interações, estados e lógica (2h) Ligar os frames com gatilhos e transições coerentes, criar as microinterações, desenhar os estados dos componentes principais e configurar a variável ou lógica condicional exigida; rever contraste, alvos de toque e texto alternativo.
Fase 5 · Plano de teste de usabilidade (1h) Escrever o plano de teste completo e, se possível, conduzir uma sessão rápida de think-aloud com um colega, registando observações sem ajudar.
Fase 6 · Relatório e apresentação (1h30) Escrever o relatório com as decisões tomadas, os resultados (reais ou esperados) e a iteração proposta; preparar e fazer uma demonstração navegável à turma.
Critérios de avaliação
| Critério | Peso |
|---|---|
| Fluxo, arquitetura de informação e wireframes | 15% |
| Consistência visual, design UI e design responsivo | 20% |
| Interações, estados, microinterações e lógica | 20% |
| Acessibilidade | 10% |
| Plano de teste de usabilidade | 15% |
| Relatório e iteração proposta | 10% |
| Organização do ficheiro e apresentação | 10% |
Erros comuns
- Avançar para alta fidelidade sem validar primeiro a estrutura e o fluxo em wireframe.
- Desenhar só o caminho principal e esquecer os estados de erro e vazio.
- Ícones ou botões inconsistentes entre ecrãs, sem componente reutilizável.
- Animações sem propósito, que não comunicam informação nenhuma ao utilizador.
- Esquecer contraste, alvos de toque e texto alternativo até ao fim, em vez de os tratar desde o desenho.
- Plano de teste com tarefas que dão a resposta, em vez de um cenário realista.
- Ficheiro sem organização: frames sem nome, sem páginas nem componentes identificados.
Bónus (opcional)
- Conduzir o teste de usabilidade com um participante real (não apenas um colega da turma) e registar os resultados reais no relatório.
- Adicionar um segundo caminho alternativo (por exemplo, falha de pagamento ou perda de ligação).
- Verificar e documentar o cumprimento das normas de segurança e saúde no trabalho durante as sessões de produção (pausas, postura, iluminação).
- Preparar uma pequena especificação de handoff (medidas, cores, estados) para um dos ecrãs, como se fosse entregar a um programador.
Reflexão
No relatório final, responde: que decisão de desenho mudaste depois de pensar no teste de usabilidade, e porquê? Que problema de acessibilidade ou de estado em falta identificaste tarde de mais, e como o evitarias num próximo projeto?