Neumorphisme

Le néomorphisme : une tendance durable ou passagère ?

Le Néomorphisme est une tendance de conception en hausse en 2019/2020. Ce style, apparu sur dribble, est un mélange de Flat Design et de Skeuomorphisme. Tout comme les modes vestimentaires, l’UI design suit des cycles de tendances. Mais est-ce le Néomorphisme va détrôner le Flat Design ? Est-ce qu’il va durer dans le temps ?

Avant toute chose, il est nécessaire de redéfinir le vocabulaire que nous allons employer :

Skeuomorphisme

C’est la conception d’interfaces utilisateur graphiques pour décrire les objets d’interface qui imitent leurs homologues du monde réel dans leur apparence et/ou la façon dont l’utilisateur peut interagir avec eux. Un exemple bien connu est l’icône de la corbeille utilisée pour la mise au rebut des fichiers. Le skeuomorphisme rend les objets d’interface familiers aux utilisateurs en utilisant des concepts qu’ils reconnaissent.

Flat design

Le Flat design, à l’opposé du Skeuomorphisme, prend le parti pris du minimalisme. Il vient de la tendance suisse, qui exclut tout effet de profondeur, d’ombre portée et de reflets. C’est un style qui privilégie les grands aplats de couleurs, sans bordures. À l’origine du concept, Allan Grinshtein explique que les interfaces élégantes sont celles « qui ont le plus d’impact, avec le moins d’éléments ».

Evolution des icones entre ios 6 (Skeuomorphisme) et ios 7 (Flat Design)

Néomorphisme

Le nom vient de la contraction du terme nouveau (néo / neu) et skeuomorphisme. C’est la combinaison du skeuomorphisme et la simplicité du Flat design.

Il se caractérise par une couleur simple avec des ombres pour ajouter de la profondeur. La conception peut inclure des ombres intérieures et extérieures pour créer cet effet. La plupart du temps, l’objet et l’arrière-plan d’une seule couleur sont séparés par une ombre pâle.

Sa viabilité

Contrairement au Skeuomorphisme ou au Flat Design, le Néomorphisme ajoute un aspect futuriste à la conception d’interface. Il apporte cette « nouvelle sensation » à l’interface et la fait ressortir.

Dans les interfaces modernes, l’utilisateur est assez facile à comprendre : tous les éléments sont familiers, leur hiérarchie est claire. Le Néomorphisme ajoute un nouveau paramètre à l’objet : son épaisseur. Ils deviennent épais, et ils se ressemblent tous, tous les éléments se font concurrence pour attirer l’attention de l’utilisateur. Elevés à la même hauteur au-dessus du fond, les objets n’obéissent pas à une hiérarchie claire. Tout cela conduit au fait que l’utilisateur a une charge cognitive supplémentaire.

Le Néomorphisme va ajouter beaucoup de difficultés dans la mise en œuvre des micro-interactions des éléments d’interface. L’interface peu contrastée, est inconfortable à utiliser. Tous les utilisateurs atteints de daltonisme, de cécité chromatique ou de toute autre déficience visuelle sont incapable d’utiliser les interfaces réalisées en Néomorphisme. Depuis le 24 juillet 2019, il est obligatoire de respecter le RGAA (référentiel général d’accessibilité des administrations) pour les organismes publics, les délégataires d’une mission de service public, ainsi que les entreprises dont le chiffre d’affaires est d’au moins 250 millions d’euros. Sans être une obligation pour tout le monde, cela devrait être au minimum une bonne pratique.

Alors, une tendance durable ou passagère ?

Une interface ou application doit en premier lieu être facile d’usage. Malgré son style moderne et attrayant, le neumorphism doit selon moi être utilisé avec parcimonie et intelligence car il peut rapidement nuire à la lisibilité du contenu. Je trouve aussi que l’accumulation d’écrans utilisant le Néomorphisme donne un sentiment qu’une monotonie…

De plus, le Néomorphisme fait face à de grandes faiblesses !

Le manque de contraste entre les éléments et le fond cause des problèmes de visibilité. En 2020, il est important pour moi rendre les interfaces et le design aussi accessibles que possible aux personnes handicapées.

Le Néomorphisme n’est pas assez polyvalent pour être utilisé seul. Seul une niche de projets peut être viable avec ce style. Une tendance durable est lié à la réussite commerciale des applications l’utilisant. C’est pour cela que je pense que c’est une tendance passagère.

Mais pourquoi pas mélanger les tendances ! Il faut palier les faiblesses du Néomorphisme avec du Flat Design. Nous nous dirigeons peut-être vers l’ère du Flat-Modern-Neumorphism.

Qu’en pensez-vous ?

experience utilisateur

Expérience utilisateur : Animation d’un formulaire avec un Yéti

Darin Senneff, un développeur qui habite à Washington DC, nous propose un formulaire animé très intéressant qui peut considérablement améliorer l’expérience utilisateur. Vous pourrez trouver son site ici. Cet élément UX a d’abord été partagé sur codepen.io le 16 décembre 2017 puis a été partagé en Inde et fait aujourd’hui le tour du monde.

L’animation réalisée en SVG met en scène un Yeti au-dessus d’un formulaire. Quand vous tapez vos informations, email et mot de passe, il suit la progression du remplissage. Par exemple, lorsque vous complétez le mot de passe, le Yéti réagit en se cache les yeux.

Plus précisément un jeu subtil entre le dessin SVG du yéti et la captation des actions de l’utilisateur en javascript. Le Yéti est réalisé avec de multiples vecteurs qui réagissent en interaction avec l’utilisateur. C’est le code javascript qui permet de l’animer selon l’action de l’utilisateur (détection du type de champ du formulaire) de façon fluide et naturelle et embellit l’expérience utilisateur.

Améliorer l’expérience utilisateur grâce à son formulaire

De nos jours, même si l’on veut améliorer l’expérience utilisateur sur un site (qualité des visuels, travail éditorial, univers de marque…), l’étape du formulaire reste ennuyeuse.

Pour réaliser un formulaire qui fonctionne, vous pouvez à votre niveau, respecter certaines bonnes pratiques :

  • Ne collecter que les infos essentielles pour le client
  • Humaniser les messages d’erreurs
  • Créer une animation progressive qui signifie les étapes qui restent à accomplir et qui incite à passer à la suivante
  • Collecter les informations de manière détournée et séquencée sur le site

Cette animation ludique permet d’apporter de l’originalité lors de l’action récurrente de la connexion à un compte. Le yéti amuse l’utilisateur et détourne donc le sentiment négatif lorsque l’on complète un formulaire standard.

De plus, la curiosité incite l’utilisateur à terminer de remplir le formulaire. Sur des sites e-commerce, cela peut permettre d’augmenter le taux de conversion.

VOCABULAIRE

Vocabulaire du web (UI, UX, Front-End, Back-End)

Les personnes novices ou extérieures au milieu du web sont souvent perdu dans les différents mots de vocabulaires tels que UI, UX, Front-End, Back-End

UI

UI Design = User Interface Design = Design d’interface utilisateur

L’UI réalise l’organisation des éléments graphiques et textuels pour proposer un produit (site web ou autre…) attrayant.

Il se demande par exemple : « De quelle couleur doit être le bouton pour qu’il soit visible immédiatement ? »

UX

UX Design = User Experience Design = Design de l’expérience utilisateur

L’UX prend en compte les attentes et les besoins de l’internaute pour l’amener à concrétiser son action, le tout sans trop d’effort et dans un environnement agréable, fluide, rassurant.

Il se demande par exemple : « Avons-nous vraiment besoin de ce bouton? »

L’expérience utilisateur se résumerait, selon l’infographie de Magnus Revang en six étapes pour l’utilisateur, et en une multitude de paramètres à considérer pour les concepteurs :

  • Le site doit être facile à trouver : ce qui nécessite un travail de référencement en amont
  • Le site doit être accessible : il faut désormais concevoir des sites supportés par les différents terminaux et technologies
  • Le design doit donner envie et confiance : il faut donc être cohérent dans le choix des graphismes et penser ergonomie
  • Le site doit être facile à prendre en main : il doit être suffisamment intuitif pour qu’on s’y repère facilement
  • Il doit être crédible et conforme à l’image de la marque : les utilisateurs doivent être rassurés et convaincus
  • Pour finir, le site doit être efficace : l’internaute doit facilement trouver les réponses à ses questions, et le site doit être exempt d’erreurs…

UI VS UX :

ui-ux

Le développeur Front-End

Lorsque l’on parle de «Front-End», il s’agit des éléments du site que l’on voit à l’écran et avec lesquels on peut interagir. Ces éléments sont composés de HTML, CSS et de Javascript contrôlés par le navigateur web de l’utilisateur.

Les champs de compétence du Front-End peuvent être séparer en deux :

  • Le design
  • Le développement
  • De plus en plus de web designer (qui réalisent habituellement des maquettes graphiques avec Photoshop ou autre) ont franchi la barrière et savent coder.

Le développeur Front-End est donc une personne qui peut être issue du milieu du web design en ayant renforcé ses connaissances en développement. Il peut aussi être un développeur qui a choisi de se spécialiser dans les technologies et langages du Front-End tels que :

  • HTML
  • CSS
  • Javascript

Le développeur Back-End

Le Back-End est la partie immergée de l’iceberg (invisible pour les visiteurs mais représente une grande partie du développement d’un projet web).

On peut décomposer le Back-End en trois parties essentielles :

  • Un serveur (ou hébergement web)
  • Une application (en l’occurrence le site web)
  • Une base de données (ou l’on stocke les données de l’application)
  • Le serveur est comme un disque dur accessible 24 heures sur 24, sur lequel les pages du site web sont enregistrées.

Pour pouvoir conserver vos mots de passe, vos préférences, votre panier d’achat que vous avez saisi grâce aux éléments de Front-End, il est nécessaire de les enregistrer dans une base de données.
Pour pouvoir conserver, traiter, modifier ces données et fournir des informations à jour sur un site internet (comme des actualités, des fiches produits, des images, des vidéos), le développeur Back-End va utiliser des langages de programmation «dynamique».

Les langages les plus utilisés sont :

  • PHP,
  • Ruby,
  • Python,
  • SQL.
  • jQuery (un framework javascript, pour simplifier c’est une bibliothèque Javascript qui permet de coder plus vite et plus simplement)
  • Frameworks (Cake PHP, Symfony ou Code Igniter).

Font-end VS Back-end :

Font-end_vs_back-end