Vous l’ignoriez ? Et pourtant vous avez la preuve sous les yeux tous les jours. A force de le voir, vous êtes même devenus responsable de sa mort ! De quoi ? Je parle de design et plus particulièrement du Skeueumorphisme. Notre façon de représenter les objets a considérablement évolué.

Prenons un exemple. Si vous deviez choisir une icône de micro-ondes pour votre nouveau site internet, quelle icône parmi celles-ci-dessous utiliseriez-vous ?

micro onde skeuo
micro onde flat

 

 

 

Aujourd’hui, en 2015, probablement la seconde. Parce qu’elle parait plus moderne, plus légère, plus suggérée, voire plus universelle. Sur la première, l’icône représente UN modèle de LA marque LG, la deuxième c’est n’importe quel micro-onde.

La première icône est du skeuomorphisme. Le mot provient du grec « Skeuos » (l’ornement, la décoration) et de « morph », la forme. La forme reproduit de manière ornementale l’objet qu’elle décrit. Pour représenter au mieux un objet, le skeuomorphisme se doit d’être réaliste et pour lui donner du volume, on rajoute souvent des ombres, des effets de brillance (glossy).

La deuxième icône est du flat design (design plat). Cette façon de représenter les objets s’est imposée depuis 2013, en partie depuis qu’Apple l’a appliqué sur ses applications iPhone. Lors du passage de iOs 6 à iOs 7, toutes les applis natives du téléphone ont perdu leur « complexité », leur détails, leurs reflets et leurs textures.
L’esthétique est minimaliste pour rendre le message plus simple, plus lisible. Même sur ce dernier point, tout le monde n’est pas d’accord.
iOS-6-vs-iOS-7-Icones2

Arrivé en retard dans le monde des smartphones, Windows, au moment du lancement des WindowsPhone et de Windows 8, avait créé la sensation avec ses tuiles : des applications en forme de grands carrés de couleur. Certains utilisateurs se révélaient très déconcertés par ces immenses icônes qu’ils jugeaient peu intuitives: fallait-il cliquer sur la tuile ou l’icône, double-cliquer?. Pourtant le design de Windows était réussi, c’est juste que les utilisateurs n’avaient pas eu le temps de se familiariser.

start-screen

« L’affordance »

Cet anglicisme provient de « to afford » qui signifie offrir. Il désigne la capacité d’une chose à suggérer sa propre utilisation. On parle aussi d’intuitivité ou de potentialité.
L’avantage du skeuomorphisme, c’est justement son affordance. Pour déverrouiller son iPhone, un enfant comprenait immédiatement que le bouton devait glisser de la gauche vers la droite. Le bouton, la flèche, le rail, tout suggérait que ce bouton devait glisser de gauche à droite.

slidetounlockAvec le nouveau design de « slide to unlock », le texte clignote de gauche à droite, la fonction reste la même mais n’est plus aussi fortement suggérée. Aujourd’hui d’ailleurs, la flèche a disparu et le texte n’apparaît même plus. Le minimalisme est tellement extrême que plus rien n’indique la fonction.
slidetounlock2

Design de l’habitude

Le flat design ou le minimalisme ne sont pas nés avec iOS 7 évidemment mais le système d’exploitation d’Apple a suscité un large débat lors de sa sortie en 2013. Avec son influence énorme, il a entraîné dans son sillage une tendance de fond qui s’est généralisée. Le mouvement minimaliste existe depuis les années 1960 et s’est exprimé à travers la sculpture, la peinture, l’architecture.
En réalité, le flat design a surtout profité du « responsive design » (le design adaptatif), à savoir le fait que désormais le contenu Web doit être compatible sur des supports de tailles différentes: de l’ordinateur grand écran jusqu’au plus petit smartphone, en passant par les tablettes, vous devez voir les mêmes informations essentielles.

responsive flat responsive skeuo

Avec ces deux images, vous avez à la fois le concept de design responsive et de skeuomorphisme/flat design.

Le poids des images

Le flat design a un gros avantage sur le skeuomorphisme, c’est qu’en l’absence d’effets lumineux, de reliefs, les images pèsent beaucoup moins lourds (quelques Ko VS quelques Mo). Et quand on sait que le poids des images a une grande influence sur la rapidité d’affichage d’un site ou d’une application, que tout est plus attractif avec des photos, vous comprenez immédiatement l’intérêt de réduire le poids global d’une page Internet.

Le flat design est une tendance, une mode qui répond également à des besoins technologiques. Mais comme souvent, trop de minimalisme tue le minimalisme. Le risque est que toutes les icones se ressemblent, qu’elles manquent de personnalité.
Et si vous voulez vous faire votre propre opinion, vous pouvez jeter un coup d’oeil sur la carte postale suivante: flat vs realism.