Mini-Projecto · Experiência interativa NoCode para o Museu do Chocolate
Contexto
O "Museu do Chocolate", uma pequena exposição temática, vai inaugurar uma exposição temporária e precisa de um conteúdo digital interativo para dois destinos: um totem tátil à entrada da sala e uma página web complementar, acessível por QR code no telemóvel dos visitantes.
Foste contratado/a como técnico/a de produção de conteúdos interativos para planear, criar, prototipar, animar, integrar imagem/vídeo/áudio, testar e exportar essa experiência, sem escrever código, numa plataforma NoCode à tua escolha (ex.: Figma, Adobe XD, ProtoPie, Genially ou Webflow).
Trabalhas individualmente ou a pares, e entregas o protótipo interativo a funcionar mais um pequeno dossiê (briefing, mapa de ecrãs, wireframes e decisões tomadas).
Requisitos
Funcionais
- Mapa de ecrãs com, no mínimo, 6 ecrãs/secções (ex.: capa, história do chocolate, processo de fabrico, curiosidades, quiz, créditos).
- Wireframe de todos os ecrãs, feito antes de qualquer produção visual.
- Design UI aplicado: hierarquia visual, consistência, tipografia (2 a 3 fontes) e paleta de cor própria, com contraste adequado.
- Icons e botões próprios ou de biblioteca coerente, com pelo menos os estados normal, hover e pressed definidos.
- Pelo menos 3 gatilhos e ações diferentes (ex.: clique, hover, temporizador), com navegação completa entre todos os ecrãs.
- Pelo menos 1 animação com Smart Animate/Auto-Animate/morph (ou equivalente) entre dois estados de um elemento.
- Integração de imagem, vídeo e áudio: pelo menos uma imagem otimizada, um vídeo curto (ou simulação de vídeo) e um elemento de áudio (narração ou efeito sonoro).
- Design responsivo: o mesmo conteúdo funcional em, no mínimo, dois tamanhos de ecrã (totem/desktop e mobile).
Não-funcionais
- Ficheiros e camadas com nomenclatura consistente e organizados por tipo.
- Protótipo testado por outra pessoa antes da entrega, com problemas encontrados documentados.
- Conteúdo compreensível mesmo sem som (legendas ou texto de apoio).
- Exportação final no formato certo para cada destino (totem e web/mobile).
Fases
Fase 1 · Briefing e planeamento (2h) Definir objetivo, público-alvo (visitantes do museu, famílias, escolas), mensagem central e restrições (totem tátil + web mobile).
Fase 2 · Mapa de ecrãs e wireframes (3h) Construir o mapa de ecrãs com as ligações de navegação e o wireframe de cada ecrã, sem cor nem imagens finais.
Fase 3 · Design UI: tipografia, cor, icons e botões (4h) Definir a paleta de cor e a tipografia do museu; criar ou escolher icons; construir botões com os estados normal, hover e pressed.
Fase 4 · Prototipagem e gatilhos (4h) Ligar todos os ecrãs na ferramenta escolhida, definir os gatilhos e ações da navegação, e testar em modo de apresentação.
Fase 5 · Animação sem código (4h) Aplicar Smart Animate/Auto-Animate/morph (ou equivalente) a pelo menos uma interação, com timing e easing cuidados.
Fase 6 · Integração audiovisual e design responsivo (4h) Integrar imagem, vídeo e áudio otimizados; adaptar o conteúdo aos dois tamanhos de ecrã exigidos (totem/desktop e mobile).
Fase 7 · Testar, depurar, ajustar e exportar (3h) Teste de usabilidade com outra pessoa; corrigir problemas encontrados; checklist final; exportar para os dois destinos.
Fase 8 · Apresentação (1h) Demonstrar a experiência interativa à turma, explicando as decisões do dossiê e os testes realizados.
Critérios de avaliação
| Critério | Peso |
|---|---|
| Planeamento (briefing, mapa de ecrãs, wireframe) | 15% |
| Design UI (hierarquia, tipografia, cor, icons e botões) | 20% |
| Prototipagem, gatilhos e ações | 20% |
| Animação sem código (Smart Animate/Auto-Animate/morph) | 15% |
| Integração audiovisual e design responsivo | 15% |
| Testes, depuração, ajuste e exportação | 10% |
| Dossiê e apresentação | 5% |
Erros comuns
- Ir direto ao design visual sem wireframe, descobrindo problemas de navegação tarde de mais.
- Depender de hover em ecrãs pensados também para toque (totem tátil, mobile).
- Esquecer estados de botão, deixando a navegação sem qualquer feedback visual.
- Nomes de camada diferentes entre frames, impedindo o Smart Animate/Auto-Animate de funcionar.
- Vídeo ou áudio pesados, sem otimização, tornando o totem lento a carregar.
- Testar só o próprio autor, que já sabe onde clicar e não vê os problemas reais de navegação.
- Exportar sem confirmar o formato certo para cada destino (totem vs web/mobile).
Bónus (opcional)
- Um easter egg: interação escondida que só aparece com um gesto específico (ex.: clicar três vezes num elemento).
- Versão do quiz com pontuação final e mensagem diferente consoante o resultado.
- Tradução do conteúdo para inglês, com alternância de idioma no próprio protótipo.
- Testar o protótipo com um grupo maior (5+ pessoas) e documentar um relatório de usabilidade mais completo.
Reflexão
No dossiê final, responde: que decisão de design UI ou de gatilho mudaste depois do teste de usabilidade, e porquê? E: se este conteúdo tivesse de ser adaptado para um terceiro destino (ex.: rede social), que ajustes concretos seriam necessários?