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

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.

Après quelques années d’immobilisme quasi complet, Bloglines nous revient avec une toute nouvelle version bêta qui pourrait bien permettre à ce dinosaure des agrégateurs en ligne de sortir l’oubli dans lequel Google Reader et Netvibes l’ont fait plonger. Je passerai rapidement sur le design joli mais sans grande originalité, les abus d’AJAX et de Scriptaculous dès la page de login et le trop plein de web 2.0itude pour me concentrer sur l’ergonomie et l’utilisabilité de la chose. Et là, on va tout de suite faire tomber le suspens, cela fait quelques années que je n’avais pas fait de bonds partout dans mon salon en découvrant une application web.

Finis les onglets feed, blog, clipping, playlist, forum et search, ainsi que l’ennuyeuse et inutile landing page de la version actuelle, l’utilisateur arrive directement sur la page de ses flux. À la première visite, il se voit proposer de drag and dropper ses flux favoris au centre de la page afin de les visualiser par défaut à son arrivée sur le service à la façon des pages personnelles. Une manière plutôt sympa d’occuper l’espace inoccupé de la page.

Le mois d’août s’achève, Paris s’éveille doucement de sa traditionnelle torpeur estivale, les événements autour du web fleurissent à nouveau, et ce mois de septembre va commencer très très fort.

On commence avec la soirée Geek Chic, le mardi 4 septembre 2007, de 19 heures 30 à pas d’heures au O’sullivan by the Mill. Organisée par Ravana et Fred de Mai, cette soirée est sur inscription uniquement.
Adresse : O’sullivan by the Mill, 2 boulevard de Clichy, 75018 Paris.

La cinquantième (eh oui déjà) édition du Paris Carnet réunira blogueurs, wikistes et carnetiers autour d’une bière le mercredi 5 septembre 2007 à partir de 19 heures à l’Assassin. Vous pouvez annoncer votre venue sur le wiki dédié, ou pas.
Adresse : L’Assassin, 99 rue Jean-Pierre Timbaud, 75011 Paris.

Le dixième Paris Blog-t-il ? en partenariat avec Ten Mobile se déroulera à l’Entrepôt le lundi 10 septembre 2007 à partir de 19 heures 30. Inscriptions sur le site fortement conseillée.
Adresse : L’Entrepôt, 7/9, rue Francis de Pressensé, 75014 Paris.

Si vous préférez la téléphonie mobile, ça se passe aux Mobile Monday France, le 10 septembre 2007 également, chez BETC - Euro RSCG. Les présentations tourneront autour des jeux sur mobile. L’inscriptions est obligatoire.
Adresse : BETC - Euro RSCG, 85-87 rue du Faubourg Saint Martin, 75010 Paris

Organisé par Frédéric Cavazza, le troisième Yulbiz Paris réunira les acteurs du web le 11 septembre à partir de 19 heures chez Urbi et Orbi.
Adresse : Urbi et Orbi, 93 rue Montmartre, 75002 Paris

Grande messe des fanatiques de l’OS à la pomme, l’Apple Expo France se déroulera du 25 au 29 septembre à la Halle 5 du Parc des Expositions. Je m’y rendrai très certainement le samedi pour profiter de mon badge presse.
Adresse : Parc des Expositions, Halle 5, 75014 Paris.

Enfin, retour des Barcamp, avec le premier FingCamp, organisé par la FING à l’ENSCI le 29 septembre de 14 heures à 21 heures. Les places sont limitées à une centaine de personnes et les inscriptions obligatoires.
Adresse : ENSCI, 48 rue Saint Sabin, 75011 Paris

Vous comptez venir à un de ces événements ? Signalez-vous dans les commentaires que nous puissions nous y retrouver.

Je viens enfin de finir de dépiler les quelque 27000 billets qui s’étaient pernicieusement accumulés dans mon agrégateur durant les vacances. Plein plein plein de très bonnes choses, dont :

• Design Float est un Digg like consacré uniquement au webdesign. Une mine de ressources pour ceux qui s’intéressent au sujet.
• Deziner Folio. Ils s’étaient fait connaître en offrant au téléchargement plus de 130 styles Photoshop web 2.0 (sic), mais leurs autres ressources sont probablement encore plus intéressantes.
• Six ways to start writing process, chez Lifehack. Six conseils pleins de bon sens pour ceux qui aspirent à écrire un peu sérieusement.
• Ultimate Server-Side Web Development Cheat Sheets, une liste impressionnante de cheat sheets sur les langages web coté serveur : Ruby, PHP, Perl, ASP.net, Python…
• Ultimate Web Development Cheat Sheet Guide, la même que précédemment, mais pour les langages orienté front : Javascript, CSS, XHTML…
• OpenXML is defective by design, 13 fautes de conception critiques qui rendent le format OpenXML bon à jeter.

Le temps passe, le temps passe, et j’en ai oublié de fêter mon quatrième anniversaire en tant que blogueur “sérieux”, c’est à dire assidu. C’était le 27 juillet 2003 sur asocial.org, et je m’en souviens comme si c’était hier.

En quatre ans, beaucoup d’eau a coulé sous les ponts, et le blogging, les blogs et les blogueurs ont changé, évolué. Mon rapport au blogging est passé de la découverte émerveillée (et chronophage) à une utilisation beaucoup plus rationnelle. Le blog est aujourd’hui un outil que j’utilise quotidiennement dans mon travail et la promotion de mon identité numérique. J’ai fermé mon blog personnel sur un coup de tête il y a tout juste un an aujourd’hui, ce qui m’a permis de me consacrer pleinement à celui-ci.

Aujourd’hui, beaucoup considèrent le blogging comme mort, je crois juste qu’il est simplement sorti du feu des projecteurs pour atteindre l’âge adulte. Comme le fait remarquer Padawan dans son billet Le blog est mort, vive le blog, bloguer est une activité exigeante, qui demande un travail conséquent, et nombreux sont ceux qui ont abandonné par lassitude ou lorsque le soufflé médiatique est retombé. Une partie des survivants a relevé la tête pour se rendre compte qu’ils étaient partie prenante d’un mouvement beaucoup plus important (qu’on appelle web 2.0) qui ne se limitait pas au blogging, les autres ont continué leur petit bonhomme de chemin sans se poser de questions.

Quant à moi, quatre ans plus tard, le plaisir d’écrire et de lire reste intact. La majorité de ceux qui peuplaient mon agrégateur les premiers mois ont aujourd’hui disparu. Penser à eux me ramène en arrière avec nostalgie, vers une époque où les choses étaient – en apparence – plus simples. Mon blog m’a permis de rencontrer des gens absolument formidables (et aussi un paquet de bozos pour rester poli), trop nombreux pour être listés ici, et nombre d’entre eux sont encore à mes côtés.

Et, souvenir souvenir, je vous livre une capture du tout premier layout de mon tout premier blog, codé en PHP à la main sous les aisselles.

Les problèmes de performances sur un site ou une application web proviennent plus souvent d’erreurs de développement que de soucis de montée en charge. Développée par Yahoo, Yslow, littéralement “pourquoi ça rame” est une extension Firefox qui permet d’effectuer des contrôles de performances sur 13 points clés d’un site web. Chaque point testé reçoit une note pouvant aller de A à F, et les problèmes rencontrés s’accompagnent de conseils tournés vers une optimisation du code. Plus la note est élevée, et plus votre site est rapide.

Pas moins de 13 points de contrôle

YSlow met en avant 13 bonnes pratiques fondamentales dans l’optimisation d’une page web :

1. Minimisez le nombre de requêtes HTTP.
2. Utilisez un réseau spécialisé dans la fourniture de contenus.
3. Ajoutez un en-tête d’expiration.
4. Compressez les contenus côté serveur.
5. Placez les feuilles de style en haut de la page.
6. Déplacez les Javascript en bas de page.
7. Proscrivez les expressions CSS.
8. Placez un maximum de javascript et de CSS dans des fichiers externes.
9. Minimisez les besoins en requêtes DNS.
10. Optimisez le javascript.
11. Évitez les redirections HTTP (301, 302).
12. Supprimez les scripts redondants.
13. Configurez les etags

Un premier test de performances me montre que la refonte en cours du site ne devra pas seulement être ergonomique ou graphique, mais qu’un gros travail d’optimisation est aussi nécessaire. Comme quoi les histoires de cordonnier…

Quel est le plus court chemin transformant la visite hasardeuse en acte d’achat ? Malgré plus de 10 ans de web, la problématique du mode d’accès aux données revient fréquemment dans la conception d’un site ou d’une application web. C’est justement à ce problème que s’attaque Patricia Gallot-Lavallée dans son ouvrage édité à compte d’auteur, et préfacé par Frédéric Cavazza, disponible à partir du 5 septembre prochain.

À travers 60 fiches méthodologiques, le lecteur explore pas moins de 60 modèles de navigation, du plus classique au plus innovant, dans une optique alliant systématiquement ergonomie, accessibilité et référencement.

Chaque fiche est présentée sur une double page, et s’accompagne d’exemples glanés sur le web. Une évaluation visuelle permet de noter le modèle sur 3 points : appréciation globale, coût en termes de temps et de budget (les deux étant le plus souvent liés), et accessibilité. Un paragraphe intitulé “pour qui” décrit succinctement le genre de site auquel se destine le modèle étudé. Un avertissement portant souvent sur l’accessibilité ou un conseil complètent cette première colonne qui permet de se faire une idée rapide de la pertinence du modèle.

Le coeur de la fiche consiste en une série de conseils méthodologiques et de bonnes pratiques visant à une mise en place de qualité du modèle. L’approche est technique, mais accessible, et une explication accompagne chaque point abordé. La démarche donne systématiquement la place la plus importante à l’utilisateur dont la satisfaction complète constitue le coeur véritable du livre.

La fiche se termine sur une étude de cas accompagnée d’une interview mettant en avant les avantages, les inconvénients et les limites du modèle étudié.

Mon avis

Je viens de passer la moitié de la nuit et de la journée à dévorer ce livre que j’attendais depuis plusieurs mois jusqu’à la dernière page, et j’ai vraiment adoré. Le livre explore de nombreux éléments d’une page web faisant partie de la navigation sur lesquels je ne m’étais jamais vraiment penché. L’orientation pratique et les conseils très pertinents permettent de se mettre au travail sans attendre, et les bénéfices sur la navigation sont immédiats. On ne regrettera qu’une seule chose : les fiches sont beaucoup trop courtes, et on aimerait pouvoir en lire plus, la limitation venant de la seule double page allouée aux fiches.

Je recommande cet ouvrage aussi bien aux directeurs artistiques et aux designers qu’aux chefs de projets chargés de la conception ou de la refonte d’un site. Conçu comme un livre de recette, Internet, donne moi ce que je veux est un must have dont la place se trouve sur le bureau de tout architectes de l’information.

[edit]
Afin de répondre à une question plusieurs fois posée, il n’y a pas d’erreur dans l’article, la date de sortie du livre est effectivement prévue pour le 5 septembre. Je fais simplement partie des heureux privilégiés à en avoir eu une édition spéciale pré release (et y’a même pas de dédicace, Patricia, prochaine fois qu’on se voit en soirée, tu n’y coupes pas).

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.

Les deux animateurs de Railsenvy remettent le couvert avec leurs parodies des films publicitaires d’Apple comparant Ruby on Rails à ses concurrents. À ceux qui leur reprochaient de comparer un framework à des langages, réjouissez-vous, ils vous ont écouté et égratignent cette fois Cake PHP dans un spot qui s’avère être de loin le meilleur de la série.

À mourir de rire… sauf peut-être pour les fans de Cake PHP.

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.