image

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

image
IKOMOBI
4 juin 2020

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.

Walkman par Charlotte Doughty

Source: https://dribbble.com/shots/6913977-Retro-Music-Player-Walkman

Jog Wheel Animation par Eugene Cheporov

Source: https://dribbble.com/shots/189243-Jog-Wheel-Animation

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.

Fitness Neumorphism par Mary Tokar

Source: https://dribbble.com/shots/11202391-Fitness-neumorphism

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.

image
image
Jason Dejaégère
27 novembre 2020
UI design

Tendances et inspirations UI du moment dans le monde digital #1

Bien le bonjour ! 🖖 C’est avec grand plaisir qu’IKOMOBI vous présente sa nouvelle série mensuelle. Vous vous demandez de quoi ça parle ? Et bien, c’est tout simple. Cette série est un condensé des sites ou applications qui ont marqué, interpelé voire impressionné les membres du studio design. Une sélection d’une dizaine d’interfaces innovantes, […]
image
image
Carl-Stephan Parent
26 novembre 2020
Marketing digital

3 avantages marketing incontournables qu’offre une application mobile en 2020.

Traditionnelles, ou bien tout ou partie digitales, aucune organisation n’échappe aujourd’hui à la question de la place qu’il convient d’octroyer au mobile au sein de sa stratégie digitale. Depuis maintenant plus de dix ans, le champ des possibles offert par les applications mobiles n’a eu cesse de s’agrandir, offrant toujours plus d’opportunités de créer un […]
image
image
Carl-Stephan Parent
26 novembre 2020
Développement application mobile

Avec MAUI, Microsoft achève l’intégration de son framework de développement d’applications mobiles à la plateforme .NET

Xamarin.Forms évolue en .NET Multi-platform App User Interface (MAUI). Cet article nous donne tout d’abord l’opportunité de revenir sur l’histoire de Xamarin et les principaux points forts du framework mobile de Microsoft. Nous vous présentons les changements prévus prochainement et les raisons de cette évolution stratégique pour l’éditeur de Redmond. De Xamarin à Xamarin.Forms : […]
image
image
Bérengère Noël
20 octobre 2020
UX design

Comment le design UX permet de transformer le parcours client pour répondre aux nouvelles attentes des consommateurs dans le secteur du m-commerce alimentaire ?

Concevoir des parcours clients percutants pour répondre aux nouvelles attentes des consommateurs Un grand groupe européen dans le domaine du retail alimentaire a fait appel au Studio UX Design d’IKOMOBI afin d’être accompagné dans la conception d’une nouvelle application mobile m-commerce. À l’heure du tout digital, les enseignes redoublent d’efforts pour répondre aux nouvelles attentes […]
image
image
Carl-Stephan Parent
24 septembre 2020
UX design

Transformation digitale, amélioration continue et application mobile

Le précédent numéro d’Ikonnect, la newsletter mensuelle d’Ikomobi, vous a donné l’opportunité de découvrir une nouvelle application mobile conçue et réalisée par les pôles Design UX et Android. Le succès rencontré par cette app, dont la vocation principale est de faciliter la gestion des rayons de magasins, a encouragé la direction de Cora à poursuivre […]
image
image
Carl-Stephan Parent
27 août 2020
IKOMOBI

Une app pour donner un vrai coup de pouce aux collaborateurs et mieux gérer les rayons du magasin. Vous êtes un retailer et vous en rêvez ? Cora et Ikomobi l’ont fait !

Pour faire face aux services popularisés par les géants du e-commerce (on pense à Amazon notamment avec Amazon Fresh ou Prime Now) ou les nouvelles enseignes spécialisées, le magasin traditionnel n’a pas d’autres choix que de se réinventer pour proposer une expérience fortement teintée de digital en phase avec les attentes des consommateurs d’aujourd’hui. Un […]
image
image
Équipe Android
16 juillet 2020
Développement application mobile

Faut-il migrer vers Jetpack / Android X ?

Pour assurer la rétrocompatibilité des applications mobiles avec le système Android, Google s’appuyait sur une bibliothèque de composants intitulée Android Support. La firme de Mountain View invite désormais à migrer les applications mobiles Android vers Jetpack et ses bibliothèques Android X.  Pourquoi faut-il procéder à cette migration dans les meilleurs délais ? À compter de […]
image
image
Équipe iOS
16 juillet 2020
Développement application mobile

TechnIKO #3 : Comment tester les push iOS simplement ?

Tester les notifications push sur iOS peut être un exercice très fastidieux : Configurer l’application pour qu’elle accepte les push Créer les certificats de push en conséquence Les uploader sur la plateforme utilisée pour gérer l’envoi des push (par exemple Accengage) Trouver le token de son device et créer un segment avec Configurer la push […]
image
image
Carl-Stephan Parent
16 juillet 2020
UX design

Le pôle Design UX d’Ikomobi imagine les nouveaux parcours de souscription online pour une enseigne spécialiste du crédit à la consommation

Proposer des parcours clients efficaces pour se distinguer au sein d’un marché très concurrentiel  Le crédit à la consommation est un marché fortement concurrentiel en France et à l’international. Il est constitué des banques de détail traditionnelles, de leurs filiales spécialisées (BNP Paribas Personal Finance, BPCE financement, Franfinance…) et des banques en ligne qui se […]
image
image
IKOMOBI
25 juin 2020
Développement application mobile

Click and collect : Ikomobi conçoit et réalise en un temps record, une application mobile pour l’enseigne de restauration Fée maison

Comme vous le savez, le click and collect (ou retrait sur point de vente) c’est ce nouveau parcours malin qui permet de passer commande depuis un site e-commerce, un e-shop dédié ou bien depuis une application mobile, puis de récupérer ses achats à un créneau horaire donné. L’intérêt suscité par ce nouveau service a été […]
image
image
Jason Dejaégère
25 juin 2020
Développement site web

L’intégration, une phase clé à ne pas négliger pour la bonne réalisation d’un site web RWD

Le processus de réalisation d’un site Internet RWD (Responsive Web Design) obéit à un enchaînement précis de procédures bien connu des professionnels du web. En synthèse, tout commence par la conception des écrans et se termine par la mise en ligne du projet. La procédure d’intégration est une étape moins connue. Elle assure pourtant la […]
Message bien envoyé !