Tout savoir sur la navigation page à page

Comme tout internaute lambda vous devez forcément avoir été confronté un jour ou l’autre à un système de navigation page à page. Mais si enfin, ne serait-ce qu’en bas de page de résultats de Google :

GooglePagination (1)

 

Je vous propose dans ce contexte de découvrir un article très complet sur la navigation page à page : Pagination Gallery: Examples And Good Practices.

Voici les meilleures pratiques identifiées par l’auteur :

  1. Proposer de larges zones cliquables ;
  2. N’utilisez pas le soulignement des liens (recommandation à nuancer) ;
  3. Identifier de façon évidente la page en cours de lecture ;
  4. Espacer les liens ;
  5. Fournir des liens ‘Suivant‘ et ‘Précédent‘ ;
  6. Fournir des liens ‘Premier‘ et ‘Dernier‘ (si pertinent, c’est à dire en cas de très grosse pagination) ;
  7. Positionnez les liens ‘Premier‘ et ‘Dernier‘ aux extrémité.

L’article est en prime illustré avec une galerie très complète de copies d’écrans. Mes deux préférés sont les paginations de Digg et de MSDN :

DiggPagination

MsdnPagination

 

 

Et vous, quels sont vos exemples préférés ?

30 commentaires sur “Tout savoir sur la navigation page à page

  1. Personnellement, j’adore celui de overture21, seulement j’y ajouterais un champ de saisi pour aller a la page voulue s’il y a + de 15 pages. Et biensur, je le rendrais un peu plus visible.

  2. Je dois dire qu’il n’est pas difficile de réaliser une telle navigation. Ca relève davantage du bon sens que d’une vraie réflexion. Tout webdesigner ayant rencontré une navigation page à page comme celle de Digg a compris (enfin j’espère) qu’il est difficile de faire mieux en terme de simplicité et d’ergonomie : gros liens, différenciation nette, intuitivité.

    PS: Smashing Magazine est un excellent site. Même si certains articles sont pas indispensables, la quantité et la qualité sont au rendez-vous.

  3. J’ajouterais une autre bonne pratique : ajouter dans le head de la page des liens relatifs : link rel= »next » ; « prev » ; « first » ; « last »

  4. Sans entrer dans la polémique, je trouve que le pattern de pagination est parfois utilisé à tort et à travers. Vous allez me dire tout les patterns! Je pense qu’il faut toujours se poser la question du choix entre la pagination et la navigation en continu.

  5. Il y a une recommandation qui manque à mon sens :

    – Positionner une zone de navigation en haut de la page, et faire en sorte que les boutons Précédents et Suivants soient toujours positionnés au meme endroit, de sorte qu’on puisse cliquer dessus successivement sans bouger la souris. Variante : positionner le focus sur Suivant à l’entrée de la page, ce qui permet de naviguer au clavier en pressant Entrée.

  6. Cette pagination est selon le plus efficace:

    – Bouton clairement définis de même style que les boutons d’actions se retrouvant dans les pages
    – Texte en 12px
    – Zone cliquable d’une bonne grandeur et le fait d’avoir les liens soulignés est beaucoup plus intuitif et naturel
    – Nous savons comment aller à la première et dernière page intuitivement (sans dire le dire explicitement)
    – Nous savons clairement où nous sommes

  7. Pour ma part au niveau graphique je préfere nettement celle de digg …

    Plus généralement, la pagination pose aussi beaucoup de pbm de référencement (duplicate sur la page 1 qui a TRES souvent deux url différentes), nombre innombrable de liens qui pointent sur la même page ….

    Ayant mis en oeuvre des préconisations de référencement sur un site a gros traffic, je me suis rendu compte que la pagination n’est pas du tout annodine …

  8. @ vincent.b

    C’est très important, t’as raison. Ce qui est dommage, c’est que souvent, il faut scroller pour voir le contenu (qui se trouve au milieu de la page), et en cliquant sur le bouton suivant, on retombe en haut de la page et donc on ne voit pas le contenu. Obligé donc de re-scroller, et donc de bouger la souris.

    Le focus sur Suivant serait bien pratique en effet, si il est clairement indiqué.

  9. vincent b > entièrement d’accord avec toi, c’est justement ce que j’allais dire :)
    Je suis tellement maniaque à ce niveau là, que si je suis obligé de bouger la sourie entre 2 page, je ne vais pas très loin dans la recherche, car trop agacé.

    bbx > C’est là qu’on se rends compte que la molette est une belle invention. De même si la navigation est uniquement en bas de page, je scroll avec la molette pour retomber pile sur le bouton « suivant » sans avoir a bouger la sourie.

    Enfin, j’aime beaucoup l’exemple de Erweiterungen.de, avec un menu déroulant sur le bouton « … » Car la navigation entre 2 pages éloignés n’est pas toujours facile.

  10. Je comprends la pertinence de certains conseils dans ce domaine mais quand je lis de telles évidences comme les « good practices by Faruk Ates », je me dis que ce type de consultants serait capable d’écrire des bouquins sur l’utilité essentielle des poignées de portes ou des interrupteurs électriques. A un moment on a compris non ? …

  11. J’ai du réfléchir à la question pour le CRT Midi Pyrénées et les listes de résultats de ses moteurs de recherche. Boutons un peu petit pour que Fred revoit sa fav.List ?
    Il me semble qu’avec xForms il est possible de faire une barre de navigation sur laquelle un curseur glisse pour indiquer la position de la page visible dans le process en cours.

  12. Un bon exemple : http://www.motorlegend.com/essai-voiture/pgo-cevennes/2,14461.html.

    Voilà une « vraie » pagination avec un sommaire aux pages identifiées par un type de contenu (« Présentation » ; « design » ; « habitacle »), identification que nous retrouvons en bas d’article.
    Cela permet un suivi logique dans la lecture.

    Certes il ne s’agit pas d’une pagination d’un résultat de recherche, mais justement : il faut adapter la pagination au contexte.

  13. Heuu … personne ne parle d’au moins afficher le nombre de pages !
    Par exemple, je trouve beaucoup plus agréable de savoir vers combien de pages je m’oriente …
    Par exemple :

    [ 1 2 3 4 5 … 90 91 92 ]

    Ceci à deux conséquences non négligeables :
    – s’y retrouver
    – permettre d’affiner sa recherche si elle retourne trop de résultats (déjà en prendre conscience).

    Le nec plus ultra, utiliser dans la css, les liens déjà parcourus (propriété jamais utilisé) de façon a identifier facilement les pages déjà visitées.

  14. @ Cedric : en cliquant directement, on tombe sur une page 404. Faut juste ajouter un espace entre le point et l’url. ;)

    La pagination dont tu parles est présente souvent sur les articles de hardware, avec 10 pages par exemple, 1 Présentation 2 Caractéristiques 3… 10 Conclusion.

    Il y a cependant certains sites qui abusent de ce système pour scinder un article pas particulièrement long en plusieurs parties histoire d’obliger l’internaute à recharger la page et donc à se retaper toutes les pubs.

  15. Malheureusement certains sites affichant « 1 [2] 3 4 5 Next >> » utilisent « Next >> » pour envoyer sur la page 6, et d’autres pour envoyer sur la page 3…

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s