1. CONCEPTION Master 2 : Management et Ingnierie de la Communication Numrique Interactive A. Introduction au design d'exprience utilisateur (UXD) Janvier 2010 Ecole des Gobelins David Raichman Senior UX Designer @ OgilvyInteractive

2. Conception | Introduction au design dexprience utilisateur Les cours de conception A. Introduction au design dexprience utilisateur (UXD) B. Les livrables de lUXD C. La recherche utilisateur D. Framework fonctionnel et stratgie des contenus E. Design dinteraction, design dinterface et protoypage F. Utilisabilit

3. Conception | Introduction au design dexprience utilisateur A. Introduction au design dexprience utilisateur 1. Contexte 2. Dnir lexprience utilisateur (UX) 3. Fondements de lUX Design 4. Les domaines de lUXD 5. LUXD et lentreprise 6. Rfrences

4. Conception | Introduction au design dexprience utilisateur 1. Contexte / Prambule Dans ce cours, on se focalisera sur le design dexprience utilisateur dans le contexte digital (web, mobile...)

5. Conception | Introduction au design dexprience utilisateur 1. Contexte / Un march en permanente volution Globalisation Enjeux environnementaux Digitalisation

6. Conception | Introduction au design dexprience utilisateur 1. Contexte / Un march en permanente volution Porosit des secteurs Media Web Mobile

7. Conception | Introduction au design dexprience utilisateur 1. Contexte / Un march en permanente volution Porosit des secteurs Radio Press Music Virtual Game Web Social iTunes e- commerce Service mobile TV Game Interactive TV mobile Game Press Press Social

8. Conception | Introduction au design dexprience utilisateur 1. Contexte / Acclration technologique Croissance du nombre de sites web par ans

9. Conception | Introduction au design dexprience utilisateur 1. Contexte / Acclration technologique Croissance du nombre dutilisateurs par ans

10. Conception | Introduction au design dexprience utilisateur 1. Contexte / Nouveaux rapports aux produits et services Evolution du nombre dorganisations dans la relation avec un utilisateur nal Annes 70 - 80 Produit technologique traditionnel Utilisateur Ventes / Rparation

11. Conception | Introduction au design dexprience utilisateur 1. Contexte / Nouveaux rapports aux produits et services Evolution du nombre dorganisations dans la relation avec un utilisateur nal Annes 90 Logiciel de bureautique traditionnel Ventes Utilisateur Support

12. Conception | Introduction au design dexprience utilisateur 1. Contexte / Nouveaux rapports aux produits et services Evolution du nombre dorganisations dans la relation avec un utilisateur nal Annes 2000 Sites web FAI Utilisateur Fournisseur du site

13. Conception | Introduction au design dexprience utilisateur 1. Contexte / Nouveaux rapports aux produits et services Evolution du nombre dorganisations dans la relation avec un utilisateur nal Annes 2000 Mobile Fabriquant du mobile Fournisseur du rseau Utilisateur Fournisseur de lapplication Fournisseur de contenus

14. Conception | Introduction au design dexprience utilisateur 1. Contexte / Nouveaux rapports aux produits et services Covolution prosommation co-innovation piratage / hacking opensource

15. Conception | Introduction au design dexprience utilisateur 1. Contexte / Nouveaux rapports aux produits et services Covolution temps

16. Conception | Introduction au design dexprience utilisateur 1. Contexte / Apparition de nouveaux mtiers Architecte de linformation

17. Conception | Introduction au design dexprience utilisateur 1. Contexte / Apparition de nouveaux mtiers Ergonome web

18. Conception | Introduction au design dexprience utilisateur 1. Contexte / Apparition de nouveaux mtiers Motion designer

19. Conception | Introduction au design dexprience utilisateur 1. Contexte / Apparition de nouveaux mtiers Content strategist

20. Conception | Introduction au design dexprience utilisateur 1. Contexte / Apparition de nouveaux mtiers Flash designer

21. Conception | Introduction au design dexprience utilisateur 1. Contexte / Apparition de nouveaux mtiers Interaction designer

22. Conception | Introduction au design dexprience utilisateur 1. Contexte / Apparition de nouveaux mtiers UX architect

23. Conception | Introduction au design dexprience utilisateur 1. Contexte / Apparition de nouveaux mtiers ...

24. Conception | Introduction au design dexprience utilisateur 1. Contexte / Importance du design Le design joue un rle croissant dans la cration de produits et de services Deux ides reues : le design, cest une affaire desthtique cest faire un produit dans la tendance du moment (Apple, Google...)

25. Conception | Introduction au design dexprience utilisateur 1. Contexte / Importance du design Le design est une activit qui repose sur les lments suivants : Empathie Rsolution de problmes Cration dides, de concepts et protoypage Recherche dalternatives, de nouveaux paradigmes

26. Conception | Introduction au design dexprience utilisateur 1. Contexte / Importance du design Le design comme mthodologie est applicable des domaines trs diffrents : Architecture Graphisme Son Automobile Les technologies de linformation Lexprience utilisateur ...

27. Conception | Introduction au design dexprience utilisateur A. Introduction au design dexprience utilisateur 1. Contexte 2. Dnir lexprience utilisateur (UX) 3. Fondements de lUX Design 4. Les domaines de lUXD 5. LUXD et lentreprise 6. Rfrences

28. Conception | Introduction au design dexprience utilisateur 2. Dnir lexprience utilisateur / Dnition Lexprience utilisateur (en anglais, UX) dcrit toute exprience et satisfaction quun utilisateur peut vivre et ressentir lorsquil utilise un produit ou un systme.

29. Conception | Introduction au design dexprience utilisateur 2. Dnir lexprience utilisateur / Experience is the product "You press the button, we do the rest." George Eastman, 1888

30. Conception | Introduction au design dexprience utilisateur 2. Dnir lexprience utilisateur / Experience is the product When you start looking at a problem and it seems really simple, you don't really understand the complexity of the problem. Then you get into the problem, and you see that it's really complicated, and you come up with all these convoluted solutions. That's sort of the middle, and that's where most people stop.... But the really great person will keep on going and find the key, the underlying principle of the problem and come up with an elegant, really beautiful solution that works. Steve Jobs, 1984

31. Conception | Introduction au design dexprience utilisateur 2. Dnir lexprience utilisateur / Experience is the product Produit Technologie

32. Conception | Introduction au design dexprience utilisateur 2. Dnir lexprience utilisateur / Experience is the product Produit Fonctionnalits

33. Conception | Introduction au design dexprience utilisateur 2. Dnir lexprience utilisateur / Experience is the product Produit Exprience

34. Conception | Introduction au design dexprience utilisateur 2. Dnir lexprience utilisateur / Experience is the product Experience IS the product

35. Conception | Introduction au design dexprience utilisateur 2. Dnir lexprience utilisateur / Lexprience des objets quotidiens Why do we put up with the frustrations of everyday objects, with objects that we cant figure out how to use, with those neat plastic wrapped packages that seem impossible to open, with doors that trap people, with washing machines and dryers that have become too confusing to [...] ? Donald A. Norman The design of everyday things, 1988, Basic books

36. Conception | Introduction au design dexprience utilisateur 2. Dnir lexprience utilisateur / La problmatique du digital (web, mobile...) [...] a web site is a self-service product. There is no instruction manual to read beforehand, no training seminar to attend, no customer service representative to help the user through site. There is only the user, facing the site alone with only her wits and experience to guide her. Jesse James Garett The elements of user experience, 2002, New Riders

37. Conception | Introduction au design dexprience utilisateur 2. Dnir lexprience utilisateur / Les facettes de lexprience utilisateur digitale useful usable desirable valuable findable accessible credible Daprs P. Morville, http://semanticstudios.com/publications/semantics/000029.php, 2004

38. Conception | Introduction au design dexprience utilisateur A. Introduction au design dexprience utilisateur 1. Contexte 2. Dnir lexprience utilisateur (UX) 3. Fondements de lUX Design 4. Les domaines de lUXD 5. LUXD et lentreprise 6. Rfrences

39. Conception | Introduction au design dexprience utilisateur 3. Fondements de lUX Design / Origines Les 3 inuences de lUXD HCI Computer graphics Design dinterface Ergonomie Design industriel Design Utilisabilit dinteraction UXD Recherche Segmentation Mta-donnes utilisateurs utilisateurs Architecture de linformation Marque Stratgie Archivage CRM Taxonomie Marketing Library Science Etude de march Documentalisme

40. Conception | Introduction au design dexprience utilisateur 3. Fondements de lUX Design / Origines Les 3 inuences de lUXD HCI Computer graphics Mark Boulton Douglas Bowman Jenifer Tidwell Ergonomie Design industriel Donald Norman Don Norman Alan Cooper Jakob Nielsen Bill Moggridge UXD Segmentation Mta-donnes utilisateurs Jesse James Garett Peter Morville Marque Louis Rosenfeld Archivage CRM Taxonomie Marketing Library Science Etude de march Documentalisme

41. Conception | Introduction au design dexprience utilisateur 3. Fondements de lUX Design / Design centr sur utilisateur (UCD) Premiers pas vers le design centr sur lutilisateur We bear in mind that the object being worked on is going to be ridden in, sat upon, looked at, talked into, activated, operated, or in some other way used by people individually or en masse. When the point of contact between the product and the people becomes a point of friction, then the [] designer has failed. On the other hand, if people are made safer, more comfortable, more eager to purchase, more efficient or just plain happierby contact with the product, then the designer has succeeded. Henry Dreyfuss,1955 Designing for People, Allworth Press

42. Conception | Introduction au design dexprience utilisateur 3. Fondements de lUX Design / Design centr sur utilisateur (UCD) LUCD sest formalise grce la standardisation de la conception des applications informatiques (ISO 13407), nomme conception centr sur lhumain Le processus de conception centr sur lhumain dnit un processus gnral incluant les activit centrs sur les humains par le biais dun cycle de dveloppement, mais ne spcie pas exactement la mthode.

43. Conception | Introduction au design dexprience utilisateur 3. Fondements de lUX Design / Design centr sur utilisateur (UCD) Processus de conception centr sur lhumain (norme ISO 13407) Identier les besoins pour le design centr utilisateur Spcier le contexte dutilisation Evaluer les solutions Spcier les exigences Les exigences sont atteintes de conception utilisateurs Produire des solutions de conceptions

44. Conception | Introduction au design dexprience utilisateur 3. Fondements de lUX Design / Design centr sur utilisateur (UCD) Ce quil faut retenir sur lUCD : Comprendre les besoins des utilisateurs (Recherche utilisateur) Concevoir des solutions qui rpondent ces besoins Faire participer les utilisateurs dans le processus de conception Conduire des tests avec les utilisateurs Modier la conception itrativement tant que les tests ne sont pas satisfaisants Design itrations Test utilisateur Prototype et valuation

45. Conception | Introduction au design dexprience utilisateur 3. Fondements de lUX Design / Design centr sur utilisateur (UCD) LUX Design est un processus centr sur lutilisateur

46. Conception | Introduction au design dexprience utilisateur 3. Fondements de lUX Design / Les lments de Garett 5 plans Surface : rassemblons tout. Quelle est lapparence du produit ni ? Squelette : rendons les choses concrtes. Quels composants vont tre la disposition des utilisateurs ? Structure : rassemblons les briques. Comment les diffrents lments vont-ils se comporter et vivre ensemble ? Primtre : transformons la stratgie en recommandation. Quelles sont les fonctionnalits ? Strategie : que voulons-nous retirer du site ? Quel sont les besoins des utilisateurs ? Daprs J.J. Garett, The elements of user experiences, 2003, New Riders

47. Conception | Introduction au design dexprience utilisateur A. Introduction au design dexprience utilisateur 1. Contexte 2. Dnir lexprience utilisateur (UX) 3. Fondements de lUX Design 4. Les domaines de lUXD 5. LUXD et lentreprise 6. Rfrences

48. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Pluridisciplinarit UX Strategy ! Denition des besoins ! Etude de contextes dusage ! Strategie fonctionnelle IA ! Strategie des contenus ! Parcours utilisateurs UID ! Organisation de contenu ! Design dinterface ! Wireframes ! Spcications graphiques ! Plannication fonctionnelle ! Catalogue dobjets UX DESIGN IxD Usability ! Modlisation des objets ! Conception des tests ! Comportement dinterface ! Recommandation et ! Organisation des gabarits rapport dutilisabilit ! Spc. fonctionnelles ! Process Flow Prototype ! Simulation du comportement dinterface ! Composants Front ! Librairie dobjets

49. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Six ples Rpartition des ples par lments UX Design Prototypage Utilisabilit Utilisabilit Design dinteraction UX Stratgie Architecture dinformation Design dinterface stratgie primtre structure squelette surface strategic tactic

50. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Mtiers Graphiste(s) Dveloppeur(s) Chef de projet

51. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Mtiers Graphiste / User Architecte Designer Ergonome web / Dveloppeur / Designer dinterface researcher dinformation dinteraction Expert en utilisabilit Prototype front Content strategist Technology Chef de projet Rdacteur SEO expert strategist / CTO

52. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Mtiers Architecte de linformation organise, modlise et catgorise linformation. Ce qui comprend souvent la mise en place dun systme de classification et de nomenclaturage pour les sites web, ou applications.

53. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Mtiers Designer dinteraction dfinit les comportements des produits et des systmes avec lesquels un utilisateur peut interagir.

54. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Mtiers Ergonome web / Expert utilisabilit value la facult dun objet, dun service ou dun systme tre utilisable, en conduisant des tests et des recherches auprs des utilisateurs.

55. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Mtiers Expert en recherche utilisateur tudie et modlise les objectifs et besoins des utilisateurs en menant des interviews et des tests dans un contexte dusage donn.

56. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Mtiers Designer / Architecte Exprience utilisateur conoit et produit les lments de lexprience dun utilisateur comme rsultante dune interaction avec un produit, un service ou un systme.

57. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Mtiers Designer interactif polyvalent, son activit regroupe souvent le design graphique, le design dinterface web, le design dinteraction et le motion design.

58. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Typologies des systmes digitaux Applicatif Desktop, bornes, autres... N M ew on s de s vi rtu el s Audiovisuel Informationnel

59. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Typologies des systmes digitaux Applicatif Desktop, bornes, autres... mouvements 2D/3D travelling, panoramique trajectoire, rotation, zoom... transitions 2D/3D fade, iris, wipe... filtres 2D/3D blur, glow, bevel... rponse sonore pan stro, filtres, intensit... N M ew on s d es vi rtu el s Audiovisuel Informationnel

60. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Typologies des systmes digitaux Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns ux ci bl on s s s, al a ic en d ct ita do es io lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel

61. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Typologies des systmes digitaux Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns ux ci bl on s s s, al a ic en d ct ita do es io lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel

62. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Typologies des systmes digitaux Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns ux ci bl on s s s, al a ic en d ct ita do es io lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel

63. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Typologies des systmes digitaux Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns ux ci bl on s s s, al a ic en d ct ita do es io lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel

64. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Typologies des systmes digitaux Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns ux ci bl on s s s, al a ic en d ct ita do es io lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel

65. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Typologies des systmes digitaux Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns ux ci bl on s s s, al a ic en d ct ita do es io lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel

66. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Typologies des systmes digitaux Applicatif Desktop, bornes, autres... RDA : Rich Desktop Application RMA : Rich Mobile Application RIA : Rich Internet Application Tr Bl N So Je Fi Pu a M ew og lm ns ux ci bl on s s s, al a ic en d ct ita do es io lig ire c nn vi ne in ,E rtu el te vt el ra ,P s ct or ifs tfo lio ... Audiovisuel Informationnel

67. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Typologies des systmes digitaux Affectation des mtiers par typologie Informationnel User researcher Architecte de linformation Designer dinteraction Ergonome Web / Expert Utilisabilit Designer dinterface UX Designer

68. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Typologies des systmes digitaux Affectation des mtiers par typologie Applicatif User researcher Architecte de linformation Designer dinteraction Ergonome Web / Expert Utilisabilit Designer dinterface UX Designer

69. Conception | Introduction au design dexprience utilisateur 4. Les domaines de lUXD / Typologies des systmes digitaux Affectation des mtiers par typologie Audiovisuel User researcher Architecte de linformation Designer dinteraction Ergonome Web / Expert Utilisabilit Designer dinterface UX Designer

70. Conception | Introduction au design dexprience utilisateur A. Introduction au design dexprience utilisateur 1. Contexte 2. Dnir lexprience utilisateur (UX) 3. Fondements de lUX Design 4. Les domaines de lUXD 5. LUXD et lentreprise 6. Rfrences

71. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / Typologie des entreprises TYPE APPROCHE PRODUITS EXEMPLE CMS, applications, Intranets, SSII Informatique SQLI e-commerce... Campagnes marketing online, contenus, Web agency Communication applications, intranets, e-commerces, Ogilvy Interactive rseaux sociaux, chartes graphiques... Fonctionnalits, contenus, services, tests, Pure player Service Amazon relatifs une plateforme Objets, services, interfaces, applications, Agence de design Design IDEO chartes graphiques, tests... Cabinet de Livrables UX, recherche utilisateur, tests, UX Design Adaptive Path consultants UX rapports de tests, audits

72. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / Stratgie de lentreprise vs objectifs de lutilisateur Devenir leader sur le march de lindustrie X Gnrer Stratgie de lentreprise lengouement parmi nos client Augmenter la frquentation de notre site web...

73. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / Stratgie de lentreprise vs objectifs de lutilisateur Gagner de largent Susciter Objectifs utilisateurs ladmiration de ses proches Rendre plus pratique sa vie quotidienne...

74. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / Stratgie de lentreprise vs objectifs de lutilisateur Stratgie de lentreprise Objectifs utilisateurs

75. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / Stratgie de lentreprise vs objectifs de lutilisateur Dnition du projet Dnition des business goal Stratgie de lentreprise Stratgie UX Objectifs utilisateurs Filtrage des objectifs utilisateurs

76. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / Quand lUX devient philosophie Le cas Google Manifeste UX 1. Focus on people their lives, their work, their dreams. 2. Every millisecond counts. 3. Simplicity is powerful. 4. Engage beginners and attract experts. 5. Dare to innovate. 6. Design for the world. 7. Plan for today's and tomorrow's business. 8. Delight the eye without distracting the mind. 9. Be worthy of people's trust. 10.Add a human touch. Sources : http://www.google.com/corporate/ux.html

77. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / Quand lUX devient philosophie Le cas Google Philosophie de lentreprise 1. Focus on the user and all else will follow. 2. Its best to do one thing really, really well. 3. Fast is better than slow. 4. Democracy on the web works. 5. You dont need to be at your desk to need an answer. 6. You can make money without doing evil. 7. Theres always more information out there. 8. The need for information crosses all borders. 9. You can be serious without a suit. 10.Great just isnt good enough. Sources :http://www.google.com/corporate/tenthings.html

78. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / LUXD dans les projets digitaux project management concrete design technology content implementation production tactic abstract design strategic technology content strategy strategy site strategy user research

79. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / LUXD dans les projets digitaux project management Usability UID concrete design Prototype technology content implementation IxD production tactic abstract IxD IA design strategic technology content strategy IA strategy Usability site strategy UX Strat. user research

80. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / Une nouvelle approche de la gestion de projet Daprs Mr. Patrick J. Lynch & Ms. Sarah Horton, Web Style Guide, 3rd edition, 2009, Yale University Press

81. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / Une nouvelle approche de la gestion de projet Approche classique en cascade

82. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / Une nouvelle approche de la gestion de projet Dperdition de la qualit dans une approche en cascade Quality Temps Strategy Design Development

83. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / Une nouvelle approche de la gestion de projet Approche agile

84. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / Une nouvelle approche de la gestion de projet Approche hybride pragmatique

85. Conception | Introduction au design dexprience utilisateur 5. LUXD et lentreprise / Une nouvelle approche de la gestion de projet Augmentation de la qualit dans une approche hybride pragmatique Quality UX UX UX UX Temps Strategy Design Development

86. Conception | Introduction au design dexprience utilisateur 6. LUXD et lentreprise / Enjeux et bnces Enjeux Composer et connatre la culture de lentreprise Faire comprendre que : Process existant + UXD + bnces