Mini-Projecto · Protótipo de interface para uma app real
Contexto
A "Feira Vizinha", uma associação que organiza mercados de produtores locais em vários concelhos, quer um protótipo de interface para uma app que ajude os visitantes a encontrar mercados perto de si, ver os produtores presentes e guardar favoritos. Foste contratado/a, individualmente ou a pares, para conceber o protótipo completo: da pesquisa sobre o utilizador até um protótipo de alta fidelidade, navegável, testado e documentado.
Não é preciso desenvolver a app a funcionar de verdade: o entregável é o protótipo interativo, feito numa ferramenta de prototipagem (recomenda-se o Figma), mais um dossiê que documenta as decisões.
Requisitos
Funcionais
- Ecrã de início com lista ou mapa de mercados próximos.
- Pesquisa e filtro de mercados (por concelho ou por data).
- Ficha de mercado: local, horário, lista de produtores presentes.
- Favoritos: guardar mercados para consulta rápida.
- Perfil simples do utilizador.
- Pelo menos 8 ecrãs distintos, ligados entre si por interações navegáveis.
- Pelo menos 1 fluxo completo prototipado com estado de sucesso e estado de erro (ex.: pesquisa sem resultados).
Não-funcionais
- Wireframes de baixa fidelidade de todos os ecrãs, antes de avançar para alta fidelidade.
- Sistema de design próprio: paleta de cores, tipografia, biblioteca de componentes (botões, cartões, campos).
- Versão responsiva de pelo menos 2 ecrãs principais (telemóvel e desktop).
- Cumprimento de critérios de acessibilidade básicos (contraste, texto alternativo, foco visível).
- Teste de usabilidade com pelo menos 3 participantes.
Fases
Fase 1 · Pesquisa e persona (3h) Definir 1 a 2 personas com base em necessidades e comportamentos realistas. Analisar 2 apps ou sites concorrentes/de referência (registar navegação, cores, pontos fortes e fracos).
Fase 2 · Arquitetura da informação (2h) Construir o sitemap completo da app e o user flow de pelo menos uma tarefa central (ex.: "encontrar e guardar um mercado favorito"), incluindo um cenário de erro.
Fase 3 · Wireframes de baixa fidelidade (3h) Desenhar os wireframes de todos os ecrãs previstos, mantendo consistência estrutural entre eles.
Fase 4 · Sistema de design e UI (3h) Definir a paleta de cores, tipografia e biblioteca de componentes reutilizáveis (botões, cartões, campos, ícones).
Fase 5 · Protótipo de alta fidelidade e interatividade (5h) Aplicar o sistema de design aos wireframes, com conteúdo real ou realista. Ligar os ecrãs com interações navegáveis, incluindo o fluxo de sucesso e o de erro definidos na Fase 2. Criar a versão responsiva dos 2 ecrãs principais.
Fase 6 · Acessibilidade e teste de usabilidade (3h) Rever contraste, texto alternativo e navegação por teclado. Correr o teste de usabilidade com 3 participantes, registar problemas e corrigir o protótipo.
Fase 7 · Documentação e apresentação (1h) Preparar um pequeno guia de estilo e apresentar o protótipo à turma, justificando as principais decisões.
Critérios de avaliação
| Critério | Peso |
|---|---|
| Pesquisa, persona e arquitetura da informação | 15% |
| Wireframes de baixa fidelidade (cobertura e consistência) | 15% |
| Sistema de design e coerência visual (UI) | 15% |
| Protótipo de alta fidelidade e interatividade (fluxos completos) | 25% |
| Responsividade e acessibilidade | 15% |
| Teste de usabilidade e correções aplicadas | 10% |
| Documentação e apresentação | 5% |
Erros comuns
- Avançar para o protótipo de alta fidelidade sem wireframes nem sitemap definidos primeiro.
- Cores e componentes inconsistentes entre ecrãs (vários tons de verde, botões diferentes para a mesma ação).
- Prototipar só o caminho feliz, sem estados de erro nem de resultado vazio.
- Ignorar a responsividade, entregando só a versão de um tamanho de ecrã.
- Testar usabilidade sem tarefas concretas, pedindo apenas "o que achas?" em vez de observar uma tarefa real.
- Não documentar porquê de decisões de design tomadas.
Bónus (opcional)
- Modo escuro (dark mode) do sistema de design.
- Micro-interação animada (ex.: animação ao guardar um favorito).
- Versão do protótipo em tablet, além de telemóvel e desktop.
- Aplicar um segundo ciclo de testes de usabilidade depois de corrigidos os primeiros problemas, e comparar resultados.
Reflexão
No dossiê final, responde: que decisão de design mudaste depois do teste de usabilidade, e porquê? E indica duas medidas concretas que tomaste para cumprir as diretrizes WCAG neste protótipo.