Mobile first: a página no polegar do usuário

Se você roda anúncio no Brasil, a maior parte do seu dinheiro está sendo decidida numa tela de seis polegadas, com uma mão só, muitas vezes no meio de outra coisa. A pessoa clicou no seu anúncio no Instagram, no feed do Facebook ou numa pesquisa do Google feita no celular, e o que ela encontra do outro lado é o que decide se vira lead ou se volta pro feed. Conversão mobile não é um detalhe da sua página: na prática, é a sua página.

A resposta curta para "o que muda no mobile" é: tudo que você projetou olhando pra tela grande do computador. O texto que cabia numa linha agora quebra em quatro. O botão que estava do lado direito agora exige que a pessoa estique o polegar. O formulário que parecia curto no desktop vira um rolar infinito no celular. E a imagem bonita de 2 MB que carregava rápido no seu Wi-Fi agora trava por seis segundos no 4G da pessoa que está no ponto de ônibus.

Mobile first não é fazer a versão de celular depois que o site fica pronto. É o contrário: projetar primeiro para a tela pequena, para a conexão ruim e para o polegar cansado, e só depois expandir para o desktop. Quem faz assim entrega uma página que converte onde o dinheiro está. Quem faz ao contrário entrega uma página que fica linda na apresentação e sangra verba no dia a dia.

Por que mobile first virou obrigação, não escolha

Não é modismo de designer. É onde o seu público está. A maioria esmagadora dos acessos que vêm de anúncio de rede social chega pelo celular, porque a pessoa está usando o aplicativo no celular quando vê o anúncio. Ela não anota o endereço para abrir no computador depois. Ela clica ali, naquele momento, naquele aparelho.

O Google entendeu isso antes de muita gente e passou a avaliar os sites pela versão mobile. Na prática, é a versão de celular do seu site que define o seu ranqueamento na busca, mesmo para quem pesquisa no computador. Site que é bom no desktop e ruim no celular perde posição para todo mundo.

E tem a conta que dói mais: cada visitante do mobile custou o mesmo que um do desktop, porque você pagou pelo clique igual. Se a sua página converte metade no celular do que no computador, você está jogando fora metade da verba que gastou com a maioria do seu tráfego. Não é um problema de experiência, é um problema de caixa.

O que muda de verdade quando a tela encolhe

Quatro coisas mudam ao mesmo tempo, e é a soma delas que derruba a conversão de quem projetou para o desktop.

Muda a atenção. No celular a pessoa está em movimento, com notificação chegando, com pouco tempo. A margem para confundir é menor. Uma dúvida na primeira dobra e o dedo já subiu de volta pro feed.

Muda o gesto. No computador a pessoa aponta com o mouse, com precisão de pixel. No celular ela toca com o polegar, que é gordo, impreciso e alcança confortavelmente só a metade de baixo da tela. Botão pequeno e link colado em outro link viram fonte de raiva e de clique errado.

Muda o teclado. Preencher formulário no celular é trabalhoso. Cada campo a mais é uma fricção real, não teórica. E o teclado que aparece ocupa metade da tela, empurrando o botão de enviar para um lugar que a pessoa não vê.

Muda a conexão. O visitante do desktop costuma estar no Wi-Fi. O do celular pode estar num 4G fraco, num elevador, numa área de sombra. A página de 2 segundos no seu computador vira 7 segundos no aparelho dele, e cada segundo a mais derruba conversão.

A primeira dobra no celular tem que trabalhar dobrado

No desktop a primeira dobra é generosa: cabe headline, subtítulo, imagem e botão sem apertar. No celular, esse mesmo espaço vira uma janelinha estreita. Cada elemento que você coloca ali empurra o próximo para baixo da linha do scroll, onde metade das pessoas nunca chega.

A regra é brutal: na tela do celular, antes de qualquer rolagem, a pessoa precisa entender o que é, para quem é e o que fazer em seguida. Headline curta e clara, uma linha de apoio, e o botão. Se não couber tudo, corta o que for enfeite, não o que for mensagem.

O erro clássico é o menu gigante e o logo enorme comendo o topo da tela do celular. A pessoa clicou num anúncio para ver uma oferta, e a primeira coisa que ela vê é a sua marca ocupando 30% da tela. Enxugue o cabeçalho no mobile. Ele existe para não atrapalhar, não para se exibir. Os princípios de o que precisa aparecer na primeira dobra valem em dobro aqui, porque o espaço é a metade.

O polegar manda: onde ficam os botões

Pega o seu celular e repara como você segura. Uma mão, o polegar varrendo a parte de baixo da tela. O topo você só alcança se ajeitar o aparelho ou usar a outra mão. Essa é a realidade de quem vai clicar no seu botão.

Botão de ação principal fica na zona confortável do polegar, que é a metade de baixo. Botão grande, com área de toque generosa, nunca colado na borda da tela nem espremido do lado de outro link. Dois links muito próximos no mobile são uma armadilha: a pessoa quer clicar num e acerta o outro, se frustra e sai.

Uma barra fixa embaixo com o botão principal (chamar no WhatsApp, comprar, pedir orçamento) costuma funcionar muito bem no mobile, porque acompanha a pessoa enquanto ela rola a página e está sempre ao alcance do polegar. É o oposto do botão que aparece uma vez lá no topo e some quando a pessoa desce.

A dificuldade aqui é escolher o que mexer primeiro, porque tudo parece importante ao mesmo tempo. A Agência D'avila traz esse direcionamento com base no que já viu funcionar.

Formulário no celular: cada campo pesa o dobro

Se o seu formulário de desktop tem oito campos, no celular ele parece ter dezesseis. Cada campo é um toque, uma troca de teclado, uma chance de errar e ter que voltar. Formulário longo é o maior ralo de conversão mobile que existe.

Peça só o essencial para dar o próximo passo. Nome e WhatsApp já bastam para a maioria dos negócios locais qualificar e ligar de volta. O resto você pergunta na conversa. Cada campo que você corta é um pedaço de conversão que você recupera.

Detalhes técnicos que parecem pequenos mudam muito no celular: o campo de telefone tem que abrir o teclado numérico, não o de letras. O campo de e-mail tem que abrir o teclado com o arroba à mão. O preenchimento automático do navegador tem que funcionar, para a pessoa não digitar o nome inteiro na mão. E o botão de enviar não pode ficar escondido atrás do teclado. Essas coisas parecem detalhe e são a diferença entre o lead que entra e o que desiste no meio.

Muitas vezes, no serviço local, o WhatsApp converte mais que o formulário justamente porque elimina o formulário: a pessoa toca no botão e cai numa conversa que ela já sabe usar, sem digitar dados num campo apertado.

Os erros de mobile que mais custam venda

Alguns erros aparecem repetidas vezes nas páginas que auditamos, sempre drenando conversão em silêncio.

• Pop-up que cobre a tela inteira. No desktop dá para fechar rápido. No celular o "x" some, a pessoa não acha como fechar e vai embora. O Google inclusive penaliza isso no mobile.
• Fonte pequena. Texto que cabe no desktop fica ilegível no celular. Se a pessoa precisa dar zoom para ler, você já perdeu.
• Elemento mais largo que a tela. Uma tabela, uma imagem ou um bloco que estoura a largura faz a página deslizar de lado. Isso quebra a experiência e é um dos defeitos mais irritantes no celular.
• Vídeo que dá play sozinho com som. No feed a pessoa está muitas vezes em silêncio, no trabalho, ao lado de alguém. Vídeo estourando som assusta e faz sair.
• Botão colado na borda ou entre outros links. Toque impreciso vira clique errado e frustração.
• Carrossel na primeira dobra. A pessoa não fica esperando o slide certo aparecer. Coloque a mensagem principal parada, sempre visível.

Como testar de verdade (e não só no simulador)

Testar mobile no navegador do computador, encolhendo a janela, mostra o layout, mas esconde os problemas que mais importam: a velocidade no 4G, o teclado que cobre o botão, o toque que erra o alvo, o brilho da tela no sol. Nenhum simulador sente isso.

O teste que vale é no aparelho de verdade, e não só no seu iPhone novo. Pegue um Android intermediário, que é o que a maioria do seu público usa, desligue o Wi-Fi e faça o caminho inteiro como cliente: clicar, ler a primeira dobra, rolar, preencher, enviar. Onde você travar, hesitar ou se irritar, o seu cliente também vai travar, e ele não tem a sua paciência.

Peça para alguém que não conhece a página fazer o mesmo, na frente de você, sem ajuda. Em trinta segundos você descobre mais problema real do que em uma hora de simulador. E complemente com as métricas: a comparação da taxa de conversão mobile contra desktop é o termômetro. Se a do celular está muito abaixo, tem dinheiro vazando ali.

Onde a D'avila entra

Todo site e toda landing page que a gente entrega nasce projetado para o celular primeiro, porque é ali que o seu anúncio é decidido. Isso quer dizer primeira dobra que responde na tela pequena, botão no alcance do polegar, formulário enxuto, teclado certo em cada campo e velocidade real medida no 4G, não no Wi-Fi da agência.

Isso vale tanto para os nossos sites institucionais quanto para as landing pages de campanha e para as lojas virtuais, onde o checkout no celular é o ponto que mais separa a loja que vende da que só recebe visita. Se você desconfia que a sua página está convertendo menos no celular do que poderia, chame a gente no WhatsApp e a gente olha o caminho inteiro com você, do clique ao envio.