La pagination est l’un de ces petits besoins de conception qui est souvent ignoré. Mais pour les blogs et autres sites riches en contenu, il fournit un moyen de navigation important. Un menu bien conçu peut encourager les utilisateurs à explorer davantage ce qu’il a à offrir.
Croyez-le ou non, il y a des designers qui osent porter la pagination au niveau supérieur. Voici quelques extraits de code très créatifs que vous pouvez utiliser pour améliorer votre propre site Web.
Effets de défilement simples et intuitifs
Notre premier exemple montre comment certains effets de défilement de base peuvent améliorer considérablement la pagination standard. Un soulignement ultra-lisse qui suit le curseur offre une expérience beaucoup plus intuitive. De plus, l’ensemble du menu est très facile à lire. Il s’agit d’un moyen simple d’aider les utilisateurs.
Compte actif
L’une des parties les plus frustrantes de la pagination peut être la façon dont les menus gèrent un grand nombre de pages. Cet extrait de code utilise jQuery pour se regrouper automatiquement afin d’afficher les numéros de page adjacents lorsque vous cliquez dessus. C’est un moyen beaucoup plus simple d’explorer un site Web.
L’évier de la cuisine
Voici un concept très intéressant. Conçue pour être réactive et plus accessible, cette interface utilisateur de pagination contient plusieurs façons de naviguer, y compris via le clavier. La barre de chronologie en haut identifie clairement la page actuelle et offre un excellent aperçu de tout ce qui est disponible.
Laissez le Yeti s’en occuper
Ils disent qu’il est difficile de trouver une bonne aide. Mais cet extrait fournit l’aide d’un yéti (au moins une main yéti) en cliquant sur les chiffres sur la page. Bien que les yétis ne correspondent peut-être pas à son motif, c’est un exemple de la façon dont nous pouvons ajouter l’élément d’amusement (et de surprise).
Amélioré pour les écrans mobiles
Sur des écrans plus petits, la pagination peut être extrêmement difficile à utiliser. Les éléments de navigation sont généralement très petits et difficiles à lire. Cet extrait de code constitue une excellente alternative pour les appareils mobiles. Chaque élément est plus grand, car la navigation s’étend verticalement. Le résultat est que les utilisateurs d’appareils mobiles peuvent se déplacer sans plisser les yeux ni zoomer.
Aucun numéro requis
Parfois, nous n’avons pas besoin de numéroter tous les éléments 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 à travers différents panneaux de contenu.
Touche amicale
L’interface utilisateur mobile fonctionne mieux lorsqu’elle réagit au toucher de l’utilisateur. Ici, nous avons une pagination qui permet à l’utilisateur de glisser pour accéder à l’élément suivant ou précédent. Ce peu de commodité peut faire une différence en termes de convivialité.
Combinaison infinie de défilement / pagination
Les concepteurs utilisent souvent le défilement infini pour remplacer la pagination. Mais c’est un concept clair de la façon dont ils peuvent être combinés. La frustration du défilement infini est qu’il peut être difficile de revenir en arrière et de trouver cet élément spécifique dans une longue liste. Ce script ajoute de nouveaux numéros de page à la navigation alors qu’il continue de défiler vers le bas, ce qui facilite un peu le retour.
Recherche avancée
Une excellente conception de sites Web n’ignore pas les différents éléments qui composent une page. Les professionnels précédents montrent que la pagination a plus à offrir lorsque vous vous efforcez de l’améliorer. Laissez-vous inspirer par ces exemples et créez des menus de pagination qui ont l’air et fonctionnent mieux.
