À un moment ou à un autre, nous avons tous connu le supplice de devoir effectuer une démarche en ligne sur le site d’un organisme officiel.
La surprise arrive lorsque l’on découvre le site en question et qu’on se rend compte que son design est vraiment à la pointe. Oui, à la pointe… du fond de la file.
Et là, la question qui nous traverse tous l’esprit : qu’ai-je fait pour mériter une telle punition ? Payer l’amende ne suffisait pas, il fallait aussi que je fasse des travaux d’intérêt général ?
Pour ce premier épisode consacré aux sites web kitsch, nous allons passer au crible celui de la DGT. On a réglé le GPS pour ne pas se perdre dans le dédale de ses pages.
Pour les plus téméraires, voici le lien d’accès : DGT
Pourquoi le site de la DGT est-il aussi kitsch ?
Il suffit de jeter un œil à la page pour comprendre qu’on a affaire à un design pensé pour donner le tournis. Peut-être est-ce voulu, histoire de transmettre au visiteur l’essence même de la « mauvaise conduite ».
D’après mes recherches sur web.archive.org, le site aurait été refait il y a quatre ans. Pourtant, il semble tout droit sorti d’un autre siècle.
Premier coup d’œil
L’objectif d’un premier coup d’œil sur n’importe quel site devrait être de faciliter la lecture à l’utilisateur. Il s’agit de mettre en avant l’essentiel, ce que l’on veut vraiment que le visiteur voie, et de le présenter de façon à ce que l’œil navigue naturellement entre les contenus. Hiérarchiser, pour garder une logique.
Si on file la métaphore, le mieux pour l’utilisateur serait une route à sens unique, avec le moins de sorties possible, et surtout, des indications claires.
Mais sans même parler d’esthétique, le premier écueil du site de la DGT, c’est un vrai casse-tête. On se retrouve face à plus de 40 liens !!!
C’est un peu comme arriver en voiture dans une ville et tomber sur un carrefour avec 40 sorties possibles.
Deuxième coup d’œil
Une fois le choc passé, on reprend ses esprits, on retrouve l’usage de la souris et on se souvient enfin pourquoi on est venu sur ce site.
En partant du haut, le premier élément qui s’affiche est un lien vers la page Contact. Ce n’est pas inutile, mais ne pourrait-on pas l’intégrer au menu principal pour éviter ce lien isolé ? En plus, la police choisie est Arial Regular (oui, c’est franchement dépassé, mais passons).
Pour les autres liens, c’est de l’Arial Narrow, la version condensée de la même police. Pourquoi ce lien Contact doit-il détonner autant visuellement par rapport aux autres ?
Typographies
Comme on l’a souligné, on mélange Arial Regular et Arial Narrow. Mauvaise idée. Cela crée un choc visuel entre les polices.
Si on utilise plusieurs polices, il faut jouer sur le contraste. Si on n’en utilise qu’une, autant varier les graisses ou l’italique, mais jouer uniquement sur la condensation, c’est rarement heureux visuellement.
En plus, il y a de nombreuses discordances dans les tailles de police sur tout le site. Chaque image a sa propre taille de texte, et beaucoup sont pixelisées. Un vrai poème.
Marges, paddings et autres éléments
Comme pour le point précédent, aucune cohérence dans les espacements : marges et paddings sont à la carte. Idéal pour l’expérience utilisateur…
Les ombrages, c’est fini depuis longtemps. En mettre, c’est la garantie de donner un coup de vieux à un site.
Quant aux images sur le côté, on ne saisit pas bien le message. On y voit trois messieurs un peu perdus, façon salut de Ronaldinho. Peut-être un clin d’œil nostalgique à une autre époque.
Les bannières du haut
On retrouve le logo de notre cher Gouvernement, avec un bug entre les deux encadrés : une ligne blanche qui ne va pas jusqu’en haut. Soit on l’enlève, soit on la prolonge, mais ce défaut saute aux yeux. Le logo du Gouvernement fait 60px de haut, celui de la DGT juste à côté, 51px. Les aligner serait déjà un progrès. Et si on ajoute un espace entre les deux, ce serait encore mieux.
Juste sous le logo de la DGT, en mode hors-piste, un petit texte rassurant pour les citoyens : « à tes côtés, nous avançons tous ». Merci DGT.
À droite, deux autres bannières. Toutes deux, pour arrondir, font 76,39px de haut. Tant qu’à faire, pourquoi pas le nombre π ? Les deux sont pixelisées et utilisent des tailles de police différentes.
Les boutons du menu
Magnifiques. Avec un effet hover des plus élégants.
Un menu déroulant aurait été bienvenu pour réduire le nombre de liens affichés à l’écran.
Le carrousel d’images, Twitter et réseaux sociaux
Le carrousel d’images n’apporte pas grand-chose, son design semble venir des années 50, bien avant Internet. La police est collée à l’image. Ce qui est mauvais pour le référencement et pénible à gérer côté back-office.
Le widget Twitter, vu sa taille minuscule, autant s’en passer.
Pour les liens vers les réseaux sociaux : chaque icône a sa propre taille et repose sur un fond gris foncé, sans doute pour rester dans la « ligne graphique » du menu du haut. Dommage, cette cohérence graphique ne fonctionne que quand on sait que ça va mal rendre.
Les trois blocs de liens
Là où devrait se trouver le cœur du site, on a droit à une liste interminable de liens. Certains avec une image, d’autres non, parfois une description, parfois pas.
Il aurait été préférable de réduire le nombre de liens et d’unifier le style des images et descriptions.
En descendant plus bas
Ça ne s’arrange pas. Toujours la même rengaine. Zéro ergonomie, visuellement épuisant. Je n’exagère pas en disant que j’en ai eu la tête toute retournée à force de défiler ce festival d’incohérences graphiques.
Autres points
- Le site n’est pas responsive. On peut voir ça comme une façon d’éviter que les gens consultent le site de la DGT sur leur smartphone… en conduisant.
- En bas de page, on peut lire le titre « Pour les personnes ». Au cas où quelqu’un aurait cru que c’était pour les cochons.
- En naviguant dans les différentes sections, on constate que le labyrinthe s’agrandit de façon exponentielle.
- Le code source du site est assez surprenant
- La balise <!DOCTYPE> ne commence pas à la première ligne, ce qui n’est pas une bonne pratique
Conclusions
Si vous devez aller sur le site de la DGT, évitez d’avoir bu un verre de trop et attachez bien votre ceinture. Et on espère que si vous y êtes, c’est par erreur, pas pour payer une amende.
