Conceber e executar layouts para aplicações multimédia interativas
Apresentação
UC02249 (50h · 4,5 pts) do curso Técnico de Multimédia. Aprofunda o UX/UI da UC02285 e aplica-o a aplicações multimédia interativas — apps móveis, web apps, kiosks, instalações interativas, smart TV. Cobre sistema de design, prototipagem, microinterações e implementação. Liga à UC02635 (CMS), UC02634 (web), UC02636 (acessibilidade), UC02637 (jogos), UC02638/UC02639 (AR/VR).
Linear vs interativo
| Linear (vídeo/animação) | Interativo (app/web/jogo) |
|---|---|
| Tempo controlado pelo autor | Tempo controlado pelo utilizador |
| Um caminho | Vários caminhos / estados |
| Sem feedback | Feedback em cada ação |
| "Vê" | "Faz" |
| Storyboard cronológico | Fluxos e estados |
A complexidade do interativo está em prever todos os estados e transições possíveis.
Recap de UX (UC02285)
- Personas + user stories + user journey.
- Arquitetura de informação clara; navegação a ≤ 3 cliques.
- Wireframe → mockup → protótipo.
- Sistema de design com tokens + componentes.
- Teste de usabilidade com utilizadores reais.
- Acessibilidade (UC02636).
Tipos de aplicação interativa
| Tipo | Características | Stack típico |
|---|---|---|
| Web app / PWA | Browser, instalável | HTML/CSS/JS + framework (React/Vue/Svelte) |
| App nativa | iOS/Android, hardware total | Flutter / React Native / nativo (Swift/Kotlin) |
| Kiosk | Ecrã público, toque, single-purpose | Web/Electron em modo full-screen |
| Instalação | Espaço físico + digital | Unity, openFrameworks, TouchDesigner |
| Smart TV / consola | Controlador, distância | Apps específicas, web TV apps |
| Imersivo (AR/VR) | Headset, gesto, voz | Unity, Unreal, WebXR (UC02638/UC02639) |
Cada plataforma tem inputs, distâncias e contexto diferentes — o design não é o mesmo.
Inputs
- Toque — alvos grandes (≥ 44-48 px), espaçados; gestos (tap, swipe, pinch, long press); sem hover real.
- Rato + teclado — hover, atalhos, foco visível por teclado (Tab).
- Controlador (TV, consola) — navegação por focus + setas; distância de visualização exige texto grande.
- Voz (Alexa, Siri) — comandos curtos; feedback áudio + visual.
- Gestos do corpo (Kinect-like) — exigem feedback claro do que está a ser detetado.
Sistema de design
Tokens
Valores base reutilizáveis (mesma ideia do CSS variables — UC02634):
- Cor — paleta (primária, secundária, neutros, semânticos: success/warning/error).
- Tipografia — famílias + escala (h1…body…caption) + line-height.
- Espaçamento — escala (4, 8, 16, 24, 32…); usar tokens, não pixéis ad hoc.
- Raios, sombras, breakpoints, z-index.
Em Figma: Variables (com modes: light/dark, idiomas, densidades).
Componentes
Elementos reutilizáveis com variantes (tamanho, cor, ícone) e estados:
default hover focus active selected
disabled loading error success empty
Esquecer estados (sobretudo focus, disabled, loading) é o erro nº 1 de UI iniciante.
Padrões
Soluções recorrentes: - Navegação (top, tabs, drawer, bottom nav). - Formulários (validação inline, ajuda, erros). - Feedback (toast, modal, banner). - Listas vs grids; cartas; tabelas. - Empty states com call-to-action.
Documentar padrões — guia de uso.
Navegação e fluxos
Padrões de navegação
| Padrão | Quando |
|---|---|
| Top nav / tabs | até ~5 secções principais |
| Bottom nav (mobile) | alcance do polegar; 3-5 itens |
| Drawer / hamburger | secundário/menos primário |
| Breadcrumbs | hierarquias profundas (onde estou?) |
| Search | quando há muito conteúdo |
| Modal | tarefas curtas/focadas |
| Wizard / steps | tarefas com fases |
Consistente em todo o app; regra prática ≤ 3 cliques para o essencial.
Estados de ecrã
Cada ecrã/lista tem 5 estados a desenhar (esquecer = amador):
- Vazio (primeira vez, sem dados) — com CTA claro.
- Loading (skeleton/spinner; nunca ecrã em branco indefinido).
- Erro (mensagem clara + ação para resolver/retry).
- Sucesso (feedback de confirmação).
- Dados normais.
Bónus: estados offline e permissão negada.
User flows
Diagramas de fluxo de tarefa: o utilizador parte de A para chegar a B; mapear cada decisão e ramificação. Detecta gargalos e passos desnecessários antes de codar. Ferramentas: Figma, Whimsical, Lucidchart.
Microinterações
Pequenos detalhes que comunicam estado e dão delight:
- Feedback ao tocar (ripple, escala 0,98, sombra).
- Animações curtas (~150-250 ms) em transições, sem bloquear.
- Transitions com easing (não linear).
- Lottie (UC02631/UC02242) para microanimações vetoriais leves.
- Skeletons durante o loading (em vez de spinners genéricos).
- Pull to refresh, infinite scroll com feedback visual.
- Confirmações (toast com undo) antes de modais cheios.
Respeitar prefers-reduced-motion — desligar/atenuar quando o utilizador pediu.
Prototipagem em Figma
- Frames (ecrãs) ligados com interações (on click → navigate).
- Auto Layout — componentes responsivos.
- Componentes + variantes para estados.
- Variables + modes — light/dark, idioma, densidade alta/baixa.
- Prototype — testar fluxos clicáveis num browser/Figma Mirror.
- Comments para feedback assíncrono.
- Dev mode — handoff com medidas, tokens, assets exportáveis.
Implementação
A implementação depende do tipo:
- Web app/PWA: HTML/CSS/JS + framework (React/Vue/Svelte); PWA = manifest + service worker (instalável, offline).
- Mobile: Flutter (Dart) ou React Native (JS) — uma base, dois ecossistemas (UC02835 do TDS).
- Kiosk: browser em modo kiosk full-screen com web app responsiva; Electron quando preciso de OS-level.
- Instalação interativa: Unity (jogos/exp.), TouchDesigner, openFrameworks — sensores, projeção, ecrãs múltiplos.
- Imersivo: Unity / Unreal / WebXR (UC02638/UC02639).
Handoff do Figma para developer com design tokens sincronizados (Tokens Studio, plugins Figma) — evita "drift" entre design e código.
Performance e qualidade
- Carregar rápido — Core Web Vitals (web), tempo de arranque (app).
- Animações 60 fps; nada engasga.
- Imagens otimizadas (UC00504), Lottie (UC02242) para vetorial.
- Acessibilidade (UC02636) integrada desde o início.
- Testes com utilizadores reais (3-5 chegam, UC02285).
- Analytics (Plausible, GA4) para iterar baseado em dados.
Workflow
- Briefing + objetivo de negócio.
- Personas + user stories + user journeys.
- Sitemap + user flows.
- Wireframes (baixa fidelidade, mobile-first).
- Sistema de design (tokens + componentes + estados).
- Mockups alta fidelidade.
- Protótipo clicável + microinterações.
- Teste de usabilidade com 3-5 utilizadores → iterar.
- Handoff ao developer.
- Implementar + QA (a11y, performance).
- Lançar e iterar com dados.
Apêndices
A · Checklist
- [ ] Personas/user stories definidas.
- [ ] User flows do fluxo principal.
- [ ] Sistema de design com tokens + componentes com todos os estados.
- [ ] Mobile-first; toque (≥ 44 px).
- [ ] 5 estados desenhados por ecrã (vazio/loading/erro/sucesso/dados).
- [ ] Foco visível por teclado.
- [ ] Microinterações curtas; reduced motion respeitado.
- [ ] Protótipo testado com utilizadores reais.
- [ ] Handoff preparado (tokens, medidas, assets).
- [ ] A11y validada (contraste, foco, alts, labels).
B · Glossário
Auto Layout (Figma). Layout responsivo no design. Design tokens. Valores base partilhados. Microinteração. Pequena interação que dá feedback. Padrão. Solução recorrente para um problema de UI. Skeleton. Placeholder de carregamento. State. Estado de um componente ou ecrã. User flow. Fluxo do utilizador para cumprir uma tarefa.
C · Recursos
- Figma · figma.com + Figma Learn.
- Laws of UX · lawsofux.com.
- Refactoring UI · livro/site.
- Material Design / Apple HIG — sistemas de referência.
- NN/g · usabilidade.