La pagination est l’un de ces petits besoins de conception qui est souvent ignor\u00e9. Mais pour les blogs et autres sites riches en contenu, il fournit un moyen de navigation important. Un menu bien con\u00e7u peut encourager les utilisateurs \u00e0 explorer davantage ce qu’il a \u00e0 offrir.<\/p>\n
Croyez-le ou non, il y a des designers qui osent porter la pagination au niveau sup\u00e9rieur. Voici quelques extraits de code tr\u00e8s cr\u00e9atifs que vous pouvez utiliser pour am\u00e9liorer votre propre site Web.<\/p>\n
Notre premier exemple montre comment certains effets de d\u00e9filement de base peuvent am\u00e9liorer consid\u00e9rablement la pagination standard. Un soulignement ultra-lisse qui suit le curseur offre une exp\u00e9rience beaucoup plus intuitive. De plus, l’ensemble du menu est tr\u00e8s facile \u00e0 lire. Il s’agit d’un moyen simple d’aider les utilisateurs.<\/p>\n
L’une des parties les plus frustrantes de la pagination peut \u00eatre la fa\u00e7on dont les menus g\u00e8rent un grand nombre de pages. Cet extrait de code utilise jQuery pour se regrouper automatiquement afin d’afficher les num\u00e9ros de page adjacents lorsque vous cliquez dessus. C’est un moyen beaucoup plus simple d’explorer un site Web.<\/p>\n
Voici un concept tr\u00e8s int\u00e9ressant. Con\u00e7ue pour \u00eatre r\u00e9active et plus accessible, cette interface utilisateur de pagination contient plusieurs fa\u00e7ons de naviguer, y compris via le clavier. La barre de chronologie en haut identifie clairement la page actuelle et offre un excellent aper\u00e7u de tout ce qui est disponible.<\/p>\n
Ils disent qu’il est difficile de trouver une bonne aide. Mais cet extrait fournit l’aide d’un y\u00e9ti (au moins une main y\u00e9ti) en cliquant sur les chiffres sur la page. Bien que les y\u00e9tis ne correspondent peut-\u00eatre pas \u00e0 son motif, c’est un exemple de la fa\u00e7on dont nous pouvons ajouter l’\u00e9l\u00e9ment d’amusement (et de surprise).<\/p>\n
Sur des \u00e9crans plus petits, la pagination peut \u00eatre extr\u00eamement difficile \u00e0 utiliser. Les \u00e9l\u00e9ments de navigation sont g\u00e9n\u00e9ralement tr\u00e8s petits et difficiles \u00e0 lire. Cet extrait de code constitue une excellente alternative pour les appareils mobiles. Chaque \u00e9l\u00e9ment est plus grand, car la navigation s’\u00e9tend verticalement. Le r\u00e9sultat est que les utilisateurs d’appareils mobiles peuvent se d\u00e9placer sans plisser les yeux ni zoomer.<\/p>\n
Parfois, nous n’avons pas besoin de num\u00e9roter tous les \u00e9l\u00e9ments de la pagination. Cet exemple est joliment minimal avec l’utilisation de points au lieu de nombres. C’est une bonne solution pour les diaporamas ou pour naviguer \u00e0 travers diff\u00e9rents panneaux de contenu.<\/p>\n
L’interface utilisateur mobile fonctionne mieux lorsqu’elle r\u00e9agit au toucher de l’utilisateur. Ici, nous avons une pagination qui permet \u00e0 l’utilisateur de glisser pour acc\u00e9der \u00e0 l’\u00e9l\u00e9ment suivant ou pr\u00e9c\u00e9dent. Ce peu de commodit\u00e9 peut faire une diff\u00e9rence en termes de convivialit\u00e9.<\/p>\n
Les concepteurs utilisent souvent le d\u00e9filement infini pour remplacer la pagination. Mais c’est un concept clair de la fa\u00e7on dont ils peuvent \u00eatre combin\u00e9s. La frustration du d\u00e9filement infini est qu’il peut \u00eatre difficile de revenir en arri\u00e8re et de trouver cet \u00e9l\u00e9ment sp\u00e9cifique dans une longue liste. Ce script ajoute de nouveaux num\u00e9ros de page \u00e0 la navigation alors qu’il continue de d\u00e9filer vers le bas, ce qui facilite un peu le retour.<\/p>\n
Une excellente conception de sites Web n’ignore pas les diff\u00e9rents \u00e9l\u00e9ments qui composent une page. Les professionnels pr\u00e9c\u00e9dents montrent que la pagination a plus \u00e0 offrir lorsque vous vous efforcez de l’am\u00e9liorer. Laissez-vous inspirer par ces exemples et cr\u00e9ez des menus de pagination qui ont l’air et fonctionnent mieux.<\/p>\n