Le slider de la page d'accueil de votre boutique sert-il à quelque chose ? Quand il aide et quand il gêne

Presque toutes les boutiques en ont un : un carrousel en haut de la page d'accueil qui fait défiler des bannières. On le décide au début du projet, on le remplit de quatre ou cinq images de campagne et on l'oublie. Et il arrive facilement qu'il affiche pendant des mois une offre déjà terminée, une image illisible sur mobile ou une vidéo plus lourde que le reste de la page.

La question n'est pas « slider ou pas slider », mais quel rôle doit jouer cet espace, qui est le plus visible de toute la boutique.

Ce que l'on sait des carrousels

Les spécialistes de l'ergonomie alertent depuis des années sur certains problèmes récurrents :

• On regarde la première diapositive et guère plus. Beaucoup de visiteurs font défiler la page ou ouvrent le menu avant que la deuxième n'arrive.
• Le défilement automatique distrait et peut changer la bannière juste au moment où quelqu'un allait la lire ou cliquer.
• Cela ressemble à de la publicité, et les utilisateurs apprennent à ignorer ce qui ressemble à de la publicité.
• Plusieurs messages se font concurrence : si tout est important, rien ne l'est.

Cela ne veut pas dire qu'un carrousel ne peut pas fonctionner. Cela veut dire qu'un carrousel avec cinq messages génériques qui tournent toutes les trois secondes n'apporte probablement pas autant que la place qu'il occupe.

Quand un slider aide vraiment

• Les campagnes datées : soldes, saison, lancement. Un message clair, avec sa date de début et de fin.
• Les boutiques aux publics différents qui doivent orienter rapidement : professionnels et particuliers, hommes et femmes, deux lignes de produits très différentes.
• Les produits très visuels, où la grande image transmet ce qu'un texte ne peut pas : mode, décoration, mobilier.
• Les nouveautés qui changent souvent, à condition que quelqu'un les mette réellement à jour.

Et quand mieux vaut autre chose : si votre boutique vend sur un large catalogue (pièces détachées, fournitures, références techniques), ce que le visiteur veut sur la page d'accueil, c'est le moteur de recherche et les catégories. Une bannière fixe avec votre proposition de valeur et, en dessous, des accès clairs aux familles est généralement plus utile que cinq images qui tournent.

Comment bien faire

Peu de diapositives, un message chacune

Deux ou trois. La première est la plus vue : mettez-y ce qui compte le plus. Chaque diapositive avec un titre court, une ligne d'accompagnement et un seul bouton menant à une page précise (la catégorie de la campagne, pas la page d'accueil).

Pas de défilement rapide

S'il défile seul, qu'il le fasse lentement et qu'il s'arrête quand l'utilisateur passe la souris ou touche l'écran. Encore mieux s'il peut être parcouru avec des flèches et des points visibles.

Des dates, pas des rappels

L'offre qui reste en page d'accueil une semaine après sa fin est un classique. Si chaque diapositive a une date de début et de fin, la campagne peut être préparée à l'avance et disparaît toute seule.

Le texte en tant que texte

Un titre intégré à l'image ne se traduit pas, ne se lit pas sur mobile si l'image est réduite et n'est pas compris par un lecteur d'écran. Mieux vaut une image épurée et le texte par-dessus en HTML, dans chaque langue.

Le mobile : là où les sliders échouent le plus

Une bannière paysage pour ordinateur, réduite à la largeur d'un téléphone, devient une bande étroite où le titre est illisible. Et si le gabarit se contente de recadrer en CSS, le mobile télécharge la grande image complète pour n'en afficher qu'un morceau.

La solution consiste à préparer une image par appareil (ordinateur, tablette et mobile, chacune avec son propre cadrage) et à la servir avec l'élément picture, de sorte que chaque écran ne télécharge que la sienne. C'est plus de travail de conception, mais c'est la différence entre une bannière lisible et une bannière qui gêne.

Performances : ce que pèse un carrousel

• Les images : le poids de toutes les diapositives, si elles se chargent toutes au départ. Le bon réflexe est de charger la première tout de suite et les autres ensuite.
• Le JavaScript : certains carrousels embarquent de grosses bibliothèques pour des animations inutiles.
• La vidéo : une vidéo d'arrière-plan peut fonctionner sur ordinateur, mais sur mobile elle pèse lourd. Si vous en utilisez une, sans son, compressée et avec une version mobile ou une image à la place.
• Les services externes : un slider qui charge ses images ou son code depuis un autre serveur ajoute des connexions et des dépendances.

Accessibilité

Un carrousel accessible permet de mettre le défilement en pause, se manipule au clavier, comporte des textes alternatifs sur les images porteuses de contenu et ne repose pas uniquement sur la couleur pour indiquer la diapositive active. En Espagne, l'obligation d'accessibilité pour de nombreux sites marchands est déjà une réalité ; de plus, ce qui est accessible est généralement aussi plus confortable pour tout le monde.

Vérifiez le vôtre en dix minutes

1. Ouvrez la page d'accueil sur votre mobile. Le titre de la première diapositive est-il lisible ?
2. Une diapositive annonce-t-elle quelque chose qui n'est plus d'actualité ?
3. Chaque bouton mène-t-il à une page précise et pertinente ?
4. Combien y a-t-il de diapositives ? S'il y en a plus de trois, quelqu'un regarde-t-il la quatrième ?
5. Passez la page d'accueil dans PageSpeed Insights : l'élément LCP est-il une image du slider, et combien pèse-t-elle ?
6. Dans votre outil d'analyse, combien de clics reçoivent les bannières par rapport aux catégories du menu ?

Et si le slider est un ancien module fourni avec le thème, vérifiez qu'il est toujours compatible avec votre version de PrestaShop et qu'il ne stocke pas ses images dans le dossier du module, où une mise à jour peut les supprimer.

Comment le résoudre dans PrestaShop

Rekire Slider est un carrousel dans lequel chaque diapositive peut avoir une image pour ordinateur, une autre pour tablette et une autre pour mobile, servies avec picture pour que le navigateur n'en télécharge qu'une. Il accepte des diapositives vidéo MP4 ou WebM (sans son, en boucle et aussi avec une source par appareil), des copies WebP automatiques, des dates de début et de fin sans cron, des paires de diapositives en demi-largeur qui passent en pleine largeur sur mobile et des textes positionnables dans chaque langue en texte brut. Il stocke les images en dehors du dossier du module, pour qu'une mise à jour ne les supprime pas, et se place sur la page d'accueil, au-dessus du contenu, par un hook dédié ou comme widget.