Ficha 02 · Wireframe mobile e análise de thumb zone

O padrão Z descreve o percurso do olho em páginas visuais com pouco texto: começa no canto superior esquerdo, move-se para o direito, faz uma diagonal para o inferior esquerdo, e termina no inferior direito.

Aplicação: colocar logo/marca no canto superior esquerdo, CTA ou elemento de credibilidade no superior direito, headline na diagonal, e segundo CTA no canto inferior direito. Assim os elementos mais importantes coincidem com o percurso natural do olhar.

A acção principal é reservar a aula. Deve ser reflectida em:

• Botão "Reservar agora" proeminente, de largura total, posicionado fixo no fundo do ecrã (zone verde de thumb, sempre visível sem scroll).
• Cor de destaque (cor primária da marca) para distinguir do restante conteúdo.
• Altura mínima de 48px.
• Preço visível junto ao botão (informação essencial para a decisão de compra).

O utilizador não deve precisar de fazer scroll para encontrar o botão de reserva — deve estar sempre visível.

Wireframe — FitLocal — Ecrã detalhe de aula — 375×812px

[HEADER FIXO — height: 44px, position: fixed top] ← botão voltar (44×44px) | "Yoga Flow" (título centrado, truncado) | ♡ (44×44px) Fundo branco, sombra suave. Não faz scroll.

[GALERIA — height: 200px, swipe horizontal] Imagem full-width. Dots de paginação sobrepostos na base. Swipe para navegar entre fotos. Tap para fullscreen.

[CARD INFO PRINCIPAL — padding: 16px] Linha 1: Badge "MÉDIO" (pill verde, 12px) + margin-top 8px H1: "Yoga Flow" — 24px bold Linha instrutor: [foto 40×40px] + "Com Ana Costa" — 14px, cor secundária Divider 1px

Grid 2×2 (detalhes): - Ícone + Data: "Qui, 12 Set" - Ícone + Hora: "09:30" - Ícone + Duração: "60 min" - Ícone + Local: "FitGym Lisboa"

[DESCRIÇÃO — padding: 0 16px] H3: "Sobre esta aula" — 16px bold Body text: 3 linhas — 15px, cor #444 Link "Ver mais ↓" — tap expande o texto completo

[VAGAS — padding: 16px] Progress bar horizontal com label: "3 de 12 vagas disponíveis" Cor verde → amarela → vermelha conforme a ocupação

[BOTÃO RESERVA — position: fixed bottom, height: 80px, fundo branco, shadow] "€12,00" (18px bold, esquerda) | [Botão "Reservar agora" — 48px height, cor primária, border-radius 8px, restante largura]

Comportamento: - Scroll: o ecrã faz scroll no espaço entre o header (44px) e o botão fixo (80px) = 688px scrollável. - Tap "Reservar agora": abre modal de confirmação com resumo + pagamento.

Problemático. Zona vermelha — requer extensão máxima do polegar ou reposicionar a mão. Ironicamente um dos padrões mais comuns mas um dos piores para uso a uma mão.

Alternativa: Tab bar no fundo do ecrã com os 4-5 destinos principais (padrão nativo iOS). Para menus mais complexos: bottom sheet navigation que sobe do fundo do ecrã.

Problemático — mas por razões opostas. Está na zona verde de fácil acesso, mas é uma acção destrutiva e irreversível. Fácil acesso a acções destrutivas aumenta o risco de activação acidental.

Alternativa: mover para zona amarela ou esconder em submenu de configurações avançadas. Obrigatoriamente com passo de confirmação ("Tens a certeza? Esta acção não pode ser desfeita") e cor vermelha de alerta.

Óptimo. A zona central é acessível e o swipe horizontal é um gesto natural para navegar conteúdo visual. A posição 250-450px está na zona verde/início de amarela — confortável.

Melhoria adicional: incluir indicadores de paginação (dots) visíveis e considerar que o swipe horizontal pode conflituar com gestos de navegação do sistema em algumas versões de iOS/Android — testar em dispositivo real.

Problemático se for o elemento de uso frequente. Zona vermelha (difícil). Em apps onde a pesquisa é a acção principal (Uber, Airbnb, Booking), colocar o campo de pesquisa no topo é um padrão estabelecido mas sacrifica usabilidade a uma mão.

Alternativa: o modelo iOS recomendado é uma barra de pesquisa que, ao ser activada, "cai" para uma posição mais central ou usa um teclado que a acompanha. Ou considerar um botão de pesquisa flutuante na zona verde que expande para um campo.

Óptimo. Zona 600-648px está bem na zona verde (250-812px), facilmente acessível ao polegar. Para a acção mais importante de um ecrã de pagamento, é a posição ideal: fácil de alcançar, não demasiado perto do fundo onde poderia ser activado acidentalmente ao segurar o telefone.

Adaptação 1 — Espelhar a thumb zone (viável, mas complexo): Detectar a preferência de mão (alguns sistemas como iPadOS já fazem isto). Espelhar elementos críticos para o lado esquerdo do ecrã para utilizadores esquerdinos. Tecnicamente viável mas requer suporte explícito na app e aumenta significativamente a complexidade de desenvolvimento.

Adaptação 2 — Reachability (já existente em iOS): O iOS tem um gesto de "Reachability" — dois toques suaves no sensor de casa (ou swipe down na parte inferior no iPhone sem botão home) — que faz a metade superior do ecrã descer para a zona alcançável. O utilizador pode então aceder a elementos no topo sem reposicionar a mão. Esta funcionalidade já existe no sistema operativo — o designer/developer não precisa de implementar nada, mas deve conhecer a sua existência e não assumir que elementos no topo são sempre inacessíveis.

Avaliação geral: para a maioria dos produtos, a solução prática é design ambidestro — elementos críticos no centro e fundo, evitar elementos críticos nos cantos superiores. A adaptação por mão dominante é rara em apps de consumidor mas existe em algumas apps profissionais.