pomdoo

Du bon design de la pagination

16 juillet 2007 :: Par Fay dans Design - Traductions

[Traduction de l'article original Pagination 101 de Faruk Ateş]

Il y a un élément qui fait partie des plus souvent négligés d’un site web et qui est pourtant facilement perfectible, il s’agit de ses éléments de pagination. La plupart du temps, ce n’est qu’après-coup que l’on s’en occupe. C’est rare que je tombe sur un site web avec une pagination acceptable, et je me demande toujours pourquoi tellement peu de gens réussissent cet aspect. Après tout, il me semble que c’est plutôt facile de ne pas se tromper en matière de pagination. Hélas, en pratique, c’est loin d’être le cas, alors après les encouragements de Chris Messina sur Flickr, j’ai donc décidé d’écrire mon article sur la question, en espérant qu’il vous donnera des éléments sur ce qui fait une bonne pagination.

Avant d’entrer dans le vif du sujet et d’analyser ce qui fait qu’une pagination est bonne ou mauvaise, je voudrais expliquer ce que j’entends par pagination exactement: la pagination c’est tout système de contrôle qui permet à l’utilisateur de naviguer dans des pages de résultats, des archives, ou tout autre type de contenu en série. Les résultats de recherche en sont un exemple évident, mais il est toujours bon de comprendre que la pagination existe aussi sur les blogs (liens Précédent/Suivant, dont certains blogs disposent), dans les forums de discussion et — en particulier — dans les webcomics (bandes dessinées en ligne).

L’importance de la pagination est subjective; car elle dépend également du contenu. Pour les résultats de recherche de Google ou de Yahoo, la pagination est assez importante car bien qu’ils veuillent vous donner exactement ce que vous cherchez dans les 10 ou 20 premiers résultats, il arrive très fréquemment que vous soyez obligés de passer au crible plusieurs pages consécutives. Pour une webcomic, cela n’a pas de sens de sauter vers la « page 7″ quand vous vous trouvez sur la page 2; tout ce que vous voulez, c’est aller facilement à la suivante. Ainsi la pagination dépend du contenu, mais il faut noter que les principes de base d’une bonne pagination s’appliquent quels que soient le contenu ou le contexte.

Les règles d’une bonne pagination

Faire une bonne pagination ce n’est pas compliqué. Franchement, souvenez-vous simplement des conseils de bases qui suivent, et ça devrait aller. Nous jetterons un oeil à une palette d’exemples après ça, pour voir que l’on peut apprendre beaucoup des designs de pagination que l’on trouve sur des sites web populaires.

1. Faites des zones cliquables suffisamment grandes

C’est une règle valable pour n’importe quel type de lien navigationnel, que ce soit un lien de menu ou un lien de pagination, mais dans ce dernier contexte, c’est peut-être encore plus pertinent. Souvent, la pagination est laissée de côté pendant toute la phase de design et elle se retrouve dans un coin quelque part au-dessus ou en-dessous des zones de contenu, de toute évidence sans qu’on n’y ait beaucoup réfléchi. L’un des problèmes majeurs qui en résulte, c’est que les liens de pagination deviennent des zones cliquables toutes petites, pas plus grandes que les numéros de pages eux-mêmes. Pour les rendre plus efficaces et user-friendly, concoctez-leur un design visuel convenable et donnez à chaque lien une zone cliquable large, visuellement c’est identifiable. Par large, on entend « deux fois la largeur du numéro, et 1,5 fois sa hauteur. »

2. N’utilisez pas de soulignement

Le soulignement pour les liens c’est généralement une bonne idée, puisque les utilisateurs sont plus habitués avec les liens qui sont soulignés, mais en ce qui concerne les liens de pagination, comme les liens de menu principal (évident), le soulignement est inutile. Les gens savent que les numéros de page sur le web sont cliquables (et s’ils ne le sont pas, qu’est-ce qu’ils font là ?)

3. Identifiez la page courante

Rendez la page courante immédiatement identifiable pour l’utilisateur; elle ne doit pas être cliquable, elle ne doit contenir aucune sorte d’état survolé (« a:hover ») et (idéalement) elle devrait être entourée de balises <em> ou <strong>. Le style de la page courante doit être suffisamment différent de celui des autres pages, pour qu’un utilisateur puisse facilement repérer où il se trouve.

4. Espacez les liens de page

Proposez suffisamment d’espace entre chaque lien de page afin qu’un utilisateur ne clique pas accidentellement sur le mauvais numéro de page. Dans ce cas, un bon design visuel peut vous faciliter la tâche.

5. Fournissez des liens Précédent et Suivant

Dans pratiquement n’importe quel contexte où la pagination existe ou peut exister, les liens Précédent et Suivant sont toujours utiles. Alors proposez-les. Toutefois, séparez-les clairement des numéros de page et donnez-leur suffisamment de distance ou de style propre pour qu’ils ne soient pas confondus avec une page; c’est particulièrement pertinent si vous utilisez des flêches au lieu de texte pour Précédent et Suivant.

6. Utilisez les liens Premier et Dernier (quand c’est utile)

Quand on navigue à travers des résultats de pages à l’extérieur de l’une ou l’autre limite (ou est-ce plutôt à l’intérieur?), proposez des liens Premier, Dernier, ou les deux à la fois, selon ce qui est le plus approprié. Pour les webcomics, ce qui est approprié, c’est de toujours proposer les deux liens, tout en désactivant le lien correspondant quand l’utilisateur est sur la Première ou la Dernière page. Faites en sorte qu’il soit visible comme option de texte uniquement, sans lien, sans cliquabilité, mais gardez-le dans le design. Cela s’applique aux webcomics seulement, pas nécessairement pour les autres formes de pagination.

7. Placez Premier et Dernier à l’extérieur

Rien de plus contre-intuitif qu’un lien Dernier suivi par un lien Suivant. Prenez plutôt l’exemple des chaînes hi-fi: « fast-forward » (accéléré) est suivi de « next (track) » (morceau suivant), parce que c’est une étape qui remplace et annule la précédente. Les boutons sont ordonnés du centre vers l’extérieur, et les éléments de pagination ne sont pas très différents (ou dans certains cas, pas du tout différents), et devraient ainsi suivre la même règle de base.
«Première ‹Précédente Courante Suivante› Dernière»

Quelques exemples, bons et mauvais

Nous voilà donc avec sept règles simples mais claires comme référence, regardons comment certains sites font leur pagination et voyons ce que nous pouvons en apprendre. Commençons par celui qui je crois est le plus connu de tous: les résultats de recherche de Google.

Aussi mignon que cela puisse être d’étirer le « oo » de « Google » pour l’aligner avec le nombre de pages, cela créé un problème en ceci que les liens de page sont un peu trop proches pour une sélection aisée. Vous avez déjà essayé de naviguer en cliquant sur les O au lieu de cliquer sur les numéros? Ce n’est pas du tout pratique. Avec la dixième et la onzième page, c’est particulièrement frappant. Les liens Précédent et Suivant de Google, par contre, sont fantastiques — clairement séparés et avec un contraste visuel assez prononcé par rapport aux liens de la page normale. Les liens ont malheureusement tous des soulignements, ce qui créé une impression de fouillis, ce qui, à nouveau, rend les numéros de pages à deux chiffres très difficiles à distinguer les uns des autres. Les zones cliquables des numéros sont minuscules, et les O ne sont pas faciles à utiliser.

Maintenant, Google a fait une autre pagination ailleurs, qui est la pagination qui a suscité tout cela:

Cette fois, les liens Précédent et Suivant ne sont pas très différents — rien qu’une simple différence de font-weight — et les liens de pages, bien que plus grands que l’habituel lien de résultats de recherche, sont toujours des zones cliquables minuscules qui sont encombrées dès lors que ce sont des nombres à deux chiffres qui sont concernés. La page courante est assez facilement identifiable, mais pourquoi diable est-elle décalée vers le bas? Une ligne de base (baseline) cohérente aurait été utile (c’est également le cas dans le premier exemple).

Overture utilise une approche légèrement différente: aucun numéro de page n’est cliquable, mais vous pouvez voir sur quelle page vous vous trouvez et combien de pages il y a au total. Les liens Premier et Précédent sont présents comme le texte normal, afin que la navigation soit uniforme quelle que soit la page sur laquelle l’utilisateur se trouve. Le fait que seuls Précédent et Suivant aient une flêche est une bonne idée, cela les rend plus incitatifs pour l’utilisateur, et le scénario le plus vraisemblable pour Overture c’est qu’un utilisateur veut aller à la page suivante ou précédente, pas sur la première ni la dernière.

Veer fait aussi quelque chose d’intéressant: des boutons flêches simples (mais frustrants tellement ils sont petits) Précédent et Suivant pour naviguer parmi les pages, disposés autour des numéros de pages courante et totales; une liste déroulante pour le nombre de résultats que vous voulez par page et un champ texte pour sauter directement à n’importe quelle page. L’inconvénient d’une liste déroulante (balise <select>) c’est qu’elle n’apparaît pas de la même façon dans tous les navigateurs, ce qui donne une impression un peu incohérente et fouillis de toute la zone de pagination. Cela manque aussi d’un alignement vertical (baseline) uniforme à cause des éléments de formulaire et des boutons qui sont bizarrement conçus (les textes dans les boutons d’images ne sont pas alignés au texte qui se trouve à l’extérieur). Cette seule section a cinq baselines différentes à la fois.

Design Snack utilise des flêches pour les boutons Premier, Précédent, Suivant et Dernier, mais de légères différences entre Premier et Précédent, et entre Suivant et Dernier auraient été bénéfiques. Les boutons Premier et Dernier auraient pu être plus larges, par exemple, pour éviter toute confusion. De même, la page courante est à peine distincte des autres pages, selon vos paramètres de couleur. Un bon signe c’est le détachement des numéros de pages des autres liens.

Upcoming a une pagination pour ses suggestion boards, et alors que les pages ont finalement de larges zones cliquables, la page courante ressemble toujours à un lien activable. Remarquez, d’un autre côté, l’impression de netteté rendue par l’absence de soulignement et la présence d’un espacement décent entre les liens.

I’m In Like With You est un tout nouveau site qui peut être décrit comme un site de flirt en ligne, ou si vous me passez le terme, un « site de rencontres Web 2.0″. Pensez eBay + rencontres + Web 2.0 + réseaux sociaux. Toutefois, la pagination souffre d’un grave « syndrome de l’après-coup »: excepté le dernier numéro de page qui surgit avec une ellipse devant lui, il semble qu’il n’y ait absolument aucune espèce de design dédié à la pagination. La pagination est reléguée très discrètement dans un coin, les liens de page sont trop rapprochés, ils sont soulignés, il n’y a pas de grandes zones cliquables — toute la panoplie des signes classiques, en fait.

La pagination de Slate se situe vers la droite avec des zones cliquables plus larges (mais pas encore assez) et pas de soulignement, mais les numéros de pages sont littéralement coincés les uns contre les autres.

C’est peut-être la meilleure pagination que j’ai vue, et c’est celle de Flickr: de larges zones cliquables, une page courante facile à identifier, des liens Précédent et Suivant détachés avec des flêches, et au lieu de liens Premier et Dernier, ils ont fait en sorte que les premiers et les derniers liens fassent partie des numéros de page avec des ellipses qui les séparent de la série de numéros sur laquelle vous êtes. En dessous, on trouve le nombre total de photos. Le seul bémol que je mettrais, ce serait le manque d’espacement, mais j’ai le sentiment qu’avec les effets survolés des liens, c’est même inutile.

La pagination de Virb est très similaire à celle de Flickr et reçoit le même signe de tête approbateur.

Chris a déjà esquissé quelques commentaires sur celui-ci, mais la pagination de Magnolia manque de clarté; des zones cliquables minuscules, quasiment pas de différence entre la page courante et les autres liens de page, et l’ensemble a vraiment l’air d’avoir été pensé a posteriori.

Twitter ne propose pas vraiment de pagination, seulement deux liens pour naviguer page après page. Les liens sont soulignés et sentent l’après-coup à plein nez, en particulier avec cette barre noire qui les sépare, ce qui ajoute au fouillis au lieu de faire un peu le ménage. Si la barre avait été d’une couleur deux fois plus claire, cela aurait fonctionné beaucoup mieux, ou alors, avec plus d’espace tout autour. Dans l’ensemble, toutefois, un design visuel approprié pourrait rendre ces liens beaucoup plus user-friendly.

Ces deux contrôles de pagination viennent de LiveJournal (en haut) et de Engadget (en bas). Les deux ne proposent pas de pagination à part une simple navigation entre les pages Suivante / Précédente (dans le cas de LiveJournal, le propriétaire du journal que vous parcourez peut spécifier le nombre d’entrées, qui par défaut est fixé à 20 mais qui peut être ramené à 1, par exemple). Le problème c’est que LiveJournal a une perspective différente de celle de Engadget avec son option entrées-par-page: avec LiveJournal, pour consulter d’anciennes entrées, il vous faut activer le lien « Précédent ## »; avec Engadget, pour consulter d’anciennes entrées, il faut cliquer sur le lien « Page Suivante ». Cette contradiction est déroutante pour n’importe qui visite régulièrement des sites avec des approches incompatibles; une des solutions serait d’être plus spécifique: « Entrées plus anciennes » au lieu de « Page suivante » rendrait les choses plus claires quant à la direction du lien, dans tous les cas.

Personnellement, je trouve que l’approche de Engadget manque d’intuitivité: cliquer sur « Page suivante » pour aller sur une page avec des entrées antérieures (et cliquer sur « Page précédente » pour aller sur une page avec des entrées postérieures)? C’est sûr, c’est bien la « page suivante » des entrées en général, mais toujours est-il qu’elles restent des entrées précédentes, et pas des « entrées suivantes ». Et ça, pour moi, ça montre qu’on n’y a pas suffisamment réfléchi, sauf que maintenant ils sont coincés avec ça (tout comme je crois que c’est simplement un défaut de Weblogs, Inc.).

A présent, jetons un oeil à quelques webcomics.

A part que le site est toujours un peu cassé depuis son redesign fait il y a longtemps, Ctrl-Alt-Del online a une pagination plutôt décente. Les boutons sont suffisamment grands pour être facilement cliquables, mais les liens Premier et Dernier sont à l’intérieur des liens Précédent/Suivant, ce qui rend la chose plutôt contre-intuitive si vous lisez également beaucoup d’autres webcomics qui n’ont pas cette faille, ou si vous passez du temps à farfouiller dans les pages de résultats de n’importe quel site.

VGCats a le même problème.

Least I Could Do a une bonne pagination, le site utilise correctement la configuration Premier/Précédent et Suivant/Dernier avec de larges zones cliquables et un état survolé des liens acceptable, mais les liens Suivant et Dernier restent des liens, même si vous êtes sur la toute dernière comic; mauvaise interface utilisateur. En revanche, très sympa, cette distinction visuelle entre liens apparentés (qui ne sont pas des liens de pagination) qui sont toujours dans la même case visuelle: Commentaires et lien « Sauvegarder ma place », bien que son but m’échappe.

Penny Arcade a également une pagination acceptable, mais à nouveau les liens Suivant et Dernier (« Nouveau ») restent des liens même sur la toute nouvelle page. Par ailleurs, leurs boutons sont relativement grands en taille mais les textes des labels sont plutôt petits, ce qui exige plus de temps qu’il n’en faudrait pour trouver le bon lien. Enfin, la pagination ne se trouve que tout en bas du comic mais parfois leurs comics sont très grandes, ce qui exige que vous scrolliez verticalement avant de pouvoir continuer à naviguer (quelle que soit la direction dans laquelle vous allez).

Sinfest est bon en ceci que ses liens Premier et Précédent ne sont pas cliquables sur la première comic, mais par contre un lien Dernière comic fait complètement défaut; la seule façon d’obtenir la comic la plus récente c’est d’aller sur la page d’accueil, mais cela ne saute pas aux yeux (encore moins si vous arrivez sur le site via une comic spécifique, plutôt que par la page d’accueil). La police choisie, de même, ne rend pas les choses faciles en matière d’identification des trois liens de pagination, et étant donné qu’il y en a toujours seulement trois, il vous faut vraiment les lire pour pouvoir les utiliser.

AppleGeeks (personnellement, mon préféré en matière d’art et de couleurs, ces mecs ne font rien de moins que du sublime) utilise un style très différent en matière de pagination: une version vignette de la comic Précédente et Suivante (quand c’est possible). Bien que surprenante, cette approche est décidément moins intuitive à cause de l’orientation verticale et la navigation à travers les comics n’est pas toujours commode.

OK-Cancel a une super pagination: des boutons Premier, Précédent, Suivant et Dernier faciles à identifier, avec des zones cliquables larges, des liens désactivés là où ils doivent l’être, et de grands états survolés (« a:hover ») qui préviennent le besoin d’espace entre les liens.

Et enfin, il y a Questionable Content. C’est ma webcomic préférée toutes catégories depuis toujours, mais malheureusement, ce ne serait pas du luxe que la pagination soit retravaillée. Les liens textes sont vraiment petits, encore plus dans le contexte du reste de la page, avec les liens du menu principal juste au-dessus d’eux et la comic juste en-dessous. Les éléments ne ressortent tout simplement pas du tout sur la page, ce qui les rend plus difficiles à repérer et à utiliser. Il n’y a environ que 10 pixels entre les liens de pagination et les liens du menu principal, le sérif n’aide pas pour la petite taille de texte, et les liens sont toujours des liens même quand ils ne devraient pas l’être. L’un dans l’autre, de nombreuses améliorations pourraient être faites pour rendre ces éléments de pagination bien plus utilisables.

Pour terminer

Pfiou! Ça en fait des exemples! Bon il est temps de « tourner la page » maintenant, mais je vous en prie, prenez en compte les 7 règles précitées quand vous faites un site avec des contrôles de pagination. Concevez-les de façon élégante pour être sûr que vos visiteurs en retireront une expérience plaisante, et ainsi tout le monde en sera reconnaissant et heureux.

Toutes les images sont hébergées par Flickr sur les albums de Chris Messina et de moi-même, avec tous mes remerciements à Chris pour ses encouragements et son aide dans l’apport des exemples.

Tags: Webdesign