Arrêtez de créer des sites Web avec un défilement infini!

TL; DR: Bien que le défilement infini fournisse une solution dans certains cas, il peut être moins qu’idéal pour les utilisateurs.

Le défilement infini peut être désorientant, incontrôlable et peut causer du stress à vos utilisateurs.

Dans cet article, nous expliquerons pourquoi vous devez arrêter de créer des sites Web avec un défilement infini. Mais pour commencer, regardons un bref historique du défilement.

Une brève histoire du défilement

Pour comprendre ce qu’est vraiment le défilement, voyons d’où vient le terme défilement.

défilement (n.) : c. 1400, « rouleau de parchemin ou de papier »

Les rouleaux étaient à l’origine utilisés lorsque l’information devenait longue (comme le contenu religieux). Tant de contenu est devenu difficile à gérer, à lire et à écrire.

Lorsque les ordinateurs sont entrés dans nos vies, nous avions encore besoin d’un moyen de naviguer à travers de gros morceaux de contenu.

L’évolution des parchemins dans les ordinateurs

Lignes (et colonnes)

Dans les premières années d’Internet, les concepteurs UX ont inventé / exploré de nombreuses façons de paginer / faire défiler le contenu. Avant que le Web ne soit populaire, nous défilions des lignes sur notre écran.

Les défilement horizontaux ont fait du défilement un outil non seulement pour lire le contenu, mais aussi un moyen de naviguer sur l’écran de l’ordinateur.

Windows (pas celui du système d’exploitation)

L’utilisation de défilement pour naviguer sur l’écran a encouragé les gens à créer des fenêtres. En utilisant Windows, vous pourrez afficher plusieurs éléments de contenu à la fois.

Pages Web

Le défilement résout un problème très fondamental que nous rencontrons lors de la navigation sur les pages Web. Cependant, le défilement peut causer de nombreux problèmes aux utilisateurs et peut avoir un impact négatif sur l’expérience utilisateur. Regardons de plus près.

Les expériences inventées pour naviguer dans les pages Web

Je vais essayer de définir comment les développeurs et les concepteurs ont créé des expériences pour naviguer dans les utilisateurs dans leurs pages Web.

Commençons par apprendre quelques systèmes de pagination back-end:

Pagination basée sur l’offset

C’est le système de pagination le plus connu. Dans cette technique, nous devons d’abord trouver le nombre d’éléments que nous devons paginer:

-- All posts countSELECT COUNT(*) AS total FROM posts

Après avoir compté tous les éléments, nous devons calculer les pages. Supposons que nous affichions 10 articles par page:

-- First page itemsSELECT * FROM posts LIMIT 10

Et si nous voulons passer à la page 3, nous devons d’abord ignorer les éléments 30 en utilisant OFFSET:

-- Third page itemsSELECT * FROM posts LIMIT 10 OFFSET 30

Et nous enverrons les informations de pagination au client comme suit:

{ "pagination": { "items_count": 100, "current": 3, "total_pages": 10 }, "items": }

Avantages et inconvénients de la pagination basée sur l’offset

• 👍 Bon: Facile à accéder à n’importe quelle page
• Good Bon: L’expérience client est plus gratuite
• Bad Mauvais: Problèmes de performances
• Bad Mauvais: Les éléments en double peuvent être affichés si les données changent

Pagination basée sur le curseur

Les données volumineuses ont rendu difficile le calcul du nombre de tables car il ne cesse de croître (pensez à Twitter). Ainsi, les développeurs ont mis au point de nouvelles techniques pour paginer les données: les curseurs.

Chaque ligne doit avoir un curseur unique. Vous n’avez pas à compter la table entière, ce qui rend impossible le nombre de pages réel:

-- Get extra 1 item to get its cursor.SELECT * FROM posts ORDER BY id DESC LIMIT 11

Supposons que chaque publication possède un champ de curseur unique (ou son ID dans cet exemple) pour faciliter la pagination. Le client aura des informations de pagination comme suit:

{ "pagination": { "next": 1234 // extra item's ID (cursor), null if end of data. }, "items": }

Et vous pouvez demander la page suivante en utilisant le curseur:

-- Offsetting records using 1234 cursorSELECT * FROM posts WHERE id >= 1234 ORDER BY id LIMIT 11

Avantages et inconvénients de la pagination basée sur le curseur

• 👍 Bon: Plus performant, aucun compte de table
• Good Bon: Afficher les éléments en double n’est pas possible si quelqu’un insère une ligne au centre de la table
• Bad Mauvais: Impossible de passer à une page
• Bad Mauvais: Le client n’est pas libre avec l’expérience, le total de la page et la page actuelle ne sont pas calculés

Jetons un coup d’œil à certaines techniques de navigation.

L’expérience: basée sur les clics

La technique: basé sur l’offset ou basé sur le curseur

Ceci est principalement utilisé pour naviguer dans les blogs. C’est la version la plus ancienne du défilement infini. En utilisant cette approche, l’utilisateur peut ne pas savoir où se termine le contenu.

Pagination numérotée

L’expérience: basée sur les clics

La technique: basée sur l’offset

C’est le type de navigation le plus utilisable (selon moi). Il utilise une pagination basée sur le décalage qui vous permet de passer à la page que vous souhaitez, ou d’aller à la fin ou au début en un seul clic.

Google utilise ce type de navigation dans les résultats de recherche:

Charger plus

L’expérience: cliquez sur la base du déclencheur

La technique: basée sur le curseur — peut également être basée sur le décalage mais serait gênante

C’est l’une des techniques de pagination les plus récentes, et elle utilise également la version précédente de parchemins infinis.

Dans l’exemple ci-dessus, l’utilisateur clique sur le bouton « Charger plus » pour voir plus de contenu.

Parchemins infinis

L’expérience: basée sur le défilement

La technique: basée sur le curseur — peut également être basée sur le décalage mais serait TRÈS gênante

Les parchemins infinis sont la plus récente expérience des techniques de pagination basées sur le curseur.

Hugh E. Williams affirme avoir inventé infinite scroll en 2005 sur Microsoft.

Metafizzy a également créé un outil pour aider les développeurs à créer des parchemins infinis.

Arrêtez de créer des sites Web avec un défilement infini!

Jusqu’à cette section, nous avons examiné comment nous en sommes arrivés là. Parlons maintenant de pourquoi ici est nul.

Trouver le pied de page

Le pied de page est une unité très basique de l’anatomie d’une page Web, tout comme un en-tête. Les sites conservent des informations détaillées et des liens dans le pied de page, tels que les numéros de téléphone, les adresses et les liens d’aide et de support. Si les utilisateurs recherchent ces informations détaillées, ils font principalement défiler vers le bas pour trouver le pied de page.

Avec des parchemins infinis, les utilisateurs peuvent avoir du mal à trouver le pied de page. Le défilement infini rend impossible la recherche de la fin de la page. Ne pas pouvoir atteindre le bas d’un site Web peut stresser l’utilisateur (ce qui n’est pas génial).

Les sites avec un flux infini (comme Twitter) résolvent le problème du pied de page en mettant ces informations et liens requis dans la barre latérale. La barre latérale est une solution à ce problème, mais pas une bonne. Le pied de page doit rester sur le pied de page.

N’utilisez pas le défilement infini si vous n’avez pas de chronologie ou de flux

Les applications de médias sociaux fonctionnent avec le temps. L’intention des utilisateurs est de naviguer dans le passé. Dans ce cas, le défilement infini facilite la navigation. Ici, le défilement infini est bon pour les performances, en particulier dans le mobile.

Mais si vous avez un site de commerce électronique, des actualités, un magazine ou un site de blog, et que l’intention de l’utilisateur est de se déplacer autour des articles ou des articles, le défilement infini devient un cauchemar pour eux. Dans une liste basée sur une chronologie, les gens ne recherchent généralement pas de date ou de moment unique. Sur les listes basées sur des éléments, l’utilisateur souhaite trouver un élément. Des parchemins infinis rendent vos objets presque impossibles à trouver pour vos utilisateurs.

Donner aux utilisateurs plus de contrôle

Les utilisateurs n’aiment généralement pas les interfaces utilisateur lorsqu’ils estiment ne pas pouvoir les contrôler.

Un événement de défilement n’est pas très intentionnel pour faire quelque chose. Les gens naviguent sur la page et, s’ils veulent appeler une action, ils cliquent ou touchent principalement (appelés déclencheurs). Ils informent l’interface utilisateur de leur décision. Mais le défilement est déclenché sans aucune décision.

Les parchemins infinis rendent les pages moins contrôlables pour les utilisateurs. Les utilisateurs peuvent également rencontrer des problèmes de saut.

Au lieu d’un défilement infini, placez un bouton « charger plus », qui est un déclencheur. Cela donnera le contrôle à l’utilisateur. (Je préférerais la pagination numérotée à l’ancienne, mais nous supposons que nous utilisons la pagination basée sur le curseur en ce moment).

Permettre aux utilisateurs d’aller où ils veulent

Les gens naviguent entre les pages, marquent certaines d’entre elles, partagent des pages avec leurs amis, etc.

Cependant, les parchemins infinis ne peuvent pas conserver l’état par sa conception. Les utilisateurs ne peuvent pas partager leur état actuel, ce qui signifie également que vous ne pouvez pas suivre les actions des utilisateurs à l’aide d’outils d’analyse.

Si votre technique de pagination back-end est basée sur le curseur, il est presque impossible de permettre à vos utilisateurs d’aller où qu’ils se trouvent. Si vous avez un site Web de commerce électronique, donnez aux utilisateurs le contrôle de naviguer vers les produits qu’ils souhaitent.

De plus, si vous avez une fonctionnalité « trier par » dans votre annonce, vous devez afficher une pagination à l’utilisateur. Dans une liste ordonnée par ordre alphabétique, vous ne devez pas forcer les utilisateurs à faire défiler vers le bas les produits commençant par K. Ils deviendront fous avec cette expérience.

Vous devez permettre aux utilisateurs de voir où ils se trouvent. Les utilisateurs défilent pendant un certain temps et, comme il s’agit d’un design sans état, ils ne savent pas combien de fois la « page suivante » est chargée. Lorsqu’ils actualisent la page, ils reviennent à la page d’origine. L’utilisateur devra ensuite faire défiler vers le bas pour trouver où il se trouvait auparavant.

Conclusion

Les parchemins infinis sont agréables dans quelques cas, mais ils ne sont généralement pas des résolveurs de problèmes, mais des créateurs de problèmes. Les utilisateurs UX ne devraient pas considérer le défilement infini comme une solution miracle pour résoudre leurs problèmes de pagination. Arrêtez de créer des sites Web avec un défilement infini.