- Biais cognitifs
- Mai 2025
L'effet esthétique-utilisabilité
Avez-vous déjà critiqué un produit Apple™?
Non !?! Eh bien, essayez un jour si vous voulez perdre un ami.
Certains utilisateurs des produits Pomme sont tellement investis émotionnellement dans les qualités de ces objets de désir qu’ils perdent toute rationalité.
Cela explique en partie le fondement n°01 de l’expérience utilisateur : l’effet esthétique-utilisabilité que je vais vous expliquer en long, en large et en travers.
En quelques mots et exemples
1 images vaut 1000 mots
AVANT UTILISATION: Un design plaisant est perçu comme étant plus facile à utiliser.
Cela même si ces fonctionnalités sont identiques à celles de produits moins attrayants.
PENDANT L’UTILISATION: L’esthétisme va motiver les personnes à utiliser l’objet/l’appli/le site web. S’ ils rencontrent des problèmes d’utilisabilité, ils peuvent passer au-dessus plus facilement et rapidement que pour une interface moche.
Pour les systèmes COMPLEXES : Les problèmes et les difficultés d’effectuer les tâches que l’on percevaient facile deviennent saillantes, réduisant sérieusement l’impact esthétique.
→
L’utilisabilité réelle détermine la satisfaction à long terme, même pour des designs moins attractifs. Et là, ça peut faire mal. Si ton interface ne tient pas ses promesses, l’ascenseur émotionnel sera d’autant plus grand. Le public se fera une joie de détruire tout (le bien comme le mal – et oui on est des bêtes!)
Une production esthétique est une œuvre plaisante pour le cerveau qui y trouve l’ordre naturel des choses via le nombre d’or ; les lois de la Gestalt(Partie 2) ; les biais visuels cognitifs et bien d’autres.
Tout bon designer connaît celles-ci – ou du moins les utilise sans le savoir. Utilisées à mauvais escient, l’utilisateur peut être mené par le bout du nez pour accomplir une tâche sans s’en rendre compte – dans le jargon on appelle ça des « dark patterns ».
Temu VS Adidas Shop
Je suis un grand fan de la marque aux trois bandes #pasobjectif. Leur site web est sobre, simple, efficace. Il présente les chaussures de la même manière, photoshooté dans le même angle, la même lumière, le même arrière-plan.
Il n’y a que 3 éléments textuels légers à gauche et un icône filaire à droite. Le reste arrive après car comme tout le monde sait, il faut soit cliquer soit survoler l’article qui nous donne l’envie d’en savoir plus.
Et seulement après cette micro-interaction fluide et sans friction, nous avons les infos que nous recherchons comme illustré à droite.
Maintenant, pour comparer avec Temu, faisons l’exercice ensemble d’après la grille d’évaluation MOCHE présenté plus bas:
Est-ce sobre, simple, efficace ?
Les produits sont-ils présentés de manière uniforme ou du moins harmonieuse?
L’interface est-elle surchargée?
Les couleurs sont-elles attrayantes?
Le design provoque t’il une émotion positive?
Vous avez répondu NON partout (sauf à la troisième)?
Ces questions sont les bases utilisés pour quantifier l’esthétique d’une interface numérique comme un site web, une application pour smartphone ou un produit plus tangible comme une Lada.
Elles sont transférables à toutes interfaces visuelles voire à tous produits ou services. Regardez les fascicules publicitaires, lesquels ont votre préférence?
Lorsque vous rentrez dans un magasin, n’importe lequel, vous sentez vous plus confortable lorsque tout est aligné, sobre, qu’il y a assez de place pour se balader, qu’on ne vous harcèle pas dès votre entrée, que l’endroit sente bon, que cela ne soit pas bruyant?
Tout cela fait partie de l’Expérience. L’expérience en magasin physique, l’expérience en e-shop, l’expérience du service, l’expérience du produit. Et oui, aujourd’hui, tout est expérience. On ne dit plus “design” ou “liquid glass #windows vista 2007”, votre boss veut créer des expériences…
Envie d’expérimenter l’effet esthétique-utilisabilité?
Envie d’en savoir plus sur les origines de cette loi UX n°1 et ses mécanismes psycho-cognitifs sous-jacents? C’est juste ici bas.
Tu veux skipper pour passer directement aux reco et exercices, c’est par ici.
Des fondements psychologiques ...
L’effet “esthétique-utilisabilité” a été prouvé scientifiquement par Masaaki Kurosu et Kaori Kashimura, dès 1995. Ils ont démontré que “les conceptions esthétiques semblent plus faciles à utiliser et ont une plus forte probabilité d’être utilisées, qu’elles soient réellement plus faciles à utiliser ou non.” Cela favorise des attitudes positives et rend les gens plus tolérants aux problèmes de conception simples.
Une attitude positive procure des émotions positives. Des émotions positives créent des endorphines dans notre corps qui nous rendent heureux. Ce sentiment améliore notre mémorisation et range ce souvenir dans une case étiquetée « plaisir » #designémotionnel.
“L’esthétisme fait vivre une expérience subjective immédiate et agréable dirigée vers un objet. Cette expérience ne repose pas sur un raisonnement préalable.” (Moshagen & Thielsch, 2010, p. 690, cf. Reber et al., 2004). En d’autres termes, chacun vit l’esthétisme différemment selon sa culture, son éducation, sa sensibilité, ses déficiences physiques ou mentales.
Mais alors, si cette expérience est subjective, évanescente et personnelle comment la quantifier?
En t'abonnant à Captain UX Planet
99,99€ 10€/mois
Si tu paies dans les 30secondes, tu recevras en cadeau cette magnifique [insère ici un produit dont tu n’as pas besoin].
Paiement uniquement par Western Union*1.
Ou en lisant les recherches de super-UXMAN, les vrais, ceux qui ont testé leurs concepts sur des milliers de personnes pendant des mois. Des types comme Tractinsky. Des types qui étudient les dimensions psychologiques des travaux de Kurosu & Kashimura pour approfondir le sujet.
Car Noam (c’est son petit nom) Tractinsky va contextualiser les perceptions du groupe test en étudiant la frustration, le plaisir d’utilisation ainsi que l’effort cognitif que cela entraîne. Ces résultats sont les mêmes que K&K. Il affirme même que l’esthétique influence durablement la perception de l’utilisabilité.
Corrélation ou causalité?
Ces brillants chercheurs ont démontré une corrélation positive entre l’esthétisme et l’utilisabilité perçu. Avec ça, on sait faire des beaux graphiques comme celui-ci.
Vous voyez la ligne droite rouge montante?
Cela signifie que plus l’esthétisme est perçu comme raffiné, plus le système/le produit testé est perçu comme facile à utiliser.
Qui dit corrélation, dit causalité! ah non, c’est pas ça. Qui dit causalité, dit corrélation! On ne peut pas tromper 1000 fois 1000 personnes, Odile.
Comme disait mon prof de stats: “Ce n’est pas à cause de leur consommation de chocolat que la Suisse, l’Allemagne, ou la Suède ont le plus grand nombre de Nobel par habitant. Les deux sont la cause du développement économique.” se basant sur une étude très sérieuse de Messerli en 2012.
Tout ça pour dire que corrélation ne veut pas dire causalité, les facteurs étudiés sont peut-être l’effet du hasard, d’un mauvais échantillonnage, causé par un 3ème facteur commun comme dans notre exemple du chocolat.
Ben oui, quand on a plein de tunes on peut manger plein de chocolat mais aussi financer plus de recherches scientifiques 😉
Est-ce que l’esthétique est une cause directe de l’augmentation de l’utilisabilité?
Non, c’est un effet indirect. Aucune causalité n’a été prouvée jusqu’ici. On parle d’un biais cognitif, d’une perception. Cela dit, l’effet est bien réel et présent.
Quantifier l’esthétique d’un design?
Lavie et Tractinsky (2004) propose 5 critères évaluant l’esthétique classique. Ceux-ci sont toujours utilisés aujourd’hui par les chercheurs UX (UX Researcher).
- “Le design est esthétique (perception globale de l’harmonie visuelle).
- “Le design est propre” (absence d’éléments superflus ou désordonnés).
- “Le design est agréable” (suscitant une réponse émotionnelle positive).
- “Le design est clair” (lisibilité et simplicité de la structure).
- “Le design est symétrique” (équilibre visuel et ordonnancement régulier).
Merci qui ?
Merci Lavie
Si vous avez plus de temps pour approfondir le questionnaire et affiner ces critères, on peut utiliser le VisAWI ici-bas.
Une grille d'analyse MOCHE
Construits sur ces bases solides, Moshagen&Thielsch en 2012 ont créé un questionnaire plus adapté aux interfaces digitales de nos jours qu’ils nomment “VisAWI” pour “Visual Aesthetics of Websites Inventory”.
Je vous propose de le nommer : MOCHE pour Modèle Objectif des CHoses Esthétiques (et en même temps de vous le traduire/interpréter car il est en allemand). Il est composé de 4 groupes de critères:
- La Simplicité
- La Diversité
- Les Couleurs
- Le Savoir-faire
Critère MOCHE – 01 : La Simplicité
🎲 La présentation semble trop dense et peu esthétique
–> perception globale de l’harmonie visuelle (typographies, formes et alignements voir La Gestalt Theory)
–> Bonne mise en oeuvre typographique, grande taille de police de caractère, grand interligne – voir Lemoine et Zafri(217)
🎲 La mise en page apparaît trop inégale
–> présence d’éléments superflus ou désordonnés
–> présence de ruptures stylistiques perturbatrices
🎲 La mise en page est facile à comprendre
–> lisibilité et simplicité de la structure
🎲 La présentation semble bien structurée
–> équilibre visuel et ordonnancement régulier
🎲 La mise en page est agréable à regarder
–> suscitant une réponse émotionnelle (voir Lallemand C., Les trois composantes de l’évaluation des émotions)
Critère MOCHE – 02 : La Diversité
🤩 La mise en page est agréablement stimulante
–> motifs non répétitifs ou arrangements non conventionnels
🤩 La conception est originale
–> typographie unique, illustrations ou styles de navigation innovants
🤩 La conception semble manquer d’imagination
–> et ne vous vends pas du rêve …
🤩 La mise en page semble vivante et dynamique
–> utilisation d’animations, de transitions ou d’éléments interactifs
🤩 Le design est inintéressant
–> peu riche visuellement, peu attrayant
Critère MOCHE – 03 : Les Couleurs
🎨 La composition des couleurs est attrayante dans le contexte de l’application
–> fidèle aux modèles mentaux qui correspondent à l’univers mis en place, à l’histoire qui est racontée
🎨 Les couleurs ne sont pas assorties
–> discordance chromatique, déséquilibre des teintes, de la luminosité, de la saturation et de la température des couleurs utilisées (voir Coursaris, 2017)
🎨 L’utilisation de la couleur est ratée
🎨 Les couleurs sont agréables
Critère MOCHE – 04 : Le Savoir-faire
🚀 La mise en page semble avoir été conçue de manière professionnelle et crédible
🚀 La mise en page n’est pas au goût du jour
🚀 Le site est conçu avec soin
🚀 Le design est innovant, sans tomber dans l’excentricité gratuite. Il arrive à se démarquer tout en restant fonctionnel.
Comment utiliser MOCHE
Modèle Objectif des CHoses Esthétiques
L’idée est de récolter ces données via un questionnaire auto-administré avec des questions utilisant l’échelle de Likert en 7 points (1 = “Pas du tout d’accord” à 7 = “Tout à fait d’accord”). Comme ici-contre –>
Ensuite on additionne les points de tous les critères et on pondère en fonction des objectifs et du contexte. Attention au formulation négative !! Cette 1ère version de grille présente à certains moments des négations. Les points seront donc soustrait.
La mise en page n’est pas au goût du jour.
Exemple de perception tronquée : Lada VS BMW
Imaginons que tu veuilles acheter une nouvelle voiture. Tu regardes des magazines, tu vas voir les concessionnaires, tu fais des essais sur route.
Ensuite, tu surfes sur le site de BMW parce que ton cousin/oncle/buddy en a une et qu’il s’en occupe mieux que ses enfants tellement qu’il l’aime d’amour. Le site web t’en mets plein la vue. C’est classe, sophistiqué, sobre. Le durable et bon pour l’environnement se sont même invités [sic].
Et là, avant même d’avoir touché ta BMW, tu seras convaincu de son efficacité et de sa convivialité. Ce biais cognitif augmente notre perception de son utilisabilité et de sa désirabilité. In fine, cela renforce notre satisfaction globale. (Même si votre mécanique est toute pourrite et vous lâche sur la route des vacances après seulement 1000 km)
→
De l’autre côté, on a Lada et son modèle iconique – la VAZ-2101 « Jigouli ». Mon père en avait une dans les années 90. J’avais tellement honte de monter dans cette voiture. J’aurais préféré marcher les 5 kilomètres qui me séparaient de la rue de dinant n°1.
Blague à part, ce modèle est increvable comme le Nokia 3310. Il date de 1970. Les usines ont cessé d’en produire en 1980 et pourtant en 2025, tu peux encore en trouver pour 15 000€. Ces modèles ont résisté au temps et à l’utilisation intensive. Elles sont moches mais elles fonctionnent bien et elles satisfont les besoins des utilisateurs.
Quant à BMW, les deux personnes que je connais, les ont revendu à cause des coûts de maintenance exorbitants au fil des ans.
Les 3 biais cognitifs derrière l'effet esthétique-utilisabilité
- Effet de halo
Un design esthétique active un biais de jugement global, où les utilisateurs attribuent inconsciemment des qualités positives – comme la facilité d’utilisation -à un produit attrayant, même sans preuve objective, ni lecture des tests sur les numériques (cfr Casque Apple Airpod).
Les émotions positives générées par l’esthétique guident les décisions, réduisant l’analyse critique des fonctionnalités réelles.
- Humeur positive et performance
Selon Alice Isen (1993), un affect positif améliore l’efficacité cognitive favorisant des processus mentaux automatisés adaptés aux tâches informatisées.
Les interfaces esthétiques atténuent la frustration, permettant une attention accrue aux tâches plutôt qu’aux défauts de l’interface.
- Inférence de compétence
Les utilisateurs associent l’esthétique à la compétence perçue du concepteur, supposant implicitement que le système est bien conçu. (cfr: critère “Savoir-faire” de notre modèle MOCHE)
Que retenir de l'effet esthétique-utilisabilité ?
Premier contact –> Privilégier l’esthétique pour maximiser l’adhésion initiale
L’effet esthétique-utilisabilité n’est pas statique: il évolue avec le temps d’exposition, révélant un équilibre dynamique entre forme et fonction.
Usage répété –> Combiner esthétique minimaliste et fonctionnalité robuste
Les designs réussis intègrent donc une adaptabilité progressive, où l’esthétique sert de levier d’engagement initial, tandis que l’utilisabilité assure la fidélisation à long terme.
Tâches complexes –> Limiter les éléments décoratifs au profit de l’efficacité
... à l'heuristique UX
Safari photo
Regardez attentivement la photo ci-contre et répondez à ces 2 questions:
Le design de cette façade arborant ces énormes chiffres est-il attrayant, engageant, différencié, conforme à la marque, facile à lire, bien contrasté, typographiquement génial ?
Quelle est l’adresse de ce bâtiment ?
Question n°1:
Vous avez certainement répondu OUI à la 1ère question.
Ce design de façade est brillant dans son esthétisme aussi bien classique qu’expressif. Il respecte les codes du classique par l’utilisation correcte de la typographie. Il est lisible, simple, bien contrasté de par les couleurs utilisées et la police de caractère. Il est un marqueur d’originalité et de diversité : qui a de si grandes lettres indiquant sa maison? Et enfin, peindre une façade qui résiste au temps, à la pollution des villes, remplit la case “Savoir-faire” de notre grille MOCHE.
Question n°2:
A part le numéro du bâtiment, personne ou presque n’a fait attention à la plaque de rue verte indiquant le nom de la rue, n’est-ce pas?
Il se trouve sur l’angle de Woodlawn et de la 4ème avenue NE de Seattle – GreenLake. D’après les quelques commentaires du post de Tamara Adlin, les habitants de Seattle connaissent bien ce StreetArt :
Forrest Corbett: “Je passe devant ce bâtiment depuis plus de 25 ans et je ne peux pas répondre à la question 2″ – Francis Ngo: “C’est drôle. J’habite en haut de la rue de ce bâtiment”
=> Cette photo ne représente pas une bonne expérience pour déterminer l’adresse exacte de ce lieu. Nous n’avons pas assez d’informations ni de contexte.
C’est une bonne illustration de la loi n°1 d’esthétisme-utilisabilité prouvant que les choses belles et bien réalisées sont un puissant moteur pour capter l’attention mais insuffisant pour une bonne utilisation sur le long-terme.
Autre observation: Certains d’entre nous ont lu de bas en haut le numéro “6869”. Quid de ceux qui le lisent de haut en bas? ou de ceux qui passent de l’autre côté de la route? (Je suis sûr que vous brûlez d’envie de lire de haut en bas maintenant que je vous l’ai dit. Allez-y on vous attend.)
La réponse ne se trouve pas dans la photo. Elle se trouve dans “l’ici et maintenant” des personnes qui cherchent ce lieu pour y aller physiquement. c’est-à-dire dans le contexte spatio-temporelle-émotif-cognitif de l’utilisateur. Mais nous reviendrons là-dessus plus tard.
A/B testing de l'esthétique classique
1. Observez 30 secondes ces 2 écrans d’options pour un système d’envoi d’email qui date des 90’s.
2. Répondez aux 5 critères de Lavie sur l’esthétique classique
Cet exercice a souvent été donné par Tractinsky lors de ces lectures aux étudiants. Voici ce qu’il en dit:
Les participants ont estimé que la qualité de l’écran de gauche était meilleure que celle de l’écran de droite.
Etes-vous d’accord avec ces étudiants de 1995?
Pourtant, il n’y a pas de couleurs, il n’y a pas un concept créatif original, il n’y a pas d’effet WOW ! L’interface est chargée d’autant d’éléments dans les 2 versions.
Cela ne correspond pas à quelque chose d’esthétique, de beau comme un Kounellis ou un monochrome de Kandisky (voir plus bas).
–>
Après cet état de fait, Tractinsky demandait des précisions terminologiques :
A quelle qualité de conception faites vous référence? Est-ce la facilité d’utilisation ou l’esthétique visuelle ?
L’oeil humain voit dans le visuel de gauche, l’ordre, la symétrie, la proximité, l’appariement. Ces critères font partie d’un autre fondement de l’UX: La théorie de la Gestalt (à paraître dans les prochains mois). #staytuned
Cette question à elle seule permet de souligner le lien qui unit l’esthétisme à l’utilisabilité. L’un ne va pas sans l’autre car avouons-le cet écran d’option est MOCHE selon notre grille MOCHE.
Vous êtes plus Spotify ou Netflix?
1. Spotify – où trop de choix tue le choix –
Ouvre spotify dans ton navigateur web sur une tablette format paysage ou pc grand écran https://open.spotify.com
Où est l’action primaire? secondaire?
- Combien y-a t’il d’actions proposées ?
- Quelle est la différence entre “Télécharger” et “Installer l’appli” ?
–>
Quel est l’objectif/kpi de cette page ?
- Augmenter le nombre de téléchargement ?
- Accéder rapidement à une chanson précise
- S’inscrire? Se connecter?
Vous l’aurez compris, cette page d’accueil n’est pas simple, ni ordonnée. Elle propose trop de choix.
L’utilisateur est noyé dans l’information => il ne sait pas où cliquer pour continuer son chemin.
Pas d’objectif, pas de kpi __
Pas de kpi, pas d’indication de succès __
Pas de succès, … pas de succès __
Bien que l’utilisation des principes de la Gestalt soit bien utilisée, bien que les textes soient lisibles et accessibles, bien que les couleurs soit nuancées et utilisées de manière appropriée, l’interface est trop chargée, la surcharge cognitive pour l’utilisateur est importante.
L’effet esthétique “Waouh” n’a pas lieu et nous nous retrouvons vite à nous poser toutes les questions précédentes concernant l’utilisabilité.
2. Netflix – le tunnel
Ouvre Netflix dans ton navigateur web sur une tablette format paysage ou pc grand écran https://www.netflix.com
Où est l’action primaire?
Combien y-a t-il d’actions proposées ?
Quel est l’objectif de cette page ?
Reprenez la grille MOCHE en vous posant cette question:
Quelle est l’interface la plus esthétique ?
Quelle est l’interface la plus utilisable ?
Merci qui?
Cette méthode je l’ai piqué à Noam Tractinsky. Lors de ces cours, il amène ces étudiants par eux-mêmes à la conclusion que l’esthétique et l’utilisabilité ne forment qu’un, qu’ils sont inextricables comme les 2 faces d’une même pièce.
C’est esthétique parce que c’est utilisable ou c’est utilisable parce que c’est esthétique?
C’est simple parce que c’est harmonieux ou c’est harmonieux parce que c’est simple?
Comme l’utilisabilité à long terme est plus porteuse de bénéfices sur l’expérience utilisateur, je vais parler plus longuement de cela que de l’esthétique.
Tenter de prouver que la simplicité est le principal marqueur de l’esthétique-utilisabilité.
#staytuned
“ C’est un Koendelietzsche ”
Lorsque j’écris mes textes, des références me viennent automatiquemet à l’esprit – celles-ci étant toutes liées au 7ème art. Cette fois-ci, comme il s’agissait d’esthétique, mon cerveau s’est égaré vers l’art. Et comme je suis aussi aussi fan de surréalisme, “le kundelitch” m’est apparu comme une évidence :-D. Pour ceux qui ont la ref aussi.
Pour ceux qui ne l’ont pas, cela vient du film de “Les Inconnus” intitulé “Les trois frères”.
Croyez-le ou pas, j’ai tapé dans gogol : “Kundelitch oeuvre”. Je n’ai pas trouvé le magnifique non-portemanteau. Tout ce que j’ai trouvé – à part les quelques captures d’écran – c’est des vendeurs de t-shirt… Et la Redoute … WTF …
Le gestionnaire des mots clés du site web a associé “Kundelitch” aux accessoires de repassage telles que des pendoirs à linge #génie
–>
Kounellis et Kandinsky
30 ans après, je découvre l’atroce vérité, cette oeuvre d’art n’existe pas! J’ai été eu #shame. Wikipedia m’a sauvé mon idiotie en me fournissant le nom de l’artiste ayant inspiré les artistes.
Il s’agit de Jannis Kounellis (1936-2017) – performeur et sculpteur grec associé au mouvement Arte Povera – un mouvement dédié à la remise en question des normes établies des gouvernements, de l’industrie et de la culture. À l’origine peintre, Kounellis s’est tourné vers les installations.
Vous trouverez plus de représentations des oeuvres de Kounellis sur la galerie Forsblom.
Un autre running-gag du film est celui du monochrome de whiteman – présentant un immense cadre tout blanc. Celui-ci fait référence aux artistes minimalistes comme Kandinsky, Malevitch, Ad Reinhardt.
§
Captain UX Planet
- linkedin.com/pattefrancois
- contact@pattefrancois.be
- pattefrancois.be
Pour cette raison, ce site web est conforme aux législations belges et européennes (cookies, conditions d’utilisation, vie privée)