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.

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

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.

De nombreux sites de e-commerce ou à fort contenu souffrent d’une maladie que j’appelle « hypertrophie de page ». Voici les symptômes: la pagination des pages de contenu, la création de nouvelles pages qui ne font que fournir des méthodes de navigation alternatives et un design d’architecture de site qui suit cette règle d’utilisabilité peu connue: « plus de pages c’est mieux que moins de pages ».

Quant à moi, je me situe dans le camp opposé. Mon idée de la parfaite expérience utilisateur est de livrer le contenu voulu via le plus petit nombre de clics possible à partir de la page d’où on est partie. Cela veut dire rendre la navigation simple, directe et intuitive. Cela ne veut pas dire en revanche créer des milliers de détours pour l’utilisateur. Une autre règle d’utilisabilité rarement invoquée, mais avec laquelle je suis d’accord, dit que:
Moins de choix avec une sélection raisonnable c’est mieux que plus de choix avec exactement ce que veut l’utilisateur.

Quoi ? L’utilisateur préfèrerait se décider pour quelque chose d’imparfait plutôt que d’avoir à patauger dans des douzaines d’éléments de navigation dans la barre latérale avant de trouver ce qu’il cherche ? Oui. Vous ne vous êtes jamais demandé pourquoi les 3 premiers résultats de requêtes dans les moteurs de recherche cumulaient 70% des clics, même quand les résultats de recherche étaient nuls ? C’est parce que les utilisateurs préfèrent faire des compromis plutôt que de perdre du temps à préciser leur objectif.

La plupart d’entre nous tombons d’accord sur ces vérités basiques de la navigation web, mais je sais que certains d’entre vous meurent d’envie de me dire: « Mais mon business model est basé sur le nombre de pages vues. J’ai besoin de maximiser le nombre de clics pour tirer le maximum de bénéfices de mon trafic. » Je persiste et signe: éliminer les pages non nécessaires, liquider les articles paginés et supprimer la navigation inutile sera d’une grande utilité. Qui dit meilleure expérience utilisateur dit encore plus de fréquentation, plus de liens, plus d’information virale et au final, plus de pages vues. A long terme, qui va gagner le jeu du trafic, entre le site qui donne à l’utilisateur ce qu’il veut, ou le site qui vous fait cliquer 12 fois pour trouver ce qu’il vous faut alors que 2 auraient suffi ailleurs ?

Je vous invite à examiner vos propres sites et à vous demander si vous avez vraiment besoin de fournir 3 ou 4 systèmes de navigation quand les visiteurs n’en utilisent que 2. Faites quelques tests pour voir si ces pages de contenu engendrent plus de liens et plus de trafic quand elles sont paginées ou quand elles fournissent tout le contenu d’un coup (la pagination n’est pas forcément un problème en soi, mais beaucoup de sites en font trop). Regardez les chemins de clics de vos visiteurs dans les outils de statistiques web et posez-vous la question: aurais-je pu les amener là plus rapidement ?

Et pensez à ces pauvres spiders! Ils ont déjà toutes ces milliards de pages à parcourir, vous n’allez pas en plus ajouter à leur charge de travail ?

Domaine & Hébergement

• 1. Ne pas héberger son propre blog
• 2. Enregistrer un nom de blog (URL) qui a déjà été déposé
• 3. Déclarer un nom de domaine long, compliqué, et difficile à mémoriser

Style, Design, et ingrédients de base d’un blog

• 4. Garder le template par défaut du système de blog
• 5. Utiliser un arrière-plan noir ou au contraire aveuglant, tape-à-l’oeil ou inconfortable visuellement
• 6. Utiliser de la musique de fond
• 7. Ne pas mettre à jour son blogroll
• 8. Ne pas utiliser de permaliens pour ses articles
• 9. Ne pas protéger son blog contre les commentaires spammés à l’aide de plugins faciles à installer
• 10. Sous-utiliser les plugins faciles à installer
• 11. Ne pas fournir de moyen facile de contacter l’auteur
• 12. Ne pas inclure de page « A propos »
• 13. Ne pas créer de plan de site pour Google et d’autres moteurs de recherche

Commentaires

• 14. Garder le premier article et le premier commentaire par défaut du système de blog
• 15. Forcer les invités à s’inscrire quand ils veulent laisser des commentaires
• 16. Commenter sur d’autres blogs sans dire autre chose que « sympa le post » ou autres idioties inutiles
• 17. Commenter sur d’autres blogs et spammer l’URL de son blog
• 18. Ne pas commenter suffisamment sur d’autres blogs
• 19. Ne pas réfléchir à ce qu’on poste sur les autres blogs
• 20. Ne pas répondre aux commentaires laissés sur son blog
• 21. Demander aux autres blogueurs dans les commentaires de faire un lien vers son blog
• 22. Collecter les adresses email de personnes qui commentent et les ajouter à des listes de marketing sans leur autorisation
• 23. Poster des liens affiliate quand on fait des commentaires sur d’autres blogs

Liens

• 24. Envoyer des emails à d’autres blogueurs pour leur demander de créer des liens
• 25. Ne pas faire suffisamment de liens externes
• 26. Poster des liens invalides ou brisés
• 27. Ne pas utiliser les possibilités de trackback sur son blog

Contenu du Blog

• 28. Créer des SPLOGS
• 29. Fixer des attentes élevées pour ses lecteurs et ne pas les remplir
• 30. Ne pas connaître les règles de blogging ou de culture des blogs avant de démarrer
• 31. Ne pas choisir de thème pour son blog
• 32. Changer de thème en cours de route
• 33. Copier le style et la substance d’autres blogs
• 34. Bloguer sur absolument rien du tout
• 35. Ne pas relire ses articles
• 36. Ne pas réussir à positionner son blog et renoncer à bloguer
• 37. Voler du contenu
• 38. Bloguer à propos de quelque chose dont on ne connaît rien
• 39. Copier des articles entiers d’autres blogs en pensant qu’un simple rétrolien suffit
• 40. Ne pas créditer un autre blog ou site d’une idée qu’on leur a prise
• 41. Essayer de bloguer comme si on était une personne fictive
• 42. Choisir des titres peu incitatifs
• 43. Poster d’énormes blocs de textes sans sous-titres ni images, etc, pour les diviser
• 44. Poster de façon irrégulière
• 45. Oublier qu’on écrit pour des lecteurs, pas pour soi-même
• 46. Ecrire des choses qui pourraient nuire à l’avenir
• 47. S’engager dans la diffamation
• 48. Manquer de professionnalisme
• 49. Attaquer d’autres blogueurs juste pour attirer l’attention
• 50. Partager des secrets d’entreprise ou des informations d’ordre privé sur son blog
• 51. Révéler trop d’informations personnelles (potentiellement dangereux)
• 52. Ne pas avoir de style propre quand on écrit, utiliser un langage neutre et sec
• 53. Ne pas encourager les commentaires
• 54. Faire trop de bla bla sans aucun élément pertinent
• 55. Ecrire à propos de ce que tout le monde écrit
• 56. Organiser des concours sans offrir les récompenses promises

Promotion du blog & Audience

• 57. Promouvoir son tout nouveau blog n’importe où
• 58. Promouvoir son blog qui compte moins de 10 articles
• 59. Utiliser des boosters de trafic
• 60. Utiliser n’importe quelle méthode pour obtenir du trafic non ciblé
• 61. Soumettre son blog de façon excessive à des sites de social bookmarking
• 62. Soumettre de mauvais articles aux moteurs de bookmarking
• 63. Ne pas promouvoir suffisamment ses bons articles
• 64. Ne pas entrer dans les Blog Carnivals pour commencer à se construire du trafic
• 65. Ne pas inclure de lien vers son blog dans son email et dans ses signatures dans les forums
• 66. Ne pas répondre aux emails ou autres messages

Monétisation du blog

• 67. S’inquiéter de savoir combien va rapporter son blog avant même d’avoir du contenu de qualité
• 68. Placer trop de publicités sur son blog
• 69. Cliquer sur ses propres Publicités AdSense
• 70. Autoriser n’importe quel site, même sans aucun rapport, à faire de la publicité sur son blog
• 71. Utiliser ReviewMe ou d’autres services en bâclant le travail.

Flux RSS

• 72. Sous-utiliser les fils RSS
• 73. Ne pas fournir de moyen clair et identifiable pour s’abonner
• 74. Ne pas utiliser Feedburner pour optimiser, quantifier et promouvoir son fil
• 75. Afficher le compteur Feedburner avant d’avoir 50 à 100 abonnés
• 76. Proposer un fil partiel au lieu d’un fil intégral des billets
• 77. Afficher de façon excessive les liens de soumissions

Comment définir l’utilisabilité 2.0 ?

Si l’on se concentre sur l’utilisabilité Web, on peut définir l’utilisabilité 2.0 comme l’ensemble des considérations de design qui résultent des récents changements que connaît le Web. Comme l’a résumé Terry Winograd, les humains ont 3 grandes façons d’interagir avec le monde: la locomotion (se déplacer d’un endroit à l’autre), la conversation (communiquer avec les autres), et la manipulation (utiliser/modifier/créer).

La première phase du web ne concernait que la locomotion. Les entreprises et les gens montaient des sites web tant bien que mal, et les utilisateurs du Web voyagaient entre eux en utilisant des annuaires et des hyperliens. L’explosion récente des outils communautaires (blogs, réseaux sociaux) et des applications Web (création de contenu, éditer) a permis la conversation et la manipulation sur le Web. A présent, au lieu de naviguer de lieu en lieu, les gens se parlent, s’expriment, gèrent leur productivité, se divertissent, et plus encore.

Par conséquent, concevoir des expériences Web utilisables exige plus que l’efficacité des systèmes de navigation, des hyperliens et des temps de téléchargement. Ces considérations étaient cruciales quand les utilisateurs se cantonnaient à naviguer d’un site à un autre. Aujourd’hui c’est toute une nouvelle série de considérations d’utilisabilité qui est requise pour permettre la communication et la manipulation de contenu.

Qu’est-ce qui change entre l’utilisabilité 1.0 et 2.0 ?

Le fait d’être passé à la conversation et à la manipulation en ligne a introduit un ensemble d’expériences Web différentes. Tom Chi a récemment fait remarquer que les sites qui ont le plus de succès sont fondamentalement: des sites de création de contenu (outils de blogging, applications de productivité); des sites d’aggrégation de contenu (des sites d’infos sociales comme digg, etc.); des surfaces d’affichage (pour exposer du contenu comme MySpace); ou des destinations de divertissement (portails à contenu). Chacune de ces expériences a une palette unique de besoins et de mesures d’utilisabilité. Assez souvent, ces considérations vont bien au-delà de ce qui suffisait jadis en termes d’utilisabilité pour les sites standards du type « prospectus. »

A mesure que les barrières pour concevoir et développer ces nouvelles expériences sont renversées (coûts de fonctionnement plus faibles, logiciels disponibles gratuitement), de plus en plus de sites vont être lancés. Et plus il y aura de sites qui se disputent l’attention des gens, plus l’espace sur les rayons en ligne sera pris. Par conséquent, les applications Web ont besoin de se tourner vers les meilleures pratiques traditionnelles du design packaging pour mieux communiquer sur les services qu’ils proposent, sur la façon dont on peut les utiliser, et sur les raisons pour lesquelles ça vaut la peine de les essayer.

La recherche, la distribution de contenu, les outils communautaires, et les interactions riches donnent par ailleurs aux utilisateurs du Web plus de contrôle sur leur expérience avec la capacité à: choisir comment et où ils accèdent au contenu, réagissent au contenu (en évaluant, votant, en ajoutant des drapeaux); partagent du contenu; et interagissent avec le contenu de nouvelles façons (glisser/déposer, édition en ligne, etc.)

Cette vague de nouvelles expériences Web qui donnent aux utilisateurs plus de contrôle est probablement le changement qui a le plus de répercussions sur l’utilisabilité en ligne.