O abandono de carrinho no comércio eletrónico mobile está nos 85,65%, contra taxas mais baixas no computador. Uma parte significativa dessa diferença pode ser evitada com as decisões de design certas. Este artigo explica o que torna uma loja realmente adaptada a telemóvel e como lá chegar, página a página.
Qual é a diferença entre adaptada a telemóvel e otimizada para telemóvel?
Adaptada a telemóvel significa que a loja não se desfaz num ecrã pequeno. O texto quebra bem, as imagens redimensionam-se e os botões dá para tocar. Este é o padrão mínimo. O Google considera-o necessário para a indexação.
Otimizada para telemóvel significa que a loja foi pensada para converter no telemóvel. O layout, a hierarquia da informação, as zonas de toque, o processo de checkout e a velocidade das páginas estão todos configurados para a forma como as pessoas usam o telemóvel para comprar. Uma loja pode ser adaptada a telemóvel sem estar otimizada para telemóvel. Muitas são assim.
A distinção importa porque adaptada a telemóvel põe-te no jogo. Otimizada para telemóvel é o que gera receita. Uma loja que não se desfaz no telemóvel, mas demora 8 segundos a carregar e tem um formulário de checkout pensado para rato e teclado, é tecnicamente adaptada a telemóvel. Não está otimizada para telemóvel. Cada melhoria que fizeres para além de "não estar avariada" é uma melhoria na tua taxa de conversão.
Porque é que a indexação mobile-first do Google muda tudo
O Google usa a indexação mobile-first, o que significa que classifica a tua loja com base na versão mobile. Não na versão para computador. Se a tua loja mobile tem menos conteúdo, menos ligações internas ou imagens que não carregam, a perceção que o Google tem da tua loja baseia-se nessas falhas.
Isto tem consequências diretas nas tuas posições nas pesquisas. Uma loja que parece completa no computador mas está reduzida no telemóvel vai ser classificada com base no que a versão mobile mostra. Se as descrições dos produtos estão cortadas no telemóvel, o Google indexa a versão cortada. Se as ligações de navegação estão escondidas num menu recolhido no telemóvel, o Google pode não as rastrear com a mesma eficácia.
Na prática, o desempenho mobile não é só um problema de experiência do utilizador. É um problema de SEO. Melhorar a tua loja mobile melhora as tuas posições nas pesquisas. Cada correção mobile cumpre uma dupla função.
Core Web Vitals e como afetam as tuas posições
As Core Web Vitals são um conjunto de métricas de desempenho que o Google usa como sinais de classificação. O Largest Contentful Paint mede quanto tempo demora a carregar o conteúdo principal de uma página. O Interaction to Next Paint mede a rapidez com que a página responde às ações do utilizador. O Cumulative Layout Shift mede quanto o layout da página se desloca de forma inesperada enquanto carrega.
As três importam no telemóvel, onde a velocidade da rede e a capacidade de processamento são menores do que no computador. Uma pontuação aceitável num navegador de computador pode falhar num telemóvel de gama média com ligação 4G. É esse telemóvel que uma parte significativa do teu tráfego está a usar.
Más pontuações nas Core Web Vitals prejudicam as posições e as conversões, de forma independente. Cada segundo adicional de carregamento numa página mobile baixa as taxas de conversão em 4,42%, segundo estudos. Uma página que demora 5 segundos a carregar em vez de 2 pode já estar a perder metade das conversões possíveis antes de alguém ver os teus produtos.
Design mobile por tipo de página
Cada tipo de página de uma loja tem prioridades diferentes no telemóvel. Tratar todas as páginas da mesma maneira significa não otimizar bem nenhuma.
Página inicial
No telemóvel, a página inicial tem de comunicar o que a loja vende e para onde ir logo no primeiro deslize. As páginas iniciais para computador usam muitas vezes secções de destaque largas, com vários elementos. No telemóvel, esse mesmo destaque ocupa o ecrã inteiro. Se não comunicar valor de imediato e não convidar à ação, o visitante desliza ou sai.
Mantém a navegação principal acessível sem demasiados toques. Um menu hambúrguer é o padrão, mas os itens lá dentro devem limitar-se às categorias de que um visitante novo realmente precisa. Navegação enterrada é navegação invisível no telemóvel.
Páginas de categoria
As páginas de categoria no telemóvel têm de equilibrar a densidade de produtos com a facilidade de uso. As grelhas de duas colunas funcionam bem para a maioria dos tipos de produto. As listas de uma coluna funcionam melhor para produtos em que o detalhe da imagem importa. Ambas são preferíveis às grelhas de três colunas, que tornam as imagens dos produtos demasiado pequenas para se lerem na maioria dos telemóveis.
Os filtros e a ordenação são essenciais nas páginas de categoria e difíceis no telemóvel. Um painel de filtros que abre como sobreposição em ecrã inteiro, em vez de uma barra lateral, torna a filtragem utilizável num ecrã pequeno. Vê o guia completo sobre o que é uma página de categoria e como a desenhar para uma análise mais detalhada da estrutura das páginas de categoria.
Páginas de produto
A página de produto no telemóvel tem de responder depressa a três perguntas. O que é? Quanto custa? Consigo comprá-lo facilmente? A imagem principal deve carregar de imediato e poder deslizar-se. O preço, a escolha de variantes e o botão de adicionar ao carrinho devem estar todos visíveis sem deslizar.
Põe o botão de adicionar ao carrinho acima da dobra no telemóvel ou, no mínimo, usa um botão fixo que acompanha o utilizador enquanto desliza pela descrição do produto. Um cliente que tem de voltar a subir para adicionar algo ao carrinho tem mais uma oportunidade de mudar de ideias.
Checkout
O checkout é onde o abandono mobile é mais alto. Quantos menos passos e campos, melhor. Uma opção de checkout como convidado elimina a barreira da criação de conta, que faz muitos utilizadores mobile desistir. Vê o guia completo sobre como desenhar uma página de checkout que reduz as desistências para orientações detalhadas de otimização do checkout.
Zonas do polegar e design ergonómico
As pessoas usam o telemóvel com os polegares, e os polegares só chegam confortavelmente a certas zonas do ecrã. A zona central inferior é a mais fácil de alcançar. Os cantos superiores são os mais difíceis. Isto não é um pormenor. É uma realidade ergonómica que afeta diretamente se os clientes interagem com os elementos principais da tua loja.
Põe os teus botões de ação mais importantes, como adicionar ao carrinho, avançar para o checkout e aplicar filtro, na zona central inferior, onde os polegares descansam naturalmente. As barras de navegação na parte de baixo do ecrã são mais acessíveis do que as barras no topo em telemóveis grandes. As barras no topo são uma convenção do computador que não se traduz bem para o uso mobile com uma só mão.
Zonas de toque pequenas são um problema comum de usabilidade mobile. Botões e ligações fáceis de clicar com um cursor de rato tornam-se difíceis de tocar com precisão com a ponta do dedo. O Google recomenda zonas de toque de pelo menos 48 por 48 píxeis, com espaço adequado entre zonas vizinhas. Zonas demasiado pequenas levam a toques errados, frustração e saídas.
Checkout mobile e otimização de formulários
Os formulários são uma das maiores fontes de atrito no checkout mobile. Um formulário pensado para teclado e rato fica lento e propenso a erros quando é preenchido num ecrã tátil com o corretor automático a interferir. Várias melhorias concretas tornam os formulários muito mais fáceis de preencher no telemóvel.
Usa os tipos de teclado certos
Os tipos de campo HTML dizem ao navegador do telemóvel que teclado mostrar. Um campo de email que usa o tipo email mostra um teclado com o símbolo @ bem à vista. Um campo de número de telefone que usa o tipo tel mostra um teclado numérico. Um campo com o tipo de texto por defeito mostra um teclado completo para tudo, incluindo números de telefone e códigos postais.
Usar o tipo de campo errado acrescenta atrito desnecessário. O cliente tem de mudar de teclado manualmente ou escrever com o layout errado. A correção é a mudança de um único atributo em cada campo do formulário. É uma das melhorias com melhor retorno pelo esforço que existem no checkout mobile.
Reduz os campos do formulário
Cada campo de um formulário de checkout é um ponto de atrito no telemóvel. Revê o teu checkout e remove todos os campos que não sejam essenciais para concluir a transação. Os campos separados de nome próprio e apelido podem normalmente juntar-se. Os campos de título raramente são necessários. Várias linhas de morada podem muitas vezes ser substituídas por uma única pesquisa de morada.
Se precisares de recolher informação adicional para marketing ou análise, pensa em recolhê-la depois de a compra estar concluída, não durante o checkout. Um inquérito pós-compra obtém os mesmos dados sem o risco de abandono.
Suporta o preenchimento automático
Os navegadores móveis modernos e os gestores de palavras-passe conseguem preencher automaticamente os campos do checkout se o teu formulário estiver bem estruturado. O atributo autocomplete em cada campo diz ao navegador que tipo de dados é. Um campo com o valor de autocomplete correto é preenchido automaticamente pelo navegador se o cliente tiver os seus dados guardados. O preenchimento automático pode reduzir muito o tempo de checkout no telemóvel, o que é um fator real para o cliente concluir ou não a compra.
Oferece opções de pagamento mobile
As opções de pagamento mobile, como as carteiras digitais, permitem aos clientes concluir uma compra com autenticação biométrica em vez de introduzirem os dados do cartão à mão. Para um cliente no telemóvel, não ter de escrever um número de cartão de 16 dígitos, uma data de validade e um código de segurança é uma redução de esforço significativa. As lojas que oferecem estes métodos de pagamento a par dos pagamentos normais com cartão têm taxas de conversão mobile mais altas, porque o atrito no passo mais sensível desaparece.
Velocidade das páginas no telemóvel
A velocidade das páginas afeta as lojas mobile mais do que as lojas no computador, porque as ligações móveis são mais lentas e os processadores mais fracos. Uma página que carrega em 2 segundos em banda larga pode demorar 6 segundos numa ligação de dados móveis. Estudos mostram que 53% dos visitantes mobile esperam que as páginas carreguem em menos de 3 segundos. Quem não o consegue, sai.
Comprime as imagens
As imagens são o maior contributo isolado para o tempo de carregamento de uma página mobile. Todas as imagens de produto, banners e fotografias de ambiente devem ser comprimidas antes de chegarem ao navegador. Os formatos de imagem modernos oferecem ficheiros muito mais pequenos do que os formatos antigos, com a mesma qualidade visual.
O carregamento diferido (lazy loading) adia o carregamento das imagens abaixo da dobra até o cliente se aproximar delas. A parte visível da página carrega de imediato. Tudo o que está abaixo só carrega quando é preciso. Esta técnica melhora a velocidade de carregamento percebida, mesmo que o peso total da página se mantenha.
Reduz os scripts
Os scripts de terceiros, como rastreadores de análise, widgets de chat, pixels de marketing e ferramentas de avaliações, acrescentam tempo de carregamento a todas as páginas. Cada script tem de ser descarregado, analisado e executado. No telemóvel, isto demora mais do que no computador. Revê os scripts que correm na tua loja e remove os que não contribuem ativamente para a receita ou para a experiência do cliente.
Os scripts necessários podem muitas vezes ser carregados de forma assíncrona, ou seja, carregam depois do conteúdo principal da página e não antes. Isto garante que a página é utilizável antes de os scripts acabarem de carregar, o que melhora as pontuações das Core Web Vitals e a experiência do cliente.
Testa em dispositivos reais
As ferramentas de programador do navegador incluem um simulador mobile que te deixa ver a tua loja como se estivesses num telemóvel. O simulador é útil para verificar o layout, mas não reproduz com rigor o desempenho de um dispositivo real numa rede real. Um telemóvel de gama média com ligação 4G vai comportar-se de forma diferente do que o simulador mostra num computador rápido.
Testa regularmente em dispositivos reais. Problemas que são invisíveis no simulador, como atrasos nos eventos de toque, problemas de renderização de tipos de letra e certos erros de layout, tornam-se evidentes de imediato em dispositivos reais. Existem ferramentas gratuitas online que mostram a tua loja através de equipamento real em ligações de rede reais, se não tiveres acesso a vários dispositivos.
SEO mobile para além da velocidade
A velocidade e as Core Web Vitals são os aspetos mais falados do SEO mobile, mas vários outros fatores afetam a posição da tua loja nos resultados de pesquisa mobile.
Evita elementos intersticiais que tapam o conteúdo principal no telemóvel. Os pop-ups e as sobreposições que bloqueiam a página logo após o carregamento são penalizados pelo algoritmo de pesquisa mobile do Google. Se usas um pop-up de recolha de emails ou um aviso de consentimento de cookies, não deve tapar o conteúdo principal antes de o visitante ter oportunidade de ver a página.
Garante que todo o conteúdo visível na tua loja no computador também é acessível no telemóvel. Se o conteúdo estiver escondido atrás de um botão "ver mais" no telemóvel, o Google pode indexar o estado recolhido em vez do texto completo. Nas descrições de produtos e no conteúdo de categorias que contribuem para as tuas posições, o texto completo deve estar acessível no telemóvel sem toques adicionais.
As ligações internas devem ser consistentes entre computador e telemóvel. Se a tua loja no computador tem uma secção de produtos relacionados bem visível, com ligações para outras categorias, a versão mobile deve incluir também essas ligações. As ligações de navegação que o Google usa para perceber a estrutura da tua loja não devem desaparecer no telemóvel.
Como a WEMASY trata o mobile
O sistema de comércio eletrónico da WEMASY gera páginas de loja responsivas que se adaptam a qualquer tamanho de ecrã por defeito. As páginas de produto, as páginas de categoria e o checkout são todos pensados para cumprir os requisitos de indexação mobile-first do Google. O processo de checkout inclui suporte para métodos de pagamento mobile e campos de formulário com o tipo correto. O desempenho nas Core Web Vitals está integrado na infraestrutura de alojamento e entrega do sistema, em vez de exigir otimização manual. Vê o que está incluído em cada plano na página de preços.
Perguntas frequentes
Como verifico se a minha loja está adaptada a telemóvel?
O Google Search Console inclui um relatório de Usabilidade em dispositivos móveis que assinala problemas concretos nas tuas páginas, como texto demasiado pequeno, elementos clicáveis demasiado juntos ou conteúdo mais largo do que o ecrã. O PageSpeed Insights dá-te as pontuações das Core Web Vitals para mobile e computador em separado. Ambas as ferramentas são gratuitas e dão resultados concretos e acionáveis, em vez de um simples aprovado ou reprovado. Com o criador de websites da WEMASY, podes configurar isto diretamente na tua loja.
O design mobile afeta as minhas posições no Google?
Sim, diretamente. O Google usa a indexação mobile-first, o que significa que a tua loja é classificada com base na versão mobile. As pontuações das Core Web Vitals, que são influenciadas por fatores de desempenho mobile como a velocidade de carregamento e a estabilidade do layout, são um sinal de classificação confirmado. Uma loja com bom desempenho no telemóvel tem vantagem nas posições sobre uma que não o tem, mesmo que as versões para computador sejam equivalentes.
Qual é o problema mais comum no checkout mobile?
O atrito nos formulários é o problema mais comum. Os formulários de checkout pensados para rato e teclado exigem demasiado esforço num ecrã tátil. As correções com mais impacto são: usar os tipos de campo corretos para aparecer o teclado certo, reduzir o número de campos, ativar o preenchimento automático e oferecer opções de pagamento mobile que dispensam a introdução manual dos dados do cartão. Corrigir estes quatro pontos costuma produzir uma melhoria mensurável nas taxas de conclusão do checkout mobile.
Como é que a velocidade das páginas no telemóvel afeta as vendas?
A relação é direta e bem documentada. Estudos mostram uma queda de cerca de 4% na taxa de conversão por cada segundo adicional de carregamento. Uma loja que carrega em 1 segundo converte a uma taxa claramente mais alta do que a mesma loja a carregar em 4 segundos. Nas lojas mobile em particular, onde as condições de rede variam e os visitantes abandonam mais depressa as experiências lentas, as melhorias de velocidade produzem muitas vezes o retorno mais rápido de todos os investimentos técnicos.
Devo criar uma loja mobile separada ou usar design responsivo?
O design responsivo, em que uma única loja ajusta o layout ao tamanho do ecrã, é a abordagem padrão e a que o Google recomenda. Os sites mobile separados criam trabalho de manutenção, podem causar inconsistências de indexação e são mais difíceis de manter sincronizados quando atualizas produtos e conteúdo. A não ser que haja uma razão operacional concreta para ter uma experiência mobile separada, o design responsivo num único URL é a escolha certa.
Como reduzo o abandono de carrinho no telemóvel?
O abandono de carrinho no telemóvel resulta de uma combinação de atrito e distração. As estratégias de redução com mais impacto são: um checkout simplificado, com o menor número possível de passos e campos, uma opção de checkout como convidado que elimina a barreira da criação de conta, opções de pagamento mobile que eliminam a introdução manual do cartão e uma página de checkout de carregamento rápido. O retargeting por email para carrinhos abandonados também é eficaz para recuperar sessões em que o cliente não concluiu a compra numa só visita.