Skeuomorphisme contre flat design : un débat qui n’a pas lieu d’être

Anthony Nelzin-Santos |

Alors que l’on discute beaucoup de l’influence que pourrait avoir Jon Ive sur iOS 7, on oppose souvent « skeuomorphisme » et « flat design ». Cette opposition a pourtant peu de sens : le skeuomorphisme n’est pas qu’un élément de design et peut tout à fait être utilisé dans le cadre du flat design.






Question piège : parmi ces trois exemples, quelle calculatrice est skeuomorphique ?




La réutilisation d’un élément essentiel à un ancien objet par un nouvel objet peut être purement ornementale, mais elle ne devient un skeuomorphe qu’en ayant une utilité. Pour George Basalla, spécialiste d’histoire culturelle et d’histoire des sciences, un skeuomorphe répond à un besoin de continuité et de familiarité : la plupart des premiers appareils électriques reprenaient la forme de leurs équivalents traditionnels. Pour Donald Norman, spécialiste des sciences cognitives, un skeuomorphe doit aussi répondre à un problème d'affordance et doit donc aider à suggérer l’utilisation du produit qu’il intègre.



Le « problème » d’Apple n’est pas l’utilisation de skeuomorphes, mais au contraire son éloignement progressif de ce qui constitue un skeuomorphe selon ces définitions. Les fonctions « calendrier », « carnet d’adresses » et « bloc-notes » du Mac n’ont gagné ni en familiarité ni en affordance en mimant leurs équivalents tangibles. Elles reprenaient déjà suffisamment d’éléments indispensables et ne suggèrent pas plus leur utilisation aujourd’hui qu’hier.






Le remplacement de l’aluminium brossé par une couverture ne modifie en rien le fonctionnement général du carnet d’adresses d’OS X : ces changements cosmétiques ne relèvent pas du skeuomorphisme.




L’interface graphique et la métaphore du bureau popularisées par Apple sont des triomphes du skeuomorphisme qui ont précédé et consacré la transformation des espaces de travail, GarageBand reprend des éléments d’instruments de musique pour faciliter la création musicale. Mais on n’a jamais vu d’objet en cuir servant à localiser des amis, la bibliothèque d’iBooks est trop peu dense en informations et souvent trop peu ergonomique, la bande magnétique de Podcasts ne fonctionnait pas comme une bande magnétique mais était purement décorative : le photoréalisme n’est pas le skeuomorphisme.






L’emploi de cuir dans Localiser mes amis sert uniquement à former une famille d’apps Apple visuellement similaires, mais n’apporte absolument rien sur le plan fonctionnel. On peut néanmoins le considérer comme du skeuomorphisme si on le considère sur le plan psychologique, une réflexion rare : chaud et accueillant, il peut permettre de repousser l’angoisse que peut générer la géolocalisation permanente.







L’application Kindle n’emploie pas de bois, mais n’est pas moins facile à comprendre que l’application iBooks : les textures sont ornementales, mais n’ont pas forcément de fonction réelle — contrairement à l’animation de page tournée, un parangon de skeuomorphisme seulement gâché par le fait que l'épaisseur du livre ne varie pas selon sa longueur et l'avancement de la lecture.




Le désir d’ornementation prend parfois le pas sur l’impératif fonctionnel. On retrouve le problème de la dissociation des éléments constitutifs du design que sont l’art et l’application, aujourd’hui réglé par leur unification sous l’égide de Jon Ive. Les principes de son maître à penser Dieter Rams forment même une excellente définition du skeuomorphisme : il rend un produit utile et compréhensible et doit être « honnête ». Sa tâche sera donc d’éliminer les incohérences introduites par la déviation de la signification du mot « skeuomorphisme » et de retrouver l’excellence d’Apple dans le domaine.






La très grande richesse, pour ne pas dire complexité, de GarageBand est résolue par l’emploi systématique de skeuomorphes.




Et il ne le fera pas forcément en écrasant toutes les petites fioritures d’iOS à grands coups de rouleau compresseur : puisque le skeuomorphisme n’est pas une esthétique mais un mode de conception des interfaces, il est parfaitement compatible avec la tendance actuelle d’un design plus plat. Windows 8 regorge de skeuomorphes suggérant la fonction ici d’un bouton (une corbeille pour la suppression par exemple), là d’une icône (un reflex pour l’appareil photo). Letterpress vous fait comprendre qu’il est un jeu de lettres en évoquant les tuiles du Scrabble et qu’une partie a été supprimée en évoquant les confettis de la même manière que Passbook rappelle les déchiqueteuses.






Letterpress est un parfait exemple de flat design, mais il comporte tout de même quelques exemples de skeuomorphes. L’animation de la tuile est à ce titre superbe : l’ombre donne du volume et l’impression que l’on saisit la lettre, les animations traduisent le mouvement.




Sans aller jusqu’au flat design, il est possible et même probable qu’Apple adoucisse les textures, aplatisse les gradients et lisse les ombres de ses interfaces : elles ne seront pas forcément moins chaleureuses, mais seront sans doute moins lourdes. Mais il est parfaitement exclu qu’elle tourne le dos au skeuomorphisme — elle pourrait même concevoir des interfaces empruntant encore plus de skeuomorphes parce qu’elles sont plus plates et donc moins familières et accessibles !






Podcasts offre peut-être un aperçu de la direction prise par Ive : la suppression du réalisme qui n’a pas d’utilité (le lecteur de bandes), l’adoucissement des textures (barres et contrôles), mais la conservation de certains repères skeuomorphiques (contrôles, curseurs, jaquette).




Réponse à la première question : la calculette d’OS X est bien skeuomorphique, mais celle de Google aussi. Soulver ne fait pas référence à la grille classique de boutons et à l’afficheur sur une ligne : même avec une interface en métal brossé, en cuir ou en moquette orange, elle ne serait pas skeuomorphique.

avatar damiendu83600 | 
Finalement apple va plus changer les textures .
avatar izoong | 
Bon article qui remet bien les choses à leur place
avatar CBi | 
Non la bande magnétique de la défunte app Podcast n'était pas simplement décorative : elle se déroulait vraiment d'un bobineau sur l'autre, et donnait ainsi une indication visuelle sur le temps d'écoute écoulé / restant.
avatar Francis Kuntz | 
Un debat qui n'a surtout pas lieu parce que le skeuomorphism ne veut rien dire en IT... http://www.readability.com/articles/kfrxhyzg And that's why I went to Prof O'Hara for comment. "What's being called 'skeuomorphic' is not at all skeuomorphic" O'Hara's position is clear. His belief is that the word is being misused en masse. "What's being called 'skeuomorphic' is not at all skeuomorphic," he contends. "They're kitsch visual metaphors, but they're not the unintentional side-effects of technological evolution. In every case in the Apple UI debate, a designer is consciously responsible for the metaphor. Might be bad taste, but that's all." Mais bon, vu que toute cette campagne sur le "skeuomorphism" est finance par Microsoft pour justifier leur OS en 3 couleurs et plat parce qu'ils ont jamais ete capable de faire quelque chose de bon avec les metaphores...
avatar Francis Kuntz | 
"Réponse à la première question : la calculette d’OS X est bien skeuomorphique, mais celle de Google aussi. Soulver ne fait pas référence à la grille classique de boutons et à l’afficheur sur une ligne : même avec une interface en métal brossé, en cuir ou en moquette orange, elle ne serait pas skeuomorphique." Non elle ne l'ait pas cf article au dessus. Ce n'est pas du skeuomorphims mais une metaphore. Et c'est utilise depuis le debut de l'informatique ex: les dossiers. Bref.
avatar Anthony Nelzin-Santos | 
@cbi : ça n'en demeure pas moins un simulacre (cf. Baudrillard, que j'aurais pu aussi citer, tiens), d'autant que tu ne peux pas utiliser les bobines pour remonter en arrière / aller en avant, mais que tu dois utiliser le curseur juste dessous. @Francis Kuntz : O'Hara a une définition très particulière, à laquelle je n'adhère pas (même si elle est extrêmement intéressante d'un point de vue conceptuel). D'où le fait que je ne le cite pas et que je cite par exemple Norman.
avatar Dr_cube | 
Je pense que ce qu'on appelle le skeuomorphisme dans le cadre des interfaces logicielles n'est pas équivalent à la métaphore. On file la métaphore du bureau pour l'interface desktop : on fait des analogies avec le réel (corbeille à papier, document, bureau). Mais le fonctionnement de ces objets n'est pas forcément reproduit. Pour moi le skeuomorphisme désigne plutôt un mimétisme dans le mode de fonctionnement. Les deux idées peuvent parfois se recouper, mais elles ne sont pas équivalentes. En tout cas j'ai trouvé cet article est très intéressant !
avatar Rigat0n | 
Article très intéressant. En tout cas je trouve qu'Apple et Microsoft sont toutes les deux allées trop loin dans leurs directions respectives. Il faut plus de sobriété chez Apple (Ive ?) et des interfaces plus riches chez Microsoft.
avatar Doctomac | 
Très bon article, c'est exactement ce que j'ai expliqué à un ami. Apple est, dans son historique logicielle, un pionnier du Skeuomorphisme contrairement à l'idée de dire qu'Apple a dérivé ces derniers temps vers ce principe d'interface. L'article cite le bureau mais on peut citer aussi : - la première calculatrice : http://www.guidebookgallery.org/pics/gui/applications/office/calculator/macos11.png - Apple CD audio player : http://www.guidebookgallery.org/pics/gui/applications/multimedia/cdplayer/macos753-1-1.png - les différents thèmes dans Mac OS 8 - QuickTime Player 4 : http://hallofshame.gp.co.at/index.php?file=qtime.htm&mode=original - Apple DVD player : http://screenshots.en.sftcdn.net/en/scrn/15000/15172/apple-dvd-player-3.jpg - iTunes 1.0 (cf l'écran LCD) http://www.tuaw.com/2006/09/14/itunes-from-0-0-to-7-0/ - et même Aqua dans OS X avec ses icônes photoréalistes, ses animations, etc. Donc effectivement, la dérive d'Apple ces derniers temps dans l'interface ce n'est pas le Skeuomorphisme mais plus un manque de sobriété dans certains éléments d'interface visuelle.
avatar SonnicProject | 
Très bon article ! :-) Je suis moi même designer et je suis d'accord il y a de l'incohérence ... Et il serait temps que l'interface devienne propre aux habitudes de l'informatique, avec comme repère un soupçon de skeuomorphisme à la Windows 8 UI ! Il y après a mon sens il y a un juste milieu entre le flat et le skeu qui serait bon de proposé ^^
avatar Mithrandir | 
@cbi : Tout à fait, on voyait très facilement ou on en était !
avatar Arthurapple | 
Bon article, personnellement j'adore le design skeuomorphes d'Apple
avatar 6ix | 
Je vous invite à lire l'article suivant de Matt Gemmell (développeur chevronné), qui aborde la question de fond sur ce sujet: http://mattgemmell.com/2013/05/12/tail-wagging/
avatar Aughta | 
Moui, hein ? Et pourtant les applications que je trouve les plus « belles » et à la fois fonctionnelles ce sont Twitterrific, Météo de Yahoo (sur l'App Store, pas celle en stock) et Letterpress. Mention spécial à Pocket Casts 4 qui devrait bientôt sortir sur iPhone (déjà présente sur Android, petits veinards). D'ailleurs, c'est simple, dans l'application Paper, sur iPad, ce que j'apprécie le moins c'est les « dossiers » en forme de Moleskine finalement… Pareil pour Things, j'adore Things, mais je trouve les détails cosmétiques inutiles, pourtant l'application fonctionne du tonnerre ! Flipboard, Byword, Documents, etc., il y a plein d'application qui ont une chouette interface, Apple devrait en prendre conscience et s'en inspirer, ou me laisser supprimer les applications par défaut. Si déjà il pouvait supprimer le reflet sur les icônes des apps.
avatar rikki finefleur | 
Je trouve que dans les exemples de calculatrice, les trois sont des faux-skeuomorphisme, enfin disons qu'ils recopient un design d'usage et de praticité. Les 2 premiers la calculette, le troisième celui des additions écolieres. Des usages et une praticité conçues au fil du temps et repris en informatique. Tout comme le format liste que l'on voit partout sur les mobiles. Si le design d'usage n'avait pas de nom autrefois, le temps l'a fait pour lui, comme par exemple les calculatrices qui ne sont qu'une reprise des anciennes machines d'encaissement et de comptage manuel. Chiffres en bas, opération sur le coté, lecture en haut.
avatar joneskind | 
Donc si j'ai bien compris, le skeuomorphisme n'est pas un problème d'esthétique mais de repères fonctionnels du réel dans un objet virtuel. Je comprends bien le concept, mais j'ai quand même un peu de mal à le mettre en pratique. Est-ce que la flèche du bouton Play d'iTunes est Skeuomorphe ? La flèche n'est que le logo qui était dessiné sur le bouton Play des premiers lecteurs k7, mais pas le bouton lui-même. La bande magnétique de podcast évoque autant la musique aujourd'hui que le boulier n'évoque la calculatrice. La disquette du bouton sauvegarde est devenu son propre logo, mais ne correspond plus à rien de familier - il faudrait bientôt la remplacer par un nuage. Est-ce qu'il suffit de mettre une texture de block-notes jaune avec le papier déchiré pour en faire un Skeuomorphe ? On comprend bien qu'une interface "flat" peut parfaitement être "skeu" (exemple de la calculatrice). À la lumière de cet article, skeu et flat ne s'opposent absolument pas. En fait, j'ai même l'impression que ça n'a tout simplement rien à voir. Le skeuomorphisme serait plutôt une ergonomie du réel (à l'instar des calques de Photoshop ou du fichier/dossier/bureau) alors que le flat design n'est qu'une idée esthétique, parfaitement compatible avec le skeu. On comprend donc que le skeuomorphisme c'est ce qui participe à rendre une interface intuitive. Ça n'empêche que j'en ai un peu marre de l'esthétique du réel de OSX/iOS - puisque ce n'est pas le skeuomorphisme qui pose problème - et qu'un peu de sobriété ne fera pas de mal.
avatar dambo | 
Un article conceptuel tiens ! Merci MacG, du fond, et bien écrit. Il y à plus qu'à attendre iOS7!
avatar Ali Baba | 
Soulver ne rappelle pas la calculatrice, en revanche il rappelle très bien les calculs sur papier. En ce sens, lui aussi est skeuomorphique.
avatar Armas | 
Quoi qu'il se passe de la part de Ive, tant que ca fait économiser de la batterie et du poids dans les applications, je suis pour à 100%. Le développement des applications toujours plus gourmandes et l'ajout quasiment systématique de publicités animées alourdissent de manière trop importante leur utilisation sur les anciennes générations de téléphones, ce qui est inadmissible. J'en suis bientôt à me demander si je ne transporte pas avec moi un lecteur de publicités, certaines fonctions ayant de plus en plus de mal à fonctionner normalement.
avatar damiendu83600 | 
@Armas : Ive n'est pas chef d'IOS , seulement chef des interfaces actuellement . Pour le moment c'est Craig Ferderighi le vice président software .
avatar Anonyme (non vérifié) | 
6ix : j'allais poster ce lien aussi :-) tu l'as découvert comment, si ça n'est pas indiscret ? (pour ma part, Twitter de @limi )
avatar rikki finefleur | 
rien a voir , mais ce soir sur arte un docu "Une contre-histoire de l'Internet" à 22h40
avatar Anonyme (non vérifié) | 
Dure à lire avec les terme technique ^^ Moi je souhaite que Apple arrête la copie de texture réel.
avatar damiendu83600 | 
Moi je trouve que le skeumorphisme faisait partie de l'identité d'Apple. En tout cas avec ce changement d'interface ils jouent gros . Mais en changent l'interface d'iOS ils vont bien devoir changer celle de Mac OS pour qu'il y ait une concordance de l'apparence non ?
avatar 6ix | 
@sunjohn: Tweet de... Matt Gemmell (que je suis sur Twitter, étant dev moi-même)
avatar nayals | 
Bravo Anthony ! :) Article très pertinent, qui répond justement à mes questions. Effectivement, ce serait terrible qu'Apple abandonne le skeuomorphisme au sens propre. C'est juste les textures qu'il faut changer je trouve...
avatar Manu | 
Au fait, sous NeXT la corbeille était représentée par un trou noir recycler. Est-ce du skeuomorphisme?
avatar Bruno de Malaisie | 
Encore un article dont on sort plus intelligents;) Merci MacG!!!!!!! MacG, pour ceux qui ont quelque chose entre leurs 2 oreilles;)
avatar Almux | 
La fonctionnalité est essentielle, bien sûr. Mais, l'esthétique change tout au plaisir que l'on peut ressentir dans son utilisation journalière. C'est ce qui a rendu le Mac si différent des PCs en DOS. Il est évident qu'en adoptant la froideur (frigidité?) du "design trend" actuel, et en éliminant l'aspect visuel "anecdotique" et/ou "photoréaliste" des écrans, c'est un retour en arrière vers l'âge "préhistorique" de l'informatique.
avatar pecos | 
Très bon article, macG, sur la forme. Mais sur le fond du débat c'est pas loin d'être passablement hors sujet. En effet, ce qui nous occupe en ce moment, c'est de savoir si Apple va abandonner le design texturé pour un design plat. Et, évidemment, lors de ce débat, un shadock de service (pourquoi parler simplement quand on peut compliquer son discours...) a déterré le terme "skeuomorphique" dont on se contrefoutait royalement, pour se la péter. (désolé, c'est tout l'effet que ça me fait) Donc, en effet, vous avez raison, le débat "skeuomorphe contre flat" n'a pas lieu d'être, mais franchement, ça, on s'en doutait. Le choix entre texturé ou plat, par contre, est autrement plus intéressant. Et il ne faudrait surtout pas occulter celui là sous prétexte que quelques rédacteurs pédants s'amusent à utiliser des termes à tort et à travers. Parlez français simplement, sans fioritures, sans termes complexes, sans anglicismes, et vous verrez que vous n'aurez pas besoin de ce genre d'article. Sur le fond : personnellement, je me méfie comme de la peste de ceux qui veulent toujours plus de sobriété. La zénitude et l'attrait pour un design le plus plat et austère sont en général le signe manifeste d'un vide sidéral de la pensée. Je veux dire qu'à choisir, je préfère le mauvais goût à l'absence de goût.
avatar r e m y | 
Et pour ceux qui veulent localiser leurs amis porteurs de cuir? ils peuvent considérer plan comme skeuomorphe affordable?
avatar Anthony Nelzin-Santos | 
@pecos : « Donc, en effet, vous avez raison, le débat "skeuomorphe contre flat" n'a pas lieu d'être, mais franchement, ça, on s'en doutait. » : justement, je n'ai pas l'impression que tout le monde s'en doutait, y compris parmi des gens très écoutés. D'où le fait que je sorte de mes gonds et ponde cet article depuis longtemps en gestation. Mais sur le fond, nous sommes complètement d'accord.
avatar pecos | 
Tu as raison, Anthony, je rouspétais juste contre le fait que tu sois obligé d'écrire un article pour remettre les pendules à l'heure. Et j'ai l'impression de ne pas être le seul a en avoir marre des termes à la mode... :-) Sérieusement : qui diable a sorti la première fois ce terme "skeuomorphique" ? Ça ne vient pas d'Apple, quand même ?
avatar Anthony Nelzin-Santos | 
@pecos : c'est un vieux terme. Dans son acception « évolutionniste », il est parfois utilisé par les historiens et les archéologues : je me souviens d'en avoir entendu parler pendant mes études pour la question de la datation de certains artefacts grecs (la reprise par une poterie de traits caractéristiques d'un autre style permet d'établir une « filiation »). D'après mes recherches, son sens glisse à partir de la mi-2009 via certains designers et il devient très commun sur les blogs à partir de la mi-2010 — avant la présentation de l'interface de Windows 8, ce qui exclut la piste microsoftienne.
avatar Laurent S from Nancy | 
Tiens plus haut on parlait des sauvegardes avec la disquette et le nuage. Si le choix d'une disquette pour représenter traditionnellement une icône de sauvegarde coule de source, pourquoi la plupart des solutions en ligne ont justement choisies un nuage ? Car j'ai beau réfléchir je ne vois finalement pas le rapport...
avatar Anthony Nelzin-Santos | 
@Laurent S from Nancy : parce que ce sont des solutions… dans le nuage (un mot qui ne désigne rien de nouveau, mais qui a été établi par de grosses campagnes de marketing comme pseudo-synonyme d'« en ligne »).
avatar fusion | 
le design plat de Windows phone est aussi intéressant, c'est un choix esthétique, peut etre un peu trop excessif à la longue. mais ce qui m'a interpellé dans cet article c'est le côté supposé plus léger des apps grâce à ce flat design. ça permettra peut etre de gagner un peu en mémoire, en fluidité, en réactivité...etc?
avatar pecos | 
@fusion... Pour te répondre au sujet de la lourdeur supposée des apps, voici mon avis de développeur : Ça fait des années qu'on a des CPU et des puces graphiques outrageusement puissantes qui sont aussi à l'aise avec des textures qu'avec des aplats. Ceci d'autant plus que les fameux éléments d'interface "plats" seront dans la plupart des cas des images, comme les éléments "texturés". Il n'y a donc strictement aucune différence (ou presque) de rapidité ou d'occupation en RAM à attendre d'un changement de design pour quelque chose de plus "plat". Il faut se rappeler qu'une app, ce n'est pas un site web : tout est en local et ça va très très vite à charger. Même mes propres apps qui sont "lourdes" mettent quelques dizièmes de secondes à charger toute l'interface. Et elles n'iraient pas plus vite avec des éléments graphiques plus plats.
avatar Lio70 | 
Pour ajouter au réalisme: un moustique écrasé entre deux fiches du carnet d'adresses. Oui je sais, je sors.
avatar jeanba3000 | 
Moof ! À bas le kitsch, vive le System 7 ! 8)
avatar colossus928 | 
Vos articles sont vraiment kewl.
avatar rikki finefleur | 
@Laurent S. Parce que le réseau externe et souvent le reseau internet a souvent voir toujours été représenté par un nuage dans les graphiques techniques. Cette iconographie a ensuite été reprise par les vendeurs de solution en ligne.
avatar r e m y | 
Avec tout ce qu'on stocke désormais dans le nuage, ça va finir par poser problème à la navigation aérienne! (oui je sais... je suis déjà dehors)
avatar Sic transit | 
Il aurait été intéressant de se pencher un peu plus sur l'origine du terme (qui existe depuis le XIXe siècle, selon Wikipédia) et qui – si mes souvenirs sont bons – était notamment utilisé en archéologie. Cela étant, l'article a le mérite de mettre en lumière le fait que la plupart des gens confondent "interface photoréaliste" avec "interface skeuomorphe"…
avatar Anthony Nelzin-Santos | 
@Sic transit : regarde donc mon commentaire quelques lignes au-dessus du tien…
avatar stéphane83 | 
Évidemment qui dit refonte esthétique d'iOS entérine celle d' OSX : vivement le mois de juin pour le meilleur ou pour le pire :)

CONNEXION UTILISATEUR