Landing page no celular: o contexto real de quem abre a sua página

Quem abre a sua página no celular não está sentado

Você desenha a página num monitor grande, sentado, com wi-fi, as duas mãos livres e tempo. A pessoa que vai decidir se te contrata está em quase nenhuma dessas condições.

O contexto real costuma ser este: em pé ou andando, segurando o aparelho com uma mão e usando o polegar, com sinal irregular, com a tela suja e às vezes recebendo sol direto. Ela chegou por um link do Instagram ou por uma busca rápida, e está resolvendo uma coisa entre duas outras.

"Responsivo" resolve o layout nesse cenário e não resolve mais nada. Uma página pode encaixar perfeitamente na tela e ainda assim ser impossível de usar com uma mão, no sol, com pressa. O resto do raciocínio sobre esforço e fricção está em UX de landing page. Aqui o assunto é o que muda quando a tela é essa.

A primeira tela do celular é menor do que você imagina

A área visível sem rolar já é pequena, e ela ainda perde espaço para a barra do navegador, que aparece e some conforme a rolagem. Sobra menos do que qualquer maquete de desktop sugere.

O maior devorador dessa área é o cabeçalho fixo. Um cabeçalho de 80 pixels com logo grande e menu come uma fatia considerável da parte mais valiosa da página, e ele continua comendo em cada rolagem. Se o cabeçalho fixo não estiver fazendo um trabalho concreto, como manter um botão de contato sempre à mão, ele está cobrando aluguel sem prestar serviço.

O segundo devorador é o bloco de topo dimensionado no desktop. Ele foi pensado com título, texto de apoio, botão e imagem lado a lado. No celular, tudo isso vira uma coluna, e o que era a primeira tela vira a primeira, a segunda e metade da terceira. O que a pesquisa mostra sobre atenção nessas primeiras telas está em above the fold.

Tamanho de alvo e a zona do polegar

As duas plataformas publicam mínimos de alvo de toque, e os dois números são próximos:

Repare que o piso da acessibilidade é bem menor que a recomendação das plataformas. Não use o piso como meta: ele é o limite abaixo do qual a coisa fica indefensável, e não o tamanho em que a pessoa acerta de primeira.

Tamanho do alvo é metade do problema. A outra metade é o espaço entre alvos. Dois botões encostados produzem toque errado mesmo quando cada um é grande o suficiente, porque o dedo cobre a fronteira entre eles.

E existe geografia: segurando o aparelho com uma mão, o polegar alcança confortavelmente a metade de baixo e o lado da mão que segura. O topo da tela é a região mais difícil de alcançar, o que torna o botão de ação principal no canto superior direito uma escolha ruim, justamente a posição mais copiada do desktop.

Telefone que não disca é telefone que não existe

Esse é o defeito mais caro e mais comum de página de negócio local no celular, e ele é invisível para quem só testa no computador, porque no computador clicar num telefone não faz nada mesmo.

• Telefone como texto puro. A pessoa precisa selecionar, copiar e colar no discador. Boa parte não faz isso, principalmente andando.
• Telefone dentro de imagem. Não é clicável, não é selecionável, não é lido por leitor de tela e não é encontrado pela busca.
• WhatsApp sem link direto. Um link que já abre a conversa com uma mensagem inicial pronta poupa dois passos e elimina o "oi" constrangedor.
• Endereço que não abre o mapa. Endereço deve levar ao aplicativo de mapas com a rota já traçada.
• Ação principal só no fim da página. No celular, o fim da página fica longe.

Uma barra de ação fixa na parte de baixo, com uma ação só, resolve boa parte disso. Ela fica na região que o polegar alcança sem reposicionar a mão, e ocupa uma área que não estava sendo usada para conteúdo.

Formulário no celular: o teclado certo economiza toques

Digitar no celular é caro. Cada troca de teclado, cada correção automática indevida e cada zoom inesperado é um motivo a mais para abandonar no meio. Quase tudo isso se resolve com atributos que já existem no HTML e que quase ninguém usa.

• type="tel" e inputmode="numeric" abrem o teclado numérico. Ninguém deveria caçar números no teclado de letras para digitar um DDD.
• type="email" traz a arroba para o teclado e evita a primeira letra em maiúscula, que estraga endereços de e-mail.
• autocomplete="name", "tel", "email" e "postal-code" permitem que o aparelho preencha sozinho. É a diferença entre dois toques e trinta.
• enterkeyhint muda o rótulo da tecla de confirmação, indicando se ela avança ou envia.
• Fonte do campo abaixo de 16 pixels faz o Safari do iPhone dar zoom automático quando o campo recebe foco, e a página inteira sai do lugar.

Some a isso duas regras de comportamento. Nunca apague o que a pessoa digitou quando um campo dá erro. E valide durante o preenchimento, campo a campo, não só no envio, para que ninguém precise voltar ao topo procurando o erro.

O 4G do seu cliente não é o wi-fi do seu escritório

Peso de página é um assunto que parece técnico e é comercial. No celular, a conexão oscila, o sinal cai dentro do elevador e no fundo do restaurante, e a paciência é menor do que no computador.

A ressalva honesta: esse estudo mediu varejo e turismo, não serviço local. O número exato não se transfere para a sua clínica ou para a sua pizzaria. A direção se transfere, e o efeito é maior justamente onde a maior parte do acesso vem de celular.

Os três maiores culpados costumam ser os mesmos: imagem enviada no tamanho original da câmera, fonte personalizada que atrasa o primeiro texto a aparecer e código de terceiros que ninguém lembra de ter instalado. Nenhum dos três aparece na maquete, e os três aparecem na barra de progresso do visitante.

Sol na tela, brilho no mínimo, tela suja

A tela do celular é usada sob luz que você não controla. No sol, o contraste efetivo despenca, e o cinza claro que ficava elegante no monitor simplesmente desaparece.

Isso muda três decisões. Texto sobre foto precisa de camada de escurecimento suficiente, não de sombra no texto. Texto secundário precisa continuar legível quando o brilho está baixo para economizar bateria. E o botão principal precisa se distinguir do fundo por mais coisa além de cor, porque cor é o primeiro atributo que a luz forte come.

Esse limite é medível, e vale medir em vez de confiar no olho no escritório. O método está em acessibilidade em landing page.

Como testar de verdade

O modo celular do navegador do computador mostra o layout e esconde todo o resto. Ele tem a sua conexão, o seu mouse, a sua luz e a sua paciência. Nada disso é do seu visitante.

1. Aparelho real, na mão. De preferência um aparelho comum, não o mais novo do mercado.
2. Dados móveis, não wi-fi. E, se der, num lugar de sinal ruim.
3. Uma mão só, de pé. Sem apoiar o celular na mesa.
4. Do começo ao fim. Chegue pelo link como um visitante chegaria, e complete a ação principal até o final, inclusive o envio.
5. Na rua, se possível. Cinco minutos de sol dizem mais sobre o seu contraste do que qualquer discussão sobre paleta.

Se a sua página passa nesses cinco, ela passa no computador também. O contrário quase nunca é verdade, e é por isso que faz sentido resolver o celular primeiro.