Il y a un élément qui fait partie des plus souvent négligés d’un site web et qui est pourtant facilement perfectible, il s’agit de ses éléments de pagination. La plupart du temps, ce n’est qu’après-coup que l’on s’en occupe. C’est rare que je tombe sur un site web avec une pagination acceptable, et je me demande toujours pourquoi tellement peu de gens réussissent cet aspect. Après tout, il me semble que c’est plutôt facile de ne pas se tromper en matière de pagination. Hélas, en pratique, c’est loin d’être le cas, alors après les encouragements de Chris Messina sur Flickr, j’ai donc décidé d’écrire mon article sur la question, en espérant qu’il vous donnera des éléments sur ce qui fait une bonne pagination.

Avant d’entrer dans le vif du sujet et d’analyser ce qui fait qu’une pagination est bonne ou mauvaise, je voudrais expliquer ce que j’entends par pagination exactement: la pagination c’est tout système de contrôle qui permet à l’utilisateur de naviguer dans des pages de résultats, des archives, ou tout autre type de contenu en série. Les résultats de recherche en sont un exemple évident, mais il est toujours bon de comprendre que la pagination existe aussi sur les blogs (liens Précédent/Suivant, dont certains blogs disposent), dans les forums de discussion et — en particulier — dans les webcomics (bandes dessinées en ligne).

L’importance de la pagination est subjective; car elle dépend également du contenu. Pour les résultats de recherche de Google ou de Yahoo, la pagination est assez importante car bien qu’ils veuillent vous donner exactement ce que vous cherchez dans les 10 ou 20 premiers résultats, il arrive très fréquemment que vous soyez obligés de passer au crible plusieurs pages consécutives. Pour une webcomic, cela n’a pas de sens de sauter vers la “page 7″ quand vous vous trouvez sur la page 2; tout ce que vous voulez, c’est aller facilement à la suivante. Ainsi la pagination dépend du contenu, mais il faut noter que les principes de base d’une bonne pagination s’appliquent quels que soient le contenu ou le contexte.

Les règles d’une bonne pagination

Faire une bonne pagination ce n’est pas compliqué. Franchement, souvenez-vous simplement des conseils de bases qui suivent, et ça devrait aller. Nous jetterons un oeil à une palette d’exemples après ça, pour voir que l’on peut apprendre beaucoup des designs de pagination que l’on trouve sur des sites web populaires.

1. Faites des zones cliquables suffisamment grandes

C’est une règle valable pour n’importe quel type de lien navigationnel, que ce soit un lien de menu ou un lien de pagination, mais dans ce dernier contexte, c’est peut-être encore plus pertinent. Souvent, la pagination est laissée de côté pendant toute la phase de design et elle se retrouve dans un coin quelque part au-dessus ou en-dessous des zones de contenu, de toute évidence sans qu’on n’y ait beaucoup réfléchi. L’un des problèmes majeurs qui en résulte, c’est que les liens de pagination deviennent des zones cliquables toutes petites, pas plus grandes que les numéros de pages eux-mêmes. Pour les rendre plus efficaces et user-friendly, concoctez-leur un design visuel convenable et donnez à chaque lien une zone cliquable large, visuellement c’est identifiable. Par large, on entend “deux fois la largeur du numéro, et 1,5 fois sa hauteur.”

2. N’utilisez pas de soulignement

Le soulignement pour les liens c’est généralement une bonne idée, puisque les utilisateurs sont plus habitués avec les liens qui sont soulignés, mais en ce qui concerne les liens de pagination, comme les liens de menu principal (évident), le soulignement est inutile. Les gens savent que les numéros de page sur le web sont cliquables (et s’ils ne le sont pas, qu’est-ce qu’ils font là ?)

3. Identifiez la page courante

Rendez la page courante immédiatement identifiable pour l’utilisateur; elle ne doit pas être cliquable, elle ne doit contenir aucune sorte d’état survolé (“a:hover”) et (idéalement) elle devrait être entourée de balises <em> ou <strong>. Le style de la page courante doit être suffisamment différent de celui des autres pages, pour qu’un utilisateur puisse facilement repérer où il se trouve.

4. Espacez les liens de page

Proposez suffisamment d’espace entre chaque lien de page afin qu’un utilisateur ne clique pas accidentellement sur le mauvais numéro de page. Dans ce cas, un bon design visuel peut vous faciliter la tâche.

5. Fournissez des liens Précédent et Suivant

Dans pratiquement n’importe quel contexte où la pagination existe ou peut exister, les liens Précédent et Suivant sont toujours utiles. Alors proposez-les. Toutefois, séparez-les clairement des numéros de page et donnez-leur suffisamment de distance ou de style propre pour qu’ils ne soient pas confondus avec une page; c’est particulièrement pertinent si vous utilisez des flêches au lieu de texte pour Précédent et Suivant.

6. Utilisez les liens Premier et Dernier (quand c’est utile)

Quand on navigue à travers des résultats de pages à l’extérieur de l’une ou l’autre limite (ou est-ce plutôt à l’intérieur?), proposez des liens Premier, Dernier, ou les deux à la fois, selon ce qui est le plus approprié. Pour les webcomics, ce qui est approprié, c’est de toujours proposer les deux liens, tout en désactivant le lien correspondant quand l’utilisateur est sur la Première ou la Dernière page. Faites en sorte qu’il soit visible comme option de texte uniquement, sans lien, sans cliquabilité, mais gardez-le dans le design. Cela s’applique aux webcomics seulement, pas nécessairement pour les autres formes de pagination.

7. Placez Premier et Dernier à l’extérieur

Rien de plus contre-intuitif qu’un lien Dernier suivi par un lien Suivant. Prenez plutôt l’exemple des chaînes hi-fi: “fast-forward” (accéléré) est suivi de “next (track)” (morceau suivant), parce que c’est une étape qui remplace et annule la précédente. Les boutons sont ordonnés du centre vers l’extérieur, et les éléments de pagination ne sont pas très différents (ou dans certains cas, pas du tout différents), et devraient ainsi suivre la même règle de base.
«Première ‹Précédente Courante Suivante› Dernière»

Quelques exemples, bons et mauvais

Nous voilà donc avec sept règles simples mais claires comme référence, regardons comment certains sites font leur pagination et voyons ce que nous pouvons en apprendre. Commençons par celui qui je crois est le plus connu de tous: les résultats de recherche de Google.

Aussi mignon que cela puisse être d’étirer le “oo” de “Google” pour l’aligner avec le nombre de pages, cela créé un problème en ceci que les liens de page sont un peu trop proches pour une sélection aisée. Vous avez déjà essayé de naviguer en cliquant sur les O au lieu de cliquer sur les numéros? Ce n’est pas du tout pratique. Avec la dixième et la onzième page, c’est particulièrement frappant. Les liens Précédent et Suivant de Google, par contre, sont fantastiques — clairement séparés et avec un contraste visuel assez prononcé par rapport aux liens de la page normale. Les liens ont malheureusement tous des soulignements, ce qui créé une impression de fouillis, ce qui, à nouveau, rend les numéros de pages à deux chiffres très difficiles à distinguer les uns des autres. Les zones cliquables des numéros sont minuscules, et les O ne sont pas faciles à utiliser.

Maintenant, Google a fait une autre pagination ailleurs, qui est la pagination qui a suscité tout cela:

Cette fois, les liens Précédent et Suivant ne sont pas très différents — rien qu’une simple différence de font-weight — et les liens de pages, bien que plus grands que l’habituel lien de résultats de recherche, sont toujours des zones cliquables minuscules qui sont encombrées dès lors que ce sont des nombres à deux chiffres qui sont concernés. La page courante est assez facilement identifiable, mais pourquoi diable est-elle décalée vers le bas? Une ligne de base (baseline) cohérente aurait été utile (c’est également le cas dans le premier exemple).

Overture utilise une approche légèrement différente: aucun numéro de page n’est cliquable, mais vous pouvez voir sur quelle page vous vous trouvez et combien de pages il y a au total. Les liens Premier et Précédent sont présents comme le texte normal, afin que la navigation soit uniforme quelle que soit la page sur laquelle l’utilisateur se trouve. Le fait que seuls Précédent et Suivant aient une flêche est une bonne idée, cela les rend plus incitatifs pour l’utilisateur, et le scénario le plus vraisemblable pour Overture c’est qu’un utilisateur veut aller à la page suivante ou précédente, pas sur la première ni la dernière.

Veer fait aussi quelque chose d’intéressant: des boutons flêches simples (mais frustrants tellement ils sont petits) Précédent et Suivant pour naviguer parmi les pages, disposés autour des numéros de pages courante et totales; une liste déroulante pour le nombre de résultats que vous voulez par page et un champ texte pour sauter directement à n’importe quelle page. L’inconvénient d’une liste déroulante (balise <select>) c’est qu’elle n’apparaît pas de la même façon dans tous les navigateurs, ce qui donne une impression un peu incohérente et fouillis de toute la zone de pagination. Cela manque aussi d’un alignement vertical (baseline) uniforme à cause des éléments de formulaire et des boutons qui sont bizarrement conçus (les textes dans les boutons d’images ne sont pas alignés au texte qui se trouve à l’extérieur). Cette seule section a cinq baselines différentes à la fois.

Design Snack utilise des flêches pour les boutons Premier, Précédent, Suivant et Dernier, mais de légères différences entre Premier et Précédent, et entre Suivant et Dernier auraient été bénéfiques. Les boutons Premier et Dernier auraient pu être plus larges, par exemple, pour éviter toute confusion. De même, la page courante est à peine distincte des autres pages, selon vos paramètres de couleur. Un bon signe c’est le détachement des numéros de pages des autres liens.

Upcoming a une pagination pour ses suggestion boards, et alors que les pages ont finalement de larges zones cliquables, la page courante ressemble toujours à un lien activable. Remarquez, d’un autre côté, l’impression de netteté rendue par l’absence de soulignement et la présence d’un espacement décent entre les liens.

I’m In Like With You est un tout nouveau site qui peut être décrit comme un site de flirt en ligne, ou si vous me passez le terme, un “site de rencontres Web 2.0″. Pensez eBay + rencontres + Web 2.0 + réseaux sociaux. Toutefois, la pagination souffre d’un grave “syndrome de l’après-coup”: excepté le dernier numéro de page qui surgit avec une ellipse devant lui, il semble qu’il n’y ait absolument aucune espèce de design dédié à la pagination. La pagination est reléguée très discrètement dans un coin, les liens de page sont trop rapprochés, ils sont soulignés, il n’y a pas de grandes zones cliquables — toute la panoplie des signes classiques, en fait.

La pagination de Slate se situe vers la droite avec des zones cliquables plus larges (mais pas encore assez) et pas de soulignement, mais les numéros de pages sont littéralement coincés les uns contre les autres.

C’est peut-être la meilleure pagination que j’ai vue, et c’est celle de Flickr: de larges zones cliquables, une page courante facile à identifier, des liens Précédent et Suivant détachés avec des flêches, et au lieu de liens Premier et Dernier, ils ont fait en sorte que les premiers et les derniers liens fassent partie des numéros de page avec des ellipses qui les séparent de la série de numéros sur laquelle vous êtes. En dessous, on trouve le nombre total de photos. Le seul bémol que je mettrais, ce serait le manque d’espacement, mais j’ai le sentiment qu’avec les effets survolés des liens, c’est même inutile.

La pagination de Virb est très similaire à celle de Flickr et reçoit le même signe de tête approbateur.

Chris a déjà esquissé quelques commentaires sur celui-ci, mais la pagination de Magnolia manque de clarté; des zones cliquables minuscules, quasiment pas de différence entre la page courante et les autres liens de page, et l’ensemble a vraiment l’air d’avoir été pensé a posteriori.

Twitter ne propose pas vraiment de pagination, seulement deux liens pour naviguer page après page. Les liens sont soulignés et sentent l’après-coup à plein nez, en particulier avec cette barre noire qui les sépare, ce qui ajoute au fouillis au lieu de faire un peu le ménage. Si la barre avait été d’une couleur deux fois plus claire, cela aurait fonctionné beaucoup mieux, ou alors, avec plus d’espace tout autour. Dans l’ensemble, toutefois, un design visuel approprié pourrait rendre ces liens beaucoup plus user-friendly.

Ces deux contrôles de pagination viennent de LiveJournal (en haut) et de Engadget (en bas). Les deux ne proposent pas de pagination à part une simple navigation entre les pages Suivante / Précédente (dans le cas de LiveJournal, le propriétaire du journal que vous parcourez peut spécifier le nombre d’entrées, qui par défaut est fixé à 20 mais qui peut être ramené à 1, par exemple). Le problème c’est que LiveJournal a une perspective différente de celle de Engadget avec son option entrées-par-page: avec LiveJournal, pour consulter d’anciennes entrées, il vous faut activer le lien “Précédent ##”; avec Engadget, pour consulter d’anciennes entrées, il faut cliquer sur le lien “Page Suivante”. Cette contradiction est déroutante pour n’importe qui visite régulièrement des sites avec des approches incompatibles; une des solutions serait d’être plus spécifique: “Entrées plus anciennes” au lieu de “Page suivante” rendrait les choses plus claires quant à la direction du lien, dans tous les cas.

Personnellement, je trouve que l’approche de Engadget manque d’intuitivité: cliquer sur “Page suivante” pour aller sur une page avec des entrées antérieures (et cliquer sur “Page précédente” pour aller sur une page avec des entrées postérieures)? C’est sûr, c’est bien la “page suivante” des entrées en général, mais toujours est-il qu’elles restent des entrées précédentes, et pas des “entrées suivantes”. Et ça, pour moi, ça montre qu’on n’y a pas suffisamment réfléchi, sauf que maintenant ils sont coincés avec ça (tout comme je crois que c’est simplement un défaut de Weblogs, Inc.).

A présent, jetons un oeil à quelques webcomics.

A part que le site est toujours un peu cassé depuis son redesign fait il y a longtemps, Ctrl-Alt-Del online a une pagination plutôt décente. Les boutons sont suffisamment grands pour être facilement cliquables, mais les liens Premier et Dernier sont à l’intérieur des liens Précédent/Suivant, ce qui rend la chose plutôt contre-intuitive si vous lisez également beaucoup d’autres webcomics qui n’ont pas cette faille, ou si vous passez du temps à farfouiller dans les pages de résultats de n’importe quel site.

VGCats a le même problème.

Least I Could Do a une bonne pagination, le site utilise correctement la configuration Premier/Précédent et Suivant/Dernier avec de larges zones cliquables et un état survolé des liens acceptable, mais les liens Suivant et Dernier restent des liens, même si vous êtes sur la toute dernière comic; mauvaise interface utilisateur. En revanche, très sympa, cette distinction visuelle entre liens apparentés (qui ne sont pas des liens de pagination) qui sont toujours dans la même case visuelle: Commentaires et lien “Sauvegarder ma place”, bien que son but m’échappe.

Penny Arcade a également une pagination acceptable, mais à nouveau les liens Suivant et Dernier (“Nouveau”) restent des liens même sur la toute nouvelle page. Par ailleurs, leurs boutons sont relativement grands en taille mais les textes des labels sont plutôt petits, ce qui exige plus de temps qu’il n’en faudrait pour trouver le bon lien. Enfin, la pagination ne se trouve que tout en bas du comic mais parfois leurs comics sont très grandes, ce qui exige que vous scrolliez verticalement avant de pouvoir continuer à naviguer (quelle que soit la direction dans laquelle vous allez).

Sinfest est bon en ceci que ses liens Premier et Précédent ne sont pas cliquables sur la première comic, mais par contre un lien Dernière comic fait complètement défaut; la seule façon d’obtenir la comic la plus récente c’est d’aller sur la page d’accueil, mais cela ne saute pas aux yeux (encore moins si vous arrivez sur le site via une comic spécifique, plutôt que par la page d’accueil). La police choisie, de même, ne rend pas les choses faciles en matière d’identification des trois liens de pagination, et étant donné qu’il y en a toujours seulement trois, il vous faut vraiment les lire pour pouvoir les utiliser.

AppleGeeks (personnellement, mon préféré en matière d’art et de couleurs, ces mecs ne font rien de moins que du sublime) utilise un style très différent en matière de pagination: une version vignette de la comic Précédente et Suivante (quand c’est possible). Bien que surprenante, cette approche est décidément moins intuitive à cause de l’orientation verticale et la navigation à travers les comics n’est pas toujours commode.

OK-Cancel a une super pagination: des boutons Premier, Précédent, Suivant et Dernier faciles à identifier, avec des zones cliquables larges, des liens désactivés là où ils doivent l’être, et de grands états survolés (“a:hover”) qui préviennent le besoin d’espace entre les liens.

Et enfin, il y a Questionable Content. C’est ma webcomic préférée toutes catégories depuis toujours, mais malheureusement, ce ne serait pas du luxe que la pagination soit retravaillée. Les liens textes sont vraiment petits, encore plus dans le contexte du reste de la page, avec les liens du menu principal juste au-dessus d’eux et la comic juste en-dessous. Les éléments ne ressortent tout simplement pas du tout sur la page, ce qui les rend plus difficiles à repérer et à utiliser. Il n’y a environ que 10 pixels entre les liens de pagination et les liens du menu principal, le sérif n’aide pas pour la petite taille de texte, et les liens sont toujours des liens même quand ils ne devraient pas l’être. L’un dans l’autre, de nombreuses améliorations pourraient être faites pour rendre ces éléments de pagination bien plus utilisables.

Pour terminer

Pfiou! Ça en fait des exemples! Bon il est temps de “tourner la page” maintenant, mais je vous en prie, prenez en compte les 7 règles précitées quand vous faites un site avec des contrôles de pagination. Concevez-les de façon élégante pour être sûr que vos visiteurs en retireront une expérience plaisante, et ainsi tout le monde en sera reconnaissant et heureux.

Toutes les images sont hébergées par Flickr sur les albums de Chris Messina et de moi-même, avec tous mes remerciements à Chris pour ses encouragements et son aide dans l’apport des exemples.

Sachant qu’on a plutôt tendance à vouloir pousser (c’est moins fatigant).
Alors là, sans indications, il faut faire un choix. Et bien évidemment, ce n’est JAMAIS le bon.

Pour couronner le tout, les portes en question sont souvent d’une légèreté à vous faire un tennis elbow, ou un tour de reins, c’est selon. Et ça, l’utilisateur, il aime pas beaucoup.

Dans tous les cas, il suffit d’acheter ces plaques “Tirez” ou “Poussez” et de les fixer sur les portes, ce qui permettra à l’utilisateur d’an-ti-ci-per, et donc d’ajuster son geste. Et ça l’utilisateur, il aime bien.

Ou alors, le mieux c’est les portes qui s’ouvrent dans les deux sens. Voire en cas de budget conséquent, les portes coulissantes automatiques.
A condition que ces dernières sachent anticiper votre entrée imminente avec le bon timing.

Voilà, plus d’excuses pour ne pas s’intéresser à pomdoo ;)
Des questions?

Il publie un graphique qui fait un état des lieux en matière de problèmes d’utilisabilité.

En gros, plus de la moitié d’entre eux sont toujours d’actualité; 10% ont été résolus grâce à l’amélioration de la technologie.

Mais c’est surtout le changement de comportement des utilisateurs qui a permis de résoudre ces problèmes. Le Web est plus facile aujourd’hui tout simplement parce que les gens connaissent ses conventions, même quand elles sont mauvaises.

Enfin, 22% des problèmes d’utilisabilité de 1994 qui sont aujourd’hui évités grâce au travail des designers sont comme des bombes à retardement: ils peuvent exploser à tout moment si les designers se lâchent ou si des clients ignorants insistent pour avoir un mauvais design.

Jakob Nielsen distingue aussi Internet du design d’applications. 90 % de ses recommandations de 1986 sont toujours valables, et ce score impressionnant s’explique par deux raisons:
1. Elles étaient à l’époque le fruit de 25 ans de recherche (les recommandations pour le Web de 1999 ne concernaient que 5 ans d’études),
2. Internet a changé plus vite que les ordinateurs.

Mais qu’elles concernent le Web ou les applications, les directives restent remarquablement stables depuis des années, tout simplement parce qu’elles reposent sur des caractéristiques humaines, qui elles, ne changent pas tant que ça.

Un peu d’auto-satisfaction de temps en temps, ça ne fait pas de mal…

Avec la riche interactivité des applications web Ajax, il est clair que l’utilisateur en a pour son argent, mais quels défis entraînent ces technologies pour l’utilisabilité ?

Ajax, Flash, et d’autres technologies Internet permettent des interactions et des adaptations au niveau des éléments (au niveau micro, si vous voulez). En pratique, cela signifie que certaines interactions (en particulier le rechargement de page) ne sont plus nécessaires. On peut mettre à jour seulement une partie d’une page avec des données ou des actions pertinentes ou personnalisées et pas toute la page. On peut également inclure des interactions riches dans nos applications web, ce qui permet le type de manipulation directe que l’on a avec les applications bureautiques.

Les interactions riches au niveau des éléments rendent possibles des interactions simples comme voter sur digg ou noter un film sur Netflix. Mais parce qu’il n’y a pas de rechargement de page, le feedback devient une considération clé dans l’utilisabilité. Les gens n’ont plus de rafraîchissement de page qui leur dit que leur action est en cours ou terminée. Alors il nous faut explicitement leur faire connaître le résultat de leurs actions. Cela inclut un certain nombre d’états: en cours, réussi, et échoué, pour commencer. Chacun de ces états doit être suivi à la trace et communiqué.

Nous devons également communiquer quelles actions sont possibles afin que les gens aient la notion de ce qu’ils sont en train d’accomplir. Des actions imprévues comme glisser/déposer, en particulier, requièrent des affordances qui donnent des indications sur leur usage.

Je trouve aussi que certains designs d’applications web ont tendance à abuser des micro interactions dans la page (in-page). Quand chaque élément a de multiples états ou quand toutes les actions et le contenu sont mises à jour sans rechargement de page (update in-line), les gens peuvent être désorientés. Dans certains cas, un rechargement de toute la page fonctionne mieux. Le simple fait qu’on puisse concevoir toutes nos actions pour qu’elles arrivent in-line ne veut pas forcément dire qu’il faut le faire.

Certaines entreprises semblent accorder de la valeur à la forme aussi bien qu’à la fonction alors que d’autres semblent accorder de la valeur uniquement à la fonction. La forme ne fournit-elle pas autant de valeur pour l’utilisabilité ?

Je suppose que cela dépend de votre conception de la forme. De nombreuses entreprises pensent toujours que le design visuel sert juste à “rendre les choses jolies.” Mais le design visuel est la voix du design d’interaction et de l’architecture informationnelle principalement parce que les gens ne sont capables d’interagir avec une application Web qu’à travers son niveau de présentation. Ainsi la forme est en fait responsable de la communication de la fonction.

Pouvez-vous nous donner vos meilleures pratiques pour les tests d’utilisabilité, vos meilleurs trucs, et votre péché en matière d’utilisabilité ?

Pour tout type de tests d’utilisabilité, je dirais que la meilleure pratique c’est l’objectivité. Pouvoir observer ce que font les gens sans un point de vue subjectif est l’une des facultés que j’admire le plus chez les professionnels de l’utilisabilité. Pour cela, il faut être ouvert à de nouvelles perspectives. Si vous avez des préjugés, vous verrez vraisemblablement ce que vous voulez voir.

Je suis depuis toujours fan de RITE (rapid iterative testing) et de la triangulation (ou peut-être que le terme plus approprié serait la trans-fertilisation) de multiple sources de données. Les tests RITE vous donnent la possibilité de vous adapter rapidement aux difficultés et aux opportunités qui surviennent au fur et à mesure du test. La trans-fertilisation de données vous donne à la fois des infos qualitatives et quantitatives, ce qui donne une vision plus complète de ce qui marche. Par exemple, les tests en direct peuvent vous dire ce que les gens font sur votre site, mais ils ne vous diront pas pourquoi. Les tests en labo, d’un autre côté, peuvent vous dire pourquoi les gens font telle ou telle chose mais ce ne sont pas des prévisions très fiables des comportements à grande échelle. Quand on combine les deux, par contre, ces techniques et d’autres peuvent vous donner une meilleure vision d’ensemble.

Quant aux péchés d’utilisabilité, il y a un ou deux scénarios qui ressortent fréquemment dans les tests: la découvrabilité et la complete cognition. Je mentionne la découvrabilité parce que les tests d’utilisabilité sont souvent utilisés pour évaluer l’efficacité de certaines caractéristiques d’application Web et des conclusions communes c’est que la caractéristique testée n’est pas découvrable. La plupart du temps, je crois que c’est prévisible. Les gens n’expérimentent pas les caractéristiques isolément, ils les expérimentent dans le contexte des tâches et des buts. En tant que tel, tester la découvrabilité d’une caractéristique juste pour la caractéristique elle-même peut amener à prendre des décisions qui ne prennent pas en compte tout le contexte de l’expérience produit.

D’un autre côté, la complete cognition part du principe que les gens veulent comprendre exactement comment ils ont accompli une tâche. Une mesure plus pertinente c’est comment ils ont réussi ou échoué dans l’accomplissement de la tâche en cours. Souvent, c’est déraisonnable de supposer que les gens vont comprendre complètement comment et pourquoi telle chose marche. Ainsi considérer qu’un design défaillant ne sert pas à grand chose permet de se poser les vraies questions en termes d’utilisabilité (d’usage).

La majorité des produits et des services affectent directement le résultat financier. Pourtant c’est difficile de quantifier le ROI (retour sur investissement) pour l’utilisabilité. Pourquoi cela ?

Pour commencer, les exemples ne manquent pas où de mauvaises pratiques en termes d’utilisabilité peuvent quand même entraîner une augmentation des recettes. Des systèmes de navigation déroutants peuvent augmenter le nombre de pages vues puisque les gens tatônnent dans le site. Un manque de design visuel peut réduire la différence entre les publicités et le contenu, ce qui amène des taux de click-through (CTR) plus importants.

Sur le long terme, bien entendu, ce ne sont pas des modèles viables puisque les gens se dirigent vers de meilleures expériences. Mais avant l’émergence d’alternatives viables, les gens devront faire avec si l’on veut obtenir l’utilité qu’ils ne peuvent pas trouver ailleurs. Joshua Porter et moi nous avons eu récemment une conversation à propos de ce cycle de vie dans la vie d’un produit ou d’une technologie où l’utilisabilité devient de plus en plus importante. Selon où se trouve votre produit dans ce cycle, le ROI en termes d’utilisabilité peut changer. Je ne pense pas que la majorité des tentatives pour quantifier l’impact de l’utilisabilité sur le résultat financier prennent ce contexte en compte.

Une très bonne idée couplée à une utilisation judicieuse de JavaScript qui nous évite de scanner toute une liste de caractères dans une page.
La cerise sur le gâteau, un widget est fourni pour le grand plaisir des codeurs.

Imaginez-vous devoir consulter régulièrement votre livre de référence, “la Bible du HTML” par exemple, sans sommaire ou table de matières. Vous vous retrouvez alors à feuilleter à chaque fois tout le contenu de votre livre à la recherche de ce que vous souhaitez. Quelle perte de temps!
C’est cette mauvaise expérience utilisateur que certains blogs font subir à tout nouveau visiteur. L’internaute découvre le blog pour la première fois, les sujets abordés l’intéressent et il veut du coup consulter les articles déjà publiés. Il doit alors scanner chaque page en se tapant tout le contenu de chaque article (une taille d’écran parfois) en jouant de sa souris, scroll, page suivante, scroll, page suivante, scroll, clic avril 2007, scroll, page suivante, scroll, page suivante, clic mars 2007, scroll, page suivante, scroll,… à la recherche de titres qui pourraient attirer son attention. C’est fastidieux et fatigant pour un blog qui référence, par exemple, une dizaine d’articles par semaine. L’internaute se lasse et abandonne sa recherche.

Les internautes n’ont ni le temps ni l’envie de parcourir tout le contenu de votre site. La page Archives comme une table des matières doit leur faciliter la recherche et le repérage d’informations.

Les plate-formes de blogs comme Wordpress proposent des tags et des plugins à installer (SRG Clean Archives, Super Archives Plugin) pour construire une page Archives complète: liste des titres des articles (d’où l’importance de les soigner) avec mois, jour de publication et nombre de commentaires, catégories, nuages de tags, etc.
Il ne faut pas hésiter à fabriquer cette page avec le plus d’informations pour un repérage rapide (scan) et exhaustif de tous les articles.
Inspirez-vous des pages Archives des sites FredCavazza.net, SimpleEntrepreneur.com, LukeW.com et GeniantSandBox.com par exemple, mixez tout ça et construisez votre table de matières, votre index de mots-clés et de catégories.
En bref, réinvestissez les éléments qui font (entre autres) l’utilisabilité du bon vieux livre.

Plusieurs avantages à cela: sorte de “plan de site” pour les moteurs de recherche, utilisabilité et accessibilité.

Après tout cela, pour vos heureux visiteurs, un simple scroll dans la page Archives devrait suffire… ;-)