Eviter les problèmes liés à la pagination

Toute personne ayant déjà scrollée en bas d’une page s’est forcément retrouvée nez à nez avec la pagination. La pagination est un élément de l’interface utilisateur qui divise le contenu en plusieurs pages. Il intervient lorsque le contenu à afficher est trop long et surchargé. Mais l’utilisation de la pagination par les internautes est parfois problématique si elle est mal conçue.

Arrêtez d’avoir des pages trop courtes !

Une page web n’est pas une page de livre. La taille d’un livre limite le contenu à la taille de sa page mais une page web à une hauteur infinie et peut contenir autant de contenu que nécessite le site. Evidemment, ceci reste théorique, et charger l’intégralité d’un site sur une seule page n’a pas de sens et ralentirais considérablement l’affichage des pages web. La bande passante étant un problème récurrent pour les éditeurs de site, ils doivent composer avec cette problématique et l’affichage des informations.

Le problème est que la plupart des sites affichent peu de contenu à cause de pages trop courtes. En augmentant la taille des pages sans pour autant compromettre le temps de chargement, les utilisateurs devraient moins utiliser la pagination et ainsi parcourir le contenu plus efficacement. Il est toujours plus facile de scroller que de cliquer sur un lien, attendre que la page se charge et reprendre sa lecture.

Explication de la différence entre la pagination et le scroll

Afin d’améliorer l’expérience utilisateur, il est préférable de privilégier le scroll au clic. Aujourd’hui, les souris, les trackpads et les écrans tactiles permettent de naviguer dans une pages plus facilement et plus rapidement qu’avec des clics. En effet, pour atteindre une page dans un module de pagination, l’utilisateur doit trouver le bouton, pointer la souris dessus, cliquer et attendre le chargement. Cette série d’action nuit à la navigation alors qu’un simple mouvement du doigt sur la souris permet d’arriver au même résultat. L’efficience du scroll est optimale. Aucun délai d’attente et le contenu s’affiche de façon optimal sans effort.

Afin de définir la bonne taille en hauteur d’une page, reportez-vous à la bar de scroll sur la droite des navigateurs :

Trois bar de scroll

Cet équilibre est à mettre en parallèle avec le temps de chargement qui, lui aussi ne doit pas être trop important.

Proposez aux utilisateurs des filtres

Certaines paginations sont si importantes que le nombre de pages se compte en centaine ! Aucun internaute normalement constitué parcourra votre site de la page 1 à la page 100. C’est pour cette raison que vous ne devez pas afficher le contenu comme un archivage sans fin. A la place, donnez la possibilité aux utilisateurs de trier, classer et organiser votre contenu. Cela lui permettra d’afficher uniquement les informations qui lui sont importantes.

Filtres de recherche

Augmentez la taille de vos appels aux clics

Beaucoup de sites sous-estiment l’importance de la taille lorsqu’il s’agit d’afficher la pagination. Cet appel au clic est la seule façon pour l’utilisateur d’accéder à la page suivante donc ne le négligez pas. Rendre ce bouton plus gros et plus visible vous permettra d’améliorer le confort des internautes. Notamment pour les boutons “Suivant” et “Précédent”.

Bouton de pagination

N’utilisez pas “1ère page” et “Dernière page”

Certains modules de pagination contiennent des liens permettant d’accéder à la dernière et première page. Ces liens sont inutiles et peuvent engendrer de la  confusion pour l’utilisateur. Souvent, ces pages sont symbolisées par une double flèche, très proche du lien permettant de passer à la page suivante. Une maladresse de la part de l’utilisateur et la page affichée ne correspondra pas à ce qu’il s’attendait.

Différentes paginations

Le lien “1ère page” et “dernière page” sont inutiles car la plupart des utilisateurs préfèrent lire le contenu chronologiquement. Il n’y a donc aucun intérêt de les emmener sur la première page tant qu’ils n’ont pas trouvés ce qu’ils cherchaient dans les anciennes pages. En effet, pour ces cas là, le moteur de recherche est bien plus indiqué.

Malgré ça, il peut être intéressant de leur proposer d’aller à la première page mais autant leur indiquer qu’il s’agit de cette page par le chiffre “1” et non par un libellé spécial.

Quand utiliser la numérotation ?

Il n’est pas nécessaire d’afficher obligatoirement une série de chiffres. Si votre pagination possède un grand nombre de pages (+ de 30), cela n’aidera pas les utilisateurs de voir combien de pages au total ils vont devoir parcourir. Cela risque même de les décourager. En revanche, si votre pagination n’excède pas un nombre raisonnable (- de 30), cela devient encourageant et l’utilisateur peut aller jusqu’au bout.

Exemple de pagination

L’exception à cette règle est destinée aux sites marchands. En effet, il est préférable d’indiquer la page, quelque soit sa situation dans la pagination, pour que l’utilisateur puisse s’y référé plus tard. Si, par exemple, l’utilisateur met la page en favoris, indiquez le numéro de la page lui permettra de mieux comprendre l’architecture de l’information.

Liste de favoris

Quand utiliser le scroll infini ?

Il n’y a que dans certaines situations que le scroll infini est vraiment efficace. Par exemple, lorsque votre contenu s’ouvre dans une fenêtre modale, la mise en place de cette technique peut s’avérer efficace. Facebook l’utilise dans ce sens. Mais si le contenu auquel accéde l’utilisateur est sur une seule et même page, cela peut être frustrant. En effet, si l’utilisateur a le malheur de cliquer sur le bouton “Précédent” du navigateur, celui-ci devra alors re-descendre et charger à nouveau les éléments apparu au fur et à mesure.

Exemple de scroll infini

L’autre problème lié au scroll infini est l’impossibilité pour l’internaute de mettre en favoris la partie du site qui lui importe. En effet, s’il quitte le site, il lui sera impossible de revenir là où il s’était arrêté. Cette technique est donc à proscrire pour les sites e-commerce qui sont sujets à ce type de pratique de la par des utilisateurs.

La pagination à l’aide des flèches du clavier

Pour l”heure, peu de sites tirent avantage de cette technique. L’utilisation des flèches du clavier offre la liberté à l’utilisateur de naviguer entre les pages sans avoir besoin de cliquer. Une simple pression sur la flèche droite du clavier mène l’internaute vers la page suivante et inversement. Cependant, indiquer à l’utilisateur que cela est possible est indispensable car cette technique est encore peu répandue. Le site Dribbble (nouvelle fenêtre) est un excellent exemple d’utilisation des raccourcis clavier.

Raccourcis clavier

En conclusion

Les problèmes liés à la paginations sont récurrents en ergonomie. Plus la plupart des utilisateur ces modules paraissent compliqués et peuvent bloquer leur navigation. Si vos pages profondes et/ou anciennes ne sont jamais consultées, cela peut être l’expression d’un problème lié à la pagination. Beaucoup de sites ne gèrent pas correctement cette navigation. En appliquant ces quelques conseils, les utilisateurs auront moins d’efforts à produire pour naviguer sur votre site.

Librement adapté de l’article : http://uxmovement.com/navigation/avoid-the-pains-of-pagination/

Vous avez aimé ? Partagez !

Newsletter

Recevez gratuitement notre newsletter mensuelle. Désinscription en 1 clic.

Ces articles peuvent vous intéresser

Classé dans :

A propos de l'auteur
Rodolphe
Responsable UX chez Testapic
Twitter Site Web

6 comments

soliles

L’idée de l’utilisation des filtres est tout à fait pertinente.
Pour un site internet de type e commerce, il est vraiment intéressant de proposer un choix rapide et clair.
Si le visiteur tape la requête “jean” dans un moteur de recherche, il y a une chance sur trois pour qu’il trouve directement ce qu’il cherche: on aura par exemple jean femme, jean homme ou jean enfant, à priori.
Le gain de temps proposé à l’internaute par l’utilisation du filtre est important: plutôt que de retaper sa requête ou de fouiller sur les menus souvent très encombrés, on améliore l’expérience du visiteur de manière sensible.
La taille des boutons suivant et précédente est aussi très important: on gagne des secondes sur une visite complète du site, le visiteur se sent à l’aise, ces deux conseils sont très utiles pour l’ergonomie d’un site web.

Contenu éditorial trop long? Les solutions apportées par la pagination | Lectures web

[…] Un article Testapic très instructif pour valoriser un contenu long avec une bonne pagination : Eviter les problèmes liés à la pagination – Testapic. […]

Arnaud Delafosse

Attention au parti pris ! Votre illustration “Accès au contenu par clic / par scroll” est incomplète.

Coté scroll, il serait honnête de mettre plutôt ceci :
1 – chargement de la page +++
2 – scroller vers le bas

Cette mode du ‘One page’ est dans certains cas responsable d’un temps de chargement extrêmement long (surtout si aucune réflexion n’a été apporté aux performances front) ce qui évidemment nuit à l’expérience utilisateur et peut être responsable d’un taux de rebond plus élevé.
Comme souvent… “It depends”

A.

Top 10 des articles de 2013 sur l'ergonomie et les tests utilisateurs - Testapic

[…] Eviter les problèmes liés à la pagination […]

Véronique

Bonjour,

L’article date un peu mais je tente quand même.

Vous indiquez “Aucun internaute normalement constitué parcourra votre site de la page 1 à la page 100”.
Ben si : un demandeur d’emploi par exemple, qui aurait bien aimé, parce qu’il a l’obligation de traçabilité dans sa recherche d’emploi, que les informaticiens puissent éviter d’appliquer à la lettre vos recommandations dans la refonte du site pole emploi.

Je m’explique :
Dans la mesure où je n’aime pas les doublons, de relire une offre plusieurs fois (et d’éviter de répondre plusieurs fois à une offre), j’aimais pouvoir visualiser les offres par dates avec l’option “la plus ancienne à la plus récente”. Aujourd’hui cette fonction n’est plus active. A la place, nous avons une interface, certes agréable, mais peu pratique. Les dates ont disparu pour des “publié aujourd’hui”, “publié hier” “publié il y a 3 jours” … et un joli bouton (positionné après une dizaine d’offres qui porte le doux nom de “afficher plus d’offres”) sur lequel il m’a fallu cliquer 16 fois (oui …) pour réussir à me caler sur les offres d’emploi émises le 3 mars (parce que j’avais noté ne pas avoir bien approfondi les offres d’emploi de ce jour précis).

Alors question : comment puis-je avoir l’intégralité des annonces (toutes les offres donc) sans avoir à cliquer sur ce satané bouton ?

PS: le ton employé est quelque peu cynique mais pas méchant hein … j’essaie juste de trouver une solution à mon problème, s’il y en avait une, cela me faciliterait grandement la tache …

Rodolphe
Rodolphe

Bonjour Véronique,

Votre commentaire est très intéressant et soulève pour moi une autre problématique. En effet, si votre profil correspond à plus de 150 offres (je suis parti du fait qu’environ 10 offres étaient proposées par page, et vous avez du cliquer 16 fois) je pense qu’il y a un problème de pertinence (lié à l’annonce ?). Soit dans les filtres, soit dans la recherche initiale.

Toujours est-il que je vous rejoins sur le fait que cliquer 16 fois sur un bouton pour être certain de ne pas passer à côté d’une information (une offre d’emploi dans votre cas) est anormal et révèle un problème de conception.

La proposition d’afficher toutes les annonces sur une page est une solution mais cela présente des limites techniques (afficher toutes les offres disponibles sur Paris me parait risqué en terme de performances). Une vraie recherche et un développement adaptés doivent être mis en place pour répondre aux besoins de cette partie du site de Pole Emploi.

Commenter

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *