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

Typo, le blogware en Ruby on Rails dont je suis mainteneur depuis un an et demi souffre malgré lui d’une réputation de bloatware, qui n’a – malheureusement – pas toujours été injustifiée, au point de lui coller à la peau comme le sparadrap du Capitaine Haddock. Un des très gros efforts du passage de la 4.0 à la 5.0 a porté sur une refonte complète de la back end afin d’en éliminer les lourdeurs.
Il semble que nous ayons réussi notre pari, comme l’explique cet article de Kevin Williams, utilisateur de Typo et heureux de l’être dont je vous donne la traduction ci-dessous :

Un peu d’humour et d’auto dérision en ce samedi matin, avec cette vignette trouvée chez Guim.

Et voilà, c’est fait, avec seulement 14 jours de retard sur la date prévue, et juste à temps pour la nouvelle année. Après 7 mois de glande développement plus ou moins intensif, nous avons le plaisir de vous annoncer la sortie de Typo 5.0 “Eugène Atget”. C’est une version particulièrement importante, remplie de nouveautés, pleine de corrections et d’un nombre incroyable d’améliorations. Et si vous trouvez que cet article commence comme l’annonce par DHH de la sortie de Rails 2.0, vous avez parfaitement raison, et pour cause. Typo 5.0 fonctionne avec Rails 2.0, et uniquement Rails 2.0, et ce changement de version du framework justifie également notre changement de version majeure.

Avant de vous énumérer la liste des nouveautés, je souhaite remercier tout particulièrement toutes les personnes qui nous ont aidé à rendre cette sortie possible, à commencer par Piers, en passant par les (centaines de) contributeurs qui nous ont proposé des patchs, jusqu’à la communauté de #typo qui maintenait la flamme aux jours les plus incertains de notre aventure. Nous ne sommes pas morts, et c’est en partie grâce à vous. Merci.

Malgré une mise en sommeil du projet depuis quelques temps, Typo, le blogware open source auquel je contribue quand j’en trouve le temps n’est pas mort, au contraire. Nous manquons cependant un peu de temps, et de ressources, Piers et moi étant les deux derniers développeurs encore actifs de l’application.

Ne mettez-plus votre trunk à jour, nous travaillons désormais sur une branche destinée à Rails 2.0, qui ne devrait pas trop tarder à sortir. Nous disposons déjà d’une branche parfaitement fonctionnelle, qui ajoute en plus pas mal de corrections de bugs et d’améliorations, notamment au niveau des thèmes qui offrent désormais une souplesse jamais égalée sur un blogware. Les congés de fin d’année aidant, nous espérons sortir une version stable de Typo en même temps que Rails 2.0, même si je doute que nous puissions porter le patch permettant le support de blogs multiples développé par Sprewell.

Après le Blog Day, à peu près aussi inutile que la Saint Valentin, je vous propose de participer au Blog Action Day, la dernière initiative qui ne sert à rien, mais dont il faut absolument parler pour ne pas avoir l’air du dernier des neuneux dans la blogosphère. D’ailleurs, j’en parle, preuve que je suis un mec cool.

Le principe du Blog Action Day est on ne peut plus simple : le 15 octobre, tous les blogueurs de la planète, quelle que soit leur ligne éditoriale devront bloguer au sujet d’une même cause, selon le mot d’ordre “un problème, un jour, des milliers de voix”. La version 2007 est – évidemment – consacrée à l’environnement, cause fondamentale, dont on ne parle décidément pas assez.

Après dix jours de dur labeur dont trois de réflexion sur les changements à apporter, la nouvelle version du blog est enfin en ligne. Cette refonte en profondeur, graphique, ergonomique et fonctionnelle a entraîné nombres de développements, et ce afin de contourner certaines fonctionnalités de Typo et de lui en ajouter quelques autres.

La refonte graphique a certainement été de loin la plus longue et la plus fastidieuse. Elle a commencé par la lecture d’un excellent article de David Larlet sur l’importance du rythme vertical en CSS, et par la visite d’un très grand nombre de sites à la recherche d’idées. Sites de templates, de designers, blogs… soit près d’un millier de site visités en trois jours, et quelques moments de découragement durant lesquels il m’est arrivé d’envisager l’utilisation de templates tout faits. Mes desiderata tournaient autour de la simplicité, la propreté, un espace pour le contenu d’au moins 620 pixels de large afin d’afficher correctement mes photos, et un big footer. Merci à Jean-Luc Derrien, de Furya Créations de m’avoir aidé dans la transcendance de mon indigence artistique et photoshopienne.

Dans son article Reviving Anorexic Web Writing publié sur A List Apart et dont je vous recommande chaudement la lecture en entier, Amber Simmons s’intéresse au pied de page, ce parent pauvre, mal aimé, du design web. Elle y dénoncer le peu d’attention qui leur est accordé avant de terminer sur la qualité de l’expérience utilisateur connue avec le “big footer”.

Les pieds de page sont une insulte au visiteur. La grande majorité d’entre eux est totalement inutile : ils contiennent généralement quelques liens en vrac, parfois des mentions légales, ou des informations de contact, mais rien d’autre. Personne ne les lit jamais pour la simple raison qu’il n’y a rien à y lire.

[…]

Un de mes pieds de pages favori est celui du blog d’Emily Gordon, un vrai pied de page d’écrivain. Il contient des informations vraiment intéressantes. Elle y parle d’elle-même, de ce qu’elle écrit et de ce qu’elle a écrit. Elle s’adresse directement à son lecteur. Quand j’arrive sur son pied de page et que je vois tout ce qu’elle y offre, j’ai le sentiment qu’elle s’attendait à ce que je vienne jusque là, et qu’elle y approuve ma visite. J’adore le fait qu’elle ait choisi de m’offrir bien plus d’informations que je n’imaginais à priori en trouver, à un endroit généralement laissé pour mort. Je me sens récompensée chaque fois que je finis de lire son blog, et je trouve que c’est une merveilleuse expérience utilisateur.

Je suis un grand adepte du “big footer” depuis la première fois que je l’ai vu, à l’époque où je servais de cobaye au thème Hemingway, et j’ai tendance à le placer dès que son utilisation semble s’imposer. Contrairement à ce qu’on pourrait croire, il n’est pas réservé aux seuls blogs, puisque le journal Le Monde l’utilise également.

En termes d’usages, le “big footer” introduit deux choses particulièrement intéressantes.

Comme le fait remarquer Amber Simmons, il redonne ses lettres de noblesse au pied de page, en y introduisant, enfin, des informations utiles. Après la lecture de son article, ou de sa page, l’utilisateur ne tombe plus sur un mur de liens qui ne lui seront d’aucune utilité. Je ne veux pas dire par là que ces liens sont inutiles, au contraire, mais plutôt qu’ils ne sont pas utiles à l’utilisateur, à qui est véritablement destiné le site.

Il permet surtout de regrouper en un seul lieu un nombre important d’informations pertinentes, autrefois placées dans le menu avec les éléments de navigation, tout en n’en faisant pas partie. Dans un monde idéal (sic), on trouverait en effet :

• Sur un layout à 2 colonnes : une colonne pour le contenu, et une colonne pour les éléments de navigation, et uniquement de la navigation. À titre d’exemple, la liste des catégories d’un site fait partie des éléments de navigation, pas les derniers commentaires ou les billets les plus populaires.
• Sur un layout à 3 colonnes : une colonne pour la navigation, une colonne pour le contenu et une colonne pour du contenu contextuel au contenu affiché.

Des variantes de ces deux principes existent bien sûr, et ils ne sont pas exhaustifs, évidemment. Ils permettent cependant de comprendre l’intérêt d’un “big footer”, ainsi que la typologie des éléments qu’on peut y trouver.

Et vous, qu’en pensez-vous ? Pour ou contre le big footer sur les sites qui le justifient ?

Si vous passez de temps en temps sur ce blog, vous aurez remarqué le remplacement dans la navigation de l’icône par un lien vers une page s’abonner. Il y a deux raisons à cela.

La première est purement utilitaire : elle me permet de multiplier les méthodes d’abonnement au blog, en y ajoutant l’émail. En remplissant le formulaire idoine, vous pouvez désormais recevoir toutes les mises à jour du site par courrier électronique. Cette nouveauté est une conséquence directe de mon second point.

La seconde raison d’être de cette page est purement didactique. Je me suis rendu compte avec le temps que dans mon métier, les gens connaissaient globalement l’existence du flux RSS, nombre d’entre eux n’en savaient pas la définition. En fait, seule une faible proportion de mes collègues – au sens large du terme – utilisent quotidiennement l’agrégation qui est beaucoup moins rentrée dans les usages que je l’imaginais jusqu’à encore récemment.

Cette nouvelle page me permet donc

• D’expliquer ce qu’est un flux RSS et à quoi sert l’agrégation, là où l’icône seule n’était pas des plus parlante.
• Offrir l’abonnement par email à ceux que le site intéresse, mais qui n’ont pas encore adopté l’agrégation.

En attendant un changement de thème qui devrait voir l’arrivée d’une zone d’abonnement sur l’ensemble des pages du site, entre autres nouveautés.

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

Au début de l’été, j’annonçais sur ce site mon envie de changer d’environnement professionnel afin d’acquérir une expérience plus significative dans la conception et / ou le management de projets web.