Ficha 01 · Design mobile e auditoria de página web

Grupo I · Verdadeiro ou Falso (20 pontos)

1. O tamanho mínimo recomendado para touch targets em mobile é 44×44 px (Apple) ou 48×48 dp (Google). ___

2. A meta tag viewport content="width=device-width, initial-scale=1" é necessária para que o browser mobile renderize correctamente a página. ___

3. O padrão de leitura F indica que o utilizador lê igualmente todas as partes de uma página web. ___

4. Em mobile-first design, os estilos base do CSS são escritos para desktop e as media queries ajustam para ecrãs menores. ___

5. Uma PWA pode funcionar offline (parcialmente) graças ao Service Worker. ___

6. O INP (Interaction to Next Paint) mede o tempo de carregamento da maior imagem visível. ___

7. Push notifications requerem permissão explícita do utilizador para serem enviadas. ___

8. O Chrome DevTools Device Mode simula perfeitamente a performance de hardware de um smartphone real. ___

9. Para activar Remote Debugging no Android, é necessário activar USB Debugging nas Opções de Programador. ___

10. CLS (Cumulative Layout Shift) pode ser reduzido definindo width e height nas imagens HTML. ___

Grupo II · Auditar uma página para mobile (45 pontos)

Descrição da página

A seguinte descrição representa uma versão desktop de um website de uma academia de música local, que vai ser auditada para mobile:

Estrutura actual da página: - Header: logo no canto superior esquerdo; menu de navegação horizontal com 8 itens (Início, Sobre, Cursos, Professores, Galeria, Agenda, Blog, Contactos); número de telefone no canto superior direito. - Hero: imagem a 100% largura (4000×2000px, JPEG, 3.5MB); texto sobreposto à imagem com fonte a 12px; botão "Inscrever-me" centralizado (dimensões: 60×20px). - Secção de cursos: 4 colunas com cards de cada curso; texto de descrição com 200 palavras por card. - Footer: 3 colunas com links, morada e mapa de Google Maps incorporado (800px altura).

2.1 Identifica cinco problemas de UX/design para mobile nesta página. Para cada problema, explica a causa e o impacto no utilizador. (25 pts)

2.2 Para cada problema identificado, propõe uma solução técnica específica com código CSS ou HTML (quando aplicável). (20 pts)

Grupo III · Reescrever notificações push (35 pontos)

3.1 As seguintes notificações push têm problemas de copywriting. Reescreve cada uma seguindo as boas práticas (título máx 50 chars, corpo máx 100 chars, específico e com valor claro). Justifica as alterações. (20 pts — 5 pts cada)

Notificação A:

Título: "Olá!" Corpo: "A nossa academia tem novidades incríveis para ti. Entra na app para saber mais!"

Notificação B:

Título: "Não te esqueças de nós!" Corpo: "Há 7 dias que não entras na nossa plataforma. Temos conteúdo novo."

Notificação C:

Título: "Aviso Importante" Corpo: "Por favor, actualize a informação de pagamento na sua conta."

Notificação D:

Título: "Promoção Especial!!!" Corpo: "Aproveita agora! Não percas esta oportunidade única que temos para ti."

3.2 Uma app de fitness tem uma taxa de opt-in de notificações de apenas 15% (muito abaixo da média de 50%+). O pedido de permissão aparece imediatamente ao abrir a app pela primeira vez. Que mudança propões e porquê? (15 pts)