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
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 […]
image
image
Bérengère Noël
5 mai 2020
UX design

Design #2 Quelles bonnes pratiques faut-il privilégier lors de la conception d’un formulaire en ligne ?

Le formulaire est bien souvent l’étape clé d’un parcours utilisateur : paiement en ligne, création de compte, prise de contact, etc. Un formulaire mal conçu génère de nombreux irritants et pénalise la qualité générale d’une expérience utilisateur. Par conséquent, il convient de maîtriser les bonnes pratiques correspondantes et concevoir des formulaires qui ne comportent aucun […]
image
image
Bérengère Noël
28 avril 2020
Développement application mobile . UX design

Design #1 En e-commerce, quelles bonnes pratiques faut-il adopter sur mobile pour proposer des fiches produits qui vont déclencher l’acte d’achat ?

Le mobile est définitivement devenu le point central de la relation client. Il répond aux besoins d’immédiateté des consommateurs. Ces derniers veulent être en mesure de vivre une expérience d’achat sans couture autrement dit sans frein ni obstacle, quelque soit le lieu ou le moment. Dans ce contexte, la fiche produit est l’élément central de […]
image
image
Équipe iOS
23 avril 2020
Développement application mobile

TechnIKO #2 Migration UIWebview vers WKWebview

UIWebview vs WKWebview UIWebview est un composant d’interface permettant d’afficher du contenu HTML directement dans une application. C’est un composant déjà ancien puisqu’il est apparu avec iOS 2. Il est fortement présent au sein de nos applications pour, par exemple, afficher le contenu des FAQ, des CGV, le tunnel de commande, la création de compte […]
image
image
Équipe Android
20 avril 2020
Développement application mobile

TechnIKO #1 Appeler une méthode Javascript dans une Webview via Kotlin

Le TechnIKO, c’est quoi ? Chez IKOMOBI, nos experts sont tous les jours confrontés à des problématiques nouvelles qui les amènent à concevoir des solutions innovantes pour nos clients. Grâce à TechnIKO nous allons vous faire découvrir les coulisses de ces différentes innovations, au travers notamment la diffusion des techniques et méthodes de développements chères […]
image
image
Florian Hureau
23 décembre 2019
Actualités

IKOMOBI News #6 : Spotify, Youtube Ads, 5G, voice, Dior, mèmes et autres actualités digitales

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. « 圣诞老人到了! » D’où vient cette citation ? Scrollez au bas de l’article pour voir la source 😉 2019 Wrapped : Spotify donne un aperçu de l’usage des données personnelles pour les années à venir La fin […]
image
image
Florian Hureau
3 décembre 2019
Actualités

IKOMOBI News #5 : Tesla, Black Friday, TikTok et autres actualités digitales

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. “La reconnaissance faciale va protéger les droits et intérêts légitimes des citoyens contre les escroqueries et les inscriptions frauduleuses.” D’où vient la citation de la semaine ? Scrollez au bas de l’article pour voir […]