Flat design vs skeumorphisme: Le match !

Flat design vs skeumorphisme: Le match !


24 juin 2013  |   23 Comments   |  31 082 vues

Flat design contre Skeumorphisme: de quel bord êtes-vous ?

En matière de design graphique, et particulièrement dans le domaine du design d’icône, il existe deux grandes tendances qui occupent les discussions depuis plusieurs mois: « Flat design » vs « Skeumorphisme » !

On observe ce débat à travers les 3 grands acteurs que sont Apple, Google et Microsoft.
Commençons donc cet article à travers un petit sondage :

• Laquelle de ces icônes de « Vidéos » préférez-vous ?
test-icon-video-ios-vs-google

• Laquelle de ces icônes de « Agenda » préférez-vous ?
test-icon-agenda-ios-vs-google

• Laquelle de ces icônes de « Photo » préférez-vous ?
test-icon-photo-ios-vs-google

[toggle title= »Réponses »]

1 – Micorsoft Windows 8.
2 – Apple iOS 7.
3 – Apple iOS 6
4 – Google

[/toggle]

Skeumor-quoi ?

Le skeuomorphisme est un mot formé par la racine grecque skeuos qui signifie l’équipement militaire, mais aussi le costume, l’ornement, la décoration. En matière de design, il décrit un élément visuel dont la forme n’est pas directement liée à la fonction, mais qui reproduit de manière ornementale un élément qui était nécessaire dans l’objet d’origine, par exemple, des éléments d’interface reproduisant des objets physiques (cf: les textures de cuir, de papier, de bois…). Les exemples les plus connus sont les icônes d’IOS 6 comme pour la plateforme de jeux Game Center, le calepin Notes ou encore la Boussole2.

Il apparaît évident que le skeuomorphisme répond à un besoin de continuité et de familiarité. Déjà à l’époque de nos grands-mères, la plupart de leurs appareils électriques reprenaient la forme de leurs équivalents manuels. Il s’agit là de l’affordance, c’est-à-dire la capacité d’un produit à suggérer sa propre utilisation.

Dans un souci de simplicité, et subjectivité assumée, il est de mon devoir de vous informer que le « skeumorphisme » n’est pas mon ami. Il sera allègrement mis dans le même panier que les effets Web 1.0, 2.0, 3.0…

Maintenant, essayons de comprendre pourquoi l’arrivée du Flat-design réjouit tous les designers !

Flat design

Le flat design, à l’opposé du Skeumorphisme, prend le parti pris du minimalisme. Le flat design exclut tout effet de profondeur, d’ombre portée, de reflets. Il privilégie les grands aplats de couleurs, sans bordures, sans chichi… Les défenseurs du « design-plat » affirment que les interfaces graphiques ne doivent pas chercher à imiter « visuellement » les fonctionnalités existantes, mais se concentrer l’essentiel, trouver le plus court chemin pour transmettre une information afin de faciliter la navigation et optimiser la lisibilité. Less is more prends tout son sens avec le Flat-Design.

Avant d’aller plus loin dans l’analyse de ces deux courants, on peut se pencher sur nos trois cas d’école, Apple, Google et Mircosoft.

Le cas google

En 2011, Larry Page, Pdg de Google lance le chantier de la refonte de l’identité visuelle des produits et services de la firme de Mountain View. À partir de début 2012, commencent à apparaître les premières réalisations de l’équipe Chris Wiggins, le directeur de création en charge de cette refonte. Chris Wiggins a commencé à faire ses preuves quelques années auparavant en travaillant sur la conception de la fameuse barre de navigation noire que la société avait commencé à déployer en même temps que Google+.

Récemment, la charte graphique qui regroupe ce travail a été publiée. Il s’agit d’une véritable leçon de design, où le moindre pixel n’est jamais envisagé à la légère. Quand on connait l’histoire de Google, et comment ils ont su s’imposer grâce à une page de recherche toute blanche (no-design) face à la bavarde page de Yahoo, cette charte graphique minimaliste n’étonnera personne. La voici en détail :

Le cas Apple

Apple a une longue histoire avec le skeumorphisme. En travaillant sur leur première interface graphique, au début des années 80, et en introduisant le concept de « bureau » avec des icônes en forme de « dossier et de feuilles de papier », Steve Jobs et son acolyte ont durablement influencé le design d’interface. C’est d’ailleurs, en partie grâce à ce skeumorphisme qu’Apple est devenu l’un des leaders mondiaux 30 ans plus tard. Il faut rappeler qu’aux débuts de l’informatique, le concept d’interface graphique était totalement nouveau, et ces métaphores visuelles avec des objets anciens ont facilité la vie de millions de personnes !

Trente ans plus tard, force est de constater que les gens ont moins en moins besoin de repères visuels pour comprendre la fonction d’une icône. Apple semble s’en rendre compte et initie une timide transition avec sa nouvelle interface iOS 7. Probablement ont-ils raison de ne pas renoncer radicalement au « skeumorphisme » au risque de créer un effet de rupture avec leurs utilisateurs… L’exemple de Microsoft ( cf: ci-dessous) est passé par là !

ios7-vs-ios6-icons

Le cas Microsoft

Si l’intérêt pour le design semble assez récent chez Microsoft, on peut leur attribuer le mérite d’avoir rapidement rattrapé leur retard. Pendant longtemps, la firme de Redmond a privilégié la technologie au détriment du design. Les interfaces sont devenues complexes, et ont oublié les utilisateurs. À partir de 2010, l’heure du changement avait sonné. La refonte de Windows phone fut le premier chantier ouvert. Aujourd’hui, Microsoft propose une expérience utilisateur harmonisée entre ses différents produits, de Windows 8 à la Xbox, en passant par la suite Office. Le flat-design a envahi les interfaces de Microsoft, et malgré cette apparente simplicité, ces dernières ont largement été saluées comme une réussite exemplaire en matière de design.

Seul bémol, et pas des moindres, en créant une telle rupture, ils semblent avoir commis une erreur stratégique. En effet, presque 8 mois après un lancement en grande pompe, les ventes ne décollent pas. L’une des raisons avancées est que la nouvelle l’interface rebuterait bon nombre d’utilisateurs. Exemple de rupture symptomatique, le bouton « démarrer » ( qui sert en fait à éteindre !) avait légitimement disparu dans Windows 8. Mais, sous la pression des utilisateurs, il va se voir ressusciter à l’occasion de la prochaine mise à jour !

Il est probable que Microsoft ai fourni un bel exemple d’innovation de rupture raté. L’avenir nous le dira !

flat-designwindows-8.1

L’innovation de rupture

Petite digression autour de cette notion d’innovation de rupture. C’est une notion que l’on oppose à l’innovation classique dite incrémentale. En gros, quand l’innovation incrémentale se déploie dans un contexte connu en améliorant un produit ou service existant ( ex: l’invention de l’ABS dans le secteur automobile), l’innovation de rupture aime s’aventurer en terrain vierge.

L’aventure d’Apple en matière de téléphonie illustre bien le concept d’innovation de rupture. Steve Jobs avait développé l’Ipad, un projet qui devait lui permettre de lancer un nouveau type d’écran. Mais les premiers prototypes étaient décevants. Il confia alors son problème à un ergonome qui lui proposa la fonction de scrolling, permettant de faire défiler verticalement une page web avec son doigt. La navigation internet sur un petit écran devenait possible. Ce qui nous semble d’une évidente banalité, était à l’époque un élément de rupture majeure, tant est si bien qu’au lieu de lancer l’Ipad, Apple a lancé l’Iphone, avec le succès qu’on leur connait. La rupture a créé un nouveau marché pour Apple. Là où l’objet « Iphone » est une rupture, son interface l’est beaucoup moins visuellement. Le skeumorphisme remplit alors complètement son rôle de doudou visuel: il rassure l’utilisateur !

La rupture impose un renversement des habitudes, qui n’est accepté que si certaines conditions sont réunies.
On parle généralement de trois piliers en matière d’innovation: La créativité (génération de nouveauté), la valeur ( d’estime, d’usage, d’échange) et la socialisation (maitrise de la conduite du changement).

Dans l’exemple de « Windows 8″, la conduite du changement semble avoir été oubliée.

Flat design: Les raisons du succès ?

Outre que les utilisateurs d’écrans sont devenus suffisamment matures pour ne plus avoir besoin de « doudou » visuel, le succès actuel du flat-design peut probablement s’expliquer par un aspect plus technique.

La multiplication des formats d’écrans a donné naissance au Design Responssive. Vous savez, quand un même site s’adapte automatiquement à toutes les formes d’écrans. Dès lors, les éléments visuels doivent faire preuve de flexibilité. Exit les dégradés et les textures de fonds !

L’arrivée des web-fonts a également changé la donne. Jusqu’au début des années 2010, on était limité aux typographies système. Tout autre choix typographique passait par des images. Aujourd’hui exit les images, et vive les web-fonts !

Le Flat design s’inscrit dans cette tendance.

Les 3 influences du Flat-design !

Voici trois influences dont le Flat-design est issu :

Un design moderniste

Si le terme « Flat-design » s’est démocratisé depuis les dernières années, c’est pourtant un concept qui prend ses sources au cœur des années 30, avec l’école du Bauhaus. « Ne pas ajouter de détails superflus, se concentrer sur l’essence même de la fonction » voila le premier des commandements modernistes.

Merci le HTML5, sans qui l’influence de Le Corbusier ne pourrait pas se faire sentir aujourd’hui !

Un design international

Le style international (ou « style suisse ») est la deuxième influence du Flat-design. Particulièrement en matière de typographie, c’est un style qui met l’accent sur la lisibilité et l’objectivité. L’espace se divise en grille, la couleur s’utilise en aplat, la typographie est d’influence géométrique… Priorité au contenu et à la hiérarchisation des informations. C’est un style qui s’exprime à merveille dans les signalétiques aéroportuaires du monde entier (environnements denses en informations). C’est donc logiquement une approche qui fonctionne très bien avec les interfaces numériques, très denses en informations par nature.

Merci le CSS3, sans qui l’influence du Muller Brockmann ne pourrait pas se faire sentir aujourd’hui !

Le design du mouvement

Dans les années 60-70, des motions-designers comme Saul Bass ont rajouté une troisième dimension aux deux précédents concepts du design (cf: Modernisme et Style International). N’allez pas croire qu’il s’agit là d’un vulgaire effet de volume !
En travaillant avec le temps et le mouvement, Saul Bass anime les principes du design moderniste et du design international. Par animer, il faut entendre « donner la vie » ! D’un design qui peut être jugé froid et neutre, l’animation va introduit de la narration… et donc de l’émotion.

Cette troisième influence est d’ailleurs celle qui semble la moins utilisée. Ce sera assurément un axe de développement important pour nos futures interfaces graphiques.

Merci le Jquery, sans qui l’influence de Saul Bass ne pourrait pas se faire sentir aujourd’hui !

Flat-design: Effet de mode ?

Si l’approche du « Less is more » va évidement séduire la plupart de nos contemporains designers, il semble malgré tout évident qu’il s’agit aujourd’hui en partie d’un effet de mode. En 2008, en pleine apogée de l’effet « Web 2.0″, nous écrivions « Laisse c’est mort« , un article qui traitait des cycles de modes en matière de design. C’est un propos qui prend ici tout son sens, le voici :

« En matière de graphisme, comme en architecture, on oscille depuis des siècles entre deux voies… le purisme ou la surcharge (cf: Le Flat-Design ou le Skeumorphisme !). Si ces routes semblent imprévisibles, une seule constante : la voie de la surcharge est longue et progressive, tandis que la voie « minimaliste » est bien plus rapide et brutale !
Tout laisse à penser qu’au fur et à mesure du temps les choses se « chargent » de souvenirs, elles accumulent les couches de maquillages jusqu’à en devenir pompeuse, juste avant de revenir brusquement au minimalisme.

N’est-on pas passé du style gothique primitif, au gothique classique, puis flamboyant avant de passer brusquement au style renaissance en reprenant le dépouillement des canons antiques ?… puis l’histoire de continuer, le style renaissance de s’empâter peu à peu pour tendre vers le baroque… et pire encore le Rococo… avant de passer soudainement au style Classique (qui au regard du Rococo semble nu comme un ver ! )… architecture néoclassique [ …] victorienne, Art nouveau… puis nouvelle rupture avec le mouvement Moderne dans les années 20-30 ! …

Bref, en typographie l’histoire doit être à peu près la même… Les capitales Grecques, puis les onciales Romaines, les minuscules Carolines, puis les gothiques enluminées… rupture soudaine avec les humanistes Italiennes… Garamond… Baskerville… Didot… Walbaum… et nouvelle rupture avec le Futura de P. Renner vers 1927… »

C’est peut-être simpliste comme raisonnement… mais force est de constater qu’en l’espace de deux ans, tous les plus grands acteurs se sont convertis au minimalisme. Une rupture rapide est brutale (pour Micorsoft !).
En suivant cette analyse, on peut être sûr, au cours de la prochaine décennie, de revoir les « ombres portées » pointer leur nez… sur la pointe des pieds !

Et vous ? comment-vous voyez l’avenir ?




23 Comments:

  1. […] Skeuomorphisme d’Apple est menacé, mais Steve s’en fout : il révolutionne à qui mieux mieux avec son […]

  2. […] Flat design vs Skeuomorphisme, sur grapheine.com […]

  3. Delwiche dit :

    Chouette article,
    Pour ma part, j’aurais tendance à synthétiser les 2 approches et a établir un parallèle entre flat design et art abstrait et skeuomorphisme et hyper réalisme, si le flat s’apprivoise relativement bien en print web et hall de gare il l’est beaucoup moins en matière d’écrans réduit sur nos smartphones. Et si l’on s’extasie devant la finesse de cette typo et l’esthétique de cette icône tellement pur, ces situations prises isolément semblent convaincantes or dans l’expérience utilisateur globale, elle me parait franchement moins convaincante, ainsi sur les retina display de nos iphones, tout background un tant soit peu plus riche (autant dire toute photo) rend la lecture et la perceptions des icônes plus difficile que dans l’ancienne proposition graphique d’Apple, et pour peu que vous soyez un peu myope, là vous ne pouvez plus vous fier qu’aux intitulés des groupes icônes, le minimalisme prôner par Apple ce coup-ci ne me semble pas mûr, une tentative de rejoindre un effet de mode et non pas d’innover. Par ailleurs l’iconographie de ces milliers d’applications à peu prêt similaire dans une catégorie de fonctionnalités relèvera du casse-tête lorsqu’il faudra visuellement les différenciées et sortir du lot. Nous nous retrouverons avec tellement de synonyme visuels qu’il sera difficile pour l’utilisateur lamdba de se souvenir d’une application dans ce fatra de minimalisme tellement similaire. Je vous avoue ma déception pour ce flat design sur les smartphones, en rappelant que l’être humain appréhende le monde par ses yeux d’abord et son intellect ensuite, la reférence au réel simplifie la perception de l’intellect, favorise la mémorisation et l’efficacité pour retrouver ce que l’on cherche rapidement. L’abstraction dans ce cas-ci amène à une interprétation de l’intellect trop longue pour une recherche mobile qui se doit d’être la plus rapide possible. Sans doute tel le pendule qui oscille à travers le temps et les éternels retours, gageons que les prochaines prochaines version de flat design (qui ne s’appellera peut-être plus flat…) proposera un heureux mariage entre les extrêmes.

  4. Trasca dit :

    flat design = horrible, nul, moche, fiasco, raté, ânerie, bagatelle, ballot, bête, bêtise, broutilles, caducité, cancre, cancrerie, défaut, déficience, faiblesse, futilité, idiotie, ignorance, imbécillité, incapable, incapacité, incompétence, ineptie, inexistence, inintelligence, insuffisance, invalidité, manque, moins que rien, néantise, non-valeur, nul, nullard, pénurie, rien, ringard, sottise, stupidité, vide, zéro

  5. ergonoblog dit :

    Excellent article, très instructif et très bien documenté. Bravo.

  6. DDZ dit :

    Merci pour cet article que je viens de découvrir et qui a le mérite de vouloir expliquer ce changement de mise en forme. Personnellement, je trouve que le style plat est comme son nom l’indique et à l’image du monde actuel : plat, pâle, fade, dépourvu de nuance et sans profondeur, se contentant du minimum… bref, ce n’est pas brillant !
    Cela a été mis au goût du jour également sous GNU-Linux, particulièrement depuis l’arrivée de GTK 3. Heureusement qu’il y a le thème « Zukiwi » (http://www.deviantart.com/art/Zukiwi-313347909), merci à son auteur.
    Quant à l’explication « se concentrer sur l’essentiel, trouver le plus court chemin pour transmettre une information afin de faciliter la navigation et d’utiliser au mieux la lisibilité » : à ce que je sache, le skeuomorphisme ne nous a jamais empêché de comprendre à quoi pouvait servir tel élément d’une interface graphique ni mis en difficulté lors de l’utilisation d’un logiciel ou d’un site.
    Ce phénomène de mode me fait penser à un autre : le pédantisme pseudo-moderne à employer des anglicismes au lieu d’utiliser, correctement qui plus est, sa langue maternelle. Non seulement ces emprunts sont inutiles mais ils engendrent la confusion en livrant des faux-amis et des contre-sens. En conséquence, il n’y a plus de précision, plus de variété, plus de nuance. Tout cela, je pense, est lié mais à chacun sa vision du monde, n’est-ce pas ?

  7. Merlin dit :

    Article très intéressant.
    Aucun des deux mouvements ne rassemble toutes les qualités. Mais en terme d’utilisabilité et d’accessibilité le Flat design me semble un peu plus indiqué. Ces questions ne valent rien sans avoir défini le contexte. On sort d’une époque ou les sites internet en grande majorité ne respectaient pas les bases de l’ergonomie. Le design prenait une place importante puisqu’il était directement décliné du print.
    Les 12 règles d’ergonomie d’Amélie Boucher, les règles d’accessibilité du W3C alliés au flat design renvoient à l’objectif premier des sites internet : faire correspondre un objectif clair à une interface optimisée pour l’utilisateur. Séduire est moins important que convertir. Une fois que les méthodologies de conception seront bien en place et que les missions essentielles des sites seront validées, il sera temps de redécouvrir des styles différents.

  8. […] Pour comprendre un peu mieux le succès du Flat Design je vous conseille de lire ce très bon article : Flat design VS Skeulmorphisme sur Grapheine. […]

  9. Ralayca dit :

    Merci pour cet article stimulant.
    A mon avis, flat ou skeuomorphism, ce qu’il faut garder en tête, c’est que le monde est en perpetuel changement et tant mieux, car inértie est synonime de mort, ceci est valable dans tous les domaines. Ceux qui sauront en tirer les meilleures parties sont ceux qui savent observer avec calme et humilité le fruit de l’évolution, qu’il soit bon ou mauvais, en tentant toujours compte du contexte. Sortir du fanatisme, et se concentrer sur l’éssentiel à nos besoins, apprécier et valoriser la force de chacune de ses tendances pour vraiment évoluer.

  10. […] : Mark Boulton, UXPin, Blog du Modérateur, Medium, Gizmodo, Grapheine, UX Companion […]

Leave a Reply