Une nouvelle approche du design d’interface utilisateur appelée “Neumorphisme” a connu un essor considérable ces derniers mois. Le terme de Neumorphisme, désigne une approche qui utilise le mélange des hautes lumières et des ombres pour créer un effet de flottement visuel. Il y a cependant un problème avec cette nouvelle tendance : l’accessibilité digitale. D’après Michel, L. l’accessibilité digitale se définit comme

“Des alternatives textuelles au contenu basé sur des images, des valeurs de contraste minimales, des tailles de texte minimales et n’utilisant pas la couleur comme seule caractéristique pour transmettre l’information.”

Michel Linnea

Dans cet article, nous essayerons de répondre à la question suivante : devons-nous faire d’une tendance UI une norme bien qu’elle puisse exclure certains utilisateurs ?

Nouvelles tendances pour 2020

Si vous êtes attentif aux nouvelles tendances liée à l’UX Design, il y a de fortes chances que vous ayez récemment entendu parler de l’accessibilité digitale ou du Neumorphisme. Ces deux concepts étant assez récents, regardons quelles caractéristiques définissent ces nouveaux préceptes du design d’interface utilisateur.

Le Neumorphisme: une nouvelle tendance UI

Nombreux sont ceux qui attribuent la popularité du Neumorphisme, au post devenu viral de Alexander Plyuto nommé “Skeuomorph Mobile Banking” posté sur Dribbble. Même si ce design est un peu exagéré, celui-ci interroge et enthousiasme les designers sur les possibilités du Neumorphisme.

Revenons sur l’histoire du Neumorphisme afin de comprendre cette nouvelle tendance. Issu du Skeuomorphisme, décrit par Jin, H. comme “Un style de conception plus lisible et plus précis pour la perception des utilisateurs.” c’est l’une des tendances qui est lancée par Apple avec le premier IOS en 2008. L’idée qui se cache derrière Skeuomorphisme tend à prouver que les utilisateurs se familiarisent avec une interface beaucoup plus rapidement si celle-ci tire profit de concepts qu’ils connaissent déjà.

Au début, Skeuomorphism a connu un réel succès. Il est notamment reconnu pour le taux d’adoption rapide à l’iOS. Mais au fil du temps, la facilité d’utilisation initiale du Skeuomorphisme n’a malheureusement pas perduré.. Ainsi, en 2013 Apple introduit le Flat Design qui permettait de faire plus d’actions dans un espace plus restreint, de manière très simple et rapide. Google surfe sur cette nouvelle tendance et introduit le Material Design, une approche qui ajoute des repères de profondeur. Mais au bout d’un certain temps, les designers expérimentent le Flat Design 2.0 (ajout de couches, d’ombres et de surlignages) pour créer une certaine profondeur.

Fin 2019, le nouveau Skeuomorphisme appelé le Neumorphisme arrive avec l’idée de Michal Malewic d’amener une touche de modernité et de 3D, moins texturé et plus réaliste que le Flat Design. Ainsi, le Neumorphisme tente de tirer parti de la puissance du Skeuomorphisme, qui a bien fonctionné à ses début pour Apple en imitant le monde physique, sans aller entacher l’expérience utilisateur.

Il est d’ailleurs possible de faire des expériences sur ce nouveau design sur le site Neumorphism.io. Aujourd’hui énormément de plateformes se tournent vers le Neumorphisme, mais cette nouvelle tendance doit aussi respecter certaines normes, dont l’accessibilité digitale.

L’accessibilité digitale : une tendance sociétale

Aujourd’hui en France, plus de 20% de la population est touchée par un handicap. Il est ainsi du devoir des designers et des concepteurs de s’assurer que toutes ces personnes soient en mesure d’accéder à leurs plateformes digitales, avec la meilleure expérience utilisateur possible. Ainsi, Pierre. L. définit l’accessibilité digitale comme “la possibilité pour tous les utilisateurs, quels que soient leur matériel, leurs logiciels, leur langue, leur localisation ou leurs capacités d’accéder aux contenus numériques et d’utiliser facilement les outils informatiques”.

Ainsi pour augmenter l’audience d’un site web et le ROI, voici les différents points clés de l’accessibilité digitale à prendre en compte : 

• Les balises texte pour le contenu visuel : bonne pratique SEO c’est aussi une recommandation qui permet à l’utilisateur de comprendre ce qu’il se passe sur l’image. Et ainsi lui permettre de la lire correctement. Google pense pour l’avenir à utiliser la technologie de l’IA pour automatiser ce processus. Le site de Microsoft Azure propose une vision par ordinateur d’une image avec leur API.
• La navigation clavier et le balisage : les personnes malvoyantes utilisent le plus souvent la fonction tab pour naviguer à travers les pages web. Pour cela, les pages doivent respecter les conventions standards de balisage sémantique (H1, H2, Hn). C’est sur ces balises que repose la lecture de contenu des pages web.
• La typographie : choisir une taille de police entre 14px et 16px avec une typographie qui n’est pas trop excentrique, est une recommandation W3C qui permet à l’utilisateur de pouvoir naviguer simplement sur votre page.
• Le contraste : souvent oublié et pourtant le point clé du Neumorphisme, les contrastes importants permettent à l’utilisateur de pouvoir lire correctement le contenu. Le logiciel CCA permet de tester votre contraste en suivant les normes W3C.

Ainsi l’accessibilité digitale nécessite de respecter un certain nombre de normes pour pouvoir permettre aux utilisateurs qui souffrent de handicap d’avoir accès à votre plateforme. Il est intéressant alors de comprendre comment allier accessibilité digitale et Neumorphisme.

Comment allier accessibilité digitale et Neumorphisme

Le principal avantage du Neumorphisme est d’apporter cette nouvelle ère d’interface utilisateur basée sur les contraste et sur le mélange à d’autres styles. Il y a cependant quelques problèmes avec le Neumorphisme qui doivent être résolus. Le principal problème jusqu’à présent concerne l’accessibilité digital. Alors comment s’assurer que cette nouvelle tendance du Neumorphisme respecte les normes de l’accessibilité digitale.

S’assurer qu’un design respecte les normes d’accessibilité digitale

L’accessibilité digitale est le défi auquel le Neumorphisme doit faire face. En effet, le Neumorphisme repose en grande partie sur des formes subtiles de contraste. C’est un excellent moyen d’obtenir un effet esthétique, mais c’est aussi un excellent moyen de développer un design qui n’est pas accessible sur une interface utilisateur.

Selon l’Initiative pour l’accessibilité digitale de l’organisme W3C (World Wide Web Consortium). Les composants d’interface utilisateur et les graphiques, doivent avoir un rapport de contraste égal ou supérieur à 3:1 pour fonctionner pour la grande majorité des utilisateurs. Ainsi, lorsque vous expérimentez le Neumorphisme. Le but est de savoir comment produire un effet qui a un rapport de contraste d’au moins 3:1 tout en ayant l’impact esthétique que vous voulez obtenir.  

Bien que les directives du WC3 soient un bon point de départ, elles ne doivent pas nécessairement être la fin de votre implémentation. Ainsi, si vous travaillez avec deux couleurs qui ont toutes deux une luminance élevée. Le rapport de contraste ne prend pas en compte son impact sur les utilisateurs. Par exemple, avec un fond bleu accentué, le rapport de contraste des couleurs vous indique que le texte du bouton devrait être noir. Mais la plupart des utilisateurs trouvent que le texte blanc est plus lisible. Ainsi, si vous voulez pleinement tirer parti du Neumorphisme vous devez expérimenter et tester votre conception.

Comment créer du Neumorphisme sur mon interface utilisateur

Il existe une multitudes d’exemples de Neumorphisme en ligne. Malheureusement, il n’y a pas assez de recul et de designers ayant utilisés ce design sur des applications et des sites web. Ainsi, nous ne savons pas vraiment ce qui fonctionne et ce qui ne fonctionne pas pour des environnements et des cas d’utilisation particuliers.

Afin d’obtenir un design du Neumorphisme qui respecte les normes W3C. Il faut donc expérimenter itérativement un concept et de le tester avec des utilisateurs. Il est également possible de créer du Neumorphisme en travaillant avec du HTML et du CSS. En effet, Michael J. Fordham publie sur CodePen le code source de l’une de ces réalisations. Il propose une version du Neumorphisme qui respecte les normes W3C de contraste et donc d’accessibilité digitale.

L’utilisation et l’implémentation de cette nouvelle tendance du Neumorphisme en respectant les normes W3C sur le contraste est donc possible. Malgré cela votre design sur votre plateforme doit rester agile. Car même si vos tests UX ont révélé que vos utilisateurs réagissent positivement au Neumorphisme aujourd’hui. Il est tout à fait possible qu’ils le trouvent irritant à gérer après un lapse de temps, surtout si le Neumorphisme devient devient omniprésent.

Conclusion

Le Neumorphisme s’inspire aujourd’hui de nombreux designers et ses problèmes d’accessibilité ne sont pas si importants que cela par rapport aux problèmes d’accessibilité des tendances utilisées auparavant. En phase d’exploration par les designers, le Neumorphisme reste aujourd’hui l’une des tendances qui secoue le monde de l’UI. Mais cette tendance saura t-elle s’imposer en 2020 pour devenir la référence d’accessibilité digitale du design d’interface ?

Pierre Pavlovic

• LinkedIn
• Medium
• Dribbble
• GitHub
• E-mail

Sources :

Michel, L. (2020). Using an Accessibility Maturity Model to Facilitate the Inclusion of Accessibility in Design Practices.

Jin, H. (2020, May). Influence of Icon Design Style on User’s Cognition. In 6th International Conference on Humanities and Social Science Research (ICHSSR 2020) (pp. 551-554). Atlantis Press.

Adam Giebl, adamgiebl@gmail.com. (2020). Neumorphism/Soft UI CSS shadow generator. Neumorphism.io. https://neumorphism.io/#55b9f3

S. (2020, 17 février). Neumorphism Soft UI Trend : Ultimate Guide to Neumorphic Design. Delightful Design. https://delightfuldesignstudio.com/neumorphism-the-soft-ui-trend/

Neumorphism in user interfaces. (2020). Medium. https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

Skeuomorph Mobile Banking. (2020). Dribbble. https://dribbble.com/shots/7994421-Skeuomorph-Mobile-Banking

Neumorphism Accessibility Example. (2020). CodePen. https://codepen.io/michael-j-fordham/pen/OJPqpog Neumorphism : why it’s all the hype in UI design. (2020). JUSTINMIND. https://www.justinmind.com/blog/neumorphism-ui/

Qu’est ce que l’accessibilité numérique? (2020). Pierre Lainé. https://www.pierrelaine.fr/articles-ux-ui-design/accessibilite-numerique-definitions-principes.html#:~:text=%E2%99%BF%20Accessibilit%C3%A9-,Qu’est-ce%20que%20l’accessibilit%C3%A9%20num%C3%A9rique%20%3F,utiliser%20facilement%20les%20outils%20informatiques.

Comprendre le critère de succès 1.4.3 | Comprendre les WCAG 2.0. (2020). W3C. https://www.w3.org/Translations/NOTE-UNDERSTANDING-WCAG20-fr/visual-audio-contrast-contrast.html#:%7E:text=Un%20rapport%20de%20contraste%20de,texte%20et%20une%20vision%20standards.&text=Un%20utilisateur%20avec%2020%2F40,%3D%204%2C5%20pour%201.