Hier, Andrew Ray a lancé un appel aux webdesigners auquel je ne peux qu'approuver : "Arrêtez d'utiliser des ombres portées courbées".

Le phénomène des ombres portées courbées est une mode de design dégoûtante qui doit cesser. Maintenant. Peut être que vous trouvez ça joli. Vous avez tort.

Elles me donnent envie de vomir en créant une surface impossible.

L'intention est de rendre les coins de l'image incurvés. C'est horriblement raté. Pour que l'effet marche, les coins devraient être visuellement déformés. Ils ne le sont pas. Ils sont parfaitement en angle à 90 degrés. Ça donne l'impression que l'image est placée sur une surface incurvée.

Si vous avez la moindre aptitude de repère dans l'espace, l'image ci-dessus doit vous rendre nauséeux. Le texte est placé sur une surface incurvée mais n'est pourtant pas déformé. C'est une structure impossible. C'est comme lire du texte sur un fond à motifs. Ça détériore inconsciemment la compréhension de la lecture, ça cause des indigestions, et ça dégrade votre crédibilité en tant que designer.

Ce n'est pas la première fois que je vois une mode aussi dégoûtante se répandre dans le webdesign. La dernière fois, c'était la mode d'ajouter des reflets sous tout et n'importe quoi.

Devinez quoi, monsieur-le-graphiste-apprenti-sorcier-apprenti-physicien. Même dans les théories les plus folles de la physique quantique et des multiples univers parallèles, jamais l'écran de cet ordinateur ne se reflétera ainsi sur la surface sur laquelle il est posé. Jamais. Ça ne veut pas dire que vous ne devez jamais faire de reflets. Mais clairement pas comme ça.

Parce que le problème, quand je rencontre une erreur comme celle-ci sur une page web, c'est que mon cerveau passe immédiatement en mode "Oh oh, il y a quelque chose qui cloche". Je vais essayer de passer à côté, de lire le contenu de la page. Mais mon cerveau va revenir à la charge : "Non mais t'as vu ce reflet ? Tu crois que ce serait possible en vrai ?". J'essaierais quand même de poursuivre ma lecture. Mais ça me trottera toujours en tête.

En y réfléchissant, ça m'a rappelé l'effet de la vallée dérangeante (ou "Uncanny Valley" en anglais) :

L'effet de la vallée dérangeante est une réaction psychologique devant certains robots humanoïdes. Il décrit le fait que plus un robot humanoïde est similaire à un être humain, plus ses imperfections nous paraissent monstrueuses. Ainsi, certains observateurs seront plus à l'aise en face d'un robot clairement artificiel que devant un robot doté d'une peau, de vêtements et d'un visage pouvant passer pour humain. La théorie prévoit cependant qu'au delà d'un certain niveau de perfection dans l'imitation, les robots humanoïdes sont beaucoup mieux acceptés. C'est pour cela qu'est utilisé le terme de vallée : il s'agit d'une zone à franchir dans laquelle chaque progrès fait vers l'imitation humaine amènera plus de rejet avant de finalement amener une acceptation plus grande.

Le problème des ombres portées courbées ou des reflets sous un produit, ce ne sont pas les effets en eux-mêmes. Mais c'est le fait que mal réalisés, ils ne sont plus crédibles et deviennent totalement repoussants. On atteint alors la vallée dérangeante du webdesign.

Je rencontre souvent chez mes confrères développeurs une manie que j'ai pris l'habitude d'appeler le syndrome du développeur. Cette manie consiste à restituer des données telles qu'elles sont à la source. J'appelle ça le syndrome du développeur, mais je pourrais appeler ça le syndrome du technicien, car ce n'est clairement pas limité à cette catégorie professionnelle, et encore moins à l'informatique. Laissez-moi vous donner des exemples.

Dans les toilettes de mon boulot, les robinets du lavabo sont arrangés comme ci-dessus (cette photo a été prise par Kev Adams, ce qui me rends un peu triste et honteux d'être tombé dessus et de m'en servir comme exemple). Cette disposition n'est évidemment pas du tout pratique à utiliser. Mais il n'est pas difficile d'imaginer pourquoi ça a été installé ainsi : un tuyau d'eau chaude et un tuyau d'eau froide en entrée, un robinet pour l'eau chaude et un robinet pour l'eau froide en sortie.

Pour améliorer ça, il semble donc évident de devoir se séparer d'un robinet, pour n'avoir qu'une seule sortie d'eau. Mais là encore, les différentes installations qu'on croise dans notre quotidien sont loin d'être parfaites.

Une première solution consiste à conserver deux robinets mais une seule sortie d'eau (ci-dessous à gauche). Mais là encore, il s'avère difficile de jauger et d'ajuster la température. La meilleure solution est d'utiliser un robinet ajustable, permettant de contrôler très facilement le débit et la température de l'eau (ci-dessous à droite).

Si je vous parle de robinetterie, ce n'est pas à cause d'une soudaine passion naissante pour la plomberie. Mais c'est parce que je rencontre exactement le même genre de problèmes partout sur le web. A chaque fois, une donnée enregistrée est restituée telle quelle ou presque, sans chercher à savoir si elle est pertinente pour l'internaute.

Un exemple courant concerne l'affichage de dates. La solution la plus facile et la plus courante pour un développeur, c'est d'afficher une date au format "JJ/MM/AAAA HH:MM". Cette solution semble naturelle, mais s'avère dans bien des cas complexe à comprendre pour l'internaute. Par exemple, en me connectant à mon compte Last.fm, je découvre les morceaux que j'ai récemment écoutés et qui ont été ajoutés à ma bibliothèque.

C'est bien, mais ça ne m'avance pas à grand chose. "C'est qui ces groupes ? Quand est-ce que j'ai écouté ça ? Le 9 mai, c'était quand ça ? Et est-ce que la chanson de Gary Wright parle du logiciel d'Adobe ?"

En allant dans ma bibliothèque, je découvre une présentation différente des dates, beaucoup plus pratique.

"Ah, c'était mercredi après-midi. Donc c'est surement ma copine qui a allumé mon ordi et qui a lancé des playlists." Oh, et la chanson Dream Weaver, c'est dans la B.O. de Wayne's World.

Un autre exemple que je croise souvent sur le web, ce sont les lignes panier des sites e-commerce. Le but d'une page panier, c'est de présenter les informations importantes de tous les produits, et de permettre certaines actions (suppression, modification de coloris/taille/quantité). Voici un magnifique exemple chez La Redoute.

Essayez de distinguer facilement les 3 maillots de bain que vous venez d'ajouter à votre panier. Le visuel n'est pas assez grand pour distinguer quoi que ce soit. Et les libellés des produits ont tous été tronqués et sont quasiment identiques. Admirez également au passage la très utile colonne "Offre spéciale".

Vous pouvez très bien mettre en ligne un site tout à fait correct rempli des symptômes du syndrome du développeur, tout comme il est courant de rencontrer des robinets comme dans mon premier exemple. Mais si vous réfléchissez à ce qui est mieux pour l'utilisateur, vous apporterez une meilleure expérience utilisateur. Et ce travail, ce n'est pas qu'au développeur ou à l'intégrateur de s'en préoccuper, mais aussi et surtout au chef de projet et au graphiste.

Comparaison du temps passé par un intégrateur débutant et un intégrateur confirmé à faire du découpage dans Photoshop, coder en HTML, coder en CSS, faire du débuggage entre navigateurs.