Neumorphisme - Et si on faisait une vraie étude de cas ?

On en entend parler un peu partout sur la toile (tout du moins dans le monde des designers) depuis plusieurs semaines, j’ai nommé : le Neumorphisme ! Au delà des analyses des uns (“C’est nul !”) et des autres (“C’est génial !”) on vous propose enfin une vraie étude de cas pour confronter le Neumorphisme à la réalité d’un site, hors de nos fantasmes de designer.

‍

‍

LE NEUMORQUOI ?

“Neumorphisme” ma bonne dame (prononcer “Ni-you-morphisme”). Si vous connaissez déjà, vous pouvez zapper cette section, sinon sachez que c’est en fait un mot-valise constitué de “New” et “Skeuomorphisme”. Pour les non-initiés le skeuomorphisme c’est cette tendance qui vise à reproduire dans le design des interfaces digitales les objets qui seraient utilisés dans le monde réel. Pour faire court (vous allez comprendre avec un exemple), si sur une radio vous aviez un bouton poussoir pour l’allumer ou l’éteindre, on dessinera un bouton poussoir similaire sur une application de radio.

‍

‍

Très populaire à l’origine du web et jusque dans les années 2010, le skeuomorphisme été remplacé petit à petit par le Flat Design (si vous voulez découvrir l’historique du web et en savoir plus c’est par ici 😉). Au lieu de chercher à reproduire des éléments tels qu’il étaient sur les objets d’origine, le flat design s’est concentré directement sur l’action effectuée dans le monde virtuel. Résultat : des boutons plus clairs dans une interface graphique mais moins intuitifs quand on n’est pas habitué au numérique.

Bref, bon an, mal an, tout le monde ou presque s’est mis au flat design ou assimilé. Google en a même créé une version à sa sauce avec le material design, Apple y est passé petit à petit et globalement aujourd’hui toutes les app et tous les sites web sont conçus en flat design… Oui mais…

‍

‍

Oui mais le Flat design c’est tout de même très “plat” et plusieurs nouvelles tendances ont vu le jour pour tenter de pimenter un peu ces interfaces qui commencent à toutes se ressembler. C’est ici qu’intervient le Neumorphisme.

L’idée de base du Neumorphisme c’est d’ajouter de la profondeur sans dénaturer les interfaces “flat”. On garde donc des couleurs sobres et on ne cherche pas à reproduire des boutons existant mais on se concentre plutôt sur l’effet de profondeur que l’on peut donner aux boutons “flat”.

Le résultat donne des interfaces très épurées mais dans lesquelles on ressent tout de même la “profondeur” des boutons et soyons franc, c’est plutôt joli !

‍

LE NEUMORPHIQUE EN VRAI, ÇA MARCHE ?

‍

Cette tendance étant de plus en plus présente depuis fin 2019, nous avons décidé de la mettre à l’essai sur un vrai projet afin de tester son utilisation en conditions réelles. Nous avons pour cela pris notre projet interne de Quizz des Typologies de joueurs et décidé de le retravailler de A à Z.

Premier constat : On oublie le fond blanc !

Autant le dévoiler tout de suite, s’il est bien une caractéristique commune à tous les magnifiques proto dévoilés sur Dribbble et autres c’est celle-ci : l’utilisation d’un fond sombre ou d’un gris bien foncé. N’espérez même pas pouvoir faire du Neumorphisme sur fond blanc. Pour obtenir un effet décent il faut utiliser des ombres noires ET des ombres blanches. Si votre fond est noir ou blanc, l’une de ces deux ombres ne se verra pas et tout votre design tombe à l’eau !

‍

‍

On oublie aussi la superposition d'éléments (Fonds texturés, photos, formes...)

Décidément ! Même en essayant de foncer un peu notre fond, un autre problème apparaît : L’effet de relief s’accommode très mal des arrières plans autres que les aplats de couleur. Pour en avoir le coeur net on a testé sur différents fonds et globalement le résultat est toujours le même : ça donne un ombrage un peu sympa mais on perd globalement l’effet de profondeur si sympa dans les démo qu’on voit ça et là.

‍

‍

Histoire d’éviter les écueils listé plus haut on décide donc de repartir de 0 en collant le plus possible aux exemples qu’on trouve un peu partout sur le web. Le résultat donne en effet un bel effet de relief mais une chose nous saute au yeux…

‍

Et l’accessibilité ?!

Parce que oui, c’est bien joli tout cela mais si on perd en accessibilité ça va vite poser un sérieux problème… Et effectivement, lorsqu’on teste le contraste des différentes couleurs (ombrage, fond et corps du bouton) on se rend compte qu’on est très loin des critères d’accessibilité de base. La raison est simple : les bouton ont globalement la même couleur que le fond. Rien d’insurmontable si on le retravaille avec de nouvelles couleurs mais c’est assez impressionnant quand on se rend compte que 95% des démos de neumorphisme que l’on voit aujourd’hui présentent de GROS problèmes d’accessibilité…

‍

Je vais prendre l'avis du public

Au final on a donc décidé de prendre l’avis du public. On ne fait pas des tests utilisateurs à longueur d’année pour derrière prendre des décisions à la volée. Nous avons donc réalisé un prototype du quizz façon “neumorphisme” et nous l’avons présenté à différentes personnes qui ne sont pas designer et ne travaillent pas dans le numérique.

Globalement, les réactions sont unanimes et pas forcément celles qu’on attendait : personne ne trouve le neumorphisme si génial que cela. Alors que les designers, qui conçoivent des interfaces flat depuis des années sont heureux de voir une nouvelle tendance, les utilisateurs ne voient pas l’intérêt de changer d’interface. En creusant un peu le sujet il apparaît d’ailleurs que l’effet de relief qu’on adore n’est pas si évident pour tout le monde et que certains s’en fichent ou ne le voient même pas. Un monde s’écroule…

MAIS ALORS ? ON BALANCE TOUT ?

Pas tout à fait. Il apparaît clairement que le neumorphisme tel qu’il est présenté en ce moment tient plus du “trip de designer” que de la “guideline pour réaliser une interface”. Cela dit tout n’est pas à jeter. Et tout comme les robes de haute couture ne sont pas faites pour être portées telles quelles mais sont des éléments de réflexions pour les collections futures, les exemples que l’on voit sur Behance ou Dribbble sont fait pour servir d’inspiration.

C’est vrai, le Flat Design “pur” a besoin de se renouveler, et le travail sur l’ombrage fait partie des évolutions les plus faciles et les plus évidentes. La preuve c’est que même Google a accentué ses ombrages sur Chrome.

‍

‍

Cependant, les évolution que connaîtra le flat design doivent aller dans le bon sens. Comprendre : elles doivent améliorer l’accessibilité de nos interfaces. C’était en fait déjà le cas lorsque le skeuomorphisme était à l’oeuvre ! A l’époque, les interfaces digitales étaient nouvelles et il fallait se rapprocher des interfaces naturelles pour aider à leur compréhension.

Les applications sont ensuite devenues de plus en plus complexes et ont embarqué de plus en plus de fonctionnalités, il a donc été nécessaire d’améliorer les interfaces dans cette optique. Une immense majorité des utilisateurs ayant désormais l’habitude des interfaces digitales on a pu passer au flat design qui perdait cette illusion de la réalité mais progressait en accessibilité numérique.

Mais dès lors à quel besoin tente de répondre le neumorphisme ? Sur quels points nos interfaces auraient elle besoin de progresser ? Sur de nombreux points en fait. Par exemple sur l’accessibilité qui est souvent encore loin d’être optimale, sur la clarté des interfaces et l’architecture de l’information. Le seul problème c’est que en tant que tel, le neumorphisme ne répond à aucun de ces problèmes… pire, il se permet le luxe d’empirer certains points comme l’accessibilité…

Alors certes cette nouvelle tendance apporte un souffle de fraicheur pour tous ceux qui conçoivent des interfaces. C’est toujours agréable de voir de belles interfaces et ce genre d’innovation donne envie. Mais par pitié, la prochaine fois que vous prend l’envie de faire toute une app neumorphique, faites d’abord un protoype et faites le tester à des gens qui ne sont PAS dans le monde numérique… vous risquez d’avoir des surprises… 😉

‍