Contact client : +33 1 76 42 00 45 hello@ferpection.com

December 9, 2020

Flat design ? Skeuomorphisme ? Quel style pour concevoir une interface

Les tendances de design évoluent régulièrement, mais quel regard les utilisateurs portent-ils dessus ? Après quelques définitions, nous vous révélons les résultats de notre sondage pour avoir une idée plus claire des forces et faiblesses de chaque design.

En octobre dernier, Google a dévoilé les nouveaux logos de sa suite logicielle, avec un nouveau design pour ses 5 principales applications (messagerie, agenda, drive, docs et meet). Le géant a ainsi voulu faire évoluer son design, mais les réactions des utilisateurs ont été plutôt mitigés, même un peu moqueuses.

Les nouvelles icones de Google, comment les utilisateurs les voient-ils?

Évidemment, en termes de design, les modes passent et se succèdent. Mais lorsqu'il s'agit de design d'interface, ne serait-ce pas utile de laisser la mode de côté et de se focaliser sur le ressenti de nos utilisateurs ?

Alors entre skeuomorphisme, flat design, neuomorphisme et material design, quel est l'avis des utilisateurs ?

Cet article à pour but de faire un point objectif sur les différentes tendances des dernières années. Il se base sur un sondage fait auprès de 137 français de 18 à 55 ans.

Avant de se pencher sur l'étude, définissons les différents types de design

Le skeuomorphisme, tout d'abord c'est quoi ?

Le skeuomorphisme c'est l'art du faux : Par exemple, le fait de peindre du faux marbre ou du faux bois sur du plâtre, ou encore de mettre des diodes sur des fausses bougies pour créer des luminaires ressemblants au lustres d'antan.

Dans le monde des interfaces digitales, ce type de design a beaucoup été vu dans les années 90. Il utilise des objets de la vraie vie pour représenter des interfaces qui ont la même fonction. Par exemple, une application donnant l'heure utilise une horloge très réaliste, une zone interactive utilise l'image d'un interrupteur, une application donnant la température ressemble à un thermomètre à mercure, etc.

Interface skeuomorphique d'un logiciel audio ressemblant à un panneau physique.
Interface d'un logiciel audio ressemblant à un panneau physique. Auteur : Klaus Göttling

Le flat design, on remet tout à plat

En réaction du skeuomorphisme, les années 2010 voient émerger une tendance UI très radicalement différente : le flat design. Cette tendance Suisse apparue dans le monde du graphisme dans les années 20 est basée sur la lisibilité et le minimalisme. Avec ces formes géométriques simples et ses systèmes de grille, le graphisme papier vient donc aplatir et rationaliser les interfaces, avec par exemple la sortie de Windows 8 en 2012 et de iOS 7 en 2013.

Apple passe du skeuomorhisme au flat design en 2013 avec les icones stylisées de iOS7
Apple Inc. - Own work

Le material design, du "flat" à la Google

Au flat design d'Appel et de Windows, on a souvent opposé le material design de Google, alors qu'il en est plutôt la continuité. En effet, Google souhaite homogénéiser toutes les interfaces utilisateurs grâce à une grille stricte et un ensemble de règles "physiques". L'idée de base est que l'écran, peu importe qu'il soit de smartphone ou d'ordinateur, a une épaisseur dans la quelle on peut superposer plusieurs couches d'éléments plats, comme un empilement de feuilles de papier. Les designers prennent donc les éléments "flats" et leur donnent une petite ombre, très discrète, pour matérialiser leur présence. Le "flat" prend du coup quelques millimètres d'épaisseur mais le design reste minimaliste et plus structuré que jamais.

Exemple de flat design
Google Inc. - Own work based on: https://material.io/design

Le neuomorphisme, la tendance du moment

La grande tendance du moment chez les designers d'interface c'est le neuomorphisme. Ce néologisme créé à partir de "new" (ou néo) et skeuomorphisme est en réalité plus une évolution du material design qu'un réel retour au skeuomorphisme. Là où le "material" découpe certains éléments "flat" pour les mettre au premier plan, le neuomorphisme imagine que le fond lui-même se déforme en profondeur ou en relief pour créer l'interface. Le fond est donc traité comme une matière virtuelle douce (ou "soft" pour les adeptes des anglicismes), entièrement unie, souvent d'un gris légèrement froid, qui permet de créer du relief avec des ombres et des reflets de lumière.

Exemple de neuomorphisme
Interface fitness - neumorphism (Auteur : Mary Tokar, source : Dribbble

L'avis des utilisateurs sur ces 4 types de design, que dit l'étude quantitative ?

1/ Les utilisateurs sont sensibles à l'évolution des modes

Les 4 horloges ci-dessous ont été présentées à l'échantillon, et les répondants ont été capables d'ordonner correctement les 4 designs dans l'ordre du plus au moins démodés.

Sondage Ferpection : Parmi ces 4 designs d'horloge, laquelle trouvez-vous la plus démodée ? Flat design 28%, Skeuomorphism 40%, Material design 19% et Neuomorphisme 12%

Idem pour ces 4 designs de calculatrices, les résultats classent à peu de chose près les design dans l'ordre chronologique (avec un léger échange entre le "flat" et le "material").

Sondage Ferpection : Parmi ces 4 designs de calculatrices, laquelle trouvez-vous la plus moderne ? Flat design 27%, Skeuomorphism 7%, Material design 23% et Neuomorphisme 42%

2/ Le skeuomorphisme, c'est plus simple à comprendre

Si les utilisateurs sont capables de reconnaitre le côté plus "old-school" ou rétro du skeuomorphisme, cela ne veut pas forcément dire qu'ils ne l'aiment pas.

En effet, toujours parmi les 4 horloges, 42% de l'échantillon préfère l'horloge, la plus proche d'une horloge réelle, avec le plus haut niveau de détail, et correspondant donc au skeuomorphisme.

Sondage Ferpection : Parmi ces 4 designs d'horloge, lequel préférez-vous ? Neuomorphisme 30%, Skeuomorphism 42%, Flat design 18% et Material design 10%

En effet, Noah (49 ans), l'un des testeurs interrogés, parle de design "le plus simple sans se compliquer la vie" et Erika (36 ans) de "simple de présentation mais facile à utiliser et comprendre". En effet, la familiarité avec l'objet réel est rassurante. L'utilisateur sait l'utiliser dans la vraie vie, il peut donc se projeter facilement dans le monde virtuel.

3/ Le flat design, plus esthétique mais trop sérieux

Sur les différentes séries de visuels soumis à l'échantillon, le flat design a majoritairement été choisi comme préféré. Sur le logo Google par exemple, pas de doute, c'est le flat design qui l'emporte. Quasiment la moitié des répondants le préfèrent (45%) et le trouvent plus esthétique (46%).

Sondage Ferpection : Parmi les 3 designs de logo, lequel trouvez-vous le plus esthétique ? Flat design 46%, Skeuomorphism 28% et Material design 26%

En revanche, sur les formulaires ci-dessous, bien que 62% trouvent la première interface plus sérieuse, 60% des utilisateurs préférèrent la deuxième, la jugeant a priori plus esthétique.

Sondage Ferpection : Parmi ces deux écrans, lequel trouvez-vous le plus sérieux ? Flat design 62% vs. Neuomorphisme 38%

Sondage Ferpection : Parmi ces deux écrans, lequel préférez-vous ? Flat design 40% vs. Neuomorphisme 60%

C'est en général l'aspect simple et épuré du flat design qui lui donne son esthétisme, selon les répondants : "il est simple et épuré ce qui le rend agréable" (Thomas). Cela confirme en même temps cette impression sobre et sérieuse, qui peut aussi parfois moins plaire aux utilisateurs en fonction du contexte.

En mineur, mais à noter tout de même, un quart des utilisateurs estiment que le logo Google skeuomorphique est le plus esthétique. L'attention portée aux reliefs et aux textures peut donner à certains utilisateurs l'impression d'une image plus soignée, comme le décrit cet utilisateur à propos des visuels de calculatrices : "j'aime bien ce style comme de la 3D". - Ali (36 ans)

4/ Le material design ? Pas très original...

Le material design ayant majoritairement marqué les dernières années, et étant en plus porté par Google, il est sans surprise jugé plutôt commun. Sur le critère d'originalité, il arrive en effet en dernière position pour les répondants lorsqu'on leur soumet les pictogrammes ci-dessous.

À contrario, il est à noter que le skeuomorphisme n'étant plus tellement utilisé par nos UI designers, cela lui donne du coup un côté plus rare. En effet, 40% des répondant ont estimé que les pictogrammes skeuomorphiques étaient les plus originaux.

Sondage Ferpection : Parmi ces 4 pages de pictogrammes, laquelle trouvez-vous la plus originale ? Flat design 27%, Skeuomorphism 40%, Material design 13% et Neuomorphisme 20%

5/Le neuomorphisme, haut de gamme mais manquant de contraste

Pour les interfaces ci-dessous, mais également pour les calculatrices montrée précédemment, c'est en effet le neuomorphisme qui tire son épingle du jeu. Il est dans les deux cas le design préféré par les répondants. Mais surtout, ce type de design leur apparait comme plus haut de gamme comme l'explique un utilisateur : "La couleur blanche de la calculatrice D fait ressortir le côté sobre et premium à la fois". Cela se confirme avec les interfaces ci-dessous puisque 64% des répondants ont trouvé la version de gauche plus haut de gamme que celle de droite en flat design.

Sondage Ferpection : Parmi ces 2 types d'interfaces, laquelle trouvez-vous la plus haut de gamme ? Flat design 37% et Neuomorphisme 64%

En revanche, les utilisateurs ne répondent pas positivement aux boutons en neuomorphisme "pure". En effet, en gardant la définition stricte, les boutons restent de la même matière que le fond, et donc de la même couleur. Cela n'offre que très peu de contraste et n'attire pas l'œil de l'utilisateur.

Sondage Ferpection : Parmi les 4 designs de bouton, sur lequel auriez-vous envie de cliquer ?  Flat design 42%, Skeuomorphism 35%, Material design 14% et Neuomorphisme 9%

Conclusion

En conclusion, bien que le neuomorphisme semble s'imposer comme la tendance "in", le choix de design va se faire en fonction de votre image de marque, du message que vous voulez faire passer, et de ce que vous attendez de l'utilisateur. Pour une banque, le flat design pourra par exemple être approprié car aura tendance à envoyer une image sérieuse, alors que le neuomorphisme peut être privilégié pour une marque de luxe, mais il faudra a priori l'éviter pour les "call to action". Dans tous les cas, on ne pourra que vous conseiller d'écouter vos utilisateurs pour choisir le design qui correspond à leurs attentes et permettra de leur proposer une expérience satisfaisante.

Tous les articles de la catégorie : | RSS

Marie Mantopoulos

Marie Mantopoulos

Marie est Product Designer. Grâce à l'écoute de nos prospects, clients, UX researchers et testeurs, elle fait évoluer le produit Ferpection pour qu'il soit au plus près des attentes et besoins de chacun. Elle est en charge de l’évolution de la plateforme de tests utilisateurs et de restitutions des résultats, depuis l’UI et l’UX design, jusqu’à la gestion des projects.

Vous avez un projet d'étude utilisateurs ? Découvrir la démo gratuite