UI design : les 5 différents styles d’interface

Les interfaces graphiques n’ont cessé d’évoluer sur le plan esthétique depuis leur apparition dans les années 80. Ces dernières années ont été riches en innovation et expérimentations graphiques. Cet article vous propose un bref historique de l’évolution des styles dans les interfaces.

Le skeuomorphisme

Le skeuomorphisme est un style graphique dont la principale caractéristique est le réalisme. Un design skeuomorphique imite l’apparence des objets réels. Il en copie l’aspect physique, les textures et les ombres.

Il en résulte une interface à première vue intuitive qui capitalise sur la connaissance de l’objet réel pour en déduire le fonctionnement dans sa transposition numérique. Dans les systèmes d’exploitation, la fonctionnalité « Corbeille » a la même apparence et la même fonction que dans le monde réel.

Le flat design

Apparu vers 2010, le flat design est un style graphique dont la principale caractéristique est le minimalisme. Ses composantes visuelles sont les aplats de couleur, la typographie et les grilles de mise en page. Par sa simplicité, le flat design met en avant le message et les fonctionnalités.

Ce style épuré manque cependant d’affordance. Les composants d’interaction sont moins perceptibles. La cause ? Les aplats de couleurs manquent de relief. Après l’avènement de la tendance flat, on observe un retour au tangible. Les ombres refont leur apparition, plus subtiles mais introduisant la notion de profondeur. Les interfaces deviennent haptiques. Il s’agit du style graphique suivant !

Le Material Design

Le Material Design est un langage visuel et interactif conçu par Google en 2014. Il s’agit d’un design system, un ensemble de règles graphiques et d’interactions (animations et transitions) destiné à un écosystème applicatif.

Ses composantes visuelles sont la typographie, la profondeur et le mouvement. L’esthétique Material propose une palette de couleurs vives et des contrastes forts.

Tout comme le skeuomorphisme, le Material Design puise ses racines dans le monde réel. Sa source d’inspiration est le papier. L’introduction de profondeur dans l’interface se fait grâce à différents niveaux d’élévation (ombres).

Le mouvement ainsi que les micro-interactions rendent l’interface plus réactive offrant de bons feedbacks utilisateur au cours des interactions.

Le Fluent Design

Le Fluent Design introduit en 2017 par Microsoft est également un design system destiné à l’ensemble des applications Windows 10. Ses composantes visuelles sont la lumière, la profondeur, le mouvement, les matières et les échelles. Les effets de profondeur sont rendus par les ombres et les effets de translucidité (Acrylic UI).

Le neumorphisme

Le neuomorphisme est une tendance apparue au cours des derniers mois (fin 2019).
Cette expérimentation graphique travaille des interfaces aux ombres subtiles. L’effet de profondeur est très léger. Les couleurs sont généralement des tons sur tons. L’effet graphique est esthétique et doux. Cependant, l’inconvénient majeur des interfaces neumorphiques est leur manque de contraste. Cela pose des problèmes d’accessibilité et de lisibilité.

Pour résumer

Chacun de ces styles graphiques propose des pistes intéressantes pour rendre les interfaces toujours plus intuitives.

Ce qui doit guider un choix ce n’est pas la tendance mais la pertinence.

Il faut toujours se référer aux critères ergonomiques (Bastien et Scapin) pour évaluer la pertinence des choix graphiques. Quelques questions à se poser concernant le choix du style graphique :

• est-il pertinent au regard du projet, du contexte, des utilisateurs etc. ?
• améliore-t-il ou non la lisibilité ?
• améliore-t-il ou non le guidage (affordance) ?