Le Skeuomorphisme

Que vous soyez curieux ou designer aguerri ou développeur de sites web ou d’applications ; adepte de Linux, Mac IOS, ou encore Microsoft Windows, vous avez peut-être entendu parler du keuomorphisme et de son histoire. Cette tendance n’est pas nouvelle, il s’agit d’un concept graphique présent depuis plusieurs années mais discret et peu partagé, mais il serait devenir l’une des icônes du style UX design ; et c’est pourquoi je me dois de vous partager quelques points par rapport à cela. A votre tour, n’hésitez pas, share it !! 

1. Qu’est-ce qu’un skeuomorphisme ?

En termes simples, un skeuomorphisme dans la conception digitale est une représentation d’un objet physique sur un écran. Pour comprendre comment il s’intègre dans le design de l’expérience utilisateur (UX), faisons un très court (promis !) détour par les origines des skeuomorphes.

Historiquement, un skeuomorphe est toute représentation d’un élément physique qui utilise un matériau différent de celui de l’objet réel lui-même. Le mot a commencé à être utilisé vers les années 1890 pour décrire les représentations ornementales d’éléments dans l’art et l’architecture. Une gravure sur une poignée de porte ou une peinture sur une poterie qui ressemble à un objet réel serait considérée comme un skeuomorphe.

Les skeuomorphes sont entrés dans la réalisation de produits bien avant l’explosion de la réalisation numérique. Un exemple classique est une bouilloire électrique qui reprend la forme d’une bouilloire traditionnelle. Il n’y a aucune raison fonctionnelle de conserver cette forme, puisque le mécanisme de chauffage est différent.

Mais comme la plupart des gens ont appris à un moment ou à un autre à utiliser une bouilloire traditionnelle, la forme fait maintenant allusion à la fonction du nouveau produit et le rend plus facile à utiliser. Elle offre des possibilités similaires à celles d’une théière traditionnelle.

Notez que le skeuomorphisme est une considération qui se situe à l’intersection de la conception UX et UI.

2. Les skeuomorphes dans la réalisation : Une pièce en quatre actes

1. Le Skeuomorphisme comme héros

Le Skeuomorphisme est devenu encore plus central dans la réalisation lorsque les ordinateurs sont devenus des produits de consommation. Les éditeurs de logiciels ont développé l’interface utilisateur graphique afin que les users puissent cliquer sur des boutons et des menus, plutôt que de devoir entrer des commandes directes dans un terminal.

Pour aider les utilisateurs à comprendre comment interagir avec cette interface, les concepteurs se sont tournés vers des métaphores du monde réel comme les skeuomorphes. Pensez à la corbeille/récupérateur de votre bureau, aux dossiers qui organisent votre travail, voire à la métaphore du bureau elle-même !

Nombreux sont ceux qui attribuent à Apple le mérite d’avoir porté le design skeuomorphe à un niveau supérieur. Apple est généralement considéré comme un pionnier de l’expérience utilisateur numérique, et les skeuomorphes en font partie. Steve Jobs était un champion du skeuomorphisme en tant que moyen d’aider chaque utilisateur à interagir avec les produits de manière plus intuitive. C’est à lui que revient le mérite d’avoir introduit la métaphore du bureau auprès du grand public, ainsi que des commandes à l’aspect réaliste pour tout, d’iTunes aux calculatrices.

2. La foule en colère de Skeuomorphic Pitchfork

D’accord, il n’y a pas eu de véritable foule en colère brandissant des fourches digitales (pour autant que je sache, du moins). Cependant, beaucoup de personnes dans le monde de la technologie ont fini par en avoir assez de l’utilisation massive du skeuomorphisme dans la conception d’interfaces, et une réaction négative s’est produite au milieu des années 2000.

La rumeur veut que Scott Forstall, d’Apple, ait même reçu la hache métaphorique en raison de son engagement inébranlable envers le skeuomorphisme après la mort de Steve Jobs.

L’un des principaux arguments contre le skeuomorphisme était qu’il n’était pas le moyen le plus efficace de communiquer des informations. Dans les années 2010, l’interface d’un iPad utilisait une illustration vivante d’une étagère avec de véritables couvertures de livres pour donner vie aux ebooks. Bien que la métaphore visuelle ait fonctionné, elle a sacrifié à la fois la lisibilité des titres des livres et le nombre de livres qui pouvaient tenir sur l’écran.

Les opposants au design skeuomorphique ont fait valoir que ces compromis n’en valaient pas la peine, car les users n’ont plus besoin d’une étagère réaliste avec des livres pour comprendre comment cliquer sur un ebook. Et ils n’avaient pas tout à fait tort.

3. Le design plat

En réponse à l’utilisation excessive des skeuomorphes, les 8 à 10 dernières années ont vu l’essor d’une approche de réalisation moins réaliste appelée « flat design ». Le design plat remplace les composantes, les ombres et d’autres éléments plus réalistes par des formes et des boutons bidimensionnels. Les défenseurs de la réalisation plate soutiennent qu’elle permet une conception d’interface plus efficace, plus simple et plus élégante. Le design plat est basé sur un système de grille classique qui permet de rendre les interfaces plates ordonnées et belles.

Certains sites web utilisent une disposition en tuiles qui est devenue synonyme de réalisation plate. Les tuiles d’images en 2D deviennent des points de départ pour différentes fonctionnalités, et toutes les composantes de la page sont disposées à plat les unes contre les autres, sans aucune dimension.

Le plus plat des designs plats peut toutefois poser quelques problèmes d’utilisation. Le Nielsen Norman Group, l’une des principales voix dans le domaine de la recherche sur la convivialité, a effectué des recherches qui montrent que les users ont parfois du mal à naviguer dans les interfaces qui utilisent un design purement plat. L’un des problèmes observés est que les utilisateurs ne peuvent pas toujours savoir quelles composantes de l’écran sont interactives (c’est-à-dire cliquables).

Cela conduit à une approche de déminage dans laquelle chaque utilisateur passe la souris sur tout l’écran, à l’affût du moment où le curseur se transforme en main. Donc, si l’efficacité est votre critère de mesure, vous avez probablement besoin d’une combinaison de design plat et skeuomorphique.

4. Flat 2.0

Plus récemment, les gens ont retrouvé le chemin d’un juste milieu : un design largement plat avec quelques traits du monde réel pour aider chaque utilisateur en cas de besoin. NNGroup recommande que si vous utilisez une approche de réalisation plate, c’est une bonne idée d’inclure quelques composantes réalistes minimales. Par exemple, les ombres peuvent aider les users à comprendre quand un élément est « devant » un autre et suggérer l’interactivité.

Les skeuomorphes jouent également un rôle important dans ce paysage plat 2.0, mais ce rôle est plus discret que par le passé. Les concepteurs doivent faire preuve d’intelligence et de stratégie dans leur utilisation des skeuomorphes.

Le Material Design de Google montre comment des ombres subtiles peuvent améliorer la convivialité.

Le Material Design de Google est un excellent exemple de cette approche qui consiste à utiliser des formes plates avec des indices visuels subtils. Les ombres subtiles illustrent comment « les formes peuvent diriger l’attention sur des éléments importants et montrer comment les surfaces sont liées les unes aux autres. »

3. Les meilleures pratiques du Skeuomorphisme : Les règles de la route du Skeuomorphisme

Quand et comment devez-vous utiliser les éléments de réalisation du Skeuomorphisme pour obtenir un effet maximal ? Voici quelques lignes directrices.

N’abusez pas des skeuomorphes. Trop d’objets peuvent encombrer et compliquer une interface. Une trop grande importance accordée au réalisme peut également créer des problèmes de convivialité, comme dans l’exemple de l’étagère Apple. Choisissez donc judicieusement vos emplacements.

Remplir une fonction. D’un point de vue UX, chaque élément skeuomorphe doit favoriser une interaction plus fluide avec l’utilisateur. NNGroup distingue même le skeuomorphisme qui « soutient une métaphore pour aider les utilisateurs à comprendre une interface » du réalisme purement esthétique.

Ne pas compliquer les interactions connues. Les skeuomorphes doivent rendre les interactions complexes plus simples, et non l’inverse ! Si vous concevez une fonction commune, laissez les Skeuomorphes en dehors de celle-ci. Réservez-les aux interactions nouvelles ou déroutantes que les users pourraient ne pas connaître. L’interface de l’application Felt montre les problèmes potentiels d’utilisabilité que peuvent présenter les skeuomorphes.

Felt vous permet d’envoyer numériquement une vraie lettre à un ami. Le fait de vous faire toucher la partie adresse d’une image d’enveloppe pour ajouter un contact iPhone est une façon mignonne d’étendre la métaphore, mais cela pose un problème potentiel d’utilisabilité en compliquant une tâche autrement banale.

 Utilisez la magie. Le monde digital n’est pas contraint par les limites du monde réel, alors faites en sorte que vos objets numériques soient meilleurs que les éléments réels qu’ils représentent. Cette vidéo montre comment vous pouvez rendre une montre skeuomorphe meilleure qu’une montre réelle en vous assurant que l’aiguille des minutes n’arrive jamais devant une étiquette importante. Il suffit de concevoir le problème ; cela pourrait même être cathartique !

Skeuomorphisme dans le design : Emballage

Les utilisateurs n’ont plus besoin de skeuomorphes pour former des métaphores élaborées pour chaque action qu’ils peuvent entreprendre dans un environnement digital. L’approche plate du design a apporté de grandes améliorations, mais le design skeuomorphique peut toujours être un outil très précieux pour aider les users à comprendre les intéractions clés. En l’utilisant à bon escient, vous améliorerez sans aucun doute votre jeu de réalisation et la convivialité de votre produit.

4. Le skeuomorphisme en rétrospective

Si la conception plate et les tendances graphiques et visuelles depuis 2013 peuvent sembler plus jolies et préférables à ce qui a précédé, nous n’aurions jamais pu mettre en œuvre une telle conception sans les bases établies par le skeuomorphisme. Il est logique que les technologies et les designers émergents utilisent le skeuomorphisme dans leurs conceptions pour nous ancrer à des analogues plus familiers. Le design skeuomorphique, au sens des interfaces antérieures à iOS 7, a peut-être dépassé sa date de péremption, mais tous les concepteurs devraient connaître son rôle important dans la conception UX/UI en ligne.