Ficha 02 · Wireframe mobile e análise de thumb zone
- Criar wireframe mobile
- Analisar thumb zone
- Aplicar padrões de navegação
- Optimizar layout para uso a uma mão
Grupo I · Conceitos mobile (20 pontos)
1.1 Compara as três abordagens para conteúdo móvel. (12 pts)
| Abordagem | Uma vantagem | Uma limitação |
|---|---|---|
| Responsive Web | ||
| PWA | ||
| App nativa |
1.2 O que é o "padrão Z" de leitura e como deve influenciar o design de uma landing page mobile? (8 pts)
Grupo II · Criar wireframe de ecrã mobile (50 pontos)
Contexto
A FitLocal é uma app de fitness para descobrir e reservar aulas em ginásios locais. A equipa quer o ecrã de detalhe de aula — ecrã que abre quando o utilizador clica numa aula nos resultados de pesquisa.
Informação a apresentar: nome da aula, tipo, instrutor (foto + nome), data/hora, localização, duração, dificuldade, descrição (~3 linhas), vagas disponíveis, preço, botão de reserva, galeria de fotos.
2.1 Qual é a acção principal deste ecrã e como deve ser reflectida no design? (10 pts)
2.2 Cria o wireframe do ecrã de detalhe de aula para mobile (375px de largura). Descreve cada secção de cima para baixo, indicando: posição, tamanho aproximado, comportamento (fixo/scroll/tap-to-expand). Mínimo de 6 secções distintas. (40 pts)
Grupo III · Análise de thumb zone (30 pontos)
3.1 Para cada elemento abaixo, avalia se o posicionamento é óptimo ou problemático, e propõe alternativa se necessário. (15 pts — 3 pts cada)
Considera ecrã 375×812px. Zonas: Verde (fácil) = 250-812px de topo; Amarela = 150-250px; Vermelha (difícil) = 0-150px.
a) Menu hamburguer no canto superior esquerdo (posição: 0-44px de topo):
b) Botão "Eliminar conta" no fundo do ecrã (posição: 750-810px):
c) Galeria de fotos com swipe horizontal na zona central do ecrã (posição: 250-450px):
d) Campo de pesquisa no topo do ecrã (posição: 60-104px):
e) Botão de confirmação de pagamento na zona central-baixa (posição: 600-648px):
3.2 Um utilizador esquerdino usa o mesmo ecrã. Como deveria a app adaptar-se? Lista duas adaptações técnicas e avalia se são viáveis de implementar. (15 pts)