présentation : designer l'experience utilisateur
Embed Size (px)
DESCRIPTION
Designer l'Experience UtilisateurPrésenté à :- L'Ecole de Communication de SciencesPo Paris.- Ecole de Commerce EDC - Paris La Défense.2009TRANSCRIPT
- 1. UXDDesignerlexprienceutilisateurlundi 23 novembre 2009
2. Quand vous abordez un problme et quilapparait vraiment simple, ce que vous nencomprenez pas la complxit. Puis, vous vousy plongez et vous voyez alors que cest trscompliqu, et vous imaginez toutes sortes desolutions alambiques. a, cest un peu le milieu du chemin, et cest lque la plupart des gens sarrte... Mais la personne vraiment forte continuera ettrouvera la cl, le principe soujacent duproblme et inventera une solutionmagnifique, lgante et qui fonctionne. Steve Jobs, 1984lundi 23 novembre 2009 3. UXDContexte lundi 23 novembre 2009 4. Contexte technologiqueRacines lundi 23 novembre 2009 5. COMPUTERINFORMATION SCIENCES SCIENCES lundi 23 novembre 2009 6. COMPUTERINFORMATION SCIENCES SCIENCES lundi 23 novembre 2009 7. COMPUTER INFORMATIONSCIENCESSCIENCESTraduit en franais par SciencesInformatiques : tude des fondationsthoriques de linformation et ducalcul automatis, et des techniquespratiques de leur implmentation etapplication dans les systmesinformatiques. lundi 23 novembre 2009 8. 2400 BC : The abacus - the rst 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'Anticythre : calculatrice mcanique antiqueCOMPUTERpermettant de calculer des positions astronomiques.SCIENCES 100 BC : Chinese mathematicians rst used negative numbers. 60 : Heron of Alexandria made numerous inventions, including "SequenceControl" in which the operator of a machine set a machine running, whichthen follows a series of instructions in a deterministic fashion. This was,essentially, the rst program. 600 : Indian mathematician Brahmagupta was the rst to describe themodern place-value numeral system (Hindu-Arabic numeral system). 724 : Chinese inventor Liang Lingzan built the world's rst fully mechanicalclock; 820 : Persian mathematician, Muammad ibn Ms al-wrizm, describedthe rudiments of modern algebra 1000 : Ab Rayhn al-Brn invented the Planisphere, an analogcomputer. lundi 23 novembre 2009 9. 1400 : Kerala school of astronomy and mathematics in South India invented theoating point number system. 1400 : Jamshd al-Ksh invented the Plate of Conjunctions, an analogcomputer instrument used to determine the time of day at which planetaryconjunctions will occur, and for performing linear interpolation. 1588 : Joost Buerghi discovered natural logarithms. 1623 : Wilhelm Schickard of Tbingen, Wrttemberg (now in Germany), built therst discrete automatic calculator, and thus essentially began the computerera. His device was called the "Calculating Clock" 1642 : French mathematician Blaise Pascal built a mechanical addingmachine. ...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 calculatorwhich 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 OfceResearch Laboratories in London, to crack the German Lorenz (SZ42) cipher. Itcontained 2400 vacuum tubes for logic and applied a programmable logicalfunction to a stream of input characters 1944 : The IBM ASCC (Automatic Sequence Controlled Calculator) is turnedover to Harvard University, which calls it the Harvard Mark I It was designed byHoward Aiken and his team, nanced and built by IBM it became the secondprogram controlled machine (after Konrad Zuse's). The whole machine was 51feet (16 m) long, weighed 5 (short) tons (4.5 tonnes), and incorporated 750,000parts. 1949, May 6 : This is considered the birthday of modern computing. MauriceWilkes and a team at Cambridge University executed the rst stored programon the EDSAC computer, which used paper tape input-outputlundi 23 novembre 2009 10. Theoretical computer science Algorithms and data structures Programming methodology and languagesCompilers Programming languagesComputer elements and architectureDigital logic Microarchitecture Multiprocessing COMPUTER SCIENCES Numerical and symbolic computationBioinformatics Cognitive Science Computational chemistry Computational neuroscience Computational physics Numerical algorithms Symbolic mathematicsApplicationsOperating systemsComputer networks Computer graphics Computer vision DatabasesComputer security Articial intelligence Robotics Humancomputer interactionUbiquitous computing lundi 23 novembre 2009 11. COMPUTERINFORMATION SCIENCES SCIENCES lundi 23 novembre 2009 12. COMPUTER INFORMATION SCIENCESSCIENCESScience interdisciplinaireprincipalement concerne parla collection, le classement,la manipulation, le stockage,la recherche et la diffusiond'information. lundi 23 novembre 2009 13. PLATON(428 - 348 av.J.C.)INFORMATIONSCIENCESClassical categorization comes to us rst from Plato, who, in hisStatesman dialogue, introduces the approach of grouping objects based in their similar properties.This approach was further explored and systematized by Aristotle in hisCategories treatise, where he analyzes the differences betweenclasses 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 10December 1944) was an author, entrepreneur, visionary, lawyer andpeace activist; he is one of several people who have been consideredthe father of information science, a eld he called "documentation".INFORMATION Otlet created the Universal Decimal Classication, one of the mostSCIENCESprominent examples of facetedclassication. He envisioned later technical innovations but also projected a globalvision for information and information technologies that speaksdirectly to postwar visions of a global "information society."Otlet not only imagined that all the world's knowledge shouldbe interlinked and made available remotely toanyone, but he also proceeded to build a structured documentcollection. This collection involved standardized paper sheets andcards led in custom-designed cabinets according to a hierarchicalindex (which culled information worldwide from diverse sources) and acommercial information retrieval service (whichanswered written requests by copying relevant information from indexcards). Users of this service were even warned if their query was likelyto 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 andMIT professor credited with inventing the WorldWide Web, makingthe rst proposal for it in March 1989. On 25 December 1990, with theINFORMATION help of Robert Cailliau and a young student staff at CERN, heimplemented the rstsuccessful communicationSCIENCESbetween 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 thefounder of the World Wide Web Foundation, and is a senior researcherand holder of the 3Com Founders Chair at the MIT Computer Scienceand Articial Intelligence Laboratory (CSAIL).[3] He is a director of TheWeb Science Research Initiative (WSRI),[4] and a member of theadvisory board of the MIT Center for Collective Intelligence. lundi 23 novembre 2009 16. BibliometricsData modelingDocument managementGroupwareInformation architectureInformation ethicsInformation retrievalINFORMATION Information societySCIENCESInformation systemsIntellectual propertyKnowledge managementKnowledge engineeringPersonal information managementSemantic web lundi 23 novembre 2009 17. Contexte technologiqueLa boucle de linnovation lundi 23 novembre 2009 18. Usages Usages Usages Usages Usages Usages TEMPSTechnologie Technologie Technologie Technologie Technologie Technologie lundi 23 novembre 2009 19. Rseaux sociaux Blogs Usages Usages Usages Usages TEMPSTechnologie Technologie Technologie TechnologieW3C API lundi 23 novembre 2009 20. WEB 1 lundi 23 novembre 2009 21. VOUS ETES ICIWEB 1 WEB 2 lundi 23 novembre 2009 22. Contexte technologiqueCartographie lundi 23 novembre 2009 23. INFORMATIONNEL / POLITIQUE / DOCUMENTAIRE /SOCIAL // PRESSE INSTITUTIONNELINFORMATIONSCIENCES WEBCOMMERCE / CINEMA /MARKETING /TELEVISION PUBLICITECOMPUTER SCIENCESJEUX /PHOTO / VIDEO /MULTIMEDIA / ARTSCD-ROMGRAPHIQUESETC. lundi 23 novembre 2009 24. INFORMATIONSCIENCES.COM WEB COMPUTER SCIENCES lundi 23 novembre 2009 25. INFORMATIONSCIENCESWEB INFORMATIONNEL .COM WEBCOMPUTERAUDIOVISUEL SCIENCES lundi 23 novembre 2009 26. AUDIOVISUELINFORMATIONNEL Privilgie la surface Privilgie le fond Propritaire Standardis Recherche horizontale Recherche verticale Immersif Emmersif Dcouverte Organisation Notion de temps Intemporalit lundi 23 novembre 2009 27. AUDIOVISUEL WEB 1.0INFORMATIONNELMONDES DIVERTISSEMENT CULTURE ET TRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIREVIRTUELSMEDIA MazeShowtime.com Candystand.comAOL.com UsenetInfo.cern.ch lundi 23 novembre 2009 28. INFORMATIONNEL AUDIOVISUEL second lifewikipediaWoWarcraftVuitton Last.fm Dailymotion Ebay Facebook Blogs / NewsVoyages lundi 23 novembre 2009 29. Audiovisuel Informationnel second life wikipediaWoWarcraft JoostVuitton Last.fmYou Tube Ebay Facebook NYT.com BlogsVoyagesSecond LifeWikipedia.com lundi 23 novembre 2009 30. AudiovisuelInformationnel second life wikipediaWoWarcraft Vuitton Last.fm You TubeEbay Facebook Blogs / News Voyages vuitton.com - voyages Guardian.co.uk lundi 23 novembre 2009 31. AudiovisuelInformationnel second lifewikipediaWoWarcraft JoostVuitton Last.fm You Tube Ebay Facebook NYT.com BlogsVoyages Last.fm Dailymotion.com lundi 23 novembre 2009 32. Audiovisuel Informationnel second life wikipediaWoWarcraftJoostVuitton Last.fm You Tube Ebay Facebook NYT.com Blogs Voyages Dailymotion.com/jukebox3dLast.fm lundi 23 novembre 2009 33. AudiovisuelInformationnel MONDES DIVERTISSEMENT CULTURE ET TRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIRE VIRTUELSMEDIA Privilgie la surface Privilgie le fond Propritaire Standardis Recherche horizontale Recherche verticale Immersif Emmersif Dcouverte Organisation Notion de temps Intemporalitlundi 23 novembre 2009 34. WEB 1.5 AUDIOVISUEL INFORMATIONNEL MONDES DIVERTISSEMENT CULTURE ET TRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIRE VIRTUELSMEDIA lundi 23 novembre 2009 35. AUDIOVISUEL?INFORMATIONNEL MONDES DIVERTISSEMENT CULTURE ET TRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIRE VIRTUELSMEDIA lundi 23 novembre 2009 36. INFORMATIQUE LOGICIELLE (OPEN SOURCE) AUDIOVISUELINFORMATIONNEL MONDES DIVERTISSEMENT CULTURE ETTRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIRE VIRTUELSMEDIA lundi 23 novembre 2009 37. APPLICATIFWEB 2.0 AUDIOVISUEL INFORMATIONNEL MONDES DIVERTISSEMENT CULTURE ET TRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIRE VIRTUELSMEDIA lundi 23 novembre 2009 38. APPLICATIFDesktop ApplicationRich Desktop ApplicationAUDIOVISUELINFORMATIONNEL Rich Internet Application MONDES DIVERTISSEMENT CULTURE ETTRANSACTIONNEL COMMUNAUTAIRE DOCUMENTAIRE VIRTUELSMEDIA lundi 23 novembre 2009 39. Applicatif Desktop ApplicationiTunesGoogle Earth Rich Desktop Application Ebay DesktopGoogle DocsRich Internet Application Audiovisuel Informationnel Outils de second life publication webwikipediaWoWarcraftVuittonLast.fmDailymotion Ebay Facebook Blogs / NewsVoyages lundi 23 novembre 2009 40. Applicatif iTunes Ebay DesktopLogicielGoogle DocsInformationnelsecond life wikipediaWoWarcraft JoostVuitton Last.fmYou Tube Ebay Facebook NYT.com BlogsVoyages lundi 23 novembre 2009 41. Applicatif iTunes Ebay DesktopLogicielGoogle DocsInformationnelsecond life wikipediaWoWarcraft JoostVuitton Last.fmYou Tube Ebay Facebook NYT.com BlogsVoyages lundi 23 novembre 2009 42. Applicatif Desktop ApplicationiTunesGoogle Earth Rich Desktop Application Ebay DesktopGoogle DocsRich Internet Application Audiovisuel Informationnel Outils de second life publication webwikipediaWoWarcraftVuittonLast.fmDailymotion Ebay Facebook Blogs / NewsVoyages lundi 23 novembre 2009 43. Applicatif iTunes Ebay DesktopLogicielGoogle DocsInformationnelsecond life wikipediaWoWarcraft JoostVuitton Last.fmYou Tube Ebay Facebook NYT.com BlogsVoyages lundi 23 novembre 2009 44. Applicatif Audiovisuel Informationnel lundi 23 novembre 2009 45. Contexte mtierProfils en T lundi 23 novembre 2009 46. Applicatif Audiovisuel Informationnel lundi 23 novembre 2009 47. FONCTION FORME FONDDESIGN WEBlundi 23 novembre 2009 48. REALISATION & DEVELOPPEMENTFONCTIONINTERACTION &CONTENUS &INTERFACE ARCHITECTUREFORME FONDDESIGN WEBlundi 23 novembre 2009 49. Le design Web ncessite une dmarche dlaborationpluri-disciplinaire et, par consquent, des intervenants aux prols en forme de T (T-shaped people). T lundi 23 novembre 2009 50. T-shaped (TEE-shaypt) adj. Possder une comptence ou une connaissance qui soit la fois en profondeur et en largeur.tre T-shaped (en forme de T) signie avoir un noyau de comptences et une connaissance approfondie dans un domaine (la tige du T), mais galement un haut niveau de curiosit, de sensibilit et daptitudes permettant de se diversier rapidement et datteindre une bonne comprhension gnrale dautres domaines (la barre transversale du T). T lundi 23 novembre 2009 51. Contexte mtierLes mtiers du design interactif lundi 23 novembre 2009 52. Industrialisation du digital Naissance dun nouveau paradigme mtier Annes 90+Graphiste(s) Dveloppeur(s)Chef de projetlundi 23 novembre 2009 53. Industrialisation du digital Naissance dun nouveau paradigme mtier Annes 2000UX + + + ++StratgieArchitecte DesignerExpertDesigner Flash Motiondes contenusdinformation dinteraction utilisabilitdinterface designer+ + + + Developpeur DeveloppeurDeveloppeur Developpeur Chef de projet DOM / CSSFrontBackAS3lundi 23 novembre 2009 54. Contexte mtierElements de lexprience utilisateur lundi 23 novembre 2009 55. Les 5 lments de lexprience utilisateurhttp://www.jjg.net/elements/ surfacesquellettestructureprimtrestrategielundi 23 novembre 2009 56. ate contexts, and to clarify the underlying relationships among aceConcrete CompletionWeb as hypertext system Visual Design: visual treatment of text, tment of interface k-and-feel")Visual Designsurfacegraphic page elements and navigationalcomponents itional HCI:Navigation Design: design of interface ts to facilitate elements to facilitate the user's movementonality Interface Design Navigation Design through the information architecturesquellette Tuftean sense:of information Information Design Information Design: in the Tuftean sense:designing the presentation of informationto facilitate understandingpment of Interaction Information structureInformation Architecture: structural design timete user tasks,acts withDesign Architecture of the information space to facilitateintuitive access to content"feature set": nctionality the site FunctionalContentContent Requirements: definition ofprimtrecontent elements required in the site eet user needsSpecifications Requirementsin order to meet user needsved goalsUser Needs: externally derived goals ugh user research, cs, etc. User Needsfor the site; identified through user research,strategieethno/techno/psychographics, etc. creative, or otherthe siteSite Objectives Site Objectives: business, creative, or otherinternally derived goals for the site Abstract Conceptioninformation-orientedmplete: 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 2009http://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 navigationalcomponentsInterface 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 functionalityInterface Design Navigation Designthrough the information architecture Information Design: in the Tuftean sense: designing the presentation of informationInformation DesignInformation Design: in the Tuftean sense:designing the presentation of information to facilitate understandingto facilitate understandingInteraction Design: development of Interaction Information Information Architecture: structural designtime application flows to facilitate user tasks, defining how the user interacts withDesign Architecture of the information space to facilitateintuitive access to content site functionalityFunctional Specifications: "feature set": detailed descriptions of functionality the site FunctionalContentContent Requirements: definition ofcontent elements required in the site must include in order to meet user needsSpecifications Requirementsin order to meet user needsUser Needs: externally derived goals User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc.User Needsfor the site; identified through user research,ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the siteSite Objectives Site Objectives: business, creative, or otherinternally derived goals for the site task-orientedAbstractConception information-orientedThis 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 Denition des besoins Etude de contextes dusage Strategie fonctionnelleIA Strategie des contenus IxD Parcours utilisateurs Modlisation des objets Organisation de contenu Comportement dinterface Wireframes Organisation des gabarits Plannication fonctionnelle Spc. fonctionnelles Process Flow UX DESIGN UID Prototype Design dinterface Composants Front Flash Spcications graphiques Gabarits XHTML Catalogue dobjets Charte CSS Librairie dobjets Usability Conception des tests Recommandation et rapport dutilisabilit lundi 23 novembre 2009 59. UXDStratgie lundi 23 novembre 2009 60. Recherches utilisateurs lundi 23 novembre 2009 61. AnalyticsWeb analytics : termes dsignant la mesure, la collecte, lanalyse et la prsentation de donnes internet dans le but de comprendre et doptimiser les usages dun dispositif web. lundi 23 novembre 2009 62. Analytics lundi 23 novembre 2009 63. Quest-ce que le design centr utilisateur ?Le design centr utilisateur est une philosophie du design et un processus au sein desquels les besoins, les dsirs, et les limitations des utilisateurs dune interface font lobjet dune attention entire chaque tape du processus de design. lundi 23 novembre 2009 64. Qualitatif (insights) InterviewsTests dutilisabilitutilisateursButs et attitudesComportement(ce quils disent) (ce quils font)SondagesAnalysesutilisateurs de trafc & logs Quantitatif (validation)lundi 23 novembre 2009 65. Interview utilisateurLinterview utilisateur est une mthode permettant de dcouvrir des faits et des opinions dutilisateurs finaux potentiels du systme concevoir. Les interview sont en gnral mens en face--face, un utilisateur pour un interviewer la fois. lundi 23 novembre 2009 66. Sondage utilisateurLe sondage utilisateur a pour objectif de recueillir des informations auprs dun panel dutilisateur, au moyen dun questionnaire papier ou lectronique, sur des points permettant lamlioration dun produit dans le cadre de sa conception. lundi 23 novembre 2009 67. Test dutilisabilitLes tests dutilisabilit sont bass sur lobservation directe dutilisateurs spcifiques du produit. Cette mthode permet de recueillir des informations sur lutilisabilit dune interface pendant que les taches prdfinies sont effectues. lundi 23 novembre 2009 68. PersonaPersonnes fictives cres pour reprsenter les diffrents types dutilisateurs au sein dune cible demographique identifie succeptible dutiliser un site ou un produit. lundi 23 novembre 2009 69. Persona lundi 23 novembre 2009 70. Mthodes 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 dcouverte de lADN lundi 23 novembre 2009 72. BrainstormingLe brainstorming consiste rassembler des personnes afin de gnrer le plus grand nombre dides possibles afin de trouver des solutions une problmatique donne.La mthode de brainstorming appelle Cartographie des ides est la plus efficace en termes de conception. lundi 23 novembre 2009 73. Brainstorming lundi 23 novembre 2009 74. Focus groupsLe Focus Group consiste soumettre des ides un ensemble dutilisateurs (entre 5 et 10) et enregistrer leur ractions et leurs commentaires. lundi 23 novembre 2009 75. WorkshopLe workshop consiste rassembler des personnes (3 ou 4) impliques dans un projet pour une sance de conception de groupe. Lobjectif est trouver des solutions consolides plus rapidement des problmatiques prcises.Les problmatiques pouvant tre traites en workshop sont varies : design stratgie, persona, parcours utilisateurs, contenu, fonctionnalits, interaction, structure... lundi 23 novembre 2009 76. Workshop lundi 23 novembre 2009 77. Workshop lundi 23 novembre 2009 78. Workshop lundi 23 novembre 2009 79. Scnario utilisateur lundi 23 novembre 2009 80. Scnario utilisateur (de contexte)Le scnario utilisateur est le rcit de lusage fait par un persona dun service ou dun produit dans un contexte de vie dfini.Le scnario de contexte se concentre sur la faon dont le produit peut aider lutilisateur atteindre son but et non pas sur le fonctionnement du produit. lundi 23 novembre 2009 81. 3. Stratgie / scnario utilisateur lundi 23 novembre 2009 82. 3. Stratgie / scnario utilisateur lundi 23 novembre 2009 83. 3. Stratgie / scnario utilisateur lundi 23 novembre 2009 84. 3. Stratgie / scnario utilisateur lundi 23 novembre 2009 85. Framework lundi 23 novembre 2009 86. FrameworkUn framework est une structure conceptuelle fondamentale utilise pour traiter ou rsoudre des sujets complexes. Dans le contexte du design web, un framework est souvent reprsent sous la forme dun schma qui sert la fois de stratgie des moyens et de plan directeur. Cest la fois un guide et un outil. lundi 23 novembre 2009 87. lundi 23 novembre 2009 88. Extimate What I doWho I meetWhere I go Who I am Intimate 1 My account My profile My avatar2My bedroomThe schoolAdventure places3MembersFriends4Edutainment modulesMediaGames lundi 23 novembre 2009 89. Modle conceptuel lundi 23 novembre 2009 90. Modle conceptuelUn concept est une modlisation multidimensionnelle dobjets abstraits. lundi 23 novembre 2009 91. 3. Stratgie / modle conceptuel 2. 4 axes de conception / Conception stratgique / Schma conceptuel lundi 23 novembre 2009 92. View a Educative MediaRead / Listen toa Kinra StoryChar an ingcterarInteractions Le Ad Send MessageView a Kinra Media e to Friendve ti vABCntu ca View anWrite a note onSend a Gift to Friend u edutainment module a members Board resEdChat NavigationNavigation Lists Navigation mapand menusShortcuts create mycustomizeParticipate in a Quizz Bedroommy BedroomParticipate in an enigma See whos onlineExplore a Last visitedAdd a MemberObjects as Friend ? create customizemy Avatarmy Avatar CustBuild CExplore a oncreate my complete myPopular PlacesomTheme placeProfile Preferences raticreate my oAccount Na Invite "real" Friends n mm ploMake an artistic creation tiovVisit my i ganeighbors profilex Explore a iga uBookmarked ECampus placePlaceionitnstPlay a iemulti-player game es nvGenI Join a Group / Club eSee a members ratProfile Update my miniblog e layCo P nt laenuPlay at single-player game CasShare pictures lundi 23 novembre 2009 93. HERTA AvancCREERENREGISTRER CYCLE DE LEXPERIENCE UTILISATEUR Whislist Prfrences familialepersonnellesBasique EXPLORER COMPOSER PAR Pizza Ingredients Tartes Occasion Gateaux Membre familleEXPLORER& CHOISIR Avanc Basique PARTAGER & ACHETER & Basique AvancPARTICIPER ORGANISER PARTICIPER SUR PUBLIER SURORGANISER ORGANISER HertaRseauxShopping list ToDo list communitysociaux Rappel EXPORTER EXPORTER JOUERPARTICIPER SUR Impression Mobile Concours Facebook Fan Email CalendrierPage SERVICE PARTENAIRE CommandePREPARER & LivraisonSAMUSER FOLLOW COOK WITH Basique CoachReal-timewizardASIGNSWITCH Avanc RolesParent/childmodeslundi 23 novembre 2009 94. 3. Stratgie / modle conceptuelCas : Peclers Paris lundi 23 novembre 2009 95. 3. Stratgie / modle conceptuel lundi 23 novembre 2009 96. 3. Stratgie / modle conceptuel lundi 23 novembre 2009 97. 3. Stratgie / modle conceptuel lundi 23 novembre 2009 98. 3. Stratgie / modle conceptuel lundi 23 novembre 2009 99. 3. Stratgie / modle conceptuel lundi 23 novembre 2009 100. Contenuslundi 23 novembre 2009 101. Stratgie des contenusVue densemble lundi 23 novembre 2009 102. Vue densemble stratgie ditoriale rdaction interactive SEO (optimisation des moteurs de recherche) stratgie de la gestion des contenus stratgie des canaux de distribution lundi 23 novembre 2009 103. Stratgies des contenusFramework ditorial lundi 23 novembre 2009 104. Framework ditorialUn framework est une structure conceptuelle fondamentale utilise pour traiter ou rsoudre des sujets complexes.Un framework ditorial permet dtablir des repres 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 106. Framework ditorial lundi 23 novembre 2009 107. Framework ditorial lundi 23 novembre 2009 108. Framework ditorial lundi 23 novembre 2009 109. Framework ditorial lundi 23 novembre 2009 110. Framework ditorial lundi 23 novembre 2009 111. Framework ditorial lundi 23 novembre 2009 112. Stratgies des contenusMatrice ditoriale lundi 23 novembre 2009 113. Matrice ditorialeUne matrice ditoriale est une grille de rpartition des types de contenus selon des critres structurants : thmatiques, formats, rubriques, priodicit... Cest un outil de plannification qualitative des contenus.Une matrice ditoriale permet : de faire surgir des dsquilibres conceptuels de guider la production des contenus lundi 23 novembre 2009 114. lundi 23 novembre 2009 115. lundi 23 novembre 2009 116. Mum's Journey Created August 2009PrenatalNewbornBabyIt's all about mumFusional 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 12 3456 789 10begin weaning transition from breastmilk to bottle leaves the hospital quality time with baby: evening meals importantgeneral announcement 1st weekpregnancy testmaternity leave check-up leaving baby with nanny or familylook for maternity clothes first night home Mum's Milestones choosing a doctor back at work (for some) tellingmaternityfeeling more "normal" baby cries whenregistration baby blues mum leaves dadchecks ups with doctor/ gynecologist once a month starting to get out and aboutin a "bubble", at home with baby9 monthsanxiety about viability of pregnancyNesting: final preparation forcheck-upbuying food adaptedbaby's arrival morning sicknessfor pregnancybirth announcedbaby starts to sleep through the night (informal) start of cravings register for day nursery getting pre-pregnancy body backbirth announced first ultrasound : (formal cards) second ultrasoundexpected birth date sharing new developments with friends & familybirth classesrebuilding a couplenotice body changes life after birthbaby moves to own room researching information about pregnancy & birthfirst games with baby baby's firstmonthly appointments with doctor (vaccinations, check-ups)kickI'm a Will he be allergic?What will baby Is baby ready for home-mWhat 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 aBreastfeeding How ca lundi 23 novembre 2009 How do my habits good Mum? or bottle?Is baby developingWhen will she affect my baby? 117. Conception de contenus webFormatage lundi 23 novembre 2009 118. Formats ditoriauxLes formats ditoriaux traditionnels sont bien connus : article, liste, interview, citation, extrait, note, fiche, rsum, lgende...La communication digitale a autoris une dmultiplication des formats ditoriaux... lundi 23 novembre 2009 119. Formats ditoriaux lundi 23 novembre 2009 120. Formats ditoriaux lundi 23 novembre 2009 121. Formats ditoriauxCertains formats ont radicalement chang notre manire de communiquer et de publier linformation : email blogs questions-rponses (Yahoo Answers...) wiki social bookmarking twitter ... lundi 23 novembre 2009 122. Conception de contenus webEnrichissement lundi 23 novembre 2009 123. Enrichissement rdactionnelComment enrichir un article, un document, une page..? lundi 23 novembre 2009 124. Enrichissement rdactionnelComment enrichir un article, un document, une page..? lundi 23 novembre 2009 125. lundi 23 novembre 2009 126. Enrichissement rdactionnelphoto audio chiffres diagrammes fichiers tlcharger fiches complmentaires liens contextuels module interactifs services (email, partage, impression...) ...lundi 23 novembre 2009 127. UXDStructurelundi 23 novembre 2009 128. Au sein dun systme, quil soit de nature biologique, mcanique, informatique, conomique, social... quil soit simple ou complexe, une structure bien conue apporte intgrit et adaptabilit. lundi 23 novembre 2009 129. Dome godsique de Montral prinicipe invent par Buckminster Fuller lundi 23 novembre 2009 130. Architecture dinformationPrincipes lundi 23 novembre 2009 131. PrincipesLa pratique de larchitecture dinformation concerne la cration de modles dorganisation et de navigation qui permettent lutilisateur de se dplacer dans les contenus dun site de manire efficace et efficiente. lundi 23 novembre 2009 132. PrincipesPour crer une organisation et une navigation, il est possible daborber la question de 2 manires : approche descendante approche montante lundi 23 novembre 2009 133. Principes approche descendantecatgories contenu lundi 23 novembre 2009 134. Principes approche montantecatgoriescontenu lundi 23 novembre 2009 135. 5. Structures / architecture dinformationPrincipes combiner les deux approches est souvent ncessairecatgories contenu lundi 23 novembre 2009 136. Principes concevoirune structure capable de sadapter au changement et de saccomoder dune augmentation des contenus lundi 23 novembre 2009 137. Principes Lunitde base des structures dinformation est le nud. Nud Page lundi 23 novembre 2009 138. Principes Structure hirarchique Relation entre les nuds : type parent-enfant lundi 23 novembre 2009 139. 4. Contenus / architecture dinformationPrincipes Structure hirarchique lundi 23 novembre 2009 140. 4. Contenus / architecture dinformationPrincipes Structure hirarchique lundi 23 novembre 2009 141. 4. Contenus / architecture dinformationPrincipes Structure hirarchique lundi 23 novembre 2009 142. 4. Contenus / architecture dinformationPrincipes Structure hirarchique lundi 23 novembre 2009 143. Principes Structurematricielle 3 dimensions lundi 23 novembre 2009 144. 4. Contenus / architecture dinformationPrincipes Structure matricielle 3 dimensions lundi 23 novembre 2009 145. 4. Contenus / architecture dinformationPrincipes Structure matricielle 3 dimensions lundi 23 novembre 2009 146. Principes Structureorganique lundi 23 novembre 2009 147. 4.Structure architecture dinformation Contenus / organique : internet Principes lundi 23 novembre 2009 148. 4. Contenus / architecture dinformationPrincipes Structureorganique : wikipedia lundi 23 novembre 2009 149. Principes Structuresquentielle lundi 23 novembre 2009 150. 4. Contenus / architecture dinformationPrincipes Structuresquentielle lundi 23 novembre 2009 151. Principes Vocabulaire et nomenclature vocabulaire control metadata (information sur linformation) lundi 23 novembre 2009 152. 4. Contenus / architecture dinformationPrincipes Vocabulaire et nomenclature lundi 23 novembre 2009 153. 4. Contenus / architecture dinformationPrincipes Vocabulaire et nomenclature lundi 23 novembre 2009 154. 4. Contenus / architecture dinformationPrincipes Vocabulaire et nomenclature lundi 23 novembre 2009 155. 4. Contenus / architecture dinformationPrincipes Vocabulaire et nomenclature lundi 23 novembre 2009 156. 4. Contenus / architecture dinformationPrincipes Vocabulaire et nomenclature lundi 23 novembre 2009 157. Architecture dinformationWireframes lundi 23 novembre 2009 158. Problmatique lipsum LorSe e m natu d ut ps e ersp rroric iati sit iatisvolu und om s undpta e onanis e tem mnisis is volutus err te Loremte pta or s iatitem it om s undnatunis is e volu s err te iati Sedpta or som s unduttem it natus perspici na nis is eerroratsit vo is unde omvolutus err teluptatpta or sem nis is te tem itiatis un omni delipsum lipsumnatuss isteiatis un Lorem volupt error sitatem omni de natuss istevolupt error sitatem iatis unomni denatuss isteSed ut perspiciatis unde omnis iste volupt error sit atemnatus error sit voluptatem iatis unde iatis unde iatis undeomnis iste omnis iste omnis istenatus error sitnatus error sitnatus error sitvoluptatem voluptatem voluptatemlipsum? xxxxxxxxxxxxxxx xxx xxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx RECHERCHExxxxxxx MA SELECTION CONTACTACCUEIL PLAN DU SITEMENTIONS LEGALESCREDITSAUTRES SITES 3.04.05.0PEAUYEUX KLORANE 3.1 4.15.1 ACTUALITES GAMME GAMMEGAMME GAMME GAMME GAMME5.2 NOS ENGAGEMENTSFICHE PLANTE5.3 LA RECHERCHEFICHE PLANTE 5.4 LA PHYTOFILIERE3.1.1 4.1.1 5.5 FICHE PRODUIT FICHE PRODUIT DECOUVRIRFICHE PRODUIT FICHE PRODUITFICHE PRODUITFICHE PRODUITPLANTES REGION QUESTIONS/QUESTIONS/ REPONSESREPONSES 3.2 4.2 FICHES CONSEILFICHES CONSEIL lundi 23 novembre 2009 159. ZoningUn gabarit (ou squelette ou layout) est la structure visuelle persistante qui dfinit la charpente dune interface. La variations dun gabarit dfinissent en partie les tats dune interface. Les gabarits constituent le fondement des wireframes. La mthode de construction dun gabarit sappelle le zoning. lundi 23 novembre 2009 160. WireframesLes wireframes sont des reprsentations visuelles qui capturent elles seules lensemble des dcisions stratgiques, fonctionnelles, darchitecture dinformation et dergonomie.Ils servent de rfrence pour le design graphique et pour le dveloppement du projet digital. Ils contiennent diffrents niveaux de prcision selon le contexte. lundi 23 novembre 2009 161. lundi 23 novembre 2009 162. Zoning HEADER AccueilLe magazineVotre santNos produitsNaturactiveNAVrechercher ProfessionnelsSantCrer votre agenda santDigestion difficile En quelques clics, compltez votre profil santCirculation et profitez de conseils personnaliss pourFatiguegarder la forme !StressSommeilPartout avec vous, mme sur votre mobileMaux de tteEtat grippalDouleurs articulairesFeminitEquilibreVitalitMaux de lhiverConfort respiratoirePodcastNutritionA loccasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de lfficacit clinique de la phythothrapieVoir tous les sujetsVos conseils sant naturelle tout au long de Au coeur de lactualit1lanneBeaut / Bien-tre2 Vos astuces formeMinceurChute des cheveux 3 Les conseils dun phytothrapeuteBeaut des cheveuxDermo-nutritionBronzage Crer mon agendaCOL 1COL 2COL 3Voir tous les sujets Le stress est-il Chute deLutter contre les communicatif ? cheveux rhumes rptitionTmoignagesBenoit MontComment feiner laLe tmoignageConnaissance & plantes psychologuechute de ou favoriser dune internaute rpond toutes nos la reposusse dcouvrirStressquestions...Consultez plus de 150 articles deSommeil rfrence sur la phytothrapieRhumeMinceur Produits Posez des questions sant, forme et ?Mnopausebien-tre, des experts rpondent vosVoir tous les sujetsquestionsVotre pharmacieLe test du moisNaturactiveDcouvrez votre profil minceur Aromathrapie Phytothrapie Dermo-nutrition Menez vous une vie stressante ? code poste OK Doriance Anti-ge Phytaroma Elusanes Amliorer sonRsoudre lesLutter contre leTrouvez les produits confort respiratoiretroubles passagers photo-vieillissementNaturactive, les plusdu sommeilproces de chez vous ouipas spcialement pas du tout lundi 23 novembre 2009 163. Zoning MARQUE AccueilLe magazineVotre santNos produitsNaturactiverechercherProfessionnelsSantCrer votre agenda santDigestion difficile En quelques clics, compltez votre profil santCirculation et profitez de conseils personnaliss pourFatiguegarder la forme !StressSommeilPartout avec vous, mme sur votre mobileMaux de tteEtat grippalDouleurs articulairesFeminitCRMEquilibreVitalitMaux de lhiverACCOMPAGNEMENTConfort respiratoirePodcastINFORMATIONS DACTUALITNutritionA loccasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de lfficacit clinique de la phythothrapie INFORMATIONS DE FOND PDAGOGIQUEVoir tous les sujetsVos conseils sant naturelle tout au long de Au coeur de lactualit1lanneBeaut / Bien-tre PARTICIPATIF2 Vos astuces formeMinceurChute des cheveux Les conseils dun phytothrapeuteBeaut THEMES3 des cheveuxDermo-nutritionBronzage Crer mon agendaVoir tous les sujets Le stress est-il Chute deLutter contre les communicatif ? cheveux rhumes rptitionTmoignagesBenoit MontComment feiner laLe tmoignageConnaissance & plantes psychologuechute de ou favoriser dune internaute rpond toutes nos la reposusse dcouvrirStressquestions...Consultez plus de 150 articles deSommeilPDAGOGIQUErfrence sur la phytothrapieRhumeMinceur ACCOMPAGNEMENT et ProduitsPosez des questions sant, forme ?Mnopausebien-tre, des experts rpondent vosVoir tous les sujetsquestionsVotre pharmacieLe test du mois MARQUENaturactiveDcouvrez votre profil minceur Aromathrapie Phytothrapie Dermo-nutrition Menez vous une vie stressante ? code poste OK Phytaroma ElusanesDoriance Anti-ge PARTICIPATIF Amliorer sonRsoudre lesLutter contre leTrouvez les produits confort respiratoiretroubles passagers photo-vieillissementNaturactive, les plusdu sommeilproces de chez vous ouipas spcialement pas du tout lundi 23 novembre 2009 164. Zoning lundi 23 novembre 2009 165. Zoning lundi 23 novembre 2009 166. Exemples lundi 23 novembre 2009 167. Exemples lundi 23 novembre 2009 168. Exemples lundi 23 novembre 2009 169. Exemples lundi 23 novembre 2009 170. Exemples lundi 23 novembre 2009 171. Architecture dinformationDesign dinformation lundi 23 novembre 2009 172. In order to do a better job of developing, communicating, and pursuing a strategy, you need to learn to think like a designer Tim Brown, ceo IDEO, Strategy by Design, June 2005 lundi 23 novembre 2009 173. TactiqueStructuration de linformationDesign fonctionnelSpcicationlogiqueDocumentationConception AnalysesConceptionstatistiques stratgiqueEtudes stratgiques Stratgiquelundi 23 novembre 2009 174. Tactique Structurationdelinformation DesignfonctionnelSpcicationlogiqueDocumentation Conception Analyses ConceptionstatistiquesStratgique Etudesstratgiques Stratgiquelundi 23 novembre 2009 175. lundi 23 novembre 2009 176. lundi 23 novembre 2009 177. lundi 23 novembre 2009 178. lundi 23 novembre 2009 179. lundi 23 novembre 2009 180. Extimate What I doWho I meetWhere I go Who I am Intimate 1 My account My profile My avatar2My bedroomThe schoolAdventure places3MembersFriends 4Edutainment modulesMediaGamesCorolle Kinra Girls lundi 23 novembre 2009 181. View a Educative MediaRead / Listen toa Kinra StoryChar an ingcterarInteractions Le Ad Send MessageView a Kinra Media e to Friendve ti vABCntu ca View anWrite a note onSend a Gift to Friend edutainment module a members Board u resEdChat NavigationNavigation Lists Navigation mapand menusShortcuts create mycustomizeParticipate in a Quizz Bedroommy BedroomParticipate in an enigma See whos onlineExplore a Last visitedAdd a MemberObjects as Friend ? create customizemy Avatarmy Avatar CustBuild CExplore a on create my complete myPopular PlacesoTheme placeProfile PreferencesmN raticreate my o mmAccount Invite "real" Friends ion ploMake an artistic creationa vigVisit my ga tneighbors profilex Explore a uniBookmarkedCampus placea EPlaceio s tin tiePlay amulti-player game es nvGenI Join a Group / Club eSee a members ratProfile Update my miniblog e layCon P l en ta uPlay at single-player game CasShare pictures lundi 23 novembre 2009 182. lundi 23 novembre 2009 183. Plateforme Gifted2D post-achatUser concept model CommandeLivraisonsachat ProduitFeedbacks pr-achat Conseiller personnelAmbassadeurs + GroupesContenus et offres personnalisescoach recoit suit conseillent despersonnalisenouveautspeut renvoyer Boutiques en ligneInterfacedonne customisereoit 2D personnalisecre Gifted Userbrowse, achte, WishlistProl personnalise des produitscreMagazinecreen ligneconsulte Gardeajout deorganiseproduits robe cre 3D consultent, conseilleessaientvisitepartagent AvatarEspacesregarde,virtuelles non- participe marchandsGifted Friendsconsulte l!avatarEvnementsde ses amisvirtuels envoiedes cadeaux conduit Service cadeaux 3Dlundi 21 septembre 2009 lundi 23 novembre 2009 184. CISCO BFM TV / WIKITV ACCUEILLIVE Phase 2 CISCO BFM WIKITV AnnoncePrsentation CISCO BFM WIKITV emission LIVEcercles dediscussionsFLUX LIVE LIVE Archives emissionsCommentairesProjetsDiscussions Commentairesrcentes Liste retenus par laparticipants rdaction MODERATIONslection de membres slection de discussionsslection de projets BLOG REDACTION Blog rdaction Commentaires ARCHIVES EMISSIONSArchives des Prsentation emissionsemission Remonte Remonte RemonteProls Commentaires ProjetsSujets participants THEMATIQUESPROJETS Phase 2Sujets Sujets Thme Thme Sujets Sujets Thme ThmeProjets Sujets SujetsThme ThmePrsentation Commentaires Educationetc.projetCercle de discussion (dtail) Prsentation Forum/ blog de Sujets Thme Sujets Thme thme discussionCERCLES (sujet) Economiede discussions Environ.t SujetsThmeThme Sujets Wiki projetSujets ThmeThme Sujets Sant Sport Sujets Thme Thme SujetsSujetsThme Thme Thme Thme SujetsSujets SujetsCOMMUNAUTE InscriptionProl simple Messagerie Crer un projetinterne Simple CrateurValidation lundi 23 novembre 2009 185. lundi 23 novembre 2009 186. Choose Guys / GirlsM/W Menu Browse collectionsFind your size (cf truejeans.com, zafu.com)Add to wishlist Discover the perfect match1. measure DetailsImprove your look 2. body shape preview } } } }Event selection CATALOG RedTab EngineeredBlueVintage Want to feel different ? Pushed content Display productProduct ColoursAdd to wishlistpicturePatternsDiscover the perfect matchPushed content DetailsImprove your lookAdd to wishlist ZoomEvent selectionDiscover the perfect match Find your sizeWant to feel different ? Discover the perfect match Improve your lookEvent selectionWant to feel different ?TopsOtherTopsTops ProductExpertBrowse by Browse by reviews picturerevieweventsmood FIT GUIDE BottomsBottoms BottomsFind your size Shoes Find your size ShoesFind your size ShoesAccessoriesAccessories Accessories Pushed contentPushed contentPushed contentPushed content Add to wishlistEvent selection Add to wishlist Add to wishlistImprove your lookDiscover the perfect matchImprove your look Improve your lookRegistration formRegistration formRegistration form Post your look / reviews / comment Find your size (results)Wishlist COMMUNITYOther 3. resultsProduct listUsersreviewsreviewsPRINTPushed content Pushed content Add to wishlistEvent selectionReceive info (newsletter / RSS...)Discover the perfect match Discover the perfect match PERSONNALOtherProductreviewsreviews lundi 23 novembre 2009 187. lundi 23 novembre 2009 188. CISCO : HUMAN NETWORKFlux des Membres lesdiscussions+ actifstous thmes ProleVersacAccueil Landing page Cercles de discussionsEmissions BlogProjets Phase 2Connexion & Mon compte InscriptionCatgoriePrsentation EspaceConnexion Mon ProlMesSommaire ThmatiqueSujet (forum) LiveEmissions Sommaire SommaireForum Projet ProjetsProjetAdministration prfrences ProjetFlux desFlux des Flux video Vido Flux des Liste desListe des Prsentation Flux des discussions discussions Live dernire rsums projetsprojetsprojet (extrait) comentaires tous thmes tous sujetsemiision Poster un UploadPoster un Projets lesProjets les sujetvideo Push Prole plus plus ProleMembres les Projets en commentaireDiscussion prochainecrateur Contacts+ actifs relation liveVersac commentscomments emissionPoster unTexte deProjets lesProjets lescommentaire prsentationVoterFichiers joints Projets Liste des plus rcents plus rcentsInscription rcentsBaromtreemissions Upload Proposer un Liste des Liste des Video dePhotosBillet Blog sujet Liste des catgoriescatgories prsentationds thmesujets Upload ValidationGaleriedocumentsemail Editer monEditer mesphotosprol public informationsPoster unGestion du commentaire forum SupprimerPoster unmon compteBillet commentaire Validation ouvertureespace projetProposerPoster un Articleun projet commentaire prsentation(suite) lundi 23 novembre 2009 189. lundi 23 novembre 2009 190. lundi 23 novembre 2009 191. 3. Stratgie / notions de design dinformationACCUEILRechercheRECHERCHERRESULTATS DE RECHERCHE0.0 Accueil R.0 Recherche R.0.1 R.0.1.1 Carnets R.2.1 Rsultatsnon logg Editorial editorial R.0.1.2 Q-R R.0.2 R.0.2.1 Membres R.2.2 RsultatsCommunautCommunaut R.0.1.2 GroupesR.1 Explorer(tags)Carnets de parentsPARCOURIR LES CARNETS REDIGER UN COMMENTAIRE1.1 Sommaire 1.2 Thme 1.3 Carnet 1.4 Billeta.1 Identication 1.4 Billet + form. m.1 bloccommentaireConrmationa.2 inscription 0.1 Rediger uncommentaireCREER UN CARNETREDIGER UN BILLET 0.2 Crer votrecarneta.1 Identication c.4.1 Reglages c.4.3 Rediger unCarnet billeta.2 inscriptionFONCTIONS ASSOCIESf.2 Envoyer un f.2.1 Pop-in m.1. blocamiFormulaire ConrmationQuestions-rponsesPARCOURIR LES Q-R REPONDRE A UNE QUESTIONREPONSES2.1 Sommaire 2.2 Thme 2.3 Question a.1 Identication 2.3 Rpondre m.1. bloc 2.3.2 Rponseune question Conrmationa.2 inscriptionPOSER UNE QUESTION 0.3 Poser une a.1 Identication 2.4 Poser unequestionquestiona.2 inscriptionFONCTIONS ASSOCIESf.2 Envoyer un f.2.1 Pop-in m.1. bloc f.3 Alerterf.3.1 Pop-inm.1. blocamiFormulaire Conrmation ladministrateur FormulaireConrmationCommunaut V2PARCOURIR LA COMMUNAUTE REJOINDRE UN GROUPEEXPLORER UN GROUPEPARTICIPER A UNE DISCUSSION3.1 Communaut 3.1.2 Tous les3.1.3 Thme 3.1.4 Groupe a.1 Identication g.0. Inscription a.3 Conrmation g.1 Groupeg.2 Discussionsg.2 Discussion g.3 Publier un groupes (che) groupe email (accueil) groupecommentairea.2 inscription PUBLIER UNE DISCUSSIONAJOUTER PARENTS PRFRS3.2 Tous les 3.2.2 Fichea.1 Identication 3.2.2 Ficheg.4 Crer unemembresmembre membre + discussiona.2 inscription pop-in alerteCONTACTER MEMBREa.1 Identication 3.2.2 Fichemembre + pop-a.2 inscription in message AJOUTER AMISa.1 Identication 3.2.2 Fichemembre +a.2 inscription pop-in message lundi 23 novembre 2009 192. UXDInteractionlundi 23 novembre 2009 193. DfinitionLe design dinteraction appliqu au secteur logiciel et web est la discipline qui traite du comportement de linterface avec laquelle interagit un utilisateur. La discipline sintresse au comportement des gabarits et des composants dinterface. lundi 23 novembre 2009 194. Design dinteractionPrototype lundi 23 novembre 2009 195. Degr de prcision Interactif Basse rsolutionHaute rsolutionStatique lundi 23 novembre 2009 196. Degr de prcision Interactif Basse rsolutionHaute rsolutionStatique lundi 23 novembre 2009 197. Degr de prcision Interactif Basse rsolutionHaute rsolutionSketchingStatique lundi 23 novembre 2009 198. Degr de prcision Interactif Low rsolutionHi rsolutionSketchingStatique lundi 23 novembre 2009 199. Degr de prcision Interactif Basse rsolutionHaute rsolutionSketchingStatique lundi 23 novembre 2009 200. Degr de prcision Interactif Prototype papier Basse rsolutionHaute rsolutionSketchingStatique lundi 23 novembre 2009 201. Degr de prcision Interactif Prototype papier Low rsolutionHi rsolutionSketchingStatique lundi 23 novembre 2009 202. Degr de prcision InteractifPrototype papier Basse rsolutionHaute rsolutionSketching SketchingStatique lundi 23 novembre 2009 203. Degr de prcision InteractifPrototype papier Basse rsolutionHaute rsolution EcransSketching Sketching (psd, jpg...)Statique lundi 23 novembre 2009 204. Degr de prcision InteractifPrototype papier Low rsolutionHi rsolution EcransSketching Sketching (psd, jpg...)Statique lundi 23 novembre 2009 205. Degr de prcision InteractifPrototype papier Basse rsolutionHaute rsolutionSketching Sketching EcransStatique lundi 23 novembre 2009 206. Degr de prcision InteractifPrototype Prototype digital papier(HTML, Flash) Basse rsolutionHaute rsolutionSketching Sketching EcransStatique lundi 23 novembre 2009 207. Degr de prcision InteractifPrototype Prototype digital papier(HTML, Flash) Low rsolutionHi rsolutionSketching Sketching MockupStatique lundi 23 novembre 2009 208. Degr de prcision InteractifPrototypePrototype papierdigital Basse rsolutionHaute rsolutionSketching Sketching EcransStatique lundi 23 novembre 2009 209. Degr de prcision InteractifPrototypePrototype papierdigital Basse rsolution Wireframes Haute rsolutionSketchingEcransStatique lundi 23 novembre 2009 210. Degr de prcision InteractifPrototype Prototype papier digital Basse rsolution WireframesHaute rsolutionNIDO Website - 1.1.1 Diary Hi Lynn| My account | Log Out | HelpNIDO Home MomentsHealth Matters Our Range My Activities| Capture a moment| Diary |Highlights | My friends |Health TrackerJohns Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar AngelicaShow meAll entries Starting from rst day | today Only highlightsEdit my pro le12Lorem ipsum et diliagt gentris sed etiam unique valor,Your Friends (14)MAYmelior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, PeterEveryday | 2 comments new Family & Friends View all! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAYmelior paritus. Et uni soesu terrae submitta...You have: 6 family members, 14 3friends you have new comments!Si meliora est vede meccum !> View all Everyday | 2 comments newYour highlightsSlideshow 10 Lorem ipsum et diliagt gentris sed etiam MAY unique valor, melior paritus. Et uni soesu terrae submitta... Health Matters Everyday | 2 comments Spotting & Treating Food Allergies 08Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! > How to know if your childEveryday | 2 comments newis at risk06Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! Everyday | 2 comments05Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! Everyday | 2 comments Contact UsPrivacy Terms & privacy CopyrightsSend to a friendSketching EcransStatique lundi 23 novembre 2009 211. Hi Lynn| My account | Log Out | Help Degr de prcision NIDO Home MomentsHealth Matters Our Range My Activities| Capture a moment| Diary |Highlights | My friends |Health TrackerJohns Family Diary TELL MY FRIENDS NOW ! Edit friends listInteractifOscar AngelicaPrototype Show meAll entries Starting from rst day | today Only highlights Prototype papier Edit my pro le digital12Lorem ipsum et diliagt gentris sed etiam unique valor,Your Friends (14)MAYmelior paritus. Et uni soesu terrae submitta...Recently addedSi meliora est vede meccum !Mary, Ellen, Peter Everyday | 2 comments newView all11Lorem ipsum et diliagt gentris sed etiam unique valor,Comments MAYmelior paritus. Et uni soesu terrae submitta... 3 you have new comments! Si meliora est vede meccum ! Everyday | 2 comments newYour highlightsSlideshow 10 Lorem ipsum et diliagt gentris sed etiam Wireframes MAY unique valor, melior paritus. Et uni soesu Basse rsolution Health Matters terrae submitta... Haute rsolution Everyday | 2 commentsSpotting & TreatingFood Allergies 08Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! > How to know if your childEveryday | 2 comments newis at risk06Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! Everyday | 2 comments05Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Sketching Si meliora est vede meccum !Ecrans Everyday | 2 commentsStatique Contact UsPrivacy Terms & privacy CopyrightsSend to a friend lundi 23 novembre 2009 212. Degr de prcision InteractifPrototype Prototype papier digital Basse rsolution WireframesHaute rsolutionNIDO Website - 1.1.1 Diary Hi Lynn| My account | Log Out | HelpNIDO Home MomentsHealth Matters Our Range My Activities| Capture a moment| Diary |Highlights | My friends |Health TrackerJohns Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar AngelicaShow meAll entries Starting from rst day | today Only highlightsEdit my pro le12Lorem ipsum et diliagt gentris sed etiam unique valor,Your Friends (14)MAYmelior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, PeterEveryday | 2 comments new Family & Friends View all! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAYmelior paritus. Et uni soesu terrae submitta...You have: 6 family members, 14 3friends you have new comments!Si meliora est vede meccum !> View all Everyday | 2 comments newYour highlightsSlideshow 10 Lorem ipsum et diliagt gentris sed etiam MAY unique valor, melior paritus. Et uni soesu terrae submitta... Health Matters Everyday | 2 comments Spotting & Treating Food Allergies 08Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! > How to know if your childEveryday | 2 comments newis at risk06Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! Everyday | 2 comments05Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! Everyday | 2 comments Contact UsPrivacy Terms & privacy CopyrightsSend to a friendSketching EcransStatique lundi 23 novembre 2009 213. Degr de prcision InteractifPrototype Prototype papier digital Basse rsolution WireframesHaute rsolutionNIDO Website - 1.1.1 Diary Hi Lynn| My account | Log Out | HelpNIDO Home MomentsHealth Matters Our Range My Activities| Capture a moment| Diary |Highlights | My friends |Health TrackerJohns Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar AngelicaShow meAll entries Starting from rst day | today Only highlightsEdit my pro le12Lorem ipsum et diliagt gentris sed etiam unique valor,Your Friends (14)MAYmelior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, PeterEveryday | 2 comments new Family & Friends View all! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAYmelior paritus. Et uni soesu terrae submitta...You have: 6 family members, 14 3friends you have new comments!Si meliora est vede meccum !> View all Everyday | 2 comments newYour highlightsSlideshow 10 Lorem ipsum et diliagt gentris sed etiam MAY unique valor, melior paritus. Et uni soesu terrae submitta... Health Matters Everyday | 2 comments Spotting & Treating Food Allergies 08Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! > How to know if your childEveryday | 2 comments newis at risk06Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! Everyday | 2 comments05Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! Everyday | 2 comments Contact UsPrivacy Terms & privacy CopyrightsSend to a friendSketching EcransStatique lundi 23 novembre 2009 214. Degr de prcision InteractifPrototypePrototype papierdigital Low rsolution WireframesHi rsolutionNIDO Website - 1.1.1 Diary Hi Lynn| My account | Log Out | HelpNIDO Home MomentsHealth Matters Our Range My Activities| Capture a moment| Diary |Highlights | My friends |Health TrackerJohns Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar AngelicaShow meAll entries Starting from rst day | today Only highlightsEdit my pro le12Lorem ipsum et diliagt gentris sed etiam unique valor,Your Friends (14)MAYmelior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, PeterEveryday | 2 comments new Family & Friends View all! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAYmelior paritus. Et uni soesu terrae submitta...You have: 6 family members, 14 3friends you have new comments!Si meliora est vede meccum !> View all Everyday | 2 comments newYour highlightsSlideshow 10 Lorem ipsum et diliagt gentris sed etiam MAY unique valor, melior paritus. Et uni soesu terrae submitta... Health Matters Everyday | 2 comments Spotting & Treating Food Allergies 08Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! > How to know if your childEveryday | 2 comments newis at risk06Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! Everyday | 2 comments05Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! Everyday | 2 comments Contact UsPrivacy Terms & privacy CopyrightsSend to a friendSketching MockupStatique lundi 23 novembre 2009 215. Degr de prcision InteractifPrototypePrototype papierdigital Low rsolution WireframesHi rsolutionNIDO Website - 1.1.1 Diary Hi Lynn| My account | Log Out | HelpNIDO Home MomentsHealth Matters Our Range My Activities| Capture a moment| Diary |Highlights | My friends |Health TrackerJohns Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar AngelicaShow meAll entries Starting from rst day | today Only highlightsEdit my pro le12Lorem ipsum et diliagt gentris sed etiam unique valor,Your Friends (14)MAYmelior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, PeterEveryday | 2 comments new Family & Friends View all! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAYmelior paritus. Et uni soesu terrae submitta...You have: 6 family members, 14 3friends you have new comments!Si meliora est vede meccum !> View all Everyday | 2 comments newYour highlightsSlideshow 10 Lorem ipsum et diliagt gentris sed etiam MAY unique valor, melior paritus. Et uni soesu terrae submitta... Health Matters Everyday | 2 comments Spotting & Treating Food Allergies 08Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! > How to know if your childEveryday | 2 comments newis at risk06Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! Everyday | 2 comments05Lorem ipsum et diliagt gentris sed etiam unique valor, MAYmelior paritus. Et uni soesu terrae submitta...Si meliora est vede meccum ! Everyday | 2 comments Contact UsPrivacy Terms & privacy CopyrightsSend to a friendSketching EcransStatique lundi 23 novembre 2009 216. Design dinteractionDesigner les comportements dobjets lundi 23 novembre 2009 217. Formalisation Codesvisuels montrant le potentiel dinteraction lundi 23 novembre 2009 218. Drag and Drop lundi 23 novembre 2009 219. Formalisation Codes visuels montrant le potentiel dinteractionDplacements au click et motion design lundi 23 novembre 2009 220. Formalisation Scnario dinteraction statique lundi 23 novembre 2009 221. lundi 23 novembre 2009 222. Formalisation Charte dinteraction (statique ou interactive) lundi 23 novembre 2009 223. 1.0 Interface gnrale FormalisationRemarque gnrale sur le motion design : on prend ici comme principe que tout changement dtatde linterface se fera par un interpolation sur les proprits concernes (Tween avec easing Out).1 TerreComportement local - cas hors France rollOver : press :5 1Sur toute la terre, en dehors des Le curseur main diminue de taille La rotation de la terre se faitrgion, le curseur passe en tatde 10%. uniquement selon laxe de ci-spcial mainSi une fentre est ouvertedessus.(lment 5, ci-contre) lorsquon3dplace la terre, celle ci-sereferme aussitt par unmouvement inverse avec lequelelle sest ouverte. 2version : 24/11/08auteur : David Raichman lundi 23 novembre 2009 224. Formalisation Wireframeanim lundi 23 novembre 2009 225. 7. Interaction / design dinteraction Formalisation lundi 23 novembre 2009