Le Neumorphism : la vraie fausse bonne idée de 2020

Le Neumorphism est la nouvelle tendance design de l’année. Aussi bien encensé que décrié, mais que se cache-t-il derrière ce terme barbare et pourquoi divise-t-il autant?

Illustration de Neumorphism
Source :
Freebie Neumorphic UX UI Elements by MazePixel

Dans un premier temps, pour comprendre réellement d’où vient cette tendance, il faut remonter un peu dans le temps.

Petite histoire abrégée du design : du Skeuomorphism au Neumorphism

L’ère du Skeuomorphism


Le Skeuomorphism était un principe de design très utilisé aux alentours de 2010 sur les interfaces web et logicielles. Il consistait à reproduire des éléments d’objets de la vie réelle sur des interfaces.

L’un des plus célèbres éléments de Skeuomorphism est sans doute la bibliothèque d’Apple, souvenez vous :

Aperçu de la bibliothèque d'Ibooks d'Apple

En reproduisant littéralement une bibliothèque, l’utilisateur comprenait tout de suite l’utilisation de cette application même s’il n’était pas à l’aise avec son téléphone ou son Ipad.

Car c’est le gros avantage du Skeuomorphism. Il répond à 2 besoins essentiels pour qu’un utilisateur se sente à l’aise :

  • Le besoin d’affordance : le fait qu’un objet ou un concept suggère sa propre utilisation de par sa propre apparence.
  • Le besoin d’être rassuré : En reconnaissant instinctivement ce qui apparaît à l’écran, l’utilisateur reste dans sa bulle de confort : il connait ce qu’il voit, il est sûr de lui, rassuré. Il n’aura pas à apprendre à utiliser l’outil, il le connait déjà.

Le Skeuomorphism est également encore aujourd’hui très utilisé dans certains logiciels de montage sonore et audio : en reproduisant directement la console de mixage physique, l’utilisateur de l’application peut retrouver rapidement ses repères techniques :

Exemple d'interface de mixage en skeuomorphism


C’est bien tout ça, on a compris l’idée, quel rapport avec le Neumorphism?

Eh bien tout! Le Neumorphism a la même ambition.
Mais pour ne pas retomber dans les travers de son ancêtre, il faut connaître son histoire.
Car le Skeuomorphism, est passé du style de design le plus apprécié au style le plus décrié en très peu de temps!

La chute du Skeuomorphism et la première solution alternative trouvée : Le Flat Design

Une grosse partie des problèmes liés au Skeuomorphism tient en trois mots : trop de détails!
La lisibilité est difficile, de plus, il entraîne d’un point de vue technique, beaucoup de temps de développement et des ralentissements vraiment forts (plus une interface est visuellement complexe, plus elle est lente à charger).

Il est difficile de mettre en valeur une information plus qu’une autre avec une interface faite dans ce style.

Or, rappelons qu’un bon designer est avant tout un bon communicant, capable de faire ressortir les bonnes informations et de les rendre simples à lire!

L’arrivée du Flat design a donc marqué un tournant pour ce genre de design. Très rapidement délaissé au profit d’un design considéré comme beaucoup plus sobre et moderne, le Skeuomorphism a presque disparu, comme balayé d’un revers de la main par la plupart des designers.

Il faut dire que le Flat design avait beaucoup d’atouts pour lui. Son principal : il corrigeait tous les défauts du Skeuomorphism.

Le Flat design : révolution dans les interfaces

Source :
Adventure Trips par Heshmad Mohamed

Véritable bombe dans le monde des interfaces web venue tout droit de chez Apple, le Flat design a pour but de retourner au minimalisme : le moins d’informations possibles, on privilégie le texte et les images en faisant en sorte que la navigation et les éléments d’interaction soient les plus sobres possible.

De plus, si l’utilisation du Skeuomorphism était stratégique au début des années 2000 car les utilisateurs n’étaient pas encore habitués aux smartphones (pour rappel l’Iphone 3, premier smartphone d’Apple date de 2010). Aujourd’hui, notre connaissance accrue des interfaces permet d’arriver à faire comprendre des éléments d’interfaces par d’autres moyens que la reproduction d’objets et boutons de la vie réelle.

Les buts du Flat design étaient donc de :

  • Renouer avec la simplicité, et la lisibilité
  • Se concentrer sur le contenu
  • Jouer avec un design simple à mettre en place
  • Se concentrer sur le mobile et ses besoins de boutons plus gros pour être utilisables avec les doigts
  • S’adapter aux différentes tailles d’écran aisément
  • Réduire les temps de chargement, en particulier sur les mobiles
Source :
Glasses Subscription – Landing Page by Filip Legierski

Fun fact : face à cette simplicité, on a vu d’ailleurs une avalanche de marques “aplatir” leurs logotypes pour les intégrer à du flat design.


Les problèmes du Flat Design

Très solide dans sa construction, très simple à préparer techniquement et à adapter sur la plupart des écrans actuels, le Flat design trouve ses mauvais côtés dans ses atouts.

De part sa simplicité, quantité de modèles de sites web pré-conçus ont été partagés sur le web, générant une série complète de sites très semblables les uns par rapport aux autres.

Beaucoup d’utilisateurs se plaignent de manière récurrente du manque de personnalité de ces sites web. On a même parlé de “fainéantise” des designers dans certains cas. Ce constat est d’ailleurs régulièrement soumis à débat dans les communautés graphiques

Considéré comme simple (ce qu’il est visuellement mais pas toujours techniquement), beaucoup de studios ont réduit drastiquement les temps de développement consacrés à des sites web de ce genre, générant là encore des séries de sites web de qualité assez médiocre.

Des tentatives de renouer avec un design plus riche visuellement parlant?


Il y en a eu plusieurs, mais aucune ne s’est réellement imposée jusqu’à présent. Je dirais plutôt qu’il y a eu un ensemble de petites touches ajoutées au Flat design, pour lui donner plus d’ampleur.

Le Material design par exemple, venant de chez Google, consiste à rajouter quelques ombrages sur certains éléments de Flat design, afin de lui donner plus de profondeur, voir parfois une apparence un peu “paper craft”.

On met certains éléments en avant via des ombrages légers et stratégiquement placés. Les évolutions techniques (merci CSS3 + HTML5), permettent d’ajouter des animations plus fluides et de jouer avec des quantités de principes qui n’existaient pas avant, faute de moyens techniques. Ainsi, ces interfaces dites “simples” s’enrichissent avec le temps.

source de la vidéo : UI Transition Exploration par dickiprima


Le Neumorphism : design révolutionnaire qui s’inscrit dans la continuité de… ce qui se fait déjà

Finalement, le Neumorphism se vante de vouloir reproduire ce qui se faisait avec le Skeuomorphism : reproduire des éléments boutons ressemblant à des éléments physiques en jouant avec des ombres (un peu comme le Material design finalement), mais en reprenant tous les codes et la simplicité du Flat design. Il tire d’ailleurs sa source, de mon point de vue du moins, plus du Flat design que du Skeuomorphism.

Il se veut “aéré” et doux visuellement parlant.

Source :
Neumorphism landing page par Dylan

Et c’est vrai qu’il est plutôt joli à voir, avouons-le. Et son principal atout : visuellement c’est frais!
Mais passons sur un exemple plus concret maintenant voulez-vous?

Vous êtes avec des amis sur la terrasse donnant face au jardin, en train de discuter d’objets que vous souhaitez acheter. Et cette interface est ouverte sur votre mobile :

source :
White Skeuomorph Styled Shopping App par
Tribhuvan Suthar

Avec le soleil (même s’il fait un temps grisâtre) arrivez-vous à voir ce qu’il se passe?
Et pourquoi avons nous l’impression que tous les éléments flottent? Quel sens cela a-t-il?

Pour rappel, l’intérêt de mettre un bouton en avant est de faire en sorte qu’il soit compris comme étant plus important qu’un autre élément. Cela donne un ordre de lecture qui permet à l’utilisateur de comprendre ce qu’il doit faire, ce qui est important.

Si tous les éléments se mettent à flotter et sont ainsi mis en avant, impossible de définir un ordre. En lisant, tout nous apparaît alors brouillon.

Ce manque de cohérence et de contraste qui empêche de comprendre correctement l’application, est malheureusement commun à toutes les interfaces en Neumorphism que j’ai pu voir :


Playlists – Simple Music Player par
 Filip Legierski


Source :
Daily UI 007 – Smart Home App Settings par
 Casker 


Contraste et accessibilité : 2 éléments qui ne fonctionnent pas avec le Neumorphism

Un des premiers cas de problématique sautant aux yeux avec le Neumorphism, c’est le manque de contraste.

Il apparaît alors qu’il ne peut être utilisé sur des boutons. En effet, les boutons doivent être mis en avant dans une application pour être vus tout de suite et être mis en valeur.

Il faudrait atteindre un ratio de contraste de 3:1 au minimum pour qu’un bouton soit visible correctement à l’écran (voir les règles du WCAG). Il faudrait donc créer une ombre extrêmement foncée qui fasse un contour complet des boutons pour que ces objets soient vu correctement par des personnes ayant des problèmes de vision ou simplement des personnes ayant un peu de soleil au niveau de l’écran.

Source :
Michal Malewicz
sur Medium

Sur ce dernier sujet d’ailleurs, je vous envoie à cet excellent article de Michal Malewicz :
https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6
(Il a par ailleurs écrit 3 articles sur le sujet que je vous conseille si vous vous intéressez au Neumorphism”).


Neumorphism et intégration

Contrairement à ce que l’on pourrait penser au premier abord, intégrer des éléments en neumorphism est moins complexe qu’il n’y paraît : il suffit simplement de jouer avec les ombres. Là encore je vais citer le même article que précédemment, l’image parle d’elle même :

D’ailleurs, un générateur fait déjà le tour de la toile et vous permet de générer automatiquement le css d’un élément en neumorphism design :

neumorphism.io


Conclusion : le Neumorphism, c’est une tendance à suivre ou pas?

Le Neumorphism est très apprécié, mais je pense qu’en l’état, c’est une très mauvaise idée de commencer à concevoir des projets si l’on utilise uniquement ce style de design.

Cependant son esthétique n’est pas à négliger. Hors le design, c’est aussi faire éprouver du plaisir aux gens qui le regardent. Et le neumorphism est agréable à regarder.

En l’état , je pense qu’il se mixe vraiment très bien avec du flat et du material design. C’est d’ailleurs la raison pour laquelle j’ai aussi parlé de ces types de design. Il ne faut pas le considérer comme un genre de design à part entière (comme pouvaient l’être le Skeuomorphism ou comme l’est le Flat design), mais plutôt comme une évolution en cours du Flat design, comme l’est le Material design.

En conclusion donc : tendance à suivre oui, mais pour son évolution future et non son apparence actuelle.

Enfin, n’oubliez pas : le design c’est du sens! Tant que le Neumorphism n’aura pas un sens clair et affiché, un pourquoi à sa conception autre que son esthétique, on ne pourra pas clairement l’identifier comme une tendance claire et intéressante à suivre, car elle n’apporte pas de valeur, elle ne résout pas non plus de problèmes d’utilisabilité.

Pour aller plus loin :


Skeuomorphism is dead, long live skeuomorphism –Interaction Design Foundation
Flat design – An introduction –Interaction Design Foundation
Flat design – Usabilis
Material Design guidelines – Material.io
Material design principles – Material.io
Neumorphism in User Interface-Michal Malewicz – Medium
Neumorphism will NOT be a huge trend in 2020 – Michal Malewicz – Medium
Neumorphism – the zombie trend – Michal Malewicz – Medium
Le Neumorphism va t’il révolutionner l’UI?-Guillaume Berthonneau – Medium
Neumorphism tutorial – Kanhaiya Sharma – UX Planet
https://graphiste.com/blog/neumorphism-fin-du-flat-design
Graphiste.com
Neumorphism the right way — A 2020 Design Trend – David Ofiare – Medium
https://neumorphism.com/

On reste en contact?

Toi aussi tu as envie de participer au débat?
N’hésites pas à me laisser un commentaire!
ou :

S’inscrire à la newsletter


Tu as un projet de site web et tu ne sais pas à qui t’adresser? N’hésites pas à me contacter