A maior parte do tráfego da maioria dos sites hoje vem de celular, o que torna o comportamento do banner no mobile mais importante do que no desktop — não o contrário do que muita gente imagina ao planejar o design. Uma barra que funciona bem numa tela de 24 polegadas pode se tornar um obstáculo real numa tela de poucos centímetros.
Altura proporcional ao espaço disponível
Numa tela mobile, cada centímetro de altura ocupado pelo banner é proporcionalmente muito mais caro do que no desktop. Um banner que consome 15% da altura visível no celular está, na prática, tirando uma fatia relevante do espaço em que o conteúdo principal deveria aparecer. Manter o banner compacto — uma única linha de texto sempre que possível — reduz esse custo sem eliminar a visibilidade da mensagem.
Área de toque para o botão e o fechar
Elementos clicáveis no mobile precisam de uma área de toque generosa, porque o dedo é muito menos preciso que o cursor do mouse. Um botão de ação ou um ícone de fechar pequenos demais geram cliques errados — tocar em "fechar" quando a intenção era tocar no botão de ação, ou vice-versa. O espaçamento entre os dois elementos também precisa ser suficiente para evitar esse tipo de erro, especialmente em banners com botão e X próximos um do outro.
Posição fixa e o teclado virtual
Um banner fixo no rodapé pode entrar em conflito com o teclado virtual em páginas com campos de formulário — ao tocar num campo de texto, o teclado sobe e pode empurrar ou sobrepor o banner de forma estranha. Vale testar esse comportamento especificamente em páginas de contato, cadastro ou checkout, onde formulários são mais comuns.
Não sobrepor elementos de navegação nativos
Muitos celulares têm barras de navegação do próprio sistema na parte inferior da tela (gestos de voltar, indicador home). Um banner fixo no rodapé precisa considerar essa área para não ficar parcialmente coberto ou cobrir, por sua vez, esses controles do sistema — o que gera uma experiência confusa e pode até impedir gestos básicos de navegação.
Texto mais curto, sempre
Como discutido em outro artigo deste blog sobre o tamanho ideal de texto, o mobile pede mensagens ainda mais enxutas do que o desktop, porque a largura de tela é bem menor e o mesmo texto que cabe numa linha ali frequentemente exige duas no celular — aumentando a altura ocupada e o tempo de leitura.
No fim, um banner mobile bem-feito é aquele que a pessoa nota, entende e decide (ler, clicar ou fechar) em poucos segundos, sem que isso comprometa a navegação por toque no restante da página.
Testar no aparelho real, não só no navegador do computador
Simular uma tela mobile redimensionando a janela do navegador no computador ajuda, mas não substitui testar o banner num celular de verdade. Diferenças de densidade de tela, comportamento do teclado virtual e a forma como o dedo realmente toca a tela só aparecem de fato no aparelho físico. Um teste rápido em um ou dois celulares diferentes, antes de publicar um banner novo, evita boa parte dos problemas de usabilidade que só aparecem "ao vivo" e passam despercebidos em qualquer simulação feita no desktop.
Este conteúdo tem caráter informativo e não substitui uma análise personalizada do seu site e da sua estratégia de comunicação.
Pronto pra colocar o Banner de Avisos pra trabalhar?
Crie sua conta na VEANET Plataforma e comece a usar o Banner de Avisos em poucos minutos.
Quero o Banner de Avisos →