Défilement dans la conception Web : combien c'est trop ?

Le défilement peut sembler être une fonctionnalité très basique d'un site Web, et c'est essentiellement le cas. Cependant, malgré sa fonctionnalité de base, le défilement sur votre site Web peut soit profiter aux utilisateurs, soit les rendre fous, les poussant vers les sites de vos concurrents.

Certains sites Web utilisent un défilement «infini» - vous faites défiler vers le bas d'une longue page d'accueil uniquement pour voir la barre de défilement revenir au milieu de sa piste à mesure que davantage de contenu se charge en bas. Ce type de défilement peut être efficace dans certains cas, mais il frustrera les utilisateurs le plus souvent. Il est important de savoir où le défilement est efficace et quel type vous devez utiliser.

La complexité exige la simplicité

Les sites Web sont plus robustes et riches en contenu que jamais auparavant, et les concepteurs ont donc conçu de nouvelles façons de remplir un écran d'informations sans submerger les utilisateurs. Cela est particulièrement vrai aujourd'hui compte tenu du fait que les utilisateurs d'appareils mobiles sont plus nombreux que les utilisateurs d'ordinateurs de bureau. Les concepteurs doivent adapter une grande quantité de contenu sur des écrans relativement petits, ce qui nécessite une certaine mesure de défilement.

La conception en mosaïque est l'idée de créer des morceaux de contenu de petite taille (qui sont généralement des liens interactifs vers un contenu plus détaillé) pour une navigation rapide et efficace. Associez ce concept au défilement et vous pouvez fournir aux utilisateurs un flux de contenu apparemment sans fin.

Le défilement est également naturellement attrayant sur les appareils mobiles. Glisser un doigt est un mouvement simple, facile, mais précis. Les utilisateurs apprennent rapidement à balayer pour atteindre rapidement le bas d'une page, ou lentement pour accéder au prochain élément de contenu pertinent.

Types de défilement

En fonction de votre image de marque et de votre clientèle, le type de défilement que vous devriez présenter sur votre site Web variera. Lorsque vous décidez de la méthode à utiliser, réfléchissez à la manière dont elle interagira avec le contenu que vous fournissez. Il existe quatre types de défilement de base :

1. Défilement long

L'avantage du défilement long est que vous pouvez créer une seule page de contenu homogène. Cela offre une expérience de navigation fluide et linéaire aux utilisateurs et se prête naturellement à la narration.

Le bateau est un exemple fantastique de défilement long

Au fur et à mesure qu'un utilisateur défile, il peut absorber une plus grande partie de l'histoire de manière naturelle, offrant une expérience de navigation plus immersive. De nombreux sites optent pour une seule page avec un défilement long, mais l'un des principaux inconvénients de cette configuration est qu'elle peut nuire au référencement de votre site. Les sites Web avec plusieurs pages ont tendance à mieux s'en sortir en termes de référencement.

2. Défilement long fixe

Plutôt que de faire défiler toute la page, une configuration de défilement long fixe maintient certains contenus statiques tandis que d'autres défilent. Alternativement, vous pouvez configurer votre défilement de sorte que lorsqu'un utilisateur atteint un certain point, le contenu statique passe à une nouvelle section.

C'est idéal pour les sites qui ne veulent pas se convertir en une seule page en raison de problèmes de référencement.

3. Défilement infini

Pour les sites qui offrent des quantités de contenu extrêmement denses, il peut y avoir trop de choses à charger sur une seule page à la fois. Avec une configuration de défilement infini, vous créez essentiellement un rythme. La plupart des médias sociaux, tels que Facebook, Tumblr et Imgur sont tous configurés pour un défilement infini. Cela permet aux utilisateurs de parcourir en permanence de nouveaux contenus.

Le seul inconvénient est que les utilisateurs seront très frustrés de perdre leur place. Si vous pensez que le défilement infini fonctionnerait bien avec le contenu de votre site, vous devriez envisager une navigation fluide, une barre d'outils ou un ensemble de boutons permettant aux utilisateurs de revenir rapidement en haut ou dans des zones spécifiques.

4. Défilement de parallaxe

Les amateurs de jeux vidéo vont se sentir comme chez eux avec le défilement parallaxe. Les jeux vidéo plus anciens qui se déroulaient dans des environnements bidimensionnels ne disposaient pas de la technologie nécessaire pour créer les vastes environnements tridimensionnels hyperréalistes des jeux récents.

Exemple de défilement de parallaxe : freiner mal

Les anciens jeux 8 bits et 16 bits tels que Sonic the Hedgehog, Mega Man et Super Mario Bros étaient souvent appelés « side-scrollers ». En effet, le joueur s'est déplacé de gauche à droite pour terminer une étape et la profondeur a été créée avec le mouvement. Le premier plan et l'arrière-plan se déplaçaient à des vitesses différentes, créant une sensation visuelle de profondeur. Le défilement parallaxe dans la conception de sites Web brille vraiment lorsque vous pouvez travailler dans des animations déclenchées par défilement.

Meilleures pratiques pour le défilement

Le type de défilement que vous utilisez sur votre site Web doit dépendre de votre contenu. La fonction de base du défilement est de permettre aux utilisateurs de digérer autant ou aussi peu de votre contenu qu'ils le souhaitent, il est donc important d'adapter l'expérience à vos offres.

Les sites extrêmement riches en contenu peuvent vouloir étudier le défilement long infini. Cette méthode fonctionne pour les médias sociaux - en particulier sur les plates-formes mobiles - car il y a tout simplement trop de contenu à digérer sur une seule page, et tenter de faire tenir chaque élément sur des pages individuelles serait à la fois peu pratique et peu engageant.

Laissez votre contenu dicter la longueur de votre défilement. Vous pouvez également réduire le défilement avec des boutons simples qui disent "Scroll for More" ou "See More". Permettez aux utilisateurs de décider s'ils veulent ou non continuer, et vos pages se chargeront non seulement plus rapidement, mais la curiosité humaine incitera les utilisateurs à cliquer plus souvent.

Vos données utilisateur vous en diront beaucoup sur la façon dont vos utilisateurs interagissent avec votre site et si vous devez ou non repenser votre configuration de défilement. Lorsqu'un utilisateur visite votre page, la première chose qu'il voit est le haut. Le bas de leur vue s'appelle un "pli", et votre Google Analytics peut vous dire combien d'utilisateurs cliquent en dessous et à quelle fréquence. Cette métrique vous indiquera si votre paramètre de défilement actuel et la disposition de votre site encouragent ou non les utilisateurs à continuer à faire défiler vers le bas pour voir ce que vous avez à offrir.

Sticky Navigation est un excellent outil

Quel que soit le type de défilement que vous choisissez pour votre site, la navigation fluide est un excellent moyen de garder le contrôle des utilisateurs lorsqu'ils naviguent sur votre site. Pensez à un client de messagerie Web comme Gmail : vous pouvez faire défiler votre boîte de réception, mais la barre située à gauche de l'écran comporte des boutons permettant de basculer entre les comptes ou d'accéder à différents dossiers. Les utilisateurs peuvent faire défiler à leur guise, mais ils ont toujours la possibilité de passer à une section précise.

Tout type de site peut bénéficier d'une navigation fluide. Si vous utilisez le défilement infini, les utilisateurs apprécieront probablement d'avoir la possibilité de revenir en haut de la page en un seul clic, plutôt que de balayer en continu. Vous pouvez également créer un en-tête qui reste à l'écran, quelle que soit la profondeur de défilement d'un utilisateur, offrant un accès instantané aux fonctions essentielles.

Avantages et inconvénients

Alors que de plus en plus de personnes se tournent vers les appareils mobiles pour naviguer sur le Web, le défilement semble être un choix naturel pour les sites Web. Bien sûr, appuyer sur divers liens est rapide et facile, mais la plupart des utilisateurs préfèrent avoir un accès rapide à l'essentiel du contenu d'un site aussi rapidement que possible. Vous pouvez engager vos utilisateurs avec une offre de contenu robuste, et vous ne les submergerez pas si vous offrez une mesure de contrôle.

Cependant, il est important de se rappeler que de gros blocs de contenu ou multimédia peuvent ralentir la vitesse de chargement de votre page. Cela pourrait nuire à l'expérience de vos utilisateurs sur les appareils mobiles, car nombre d'entre eux navigueront avec des données cellulaires ou des connexions Wi-Fi plus faibles que la moyenne lors de leurs déplacements.

Vous devrez peut-être également sacrifier le pied de page de votre site Web. Presque tous les sites Web ont un pied de page au bas de la page avec des liens précis vers le profil de l'entreprise, où soumettre une candidature, des informations de contact et d'autres informations générales. Vous pouvez éliminer le besoin d'un pied de page en utilisant des outils de navigation collants sur lesquels les utilisateurs peuvent cliquer pour accéder à des zones spécifiques de votre site.

Si vous concevez pour la navigation sur les appareils mobiles (ce que vous devriez être), les avantages du défilement l'emportent largement sur les inconvénients - tant que vous configurez judicieusement le défilement de votre site. Les appareils mobiles encouragent intrinsèquement l'interaction et avec une conception de page Web judicieusement conçue et réactive, vos utilisateurs apprécieront des façons uniques d'absorber votre contenu.