Le document explore le concept de skeuomorphisme en design, qui utilise des références visuelles pour évoquer des objets réels afin d'enrichir l'expérience utilisateur. Il discute également des limites du skeuomorphisme dans le numérique, comparant son approche avec l'authenticité des designs modernes, comme ceux de Microsoft et Android. Enfin, il soulève des questions sur l'évolution nécessaire vers des designs plus créatifs et adaptés aux technologies contemporaines.

1. Donnez votre avis !
Depuis votre smartphone, sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures
!!!
Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les TechDays
http://notes.mstechdays.fr

2. Le skeuomorphisme et
l’approche de Microsoft
Michel Rousseau
Evangéliste UX
Microsoft France
@rousseau_michel
http://blogs.msdn.com/b/designmichel/
Design

3. Chapitre 1
DÉFINITION
Design

4. Du grec Skeuos, équipement, ornement,
costume, armure, …
et du grec Morphé , la forme.
Design

5. Le skeuomorphisme est un concept de
design qui définit graphiquement un objet
non par sa fonction primaire, mais par un
tropisme incluant un référentiel
existant, une métaphore au réel, une
représentation figurative.
Design

6. Globalement, c’est imiter un élément du
réel et l’associer à une fonction qui s’y
rapporte cognitivement.
Design

7. Chapitre 2
QUELQUES EXEMPLES
Design

8. Le rivet du jean
Et les toiles des colons. De coton.
Design

9. L’ampoule
Comme référent imagé.
Design

10. Le filtre des cigarettes
Et le maïs.
Design

11. Les enjoliveurs
Le charme de la diligence.
Design

12. Spider cochon
La référence culturelle.
Design

13. Le sabre laser
L’artefact technologique.
Design

14. Avez-vous déjà vu ça?
Design

15. La borne d’arcade
L’argument commercial.
Design

16. La cigarette électronique
Qui fume comme une vraie.
Design

17. Le dock Ipod
Pour les intérieurs qui se respectent.
Design

18. La souris qui pointe
Pour les geeks, les vrais.
Design

19. Le tableau de bord
Qui fait tout comme avant.
Design

20. Chapitre 3
LE GESTALT
Design

21. Le skeuomorphisme est basé sur le
“Gestalt”.
Le Gestalt est l’étude de la psychologie de
la forme, c’est à dire l’impact de l’image
mentale que nous nous faisons d’un objet,
et ses corollaires.
Design

22. La pomme
Le syndrome Blanche-Neige.
Design

23. La pomme v2
.
Design

24. Le retour du cochon
.
Design

25. Le retour du cochon en vrai
.
Design

26. Chapitre 4
L’AFFORDANCE
Design

27. Le skeuomorphisme, c’est le contraire de
l’affordance ?
Design

28. L’affordance est un concept de design qui
définit que la conformation d’un objet
définit à elle seule son usage.
Design

29. .
Design

30. .
Design

31. .
Design

32. .
Design

33. ?
.
Design

34. L’affordance ne fonctionne bien
qu’avec des concepts d’utilisation
simples (visuel/réaction).
Le skeuomorphisme permet
d’enrichir l’affordance de références
culturelles. Voire, de se substituer à
elle.
Design

35. Chapitre 5
OUI, MAIS DANS LE NUMÉRIQUE
?
Design

36. Charité bien ordonnée
commence par soi-même :
L’exemple Microsoft
Design

37. .
Design

38. L’exemple Android
Design

39. .
Design

40. L’exemple Apple
Design

41. .
Design

42. .
Design

43. .
Design

44. .
Design

45. Oui, mais ça,
c’était avant Modern UI…
Design

46. Modern UI est authentiquement
numérique.
On évite les métaphores au réel.
On crée un univers singulier.
La beauté et la poésie sont
intrinsèques.
Design

47. Chapitre 6
ET ÇA, C’EST BIEN?
Design

48. Ok.
Mais en quoi l'approche
authentiquement numérique
est-elle meilleure que celle du
skeuomorphisme?
Design

49. Le skeuomorphisme est un
bon raccourci symbolique.
Design

50. Le skeuomorphisme est facile et
culturellement intégré.
Design

51. Le skeuomorphisme est porteur
de pathos.
Design

52. Le skeuomorphisme est un
vecteur d’identité.
Design

53. Le skeuomorphisme, ça fait
ancien, authentique, familier.
Design

54. Ok. Instagram utilise un démarche
de ce genre (effet pola, bords
vieillis), mais qui voudrait toutes ses
photos vieillies et en style pola, au
lieu de la HD?
Design

55. Le SM n’est pas toujours adapté.
Design

56. Design

57. il est temps de grandir, non ?
Design

58. .
Design

59. il est temps de changer ?
Design

60. .
…2006 …2012
Design

61. il est temps d'être créatif ?
Design

62. .
Design

63. .
Design

64. Le skeuomorphisme, par sa nature
de copie, est prédéterminé à se
recopier.
Design

65. .
Design

66. .
Design

67. Le skeuomorphisme produit des effets contre-
productifs
Le skeuomorphisme produit des effets contre-productifs
Le skeuomorphisme produit des effets contre-productifs
Le skeuomorphisme produit des effets contre-
productifs
Design

68. Think different ?
Design

69. .
Design

70. Le skeuomorphisme, par son
empreinte marquée, distrait
l’utilisateur et l’éloigne du contenu
qu'il souhaite consommer.
Design

71. .
Design

72. .
Design

73. .
Design

74. Le contre-exemple du Menu
Démarrer:
La vignette est une métaphore
digitale équivalente à l’ombre
portée.
Design

75. .
Design

76. Les icônes:
Simplicité, conceptualisation, contraste.


Design

77. Un autre exemple?
Le mot de passe image ou comment
s’affranchir digitalement du classique
mot de passe.
Design

78. .
Design

79. Une police authentiquement numérique
et qui est adaptée aux devices
modernes :
Segoe UI 44
Segoe UI 34
Segoe UI 24
Segoe UI 14
Design

80. Mais avant tout, adopter Modern UI,
c’est offrir une alternative artistique et
délibérée, adulte et honnête des
nouvelles interfaces.
Design

81. .
Design

82. ModernUI est le
corollaire de la
pensée de Bill
Gates :
« Un PC sur chaque
bureau, un PC dans
chaque foyer »
Design

83. Le skeuomorphisme et
l’approche de Microsoft
Design

84. Développeurs Pros de l’IT
http://aka.ms/generation-app Formez-vous en ligne www.microsoftvirtualacademy.com
http://aka.ms/evenements- Retrouvez nos
http://aka.ms/itcamps-france
developpeurs évènements
Les accélérateurs Faites-vous
Windows Azure, Windows Phone, accompagner
Windows 8 gratuitement
Essayer gatuitement http://aka.ms/telechargements
nos soltions IT
La Dev’Team sur MSDN Retrouver nos experts L’IT Team sur TechNet
http://aka.ms/devteam Microsoft http://aka.ms/itteam
Design

85. Donnez votre avis !
Depuis votre smartphone, sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures
!!!
Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les TechDays
http://notes.mstechdays.fr