Astrid Girardeau, journaliste à Libération, m'a posé une question très intéressante et très difficile à répondre : qu'est qui fait un site laid (ou ringard) ? Cette question est bien sûr en relation avec le désormais tristement célèbre site web de Ségolène Royal desirsdavenir. com. 
Une partie de mes réponses fut publiée dans le Libération d’hier (le vendredi 3 octobre). 

Voici mes notes concernant cette question (comme d’habitude, texte en vrac et vaguement structuré). 

Premièrement, j’ai voté avec enthousiasme Ségolène Royal aux dernières élections présidentielles, et je suis sûr que la grande majorité des internautes ayant réagi à ce site on fait de même. Donc, il ne s’agit pas du Lobby UMP qui se cache derrière mon discours (de même pour le fameux lobby internet ;-). 

Je ne parlerai que de design et uniquement de ce que je vois à travers ce site, à aucun moment je ne m’intéresserai à la polémique concernant la facturation (mon texte serait le même si ce site avait été fait gratuitement ou pour 300 000 euros) de ce site et aux guerres internes du PS. 

Pour rappel, voici la HomePage que l’on trouvait en arrivant sur le site désir d’avenirs la semaine dernière (car le site a changé depuis, je reparle de cette nouvelle version à la fin de cet article). 


1 Lisibilité et ergonomie 

Le site désirs d’avenir est très lisible, structuré très simplement, un gros titre + le nom de Ségolène Royal, le tout centré (donc impossible de se tromper, nous savons ou nous sommes). Une vidéo au centre (enfin pas tout à fait si vous regardez bien) + les liens autours. 
Question ergonomie, on ne peut pas trop critiquer et je suis sûr que tout le monde comprend cette interface. En fait ce site est plus lisible que la majorité des autres sites web des autres parties politiques français (voir la dernière image de ce billet) 
Pas trop d’informations sur la même page, pas de grand scrolling infini et navigation très simple, on va droit au but...

On avait ce genre de site dans les années 1990, voici une capture d'écran du site de la maison blanche en 1995 (qui était tout de même, je vous rassure, super-ringard même à cette époque).


-- > merci à Jean Noël pour cette image. 

le site de la maison blanche en 1995 avait la même structure, image au centre + boutons tout autours (comme un petit cadre décoratif) L’aspect très centré donne un air très solennel à la chose, exactement comme le site de Ségolène Royal.

À cette époque très peu de designers ou graphistes professionnels (ayant fait des études de design) travaillaient dans le web (trop nouveau, très technique...), les sites étaient donc faits souvent par des développeurs ou des autodidactes débrouillards (un peu une ambiance Far West). La connaissance technique prévalait à la connaissance graphique et ergonomique. Cela donnait donc des sites très bruts, très simples (à cause aussi des problèmes techniques et de la bande passante limitée) et aussi très naïf et premier degrés (aucune réflexion sur le sens des images produites). Cela pouvait donner des sites épouvantables (totalement illisible à cause de mauvais rapport de couleur, de mauvais choix typo...) ou alors des sites absolument incroyablement forts et improbables car totalement décomplexés par rapport à l'histoire de la typographie et de la mise en page (largement plus de 2000 ans sur nos épaules de petits designers). Un vocabulaire interactif se mettait en place d’une manière très empirique et libre, pas encore des grandes théories sur le design, d'ergonomie, de marketing, pas de Google... bref la liberté ;-) 

On pourrait comparer cette époque au Punk de la fin des années soixante-dix, pas besoins de savoir très bien jouer d'un instrument pour faire de la musique. Cela à permis de libérer le monde de la musique disco ;-) et de retrouver une jeunesse au Rock vieillissant (je ne parle pas des implications politiques, sociales et culturelles de ce mouvement toujours indépassable). 
Nous pourrions aussi comparer cela à Marcel Duchamp et ses Ready Made, brisant toutes les conventions (technique, artistique, de bon goût...) afin de créer une nouvelle direction radicale dans le domaine de l'art. 

2 mais pourquoi ce site est totalement ringard ? 

Mais il est assez étonnant de voir que ce site (désir d'avenirs) malgré ses qualités de lisibilité à fait l’unanimité question ringardise absolue. 
Ce site, en fait, ne respecte pas les codes graphiques que l'on trouve sur le web actuellement. En effet, toute communication repose sur le partage d'un langage et d'une culture commune. 
Quand on communique on utilise des codes, on peut jouer avec et même les détourner (c’est exprès mal dessiné, mais nous savons bien que je sais dessiner en vrai), et il existe toujours un contrat de lecture avec les internautes (si on parle de web, mais c'est valable pour les autres médias). Dans ce cas, on découvre assez vite que les codes (graphiques dans ce cas-là) ne sont pas assimilés et donc qu'il n'y a pas de jeu, ni de connivence avec les internautes, il y a donc répulsion. 
On peut jouer sur ces codes et mêmes les détourner totalement, comme en art contemporain (Claude Closky et bien d’autres) ou dans les sites web concernant la mode. Par exemple avec le site de Viktor & Rolf, on joue volontairement sur de la 3D très années quatre-vingt et les codes du luxe vieillissant. Un autre exemple, le site de Martin Margiela ou l’on prend les codes visuels du html version 1989 et sur une esthétique par défaut. Mêmes si ces sites sont très marqués esthétiquement « has been », le public ciblé comprend que c'est un jeu, il existe donc une connivence entre l’émetteur et le récepteur (c’est mal dessiné mais nous savons bien que c’est fait exprès !). 
Dans un autre domaine, le site de CDiscount (voir l’image en dessous) est tout à fait cohérent dans son incohérence graphique. Ce grand bazar graphique, nous donne à penser qu'il s'agit d’une grande foire dans laquelle nous allons devoir fouiller pour trouver notre bonheur à petit prix. 


Malheureusement sur le site de Ségolène Royal, ce n'est pas fait exprès. 
Ne pas respecter les codes (les dégradés c'est ringard, les aplats aussi suivant les périodes, les Gif, les gros boutons en bois, les bords arrondis, les ombres, le flash, le htlm, les frame, les java script, Second Life...), c'est ne pas connaître l'histoire, être sans culture...
Ce site montre à ses lecteurs que l'équipe de désir d'avenirs ne possède aucune culture concernant le Web, ils sont incultes dans ce domaine et n’ont aucun humour (ce qui peut parfois sauver d'un très mauvais design). 
Et là, c'est impardonnable aux yeux des internautes, car si ce site était le site d’un petit vendeur de nains de jardin cela serait passé sans problème et ce serait même touchant, le problème pour le site désir d’avenirs, c'est qu'il s'agit du site de quelqu'un prétendant à la plus haute marche de nos institutions. Faire preuve d'une si grande incompétence et d’amateurisme sur le web, c'est montrer que Ségolène Royal ne sait pas s'entourer de gens capables et c'est terrible pour son image (« elle n'est pas capable »). 

Il est toujours intéressant d'essayer de faire bouger les choses (par exemple, pourquoi faire des sites toujours verticaux alors que nos écrans sont horizontaux, pourquoi ne pas utiliser la police de caractères Comic sans, pourquoi ne pas faire un site en noir et blanc, uniquement avec du texte, juste avec des photos...), mais pour tenter la révolution dans un domaine, il faut en avoir la culture suffisante et visiblement l'équipe de Ségolène Royal ne la possède pas.

3 le sens des images 

Un autre problème majeur, c'est l'incohérence totale dans le choix des éléments graphiques (typo, couleur, images, mise en scène de la vidéo...) Le choix de ce fond (image prise à Windows, un comble, disponible à cette adresse) est totalement décoratif, les couleurs sont improbables et cette image n'a pas de sens (juste un joli paysage). 
Nous pourrions comparer ce paysage à celui de l’affiche de campagne de François Mitterrand en 1981. 


Le cadrage, le choix de la photo du paysage, le village typique, l'éclairage de la photo (avec le fond bleu, blanc, rouge), la typo... tout est pensé et calculé (un peu trop !) dans un but précis. Toute une équipe composée de Roughman, de photographe, sémiologie, retoucheur, coloriste, directeur artistique, concepteur rédacteur... a du travailler pour cette image (ce n'est pas qu’une question de graphisme, loin de là).
Le spectateur ne pouvait qu’adhérer (visuellement) à cette image, on lui parlait avec des codes très claires et explicites (même s’il votait RPR) sans le perturber dans sa compréhension de l’image.
Cette image n’était pas dérangeante, et même au contraire elle rassurait, elle remplissait donc très bien sa fonction (n’ayez pas peur des vilains socialistes !) 

Au contraire dans le site désir d'avenirs, on a oublié que l'articulation (la mise en page, la mise en écran) des éléments graphiques crée toujours du sens (au cinéma c'est L'effet Koulechov par exemple), et visiblement ce sens n'est pas du tout maîtrisé par les créateurs du site (on arrive donc au kitsch, une accumulation de signes sans aucune significations). 
Ce paysage + cette vidéo (aucun cadrage aucun montage... aucun choix) donne l'impression de voir un discours d’un président Nord Coréen en 1971. Nous pourrions penser à une tentative de design 2.0 collaboratif et participatif (donc sympathique !), mais le fait de tout centrer nous ramène à des codes religieux ou très solennels nous donnant à penser que Ségolène se prend pour un messie (une aubaine pour ces adversaires politiques). Cette impression est totalement en opposition avec cette idée de démocratie participative. 
Oublier que le choix d'un cadrage, d'une photo, d'une typo... a du sens est réellement impardonnable. Pourtant une femme politique du niveau de Ségolène Royal connaît parfaitement l'importance du choix des mots dans un discours, et bien pour les images c'est exactement la même chose (cette erreur est tellement grossière que parfois je doute encore que le design de ce site ne soit pas fait exprès). 
Ce serait comme faire des fautes d’orthographes dans un texte de campagne (voir les réactions avec un dossier de presse de rentrée de Luc Chatel truffé de fautes d'orthographe). Ce serait comme si lors d’un discours, Ségolène Royal prenait les mêmes tournures de phrases, le même vocabulaire, les mêmes intonations... d’un discours du général De Gaulle. Ce serait ridicule et décalé, ce serait oublier plus de 50 ans d’histoire et d’évolution dans la communication politique, et bien là, avec ce site c’est exactement la même chose. 

4 les goûts et les couleurs 

Après il y a des rapports de formes et de couleurs qui n'ont rien à voir avec les modes ou les codes, un temple grec nous semble toujours bien équilibré dans ses proportions même après 2000 ans, la beauté et la fluidité du Garamond (police de caractère datant du XVIe siècle) traversent les siècles... la beauté des formes traverse toujours les modes et le temps... Je ne vais pas partir dans de grandes considérations esthétiques et artistiques, mais ce site est totalement raté du point de vue formel (comme si nous regardions cette HomePage en tant que peinture abstraite), le fait de tout centrer, de placer la vidéo en bas (qui donne une impression d'écrasement), le rapport de taille entre les caractères...

5 La nouvelle version du site. 


Pour la nouvelle version du site (remarquez le bouton en haut à droite, « cliquez ici » qui ne fonctionne pas !), on arrive à du non-design ou du design par défaut (au sens d’Étienne Cliquet). En effet, le design de cette nouvelle version utilise une maquette prédéfinie par le logiciel (Drupal, Joomla...). Il n’y a aucune intervention humaine dans ce design, on prend ce que le logiciel nous donne sans réfléchir. On ne fait aucun choix (en pensant que cela réduira sûrement les risques de critiques), on prend juste les choix « par défaut » du logiciel servant à créer le site. Une fois de plus c'est une catastrophe au niveau du message, car un homme (ou femme dans le cas présent) politique c'est quelqu'un qui fait des choix, qui prends des décisions, ce site montre donc exactement le contraire : l'équipe de désir d'avenirs est incapable de prendre la moindre décision. 

On ne demande surtout pas à Ségolène Royal d’être à la pointe du design Web, mais de savoir s’entourer. Avec ce site, elle prouve le contraire et c’est terrible pour son image (surtout sur les plus jeunes). 

nous aurions aussi pu parler de : 

• des problèmes techniques (liens amenant nulle part... mais à mon avis il s'agit d'un problème de bande passante lié au buzz) 

• lors de sa campagne présidentielle, l’équipe de Ségolène Royal semblait être assez à la pointe concernant la communication via les nouvelles technologies. Ce site est donc le résultat de querelles internes (différents services de communications doivent être en compétition). 

• aucuns crédits concernant le logiciel (Joomla), les auteurs, les designers, graphistes, intégrateurs, développeurs... ayant créé ce site, la seule mention : 
Copyright © 2009 - Désirs d'avenir 
on se croirait chez l’Oréal ou chez Nike, ou l’on cache volontairement les auteurs...
pourquoi ne pas mettre ce site sous Creative Commons et mettre la liste des contributeurs ? cela serait plus logique avec l’idée que je me fais de la démocratie participative.

• l’état de la connaissance du design et du graphisme chez nos hommes et femmes politiques. 

• peut-on être crédible concernant les nouvelles technologies (La loi Hadopie, par exemple) avec un site comme celui-là? 

et aussi une pensée pour les militants, qui je pense doivent être profondément attristés (et furieux) par les dégâts qu’a pu causer ce site.

Voici un échantillon graphique des autres sites web politiques, à part celui du NPA (qui honnêtement est très bien), tous les autres se ressemblent comme deux gouttes d’eau. Il respectent donc les (tristes) codes actuels du Web, mais sans aucune personnalité.
On arrive donc à cette malheureuse conclusion : sur le web politique, mieux vaut être médiocre que de tenter l’originalité.