Le web français s’est bien fendu la poire en ce 15 septembre 2009, le jour de la sortie officielle de la nouvelle version de desirsdavenir.com. Pour rappel, ce site est à l’initiative de Ségolène Royal et fût lancé lors de sa candidature aux élections présidentielles de 2007. Pourquoi tout le monde se marre ? Parce que le nouveau site est franchement horrible, sous tous ses aspects. Ergonomie, référencement, accessibilité, design, expérience utilisateur : le site semble bien se moquer de toutes ces notions. Retour sur l’erreur de Ségolène à travers ce petit audit de qualité.

DesirsDavenir.com : Ergonomie

Les ascenseurs n’engendrent pas l’ascension de votre site /!\ (super sous-titre non?!)

Dès l’arrivée sur la homepage, c’est le point qui choque le plus : le site présente d’énormes ascenseurs ou « scrollbars ». Observez les captures suivantes :

Avec une résolution de 800×600, c’est pas la peine on oublie. Le site est ingérable. Des barres de scroll à ne plus en finir, des boutons 10 fois trop gros, on passe son chemin sans attendre une seconde de plus.

Avec une résolution de 1024×768 – soit la résolution standard sur les ordinateurs portables – on se retrouve tout de même avec un scroll vertical ET un scroll horizontal. Aïe. Pour moi, l’utilisateur lambda qui cherche à limiter son nombre de clics et ses déplacements de souris, ce site est tout simplement un cauchemard.

Un petit coup d’oeil au code source permet d’identifier rapidement l’origine de ce problème : la homepage est réalisée en Flash, donc, appelée par SwfObject qui permet d’intégrer des animations Flash proprement (bon point !!). Oui mais voilà le code de SwfObject:

AC_FL_RunContent(
‘width’, ‘1280′,
‘height’, ‘768′,
(…) )

Le webmaster a choisi d’intégrer son Flash en taille fixe, en « dur ». Il a donc légitimement décidé que sa résolution était la résolution standard, et que ceux qui auraient des scrollbars sur leurs écrans, ben ils n’ont qu’à acheter un écran plus grand ! Pourtant, toute le monde (dans le domaine) sait pertinement qu’une page fullflash doit être gérée en pourcentage :

‘width’, ‘100%’,
‘height’, ‘100%’,

Ensuite on gère l’alignement des éléments du flash en ActionScript (je ne vais pas vous faire un cours) pour faire en sorte que les éléments s’affichent correctement, et cela quelque soit la résolution de l’utilisateur.

Bon passons. Admettons que l’équipe (si équipe il y a) à l’origine du site ait oublié ce détail et qu’ils vont très rapidement corriger cela. Next.

Laissez l’utilisateur contrôler son interface, ne le contraignez pas !!!

Second point qui, dès les premières secondes sur le site, surprend et dérange : la vidéo de Ségolène en plein milieu de l’interface, se lance automatiquement à l’ouverture de la page. C’est une des règles de base de l’ergonomie : il ne faut pas contraindre ses utilisateurs mais plutôt les guider dans l’interface. Je n’ai rien demandé, je voulais juste consulter le site et jeter un oeil sur les textes/articles, mais cette vidéo se déclenche sans rien lui demander. PIRE ENCORE : IL N’Y A PAS DE BOUTON STOP !!! Il n’aurait pas été difficile d’intégrer un player vidéo avec bouton stop/play/pause/mute…Flash propose une douzaine de players par défaut répondant à ces attentes, mais le webmaster de desirsdavenir.com a choisi de ne pas offrir le contrôle sur la vidéo. On regarde et on se tait (ou alors on ferme la page…). Le plus drôle dans tout cela, c’est que la vidéo est super mal intégrée, on aperçoit d’énormes bandes noires au dessus et au dessous de la vidéo :

C’est moche, on est d’accord ? En plus la vidéo est toute pixelisée … Beuark’.

La navigation : tout est dans le style

Autre point ergonomique qui fâche : les liens sur la page d’accueil ne différencient pas le survol, malgré le survol des boutons avec le curseur, rien ne nous indique que l’élément survolé est bel et bien un lien cliquable. Pas de changement de couleur, pas de réaction de l’interface, simplement un bouton rouge qui reste rouge en toutes circonstances :

Une fois la homepage full flash zappée, on arrive sur une interface reposant sur Joomla. Jetons un œil :

Hé oui, avec Joomla on peut faire des merveilles comme des catastrophes ! Le principal problème de ce template, c’est la navigation. Elle se présente sous forme de sidebar ou « colonne latérale » et occupe une hauteur impressionnante. Pourquoi la plupart des sites web proposent une navigation en haut de page ? Parce que c’est le seul moyen d’être efficace. Une navigation en haut de page permet une cohérence et un accès rapide à toutes les sections. Ici, si je veux naviguer d’une page A vers une page B, je suis obligé de parcourir la page de haut en bas en passant par l’ascenseur pour découvrir le contenu de la navigation. Ce n’est pas pratique, cela ralentit ma navigation, et c’est insupportable.

Je ne vais pas m’attarder plus que ça sur l’ergonomie, il y aurait tellement de choses à dire que cet article n’aurait pas de fin.

DesirsDavenir.com : Webdesign

L’art du webdesign, c’est de créer des interfaces propres, claires, belles. Des pages qui donnent envie de revenir. Ici on est loin du résultat escompté : le site est franchement moche, et ce n’est pas une question de goûts et couleurs.

A l’heure ou le « 2.0″ n’est plus une mode mais un standard, on a l’impression ici de retrouver les sites amateurs que nous concevions en 1995.

Le header : on ne fait qu’une première impression, faites en sorte qu’elle soit bonne !

Le header ou « en-tête / bandeau » en bon français, c’est la première chose sur laquelle vos internautes tomberont. Il est censé représenter votre image en quelques pixels, il doit être graphique, peaufiné. Voici le header de desirsdavenir.com :

Titre en capitales, dans une police rétro qui ressemble plus à un « wordart » généré sous Word qu’à une créa travaillée sous Photoshop. Dès le premier coup d’oeil, c’est l’échec. Les effets de relief rappellent étrangement le filtre « Emballage plastique » (un des filtres par défaut de Photoshop, que plus personne n’utilise depuis 20 ans). Comment ne pas être choqué ?

La navigation : travaillez vos menus, améliorez vos boutons, poussez votre interface à fond !

Le menu / la navigation c’est le passage obligatoire : 100% des internautes devront parcourir votre navigation pour naviguer au sein du site. En toute logique, celle-ci doit être travaillée. Elle doit se penser, se dessiner sur le papier, être peaufinée dans Photoshop jusqu’à obtenir un résultat parfait – ou au moins convenable – ce qui n’a pas été le cas ici :

C’est quoi ce violet ?!
C’est quoi ce pictogramme?!
C’est quoi cette police?!
(…)

Étant donné le nombre d’éléments à placer dans cette navigation (lourde arborescence), il aurait été logique d’opter pour un menu déroulant. Et il ne fait aucun doute que ce menu n’a pas été travaillé graphiquement (on dirait mon premier site ).

Le fond de page : évitez les fichiers lourds, évitez le « déjà-vu ».

Un des éléments les plus étranges de ce site, c’est le fond de page. Celui-ci ressemble étrangement à un fond d’écran Windows par défaut, mais des images valent mieux que de longues phrases :

Voici le fond d’écran de Windows XP

Voici le fond de desirsdavenir.com

Ce plagiat avait déjà été comis par Nicolas Sarkozy pour son affiche lors de sa campagne présidentielle, ce qui rend la chose encore plus comique :

Voici la source originale de cette image de fond, elle est disponible au téléchargement gratuit sur un site de fond d’écrans.

La goutte qui fera déborder le vase, c’est que ce fond de page se répète sur la hauteur. Erreur de débutant.

Le footer : la touche finale de votre site.

Le footer ou « pied de page » c’est l’élément final de votre page. Il est censé fermer le contenu et ajouter la touche finale. Généralement, on y retrouve le menu secondaire (mentions légales etc…). De nos jours, les footers sont de moins en moins négligés, on y accorde de l’importance car c’est en quelque sorte la « signature » du site (Observez le footer de mon blog : il inclut le plan du site, mes dernières actualités et mes derniers projets…bref il est utile et stylisé). Voici la « signature » de desirsdavenir.com :

Ah tout de suite on comprend mieux : le site est la propriété de « — » (webmaster anonyme !! il n’a pas voulu se dénoncer !!)
Une mention légale en anglais, un crédit Joomla qui nous apprend que le site repose sur un template tout fait…C’est la cata.

Ce footer ne contient aucune information, aucun lien d’aide ou de contact. Ce footer est moche et inutile. CQFD !

DesirsDavenir.com : Référencement

Au niveau référencement, il est difficile de faire pire. D’abord, la page d’accueil. Tout webmaster digne de ce nom connait l’importance de la balise <title> : c’est un des principal critère de qualité pour le référencement. Observez le titre de la homepage :

<title>index</title>

Il ne fait aucun doute que la personne à l’origine de la conception du site n’a pas pris le temps d’indiquer une balise de titre correcte. En fait, il s’agit de la balise <title> par défaut générée par Flash lorsque l’on exporte en html. LOOSERS!

Une fois la homepage passée, on se rend vite compte de la pauvreté du travail réalisé en terme de référencement. Regardez plutôt la structure de l’URL :

index.php?option=com_content&view=article&id=71

En clair, les URLs ne sont pas réécrites. La structure n’est pas du tout optimisée pour le référencement naturel. Dans ce cas précis de refonte, il aurait été évident de créer un fichier HTaccess pour la réécriture naturelle ainsi que les redirections 301 (pour rediriger les anciennes pages vers les nouvelles pages).

Plus drôle encore, un coup d’oeil sur les balises <meta keywords> :

<meta name="keywords" content="PS" />

Autant dire que cette balise est totalement inutile et décrédibilise le site plus qu’autre chose. Un mot clé tout seul ne sert à rien, surtout lorsqu’il s’agit d’une abbréviation et qu’elle à plusieurs sens.

DesirsDavenir.com : Accessibilité

Il va de soi qu’une homepage en full flash rend un site totalement inaccessible. C’est dommage, car la suite est basée sur Joomla, et il n’aurait pas été difficile d’appliquer quelques principes d’accessibilité. Personnellement c’est le point qui me met le plus hors-de-moi : un site à gros trafic, avec une consonance politique, qui parle de « désirs d’avenir » et qui néglige totalement l’accessibilité. Ségolène et son équipe sont-ils au courant de la réforme du 16 mai 2009 ? N’ont-ils donc rien à faire des personnes agées, des handicapés ?

Cela ne fait aucun doute, ce site est une blague, un scandale, une honte. Ségolène, si tu me lis, la prochaine fois fais appel à mes services, mais STP ne confie pas tes projets à Andecom, ce prestataire n’a pas de site, pas de références, et je crois qu’ils vont très bientôt devoir mettre la clé sous la porte, en raison de l’énorme badbuzz généré par ce « site ».

N’y voyez pas une attaque envers le PS ou envers Ségolène, je suis juste choqué / scandalisé par ce site : qui a donné le feu vert pour mettre cette daube en ligne ? Qui est à le graphiste qui a osé pondre cette charte ? Qui est le développeur à l’origine de l’intégration du Joomla ? Dans cette histoire, tous doivent se remettre en question : Ségolène mais aussi son équipe de communication, ses prestataires, et les gens qui l’entourent à qui elle a sûrement dû montrer le site avant sa mise en ligne.

Le mystère à résoudre : pourquoi cette refonte ? Les anciennes versions de desirsdavenir.com étaient pourtant bien plus belles et bien plus efficaces !!

La version 2007 :

La version 2008 :

Pourquoi ….? POURQUOIIIIIII ?!!!!!!!

Voila c’est la fin de cet article quasi-interminable, un grand merci à @m_ddd pour la relecture et @desirsdavenir pour nous avoir fait marrer toute la journée et avoir créé le nouveau badbuzz de la semaine.

Alors, que pensez-vous de cette analyse ?
Avez-vous remarqué d’autres détails qui fâchent ?

[EDIT] pour ceux que ça intéresse : la réponse de Ségolène Royal

Lectures recommandées

Vous aimerez certainement :

1. Vos polices préférées sur votre site web (tous navigateurs confondus)
2. Déménager un site web
3. Ils ont 5 secondes pour tester votre site web