Refondre un site Web est-il vraiment compliqué ? Après tout, si le petit neveu de 15 ans de votre voisine a été capable de le faire, n’importe qui peut le reprendre, non ? Reprendre un site existant est plus simple que le créer de zéro, puisque tout le contenu est déjà là. La vérité, c’est que bien refondre un site afin d’atteindre des objectifs définis à l’avance est très difficile, en tout cas beaucoup plus que cela n’en a l’air.

Il y a quelques jours, Daniel Roch a lancé un appel à bêta testeurs pour la nouvelle version de SEOMix. Après que je lui ai envoyés mes retours purement techniques, il m’a demandé mon avis plus général sur sa refonte. Je lui ai alors proposé d’en faire une revue qui pourrait être utile à d’autres, et il a accepté de jouer le jeu, ce qui est d’autant plus méritant que je n’ai pas la réputation d’être tendre.

Faire une revue de la refonte d’un site sur le seul résultat avant / après, c’est bien sûr possible. On gagne pourtant à en connaître les objectifs avant de donner ses conclusions, afin de voir s’ils ont été atteints, et si non, dans quelle mesure. Les errements de mon agenda aidant, Daniel me les a transmit avant que je termine cet article, ce qui a un peu biaisé la revue.

Concernant mes objectifs pour cette V3, ils y en avait plusieurs :

  • Ajouter un accès à mes prestations.
  • Faciliter la lecture des contenus qui s’affichaient sur une largeur trop petite, ce qui rendait certains articles très longs.
  • Améliorer le contenu des pages de catégories (Wordpress, Référencement, Web et Webmarketing).
  • Augmenter le taux de clics sur les publicités.

SEOMix

Une navigation maladroite et trop robot friendly

Le site conserve une navigation par menus déroulants affichés horizontalement en dessous de l’en-tête. Dans les deux cas, aucune différence n’est faite entre les entrées cliquables et les menus déroulants. On ignore que l’on va obtenir des informations supplémentaires en passant la souris au dessus des labels. C’est dommage car cela coupe l’utilisateur d’informations utiles.

L’onglet Contact disparait au profit d’un bouton Mes services, un peu maladroit.

  1. Il est de la même couleur et a le même comportement que les boutons lire la suite, ce qui ne le distingue pas visuellement.
  2. Placé sous la barre de recherche, il disparait sous cette dernière qui devient la première à accrocher visuellement.

Dans les deux cas, je ne suis pas certain que ce soit le résultat souhaité.

Le plus problématique vient pourtant du comportement des menus déroulants, qui affichent un calque opaque sur toute la page au survol de la souris. C’est visuellement dérangeant, et coupe le visiteur du contenu qu’il était en train de visualiser. Ce calque est d’autant plus gênant que les menus sont assez larges, et que l’utilisateur doit donc déplacer la souris hors de la zone de navigation pour le faire disparaitre.

<typo:lightbox src=”https://t37.net/files/seomix-refonte-02.jpg” thumbsrc=”https://t37.net/files/medium_seomix-refonte-02.jpg” class=”centered” alt=”Navigation SEOMix” />

La navigation reprend le paradigme des menus verbeux, qui présentent ce vers quoi ils mènent. Si je vois bien l’intérêt du point de vue densité des mots clés, il implique que les entrées du menu ne sont pas assez claires pour se suffire à elles-mêmes. Le libellé des menus – notamment la répétition du nom Wordpress dans le menu dédié fait particulièrement keyword stuffing, en tout cas pas vraiment naturel pour un être humain. Design for human first, then robots.

Le fil d’Ariane est bien présent sur les pages d’articles et sur certaines pages, mais pas partout, et il disparait trop souvent sous la publicité. C’est dommage pour un élément de navigation aussi utile qui semble être là uniquement pour la densité des mots clés et le maillage interne.

Page d’accueil

Entre 10 et 20% des visiteurs de SEOMix arrivent sur le site depuis la page d’accueil. Celle-ci doit donc leur permettre de répondre aux questions habituelles :

<typo:lightbox src=”https://t37.net/files/seomix-refonte-05.jpg” thumbsrc=”https://t37.net/files/medium_seomix-refonte-05.jpg” class=”centered” alt=”Home SEOMix” />

Où suis-je ?

L’ancienne page d’accueil ne répondait que partiellement à la question. On sait certes qu’il s’agit d’un site sur le référencement, le marketing Web et Wordpress. L’encart à droite de la page indique que le site est publié par Daniel Roche, que ce dernier a 1426 followers et 803 abonnés RSS, mais ça ne va pas beaucoup plus loin. Pour le reste, un coup d’oeil permet de voir que l’on se trouve sur un blog, et qu’il y a un certain niveau – quantitatif – de conversation. C’est assez peu, mais beaucoup considèrent cela suffisant.

La nouvelle page d’accueil en fait encore moins, puisque la mention de l’auteur du site a été supprimée. Le nouveau format magazine fait penser à un site multi auteurs, et la conversation est beaucoup moins mise en avant.

Que veut-on me vendre ?

L’ancienne version du site proposait des guides Wordpress et Google Analytics. Attendez, parlez-vous de “guides sur Wordpress et de guides sur Google Analytics”, ou de “guides sur l’usage de Wordpress conjugué à Google Analytics” ? Le très faible trafic sur cette rubrique, à peine une centaine de visites par moi montre clairement un problème soit de mise en avant, soit de qualité. Ce bouton plutôt ambigu en est peut-être la cause.

La nouvelle version du site propose un call to action mes services, que nous avons déjà abordé plus haut. Services de quoi ? Certainement des prestations autour du référencement, de Wordpress et du Web marketing, mais c’est au visiteur de le déduire en lisant la partie supérieure de la page. Ce bouton gagnerait à être modifié pour être mieux mis en avant et plus explicite.

Que vais-je y trouver ?

L’ancienne page ne répondait pas du tout à la question. Certes les rubriques de la navigation étaient explicites, mais pour le reste, il n’y avait pas de hiérarchisation visible de l’information. Les informations affichées dans les blocs latéraux, derniers tweets, le meilleur de SEOMix, ou les commentaires des lecteurs n’ont de valeur que pour les personnes connaissant déjà le site. J’espère pour Daniel que ces 10 à 20% de visiteurs entrant par la page d’accueil ont un ratio de 20% de nouveaux pour 80% de revenants.

La nouvelle page d’accueil est beaucoup plus claire à ce sujet. Les 3 onglets du bloc supérieur indiquent bien que l’on se trouve sur un site publiant du contenu de manière plus ou moins périodique. Je ne suis pas du tout fan des boutons lire la suite : leur couleur et leur positionnement ne font pas naturel par rapport au reste de la page, et le contraste rouge / bleu détourne l’oeil des titres qu’il rend moins lisible. Le positionnement plus classique du nombre de commentaires et de tweets améliore, lui, la lisibilité.

Sur mon écran en 1440x900, les blocs thématiques Wordpress / Référencement et Web marketing remontent juste au dessus de la ligne de flottaison, et attirent l’oeil du visiteur. Ils sont cependant un peu trop bas pour fonctionner avec des résolutions plus faibles, celle-ci représentant pour ce site à peine 12% des visiteurs. Le bouton Lire la suite trouve vraiment sa place ici, grâce à l’étroitesse des colonnes et au blanc cassé de la couleur de fond.

Je ne suis pas du tout fan de la reprise de l’introduction du dernier article au dessus du footer avec l’ajout de la pagination. Il n’apporte rien au visiteur en dehors de la pagination, laquelle n’a pas grand chose à faire après les blocs thématiques.

Le pied de page, enfin, affiche les données qui se trouvaient autrefois à droite de la page. Je ne suis pas certain qu’elles apportent quoi que ce soit ici, notamment en termes de clics. Pour être honnête, j’ai même l’impression que ce pied de page ne sert qu’à mettre des liens et des mots clés…

<typo:lightbox src=”https://t37.net/files/seomix-refonte-06.jpg” thumbsrc=”https://t37.net/files/medium_seomix-refonte-06.jpg” class=”centered” alt=”Home SEOMix” />

Une analyse des clics sur cette zone à l’aide d’un outil comme Crazy Eggs serait assez intéressante. On perd également le bloc contactez moi, pourtant indispensable, même si mal positionné. Enfin, le bloc suivre SEOMix mériterait de remonter en haut de la page, par exemple à la place du bloc publicitaire de droite, mais reformulé afin de donner des informations sur l’auteur. Une reprise du bloc “Y’a quoi dans le mix” de la version 2 serait un bon point de départ.

Des listes d’articles plus claires

Les pages de listing ont été clairement améliorées. L’abandon de la barre latérale fixe a permis de décaler toutes les méta données des articles à droite de l’écran.

La réalisation pèche cependant sur deux points :

  1. Les blocs de méta données affichant des informations de filtrage (catégories), ils auraient mérité d’être placés à gauche de la page et non à droite, sur le modèle d’Amazon.
  2. Les mentions xxx commentaires et xxx tweets ne sont pas cliquables. Si c’est pour une question de maillage interne, ils mériteraient au moins un lien en Javascript (cordonniers, tout ça).

La bannière de publicité latérale a disparu, pour passer au dessus de la liste. Au delà d’être visuellement beaucoup plus intrusif, je ne suis pas certain que cela ait l’effet escompté, mais la nouvelle disposition ne permettait plus de la placer à droite.

<typo:lightbox src=”https://t37.net/files/seomix-refonte-04.jpg” thumbsrc=”https://t37.net/files/medium_seomix-refonte-04.jpg” class=”centered” alt=”Publicité dans les listings d’articles” />

Des pages de catégories déroutantes

Les pages de catégories ont été refondues afin de mettre les contenus en valeur, notamment par la valorisation des sous-catégories qui disparaissaient dans le flux des billets. Le choix d’afficher le temps passé depuis la publication des articles dans les méta données au lieu des dates de publication se tient parfaitement, même si c’est le seul endroit du site où ce format est utilisé.

<typo:lightbox src=”https://t37.net/files/seomix-refonte-08.jpg” thumbsrc=”https://t37.net/files/medium_seomix-refonte-08.jpg” class=”centered” alt=”Les pages de catégories” />

J’ai en revanche plus de mal à comprendre la logique derrière le déplacement de la publicité à gauche, alors que la page reprend exactement les éléments de la page d’accueil. C’est perturbant pour le visiteur sans ajouter de valeur à la navigation.

<typo:lightbox src=”https://t37.net/files/seomix-refonte-07.jpg” thumbsrc=”https://t37.net/files/medium_seomix-refonte-07.jpg” class=”centered” alt=”Les pages de catégories” />

La page contient toujours deux blocs de publicité. Dans l’ancienne version, ceux-ci se trouvaient au haut du bloc latéral et entre deux posts. Avec la disparition de l’affichage chronologique, ce dernier passe en bas de la page juste au dessus du big footer. Une fois encore, je ne suis pas fan du tout de la reprise du contenu chronologique en bas de page, surtout pour un seul billet. Cela alourdit la page sans ajouter de valeur et on sent la pagination un peu perdue.

Une refonte des articles aux résultats en demi teinte

Un des objectifs de la refonte était d’améliorer la lisibilité des articles trop long en élargissant la place qui leur est consacrée à l’écran. La page a été divisée en visuellement en trois parties, avec une séparation graphique très forte, donnant l’impressions que celles-ci n’ont pas de vrai lien entre elles.

L’affichage du billet proprement dit

Sur l’ancienne version, la disposition en deux colonnes figées limitait la largeur offerte à la lecture à 490 pixels avec une police réduite à 12,8 pixels. Cela permettait au site d’afficher des lignes de 78 caractères, ce qui est idéal en termes de confort de lecture.

Dans la nouvelle version, la zone de contenus passe en pleine page, et les billets sont affichés avec une police de 16 pixels de haut. En haut de page, l’inclusion d’une barre latérale permet d’afficher les articles sur 560 pixels de large. On retrouve donc ce même confort de lecture avec des lignes de 76 à 80 caractères. Malheureusement, une fois passée la sidebar autour duquel le texte vient se couler, on passe à des lignes de 115 caractères, ce qui est beaucoup moins lisible. J’ai eu du mal à aller au bout d’un article particulièrement long, et pourtant fort intéressant.

<typo:lightbox src=”https://t37.net/files/seomix-refonte-09.jpg” thumbsrc=”https://t37.net/files/medium_seomix-refonte-09.jpg” class=”centered” alt=”Les pages de catégories” />

Je suis particulièrement fan de la colonne latérale qui vient se positionner à gauche des articles. Si le bloc L’auteur et Plus d’informations (auquel je fais les mêmes reproches que plus haut) sont des plus classiques, l’inclusion d’une table des matières générée à partir des balises d’en-tête est une très bonne idée, surtout dans un article long. Il n’est en revanche pas intégrable dans n’importe quel design, mais celui de Daniel s’y prête très bien.

<typo:lightbox src=”https://t37.net/files/seomix-refonte-10.jpg” thumbsrc=”https://t37.net/files/seomix-refonte-10.jpg” class=”centered” alt=”Table des matières du billet” />

Le bloc fourre tout des contenus connexes

Déjà présent dans la précédente version, le bloc un peu fourre-tout qui mélange articles liés et boutons de partage vers les réseaux sociaux méritait des améliorations.

<typo:lightbox src=”https://t37.net/files/seomix-refonte-12.jpg” thumbsrc=”https://t37.net/files/seomix-refonte-12.jpg” class=”centered” alt=”Bloc fourre tout, ancienne version” />

La nouvelle evrsion intègre très bien la publicité aussi bien visuellement que contextuellement, au point que j’ai failli ne pas la remarquer malgré la mention Publicité SEOMix.

<typo:lightbox src=”https://t37.net/files/seomix-refonte-11.jpg” thumbsrc=”https://t37.net/files/medium_seomix-refonte-11.jpg” class=”centered” alt=”Contenus liés” />

Le fil des commentaires

Le fil des commentaires occupe la troisième partie dans la découpe visuelle de la page.

Le bouton je commente mériterait de remonter dans le bloc précédent. Ce dernier étant particulièrement haut, on doit scroller jusque là afin d’obtenir ce raccourci pourtant fort pratique. D’autre part, la flèche devrait pointer vers le bas, et non vers la droite comme sur le bouton lire la suite, qui mène vers d’autres pages.

<typo:lightbox src=”https://t37.net/files/seomix-refonte-13.jpg” thumbsrc=”https://t37.net/files/medium_seomix-refonte-13.jpg” class=”centered” alt=”Fil de commentaires” />

La version précédente du site disposait les commentaires de Daniel avec un “effet miroir” pour les différencier des autres commentateurs. La nouvelle version reprend ce principe dont je ne suis pas fan, car il a tendance à casser le rythme de lecture.

Elle affiche en revanche d’autres informations utiles, notamment le nombre de commentaires déjà publiés par son auteur. Cette simple mention crée un effet réseau social propre à motiver les contributions.

Au lieu de la date de publication du commentaire, l’expérience utilisateur aurait gagné à afficher le temps passé entre la publication du commentaire et celui du billet original, mais ce n’est pas le plus gênant.

Le formulaire de commentaires

Ce dernier est on ne peut plus classique, et devant être authentifié pour voir cette nouvelle version, je n’ai pas pu le voir dans son entier. La limitation des balises HTML autorisées, cependant, est très curieuse : pourquoi strong, u, et i, qui rendront le XHTML de la page invalide, et pourquoi pas de em par exemple ?

Conclusion

Les objectifs de Daniel sont-ils atteints ? C’est subjectif, mais je ne pense pas, ou du moins, seulement partiellement.

Ajouter un accès à mes prestations.

La page des prestations n’étant pas prête au moment où j’ai écrit cet article, je n’ai pas pu la passer en revue. Le bouton qui leur est consacré en en-tête de page mérite cependant d’être agrandi, de se distinguer visuellement des autres boutons, et d’en dire plus. Le call to action est un élément trop important pour être négligé comme ça.

Faciliter la lecture des contenus qui s’affichaient sur une largeur trop petite, ce qui rendait certains articles très longs.

Cette partie là n’est pas satisfaisante, puisque l’élargissement de la page fait perdre en visibilité. L’augmentation de la taille des blocs et de la police utilisée dans les commentaires a en plus un effet un peu paradoxale : entre les deux versions de la page étudiée, la différence à l’écran, matérialisée par celle de l’ascenseur, n’est pas si flagrante.

Améliorer le contenu des pages de catégories

Elles l’ont été, c’est évident, en cassant l’affichage temporel et en mettant les sous catégories en valeur. De ce point de vue, la refonte est une réussite, dommage pour l’inversion de la position des blocs.

Augmenter le taux de clics sur les publicités

On verra ce que ça donnera, mais les blocs de publicités placés à gauche dans les pages de catégories et des articles ont du mal à me convaincre, tout comme, finalement, cette refonte dans sa globalité (à commencer par la navigation), malgré des éléments très intéressants.

Si vous effectuez une refonte complète de votre site ou de votre application, et que vous voulez vous prêter au jeu, envoyez-moi un mail avec un descriptif, les objectifs de la refonte, et un lien vers la nouvelle version avant sa publication, et si le sujet ou la nouvelle version m’intéressent, vous serez peut-être le prochain à passer sur le grill.

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: