O slider da página inicial da sua loja serve para alguma coisa? Quando ajuda e quando atrapalha

Quase todas as lojas têm um: um carrossel no topo da página inicial que vai passando banners. É decidido no início do projeto, preenchido com quatro ou cinco imagens de campanha e esquecido. E é fácil que passe meses a mostrar uma promoção que já terminou, uma imagem que não se lê no telemóvel ou um vídeo que pesa mais do que o resto da página.

A pergunta não é «slider sim ou slider não», mas que trabalho tem de fazer esse espaço, que é o mais visível de toda a loja.

O que se sabe sobre os carrosséis

Os profissionais de usabilidade alertam há anos para alguns problemas que se repetem:

• Vê-se o primeiro diapositivo e pouco mais. Muitos visitantes fazem scroll ou tocam no menu antes de passar o segundo.
• O movimento automático distrai e pode mudar o banner precisamente quando alguém o ia ler ou tocar-lhe.
• Parece publicidade, e os utilizadores aprendem a ignorar o que parece publicidade.
• Várias mensagens competem entre si: se tudo é importante, nada é.

Isso não significa que um carrossel não possa funcionar. Significa que um carrossel com cinco mensagens genéricas que rodam a cada três segundos provavelmente não compensa o espaço que ocupa.

Quando um slider ajuda mesmo

• Campanhas com data: saldos, época, lançamento. Uma mensagem clara, com data de início e de fim.
• Lojas com públicos diferentes que precisam de se orientar depressa: profissional e particular, homem e mulher, duas linhas de produto muito diferentes.
• Produto muito visual, em que a imagem grande transmite o que um texto não consegue: moda, decoração, mobiliário.
• Novidades que mudam com frequência, desde que alguém as atualize de facto.

E quando é melhor outra coisa: se a sua loja vende por catálogo amplo (peças de substituição, consumíveis, referências técnicas), o que o visitante quer na página inicial é a pesquisa e as categorias. Um banner fixo com a sua proposta de valor e por baixo acessos claros às famílias costuma servir mais do que cinco imagens a rodar.

Como fazê-lo bem

Poucos diapositivos, com uma mensagem cada

Dois ou três. O primeiro é o mais visto: coloque aí o que mais importa. Cada diapositivo com um título curto, uma linha de apoio e um único botão que leve a uma página concreta (a categoria da campanha, não a página inicial).

Sem rotação rápida

Se rodar sozinho, que o faça devagar e que pare quando o utilizador passa o rato ou toca. Melhor ainda se for possível navegar com setas e pontos visíveis.

Datas, não lembretes

A promoção que continua na página inicial uma semana depois de terminar é um clássico. Se cada diapositivo tiver data de início e de fim, a campanha fica preparada e desaparece sozinha.

Texto como texto

Um título dentro da imagem não se traduz, não se lê no telemóvel se a imagem for reduzida e um leitor de ecrã não o entende. Melhor a imagem limpa e o texto por cima em HTML, em cada idioma.

O telemóvel: onde os sliders mais falham

Um banner horizontal de computador, reduzido à largura de um telefone, transforma-se numa tira estreita em que o título é ilegível. E, se o modelo só recorta por CSS, o telemóvel descarrega a imagem grande completa para mostrar um pedaço.

A solução é preparar uma imagem por dispositivo (computador, tablet e telemóvel, cada uma com o seu enquadramento) e servi-la com o elemento picture, de forma que cada ecrã descarregue só a sua. É mais trabalho de design, mas é a diferença entre um banner que se lê e um que atrapalha.

Desempenho: o que pesa um carrossel

• Imagens: o peso de todos os diapositivos, se forem todos carregados no início. O correto é carregar o primeiro de imediato e os restantes depois.
• JavaScript: alguns carrosséis trazem bibliotecas grandes para animações que não fazem falta.
• Vídeo: um vídeo de fundo pode funcionar no computador, mas no telemóvel pesa muito. Se o usar, sem som, comprimido e com uma versão para telemóvel ou uma imagem no seu lugar.
• Serviços externos: um slider que carrega as imagens ou o código a partir de outro servidor acrescenta ligações e dependências.

Acessibilidade

Um carrossel acessível permite pausar o movimento, usa-se com o teclado, tem textos alternativos nas imagens com conteúdo e não depende só da cor para indicar o diapositivo ativo. Em Espanha, a obrigação de acessibilidade para muitos comércios eletrónicos já é uma realidade; além disso, o que é acessível costuma ser também mais cómodo para todos.

Reveja o seu em dez minutos

1. Abra a página inicial no seu telemóvel. Lê-se o título do primeiro diapositivo?
2. Algum diapositivo anuncia algo que já não está em vigor?
3. Cada botão leva a uma página concreta e relevante?
4. Quantos diapositivos há? Se forem mais de três, alguém vê o quarto?
5. Passe a página inicial pelo PageSpeed Insights: o elemento LCP é uma imagem do slider e quanto pesa?
6. Na sua ferramenta de análise, quantos cliques recebem os banners face às categorias do menu?

E se o slider for um módulo antigo que veio com o tema, confirme que continua compatível com a sua versão do PrestaShop e que não guarda as imagens dentro da pasta do módulo, onde uma atualização as pode apagar.

Como resolver no PrestaShop

Rekire Slider é um carrossel em que cada diapositivo pode ter uma imagem para computador, outra para tablet e outra para telemóvel, servidas com picture para que o navegador descarregue só uma. Admite diapositivos de vídeo MP4 ou WebM (sem som, em ciclo e também com fonte por dispositivo), cópias WebP automáticas, datas de início e fim sem cron, pares de diapositivos a meia largura que no telemóvel passam a ocupar a largura completa e textos posicionáveis em cada idioma como texto simples. Guarda as imagens fora da pasta do módulo, para que uma atualização não as apague, e coloca-se na página inicial, por cima do conteúdo, através de um hook próprio ou como widget.