Se você tem um site, seja ecommerce, institucional ou de conteúdo, certamente quer que seu usuário fique encantado com ele, inclusive no mobile. Entretanto, deve haver cuidado para isso não influenciar negativamente na velocidade de navegação. Essa norma é ainda mais preciosa para dispositivos móveis, afinal mais da metade das visitas em sites através do mobile são abandonadas se a página demora mais de 3 segundos para carregar, dependendo da velocidade da internet. Por isso, há algumas boas práticas a seguir quando se pensa em design para mobile.
A importância da velocidade
Na hierarquia da experiência do usuário, a percepção de velocidade é o que mais importa, afinal é o único momento onde o usuário não pode fazer nenhuma ação e, frustrantemente, apenas esperar. Entenda melhor ao que o usuário dá mais importância quando está em um site:
Além do mais, a partir de julho de 2018, o Google também passa a priorizar sites que carregam mais rápido no mobile, devido ao grande e constante crescimento de acessos através de dispositivos móveis. Entretanto, o que serve para um mecanismo não é o mesmo que serve para uma pessoa. Mesmo com sites que carregam rápido (menos de 4 segundos), 1/3 dos usuários ainda não consideram isso veloz. Por isso, mais da metade abandonam o site se ele demora mais de 3 segundos para carregar, o que é um grande desafio para os profissionais da área web com os recursos tecnológicos atuais. Assim, o design do seu site pode ajudar o usuário a ter uma percepção diferente de velocidade, tornando sua experiência menos tediosa com os mesmos 4 segundos de carregamento.
Loading… (calma, é só um subtítulo)
Os carregadores, ou loaders, já são bem conhecidos no mundo digital. Segue um exemplo de um loader spinner:
Com este gif, você provavelmente teve a sensação de que alguma imagem estava carregando ou estava indo para outra página. Entretanto, por mais que um loader deixe óbvio para o usuário que ele está esperando, ao menos entrega uma interação e uma confirmação de que algo vai aparecer em breve, sendo menos frustrante que uma tela em branco. O loader spinner é mais utilizado para carregamentos rápidos. É uma animação que prende a atenção e passa a ideia de “ei, estamos trabalhando em algo para você, é rapidinho”.
A progress bar, por outro lado, trabalha melhor com tempo de carregamento mais longo.
Por possuir uma barra com um limite, esse loader permite o usuário ter noção de quanto tempo pode esperar, não deixando-o no escuro. Por demorar mais, pode também trazer algumas informações junto com a barra de progresso, como uma porcentagem de carregamento ou o que, especificamente, está sendo carregado. Exemplo: inicializando interface, carregando playlist.
Mas tem outro tipo de interação?
Sim! Uma interação de carregamento que vem sendo utilizada cada vez mais é o skeleton screen (tela esqueleto).
Por que esse nome? Bom, como a imagem sugere, o skeleton screen consiste em começar apresentando a tela na sua forma mais básica: o seu wireframe. O wireframe é um desenho simples da estrutura de uma página, muito utilizado por UX designers para simular navegação e disposição de informações. No caso da tela esqueleto, os elementos no estilo wireframe vão gradativamente sendo substituídos pelos elementos atuais do site, como um banner, uma foto, um ícone ou um texto. Você provavelmente já esbarrou com esta tela de carregamento em sites de gigantes como Facebook ou LinkedIn.
Beleza, mas como posso deixar meu site mais rápido?
Além das percepções melhoradas de velocidade já citadas, há algumas práticas que podem, literalmente, diminuir o tempo que uma página pode carregar. Aqui a pergunta é: você realmente precisa de tudo isso?
Imaginando que cerca de 70% do seu site é composto por imagens, pode-se deduzir que a otimização de uma página está diretamente ligada à compressão ou escolha de imagens. Sabendo disso, leva-se em conta que as imagens que promovem navegação ou determinadas ações são as mais importantes para conversão (banners, produtos, fotos de blog). Estas não podem ser substituídas ou excluídas, assim como imagens relacionadas à sua marca (logos, coleções), pois fazem parte dos seus pontos de contato e demonstram sua autoridade.
Em nossa biblioteca, você pode conferir um ebook que ensina como fazer ótimas fotos de produtos para sua loja. Aprenda com a gente!
Entretanto, sobram imagens decorativas e informativas, que podem ser pensadas de outra forma. Uma imagem de background (fundo do site) é realmente necessária? Ela não pode ser substituída por um bloco de cor ou uma imagem de cores e elementos mais neutros e, consequentemente, mais leve? Assim como uma imagem informativa, como um banner falando sobre devoluções, poderia tranquilamente ser substituída por texto com botão e bloco de cor ao fundo.
Para melhorar a conversão do seu produto através do texto do seu site, produzimos um ebook que ensina 5 dicas infalíveis de SEO para ecommerce. Temos certeza que vai te ajudar!
Basicamente, o segredo está em diminuir excessos ou otimizar eles. Se há imagens que realmente precisam estar ali, mas estão pesando muito, você ou o seu designer pode trabalhar com fatias para dividir um arquivo gigante em vários leves. Outra opção é utilizar um compressor. Há muitas ferramentas online que diminuem o tamanho de imagens em formato JPEG ou PNG, como o Optimizilla.
Então agora tenho tudo para meu site voar no mobile?
Tudo o que foi apresentado neste artigo foi pensando em como o design pode contribuir para melhorar a percepção de velocidade de um site, principalmente para o usuário de dispositivos móveis. Mas fique sabendo: ainda há muito mais formas que você pode checar com seu desenvolvedor, como redução de código, alterações em código HTML, arquivos CSS e recursos desnecessários dentro do seu site.
