Look at this, and guess what it reminds you of (well, try not to care about the dust) :

Looks like an oddly labelled MacBook keyboard, doesn’t it ?

Well, not at all! It’s a keyboard made in the 80’s by a french start-up (!) named Thomson for a legend computer called « TO7« . Apple shamelessly COPIED this design for their MacBook computer line ! Apple should be sued for that ! Well, if Thomson was all but a french political toy, they could…

Two lessons :

1. Something terribly new and hype may just be an old fashion stuff refurbished…
2. French inventions are like a cuckold wife : the one who finds it isn’t the one who makes the most use of it :)

La notion de pagination (ou « batch » en anglais) n’est pas récente. Elle est largement éprouvée, puisqu’elle est notamment utilisée dans la production d’écrits depuis au moins une petite vingtaine de siècles.

Et pourtant, il se trouve encore quelques irréductibles qui estiment que c’est un concept trop novateur pour être appliqué dans un site web. Je peste à chaque fois que j’en vois un et j’oublie toujours de le retenir pour le dénoncer ensuite, mais là, j’en ai pris un la main dans le sac :

Le site de VoodooPad propose des copies d’écran de leur (par ailleurs très bon) produit (voir ci-dessous). Il offre la possibilité de cliquer sur une vignette pour l’afficher en grand. Et là, c’est le drame : 

• Il y a 5 copies d’écran en haut du site ;
• Aucune de ces copies d’écran ne possède de titre visible sans survol de la souris ;
• L’utilisateur va donc devoir cliquer sur une vignette pour en observer le contenu (d’une part parce qu’il est plus rapide de faire un clic que d’attendre qu’une info-bulle s’affiche ; d’autre part parce que la consultation d’une image est une action très peu engageante, finalement)
• Là, il voit la vignette en lightbox (très joli), mais il n’a aucune possibilité de passer à l’image suivante ou à l’image précédente : il ne peut que fermer la lightbox, se souvenir quelle était l’image sur laquelle il était positionné, passer la souris sur la suivante/précédente, cliquer à nouveau pour voir le détail.

Je voulais ré-installer VoodooPad et ça m’a tellement « fatigué » de parcourir les vignettes que, finalement, j’ai abandonné. Quel dommage… Voici les vignettes en question :

Attention, cela ne veut pas dire non-plus que l’on peut faire n’importe quoi avec les boutons précédent / suivant : trop souvent, une volonté certes louable mais souvent maladroite de travailler le design pousse les concepteur à proposer des boutons qui ne sont pas utilisables. Voici les erreurs fréquemment rencontrées dans la conception de boutons de pagination :

• Soit ils sont trop petits ;
• Soit ils sont trop gros et masquent carrément une partie de l’image (!!) ;
• Soit ils n’apparaissent qu’au survol, et là, il faut que l’utilisateur ait le réflexe (parfaitement naturel bien sûr) de déplacer sa souris partout sur l’image comme un malade jusqu’à trouver les fameux boutons cachés ;
• Soit ils n’existent carrément pas :)

Voici quelques exemples, plus ou moins réussis (voyez la galerie ci-dessus pour plus de détails) :

• Apple a raté son coup : pas de boutons précédent/suivant dans le parcours de la galerie de l’iPod. L’alternative a consisté à mettre les vignettes de la galerie sous l’image zoomée. Dommage, l’interface aurait été sans doute plus fluide et pas tellement alourdie avec une pagination (en plus des vignettes).
• Wulffmorgenthaler présente une interface lisible, discrète mais efficace. Les boutons Previous / Next s’intègrent bien à la charte du site et sont placés à l’endroit auquel on aurait naturellement tendance à venir les chercher.
• Flickr est une vraie réussite de ce point de vue. Le parcours précédent/suivant est ici mis en valeur de façon efficace, précise, riche (puisqu’on sait tout de suite ce que l’on va voir, que l’on a en fait un double niveau de navigation : la vignette qui permet d’afficher l’image concernée et les flêches qui permettent de faire défiler les vignettes), et c’était tellement pratique qu’ils en ont mis deux (un défilement contextuel et un défilement global).

Pour être efficace, on peut donc résumer le propos comme suit :

• Lorsqu’un site présente une énumération d’éléments qui peuvent être individuellement consultés, il faut prévoir une pagination.
• La pagination doit proposer des boutons « Précédent / Suivant » (ou « Previous / Next » en anglais).
• Le bouton « Précédent » ne doit pas être affiché sur le premier élément (forcément), ni le bouton « Suivant » sur le dernier. En somme, il ne faut pas afficher des boutons qui n’ont pas d’utilité.
• Les boutons ne doivent pas changer de place, pour permettre le « clic en série », notamment sur le premier et sur le dernier élément (la disparition de bouton « précédent » sur le premier élément ne doit pas décaler pour autant le bouton « suivant »).
• Les boutons doivent être visibles sans survol, sinon ils ont peu de chances d’être utilisés.
• Dans tous les cas, un numéro d’image a peu de chance de signifier quoi que ce soit. Il ne faut pas utiliser de numéros pour permettre l’accès rapide à un élément, mais soit des vignettes (comme Apple), soit rien du tout s’il n’y a pas énormément d’éléments à parcourir.

Dans la série du cordonnier mal chaussé, vous noterez que ce blog ne respecte même pas ces règles de base ! En effet, j’ai voulu jouer avec la galerie de Wordpress plutôt que d’afficher les images les unes à la suite des autres au moment où elles étaient pertinentes. Moralité : je n’aurais pas dû :)

Et vous, avez-vous d’autres exemples à soumettre ?

Illustration

• Ergolab : Une ressource, francophone, indispensable ! De nombreux articles liés à l’ergonomie web. À consulter absolument !
• Superfiction, le blog : Le blog d’un chef de projet interactif dans une web-agency. Une mine d’informations régulièrement actualisée.
• User Interface Ingeneering : Un site destiné aux ergonomes, anglophone. Intéressant.
• Smashing Magazine : Un blog anglophone plutôt orienté designers interactifs, parlant de photo, de design web et aussi bien sûr d’ergonomie.

Nous nous efforcerons de mettre à jour ces liens dans le blog.