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

Après quelques semaines de sommeil suite à la sortie de Typo 5.0.3, Piers et moi nous sommes remis au travail, avec pour objectif une version 5.0.4 d’ici à la mi mai. Celle-ci se focalisera principalement sur la qualité de l’application, tout en introduisant quelques nouveautés. Histoire de vous tenir au courant, je vous propose un aperçu des fonctionnalités que nous avons prévu d’y intégrer.

J’écoutais les vieux albums de Madonna tout en travaillant à rendre mon dernier thème le plus générique possible en vue d’une release prochaine dans le domaine public. Bien que je lui préfère largement Vogue, un des morceaux les plus extraordinaires que j’ai jamais entendu, et qui reste pour moi associé à la performance des MTV music awards 1991, c’est le nom de True Blue qui s’est imposé de lui-même.

Un peu d’humour en ce dimanche soir ensoleillé, avec cette très sérieuse étude portant sur la véritable répartition du temps passé à mettre en place un design web moderne.

Évidemment, toute ressemblance avec des situations existantes ou ayant existé dans le monde réel ne serait que purement fortuite.

Réaliser le formulaire de login parfait relève un peu de l’utopie ergonomique, tandis qu’il est particulièrement facile de se tromper. Dans son article en deux parties, Account sign-in, 8 *2 mistakes to avoid Jared Spool détaille 16 erreurs à ne pas commettre quand on crée un tel formulaire. Il y étudie le formulaire lui-même, mais également tout ce qui va autour : placement, opportunité… en l’appliquant à la boutique en ligne du site de Cisco.

Plutôt que de traduire simplement son billet, j’ai repris les 16 points étudiés, et j’ai tenté de les appliquer aux cas les plus génériques possibles, afin de pouvoir les réutiliser sur tous les types de sites et d’applications possibles.

Après la sortie la semaine dernière de la version stable de Ruby on Rails 2.0, La toute nouvelle version de Typo se profile doucement à l’horizon. À l’occasion de ce changement de version majeure, nous avons décidé de changer le thème de base, pour un design rajeuni. Et dans notre grande mansuétude, nous avons décidé que ce serait TOI, oui TOI lecteur qui choisirait à quoi allait ressembler ton blogware préféré (si, si, tu vois, non seulement on va te faire décider à ta place, mais en plus décide à ta place que tu aimes Typo et que tu vas l’installer sur ta machine… ha les joies du crowdsourcing…)

Après cet intermède d’un cynisme particulièrement marqué, il est temps pour moi de vous présenter les heureux lauréats, parce qu’ils le valent bien :

Depuis le temps que je ne vous avais pas donné de nouvelles de Typo, je pouvais bien me fendre d’un petit billet de teasing, histoire de vous montrer la prochaine fonctionnalité qui devrait arriver sous peu dans la trunk, avant de rejoindre la prochaine version stable : un éditeur de thèmes en ligne, qui m’a été demandé par pas mal de gens souhaitant migrer depuis Wordpress et pouvoir éditer leurs templates directement depuis le web.

On donne souvent GIMP en exemple quand on veut parler de la différence de points de vue qu’il peut y avoir entre un utilisateur final et un développeur, et donc de ce qu’il ne faut pas faire en ergonomie des IHM. GIMP est un outil de manipulation d’images libre multi plates-formes bien connu de la communauté open source, plus connu pour son inutilisabilité et sa librairie graphique GTK que pour sa puissance pourtant réelle.

Comme je le faisais remarquer il y a presque un an, tout ce qui se trouve sur internet n’est pas libre de droits, bien au contraire. Chez Airbag Industries, ils aiment les choses bien faites, et le vol en fait évidemment partie. C’est la raison pour laquelle ils nous ont concocté cet excellent Guide du vol de design web en 5 leçons, dont je ne peux m’empêcher de vous donner les perles.

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.

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.