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

Oui, je sais, je parle trop de Diigo ces derniers temps, mais ce service en vaut la peine, que ce soit pour la qualité du produit, la richesse des fonctionnalités proposées, ou les usages qu’on peut en faire, bien au delà des simples fonctions de bookmarking social. Un point que je n’ai pas abordé, à dessein, dans on billet d’introspection du service est celui de l’annotation. Bien que cette fonctionnalité représente une facette non négligeable du service, je souhaitais lui consacrer un billet à part.

Qui n’a pas un jour souligné une phrase ou un paragraphe d’un livre avant d’ajouter quelques annotations dans la marge, quand il ne s’agissait pas de polycopiés de fac abondamment barrés de surligneur. Diigo reprend cet usage et le transpose online, comblant ainsi un gros trou dans les pratiques du web. Là encore c’est très intuitif : une fois activé le bookmarklet ou la barre d’outils, il vous suffit de sélectionner le texte à mettre en valeur, puis clic droit, et highlight. Difficile de faire plus simple, et les options sont insérées dans le menu clic droit des navigateurs, ce qui évite d’avoir à surcharger ce dernier.

Dans la catégorie des trucs hyper addictifs qui ne servent à rien, j’ai demandé le lifelog, à propos du plus connu d’entre lesquels je m’étais déjà exprimé l’année dernière. Présenté par ses fanatiques comme la révolution du lien social online, voire comme celle de la collaboration professionnelle, Twitter, puisqu’il s’agit de lui, n’a jamais réussi à me convaincre ni de la nouveauté de la chose, ni de son utilité. 2414 tweets plus tard, je ne le considère pas plus qu’une mauvaise en alternative à tout un ensemble de services que j’utilisais déjà, et dont il reproduit bien imparfaitement les avantages, et précisément les erreurs, j’aurai bientôt l’occasion de m’exprimer sur le sujet.

Il n’y a pas que dans le football qu’on trouve la période hivernale propice aux transferts, cela marche également pour le web en général, et pour moi en particulier. Et s’il faut parler de transfert, il se traduit physiquement par une translation de ma chaise à roulettes de 5 mètres dans l’open space. Et pourtant, quels changements…

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.

L’adage pas de nouvelles, bonnes nouvelles n’a pas vraiment sa place dans l’univers open source, bien au contraire. Et malgré un nombre de commits particulièrement faible durant le mois d’août, ne croyez-pas que Typo, le blogware en Ruby on Rails soit mort, bien au contraire. Piers et moi continuons de travailler dessus durant notre temps libre, si tant-est qu’on daigne nous en laisser.

Un dernier week-end d’août plus chargé qu’une prévision Bison Futé nous apporte un lot de nouveautés comme on n’en avait pas vues sur le projet depuis bien longtemps. Je pense évidemment à la fermeture d’une quarantaine de tickets dont un bon nombre de bugs qui nous permet de passer sous la barre des 200 tickets ouverts pour la première fois depuis que j’ai repris le projet, mais pas seulement.

Comme je vous le disais vendredi, nous avons offert à l’administration de Typo une refonte graphique complète. Plus belle, plus propre, et aussi beaucoup plus simple à utiliser que l’ancienne, cette nouvelle version se trouve déjà dans la version de développement de l’application. Nous sommes toutefois conscients du travail qu’il nous reste à effectuer afin d’atteindre les standards d’utilisabilité et d’ergonomie auxquels nous aspirons à ce jour. Cette administration refondue est d’ors et déjà disponible sur notre plate-forme de démonstration.

Jordan Bracco travaille actuellement sur un portage du template Classicish vers un thème Typo. Le but de ce thème est de remplacer Scribbish, notre actuel thème secondaire, par quelque-chose d’un peu plus sexy. Jordan a déjà contribué à Typo par le passé, en portant notamment Hemingway et Kubrick à la version 4.1. Ces deux thèmes devraient rapidement rejoindre notre collection officielle. Dans la même veine, nous sommes également à la recherche d’un nouveau design afin de remplacer Azure, le thème par défaut, quelque peu démodé.

Et pour finir…

Je travaille toujours sur l’ajout d’un système de profils utilisateurs multiples (administrateur, rédacteur et contributeur) extensible. Je devrais mettre ma dernière semaine de vacances à profit afin de terminer cette importante fonctionnalité. On nous a rapporté des problèmes de performances importants survenus depuis la sortie de la 4.0. Il semble que le nouveau système de cache utilisé soit beaucoup plus lent et plus gourmand que l’ancien. Après quelques tests concluants (économies de 40% de mémoire et division par 3 des temps de réaction), nous sommes revenus à l’ancien système. La liste des convertisseurs s’allonge, et vous pouvez maintenant passer de Dotclear 1.2 à Typo. Jordan travaille également sur un convertisseur depuis Mephisto, qui devrait rapidement rejoindre le coeur de l’application (comment ça je te mets la pression ?).

Enfin, dernière nouvelle, mais pas la moindre, j’ai profité de mes insomnies afin d’offrir au projet un nouveau site officiel, en utilisant un Typo à peine modifié comme un CMS. Nous travaillons maintenant à transférer toute la documentation utilisateurs du Trac vers ce nouveau site dont je ne manquerai pas de parler au moment du lancement officiel.

Ceux qui se disent qu’une version majeure de l’application est sur le point de sortir ne sont pas forcément loin de la vérité.

Note : vous pouvez lire une version anglaise de ce billet sur le blog officiel de Typo.

Afin de fêter dignement la rentrée, Typo, le blogware open source développé en Ruby on Rails fait peau neuve et se dote d’une nouvelle interface d’administration beaucoup plus claire et au goût du jour. Ce design devrait équiper la version 5.0 qui devrait sortir d’ici quelques semaines et apporter de nombreuses nouveautés ainsi qu’un très grand nombre de correctifs.

L’interface de configuration.

Liste des billets en cours.

Zone de saisie d’un billet.

Cette nouvelle admin est d’ors et déjà disponible dans la version de développement de Typo, et vous pouvez la tester sur notre plate-forme de démonstration.

J’ai rejoint l’équipe de développement afin de m’occuper de l’utilisabilité de l’application, et beaucoup de progrès ont été faits malgré le chemin encore à parcourir. Nous devrions revenir très rapidement avec deux nouveaux design prévus pour remplacer les deux thèmes actuels un peu démodés. Stay tuned! comme ils disent.

Lors du premier Yulbiz Paris, j’ai eu la chance de rencontrer Patricia Gallot-Lavallée, consultant web chez Kenazart Strategy Interactive. Patricia finalise en ce moment son premier livre ”Internet, donne-moi ce que je veux !” (dont la couverture resemble furieusement à celle de Don’t make me think), ouvrage d’ergonomie dans lequel elle passe au crible pas moins de 60 modèles de navigation afin d’en extraire la substantifique moelle :

• Les meilleures pratiques en termes d’ergonomie et d’agencement de l’information.
• Les erreurs à ne surtout pas commettre.
• Les critères à respecter en termes d’accessibilité.
• Les éléments permettant de booster le référencement naturel.

Le tout, agrémenté par des exemples en grandeur réelle.

À qui s’adresse le livre ?

• Aux chefs de projets web.
• Aux responsables web.
• Aux responsables mercatique (c’est le mot français pour marketing) et communication.
• Aux ergonomes et concepteurs web.
• Aux directeurs artistiques et aux designers.
• Aux développeurs web.
• Bref, à au moins 95% d’entre vous.

Le livre devrait sortir en juillet prochain, et j’avoue être particulièrement impatient de l’avoir entre les mains, ayant un moment songé à entamer un projet similaire sur ce blog. Et s’il reste de la place, je suis ultra motivé pour en faire la relecture, Patricia, si tu me lis…

À la fin de l’année dernière, j’ai commencé à m’intéresser au positionnement de ce site sur les moteurs de recherche. J’ai alors contacté Sébastien Billard qui tient l’excellent blog Référencement, Design et Compagnie afin qu’il me fasse profiter de ses lumières. Suite à ses réponses, j’ai commencé une refonte structurelle – et ergonomique – qui a amené à la version actuelle. Un mois plus tard, retour sur les améliorations effectuées et sur les résultats obtenus.

Conseils Structurels

• Remplir le champ <title> à l’aide du titre du billet suivie de la mention “Frédéric de Villamil.com”. Cela permet aux outils de référencement de bien distinguer les pages les unes des autres.
• Dans la structure du code, mettre le contenu de chaque billet avant la navigation, de telle sorte qu’il se retrouve à la première place. Là aussi, il s’agit d’éviter que les moteurs de recherche ne considèrent les contenus comme semblables d’une page à l’autre. Techniquement, cela se fait en jouant sur la position des éléments : le contenu, placé avant dans le code, est placé dans un float: right;, tandis qu’on laisse la navigation dans le flot de la page.
• Supprimer le lien sur le titre du billet en mode lecture puisqu’il pointe de toute manière vers la page en cours. Cela rajoute en plus un bon point pour l’accessibilité.
• Mettre le message “Répondre à ce billet” dans une balise <h3> et non une balise <h2>, cette dernière étant déjà utilisée par le titre du billet, hiérarchiquement supérieur au formulaire de réponse dans la structure de la page.

Conseils éditoriaux

• Ajouter une tagline reprenant les principaux mots clé du site. Sébastien m’avait suggéré “Ergonomie, web design, métiers du web : le blog de Frédéric de Villamil”, mais ma préférence est finalement allée à “Webdesign, Ergonomie et Métiers du Web (2.0)”. Côté sémantique structurelle, le titre du blog se trouve dans une balise <h1> et l’accroche juste en dessous dans une balise <h2>.
• Supprimer le paragraphe de présentation placé en haut de chaque page. Relativement long, celui-ci leurrait les outils de recherche en leur faisant croire que toutes les pages étaient semblables. Le résultat était catastrophique, puisque Google ne recensait que 4 pages différentes, et plus de 1500 doublons. Le paragraphe de présentation a finalement rejoint la navigation, en bas de page.
• Faire figurer les catégories sur l’ensemble des pages, et particulièrement sur celles des billets. Seul problème, je ne voulais plus de sidebar sur ce blog. J’ai finalement décidé de déroger en ce qui concerne les catégories, pour des raisons purement ergonomiques : ce système permet au lecteur d’embrasser le contenu du dernier billet et les thématiques du site d’un seul coup d’oeil, sans retomber dans la pollution visuelle entraînée par une sidebar “fourre tout”.
• Soumettre le site à des annuaires afin de varier la provenance de mes liens entrants, principalement des blogs à ce jour.

Les résultats

Source : google.com, les chiffres de google.fr peuvent être différentes.

Je referai le point sur ces mots clé dans 6 mois, afin de constater les évolutions à venir, en faisant une vérification sur ces mots clé chaque premier du mois, et en les comparant à mes statistiques en entrée. Je remercie Sébastien pour ces conseils qui ne m’ont absolument rien coûté, puisque la bière promise n’a pas encore été commandée. J’espère que vous pourrez à votre tour en profiter pour accroître la visibilité de votre site.

Creative Home Engineering est une société spécialisée dans les passages secrets et autres portes dérobées, à l’instar de ce qu’on pouvait trouver dans les romans d’aventure de nos parents, mais avec une touche d’électronique en plus.

Les 2 et 3 février prochains aura lieu le Festival International du Webdesign à Limoges. Je regrette de ne pas pouvoir m’y rendre ayant déjà un programme bien chargé, j’aurais aimé pouvoir y suivre les conférences sur les dernières tendances en matière d’usabilité et d’ergonomie, deux domaines trop souvent négligés dans la conception de sites et d’applications web. L’utilisation d’applications open source aussi bien que propriétaires depuis des années m’a permis de mettre le doigt sur deux problèmes que j’avais aussi rencontré dans mes développements personnels et que j’aimerais ne plus reproduire :