Ergonomie, Rails et Architecture de l'information web (2.0)

Durant les 7 jours précédant la mise en ligne de ce nouveau thème – qui ne passe toujours pas sous Internet Explorer 6 par flemme de ma part – Feedburner m’annonçait un nombre moyen de 541 abonnés à mon flux RSS. Trois semaines jours après l’arrivée de ce gros bouton orange, le nombre moyen d’abonnés sur les 7 derniers jours est passé à 679, soit une progression en valeur absolue de 25% en 20 jours.

Il me reste maintenant à travailler sur mon référencement. J’ai déjà commencé en changeant la structure du contenu et en rapatriant le site en France (merci Otto pour les conseil, si tu en as d’autres, je prends), mais il me reste encore pas mal de travail de ce côté là.

À titre de comparaison, cela représente ma progression totale entre le 15 février et le 5 mai 2007.

Bien que la loi oblige les fabricants à traduire les notices de traduction en 8 à 11 langues différentes, selon le type de produit, on peut légitimement se demander à quoi elles servent tant les utilisateurs les ignorent royalement. On fera cependant une exception pour les notices de montage des meubles de la marque suédoise Ikéa, dont la simplicité est connue dans le monde entier. Il n’en est semble-t-il pas de même avec l’informatique, comme le montre cette tranche d’histoire de l’Internet français dans laquelle on voit un opérateur se battre pour faire comprendre le bon fonctionnement de ses équipements à des clients pourtant supposés technophiles.

Au milieu des années 90, lorsque apparurent les tous premiers modem ADSL USB, la notice d’utilisation de ces derniers spécifiait en toutes lettres que l’installation des outils fournis sur un CDROM était le préalable obligatoire au branchement du modem. Dans le cas contraire, une corruption de la base de registre Windows invitait le contrevenant à réinstaller son poste, avec la perte des données qui résultait.

Après une période de plusieurs mois durant lesquels son service d’assistance technique croulait sous les appels de clients enragés – et on les comprend – un opérateur de l’époque décida de pallier au problème. Dans ce but, il ajouta sur le dessus du carton contenant le kit de connexion un papier sur lequel était écrit en rouge sur fond blanc : “installez les outils présents sur le CDROM avant de brancher le modem”. Le nombre d’appels pour cause de réinstallation forcée diminua d’environ 5%, ce qui est bien, mais pas top.

Afin de faire passer l’information, il fut décidé de placer un autocollant affichant le message d’avertissement en blanc sur fond rouge sur le corps même du modem USB. Il fallait forcer les utilisateurs à prendre connaissance du message au moment du déballage de l’engin. Peine perdu, le nombre d’appels quotidien chuta à nouveau de 5%.

Puisque la notice, la partie supérieure de l’emballage et le modem ne suffisaient pas, il fallait aller au devant des utilisateurs les plus bornés. L’opérateur fit donc appel au bon sens de sa R&D, qui, une fois n’est pas coutume, n’en manquait pas. Il fut donc décidé de mettre un cache sur les prises USB du modem, scellé par l’autocollant sus-cité, pour voir enfin les utilisateurs prendre connaissance des consignes d’utilisation. La quatrième tentative fut la bonne, et les appels à la hotline pour ce motif diminuèrent de plus de 80%.

En guise de conclusion, je rappellerai deux points fondamentaux pour tout concepteur de site web – et concepteur tout court d’ailleurs :

1. N’imaginez pas un seul instant que votre application puisse être un jour utilisée de la manière dont vous l’avez conçue.
2. Si vous devez placer un garde-fou quelque-part, faites le toujours le plus tard possible, et de la manière la plus bloquante possible.

Sur ce, je vous souhaite une bonne nuit. Si vous êtes sages, demain, nous parlerons des manières de concevoir une application web idiotproof.

Intéressante discussion la semaine dernière avec le responsable du service clientèle d’un fournisseur de télécommunications sur l’emploi fait par les utilisateurs des formulaires web de demande d’aide à la hotline.

En substance, il s’avère que, concernant les menus déroulants servant à qualifier les problèmes rencontrés par ses clients, cet opérateur m’a fourni les chiffres suivants :

• 90% choisissent la première option, quelle qu’elle soit.
• 5% choisissent l’option autres si elle est présente.
• 5% choisissent une option plus ou moins en rapport avec leur problème.

Cette constatation introduit deux problèmes évidents :

Les problèmes étant répartis entre les différentes équipes en fonction de leur typologie, un travail de requalification de l’affaire doit être effectué systématiquement avant traitement, avec une retransmission à l’équipe concernée. Outre l’allongement des délais de traitement, cela implique aussi une charge de travail supplémentaire, qui passe par l’analyse de diatribes rédigées dans un français généralement douteux par Madame Michu, dont je vous reparlerai très bientôt.

Vus ces chiffres, quel crédit accorder aux données émises via un menu déroulant, et par extension, par toute zone de formulaire à choix multiples ? Dès lors, on doit classer ces données en trois catégories :

• Celles qui impliquent une dépense ou un investissement du client, par exemple la durée d’un abonnement. On peut raisonnablement tabler sur la fiabilité d’une telle donnée puisqu’elle implique une variation du paiement à l’arrivée.
• Celles qui sont absolument indispensables au traitement du formulaire et qu’une intervention humaine ne peut permettre de recouper à partir d’autres renseignements.
• Les données purement statistiques.

Quant à notre opérateur, afin de mieux répartir le travail entre les équipes chargées des différentes typologies de problèmes, il a tout simplement décidé de générer ses menus déroulants dans un ordre aléatoire.

Ensemble d’éléments me permettant de savoir d’un coup d’oeil où je me trouve, où je suis allé, où je peux aller et comment m’y rendre, la navigation est une composante majeure d’un site web qu’il ne faut en aucun cas négliger. D’une navigation adéquate dépendent aussi bien la fidélisation de vos visiteurs que la transformation d’une visite en vente. Car ne vous y trompez pas, qu’il s’agisse d’un billet sur votre blog, du remplissage d’un formulaire de contact par un futur prospect ou d’un troupeau de zébus malgaches, si vous exposez sur le web, c’est que vous avez forcément quelque-chose à vendre.

Quelques principes simples

Comme vous l’avez vu plus haut, la navigation est :

Un ensemble d’éléments : la navigation ne se compose pas uniquement du menu, mais de tous les éléments permettant de… naviguer et de se retrouver sur le site. Nous reverrons cela en détails plus loin, mais on peut citer des éléments aussi divers que :

• Le menu.
• Le chemin de fer.
• Les liens d’évitement.
• Les titres de parties et sous parties dans un texte.
• Les éléments contextuels.
• Le pied de page.
• Le plan du site (bien qu’on ne puisse pas vraiment parler de navigation à proprement parler).
• Le titre de la page.

Me permettant de savoir où je me trouve : idéalement, l’arrivée sur une page d’un site devrait immédiatement me permettre de savoir où je me trouve, sans rien connaître du site, et surtout sans jamais avoir à réfléchir. Idéalement, si je me suis profondément enfoncé dans l’arborescence du site, je dois également pouvoir en visualiser les différentes étapes.

Me permettant de savoir où je suis allé : lorsque je tombe sur des éléments de navigation, je dois pouvoir reconnaître d’un seul coup d’oeil si je m’y suis déjà rendu ou non, et évidemment sans réfléchir. Pratiquement, cela passe le plus souvent par de la mise en forme. On pourra choisir de modifier la couleur de la police de caractères, traditionnellement en la rendant plus foncée. Pour des raisons d’accessibilité, il n’est cependant pas recommandé de supprimer le soulignement des liens afin de toujours les reconnaître pour ce qu’ils sont. En fonction de la typologie du site, on pourra également afficher la liste des derniers produits visualisés ou des derniers billets lus dans un encart contextuel.

Me permettant de savoir où je peux aller : l’ensemble des grandes rubriques du site doivent être clairement affichées, et cela passe notamment par :

• Montrer de manière explicite qu’il s’agit d’un élément de navigation. En 1996, le menu de mon premier site web arborait crânement la mention “menu”. Quelques semaines plus tard, je me rendais compte à quel point c’était évident, et j’éliminais la mention menu au profit d’indications quant aux rubriques : Cyberpunk, Jeux de Rôles, Roller, Contact.
• Séparer clairement la navigation du contenu.
• Utiliser une nomenclature claire, unifiée et adéquate. Des deux listes suivantes, l’une est bien, l’autre moins :
  • Écrire, Gestion, Discussion, Personnaliser, Configuration.
  • Écrire, Gérer, Discuter, Personnaliser, Configurer.

Les niveaux de navigation

On distingue deux niveaux de navigation : la navigation globale et la navigation contextuelle.

Navigation globale

La navigation globale est présente sur l’ensemble du site. Elle ne change pas quel que soit la page du site sur laquelle l’utilisateur se trouve, qu’il soit authentifié ou non.

En ce qui concerne ce dernier point, j’avais la semaine dernière le cas de la conception d’un site dont la partie “espace authentifié” devait être particulièrement mise en avant, et notamment apparaître dans la navigation global. Afin de résoudre ce point, nous avons placé le formulaire d’inscription et d’authentification derrière l’onglet “mon espace personnel” quand l’utilisateur n’est pas authentifié. Cela nous a permis de libérer de l’espace dans la têtière en n’ajoutant pas de lien “identification” / “inscription”

On trouvera habituellement la navigation dite “globale” sur la têtière, à gauche, ou à droite, et sur le pied de page qui regroupe généralement l’ensemble des liens utilitaires :

• Mentions légales.
• Licence sous laquelle est publiée le contenu.
• Contact.
• Plan du site.

Navigation contextuelle

On voit souvent la confusion entre navigation contextuelle et contenus contextuels, l’un et l’autre étant relativement semblables.

La navigation contextuelle, comme son nom l’indique, se compose d’éléments de navigation contextuels à la partie du site visitée. Le contenu contextuel, lui, est un ensemble de contenus en rapport avec le contenu affiché.

Dans le contenu contextuel, on trouvera notamment :

• Articles de la même famille que celui visité.
• Articles achetés par les visiteurs ayant acheté l’article en cours de consultation.
• Articles complémentaires de l’article consulté (des chaussettes si je regarde une paire de bottes en caoutchouc…).
• …

Nomenclature

La nomenclature, aussi appelée wording est fondamentale en termes de navigation. Elle est d’autant plus délicate à mettre en place que celui qui la choisit est généralement profondément immergée dans le site. Ce qui lui semblera limpide comme de l’eau de roche pourra sembler parfaitement obscure pour le visiteur. Une fois le problème de clarté des libellés bien compris, reste le problème de l’efficacité. La navigation doit en effet inciter le visiteur à acheter cliquer, et pour cela, une seule solution : lui donner envie. Autre point à prendre en compte, les codes et standards généralement admis sur le web. Ces codes peuvent être aussi bien écrits que visuels (oui, je sais, on parle de nomenclature). Si ces codes peuvent sembler clairs pour les spécialistes, il n’en est pas forcément de même pour le grand public.

Exemple :

1. Syndiquer ce site.
2. 
3. Fil RSS.

Ces trois libellés veulent dire exactement la même chose, mais ne seront pas perçus du tout de la même manière par un non spécialiste :

1. Syndicat ? Syndicat ? Qu’est-ce que ça vient faire là, j’ai déjà ma carte à la CGT moi.
2. …
3. Fil RSS, j’ai lu ça dans le dernier Vieille et Moche, ça sert à suivre un blog sans avoir à revenir dessus tous les jours.

Ce site étant destiné à des spécialistes, le choix d’une icône colorée et mise en valeur, reconnue par les gens du sérail, s’imposait d’elle-même.

Pour résumer, le nomenclature de la navigation doit être :

• Très claire : je dois comprendre où je me trouve, et où je peux aller.
• Incitative : je dois avoir envie de cliquer.
• Adaptée aux us et coutumes du public auquel mon site est destiné.

Typologie des sites étudiés

Bien qu’il existe un très grand nombre de sites différents, nous étudierons dans la seconde partie de cet article des mode de navigations en rapport avec 5 typologies de site qui m’ont semblé les plus pertinents :

1. Le site portail institutionnel.
2. Le site marchand.
3. Le site marketing produit.
4. Le blog.
5. L’application web.

À suivre…

À l’occasion de la refonte de son blog, David se pose 16 questions sur la manière d’agencer son site afin d’offrir à ses visiteurs une ergonomie optimale. Ses interrogations pouvant s’appliquer à n’importe quel site, j’ai décidé d’y consacrer un billet, plutôt que répondre dans les commentaires comme il invite ses visiteurs à le faire.

Découverte d’un blog

1. Quelle est la porte d’entrée d’un nouveau blog ? Arrivez-vous le plus souvent sur la page d’accueil ou via un lien direct/une recherche ou autre ?

J’arrive généralement sur un nouveau blog via un médium externe : billet sur un blog déjà lu, ou résultat de recherche. J’arrive donc très rarement sur la page d’accueil. Cependant, quel que soit mon point de chute, je m’attends à y voir un certain nombre d’éléments bien précis (que l’on retrouve – oh surprise – sur celui-ci) :

• Un titre.
• Un descriptif de ce dont traite le blog (autrement appelé tagline).
• Un ou plusieurs billets.
• L’endroit où je me trouve (un chemin de fer est parfois un plus, mais pas toujours adapté).
• Une navigation générale simple et concise, comprenant un lien vers le flux RSS visible et standard.
• Une navigation thématique claire, complète et très facilement accessible (typiquement en première position de la sidebar).

2. Quelle est la page suivante, celle que vous visitez juste après avoir lu celle que vous venez de découvrir ? Les liens généralement fournis sont-ils adaptés ?

Je ne lis généralement pas d’autre page que celle sur laquelle je suis tombé, puisque mon arrivée sur ce blog répond à un besoin précis. Je peux cependant faire une entorse à la règle si la page visitée réunit des conditions précises :

• Que tous les titres des billets soient parfaitement pertinents.
• Que les billets disposent de liens “précédent” et “suivant” affichés en haut de page et affichant le titre des articles vers lesquels ils pointent.
• Ou, mieux, que sous chaque billet se trouve un encadré comprenant un ou plusieurs liens pointant vers des billets connexes.

3. Lorsque vous découvrez un blog intéressant, quel est votre type d’exploration ? Via les tags, les favoris, les archives ?

Quand je ne passe pas par les média explicités ci-dessus, j’utilise généralement la navigation thématique large, autrement appelée catégories, à moins que je ne cherche que des billets traitant d’un sujet vraiment particulier pouvant se définir par un simple mot clé.

Souscription à son flux RSS

4. Quel est le facteur déclenchant la souscription ? Quels sont vos critères de sélection ?

Le premier facteur, c’est la visibilité du flux RSS. Le bouton RSS fait partie des premières choses que je m’attends à voir sur un blog, avec le titre et la tagline. Si je dois me demander où chercher la souscription ne serait-ce qu’une seconde, je n’irai pas plus loin.

Il faut ensuite que le contenu soit vraiment intéressant pour que je rajoute un flux aux quelques centaines qui encombrent déjà mon agrégateur, et là aussi, cela implique des critères tout à fait subjectifs :

• Si c’est un blog personnel, il faut impérativement que je connaisse la personne au moins en ligne.
• Il faut qu’il soit en bon français.
• S’il s’agit d’un blog professionnel ou technique, il faut que sa ligne éditoriale aille dans le sens de mes centres d’intérêt (elle doit donc être clairement définie, notamment à travers la navigation thématique simplifiées).
• Les contenus doivent être pertinents, de qualité, et ne pas être de simple relais des billets à la mode sur les autres blogs. J’ai les favoris populaires de Delicious pour ça.

5. Vous abonnez-vous au flux général ou à une sous-partie (lorsque c’est possible) ?

Le flux général, toujours, mais je ne lis que ce qui m’intéresse (d’où l’utilité de donner des titres pertinents à ses billets).

6. Qu’est ce qui vous pousse à supprimer un fil RSS de votre agrégateur ?

Cette question rejoint celle du facteur déclencheur de la souscription, mais dans le sens inverse :

• Perte de la qualité rédactionnelle.
• Perte durable d’intérêt des billets.
• Transformation du blog en relais de Digg.

Recherche d’un billet particulier

7. Passez-vous par une recherche externe ? interne ?

Arrivant le plus souvent sur un blog par un moteur de recherche, je passe assez peu par la recherche interne. Je m’attends cependant à en trouver une accessible immédiatement à un endroit pertinent : à droite de l’en-tête, ou bien placée dans la sidebar. Il faudra d’ailleurs que je la remette ici quand j’aurai refait la CSS des résultats.

8. Utilisez-vous les archives d’un blog ?

Je n’utilise pas les archives temporelles, qui ne valent finalement que dans le cadre du diarisme (journal intime pas intime). J’utilise en revanche beaucoup les catégories, qui sont une méthode d’archivage thématique.

9. Pour vous rappeler d’un billet, le titre est-il primordial ? Faut-il qu’il soit choquant/spécial ?

Pourquoi me rappeler le titre d’un billet si je sais de quoi il parle et que je dispose d’une recherche locale ? En revanche, utilisant un agrégateur RSS particulièrement peuplé, je m’attends à ce que les titres soient pertinents, sinon je ne lis pas le contenu.

Contenu et disposition

10. Préférez-vous le classique deux colonnes ou le nouveau big footer pour tout ce qui est « annexe » (liens, archives, derniers *, etc) ? ou autre (par exemple ici c’est un peu hybride) ?

Je préfère une solution hybride qui me permette de :

• Embrasser d’un seul coup d’oeil navigation thématique et contenu du billet sur lequel j’arrive.
• Affiche le reste des éléments de navigation à part, de manière bien détachée, claire, et surtout sans interférer avec le contenu, donc de préférence en dessous.

11. Un bon billet de blog, c’est le point de départ vers de nombreuses pages intéressantes à lire ou une impasse car vous n’avez bien souvent pas le temps de lire d’autres ressources ?

Un bon billet de blog, c’est généralement un aller simple dans mes bookmarks Delicious, avec très peu de chances pour que je lise autre chose, à moins que les options de navigation décrites plus haut ne me soient offertes.

12. Quelle importance accordez-vous à la régularité de publication d’un blog ?

La généralisation des agrégateurs RSS a profondément changé notre mode de consultation d’un contenu web : d’actifs – nous allions vers l’information – nous sommes devenus passifs – l’information vient à nous. Dès lors, la fréquence de publication n’a plus grand intérêt : nous ne nous lassons plus à force de nous heurter quotidiennement à un mur de non nouveauté tous les matins à l’heure du petit déjeuner.

Commentaires

13. Souhaitez-vous être tenu au courant des réponses à votre commentaire ? Si oui, comment ?

Il existe deux manières de se tenir au courant des réponses à un commentaire :

• Par courrier électronique.
• Par un flux RSS associé à la discussion.

Pour moi, le premier médium n’est pas envisageable. La plupart des gens ne ferment pas leurs commentaires au bout d’une durée déterminée, et recevoir des mails à propos d’une discussion vieille de deux ans, totalement dépassée et sortie de son contexte est relativement fatiguant.

Le flux RSS, au contraire, me semble présenter des avantages indéniables. Il évite de sortir de l’agrégateur (pour rejoindre le client mail), il se fait oublier tant qu’il n’y a plus de réponse, et il ne vient pas polluer ma boite à lettres.

14. Préférez-vous que la réponse soit incluse à votre propre commentaire ou dans un commentaire suivant ?

Un commentaire suivant.

15. Quelle importance accordez-vous à la qualité de vos commentaires ?

Idéalement, tout blog modérerait les commentaires à priori. Bien que plus contraignante pour l’auteur, cette solution présenterait au moins un avantage : prévenus des risques de modération, les commentateurs ne publieraient que des commentaires pertinents, et éviteraient les missives du genre “ouah, j’adore ce que tu fais, kikooolol”.

16. Avez-vous déjà hésité à répondre après avoir identifié les liens sortants en « nofollow » ?

J’ai une double position vis à vis des liens sortants en « nofollow » :

• Dans les commentaires, ils ne posent pas de problèmes, car ils ne risquent pas d’empêcher les moteurs de recherche de perdre le fil de la discussion.
• Dans les pingbacks ou trackbacks, il me semble qu’ils arrêtent la discussion, au moins virtuellement.

Ma réponse à la question sera “non”, car je ne fais pas attention à la politique du blog avant de poster un commentaire, et je ne le fais pas pour profiter du pagerank de l’auteur du billet mais parce que j’ai quelque chose à dire.

Remarque :

En rédigeant ce billet, je me suis rendu compte que de nombreuses réponses aux questions de David étaient redondantes, et je vous prie de m’en excuser.

Cela révèle un premier problème : en rédigeant son questionnaire, David a pensé de manière thématique, en mettant en avant les éléments que l’on s’attend à trouver sur un blog, et non transverse en isolant les problèmes posés. J’ai songé un moment à reformuler mes réponses afin de supprimer l’ensemble des répétitions, mais cela impliquait de ne plus suivre le jeu des questions réponses (un peu comme, en milieu de troisième, le jour où j’ai regroupé les questions posées autour d’un texte en trois thématiques et rédigé mon premier commentaire composé un an trop tôt au lieu de répondre bêtement comme on me l’avait demandé).

Mon conseil à David serait donc : lorsque tu t’occuperas de ta refonte effective, essaie de réfléchir de manière transverse de manière à ne pas imposer d’éléments redondants à ton visiteur afin de lui offrir un parcours agréable sur un blog par ailleurs de qualité.

[edit]

David a mis en ligne l’ensemble des réponses et un résumé de celles-ci sur son blog.

Note : ce billet ne concerne en rien les velléités d’installation d’une base lunaire permanente par les États-Unis, pas plus que la stratégie militaire en milieu désertique par ailleurs.

Entre la croissance de la largeur des écrans et celle des téléphones mobiles et autres PDA proposant un navigateur web, gageons que la maîtrise de l’espace sera la grande problématique de l’année 2007, et probablement de la suivante.

Si la coutume qui veut qu’on développe en 720 pixels de large pour une résolution de 800600 tend maintenant à s’estomper au profit de 950 pixels pour du 1024760, les jeux ne sont pas faits pour autant. Bien que fort séduisants, les layouts dits “liquides” – car ils s’adaptent et adaptent leur contenu à la largeur de l’écran – posent finalement plus de problèmes qu’ils n’en résolvent.

D’une part, les responsables des chartes graphiques travaillant sous Photoshop, ils sont souvent incapables de penser un espace autre que fixe, et la valeur artistique des layouts liquides tend souvent à désirer. En dehors de celui de Wikio que je trouve tout à fait réussi, je ne crois pas avoir jamais vu de layouts liquides véritablement réussis.

Ensuite parce que, les écrans d’une largeur supérieure à 19 pouces devenant particulièrement abordables dans notre monde de riches – on trouve un 22 pouces pour 400 euros, plus rien à voir avec les 1500 euros minimum de mon 19 pouces acheté il y a 4 ans et demi. Nombreux sont les écrans qui affichent maintenant des résolutions supérieures à 1280 pixels, et une ligne d’une largeur supérieure à 800 pixels est particulièrement pénible à lire, surtout sur la longueur.

Il existe toutefois une solution, qui est celle des layouts semi liquide qui s’adaptent à la taille de l’écran jusqu’à un certain point, en faisant un bon usage de min-width et de max-width, ou de solutions de contournement en Javascript quand ces deux propriétés ne sont pas supportées par le navigateur. Là encore, il s’agit d’une solution à moitié satisfaisante sur les supports de grande largeur : on se retrouve soit avec un très grand espace vide, soit avec des lignes trop longues.

Reste une solution : un layout fixe, mais plein écran.

Mon précédent thème avait pour vocation à mettre le contenu en valeur en débarrassant l’écran de toute source de pollution visuelle gênante – le menu latéral, souvent un nid à publicités – tout en cherchant à occuper l’espace sans pour autant forcer le lecteur à supporter des lignes trop longues.

En utilisant un en-tête coloré faisant toute la largeur de l’écran et offrant une navigation centrée de largeur fixe, on parvient à donner l’illusion du plein écran. Le contenu de la sidebar passe en bas de l’écran selon le même schéma. On parvient ainsi à donner l’illusion du plein écran tout en offrant aux éléments de la sidebar une largeur plus confortable qu’ils ne l’auraient eue sur le coté. L’affichage se fait de manière horizontale et non plus verticale, ce qui permet d’embrasser l’ensemble des éléments d’un seul coup d’oeil et donne une impression de “fourre tout” organisé qu’est bien souvent devenu le menu latéral aujourd’hui.

Ce dernier point prête d’ailleurs à une observation intéressante : en passant d’une disposition verticale à une disposition horizontale, le contenu de ce qui était autrefois un fourre tout dans le menu latéral prend une importance beaucoup plus importante, et on est tenté de le réduire aux informations pertinentes tout en l’ordonnant mieux.

Si j’avais parfaitement réussi à me débarrasser de la sidebar, tout en offrant un lien d’évitement bien placé, je n’avais pas résolu le problème de l’affichage du contenu livré à lui-même sur une seule colonne.

Un premier essai en 720 pixels de large laissait trop de place aux blancs latéraux sur les écrans en 1024*768 et supérieur. Un second essai en 920 pixels de large – pour adapter le contenu à la navigation et au contenu du bas – donnait des résultats catastrophiques en termes de lecture, même avec une police de caractère plus grosse que précédemment.

L’idée m’est venue en visitant Web Designs From Scratch l’autre soir, à la recherche d’une solution acceptable : remettre un menu latéral ne donnant accès qu’au contenu, et à lui-seul, c’est à dire aux différentes catégories du site, pour occuper une partie de l’espace (28% en fait), et utiliser une police de caractères confortable pour le reste du contenu.

Dans le même temps m’est revenu une réflexion que je m’étais faite il y a quelques temps quant à la disposition purement verticale des blogs : puisque je reconquérais l’espace horizontal, il me fallait aussi me réapproprier l’espace vertical. Par exemple en n’affichant plus la longue litanie des 10 derniers billets à l’écran, mais seulement le dernier, et le résumé des précédent dans l’espace du bas devenu source de contenu à part entière.

Et voilà, cela me donne un nouveau thème plus propre, plus lisible, certainement perfectible, et il sera perfectionné, mais la disposition et la mise en valeur des éléments sont là. Histoire de commencer 2007 du bon pied (d’ailleurs si il y a un gentil graphiste pour me donner un coup de main sur 2-3 trucs, je suis complètement preneur, mon sens artistique étant proche de zéro).

Contrairement à la très majorité de mes compatriotes, j’utilise un clavier QWERTY américain. Plus exactement, un clavier américain accentué qui me permet d’écrire les caractères accentués, y compris les majuscules, et ce au prix d’une petite gymnastique mentale, du moins au début, à laquelle je ne fais plus attention depuis des années. J’ai commencé à utiliser un clavier américain dans les années 80, quand les limitations de mémoire de mon 8086 m’empêchaient de charger en même temps le clavier français et l’éditeur de Quick Basic 4.5. Je me suis rapidement rendu compte combien accéder à des touches indispensables comme [], {}, \ ou () sans devoir effectuer des acrobaties à rendre jalouses les contorsionnistes du Grand Cirque de Pékin pouvait être agréable.

Aujourd’hui, la très grande majorité des gestionnaires de session proposent une liste graphique des utilisateurs pouvant accéder à la machine afin que ceux-ci n’aient plus besoin de taper leur identifiant. Cet effort louable en matière de confort d’utilisation n’est certes pas exempt de soucis de sécurité, mais dans un environnement familial, il rajoute une touche de convivialité non négligeable. On retrouve ces fonctionnalités sous Windows XP, KDM, GDM, et probablement bien d’autres.

L’effort d’utilisabilité aurait pu être poussé un peu plus avant, notamment en permettant de choisir son clavier dès l’identification. La raison à cela ? Taper son mot de passe à deux à l’heure en cherchant fiévreusement ses touches sur un clavier totalement étranger a quelque chose de particulièrement pénible.

Edit :
Une feature request a été ouverte pour GDM et quelqu’un y avait déjà pensé sous KDM.

Je rentre tout juste de l’apéro organisé à l’occasion des Journées Mondiales de l’Utilisabilité, organisé par Frédéric Cavazza. Excellente occasion de rencontrer des spécialistes d’une discipline à laquelle je m’intéresse et que j’ai la chance de côtoyer quotidiennement dans mon travail. Proposer des outils simples, pratiques, intuitifs, rapides (et qui marchent) est particulièrement important si l’on veut attirer et fidéliser une clientèle grand public sur le web.

Frédéric en profitait pour lancer les cafés de l’ergonomie à Paris, une initiative des plus intéressante : les ergonomes (badges oranges) se font payer à boire par les non ergonomes (badges verts dont je faisais partie) en échange d’une analyse de leur site.

Ce site étant en pleine restructuration, je venais simplement nouer de nouveaux contacts autour d’une bière. J’ai toutefois pu exposer des idées qui me travaillent depuis quelques semaines, et il semble que je sois sur la bonne voie. Il me reste cependant énormément de travail pour formaliser la chose et aboutir à quelque chose de concret, et les journées ne durent que 24 heures.

Si l’événement vous intéressait mais que vous n’avez pas pu vous y rendre, vous pouvez en lire un rapide compte rendu chez Frédéric, en attendant l’arrivée des vidéos des conférences. D’ailleurs, si je ne devais garder qu’un seul usage des services de partage de vidéos en ligne, je crois que ce serait le partage de la connaissance.

Quelques jours avant la mise en place de ma dernière feuille de style, j’ai demandé à une amie de bien vouloir se soumettre au petit jeu du test d’utilisabilité. Il s’agissait pour moi de dégager les quelques pistes propres à améliorer l’expérience de l’utilisateur sur ce site, afin de le mettre en corrélation avec les contenus énoncés. Le choix de cette amie était tout sauf innocent, puisqu’elle se rapproche de ce fantasme de laboratoire qu’on appelle l’utilisateur moyen, celui utilise le web pour consulter ses mails, discuter sur MSN et effectuer quelques recherches dans le cadre de ses études.

Je centrais mes questions sur trois axes que je pensais les plus importants :

1. Appréhension du site lors de son arrivée.
2. Facilité à lire les textes proposés.
3. Facilité à trouver le contenu.

Mes premières questions concernaient son arrivée sur le site et ses impressions au premier coup d’oeil. Je voulais qu’elle me dise :

• Ce qu’il était.
• Ce qu’elle s’attendait à y trouver.
• À qui il était destiné.
• Ce qu’elle en pensait.

Je retranscris une partie de ce qu’elle m’a dit lors de ce premier contact, en omettant pas mal de blabla afin d’arriver à l’essentiel :

Il porte ton nom… la photo est sympa mais tu aurais pu te raser… il y a écrit “blog” en haut à gauche…
[…]
C’est ton blog, donc tu dois y raconter ta vie, tes états d’âme, y mettre des photos…
[…]
Le menu est à moitié en français, à moitié en anglais, c’est un peu bizarre… Il y a ton CV et des thèmes, mais je ne sais pas ce que c’est…
[…] J’aime bien la manière dont le bleu dépasse sur le menu à droite, on dirait un livre. Mais les couleurs ne te vont pas. C’est trop chargé, ça ne te ressemble pas. J’aurais plutôt vu un truc tout zen, tout blanc.

Ce premier passage m’a permis de mettre à jour plusieurs points :

• Le menu mal traduit déroute le visiteur français.
• On ne sait pas à quoi correspond le lien thèmes.
• La thématique principale du site est trompeuse.

Le troisième point m’intéressait particulièrement. Si une amie proche ne parvenait pas à dire de quoi parlait ce site, à plus forte raison un illustre inconnu y débarquant par hasard pour la première fois n’avait aucune chance d’y arriver. Malheureusement, si je connaissais le symptôme, il me fallait encore en trouver la cause.

Il m’a bien fallu deux ou trois jours pour trouver la source du problème : depuis le mois de juin, le site n’affichait plus de tagline que dans le flux RSS, et encore s’agissait-il plus d’un moto que d’une véritable accroche. Cela peut sembler long vue la simplicité de la chose, mais j’avais vraiment trop de travail pour me concentrer sur le problème. Et puis, si discerner l’évidence était à la portée du premier venu, ça se saurait.

Une tagline… mais qu’est-ce que ça peut bien être ?

Une tagline, ou sous titre, est une phrase d’accroche précise et concise, placée à côté, au dessus ou en dessous du titre d’un site web. Elle doit expliquer de manière succincte la raison d’être de ce site ou de la société qui le sous tend, décrypter un nom ou un sigle le plus souvent abscons, ou donner envie au visiteur de passage d’y revenir volontairement parce qu’il correspond à ses besoins ou ses envies.

Une tagline n’est pas un moto. Une tagline est une accroche explicative, quand le moto se rapproche plus de la profession de foi :

Plombier sauteur depuis 1981 est une tagline, elle définit précisément l’activité de Mario.

Nous mettons un point d’honneur à sauver la princesse à la fin de chaque épisode est un moto, une profession de foi.

On trouve d’ailleurs les taglines en dehors du web depuis bien longtemps.

Et à quoi ça sert ?

Deviner la fonction et la destination première d’un site web au premier coup d’oeil est généralement très difficile, voire impossible, et le titre n’est généralement pas assez évocateur pour se suffire à lui-même. Difficile de deviner que Flickr est un service de galerie en ligne, Whitehouse.com un site pornographique et Google un moteur de recherches non ?

Certains sites peuvent, cependant, se passer de tagline :

• Parce que leur nom est rentrés dans le langage courant : Ebay, Amazon, Yahoo…
• Parce qu’ils sont très fortement rattachés à une marque mondialement connue comme CNN, Microsoft, Apple…
• Parce que leur fonction première est évidente au premier coup d’oeil. C’est le cas d’école de l’interface utilisateur de Google : un nom, une zone de saisie et un bouton “chercher sur Google”. Et c’est tout.

Cela dit, ce n’est pas parce que ces sites PEUVENT se passer d’une tagline qu’ils DOIVENT le faire. La tagline est une bonne manière d’accueillir le visiteur souvent plus efficace et approprié qu’un message de bienvenue creux et conventionnel.

Tous ces sites sont cependant des exceptions notoires, et dans la vraie vie, les choses se passent – évidemment – un peu différemment.

Que le titre d’un livre ne donne aucune indication sur son contenu ne choquera personne. Une rapide lecture du résumé placé en quatrième de couverture éclairera l’acheteur potentiel sur le scénario, l’époque, le lieu et le genre du livre. Il en va – évidemment – autrement d’un site web. Le visiteur n’a pas le temps de lire les pages, il les survole à la recherche d’un mot clé indiquant un contenu susceptible de l’intéresser. Ou ça passe, et le visiteur devient du même coup utilisateur potentiel, ou ça ne passe pas, et il va tenter sa chance ailleurs. C’est la raison d’être de la tagline : dire au visiteur ce qu’il trouvera sur le site qu’il visite sans avoir à le découvrir par lui-même, surtout quand ce n’est pas forcément évident. En un mot, Ne pas mettre de tagline revient à vouloir faire visionner un film ouzbek en version originale non sous-titrée à des inconnus recrutés au fin fond de la Creuse.

Comment différencier la bonne tagline de la mauvaise tagline ? La méthode bouchenoise.

Une mauvaise tagline, c’est une phrase placée à côté du titre d’un site web, et qui sert à décrire le contenu de ce site. Une bonne tagline, c’est une une phrase placée à côté du titre d’un site web, et qui sert à décrire le contenu de ce site, mais c’est une bonne tagline.

Pour cette partie, je prendrai l’exemple du site imaginaire pizzaworld.com, un site spécialisé dans la distribution de pizzas du producteur au consommateur, avec comparateur de prix associé. Ne riez pas, j’ai vraiment pensé à lancer un tel site à l’échelle française il y a quelques années. J’avais à l’époque pensé à plusieurs slogans, nous en étudierons quelques exemples ici.

• Une mauvaise tagline est vague : “La recherche de pizzas sur Internet” est beaucoup trop vague en omettant de parler des deux principales fonctionnalités du site : le service de commande en ligne et le comparateur de prix.
• Une bonne tagline va droit au but : “Les meilleures pizzas du web chez vous en 30 minutes” va à l’essentiel en prenant en compte l’aspect qualitatif apporté par le comparateur de prix et le service de proximité offert par la livraison de pizzas à domicile. Une bonne tagline résume l’activité du site, ses destinataires, et rappelle si possible ce qui fait sa force.
• Une tagline trop longue est une mauvaise tagline : “Comparez les prix des pizzerias de votre ville et faites vous livrer chez vous ou au bureau en moins de trente minutes sinon nos conditions générales de vente vous garantissent un remboursement intégrale sous trois mois” est beaucoup trop longue et détaillée.
• Une bonne tagline est courte et se retient facilement : “Les meilleures pizzas du web” est certes moins précise que le premier exemple de cette série, mais elle est courte, percutante, et simple à retenir. Si elle passe la livraison à domicile sous silence, elle permet cependant de se faire une bonne idée des objectifs du site. Idéalement, une bonne accroche fait entre six et une dizaine de mots.

Blogs et taglines

Dès qu’il s’agit de blogs personnels, on se retrouve souvent confronté à une difficulté supplémentaire : le trop grand nombre de données hétérogènes sans ligne éditoriale définie amènent le plus souvent à un agrégat de tranches de vies naïves ou pseudo tragiques, de paroles de chansons, de critiques de livres, de films et d’actualités ou de photos. On se retrouve dans le cas d’un espace d’expression personnel ouvert à la réaction. Ce qui compte n’est pas tant le contenu exprimé que le fait que son auteur puisse le publier, et les réactions se limitent souvent à de l’approbation moutonnière – “c’est super ce que tu dis, je suis trop d’accord avec toi” – de l’épanchement narcissique – “oui, je te comprends trop, moi j’ai vécu ça…” – ou par un désaccord révolté – “non mais pour qui tu te prends, respecte l’avis des autres, t’as pas le droit de dire ça”.

Difficile dans ces cas là de trouver une accroche qui respecte les principes énoncés un peu plus haut. On retrouve pourtant quelques motifs récurrents, comme :

• La mise en avant d’un trait caractéristique de l’auteur. Je me suis longtemps défini par cette citation de Daria : “I don’t have a low self-esteem, it’s a mistake. I have a low esteem for everyone else”. Quant à Utena, elle se décrit elle-même comme une “pin-up girl for frontal assault”.
• Une phrase généraliste, et pourtant à même d’englober le contenu du site. On arrive ainsi sur “le blog de Mac Tuitui” ou sur le “journal intime pas intime de Lou”.
• Une phrase sans queue ni tête destinée à intriguer le lecteur quant aux contenus présents et à venir. Michel Valdrighi utilise ainsi “patience et longueur de temps sont morts pendus”.
• Une accroche apposée sans conviction à l’ouverture du blog et ayant survécu à tous les changements éditoriaux et stylistiques de son propriétaire, et sans véritable rapport avec le contenu actuel. Passez sur n’importe quel blog adolescent ayant survécu à ses cinquante premiers billets et vous verrez de quoi je veux parler : citations de “grands penseurs épris de liberté” (Che Guevarra), extraits de chansons “trop rebelles” (Kyo, Saez…).
• Une profession de foi résumant l’ensemble de la pensée de l’auteur : “les médias traditionnels diffusent des messages, les blogs démarrent des discussions” chez Loïc le Meur, ou “ça va toujours mieux en le disant chez Kwyxz”.
• Pas de tagline du tout.

Les choses changent quelque peu dès qu’il s’agit de blogs spécialisés, ou blogs de niche. La spécificité des contenus et l’existence de communautés de spécialistes réunis autour de tel ou tel sujet – la cuisine, les standards du web, la photo… – permettent de cibler les auditeurs de manière très précise :

• Par l’utilisation d’une “tag line”, en deux mots, au sens du Microformat “rel=tag”. Il s’agit d’une série de mots clés pertinents apposés les uns à la suite des autres et définissant le champs sémantique du contenu proposé.
• En utilisant un slogan proche de ceux utilisés sur les sites de e-commerce, les grandes marques ou les institutionnels : “le recrutement 2.0”, chez Altaïde
• En apposant une profession de foi donnant une idée confuse du contenu proposé : “le web est la plus belle conquête de l’homme”, chez Presse Citron.

Exercice

Dans le précédent paragraphe, j’ai volontairement mélangé bonnes et mauvaises taglines (d’un point de vue tout à fait formel, il ne s’agit pas de juger du texte de tel ou tel site). Saurez vous les retrouver ?

Entre deux bouclages de projets, une séance de photos avec un modèle plus que charmant et une reprise intensive de mon entraînement à DDR, je voulais profiter du week-end pour refaire le visuel de quatre sites dont je m’occupe et qui méritent clairement un petit rafraîchissement.