Le « Flat Design » : la nouvelle tendance en design d’interface
Détenteurs de iPhone, avez-vous téléchargé le nouveau système d’exploitation iOS 7? Si oui, vous avez sans doute remarqué une toute nouvelle direction artistique dans le design des interfaces comparé au prédécesseur iOS 6: moins d’ombres, moins de textures rappelant de vrais objets comme de la toile, du cuir ou du verre, plus de contrastes dans les différentes teintes, une typographie plus fine… Bref, une tentative de présenter les fonctionnalités de façon minimaliste et la plus simplifiée possible. Cette métamorphose n’est pas le fruit du hasard; c’est plutôt Apple qui se met à la saveur du jour: le Flat Design.
…Le quoi?
Le contexte
Avant de définir ce qu’est le Flat Design, prenons le temps de voir d’où il tire ses origines. Avec l’évolution des connaissances générales du public face aux technologies, il est normal que le langage utilisé pour communiquer des fonctions aux utilisateurs évolue en parallèle. Par exemple, au début, les touches de fonctions des claviers des premiers ordinateurs devaient être inscrites telles quelles (comme «shift» par exemple), tandis qu’aujourd’hui, le commun des mortels sait qu’une flèche pointant vers le haut signifie «majuscule». C’est une notion qui fait maintenant partie de la culture générale.
Lors de l’avènement des nouvelles technologies basées sur les écrans tactiles (téléphones intelligents, tablettes, nouveaux ordinateurs portables à écran tactile), tout un nouveau langage a dû être redéfini pour guider les utilisateurs sur les interactions que permettent ces nouvelles machines. Ainsi, tous les boutons étaient indiqués clairement à l’aide d’ombres et d’effets de profondeur, afin que l’utilisateur comprenne qu’il puisse «appuyer» sur ce bouton. Avec le temps, nous avons fini par développer des habitudes de navigation, puisque des standards se sont établis: les boutons de navigation se trouvent généralement en haut et en bas, le contenu est au milieu de l’écran, il y a un bouton physique qui mène à la page d’accueil, etc.
Cette nouvelle génération de produits «touch» se trouvant maintenant à maturité (le iPhone a maintenant 7 ans!) et les usagers étant désormais éduqués quant à leur fonctionnement, certains indices visuels sont devenus un peu désuets. Ainsi, au fil des derniers mois les designers en sont venus à progressivement redéfinir le langage visuel des appareils «touch». Cette métamorphose se fait également ressentir peu à peu sur les ordinateurs conventionnels et plusieurs sites Web, la convergence étant une nouvelle priorité chez les concepteurs d’applications, de sites Web et de systèmes d’exploitation.
Une définition
Bien qu’il n’existe pas une définition officielle du Flat Design, le terme étant lancé à droite et à gauche sans vraiment savoir qui l’a utilisé en premier, on peut résumer cette tendance en énumérant ses principales caractéristiques:
- Une absence de skeumorphisme, c’est-à-dire d’éléments simulant un objet réel (boutons, textures de bois, de cuir… etc.)
- Une emphase particulière sur le minimalisme et la simplicité des interfaces; on met la fonctionnalité à l’avant en éliminant les éléments superflus
- Une absence relative de profondeur; peu d’usage d’ombres et d’effets 3D
- Des typographies épurées (et ainsi assez souvent sans empattement)
Ces caractéristiques ne sont pas des règles absolues du Flat Design, mais bien un résumé des tendances. Ainsi, il est possible d’avoir du Flat Design qui incorpore certaines ombres stylisées, ou alors des polices avec empattement.
En lisant la liste des caractéristiques, on peut constater que le Flat Design est essentiellement une itération du minimalisme, qui lui existe depuis bien des années, mais appliqué à des interfaces utilisateur que l’on n’aurait pu imaginer il y a 50 ans.
Voici quelques exemples d’interfaces au design Flat:
Qui est à l’origine du Flat Design?
Comme avec toute nouvelle tendance, il est parfois difficile d’en retracer les pionniers avec précision. Ainsi, à défaut de pouvoir retrouver les créateurs de ce nouveau style en design d’interface, il est néanmoins possible d’en identifier quelques ambassadeurs.
Plusieurs applications mobiles ont commencé à incorporer des éléments de Flat Design au fil du temps, mais le premier géant informatique à prendre le virage Flat de façon démarquée a été Microsoft, ce qui peut paraître étonnant à priori, ce joueur ayant été plutôt conservateur en terme de design par le passé. Effectivement, leur système d’exploitation pour téléphones intelligents, Windows Phone, a été entièrement conçu avec des principes de Flat Design en tête. Le nouveau Windows 8 n’a pas tardé à suivre son petit frère, avec son interface «Metro», conçue principalement pour les tablettes.
Pendant ce temps, Google a modernisé plusieurs de ses applications et son système d’exploitation Android en s’inspirant également du Flat Design. Finalement, Apple a sorti son iOS 7, refait à neuf avec une touche de Flat, ce qui a confirmé l’importance du Flat Design comme mouvement majeur dans le design d’interfaces (même si ce n’est pas totalement du Flat Design; malgré plusieurs éléments caractéristiques du Flat Design, les designers chez Apple ont introduit plusieurs effets de profondeur dans leur OS).
À ce stade-ci, il ne fait aucun doute que le Flat Design est ici pour rester. Il reste à voir comment ce style est porté à évoluer et si le public y sera réceptif. Vous, qu’en pensez-vous?
Sources:
C’est clairement la tendance actuelle, enfin initiée depuis déjà quelques années. Apple a pris un peu plus de temps pour y venir mais au moins iOs7 a le mérite de clairement changer l’interface (qui vieillissait peut-on dire).
A savoir que Microsoft avait commencé la transition avant Windows Phone avec les baladeurs Zune.
Merci Gabriel pour ce texte bien écrit. Pour ce qui est de mon opinion face au flat design, je trouve que le tout vient parfois à manquer d’affordance, c’est-à-dire que seul les habitués comprendront les actions à poser. De plus, bien que je fasse partie de l’école de pensée du ‘less is more’, je me questionne sur l’accessiblité de certains éléments. En effet, la délicatesse de certains éléments ne semble pas prendre en compte la facilité à percevoir tous les détails des éléments graphiques.
Merci pour vos commentaires!
@Amocode:disqus: Bon point, Microsoft a effectivement commencé à intégrer du flat design avec le Zune bien avant Windows Phone ou Windows 8! En fait, le Zune, de par faible notoriété (le iPod dominait le marché à l’époque), était en quelque sorte le « lab » où Microsoft pouvait expérimenter un peu plus que par le passé, et ainsi prendre plus de risques. C’est d’ailleurs avec le Zune ainsi que le Xbox qu’on a commencé à voir un Microsoft prêt à tenter de nouvelles choses un peu plus audacieuses qu’auparavant.
@v_ronique_p_renaud:disqus: Merci! Je suis d’accord avec ton opinion: je suis également un adepte de minimalisme, mais il est vrai qu’il manque parfois de « feedback » dans des interfaces flat, ce qui fait qu’on finit parfois par être un peu perdu (si moi j’ai parfois du mal à m’y retrouver, j’ai peur de ce que ça va donner avec mes parents et leur iPad mini!). Malgré qu’elles soient peu aimées par les temps qui courent, les ombres ajoutent un élément de profondeur et de hiérarchie qui aide à distinguer les éléments affichés. Par contre, je crois que les bons designers peuvent trouver d’autres façons de guider les utilisateurs par des indices propres au flat design (par exemple par des animations fluides, des codes de couleurs, etc).