Ficha 01 · UX, wireframes e análise de problemas

Grupo I · Verdadeiro ou Falso (20 pontos)

1. UX Design é sinónimo de UI Design — ambos se referem à aparência visual de um produto. ___

2. Um wireframe low-fi deve usar tipografia real e cores da marca para ajudar o cliente a visualizar o produto final. ___

3. Auto Layout no Figma funciona de forma semelhante ao CSS Flexbox — distribui elementos numa direcção com padding e gap controlados. ___

4. O "happy path" num user flow representa o percurso ideal sem erros ou excepções. ___

5. Componentes no Figma são elementos reutilizáveis — alterar o componente principal actualiza todas as instâncias. ___

6. O Figma Inspect permite que os developers copiem directamente CSS production-ready para implementar na aplicação. ___

7. Edge cases incluem cenários como: estado vazio, erro de rede, utilizador não autenticado e input inválido. ___

8. Um sitemap mostra o design visual de cada ecrã de um produto. ___

9. A transição de wireframe low-fi para high-fi deve acontecer antes de qualquer validação da estrutura com stakeholders. ___

10. Wireframes high-fi devem incluir tipografia definida, componentes reais e espaçamento preciso. ___

Grupo II · Analisar wireframe e identificar 5 problemas de UX (45 pontos)

Descrição do wireframe

O seguinte wireframe descreve um ecrã de página de produto de uma loja online de calçado para mobile (375px).

Estrutura (de cima para baixo):

┌─────────────────────────────────────┐
│ [×] Fechar                          │ ← 20px height, canto superior esquerdo
├─────────────────────────────────────┤
│                                     │
│           [Foto do produto]         │ ← imagem única, sem gallery
│              1800×1200px            │
│                                     │
├─────────────────────────────────────┤
│ Nome: "Sapatilha Running Pro X200"  │ ← 12px, cinza claro
│ Preço: 89.99€                       │ ← 10px
├─────────────────────────────────────┤
│ Descrição (300 palavras de texto    │
│ contínuo, sem formatação,           │
│ parágrafo único)                    │
├─────────────────────────────────────┤
│ Seleccionar tamanho:                │
│ [36][37][38][39][40][41][42][43]    │ ← botões 24×24px
│                                     │
│         [ADICIONAR AO CARRINHO]     │ ← botão 30px height, alinhado à direita
├─────────────────────────────────────┤
│ Avaliações de clientes:             │
│ [texto muito longo com 15 reviews   │
│ todas expandidas]                   │
└─────────────────────────────────────┘

2.1 Identifica cinco problemas de UX neste wireframe. Para cada problema, indica: o elemento problemático, por que é um problema, e a solução proposta. (35 pts — 7 pts cada)

2.2 Redessena (em texto descritivo) o wireframe corrigido, aplicando as cinco soluções. (10 pts)

Grupo III · Criar user flow (35 pontos)

Contexto

A ReadApp é uma app de gestão de leitura. O utilizador pode: 1. Registar-se ou fazer login. 2. Pesquisar e adicionar livros à lista de leitura. 3. Marcar livros como "A ler", "A ler agora" ou "Lido". 4. Escrever uma review de um livro lido.

3.1 Cria o user flow completo para o processo "Escrever uma review de um livro já marcado como Lido", desde que o utilizador abre a app até submeter a review. Inclui o happy path e pelo menos dois edge cases. (25 pts)

3.2 Explica a diferença entre "happy path" e "edge case" e dá dois exemplos de edge cases que a equipa de desenvolvimento frequentemente esquece. (10 pts)