Mini-Projecto · Interface interativa de uma app de reservas
Contexto
O "Estúdio Aro", um pequeno estúdio de ioga e pilates, quer uma interface interativa para os alunos consultarem horários e reservarem aula. Não existe ainda nenhum design nem código: começas do zero, seguindo o ciclo completo desta UC.
Trabalhas individualmente ou a pares. O produto final é um protótipo interativo publicado (site estático ou protótipo clicável de alta fidelidade, conforme o que for definido com o formador/a), acompanhado de um dossiê com wireframes, decisões de design e registo dos testes de usabilidade.
Requisitos
Funcionais
- Análise de requisitos documentada: quem é o utilizador, que tarefas precisa de completar.
- Wireframes de pelo menos 3 ecrãs (ex.: Início, Horários, Reserva/Confirmação).
- Mockup de alta fidelidade dos mesmos ecrãs, com paleta de cor e tipografia definidas.
- Protótipo navegável que liga os ecrãs entre si (clicável, mesmo que em ferramenta de design).
- Página construída em HTML e CSS funcionais para, pelo menos, o ecrã de Início (estrutura semântica).
- JavaScript que valide um formulário (ex.: reserva) e dê feedback visual ao utilizador.
- Design responsivo: layout testado e ajustado em desktop, tablet e telemóvel.
Não-funcionais
- Consistência visual: mesma paleta, tipografia e espaçamentos em todos os ecrãs.
- Sem redundâncias nem excessos de navegação ou conteúdo.
- Imagens otimizadas, com texto alternativo.
- Registo escrito de, pelo menos, um teste de usabilidade com um utilizador real (colega, familiar) e do ajuste feito a partir dele.
Fases
Fase 1 · Analisar layout e requisitos (3h) Definir o utilizador-tipo, as suas necessidades e comportamentos. Analisar 2 interfaces concorrentes (outras apps de reservas). Listar os ecrãs necessários e desenhar o mapa do site.
Fase 2 · Wireframes (2h) Esboçar, em baixa fidelidade, os ecrãs definidos na Fase 1. Validar a estrutura antes de avançar para o design visual.
Fase 3 · Mockups (3h) Definir paleta de cor, tipografia e componentes reutilizáveis (botões, cartões). Construir os mockups de alta fidelidade dos ecrãs principais.
Fase 4 · Montar o protótipo (4h) Ligar os ecrãs com interações clicáveis. Construir HTML/CSS do ecrã de Início. Adicionar JavaScript de validação do formulário de reserva.
Fase 5 · Design responsivo (2h) Testar e ajustar o layout em desktop, tablet e telemóvel. Corrigir problemas de quebra de layout, texto cortado ou alvos de toque pequenos.
Fase 6 · Testar e ajustar a usabilidade (3h) Testar o protótipo com pelo menos um utilizador real numa tarefa concreta (ex.: "reserva uma aula de ioga para amanhã"). Registar problemas encontrados e corrigi-los.
Fase 7 · Publicar e apresentar (3h) Rever a checklist final, publicar a interface (ou exportar o protótipo navegável) e apresentar à turma o percurso e as decisões tomadas.
Critérios de avaliação
| Critério | Peso |
|---|---|
| Análise de requisitos e do utilizador | 10% |
| Wireframes e mockups | 15% |
| Protótipo navegável e código HTML/CSS/JS | 25% |
| Design responsivo (desktop, tablet, telemóvel) | 15% |
| Testes de usabilidade e ajustes documentados | 20% |
| Consistência visual, dossiê e apresentação | 15% |
Erros comuns
- Avançar para o mockup sem validar primeiro o wireframe.
- Construir o protótipo só para desktop e adaptar a mobile só no fim.
- Usar
divpara tudo em vez de tags semânticas. - Testar a usabilidade só com o próprio autor, sem um utilizador externo.
- Publicar sem repetir a checklist final depois de correções de última hora.
- Ecrãs com cores e tipografia diferentes entre si, por falta de componentes reutilizáveis.
Bónus (opcional)
- Adicionar animações de transição entre ecrãs no protótipo.
- Testar a interface com um segundo utilizador de perfil diferente (ex.: idoso, pouco à vontade com apps) e comparar resultados.
- Transformar o site responsivo numa PWA instalável.
- Otimizar as imagens com um comparador de tamanho antes/depois e registar a poupança em KB.
Reflexão
No dossiê final, responde: qual foi o problema de usabilidade mais relevante que encontraste no teste, e como o resolveste? E: se tivesses de escolher só dois dos cinco critérios de desempenho da UC para defender o teu projeto perante um cliente, quais escolherias e porquê?