Ce que nous a enseigné la mise en pratique du neumorphisme en terme d'UX design et de développement lors de la réalisation d'une application mobile Android

La popularité croissante du neumorphisme nous a amené, chez IKOMOBI, à expérimenter son implémentation au sein d’une application Android et le proposer à nos clients. Voici le retour d’expérience de nos pôles d’experts UX Design et Android.

Skeuomorphisme : dès l’origine, les UX designers cherchent à rendre l’expérience utilisateur plus intuitive

Le Skeuomorphisme est une technique en design digital qui consiste à donner l’apparence d’objets graphiques physiques et réels à des objets virtuels, proposant ainsi une expérience plus intuitive à l’utilisateur. Elle a été développée par Apple dans les années 1980, poussée par Steve Jobs qui en était un grand partisan, et utilisée sur les versions d’iOS jusque dans les années 2000.

Les utilisateurs s’habituant aux smartphones, ce look mêlant bois, métal et cuir s’est vite fait vieux et dépassé. Le Skeuomorphisme a naturellement fait place au Flat Design sur iOS, alors que de son côté Google se mettait en place le Material Design.

Du neuf avec du vieux : comment le neumorphisme remet au goût du jour une tendance disparue avec le Flat design.

En 2019, le neumorphisme (contraction de « new » et « skeuomorphism ») fait son apparition en proposant une alternative entre le skeuomorphisme et le flat design. Cette technique, aussi appelée Soft UI, combine les couleurs de fond, les formes, les dégradés, les accentuations et les ombres, pour mettre en exergue certains éléments, leur donnant une apparence extrudée dans du plastique.

Le neumorphisme apporte une originalité et une fraicheur nouvelle aux interfaces mobiles, alors que les applications actuelles ont tendance à se ressembler de plus en plus, marquant les limites et le début de l’essoufflement du Flat Design et du Material Design.

Le neumorphisme provoque un effet waouh qui exige maîtrise et parcimonie lorsqu’il s’agit de le mettre au service de l’UX design

Concevoir des écrans en neumorphisme consiste à appliquer une couleur similaire à la fois pour l’arrière-plan de l’application et le fond de chaque élément qui compose l’interface. Pour les distinguer, un jeu d’ombres portées vient varier leurs hauteurs ou profondeurs. Vous pouvez vous faire une idée de ce procédé en testant par exemple le rendu proposé par ce simulateur: https://neumorphism.io/ ou bien via une sélection d’écrans d’un projet récemment conçu par le Studio UX design d’IKOMOBI.

Si ce choix esthétique provoque rapidement un effet Waouh, la conception d’une application cohérente s’avère complexe du point de vue ergonomique mais également côté technique. En effet, un neumorphisme mal maitrisé nuit à la qualité de l’UX (User Experience ou expérience utilisateur). Une utilisation abusive où tous les composants sont surélevés s’avère rapidement indigeste. Il est donc fondamental de garder un équilibre entre les différents niveaux de lecture (les plans). C’est un style à utiliser avec parcimonie et de manière réfléchie pour ne pas imposer un excès d’informations et une surcharge mnésique. Gardons toutefois un œil curieux sur cette nouveauté et ses possibles applications futures. Wait and see!

Pour les applications mobiles Android, les images et icônes doivent être déclinés en plusieurs versions afin de s’ajuster aux différentes tailles d’appareils

Visuellement, l’intégration du design dans l’application a apporté un aspect novateur et original. Les boutons sont très marqués, les éléments importants sont comme surélevés, et la navigation se fait sans peine.

Côté intégration, nous nous sommes heurtés à un inconvénient majeur. Lors de l’utilisation d’images et d’icônes sur la plateforme Android, le même fichier doit être décliné en plusieurs tailles pour s’ajuster aux différentes tailles dimensions des appareils : smartphones, tablettes 7 pouces, tablettes 10 pouces, dans leurs différentes densités. Cela implique un poids d’application bien plus conséquent, et un temps de développement supplémentaire d’intégration de ces images.

Pour palier à cette contrainte, on utilise désormais le SVG (Scalable Vector Graphics) pour les ressources. Ce format de dessin vectoriel basé sur le langage de balisage XML a l’avantage qu’il ne nécessite qu’un seul fichier par image car elles sont redimensionnables sans perte de qualité.

Et là est le problème : 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.

Le neumorphisme est à réserver aux applications mobiles tendances dès lors qu’on accepte l’effort supplémentaire exigé

Même si nous n’avons pas encore trouvé à ce jour comment optimiser le processus d’intégration du neumorphisme dans les applications Android, ce parti pris esthétique reste tout à fait possible mais peu performant. Si votre application a besoin d’un style original, le neumorphisme est une bonne alternative aux designs habituels, mais il faut d’une part prendre en compte l’effort supplémentaire qu’exigera le temps de mise en place et d’autre part accepter que le poids final de l’application sera supérieur. Dans la majeure partie des cas, nous pensons donc que le Material Design s’avère davantage pertinent car fidèle à l’expérience Android populaire chez ses utilisateurs.

Vous avez un projet d’application qui proposerait à ses utilisateurs le neumorphisme ? Vous avez des questions ou des remarques sur cet article ? N’hésitez pas à nous contacter, et découvrez depuis ces liens comment notre équipe Design d’Experience et nos experts en développements d’applications mobiles natives peuvent vous accompagner.