La vallée dérangeante du webdesign

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.

Ombre portée courbée - Exemple 1

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

Ombre portée courbée - Exemple 2

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.

Reflet dégueulasse Web 2.0

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.

La vallée dérangeante

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.

  1. Vivien, le

    Pas du tout d’accord sur l’exemple. Après tout on peut faire une ombre portée courbée si ça sert le propos général, si il y a une cohérence avec le reste du sujet, quel qu’il soit. Il n’y a pas de commandement qui impose de faire de l’habillage graphique forcément réaliste.
    À la limite le vrai soucis des ombres déformées (l’auteur en parle aussi) c’est que c’est beaucoup trop vu, comme tous les phénomènes de mode.

    Par contre je vois bien ce que tu veux dire pour les effets mal réalisés, où plutôt incohérents, qui font tâche. On ne voit plus que ça.

  2. Gabriel C, le

    Un thème intéressant, traité et décrit avec un dogmatisme et une agressivité stérile.

    Le but d’un webdesign n’est pas de fournir une maquette aux propriétés physique impeccables et validées par un corpus d’ingénieurs de la NASA, mais de faire un rendu harmonieux et accessible de fonctionnalité et d’esthétique, y compris en faisant des effets visuels qui ne correspondent pas au poil près à la réalité physique de ce monde – on est pas dans le BTP, merci.
    L’effet « ombre portée courbée » est certes une mode, pas plus bête que les autres, et comme toutes les modes elle est parfois (souvent ?) exagérée ou appliquée grossièrement. C’est tout. C’est certes dommage, et c’est aux designers de faire preuve de discernement et de finesse dans l’application de ce traitement. Mais pas besoin de gonfler cette problématique avec une manie hyper-réaliste enrobée du dédain habituel pour Le Graphiste.
    Alors le bullshit sur la détérioration prétendue de la lecture, l’impression de nausée, etc… pourquoi pas un cancer, tant qu’à faire dans la subtilité ?

  3. Frédéric, le

    En fait, c’est surtout dérangeant pour ceux qui, un jour, se sont posés la question : « Tiens, en y regardant de plus près, cette ombre (ou ce reflet) n’est pas logique ?! » Du coup, on ne voit plus que ça sur tous les sites web et on entre en effet dans la vallée.

    C’est un peu comme les accros à l’orthographe, ils ne sont pas en mesure de focaliser leur attention sur un texte si celui-ci contient des fautes.

    N’étant pas designer (et mauvais en orthographe de surcroît) , lorsque je consulte des sites web, je n’ai aucun problème d’attention !

  4. griZouw, le

    J’avoue que je suis un peu d’accord avec Gabriel C. Ok certaines ombres sont mal réalisées, mais je vois pas pourquoi le webdesign devrait coller avec la réalité a 100% …

  5. Christelle, le

    « Dégoûtante », « vous trouvez ça joli, vous avez tort », « horriblement raté ». Quel champ lexical, et quel dédain. Je ne peux qu’être d’accord avec les deux premiers commentaires.
    En tant que graphiste, j’use (en essayant de ne pas abuser…) des effets graphiques et donc, des ombres portées. L’impossibilité physique évoquée n’enlève en rien « l’illusion ». Des droites parfaitement parallèles peuvent paraître convergentes, suivant le contexte. Des points noirs peuvent apparaître là où il n’y a que du blanc, etc. Tout le travail graphique, c’est d’apporter un sens « visuel » au contenu, une forme au fond. L’ombre portée peut valoriser un contenu, un bloc de texte.
    Elle est d’autant plus « réaliste » qu’une ombre « de base » non courbée que Photoshop nous propose par défaut dans les styles de calques.
    On n’est pas à l’abri d’une réalisation déplorable, mais c’est loin d’être le cas dans les exemples évoqués (même si le second n’est pas parfait : pour un meilleur effet, il aurait fallu que l’ombre portée ne se voie pas à droite et à gauche de l’image, mais seulement dessous.

  6. Graphisme, le

    Une autre remarque également, qui va dans le sens « le webdesign ne doit pas forcément être un reflet de la réalité » :

    Le web est un univers contraint, beaucoup plus que le print, du point de vue du graphisme. Les normes (HTML5, CSS3) évoluent, mais il existe encore de nombreuses disparités entre les navigateurs, ce qui limite fortement la créativité et génère des différences de rendu.

    S’il est relativement simple et léger le mettre une ombre courbe (même si peu réaliste), il est beaucoup plus complexe de réaliser coins visuellement déformés.

    Un élément important du web est la performance des pages web, notamment à travers la rapidité de chargement et d’exécution. Mettre en place des effets graphiques trop complexes flingue souvent cette performance.

    OK, on va me dire, dans ce cas, autant ne pas mettre d’ombre !!

    Et bien il existe sans doute un juste milieu, sans verser dans un excès ni dans l’autre, et en faisant preuve d’un peu de tolérance et en intégrant les contraintes inhérentes au web.

    A bon entendeur.

  7. bruno bichet, le

    Le ton employé dans le billet est assez convenu dans le genre. C’est très prisé dans le monde anglosaxon et ça commence à venir en France à travers Twitter. Pour le côté réaliste, je dirais l’idée de base de ce genre d’effet est de focaliser l’attention. C’est réussi, et ce, d’autant plus que le cerveau se pose des questions. Quant à savoir si ce dernier est perturbé, je répondrais : pas trop, vu que perso, le mien ne s’est jamais plaint :)

  8. Quentin, le

    Héhé, plutôt d’accord pour le coup. C’est ce que j’aime appeler le « tuning de site web ». ça ne rend en rien honneur au design global du site. Bah, comme tout effet de mode, ça passera, comme les intros de site en flash sont passées.