Présentation : Designer l'Experience Utilisateur

1. UXD Designer l’expérience utilisateur lundi 23 novembre 2009

2. “ Quand vous abordez un problème et qu’il apparait vraiment simple, ce que vous n’en comprenez pas la compléxité. Puis, vous vous y plongez et vous voyez alors que c’est très compliqué, et vous imaginez toutes sortes de solutions alambiquées. Ça, c’est un peu le milieu du chemin, et c’est là que la plupart des gens s’arrète... Mais la personne vraiment forte continuera et trouvera la clé, le principe soujacent du problème — et inventera une solution magnifique, élégante et qui fonctionne.” Steve Jobs, 1984 lundi 23 novembre 2009

3. UXD Contexte lundi 23 novembre 2009

4. Contexte technologique Racines lundi 23 novembre 2009

5. COMPUTER INFORMATION SCIENCES SCIENCES lundi 23 novembre 2009

7. COMPUTER INFORMATION SCIENCES SCIENCES Traduit en français par “Sciences Informatiques” : étude des fondations théoriques de l’information et du calcul automatisé, et des techniques pratiques de leur implémentation et application dans les systèmes informatiques. lundi 23 novembre 2009

8. ➡ 2400 BC : The abacus - the first known calculator (Babylonians ) ➡ 500 BC : First known use of zero by mathematicians ➡ 500 BC : Indian grammarian Panini formulated the grammar of Sanskrit ➡ 200 BC : The Chinese invented the suanpan (Chinese abacus) ➡ 125 BC : Machine d'Anticythère : calculatrice mécanique antique COMPUTER permettant de calculer des positions astronomiques. SCIENCES ➡ 100 BC : Chinese mathematicians first used negative numbers. ➡ 60 : Heron of Alexandria made numerous inventions, including "Sequence Control" in which the operator of a machine set a machine running, which then follows a series of instructions in a deterministic fashion. This was, essentially, the first program. ➡ 600 : Indian mathematician Brahmagupta was the first to describe the modern place-value numeral system (Hindu-Arabic numeral system). ➡ 724 : Chinese inventor Liang Lingzan built the world's first fully mechanical clock; ➡ 820 : Persian mathematician, Muḥammad ibn Mūsā al-Ḵwārizmī, described the rudiments of modern algebra ➡ 1000 : Abū Rayhān al-Bīrūnī invented the Planisphere, an analog computer. lundi 23 novembre 2009

9. ➡ 1400 : Kerala school of astronomy and mathematics in South India invented the floating point number system. ➡ 1400 : Jamshīd al-Kāshī invented the Plate of Conjunctions, an analog computer instrument used to determine the time of day at which planetary conjunctions will occur, and for performing linear interpolation. ➡ 1588 : Joost Buerghi discovered natural logarithms. ➡ 1623 : Wilhelm Schickard of Tübingen, Württemberg (now in Germany), built the first discrete automatic calculator, and thus essentially began the computer era. His device was called the "Calculating Clock" ➡ 1642 : French mathematician Blaise Pascal built a mechanical adding machine. ➡ ... COMPUTER ➡ 1936 : Alan Turing of Cambridge University, England, published a paper on SCIENCES 'computable numbers' ➡ 1940 : At Bell Labs, Samuel Williams and George Stibitz complete a calculator which can operate on complex numbers, and give it the imaginative name of the 'Complex Number Calculator' ➡ 1943 : The Colossus was built, by Dr Thomas Flowers at The Post Office Research Laboratories in London, to crack the German Lorenz (SZ42) cipher. It contained 2400 vacuum tubes for logic and applied a programmable logical function to a stream of input characters ➡ 1944 : The IBM ASCC (Automatic Sequence Controlled Calculator) is turned over to Harvard University, which calls it the Harvard Mark I It was designed by Howard Aiken and his team, financed and built by IBM —it became the second program controlled machine (after Konrad Zuse's). The whole machine was 51 feet (16 m) long, weighed 5 (short) tons (4.5 tonnes), and incorporated 750,000 parts. ➡ 1949, May 6 : This is considered the birthday of modern computing. Maurice Wilkes and a team at Cambridge University executed the first stored program on the EDSAC computer, which used paper tape input-output lundi 23 novembre 2009

10. Theoretical computer science Algorithms and data structures Programming methodology and languages Compilers Programming languages Computer elements and architecture Digital logic Microarchitecture Multiprocessing COMPUTER SCIENCES Numerical and symbolic computation Bioinformatics Cognitive Science Computational chemistry Computational neuroscience Computational physics Numerical algorithms Symbolic mathematics Applications Operating systems Computer networks Computer graphics Computer vision Databases Computer security Artiﬁcial intelligence Robotics Human–computer interaction Ubiquitous computing lundi 23 novembre 2009

12. COMPUTER INFORMATION SCIENCES SCIENCES Science interdisciplinaire principalement concernée par la collection, le classement, la manipulation, le stockage, la recherche et la diffusion d'information. lundi 23 novembre 2009

13. PLATON (428 - 348 av.J.C.) INFORMATION SCIENCES “Classical categorization comes to us ﬁrst from Plato, who, in his Statesman dialogue, introduces the approach of grouping objects based in their similar properties. This approach was further explored and systematized by Aristotle in his Categories treatise, where he analyzes the differences between classes and objects.” lundi 23 novembre 2009

14. Paul Marie Ghislain Otlet (1868 - 1944) http://en.wikipedia.org/wiki/Paul_Otlet “Paul Marie Ghislain Otlet (23 August 1868 in Brussels, Belgium – 10 December 1944) was an author, entrepreneur, visionary, lawyer and peace activist; he is one of several people who have been considered the father of information science, a field he called "documentation". INFORMATION Otlet created the Universal Decimal Classification, one of the most SCIENCES prominent examples of faceted classification. He envisioned later technical innovations but also projected a global vision for information and information technologies that speaks directly to postwar visions of a global "information society." Otlet not only imagined that all the world's knowledge should be interlinked and made available remotely to anyone, but he also proceeded to build a structured document collection. This collection involved standardized paper sheets and cards filed in custom-designed cabinets according to a hierarchical index (which culled information worldwide from diverse sources) and a commercial information retrieval service (which answered written requests by copying relevant information from index cards). Users of this service were even warned if their query was likely to produce more than 50 results per search.” lundi 23 novembre 2009

15. Timothy Berners-Lee (1955 - ) http://en.wikipedia.org/wiki/Tim_Berners-Lee “Sir Timothy John "Tim" Berners-Lee, OM, KBE, FRS, FREng, FRSA (London, 8 June 1955), is a British engineer and computer scientist and MIT professor credited with inventing the World Wide Web, making the first proposal for it in March 1989. On 25 December 1990, with the INFORMATION help of Robert Cailliau and a young student staff at CERN, he implemented the first successful communication SCIENCES between an HTTP client and server via the Internet. Berners-Lee is the director of the World Wide Web Consortium (W3C), which oversees the Web's continued development. He is also the founder of the World Wide Web Foundation, and is a senior researcher and holder of the 3Com Founders Chair at the MIT Computer Science and Artificial Intelligence Laboratory (CSAIL).[3] He is a director of The Web Science Research Initiative (WSRI),[4] and a member of the advisory board of the MIT Center for Collective Intelligence.” lundi 23 novembre 2009

16. Bibliometrics Data modeling Document management Groupware Information architecture Information ethics Information retrieval INFORMATION Information society SCIENCES Information systems Intellectual property Knowledge management Knowledge engineering Personal information management Semantic web lundi 23 novembre 2009

17. Contexte technologique La boucle de l’innovation lundi 23 novembre 2009

18. Usages Usages Usages Usages Usages Usages TEMPS Technologie Technologie Technologie Technologie Technologie Technologie lundi 23 novembre 2009

19. Réseaux sociaux Blogs Usages Usages Usages Usages TEMPS Technologie Technologie Technologie Technologie W3C API lundi 23 novembre 2009

20. WEB 1 lundi 23 novembre 2009

21. VOUS ETES ICI WEB 1 WEB 2 lundi 23 novembre 2009

22. Contexte technologique Cartographie lundi 23 novembre 2009

23. INFORMATIONNEL / POLITIQUE / DOCUMENTAIRE / SOCIAL / / PRESSE INSTITUTIONNEL INFORMATION SCIENCES WEB COMMERCE / CINEMA / MARKETING / TELEVISION PUBLICITE COMPUTER SCIENCES JEUX / PHOTO / VIDEO / MULTIMEDIA / ARTS CD-ROM GRAPHIQUES ETC. lundi 23 novembre 2009

24. INFORMATION SCIENCES .COM WEB COMPUTER SCIENCES lundi 23 novembre 2009

25. INFORMATION SCIENCES WEB INFORMATIONNEL .COM WEB COMPUTER AUDIOVISUEL SCIENCES lundi 23 novembre 2009

26. AUDIOVISUEL INFORMATIONNEL • Privilégie la surface • Privilégie le fond • Propriétaire • Standardisé • Recherche horizontale • Recherche verticale • Immersif • Emmersif • Découverte • Organisation • Notion de temps • Intemporalité lundi 23 novembre 2009

27. AUDIOVISUEL WEB 1.0 INFORMATIONNEL MONDES DIVERTISSEMENT CULTURE ET TRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIRE VIRTUELS MEDIA Maze Showtime.com Candystand.com AOL.com Usenet Info.cern.ch lundi 23 novembre 2009

28. INFORMATIONNEL AUDIOVISUEL second life wikipedia WoWarcraft Vuitton Last.fm Dailymotion Ebay Facebook Blogs / News Voyages lundi 23 novembre 2009

29. Audiovisuel Informationnel second life wikipedia WoWarcraft Joost Vuitton Last.fm You Tube Ebay Facebook NYT.com Blogs Voyages Second Life Wikipedia.com lundi 23 novembre 2009

30. Audiovisuel Informationnel second life wikipedia WoWarcraft Vuitton Last.fm You Tube Ebay Facebook Blogs / News Voyages vuitton.com - voyages Guardian.co.uk lundi 23 novembre 2009

31. Audiovisuel Informationnel second life wikipedia WoWarcraft Joost Vuitton Last.fm You Tube Ebay Facebook NYT.com Blogs Voyages Last.fm Dailymotion.com lundi 23 novembre 2009

32. Audiovisuel Informationnel second life wikipedia WoWarcraft Joost Vuitton Last.fm You Tube Ebay Facebook NYT.com Blogs Voyages Dailymotion.com/jukebox3d Last.fm lundi 23 novembre 2009

33. Audiovisuel Informationnel MONDES DIVERTISSEMENT CULTURE ET TRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIRE VIRTUELS MEDIA • Privilégie la surface • Privilégie le fond • “Propriétaire” • Standardisé • Recherche horizontale • Recherche verticale • Immersif • Emmersif • Découverte • Organisation • Notion de temps • Intemporalité lundi 23 novembre 2009

34. WEB 1.5 AUDIOVISUEL INFORMATIONNEL MONDES DIVERTISSEMENT CULTURE ET TRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIRE VIRTUELS MEDIA lundi 23 novembre 2009

35. AUDIOVISUEL ? INFORMATIONNEL MONDES DIVERTISSEMENT CULTURE ET TRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIRE VIRTUELS MEDIA lundi 23 novembre 2009

36. INFORMATIQUE LOGICIELLE (OPEN SOURCE) AUDIOVISUEL INFORMATIONNEL MONDES DIVERTISSEMENT CULTURE ET TRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIRE VIRTUELS MEDIA lundi 23 novembre 2009

37. APPLICATIF WEB 2.0 AUDIOVISUEL INFORMATIONNEL MONDES DIVERTISSEMENT CULTURE ET TRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIRE VIRTUELS MEDIA lundi 23 novembre 2009

38. APPLICATIF Desktop Application Rich Desktop Application AUDIOVISUEL INFORMATIONNEL Rich Internet Application MONDES DIVERTISSEMENT CULTURE ET TRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIRE VIRTUELS MEDIA lundi 23 novembre 2009

39. Applicatif Desktop Application iTunes Google Earth Rich Desktop Application Ebay Desktop Google Docs Rich Internet Application Audiovisuel Informationnel Outils de second life publication web wikipedia WoWarcraft Vuitton Last.fm Dailymotion Ebay Facebook Blogs / News Voyages lundi 23 novembre 2009

40. Applicatif iTunes Ebay Desktop Logiciel Google Docs Informationnel second life wikipedia WoWarcraft Joost Vuitton Last.fm You Tube Ebay Facebook NYT.com Blogs Voyages lundi 23 novembre 2009

42. Applicatif Desktop Application iTunes Google Earth Rich Desktop Application Ebay Desktop Google Docs Rich Internet Application Audiovisuel Informationnel Outils de second life publication web wikipedia WoWarcraft Vuitton Last.fm Dailymotion Ebay Facebook Blogs / News Voyages lundi 23 novembre 2009

44. Applicatif Audiovisuel Informationnel lundi 23 novembre 2009

45. Contexte métier Profils en T lundi 23 novembre 2009

46. Applicatif Audiovisuel Informationnel lundi 23 novembre 2009

47. FONCTION FORME FOND DESIGN WEB lundi 23 novembre 2009

48. REALISATION & DEVELOPPEMENT FONCTION INTERACTION & CONTENUS & INTERFACE ARCHITECTURE FORME FOND DESIGN WEB lundi 23 novembre 2009

49. Le design Web nécessite une démarche d’élaboration pluri-disciplinaire et, par conséquent, des intervenants aux proﬁls “en forme de T” (T-shaped people). T lundi 23 novembre 2009

50. T-shaped (TEE-shaypt) adj. Posséder une compétence ou une connaissance qui soit à la fois en profondeur et en largeur. Être “T-shaped” (en forme de T) signiﬁe avoir un noyau de compétences et une connaissance approfondie dans un domaine (la tige du T), mais également un haut niveau de curiosité, de sensibilité et d’aptitudes permettant de se diversiﬁer rapidement et d’atteindre une bonne compréhension générale d’autres domaines (la barre transversale du T). T lundi 23 novembre 2009

51. Contexte métier Les métiers du design interactif lundi 23 novembre 2009

52. Industrialisation du digital Naissance d’un nouveau paradigme métier Années 90 + Graphiste(s) Développeur(s) Chef de projet lundi 23 novembre 2009

53. Industrialisation du digital Naissance d’un nouveau paradigme métier Années 2000 UX + + + + + Stratégie Architecte Designer Expert Designer Flash Motion des contenus d’information d’interaction utilisabilité d’interface designer + + + + Developpeur Developpeur Developpeur Developpeur Chef de projet DOM / CSS Front Back AS3 lundi 23 novembre 2009

54. Contexte métier Elements de l’expérience utilisateur lundi 23 novembre 2009

55. Les 5 éléments de l’expérience utilisateur http://www.jjg.net/elements/ surface squellette structure périmêtre strategie lundi 23 novembre 2009

56. ate contexts, and to clarify the underlying relationships among ace Concrete Completion Web as hypertext system Visual Design: visual treatment of text, tment of interface k-and-feel") Visual Design surface graphic page elements and navigational components itional HCI: Navigation Design: design of interface ts to facilitate elements to facilitate the user's movement onality Interface Design Navigation Design through the information architecture squellette Tuftean sense: of information Information Design Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding pment of Interaction Information structure Information Architecture: structural design time te user tasks, acts with Design Architecture of the information space to facilitate intuitive access to content "feature set": nctionality the site Functional Content Content Requirements: definition of périmêtre content elements required in the site eet user needs Specifications Requirements in order to meet user needs ved goals User Needs: externally derived goals ugh user research, cs, etc. User Needs for the site; identified through user research, strategie ethno/techno/psychographics, etc. creative, or other the site Site Objectives Site Objectives: business, creative, or other internally derived goals for the site Abstract Conception information-oriented mplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a elopment team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. lundi 23 novembre 2009 http://www.jjg.net/ia/

57. A basic duality: The Web was originally conceived as a hypertextual information space; 30 March 2000 but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements. Web as software interface Concrete Completion Web as hypertext system Visual Design: visual treatment of text, Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel") Visual Design graphic page elements and navigational components Interface Design: as in traditional HCI: Navigation Design: design of interface design of interface elements to facilitate elements to facilitate the user's movement user interaction with functionality Interface Design Navigation Design through the information architecture Information Design: in the Tuftean sense: designing the presentation of information Information Design Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding to facilitate understanding Interaction Design: development of Interaction Information Information Architecture: structural design time application flows to facilitate user tasks, defining how the user interacts with Design Architecture of the information space to facilitate intuitive access to content site functionality Functional Specifications: "feature set": detailed descriptions of functionality the site Functional Content Content Requirements: definition of content elements required in the site must include in order to meet user needs Specifications Requirements in order to meet user needs User Needs: externally derived goals User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. User Needs for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site Site Objectives Site Objectives: business, creative, or other internally derived goals for the site task-oriented Abstract Conception information-oriented This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. © 2000 Jesse James Garrett http://www.jjg.net/ia/ lundi 23 novembre 2009

58. UX Strategy ❖ Definition des besoins ❖ Etude de contextes d’usage ❖ Strategie fonctionnelle IA ❖ Strategie des contenus IxD ❖ Parcours utilisateurs ❖ Modélisation des objets ❖ Organisation de contenu ❖ Comportement d’interface ❖ Wireframes ❖ Organisation des gabarits ❖ Plannification fonctionnelle ❖ Spéc. fonctionnelles ❖ Process Flow UX DESIGN UID Prototype ❖ Design d’interface ❖ Composants Front Flash ❖ Spécifications graphiques ❖ Gabarits XHTML ❖ Catalogue d’objets ❖ Charte CSS ❖ Librairie d’objets Usability ❖ Conception des tests ❖ Recommandation et rapport d’utilisabilité lundi 23 novembre 2009

59. UXD Stratégie lundi 23 novembre 2009

60. Recherches utilisateurs lundi 23 novembre 2009

61. Analytics Web analytics : termes désignant la mesure, la collecte, l’analyse et la présentation de données internet dans le but de comprendre et d’optimiser les usages d’un dispositif web. lundi 23 novembre 2009

62. Analytics lundi 23 novembre 2009

63. Qu’est-ce que le design centré utilisateur ? Le design centré utilisateur est une philosophie du design et un processus au sein desquels les besoins, les désirs, et les limitations des utilisateurs d’une interface font l’objet d’une attention entière à chaque étape du processus de design. lundi 23 novembre 2009

64. Qualitatif (insights) Interviews Tests d’utilisabilité utilisateurs Buts et attitudes Comportement (ce qu’ils disent) (ce qu’ils font) Sondages Analyses utilisateurs de trafﬁc & logs Quantitatif (validation) lundi 23 novembre 2009

65. Interview utilisateur L’interview utilisateur est une méthode permettant de découvrir des faits et des opinions d’utilisateurs finaux potentiels du système à concevoir. Les interview sont en général menés en face-à-face, un utilisateur pour un interviewer à la fois. lundi 23 novembre 2009

66. Sondage utilisateur Le sondage utilisateur a pour objectif de recueillir des informations auprès d’un panel d’utilisateur, au moyen d’un questionnaire papier ou électronique, sur des points permettant l’amélioration d’un produit dans le cadre de sa conception. lundi 23 novembre 2009

67. Test d’utilisabilité Les tests d’utilisabilité sont basés sur l’observation directe d’utilisateurs spécifiques du produit. Cette méthode permet de recueillir des informations sur l’utilisabilité d’une interface pendant que les taches prédéfinies sont effectuées. lundi 23 novembre 2009

68. Persona Personnes fictives créées pour représenter les différents types d’utilisateurs au sein d’une cible demographique identifiée succeptible d’utiliser un site ou un produit. lundi 23 novembre 2009

69. Persona lundi 23 novembre 2009

70. Méthodes de conception lundi 23 novembre 2009

71. “The best way to get a good idea is to get a lot of ideas.” Linus Pauling Prix Nobel de Chimie pour la découverte de l’ADN lundi 23 novembre 2009

72. Brainstorming Le brainstorming consiste à rassembler des personnes afin de générer le plus grand nombre d’idées possibles afin de trouver des solutions à une problématique donnée. La méthode de brainstorming appellée Cartographie des idées est la plus efficace en termes de conception. lundi 23 novembre 2009

73. Brainstorming lundi 23 novembre 2009

74. Focus groups Le Focus Group consiste à soumettre des idées à un ensemble d’utilisateurs (entre 5 et 10) et à enregistrer leur réactions et leurs commentaires. lundi 23 novembre 2009

75. Workshop Le workshop consiste à rassembler des personnes (3 ou 4) impliquées dans un projet pour une séance de conception de groupe. L’objectif est trouver des solutions consolidées plus rapidement à des problématiques précises. Les problématiques pouvant être traitées en workshop sont variées : design stratégie, persona, parcours utilisateurs, contenu, fonctionnalités, interaction, structure... lundi 23 novembre 2009

76. Workshop lundi 23 novembre 2009

79. Scénario utilisateur lundi 23 novembre 2009

80. Scénario utilisateur (de contexte) Le scénario utilisateur est le récit de l’usage fait par un persona d’un service ou d’un produit dans un contexte de vie défini. Le scénario de contexte se concentre sur la façon dont le produit peut aider l’utilisateur à atteindre son but et non pas sur le fonctionnement du produit. lundi 23 novembre 2009

81. 3. Stratégie / scénario utilisateur lundi 23 novembre 2009

85. Framework lundi 23 novembre 2009

86. Framework Un framework est une structure conceptuelle fondamentale utilisée pour traiter ou résoudre des sujets complexes. Dans le contexte du design web, un framework est souvent représenté sous la forme d’un schéma qui sert à la fois de stratégie des moyens et de plan directeur. C’est à la fois un guide et un outil. lundi 23 novembre 2009

87. lundi 23 novembre 2009

88. Extimate What I do Who I meet Where I go Who I am Intimate 1 My account My profile My avatar 2 My bedroom The school Adventure places 3 Members Friends 4 Edutainment modules Media Games lundi 23 novembre 2009

89. Modèle conceptuel lundi 23 novembre 2009

90. Modèle conceptuel Un concept est une modélisation multidimensionnelle d’objets abstraits. lundi 23 novembre 2009

91. 3. Stratégie / modèle conceptuel 2. 4 axes de conception / Conception stratégique / Schéma conceptuel lundi 23 novembre 2009

92. View a Educative Media Read / Listen to a Kinra Story Ch ar a n ing ct er ar Interaction s Le Ad Send Message View a Kinra Media e to Friend ve ti v ABC ntu ca View an Write a note on Send a Gift to Friend u edutainment module a member’s Board res Ed Chat Navigation Navigation Lists Navigation map and menus Shortcuts create my customize Participate in a Quizz Bedroom my Bedroom Participate in an enigma See who’s online Explore a Last visited Add a Member Objects as Friend ? create customize my Avatar my Avatar Cust Build C Explore a on create my complete my Popular Places om Theme place Profile Preferences rati create my o Account Na Invite "real" Friends n mm plo Make an artistic creation tio v Visit my i ga neighbors’ profile x Explore a iga u Bookmarked E Campus place Place io nit n st Play a ie multi-player game e s nv Gen I Join a Group / Club e See a member’s rat Profile Update my miniblog e lay Co P nt l a en u Play a t single-player game Cas Share pictures lundi 23 novembre 2009

93. HERTA Avancé CREER ENREGISTRER CYCLE DE L’EXPERIENCE UTILISATEUR Whislist Préférences familiale personnelles Basique EXPLORER COMPOSER PAR • Pizza • Ingredients • Tartes • Occasion • Gateaux • Membre famille EXPLORER & CHOISIR Avancé Basique PARTAGER & ACHETER & Basique Avancé PARTICIPER ORGANISER PARTICIPER SUR PUBLIER SUR ORGANISER ORGANISER Herta Réseaux Shopping list • ToDo list community sociaux • Rappel EXPORTER EXPORTER JOUER PARTICIPER SUR • Impression • Mobile Concours Facebook Fan • Email • Calendrier Page SERVICE PARTENAIRE • Commande PREPARER & • Livraison S’AMUSER FOLLOW COOK WITH Basique Coach Real-time wizard ASIGN SWITCH Avancé Roles Parent/child modes lundi 23 novembre 2009

94. 3. Stratégie / modèle conceptuel Cas : Peclers Paris lundi 23 novembre 2009

95. 3. Stratégie / modèle conceptuel lundi 23 novembre 2009

100. Contenus lundi 23 novembre 2009

101. Stratégie des contenus Vue d’ensemble lundi 23 novembre 2009

102. Vue d’ensemble • stratégie éditoriale • rédaction interactive • SEO (optimisation des moteurs de recherche) • stratégie de la gestion des contenus • stratégie des canaux de distribution lundi 23 novembre 2009

103. Stratégies des contenus Framework éditorial lundi 23 novembre 2009

104. Framework éditorial Un framework est une structure conceptuelle fondamentale utilisée pour traiter ou résoudre des sujets complexes. Un framework éditorial permet d’établir des repères conceptuels qui guideront la production des contenus tout au long de leur cycle de vie. lundi 23 novembre 2009

105. Framework éditorial lundi 23 novembre 2009

112. Stratégies des contenus Matrice éditoriale lundi 23 novembre 2009

113. Matrice éditoriale Une matrice éditoriale est une grille de répartition des types de contenus selon des critères structurants : thèmatiques, formats, rubriques, périodicité... C’est un outil de plannification qualitative des contenus. Une matrice éditoriale permet : • de faire surgir des déséquilibres conceptuels • de guider la production des contenus lundi 23 novembre 2009

116. Mum's Journey Created August 2009 Prenatal Newborn Baby It's all about mum Fusional relationship between First seperations. It's starting to feel like a family. Mum & Baby Month by month -12 -11 -10 -9 -8 -7 -6 -5 -4 -3 -2 -1 Birth 1 2 3 4 5 6 7 8 9 10 begin weaning transition from breastmilk to bottle leaves the hospital quality time with baby: evening meals important general announcement 1st week pregnancy test maternity leave check-up leaving baby with nanny or family look for maternity clothes first night home Mum's Milestones choosing a doctor back at work (for some) telling maternity feeling more "normal" baby cries when registration baby blues mum leaves dad checks ups with doctor/ gynecologist once a month starting to get out and about in a "bubble", at home with baby 9 months anxiety about viability of pregnancy Nesting: final preparation for check-up buying food adapted baby's arrival morning sickness for pregnancy birth announced baby starts to sleep through the night (informal) start of cravings register for day nursery getting pre-pregnancy body back birth announced first ultrasound : (formal cards) second ultrasound expected birth date sharing new developments with friends & family birth classes rebuilding a couple notice body changes life after birth baby moves to own room researching information about pregnancy & birth first games with baby baby's first monthly appointments with doctor (vaccinations, check-ups) kick I'm a Will he be allergic? What will baby Is baby ready for home-m What can go wrong? mother! do next? weaning? Wh Am I pregnant? Are we ready? Why can't baby sleep through? What new foods, whe Where can I find the right information? Home or Why is baby crying? hospital birth? Boy or girl? When will she Mum's Questions Ready for pram? Pacifier? What can I eat? Is he comfortable? what to do about Colic? Do I need to take supplements? Which hospital? Which name? How do I protect my baby? Will my baby be What should I expect? Is he getting enough milk? Can I find nat food for ba healthy? Am I a good mother? Will I be a Breastfeeding How ca lundi 23 novembre 2009 How do my habits good Mum? or bottle? Is baby developing When will she affect my baby?

117. Conception de contenus web Formatage lundi 23 novembre 2009

118. Formats éditoriaux Les formats éditoriaux traditionnels sont bien connus : article, liste, interview, citation, extrait, note, fiche, résumé, légende... La communication digitale a autorisé une démultiplication des formats éditoriaux... lundi 23 novembre 2009

119. Formats éditoriaux lundi 23 novembre 2009

120. Formats éditoriaux lundi 23 novembre 2009

121. Formats éditoriaux Certains formats ont radicalement changé notre manière de communiquer et de publier l’information : • email • blogs • questions-réponses (Yahoo Answers...) • wiki • social bookmarking • twitter • ... lundi 23 novembre 2009

122. Conception de contenus web Enrichissement lundi 23 novembre 2009

123. Enrichissement rédactionnel Comment enrichir un article, un document, une page..? lundi 23 novembre 2009

124. Enrichissement rédactionnel Comment enrichir un article, un document, une page..? lundi 23 novembre 2009

126. Enrichissement rédactionnel photo audio chiffres diagrammes fichiers à télécharger fiches complémentaires liens contextuels module interactifs services (email, partage, impression...) ... lundi 23 novembre 2009

127. UXD Structure lundi 23 novembre 2009

128. Au sein d’un système, qu’il soit de nature biologique, mécanique, informatique, économique, social... qu’il soit simple ou complexe, une structure bien conçue apporte intégrité et adaptabilité. lundi 23 novembre 2009

129. Dome géodésique de Montréal prinicipe inventé par Buckminster Fuller lundi 23 novembre 2009

130. Architecture d’information Principes lundi 23 novembre 2009

131. Principes La pratique de l’architecture d’information concerne la création de modèles d’organisation et de navigation qui permettent à l’utilisateur de se déplacer dans les contenus d’un site de manière efficace et efficiente. lundi 23 novembre 2009

132. Principes Pour créer une organisation et une navigation, il est possible d’aborber la question de 2 manières : • approche descendante • approche montante lundi 23 novembre 2009

133. Principes • approche descendante catégories contenu lundi 23 novembre 2009

134. Principes • approche montante catégories contenu lundi 23 novembre 2009

135. 5. Structures / architecture d’information Principes • combiner les deux approches est souvent nécessaire catégories contenu lundi 23 novembre 2009

136. Principes • concevoir une structure capable de s’adapter au changement et de s’accomoder d’une augmentation des contenus lundi 23 novembre 2009

137. Principes • L’unité de base des structures d’information est le nœud. • Nœud ≠ Page lundi 23 novembre 2009

138. Principes • Structure hiérarchique • Relation entre les nœuds : type parent-enfant lundi 23 novembre 2009

139. 4. Contenus / architecture d’information Principes • Structure hiérarchique lundi 23 novembre 2009

143. Principes • Structure matricielle à 3 dimensions lundi 23 novembre 2009

144. 4. Contenus / architecture d’information Principes • Structure matricielle à 3 dimensions lundi 23 novembre 2009

145. 4. Contenus / architecture d’information Principes • Structure matricielle à 3 dimensions lundi 23 novembre 2009

146. Principes • Structure organique lundi 23 novembre 2009

147. 4.Structure architecture d’information • Contenus / organique : internet Principes lundi 23 novembre 2009

148. 4. Contenus / architecture d’information Principes • Structure organique : wikipedia lundi 23 novembre 2009

149. Principes • Structure séquentielle lundi 23 novembre 2009

150. 4. Contenus / architecture d’information Principes • Structure séquentielle lundi 23 novembre 2009

151. Principes • Vocabulaire et nomenclature ‣ vocabulaire controlé ‣ metadata (information sur l’information) lundi 23 novembre 2009

152. 4. Contenus / architecture d’information Principes • Vocabulaire et nomenclature lundi 23 novembre 2009

157. Architecture d’information Wireframes lundi 23 novembre 2009

Présentation : Designer l'Experience Utilisateur

You are reading a preview.

Check these out next

Présentation : Designer l'Experience Utilisateur

More Related Content

Viewers also liked (11)

Similar to Présentation : Designer l'Experience Utilisateur (11)

Recently uploaded (20)