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

À 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.

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.

Webfaction fait partie de ces hébergeurs qui ont bien compris l’intérêt de proposer de bonnes alternatives à PHP – comme Ruby on Rails par exemple – et des alternatives aux panneaux de contrôle généralement peu intuitifs ou lents proposés en standard par la grande majorité des sociétés du même genre (webmin, plesk…).

Je viens de découvrir sans grand intérêt le blog de Blogonautes, un annuaire de blogs fonctionnant sur inscription et recensant à ce jour un peu plus de 20000 entrées.

J’ai récupéré le cours d’ergonomie des logiciels d’un collègue diplômé du master éponyme à l’Université de Reims, et je travaille dessus depuis déjà pas loin de deux semaines. Sans révolutionner mes convictions profondes en la matière, je glane tout de même de très nombreux éléments qui devraient me permettre de grandement améliorer l’utilisabilité les outils que j’ai pu développer jusqu’ici, à commencer par ce site, qui devrait donc connaître un certain nombres de changements d’ici pas longtemps.

Clarté, concision et précision sont les trois mamelles d’un dossier bien ficelé. Le contenu lui-même passe après.

Clarté, parce que “ce qui se conçoit bien s’énonce clairement”. Un dossier fouillis ou obscure passera immédiatement à la trappe. Les points importants doivent immédiatement ressortir. Le contenu doit être compréhensible et sans ambiguïtés dès la première lecture.

Concision, parce que rien n’est plus agaçant qu’une phrase dont on a oublie le début en arrivant à la fin. Des phrases simples et courtes - sujet / verbe / un à deux compléments - valent mieux qu’un long discours ampoulé et lénifiant. Le contenu en est d’autant plus percutant qu’il ressort facilement. Et le lecteur n’aura pas l’impression qu’on cherche à le berner.

Précision, parce que c’est bien de montrer qu’on sait de quoi on parle. Quelqu’un de précis rassure son interlocuteur. Quelqu’un qui délaye l’inquiète et l’ennuie, quand il ne l’endort pas.