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

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.

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 :

Les mauvaises langues qui diront que j’ai parcouru tous les didacticiels Photoshop estampillés “web 2.0” afin de réaliser ce thème ne seront pas très loin de la vérité. Cette remise à neuf part d’une constatation évidente : difficile de parler d’ergonomie et de webdesign quand on a un design peu soigné, et surtout peu utilisable. Certes, les cordonniers sont toujours les plus mal chaussés, mais il y avait des limites.

C’est la seconde fois que je commence par coucher le résultat final sous Photoshop, avant de me lancer dans le développement, et les résultats sont visibles : c’est nettement plus propre. Ma démarche habituelle consiste à ouvrir Textmate avec une vague idée de ce que je veux faire, et à coder. La démarche inverse, même si elle est beaucoup plus fastidieuse en rajoutant un très grand nombre d’étapes nécessitant un outil que je ne maîtrise pas du tout, est aussi très intéressante, puisqu’elle m’oblige à aborder les problèmes à venir en amont.

J’imagine qu’il y a un certain nombre de bugs sous Internet Explorer, principalement dans sa version 6 à cause du manque de support de l’alpha des images au format PNG, mais je n’ai pas de machines sous Windows pour tester. Ils attendront donc lundi soir que je sois au bureau pour un recensement exhaustif.

Et pour finir, la liste de mes sources d’inspiration :

• Iris Design pour les gros boutons Aqua de la barre latérale.
• Shadowness pour les onglets de navigation.
• Simple entrepreneur pour la mise en valeur des zones de souscription.

Je sais bien que je n’écris pas beaucoup ces derniers temps. J’ai un peu de mal à trouver l’inspiration nécessaire pour compléter la vingtaine d’articles de fond en stockés dans mon répertoire “brouillons”, certains en cours de rédaction depuis le mois de mars. Et je code, beaucoup, en fait. Je viens de faire accepter mon premier gros patch à l’équipe de développement de Typo, et j’en ai soumis un second – près de 4Mo tout compris – cet après-midi. J’aimerais bien terminer la refonte de l’administration avant la sortie de la prochaine version stable, et le travail manque moins que le temps pour le réaliser.

Maurice Svay me demandait tout à l’heure quelles étaient mes prédictions en termes de design web pour l’années 2007. Très bonne question qui vaut largement un billet.

Une place prépondérante donnée au contenu

Il est intéressant de voir combien notre rapport au web a changé ces 5 dernières années. L’agrégation, notamment, nous a fait prendre conscience à juste titre que la valeur d’un site web réside dans l’ensemble des contenus publiés. Le web design de 2007 devrait donc encore accentuer cette tendance en mettant tout particulièrement en avant les éléments pertinents.

La taille des polices de caractères a déjà augmenté par rapport à ce qui se faisait il y a 4 ans, et on devrait voir celle-ci évoluer vers une moyenne de 13 ou 14 pixels. Pour rappel, les navigateurs considèrent la taille standard comme étant 16 pixels.

La lisibilité nécessitant un contraste fort entre le texte et le fond, gageons que les dégradés de blancs et de gris clairs ont encore de beaux jours devant eux. La tendance d’un retours à des sites en blanc sur fond noir ou blanc sur gris foncé devrait aussi se confirmer.

Une à deux colonnes maxi

Déjà en perte de vitesse ces dernières années, les layouts sur trois et quatre colonnes continueront à se raréfier au profit quasi exclusif de thèmes en une et deux colonnes.

Pourquoi cela ? Très (trop) marqués “portails” et “web des années 90”, les designs en 3 et 4 colonnes ne conviennent plus à la structure de la majorité des sites en circulation aujourd’hui, et deviennent le plus souvent des nids à publicité.

Le nombre de points d’entrée sur une page donnée et la profondeur des sites tendent à diminuer. La navigation s’en trouve grandement simplifiée, et l’utilisateur s’y retrouve plus facilement.

2007 sera widgets ou ne sera pas

Il est probable que la navigation des sites deviendra fortement personnalisable via l’utilisation adéquate des widgets. La place des différentes sections du menu des sites à deux colonnes changera au gré des envies du visiteur qui verra ses préférences conservées d’une visite à l’autre.

Peu de fluidité

Peu de layouts liquides ou semi-liquides en 2007 (un layout liquide est un layout qui s’adapte à la taille de l’écran). Je vois 3 raisons à cela :

• Les écrans deviennent de plus en plus larges, et des lignes de 1400 pixels de large sont pénibles à lire.
• Les designers ne pensent pas en termes de layouts liquides, plus difficiles à faire que des designs à taille fixe.
• Les propriétés CSS min-width et max-width ne sont pas supportées par la majorité des navigateurs du marché, ce qui rend leur utilisation plus qu’hasardeuse, et les solutions de contournement en javascript ne sont pas une solution satisfaisante en termes d’accessibilité.

Depuis quelques années, la mode est aux sites centrés sur l’écran, et cette tendance ne devrait pas vraiment changer.

Paix, luxe calme et volupté

Les sites à bords ronds resteront la règle en 2007 tant ceux-ci essaient de nous faire oublier que CSS fonctionne selon un modèle de bêtes boites carrées imbriquées les unes dans les autres. Quand il est bien utilisé, le bord rond donne une certaine impression de calme et de sérénité, idéale pour se pencher sur des contenus de qualité.

Une ergonomie incitative

Tout sera fait pour inciter le visiteur à ne pas quitter le site trop vite. Les chemins de fer, tout en donnant une indication géographique incitent à se pencher sur d’autres parties du site. Des cadres proposant des contenus semblables à celui visité seront disposés à des endroits clé afin de pousser le consommateur à acheter des produits semblables ou liés. En un mot, tout sera fait pour prolonger votre visite avant le passage à la caisse, en mettant en valeur des contenus pertinents.

À vous maintenant

Et vous, qu’en pensez-vous ?