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
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 […]
image
image
Équipe iOS
23 juin 2020
Développement application mobile

Les 7 points clefs à retenir de la WWDC 2020

Compte tenu des contraintes imposées par la Covid-19, Apple a présenté sa très attendue conférence annuelle dans un format totalement inédit et 100% numérique. L’enseigne de Cupertino a notamment profité de cette nouvelle édition de la Worldwide Developers Conference pour présenter une série de nouveautés pour iOS 14 dont nous vous proposons ci-après une synthèse. […]
image
image
IKOMOBI
4 juin 2020
Développement application mobile . UX design

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 […]
image
image
Bérengère Noël
28 mai 2020
Développement application mobile . UX design

Marketing #1 Comment augmenter l’engagement de vos clients et de vos utilisateurs grâce aux mécanismes de gamification ?

Dans le domaine du web et des applications mobiles, la gamification, consiste à exploiter des mécanismes issus de l’univers du jeu dans d’autres domaines, comme des applications ou des sites internet. Elle vise à capter l’attention de l’utilisateur dans un processus de récompenses lui donnant envie de continuer et d’y revenir régulièrement. Le jeu et […]
image
image
IKOMOBI
26 mai 2020
Transformation digitale

Après le confinement : comment faire pour réussir sa transformation digitale ?

La mise en quarantaine d’une large partie de nos entreprises et services publics, bien que imprévisible, raisonne comme un coup de semonce pour chaque dirigeant, notamment vis à vis du niveau de “digitalisation” de son entreprise. Pour les entreprises à maturité digitale plutôt élevée, cette situation s’est transformée en stress test impromptu, impitoyable révélateur des dysfonctionnements […]