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. Le soulignement ultra-lisse qui suit votre curseur en fait 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 réel
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 s'habiller automatiquement pour afficher les numéros de page adjacents lorsque vous cliquez. C'est un moyen beaucoup plus facile de se plonger dans un site.
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 type 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'une bonne aide est difficile à trouver. Mais cet extrait fournit l'aide d'un yéti (au moins la main d'un yéti) en cliquant sur les numéros de 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 souvent trop petits et difficiles à lire. Cet extrait fournit 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 chaque élément de la pagination. Cet exemple est joliment minimal avec l'utilisation de points plutôt que de nombres. C'est une bonne solution pour les diaporamas ou pour parcourir plusieurs panneaux de contenu.
Touche amicale
L'interface utilisateur mobile fonctionne mieux lorsqu'elle réagit au toucher d'un utilisateur. Ici, nous avons une pagination qui permet à l'utilisateur de glisser pour accéder à l'élément suivant ou précédent. Cette petite commodité peut faire une différence en termes de convivialité.
Combo défilement / pagination infini
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 particulier sur une longue liste. Ce script ajoute de nouveaux numéros de page à la navigation pendant que vous continuez à faire défiler vers le bas, ce qui facilite le retour en arrière.
Faire avancer la pagination
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. Alors, inspirez-vous de ces exemples et créez des menus de pagination qui ont l'air et fonctionnent mieux.
