016 - Boutons « suivants » et

016 - Boutons « suivants » et « précédents »

L’efficacité de la simplicité, telle que tourner les pages d’un livre.

Note 4/5, coût 1/5, accessibilité 5/5 Le bouton « produit suivant » d’une liste de produits pré-sélectionnés fera gagner beaucoup de temps à votre internaute.

Exemple sur www.creasenso.com

Pour qui ?
Idéal pour présenter une suite d’illustrations, de photos, de contenus à caractère ludique, les contenus de type livre ou magazine.

Donner la possibilité à vos internautes de naviguer grâce à cette navigation en insérant des boutons « suivants » et « précédents » sur vos pages. Lorsque l’internaute clique sur le bouton « suivant », le système lui présente le contenu suivant présent dans cette catégorie. Et vice versa pour le bouton « précédent ».
L’internaute découvre le contenu sans avoir à choisir ce qu’il souhaite consulter ensuite.

Exemple sur www.dailymotion.comLes vidéos suivantes et précédentes de la liste sont accessibles en cliquant sur de gros bouton explicites.

Exemple sur www.virtueldoc.com. Les vidéos suivantes et précédentes de la liste sont accessibles en cliquant sur de gros bouton explicites.De nombreuses solutions de publication sur internet de documents de type PDF, Word, PPT sont apparues. Il facilite la navigation à l’intérieur des documents. Pour tourner les pages du document, des boutons « suivants » et « précédents » sont proposés aux internautes.

Pensez, si vous choisissez ce type de navigation, à :

afficher la navigation en insérant un pictogramme explicite associé d’un mot-clé
(par exemple : une flèche).

placer les boutons « précédents » et « suivants » toujours au même endroit afin que
l’internaute n’ait pas à bouger sa souris pour passer de page en page.

dédoubler l’affichage des boutons « suivants » et « précédents » en haut et en bas de la page afin que les internautes qui scannent le contenu et ceux qui le lisent avec attention aient les liens à portée de clic lorsqu’ils en auront besoin.

placer les boutons de façon à ce que le bouton « suivant » soit à droite du contenu
car c’est à cet endroit que l’internaute place sa souris pour pouvoir consulter, lire ou
regarder le contenu. Ceci rendra ce bouton plus confortable.

créer des boutons « suivants » et « précédents » suffisamment grands afin que les internautes arrivent facilement à cliquer sur les options suivantes et précédentes.

intégrer une page, listant tous les contenus, afin de permettre à un internaute de retrouver un contenu sans passer par les boutons « suivant » et « précédent ». Ainsi les internautes n’auront pas à refaire défiler la liste entière. Cette page doit être accessible depuis toutes les pages présentant la navigation « suivante » et « précédente ».

préférer des libellés de liens explicites. Préférez « Page suivante : 017/060 Navigation
par le bouton retour » à « Page suivante » entre autre pour le référencement de vos pages et l’accessibilité de vos liens. Les tags TITLE sont ignorés par les moteurs de recherche.
Ce point peut poser des problèmes de place. Des titres trop longs risquent de casser la mise en page, limitez vos titres à 80 caractères et adaptez vos gabarits à cette limite.
Petite note d’accessibilité : cela permettra aux utilisateurs de lecteur braille de 80 caractères d’afficher les libellés des liens en entier.

Dans le livre “Internet, donne-moi ce que je veux !”, lors d’une interview Steven C. KAHLE, responsable de l’agence internet White Lion, Texas USA wlion.com nous parle de l’implémentation de ce modèle de navigation sur le site www.tstacy.com :

- Il nous explique ce qu’est le “pogo-sticking”.

- En quoi ce modèle de navigation peut faire gagner beaucoup de temps et du confort à l’internaute.

- Il nous conseille sur où et comment installer ces liens suivants et précédents.

Laisser un commentaire

Les champs marqués * sont obligatoires