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.

Les bonnes pratiques, c’est faire un site facile à utiliser, fournir de bons outils de recherche, employer du texte dépourvu de jargon, faire des tests d’utilisabilité, et prendre en compte le design avant même d’écrire la première ligne de code.

D’autre part, différentes études révèlent que les utilisateurs de sites se divisent en trois groupes. Un premier qui y contribue de façon régulière (environ 1%); un deuxième qui y contribue de façon occasionnelle (environ 9%); et une majorité qui n’y contribue quasiment jamais (90%).

« La plupart des gens veulent simplement entrer, prendre ce qu’ils cherchent, et ressortir, » a déclaré Mr Nielsen. « Pour eux, le Web n’est pas un but en soi. Ce n’est qu’un outil. »

En bref, les entreprises Web qui se précipitent pour servir une toute petite communauté d’habitués devraient se rendre compte qu’ils font un site bien moins facile à utiliser pour l’immense majorité de ceux qui viennent sur le site dans un but spécifique.

1. L’utilisateur doit savoir en quelques secondes de quoi parle le site
2. Faites en sorte que le contenu soit facile à scanner
3. N’utilisez pas des polices fantaisistes qui sont illisibles
4. N’utilisez pas des polices minuscules
5. N’ouvrez pas de nouvelles fenêtres dans le navigateur
6. Ne redimensionnez pas la fenêtre de navigation de l’utilisateur
7. N’obligez pas l’internautre à s’enregistrer sauf absolue nécessité
8. N’abonnez jamais le visiteur à quoi que ce soit sans son consentement
9. N’abusez pas de Flash
10. Ne jouez aucune musique
11. Si vraiment vous DEVEZ jouer un fichier audio, laissez à l’utilisateur le soin de le lancer
12. N’encombrez pas votre site avec des badges
13. N’utilisez pas de page d’accueil qui ne fait que lancer le « véritable » site
14. Donnez tous les détails pour vous contacter
15. Ne bloquez pas le bouton « Précédent »
16. Ne créez pas de texte qui fatigue les yeux
17. Evitez les structures URL complexes
18. Utilisez les design CSS plutôt qu’une mise en forme des pages en tableaux
19. Faites en sorte que les utilisateurs puissent lancer une recherche dans tout le site
20. Evitez les menus déroulants
21. Utilisez des menus de navigation textuelle
22. Si vous créez un lien vers des fichiers PDF, signalez-le
23. N’embrouillez pas l’utilisateur avec plusieurs versions de votre site
24. Distinguez la publicité du contenu
25. Utilisez une structure de navigation simple
26. Evitez les « intros »
27. N’utilisez pas d’éditeurs HTML qui produisent du code impropre
28. Faites en sorte que votre site soit lisible dans tous les navigateurs
29. N’oubliez pas de remplir le « href » de vos liens
30. Ne masquez pas vos url dans la barre de statut
31. Faites en sorte que vos liens soient visibles (couleur, contraste, soulignement, etc.)
32. Ne soulignez pas et ne colorez pas le texte normal
33. Changez la couleur des liens activés
34. N’utilisez pas de GIFs animés
35. Utilisez les attributs ALT et TITLE pour les images
36. N’utilisez pas de couleurs criardes
37. Laissez tomber les pop ups
38. Evitez les liens qui exécutent du javascript
39. Incluez des liens fonctionnels dans votre pied-de-page
40. Evitez les pages trop longues
41. Pas de scrolling horizontal
42. Pas de fautes d’orthographe ou de grammaire
43. Si vous utilisez les CAPTCHA arrangez-vous pour que les lettres soient lisibles

1 – Dites-moi où je suis

Les titres, sous-titres (si nécessaire) et le fil d’Ariane (i.e. Accueil > Catégorie > Sous-catégorie > Produit) doivent pouvoir permettre à l’utilisateur de se repérer dans l’arborescence du site.

2 – Laissez-moi supprimer mes options de limitation

Plutôt que d’obliger l’utilisateur à utiliser le bouton « précédent », il faut lui permettre de supprimer les sélections de navigation quand il navigue à l’intérieur d’une catégorie.

3 – Laissez-moi trier comme je veux

Les standards sont « Par prix – du moins cher au plus cher, » « Par prix – du plus cher au moins cher, » « Par popularité, » alias « Meilleures ventes, » « Avis des consommateurs », « Nouveautés » ou « Plus récents » etc.

4 – Montrez-moi les produits

C’est la moindre des choses que d’offrir la possibilité à l’utilisateur de voir chaque produit sur une page. Avec l’ADSL, l’argument du temps de chargement ne tient plus.

5 – Affiner les options rend les gens heureux

L’expérience utilisateur n’en est que meilleure.

6 – Plus vous êtes spécifique, mieux c’est

Il y a une différence entre affiner sa navigation dans une section et naviguer vers une sous-catégorie. C’est une sage décision que de proposer cette dernière option quand c’est pertinent.

7 – Dites-moi combien ça va me coûter ou combien je vais économiser

Notamment pour les sites de discount.

8 – Laissez la barre de recherche à portée de clic

Ne vous contentez pas de montrer la recherche et ses résultats. Centrez la barre de recherche, tout en laissant la requête de l’utilisateur dans la boîte pour permettre des modifications éventuelles.

9 – Je veux des options de recherche avancée

Selon le prix, les options, la couleur, la taille, le modèle, etc. Sachez que les utilisateurs considèrent que l’aspect le plus frustrant des sites e-commerce est précisément la « recherche. »

10 – Soyez le plus précis possible, tout en restant pertinent

eBay par exemple a fait du bon boulot en montrant quelles requêtes auraient engendré des résultats.

11 – Partagez l’information cruciale « convient pour… »

Je ne saurais vous dire combien de sites qui vendaient des sacoches pour portables j’ai dû consulter avant d’en trouver un qui précisait pour quelles tailles de portable elles convenaient.

12 – Dites-moi si vous l’avez en rayon

Il y a encore des sites qui vous laissent ajouter des produits à votre panier avant de vous révéler l’affreuse vérité: l’objet que vous convoitiez est en rupture de stock. Le genre d’expérience qui vous refroidit à jamais.

13 – Il n’y a jamais trop de photos

Ou même les interfaces 3D quand c’est approprié: c’est inestimable pour rendre l’expérience plus réelle. En aucun cas, une seule photo ne peut faire l’affaire.

14 – Je veux voir les options de livraison

Certains utilisateurs ont besoin de les connaître avant même de commencer à naviguer. Il faut mettre le lien en évidence à tout moment dans la navigation.

15 – Si vous ne voulez pas me l’envoyer, dites-moi qui peut le faire

Si une marque refuse de m’expédier un article cher, elle doit me dire par un lien quel partenaire peut le faire.

16 – Envoyez-moi un email pour me rassurer

Une confirmation par email est nécessaire pour ne pas laisser les clients dans le vague, et accessoirement pour éviter d’inonder le service après-vente de mails et d’appels.

17 – Donnez tous les détails de la commande le plus tôt possible

Pour rassurer le consommateur, incluez tous les détails de la commande dans le mail de confirmation. En cas d’erreur, elle doit pouvoir être repérée bien avant l’arrivée du colis.

Il déplore que beaucoup de designers—lui y compris—ont une approche des projets qui n’inclue que l’architecture informationnelle, le design d’information, le design d’interaction, et le design visuel. Ces disciplines étant fondamentalement différentes de celles utilisées par ceux qui créent des narrations linéaires continues (au cinéma, à la télévision, et même dans la musique). Or de nouvelles applications vont rendre les éléments narratifs comme le timing, l’allure, et le rythme de plus en plus importants, et vont permettre de faire passer les utilisateurs de la simple compréhension à l’implication, et au final, à l’immersion dans les produits et services digitaux.

Tout l’article porte sur le concept de pause, qui fait défaut dans la plupart des designs d’interface. Il n’y a rien de moins naturel qu’un système qui ne se repose jamais entre deux activités. De même, à un moment ou à un autre, les utilisateurs ont besoin de souffler. D’ailleurs, dans la plupart, sinon toutes, les formes de communication humaine, nous utilisons des pauses pour indiquer que l’on passe d’un état à un autre. Dans l’écriture, ce sont les paragraphes. Dans le design graphique, ce sont les blancs. A l’oral, ce sont les silences. Et en matière de design d’interface, on utilise les transitions animées.

Je n’ai retenu que l’exemple parlant de l’interface collaborative Basecamp, car je l’utilise tous les jours. Quand un utilisateur poste un nouveau message, un cadre jaune met en valeur le texte du message, puis se dissipe rapidement. On a donc une transition qui marque le passage de l’écran de saisie où il a posté son message au message board lui-même. A pomdoo, on apprécie beaucoup cette délicate attention, à la fois reposante et porteuse de sens.

En bref, quand elle est utilisée de manière appropriée, une transition animée peut donc susciter l’anticipation, et faire le ménage dans le fouillis qui se dispute l’attention de l’utilisateur, ce qui lui permet de se concentrer plus efficacement sur ce qui va suivre. Elle contribue à la fluidité et au rythme de l’expérience utilisateur.

L’idée est de dresser chaque année un profil de ceux qui font des sites (designers, développeurs, chefs de projet, webmasters, rédacteurs, etc.). Quels sont leurs diplômes, leurs compétences, leur âge. Comment, où, avec qui ils travaillent. Ce qu’ils gagnent, ce qui compte pour eux, leurs ambitions et perspectives.

L’objectif est de faire connaître le web design et d’augmenter le respect pour le métier.

Il y a même des cadeaux à gagner! Un ticket pour An event apart qui aura lieu le 21 et 22 juin à Seattle, un iPod, un T-Shirt.

Même avec un niveau d’anglais moyen, l’enquête ne prend que quelques minutes.
Alors, à votre tour! Avant le 22 mai!