Problemas de usabilidade móvel não resolvidos podem ter um impacto significativo no tráfego do seu site. Um problema comum do Google Search Console pode adverti-lo sobre o erro “Elementos clicáveis estão muito próximos”, o que provavelmente significa que o seu site é complexo para os usuários móveis navegarem.
Mais de 4,32 bilhões de pessoas acessam a Internet a partir de seus dispositivos móveis. Portanto, é crucial resolver este erro de elementos clicáveis o mais rápido possível. Felizmente, há várias maneiras de fazê-lo e tornar seu site mais amigável ao celular.
Neste artigo, explicaremos o que é a questão “Elementos clicáveis estão muito próximos”, discutiremos por que isso acontece e o acompanharemos através de três métodos que você pode usar para consertá-la. Explicaremos também o que é o erro “Conteúdo mais amplo que a tela” e como você pode resolvê-lo.
Vamos ao trabalho!
O que é o erro “Elementos clicáveis estão muito próximos”?
Em poucas palavras, erros de usabilidade móvel podem tornar seu site WordPress inacessível e mais desafiador para os usuários móveis navegarem. Você pode usar o relatório de usabilidade móvel do Google Search Console para testar seu site.
Há seis tipos principais de problemas de usabilidade móvel com os quais você pode se deparar, que são
- Utiliza plugins incompatíveis
- Janela de exibição não configurada
- Janela de exibição não ajustada para “largura do dispositivo”.
- Texto muito pequeno para ser lido
- Conteúdo mais amplo que a tela
- Elementos clicáveis estão muito próximos
Como parte deste relatório, o Google Search Console verificará todos os elementos clicáveis do seu site, tais como botões e links. O objetivo disto é verificar se os usuários móveis podem interagir confortavelmente com os elementos do seu website usando apenas o toque, em vez de usar um teclado ou mouse.
Se o Console de Busca do Google determinar que seus elementos acessíveis representam um desafio para os usuários móveis, ele incluirá o erro “elementos acessíveis muito próximos” em seu relatório de resumo.
Se você clicar no erro, ele o levará para a página de detalhes e status. Nesta tela, você pode saber mais sobre o assunto, incluindo as páginas afetadas.
Essencialmente, o erro dos elementos clicáveis é um aviso indicando que os elementos clicáveis em seu site WordPress são muito pequenos para que os usuários móveis possam interagir confortavelmente com eles.
Alternativamente, isso poderia significar que eles são suficientemente grandes, mas posicionados muito perto de elementos vizinhos. Se botões, links e outros itens clicáveis se agruparem muito próximos, os usuários correm o risco de bater nos errados, o que prejudica a Experiência do Usuário (UX).
Embora ter Elementos clicáveis estão muito próximos seja classificado como um erro de usabilidade móvel, a resolução deste problema também pode melhorar a acessibilidade do seu site. Por exemplo, as pessoas com problemas de destreza podem apreciar algum espaço adicional entre os elementos interativos. Em contraste, os usuários com problemas de visão podem achar mais fácil interagir com botões e links grandes e claramente definidos.
Por que o erro “Elementos clicáveis estão muito próximos” pode aparecer
Vários fatores podem resultar na questão “Elementos clicáveis estão muito próximos”. Às vezes, é só porque o Google não pôde solicitar os recursos necessários durante a renderização. Se for esse o caso, então você pode tentar usar o mobile-friendly e ver se ele passa. Se passar, provavelmente você pode ignorá-lo.
Esta questão também pode resultar do design do seu site. Por exemplo, se você tentar apertar demasiados elementos interativos em uma única página da web, você poderá ver este erro de usabilidade móvel.
Outra razão para o erro dos elementos clicáveis é que há um problema com a capacidade de resposta móvel do design do seu site. Seu site deve ser flexível e se adaptar automaticamente ao dispositivo específico do visitante para fornecer o melhor UX possível. Entretanto, se seu site não for responsivo, isso pode resultar em problemas de usabilidade.
Mais especificamente, se seu website não for responsivo, partes dele podem parecer esticadas, encolhidas ou deformadas em telas específicas. Em dispositivos com telas menores, os elementos que podem ser tocados podem parecer apertados ou distorcidos.
Identificar algumas das razões padrão e potenciais para que este erro ocorra pode ajudá-lo a entender melhor porque seu site está encontrando problemas de usabilidade móvel. Também o ajudará a determinar como corrigir o problema.
Como corrigir o erro “Elementos clicáveis estão muito próximos” (3 métodos)
Se os usuários móveis lutam para navegar em seu site, o que os impede de navegar longe dele? Evitar esta questão é essencial para resolver todos os problemas de usabilidade móvel o mais rápido possível. Vamos dar uma olhada em três métodos que você pode usar para corrigir o erro “Elementos clicáveis estão muito próximos” e fornecer um melhor UX para seus usuários móveis.
1. Use o Plugin Visual Personalizado YellowPencil WordPress
YellowPencil Visual Customizer é um plugin WordPress frontend que permite a você editar os arquivos CSS e temáticos do seu website sem qualquer codificação.
Este plugin é útil para modificar o tamanho de seus alvos que podem ser batidos, como, por exemplo, tornar seus botões maiores. Você também pode criar mais espaço entre os elementos clicáveis, alterando as margens e o espaçamento entre eles.
Você pode baixar o plugin YellowPencil gratuitamente ou adquirir uma licença Regular ou Extendida. Para utilizá-lo, primeiro instale-o e ative-o em seu site WordPress navegando em Plugins > Add New, procurando o plugin e depois clicando em Install Now > Activate.
A seguir, navegue para YellowPencil > Customizações. Sob a guia Customizações, selecione Let’s start!
A interface visual do customizador irá carregar e solicitar que você selecione a página que desencadeia o erro de usabilidade do celular.
Você pode aplicar suas alterações a esta página específica ou em todo o seu site. Se muitas páginas estiverem apresentando o erro de elementos clicáveis, você pode querer selecionar Global.
Faça sua seleção, e depois clique em Continuar. Agora você pode trabalhar através de sua página da web, selecionando cada elemento que possa ser tocado. YellowPencil exibirá um painel de opções de edição para esse elemento.
Por exemplo, na captura de tela abaixo, selecionamos Padding e adicionamos 10 pixels em todos os lados para aumentar o espaço entre os alvos que podem ser batidos:
As configurações de Tamanho e Posição também ajudam a resolver o erro “Elementos clicáveis estão muito próximos”. Embora não seja necessário, se você quiser editar o código CSS diretamente, você pode fazê-lo através do painel esquerdo.
Então você pode passar para o próximo elemento que está causando problemas de usabilidade móvel e repetir o processo. Quando você estiver satisfeito com suas mudanças, clique no botão verde Salvar.
2. Certifique-se de que todos os alvos que podem ser batidos estejam no mínimo em 48px
É impossível criar um design único e estático que tenha bom aspecto e funcione corretamente em todos os dispositivos. Em vez disso, seria melhor se você visasse criar um layout flexível, definindo todos os seus alvos que podem ser tocados usando pixels independentes do dispositivo (dpi). Os elementos que são definidos usando dpi podem ser automaticamente escalados para o tamanho com base no tamanho da tela do usuário.
Em um dispositivo móvel, o alvo mínimo recomendado de toque é 48×48 pixels. Equivale a cerca de 9 mm, o que é suficiente para a almofada de dedos de uma pessoa comum.
Portanto, se você estiver lutando para descobrir exatamente quais elementos são a fonte do problema, isso pode ajudar a analisar os dpi de cada elemento. Se estiver abaixo do alvo de toque recomendado (por exemplo, 24px), você pode aumentar o acolchoamento para 48px.
Você pode verificar o valor computado de uma área de acesso usando o Chrome DevTools ou Firefox DevTools, dependendo de qual navegador você prefere. Vamos usar o Chrome como exemplo.
Para verificar o valor de dpi de um dos elementos clicáveis em seu site WordPress, abra-o em uma aba do navegador Chrome e navegue até a página que apresenta o erro “Elementos clicáveis estão muito próximos”. Clique com o botão direito do mouse na página e selecione Inspectar.
Clicando em Inspect abrirá as ferramentas cromadas DevTools. Ao longo da parte superior, clique no ícone que exibe os dispositivos móveis, o que o levará para a tela da barra de ferramentas Toggle device.
No painel de visualização à esquerda, você verá uma emulação de dispositivo móvel do seu site. Se você passar o mouse e clicar em qualquer um dos elementos que podem ser tocados, você poderá ver o valor computado à direita:
Se necessário, você pode então ajustar o dimensionamento de um elemento editando diretamente seus arquivos CSS e do site ou usando um plugin como o YellowPencil.
3. Verifique o método de entrada
Se você estiver tentando corrigir o erro “Elementos clicáveis estão muito próximos”, isso pode ajudar a verificar o método de entrada. Ele se refere ao método ou dispositivo que um usuário está usando para visualizar e interagir com seu site. Mais especificamente, você pode ver se eles estão usando um smartphone, tablet ou outros dispositivos.
Por exemplo, o toque é considerado um método de entrada impreciso. Como acabamos de discutir, o uso de CSS para aumentar o tamanho de seus alvos de toque ou adicionar acolchoamento extra pode facilitar a interação dos visitantes que estão usando dispositivos de toque com seu website.
Entretanto, determinar o dispositivo de um usuário não é uma ciência exata. Esta técnica usa o que é conhecido como “ponteiro” para verificar o método de entrada principal do usuário, que pode ter um de dois valores:
- Coarse: O principal método de entrada do dispositivo é o toque.
- Fine: O método de entrada é um mouse e um trackpad.
Note que se o toque é o principal método de entrada do usuário, isto sugere que a pessoa está visualizando seu website em um smartphone ou tablet.
Entretanto, a presença de uma tela sensível ao toque não garante que alguém esteja usando um dispositivo móvel. Eles podem estar acessando seu site usando um laptop grande, com tela sensível ao toque, ou podem ter conectado um dispositivo Bluetooth ao smartphone deles.
Se o ponteiro retornar um valor coarse, você pode ajustar o tamanho do alvo a ser atingido usando o CSS. Para fazer isso, você pode colocar o seguinte no arquivo CSS do seu tema WordPress (ou usando um plugin como o YellowPencil):
.container a {
padding: .2em;
}
@media (pointer: coarse) {
.container a {
padding: .8em;
}
}
Depois de ajustar seu CSS, você pode dizer ao Google para recriar seu site para determinar se isto resolveu o problema.
Alternativamente, você pode pedir ao Google para recriar URLs individuais usando a Ferramenta de Inspeção de URLs. Após enviar sua URL através desta ferramenta, selecione Solicitar indexação. A ferramenta de inspeção testará então a URL para quaisquer problemas óbvios de indexação.
Assumindo que o Google não encontre problemas, a página será então qualificada para indexação.
Alternativamente, se você tiver um grande número de URLs, você pode enviar um mapa do site. Para cada página que requer nova indexação, atualize sua<lastmod> tag com a data da última modificação. Você pode então submeter este mapa do site usando a ferramenta de relatório de mapa do site do Google.
Na maioria dos casos, seu mapa do site passará imediatamente. Entretanto, pode levar algum tempo para o Google rastrear todas as URLs em seu mapa do site, dependendo de fatores tais como tamanho do site, tráfego e atividade. Também não há garantia de que o Google rastreará cada um dos URLs em seu mapa do site.
O que é o erro “Conteúdo maior do que a tela”?
Como você deve se lembrar, o Google Search Console pode adverti-lo sobre vários erros de usabilidade móvel. Além dos “Elementos clicáveis estão muito próximos”, seu relatório resumido também poderia incluir a questão “Conteúdo maior do que a tela”.
Esta edição aparecerá no mesmo lugar em seu Console de Busca do Google que o erro “Elementos clicáveis”. Da mesma forma, ele tem uma variedade de causas potenciais.
Por que o erro “Conteúdo mais amplo que a tela” pode aparecer
Este erro ocorre quando o design do seu site se expande horizontalmente, forçando os usuários móveis a deslizar lateralmente para ver o conteúdo “fora da tela”. Para proporcionar uma boa experiência ao usuário, você deve evitar a rolagem horizontal sempre que possível.
É mais provável que você encontre a questão “Conteúdo maior do que a tela” se você usar valores absolutos em suas declarações CSS. Como layouts inflexíveis podem resultar no erro “Elementos clicáveis”, não é raro encontrar estes dois erros no mesmo relatório de usabilidade móvel.
Como corrigir o erro “Conteúdo maior do que a tela” (5 Métodos)
Se seu relatório incluir o erro “Conteúdo maior do que a tela”, você pode usar alguns métodos simples para resolvê-lo. Vamos dar uma olhada em cinco das opções mais comuns.
1. Evitar o uso de variáveis absolutas nas declarações do CSS
Uma das melhores maneiras de corrigir o erro “Conteúdo maior do que a tela” é evitar o uso de variáveis absolutas em suas declarações CSS. Seu conteúdo não deve exigir um viewport específico para ser exibido e funcionar corretamente.
Portanto, ao invés de usar valores absolutos, você deve optar por valores relativos de largura e posição para seus elementos CSS. Usando valores relativos sempre que possível, você pode criar layouts flexíveis que escalam para se adequar a uma gama de tamanhos de tela.
2. Atribuir às imagens uma largura máxima
Uma imagem com dimensões fixas pode parecer maior do que o viewport e, por sua vez, acionar o erro “Conteúdo maior do que a tela”. Para garantir que suas imagens sejam escaladas com base nas dimensões da tela, é melhor atribuir a todas as imagens uma largura máxima de 100%.
Isso forçará a imagem a encolher para se ajustar ao espaço disponível. Mesmo que você use a max-width, você deve usar os atributos de largura e altura em sua <image> tag, já que os navegadores modernos usam esta informação para reservar espaço para as imagens enquanto elas são carregadas. Usando a <image> tag, você pode evitar mudanças de layout quando suas imagens finalmente aparecerem na tela.
3. Use Meta Viewport Tags
Por padrão, os navegadores móveis tornam a página na largura da tela da área de trabalho, que normalmente fica em torno de 980px. O navegador tentará então otimizar sua página aumentando o tamanho da fonte e escalonando seu conteúdo para se adequar às dimensões atuais da tela.
Infelizmente, este comportamento padrão pode resultar em inconsistências. Alguns usuários podem precisar fazer zoom para ler e interagir com seu conteúdo, e é por isso que você pode estar vendo este erro.
Em vez de confiar neste comportamento padrão, você deve dar instruções ao navegador sobre como controlar as dimensões e a escala da página. Você pode fazer isso inserindo uma meta tag viewport no cabeçalho do seu documento.
4. Utilizar técnicas modernas de layout do CSS
Você também pode corrigir o erro “Conteúdo maior do que a tela” alterando o layout do seu site. Para ajudá-lo a criar layouts mais flexíveis, você pode considerar a implementação de técnicas como Flexbox, CSS Grid Layout, ou Multiple-Column Layout (Multicol).
5. Usar consultas de mídia CSS onde for apropriado
As consultas de mídia podem facilitar a mudança de estilos com base no dispositivo do usuário, incluindo telas sensíveis ao toque. Portanto, se você ainda estiver lidando com o erro “Conteúdo maior do que a tela” neste ponto, recomendamos o uso de consultas de mídia CSS quando apropriado.
Depois de fazer estas mudanças, será hora de testar para ver se você resolveu com sucesso o erro “Conteúdo maior do que a tela”. Você pode fazer isso executando novamente o relatório de usabilidade móvel e validando a correção usando as etapas que discutiremos na próxima seção.
Como verificar e validar sua resolução de erros
Independentemente de quais dos erros acima você está lidando ou dos métodos que utiliza para corrigi-los, é essencial determinar se suas mudanças resolveram o problema. Você pode fazer isso executando novamente os testes de usabilidade do Google Mobile.
Para isso, navegue de volta ao seu relatório de usabilidade móvel e localize o erro “Elementos clicáveis estão muito próximos”. A seguir, selecione a opção Validar correção.
Observe que você pode repetir estes mesmos passos se estiver tentando verificar e validar sua resolução de erro para “Conteúdo mais amplo que a tela”. O Google irá então rastrear seu website e você receberá uma mensagem informando que está no processo de validação da mudança.
Se você tiver resolvido o erro, então o Google Search Console exibirá uma mensagem “Passed” e uma marca de verificação verde que o acompanha. Por outro lado, se as correções empregadas não forem validadas, você terá que revisitar o erro para implementar uma solução alternativa.
Resumo
Erros de usabilidade móvel não resolvidos podem resultar em uma má experiência do usuário e podem causar uma queda notável no tráfego do seu website. Ao tomar medidas para resolver erros de usabilidade, você pode garantir que o seu website seja móvel e acessível a um conjunto maior de pessoas.
Neste artigo, você aprendeu como corrigir o erro “Elementos clicáveis estão muito próximos” usando três métodos:
- Modifique o seu site usando um plugin do editor de estilo CSS (como o YellowPencil).
- Use DevTools Chrome para garantir que todos os alvos que podem ser tocados sejam 48 dpi ou maiores.
- Verifique o método de entrada e ajuste seu CSS de acordo.
Você tem alguma pergunta sobre a correção do erro “Elementos clicáveis estão muito próximos”? Informe-nos nos comentários abaixo!
Salman Ravoof é um desenvolvedor web autodidata, escritor, criador e grande admirador de Software Livre e de Código Aberto (FOSS). Além de tecnologia, ele se entusiasma com ciência, filosofia, fotografia, artes, gatos e comida. Saiba mais sobre ele em seu site e conecte-se com Salman no X.
Deixe um comentário