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.

Avant, après

La refonte ergonomique, doublée par moments du d’une refonte fonctionnelle vise à totalement transformer l’accès à l’information sur ce blog. Toutes les modifications ont été faites pour offrir au visiteur une navigation optimale sur le site, aussi bien en termes d’utilisabilité que de découverte du contenu. Quand on vous dit que les cordonniers sont les plus mal chaussés…

Côté accès au contenu, le plus visible est certainement le retour à l’affichage de 10 billets par page qui permet au visiteur d’en découvrir plus lors d’une première visite. Afin de contrebalancer l’allongement des pages, des liens d’évitement font leur apparition et mènent au contenu, à la recherche et au menu contenu dans le footer. Les liens d’évitement sont à la fois pratiques et utiles en termes d’accessibilité, donc autant ne pas se priver. Comme précédemment, la visualisation par catégorie et thématique se fait sur une seule page, à ceci près que le blog affiche cette fois l’introduction des billets, le lecteur étant invité à cliquer pour lire la suite. Ceci permet d’éviter les contenus redondants pour les moteurs de recherche. D’une manière générale, ce blog a été optimisé en termes de référencement, ce qui a donné des résultats immédiats : 24 heures après la mise en place de la refonte, je faisais un bond de 8 places sur mon nom de famille (troisième place au lieu d’une onzième place dont je n’arrivais pas à décoller), et 290 places sur mon prénom, pour rejoindre la vingt-deuxième place. D’autres statistiques suivront bientôt.

La refonte graphique particulièrement sobre m’a permis de diminuer la taille du bouton orange d’abonnement au flux RSS tout en gardant l’effet landing page. Partant du principe que ce que ce site a à “vendre” est son contenu, il est normal qu’un bouton particulièrement remarquable donne accès à un bonnement en un clic, toute souscription au flux RSS pouvant s’apparenter à une vente en termes d’e-commerce. Le moteur de recherche interne fait son retour, également dans la colonne de droite, en mode live search en Ajax ou via un formulaire traditionnel pour ceux qui ne disposeraient pas de javascript.

Une sous-navigation contextuelle fait son apparition sous la navigation principale. Elle se décline en deux genres. Sur la page d’accueil, les pages suivantes, les pages statiques, les catégories et les thématiques, ou tags, il s’agit d’un fil d’Ariane, ou breadcrumb. Il permet à l’utilisateur de revenir en arrière dans l’arborescence du site. Lors de la visualisation d’un billet, le fil d’Ariane est remplacé par un crumb menu contenant les grandes thématiques du billet. Chaque lien mène vers une page contenant un résumé de tous les billets placés sous cette thématique. Selon les statistiques, pas moins de 10% des utilisateurs voient et utilisent le fil d’Ariane. Il s’agit donc d’une fonctionnalité incitative utile et qui prend une place extrêmement faible. Si on considère qu’elle peut augmenter le taux de transformation chez 10% des utilisateurs, ce serait dommage de ne pas en profiter.

Toujours dans les commentaires, mes réactions se détachent désormais du flot par une couleur de fond différente. La prévisualisation des commentaires fait également son retour dans le formulaire.

La majorité des liens fonctionnels disposent maintenant d’une aide au survol de la souris afin de clarifier les points qui pourraient être obscurs aux néophytes. Concrètement, cela se traduit par un texte commençant par “Cliquez sur ce lien pour… ”

Sous chaque billet, les liens “utilitaires” ont été regroupés dans un seul bloc, et disposent d’icônes appropriées (les mêmes que Stéphane, mais il se trouve que je suis fan de Famfamfam). Le flux RSS des commentaires du billet fait son retour, et s’accompagne du lien permanent, des thématiques associées au billet, de la catégorie dans laquelle est placé le billet, et de la licence sous laquelle le blog est placé, en l’occurrence Creative Commons By NC SA. Juste au dessus, un nouveau bloc propose désormais cinq articles en lien avec le billet en cours de lecture. Les articles sont sélectionnés en fonction des thématiques dans lesquelles sont indexés le billet consulté par le visiteur.

Afin de tirer au maximum profit du lien d’évitement conduisant au footer, la navigation principale a été doublée en bas de page. Ainsi, plus besoin de scroller pour continuer à naviguer sur le site. Sous le titre des billets, un lien supplémentaire permet maintenant d’atteindre directement les commentaires. Cela évite aux visiteurs ayant déjà lu le billet de scroller pour voir les nouvelles réactions. Le pied de page a d’ailleurs été le grand “perdant” en termes de fonctionnalités. Je conserve certes le “big footer”, dont je ne peux pas me passer, mais celui-ci à subi un certain lifting. Les derniers commentaires disparaissent complètement, ces derniers étant franchement inutiles, ainsi que mes liens Delicious. Ces derniers pourraient faire leur réapparition dans le flux RSS du blog, remplaçant alors les billets du style “en vrac”.

Enfin, dernier changement, mais non des moindres, une révision du titre du blog qui devient “Ergonomie, Rails et Architecture de l’information web (2.0 sic)”, ce dernier pouvant encore être amené à évoluer vers une plus grande simplification.

Il reste encore certainement quelques bugs dans cette nouvelle version que je corrigerai au fur et à mesure des découvertes, mais dans l’ensemble, je commence à atteindre quelque-chose de relativement satisfaisant. J’ai quelques idées que je compte mettre en application d’ici le 17 et mon arrivée au sein du Groupe Reflect. Stay tuned, comme ils disent outre Atlantique.

La jetée du moulleau

Perry the Platypus wants you to subscribe now! Even if you don't visit my site on a regular basis, you can get the latest posts delivered to you for free via Email: