Quelque peu lassé du Flat design, les web designers font un pas en arrière. En effet, avant la démocratisation de ce style ultra minimaliste, principalement lié à la multiplication des écrans : le RWD (responsive web design) et ses obligations d’accessibilité.
C’était le Skeuomorphisme qui mettait tout le monde d’accords. Ce style, proposé par Apple à la sortie de son premier Iphone, en juin 2007. Avec une interface d’icônes au look bien marqués : semi-réaliste, avec beaucoup de reliefs, d’ombres, de brillances et de reflets. Le graphisme des applications du smartphone étaient inspirés par cette tendance et celle-ci va rapidement se propager sur le web.. et perdurer jusqu’au Flat design.
L’avènement de ce style fait débat : entre les systèmes d’exploitations iOS 7 et Windows 8, courant 2013. En vérité : si l’un fait de l’iconographie, l’autre fait de l’interface utilisateur une vraie expérience Flat. Plus qu’une question d’esthétique, c’est aussi une méthode de conceptualisation.. et l’ergonomie, l’Ux (user experience) est depuis au coeur des objets digitaux.
Lire aussi : La paternité du Flat design
Définition : le Neumorphisme, Néomorphisme « new skeuomorphisme » se trouve donc à mi-chemin entre le Skeuomorphisme et le Flat design. Par exemple : plutôt qu’utiliser exclusivement des aplats de couleurs le « néo-morpher » va s’autoriser de légers dégradés, quelques effets d’ombres et de brillances.
Le but n’est pas d’aller vers le réalisme, ou la texture, mais simplement d’ajouter un peu de reliefs, de volume aux éléments, comme une interface sous plastique. La méthode de conception Ux design doit resté Flat et la philosophie ergonomique Bauhaus : le graphisme est le contenu.
Pas de détails superflus, mais juste moins extrême dans le minimalisme. D’autant que.. en terme de structure, ce style permet de limiter l’utilisation des blocs et autres séparateurs. Utilisé intelligemment cet fausse 3D peut aussi aider à orienter l’utilisateur, notamment sur l’aspect mécanique. De plus cela semble s’accorder parfaitement avec nos devices toujours plus épurés et aux écrans mobile sans bords. Cette tendance semble alors clairement cohérente.
Objectifs : en terme d’interface et d’expérience utilisateur il faut comprendre le dilemme. Les internautes souhaitent toujours plus de fonctionnalités dans un environnement toujours plus clair.
Chronologiquement et graphiquement parlant, le Skeuomorphisme était explicite, mais les applications bien moins fonctionnelles. Le Flat design est ensuite devenu une évidence pour ces fonctions en croissances. D’autant que cette simplification est validé car les normes de navigation, aujourd’hui plutôt acquisses.. mais malheureusement les sites et applications ont maintenant tendances à se ressembler.
Pour moi, le lien entre Ux et Ui doit encore se coordonner. Le Flat est bien design, mais pas toujours ergonomique (contenus). A trop vouloir en faire paradoxalement, à satisfaire l’utilisateur, on fini par entrer en contradiction. L’avenir se jouera donc sur notre manière d’équilibrer, fonctionnalités et graphisme.
Le Neumorphisme cherche à résoudre ces problèmes de « lourdeurs » Ux avec une approche Ui « douce » en jouant des codes couleurs, formes, contrastes.. et cela pourrait presque fonctionner.
Notamment sur la hiérarchisation des contenus, avec cet notion de « plans » impossible avec du pure Flat design (sans parallaxe). Puis l’aspect ludique des éléments d’actions, pour des boutons avec plus de niveaux, d’options de présentations (roll-overs) donc d’importance.
Pour les front-end développeurs, cela ne pose pas de soucis d’intégration car les principes graphiques du Neumorphisme sont très facilement réalisables en CSS. Sauf témoignage ci-dessous.. mais je n’ai pas l’expertise pour confirmer.. je cite :
Pour être retro-compatible avec toutes les versions d’Android, il est nécessaire de transformer ces fichiers SVG en Vector Assets, qui seront ensuite interprétés par la plateforme. Seulement, lors de la conversion nous avons perdu toutes les ombres externes des éléments, qui forment cet effet de relief si caractéristique du neumorphisme. Nous ne pouvions donc pas utiliser le format SVG, et avons dû importer chaque image en 5 exemplaires de tailles différentes.
Les principes fondamentaux du Néomorphisme :
Eviter les cadres trop marqués, jouer plutôt avec des effets d’ombres en oppositions blanc et noir, ou avec un effet biseauté. Ces derniers donneront le volume de vos composants. La subtilité de ce style est dans gestion des contractes.
Utiliser des formes aux angles arrondies. Selon leurs rayons, adapter la profondeur de votre relief, les largeurs d’ombres. L’objectif visuelle est d’éviter les contours net, pour cet effet planifier et « délicat » qui est la caractéristique du Neumorphisme.
Le fond et les éléments de votre interface ne doivent pas être ni 100% blanc, ni 100% noir pour que le sombre et le clair soient visibles. Aussi.. ajouter une pointe de couleurs dans vos gris, c’est toujours plus classe (comme ci-dessous du bleu).
Le Neumorphisme alors.. bonne ou mauvaise idée ?
La force de cette tendance est aussi sa faiblesse : la lisibilité. Si ce style est incontestablement, frais et voluptueux.. c’est pourtant la norme d’accessibilité qui sera son principal défaut. Les avis des utilisateurs sont mitigés : entre les différentes résolutions d’écrans et autres daltoniens.. ils sont finalement peu à apprécier ses effets, et jeux de contrastes.
D’après moi, il faut utiliser le Neumorphisme avec parcimonie. Selon les projets, fonctionnalités d’interface, je dirai même.. principalement pour des applications de type « tool » ou écrans de type « dashboard » sur mobile..
Je crois que les web designers se mobilisent pour proposer une alternative au Flat design, créativement parlant.. peu excitant. Aujourd’hui le Neumorphisme est une expérimentation, un trip de designers pour designers en état.. mais il est intéressant. Une solution envisageable pour vos clients, des marques qui souhaitent se démarquer.
Bonus..
De la branlette intellectuelle au Design thinking en passant par l’Ux..