Ficha 01 · UI mobile, guidelines e redesign

1. V — A HIG recomenda alvos de toque de pelo menos 44×44 pt (no Material Design, 48×48 dp).

2. F — O dark mode deve usar um cinzento muito escuro (ex: #121212), não preto puro. O preto puro causa halação, dificulta a percepção de elevação e a poupança só é real em ecrãs OLED. A regra geral é #121212.

3. V — A hierarquia de acção exige normalmente um único botão primário por ecrã; vários botões "fortes" anulam a hierarquia e confundem o utilizador.

4. F — O FAB é um padrão do Material Design (Android). No iOS/HIG não existe FAB; a acção principal vai numa barra (navigation bar ou toolbar).

5. V — A safe area é a zona livre de notch, Dynamic Island, status bar e home indicator, onde deve ficar o conteúdo crítico e interactivo.

6. F — O placeholder desaparece ao escrever e não substitui a label. A boa prática é manter a label sempre visível para o utilizador saber o que o campo significa em qualquer estado.

Violação 1 — Número de separadores na tab bar (7 separadores) - Problema: a tab bar deve ter 3-5 destinos. 7 é excessivo, fica apertado e ilegível. - Correcção: reduzir a 5 destinos principais e mover os restantes para um separador "Mais" ou para a navegação interna.

Violação 2 — Falta de hierarquia entre botões - Problema: "Comprar" e "Adicionar à lista" são ambos primários (azul sólido, mesmo tamanho). Não há acção principal clara. - Correcção: "Comprar" fica primário (filled); "Adicionar à lista" passa a secundário (outlined/tonal).

Violação 3 — Contraste insuficiente do preço - Problema: #BBBBBB sobre branco a 11 pt não cumpre o contraste WCAG (4.5:1) e o corpo é minúsculo para uma informação crítica. - Correcção: usar cor escura (ex: #1A1A1A) e corpo maior (≥ 18 pt, em destaque, já que o preço é informação-chave).

Violação 4 — Botão "Voltar" no sítio errado (iOS) - Problema: no iOS o "voltar" vive no canto superior esquerdo da navigation bar, complementado por swipe da borda. No canto inferior direito quebra a convenção. - Correcção: mover o "voltar" para o topo-esquerda e garantir o swipe-back.

Violação 5 — FAB num ecrã iOS - Problema: o FAB é padrão do Material Design (Android), não do iOS/HIG. - Correcção: substituir por um botão "Comprar" fixo numa barra inferior (sticky), conforme o HIG.

Violações adicionais válidas (qualquer destas conta): - Alvos de toque pequenos e colados: 24×24 pt é abaixo do mínimo (44×44) e estarem colados causa toques errados. Aumentar a área tocável e separá-los. - Conteúdo fora da safe area: texto importante por baixo do notch/home indicator fica obstruído. Manter texto dentro da safe area; só a imagem de fundo pode ir edge-to-edge.

Redesenho do ecrã de registo (proposta de referência; aceitam-se variações bem justificadas)

1. Reduzir o número de campos (8 pts) - Eliminar "confirmar email" (usar validação inline / email de confirmação posterior). - Adiar telefone, data de nascimento e código postal para depois do registo (perfil progressivo). - Campos essenciais: Nome, Email, Password. (3 campos.) - Justificação: cada campo extra reduz a conversão; pedir o mínimo viável.

2. Labels visíveis (5 pts) - Cada campo com label permanente por cima, mantendo placeholder só como exemplo. - Justificação: o utilizador sabe sempre o que cada campo é, mesmo já preenchido.

3. Teclados adequados (5 pts) - Email → teclado de email (com @ e .com). - Telefone (se mantido) → teclado numérico. - Justificação: reduz erros e fricção.

4. Hierarquia de botões (5 pts) - "Criar conta" como primário (filled, cor de marca, largura total). - "Cancelar" como texto (terciário) ou simplesmente o "voltar" no topo. - Justificação: a acção principal tem de saltar à vista.

5. Estados e validação (6 pts) - Marcar campos obrigatórios. - Validação inline com mensagens específicas ("Email inválido", "Password mínima 8 caracteres"). - Estado de loading no botão durante o registo. - Indicador de força da password.

6. Título e contexto (3 pts) - Título "Criar conta" no topo + subtítulo curto. - Link "Já tens conta? Entrar".

7. Layout e toque (3 pts) - Espaçamento de 16 pt entre campos, margem lateral 16 pt. - Botão dentro da zona confortável do polegar. - Conteúdo dentro da safe area; subir o formulário quando o teclado aparece.

Wireframe textual resultante:

[< Voltar]
Criar conta
Demora menos de um minuto.

Nome          [______________]
Email         [______________]  (teclado email)
Password      [______________]  👁  força: ●●●○
              (mín. 8 caracteres)

      [   Criar conta   ]   ← primário, largura total
   Já tens conta? Entrar