Rebooted
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.
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.
Commentaires
Trackbacks
Les trackbacks sont fermés pour cause de spam.
Passionné d'informatique depuis l'âge de six ans, je travaille en tant que responsable qualité chez blueKiwi Software, éditeur spécialiste des outils collaboratifs en entreprise. Ma double formation en sciences politiques et en informatique me permet de porter un regard particulier sur les problématiques abordées par mon poste.
Romain 44 minutes later:
Très chouette ce nouveau thème ! Je suis complètement d’accord avec toi sur l’espace de contenu large, et le big footer (pour ne pas surcharger la sidebar), mais je trouve que 10 billets affichés à l’accueil, ça fait beaucoup…
En tout cas, bon boulot !
ChOcO-Bn about 1 hour later:
Cool, j’apprécie surtout les 10 articles sur la page d’accueil, je trouve cela beaucoup plus pratique !
Côté design, du neuro, simple et efficace.
krachot about 14 hours later:
Il y a, comme sur la version précédente, un souci avec le formulaire de commentaire. Si on essaye d’en ajouter un en laissant tous les champs à vide, la zone mise à jour par le javascript contient une deuxième fois le site. Ca serait peut être bien, d’ajouter des messages d’erreurs plutôt.
Simay about 15 hours later:
ahh mieux, un design un peu plus clair, ca fait du bien aux yeux!
Stephanie Booth about 15 hours later:
Chapeau! Moi je suis l’exemple parfait du cordonnier mal chaussé, et ça fait un moment que j’ai grande envie de “refaire” mon site bien proprement-comme-il-faut. Tu m’en donnes encore plus envie!
Bravo en tous cas, t’as fait du beau boulot. :-)
Frederic de Villamil about 15 hours later:
@Romain : je tiens à garder les 10 billets en première page, mais il n’est pas exclu que je ne laisse que le résumé des plus anciens, je suis en train de faire des tests de ce côté là.
@Krachot : je vais voir ce que je peux faire de ce coté là, c’est effectivement gênant.
@Choco : Merci
@Simay : je trouve aussi. Mon précédent thème était plus la mise en pratique de tutos photoshop qu’autre chose en fait.
@Stephanie merci, ça fait plaisir en plus venant de toi. C’est vrai que c’est très long, et vu ton emploi du temps… Cela dit, je trouve K2 très sobre et très propre. Tu as juste un peu trop de contenu en sidebar et on s’y perd. Enfin à mon avis.
Stephanie Booth about 17 hours later:
Je suis d’accord, mes sidebar ressemblent à un souk. J’aurais voulu un big footer, mais bon, pas k2-compatible-out-of-the-box.
On verra tout ça quand je mettrai à jour wordpress, mes plugins, et passerai à sandbox (k2 c’est une véritable pelote de laine de problèmes, j’avoue que je ne le conseille plus même si côté look, c’est effectivement sobre et propre).
Dominique 1 day later:
Je trouve que l’ensemble est bien équilibré. Impossible de se rendre compte de la somme de travail pour réaliser cette mise en page à moins de s’y être frotté soit même. Que de temps et d’énergie pour la présentation ! Quelque part, n’y a t-il pas un paradoxe à proner les CSS alors qu’on est tous amener à tout jeter pour repartir sur de nouveaux design à court terme ? ( je me fais l’avocat du diable bien entendu … ). Reste la satisfaction de l’avoir fair soi-même et de savoir qu’on sait le faire. … au fait ; bravo ; bon boulot !
Zavie 1 day later:
Ah, beau boulot, c’est très nettement mieux que le précédent. :-)
Si tu veux bien, voici quelques remarques à froid : Le blanc fait un peu vide et laisse le texte un peu nu, mais c’est peu être un choix. Maintenant que tu affiches dix articles, tes photos s’intègrent moins bien je trouve. Tu devrais peut-être les mettre en miniature (bof), n’en mettre qu’une seule, ou carrément ne mettre une photo que pour l’affichage d’un article. Toujours à cause des dix articles, le pied de page est maintenant vraiment loin, et ce malgré d’éventuels liens. De plus les tags que tu mets à droite sont peut-être moins pertinents que certaines informations de pied. A mon avis tu devrais réorganiser un peu cette partie. Peut-être devrais tu aussi atténuer certains contrastes : noir sur blanc sur un écran, c’est un peu violent. J’avais lu quelque part une réflexion intéressante sur le fait qu’un écran permet des contrastes nettement plus élevés qu’une page imprimée, et qu’il faut donc en tenir compte.
En tout cas ta page est clairement mieux organisée maintenant (je la trouvais à la limite du bordélique à un moment), et l’apparence générale est beaucoup plus vivante. Bref, la rentrée commence bien. :-)
Zavie 2 days later:
Je viens de remarquer que lorsqu’un article n’a aucun commentaire, on peut lire “no commentaires”.