Ergonomie Web, Ruby on Rails et Architecture de l'information V3

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.

Publié le 07 octobre 2009 à 23h29 Publié sous Blogs, Twitter et micro blogging

Mots clés design, blog, utilisabilité, webdesign, ergonomie, theme, template

Si cet article vous a plu, suivez-moi sur Twitter

16 commentaires sur Ergonomie Web, Ruby on Rails et Architecture de l'information V3 »

Par Pep le 07 octobre 2009 à 23h45 :

Je ne sais pas si c’est l’hérésie en question, mais tu devrais être brulé vif pour l’utilisation de la Comic Sans dans tes boutons de soumission… :)
Par Frédéric de Villamil le 07 octobre 2009 à 23h47 :

C’était effectivement ça. J’avais envie de faire un truc condamnable, et j’hésitais entre ça et l’utilisation d’un gif animé pour le piaf de Twitter. Comic Sans m’a paru – un chouilla – plus discret.
Par Luc le 08 octobre 2009 à 09h11 :

un détail a attiré mon attention, je ne sais pas si c’est voulu.

Dans le fil d’ariane la page d’accueil est déclarée comme “ErgonomieWeb”. Si je clique sur “Téléchargement” ou “A Propos”, le fil d’arriane n’avolue pas vers le sous niveau.

cela devrai à mon avis, non ?
Par Luc le 08 octobre 2009 à 09h13 :

De la même manière, si tu clique sur “Articles” l’item passe en bleu foncé (selectionné), ce n’est pas le cas pour les autres page du menu du haut
Par Frédéric de Villamil le 08 octobre 2009 à 09h26 :

Luc : Merci. Effectivement, j’ai complètement réécrit le code du fil d’Ariane et des onglets afin de le centraliser, et j’ai zappé quelques cas. Je ferai ça ce soir en rentrant.
Par Luc le 08 octobre 2009 à 09h32 :

Je te propose aussi l’ajout d’un flux RSS commentaire et / ou des commentaires d’un articles. a moins que je ne l’ai pas trouvé, mais c’est quand même pratique ce genre de choses pour suivre les discussions.
Par giz404 le 08 octobre 2009 à 09h40 :

Bien plus convaincant que le design précédent !!
Par Sly le 08 octobre 2009 à 10h29 :

En effet, le Comic Sans, ça choque… ^^; Petit bémol aussi sur Safari quand on rend les champs textes plus sexy, c’est que le halo bleu et le redimensionnement cassent un peu la beauté de la chose.

Quant à la phrase Twitter, d’après les blogs US que j’ai pu lire, elle est plus souvent au dessus de l’article (ou en haut ET en bas parfois), mais plus elle est impérative et incitative, plus elle semble marcher (j’ai oublié la source, mais les stats complètes du A/B testing étaient données).

Autres lieux, autres mœurs : en France ça passerait sûrement moins bien, mais qui sait ? Cela dépend probablement de l’âge de l’audience.
Par Mère Teresa le 08 octobre 2009 à 11h38 :

How I reach the english version ? Question stupide de ma part, en réalité, puisque je suivrais toujours la VF. Mais n’as-tu pas un petit drapeau ou indicateur à ajouter pour switcher ?

Sinon, je te lis principalement par mon Reader RSS, donc je vois pas trop le design mais aurais-tu agrandi la police ?

Mon impression générale est que ça ressemble au site de Jakob Nielsen, le contenu flotte un peu dans la page (tout ce blanc). Et si j’aime bien la page d’accueil type magazine, ne pourrais-tu pas mettre en avant un des articles ?
Par Frédéric de Villamil le 08 octobre 2009 à 12h00 :

@Luc : le flux RSS des commentaires existe, et est proposé dans la barre d’URL de ton navigateur en auto discovery. Mais je pourrais éventuellement le remettre.

@giz404 : merci

@Sly : je suis intéressé par l’étude. Cela dit, j’ai déjà l’icône Twitter dans le header du thème. Pour l’instant, je vais regarder le taux de transformation moyen, et je changerai éventuellement la phrase à l’occasion (voire lancer une campagne A/B, c’est très exactement à ça que ça sert).

@Mère Thérèsa : Être comparé à Jakob Nielsen, quel honneur, mes chevilles vont exploser dans mes Puma. Effectivement, je pourrais mettre une passerelle entre les deux sites. La taille de la police n’a pas changé, en revanche, je suis passé d’Helvetica à Lucida Sans Unicode. Quant à mettre un article en valeur, c’est prévu à très court terme, mais j’avais vraiment envie de mettre ce thème en ligne, sans compter le fait que je savais que j’aurais un feedback de grande qualité.
Par Luc le 08 octobre 2009 à 16h54 :

@Frédéric : vu, dans ma logique les flux en auto discovery concernent uniquement les flux “généraux” quand ils ne sont pas nommés. (j’avais regardé).

peut être qu’un attribut title sur le link alternate pourrai faire l’affaire.

ce qui ferait (dans l’ordre) en autodiscovery :

flux 1 : flux général du site flux 2 : flux général des comments flux 3 : flux des comments de l’article en cours si l’on est sur un détail.
Par Olivier BONNAURE le 08 octobre 2009 à 17h33 :

Moi le haut me fait furieusement penser au couleurs de http://envylabs.com/ !! Je me trompe ? Argh ! c’est vrai que le “Commenter” en bas ca m’a fait qq chose ! :)
Par Digadao le 08 octobre 2009 à 18h49 :

Evolution intéressante ! J’aime beaucoup le style magazine. Mais je vote pour ton idée de mettre en avant le dernier billet car je me sens un peu perdu au milieu d’une “galerie” de titres+chapo.

Pour info, Antonio Lupetti vient lui aussi de faire une refonte de son excellent blog Woorkup avec une approche magazine similaire à la tienne http://woorkup.com/
Par Frédéric de Villamil le 08 octobre 2009 à 22h41 :

@olivier : en fait, la réponse est dans le billet, et le schémas de couleurs est Twitter + un service sur lequel je travaille + Smashing Mag pour le gris clair.

@Digadao : c’est en cours de préparation, mais je ne sais pas encore comment je vais le mettre en valeur. J’y travaille cela dit.
Par Saiko le 08 octobre 2009 à 23h44 :

FYI : effectivement, sous IE6 ça ne marche pas ;)
Par Mère Teresa le 12 octobre 2009 à 13h54 :

Euh…ce n’était pas un compliment, je le trouve affreux le site de Mr Nielsen (http://www.useit.com)… et Teresa => pas de H

Et plus sérieusement, tu ne veux pas qu’on accède à la version anglophone du site ?