Ergonomie web, ruby on rails et architecture de linformation V3

Après près de deux ans passés à utiliser mon thème True Blue et ses différentes déclinaisons, j’ai eu envie de passer à autre chose. Le look grunge / old school est amusant à créer et intégrer et relativement agréable à l’oeil. Il est cependant difficilement lisible, et renvoie une image peu professionnelle à moins évidemment d’être un designer de talent, ce qui n’est pas mon cas. Je suis donc, cette fois, reparti d’une copie blanche avec des idées bien arrêtées sur ce que je voulais faire, moins sur le résultat final. Ce dernier est pourtant à la hauteur de mes espérances.

Les couleurs

J’étais d’abord parti sur des couleurs pastel, vert clair, vert moyen, bleu ciel, soutenus par des touches de marron, mais le résultat n’était pas satisfaisant. Je n’aime pas du tout le vert, et je n’arrivais pas à trouver de couleurs sombres pour afficher les titres sur fond blanc.

Retour à la case départ, et à ma marque de fabrique : du bleu, du orange et du gris. J’ai récupéré les deux teintes de bleu foncé sur la page d’accueil de Twitter, le bleu ciel du menu et le orange sur un projet personnel, et le gris des interlignes de la colonne de droite sur Smashing Magazine.

Le header

Le header a été un peu chamboulé, le menu passant en haut de page. Les entrées catégories et thématiques ont disparu, au profit de deux liens dans la colonne de droite sous les blocs correspondants.

Le fil d’Ariane redevient standard sur toutes les pages, au lieu d’afficher les thématiques quand on se trouve sur un article. Une étude des zones de chaleur m’a en effet montré que ce dernier n’augmentait pas la navigation sur le reste du site. Je suis cependant assez curieux de voir comment celle-ci va évoluer avec un fil d’Ariane classique, mais plus gros et mieux mis en valeur. L’expérience promet d’être intéressante.

Le format magazine

La page d’accueil évolue vers le format “magazine”, qui permet d’afficher les articles sur deux colonnes avec une introduction raccourcie, ici 300 caractères, et une meilleure mise en valeur des titres. Vu mon faible rythme de parution, je songe assez sérieusement à mettre en valeur le dernier article publié, cela peut s’avérer intéressant.

J’aime bien le format magazine, que je trouve beaucoup plus lisible pour les visiteurs. Il permet de réduire la longueur de la page, et offre donc plus de matière aux utilisateurs qui “scannent” littéralement les pages, et choisissent leurs lectures à partir des titres.

La pagination disparait de la page d’accueil, au profit d’un lien vers une page d’archives mieux agencée et mise en valeur. Là encore les études de zones de chaleur ont montré qu’elle n’était jamais utilisée, et comme je n’indexais pas ces pages, aucun intérêt à la garder.

Disparaissent également de la page d’accueil les blocs “articles les plus lus” et “articles les plus populaires”, que l’on retrouvera en revanche sous une autre forme dans les pages intérieures.

La page archives

La page d’archives a été revue afin de mieux mettre en valeur les articles publiés. Le classement chronologique fait maintenant place à un classement thématique, plus adapté. Des raccourcis permettent une navigation rapide vers la thématique souhaitée.

Les pages d’articles

Les pages d’articles ont reçu pas mal de modifications. L’affichage de la catégorie dans le fil d’Ariane dernier me permet de passer le bloc “date et catégorie de publication” en bas de page. L’utilisateur a donc directement accès au contenu sans interruption, ce qui est mieux pour la lecture. Cela me permet également d’afficher plus de contenu au dessus de la ligne de flottaison de l’écran, même si, par ailleurs, l’en-tête de page est plus aéré de 10 pixels.

Une bande “Si cet article vous a plu, vous pouvez m’ajouter sur Twitter” fait son apparition en bas de l’article. Je tente là de reproduire une expérience lue sur un blog anglophone, dont je vous donnerai les résultats dans quelques mois.

Les informations complémentaires précédemment affichées en bas de l’article disparaissent : lien permanent vers l’article, lien vers le flux RSS des commentaires, reprise des tags, de la catégorie, et indication de la licence. Ces dernières n’ajoutaient pas vraiment de valeur à l’information, et plaçaient un gros bloc entre l’article et les commentaires.

Le bloc des articles liés reste, mais j’ai entièrement réécrit l’algorithme les faisant remonter pour plus de pertinence. Il me semble important de le conserver, aussi bien pour proposer de l’information croisée que pour une bête question de tissage du maillage interne.

Les blocs de commentaires ont été restylés. Après une longue réflexion, j’ai finalement mis en place le support de Gravatar dans les commentaires. Je ne suis pas fan de Gravatar, et accéder à un énième service tiers ralentit l’affichage des pages. D’un autre côté, j’ai un noyau assez fidèle de personnes s’exprimant dans les commentaires, et il m’a semblé intéressant de voir qui est qui au premier coup d’oeil.

Les trackbacks devraient rapidement disparaitre de manière définitive. J’en avais très peu, et pas d’une qualité phénoménale. Je n’exclus pas de les remplacer à termes par le résultat d’une recherche sur Google Blogs.

Barre de navigation latérale

De ce côté là, pas énormément de changements, en dehors de l’arrivée d’un bloc “à propos”, qui remonte du pied de page au dessus de la ligne de flottaison de l’écran. Le blog “Tags” gagne un lien afficher tous, mais le format de cette page n’est pas encore vraiment défini.

Et voilà, c’est à peu près tout pour cette refonte. Si vous êtes nouveau, vous ne devriez pas avoir trop de mal à trouver ce que vous chercher. Et si vous ne l’êtes pas, vous devriez également rapidement retrouver vos petits.

Voilà, c’est à peu près tout. Une hérésie s’est glissée dans ce thème, et j’offre une bière au premier qui la remonte dans les commentaires (Jean-Luc, toi, ça ne compte pas). Je sais bien que la peinture n’est pas fraiche et qu il il me reste pas mal d’ajustements à faire, mais c’est en passant en production qu’on voit le mieux ce qui ne va pas. Enfin, le disclaimer habituel : je n’ai pas testé ma CSS ni sous IE6 ni sous IE7. Donc si ça ne marche pas, c’est normal.

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: