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… ;-)

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 ?

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.

1. où il se trouve, 2. où il peut aller, 3. où il est déjà allé

En d’autres mots, il veut connaître son présent, son passé, son futur. Exigences excessives? Non, légitimes.

C’est comme ces cartes du réseau de transports urbains que je vois tous les jours aux arrêts de tram et de bus. Ah! qu’il est rassurant pour un non-habitué, ce petit cercle rouge qui vous dit: vous êtes ici. Grâce à lui, on peut répondre aux trois questions et donc retracer son itinéraire.

Finis les moments de panique: mais en fait, je suis où, là?
Comme le dit Derek Powazek dans son article Where Am I?, quand les gens arrivent sur votre site, ils sont comme des touristes qui débarquent dans une ville étrangère.
D’où la nécessité de penser dès le départ un design qui facilite la navigation, à travers l’architecture de l’information: par des tailles de polices différentes, des soulignements, des couleurs, des flêches. Toutes ces astuces graphiques dans les menus sont au service d’une navigation claire et intuitive, garante d’un confort d’utilisation et donc d’une utilisabilité optimale.

Un bel exemple de panique que l’on vit très fréquemment, c’est ce phénomène qui fait froid dans le dos rien que d’en parler: le lien vers la page courante (brrr).
Vous savez, il y a cette petite main rassurante qui vous invite à cliquer sur un lien en toute confiance. Bien entendu, on s’attend à ce que quelque chose se passe, puisqu’on doit normalement être transporté dans un autre endroit. Eh bien non.
C’est le cas typique du logo cliquable, et de son frère jumeau, le lien « retour à la page d’accueil » quand dans les deux cas, vous y êtes déjà, sur la page d’accueil.
Et là, c’est le drame existentiel.

Et bien sûr, il y a parfois le pompon: atterrir sur une page d’un site sans avoir la possibilité de trouver aucun lien vers cette fameuse page d’accueil: pas de logo, pas de menu, pas de lien isolé. La seule solution pour y revenir étant de supprimer dans la barre d’URL tout ce qui se trouve après l’extension .com, .fr, etc. Sans compter que l’utilisabilité des adresses url laisse parfois à désirer, mais cette question fera l’objet d’un autre article.

Résultat des courses: multiplication des opérations pour l’internaute, et donc expérience utilisateur déplorable. A moins d’être patient et indulgent, ce qui n’est pas mon cas. :)