Présentation : Designer l'Experience Utilisateur

  • 3,312 views
Uploaded on

Designer l'Experience Utilisateur …

Designer l'Experience Utilisateur
Présenté à :
- L'Ecole de Communication de SciencesPo Paris.
- Ecole de Commerce EDC - Paris La Défense.
2009

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • hello can you send me this presentation in ppt please to bouchairi87raid@yahoo.fr

    thank's
    Are you sure you want to
    Your message goes here
  • au sujet de ta slide 53.
    je pense que l'interactivité est en effet l'affaire de plusieurs professionnels qui doivent travailler ensemble en agence.
    planneurs stratégique 2.0 = content manager x designer interactif x community manager.
    (chacun pouvant etre un planneur quand il maitrise a la fois les contenus, les gens, les interfaces)
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,312
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
229
Comments
2
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 6. 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 Artificial intelligence Robotics Human–computer interaction Ubiquitous computing lundi 23 novembre 2009
  • 11. COMPUTER INFORMATION SCIENCES SCIENCES 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 first 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
  • 41. 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
  • 43. 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
  • 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 profils “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) signifie 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 diversifier 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 traffic & 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
  • 77. Workshop lundi 23 novembre 2009
  • 78. 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
  • 82. 3. Stratégie / scénario utilisateur lundi 23 novembre 2009
  • 83. 3. Stratégie / scénario utilisateur lundi 23 novembre 2009
  • 84. 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
  • 96. 3. Stratégie / modèle conceptuel lundi 23 novembre 2009
  • 97. 3. Stratégie / modèle conceptuel lundi 23 novembre 2009
  • 98. 3. Stratégie / modèle conceptuel lundi 23 novembre 2009
  • 99. 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
  • 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. 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
  • 114. lundi 23 novembre 2009
  • 115. 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
  • 125. 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
  • 140. 4. Contenus / architecture d’information Principes • Structure hiérarchique lundi 23 novembre 2009
  • 141. 4. Contenus / architecture d’information Principes • Structure hiérarchique lundi 23 novembre 2009
  • 142. 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
  • 153. 4. Contenus / architecture d’information Principes • Vocabulaire et nomenclature lundi 23 novembre 2009
  • 154. 4. Contenus / architecture d’information Principes • Vocabulaire et nomenclature lundi 23 novembre 2009
  • 155. 4. Contenus / architecture d’information Principes • Vocabulaire et nomenclature lundi 23 novembre 2009
  • 156. 4. Contenus / architecture d’information Principes • Vocabulaire et nomenclature lundi 23 novembre 2009
  • 157. Architecture d’information Wireframes lundi 23 novembre 2009
  • 158. Problématique lipsum Lor “Se e m natu d ut p s e ersp rror ic iati sit iatis volu und om s und pta e o na nis e tem mn is is is volutus err te “ Lorem te pta or s iati tem it om s und natunis is e volu s err te iati “Sed pta or s om s und ut tem it natus perspici na nis is e error at sit vo is unde om volutus err te luptat pta or s em “ nis is te tem it iatis un omni de lipsum lipsum natuss iste iatis un Lorem volupt error sit atem omni de natuss iste volupt error sit atem iatis un omni de natuss iste “Sed ut perspiciatis unde omnis iste volupt error sit atem natus error sit voluptatem “ iatis unde iatis unde iatis unde omnis iste omnis iste omnis iste natus error sit natus error sit natus error sit voluptatem voluptatem voluptatem lipsum ? xxxxxxx •xxxxxxxx •xxx xxxxxxx •xxxxxxxx xxxxxxx •xxxxxx •xxxxxxxx xxxxxxx •xxxxxxx xxxxxxx xxxxxxx RECHERCHE xxxxxxx MA SELECTION CONTACT ACCUEIL PLAN DU SITE MENTIONS LEGALES CREDITS AUTRES SITES 3.0 4.0 5.0 PEAU YEUX KLORANE 3.1 4.1 5.1 ACTUALITES GAMME GAMME GAMME GAMME GAMME GAMME 5.2 NOS ENGAGEMENTS FICHE PLANTE 5.3 LA RECHERCHE FICHE PLANTE 5.4 LA PHYTOFILIERE 3.1.1 4.1.1 5.5 FICHE PRODUIT FICHE PRODUIT DECOUVRIR FICHE PRODUIT FICHE PRODUIT FICHE PRODUIT FICHE PRODUIT PLANTES REGION QUESTIONS/ QUESTIONS/ REPONSES REPONSES 3.2 4.2 FICHES CONSEIL FICHES CONSEIL lundi 23 novembre 2009
  • 159. Zoning Un gabarit (ou squelette ou layout) est la structure visuelle persistante qui définit la charpente d’une interface. La variations d’un gabarit définissent en partie les états d’une interface. Les gabarits constituent le fondement des wireframes. La méthode de construction d’un gabarit s’appelle le zoning. lundi 23 novembre 2009
  • 160. Wireframes Les wireframes sont des représentations visuelles qui capturent à elles seules l’ensemble des décisions stratégiques, fonctionnelles, d’architecture d’information et d’ergonomie. Ils servent de référence pour le design graphique et pour le développement du projet digital. Ils contiennent différents niveaux de précision selon le contexte. lundi 23 novembre 2009
  • 161. lundi 23 novembre 2009
  • 162. Zoning HEADER Accueil Le magazine Votre santé Nos produits NaturactiveNAVrechercher Professionnels Santé Créer votre agenda santé Digestion difficile En quelques clics, complétez votre profil santé Circulation et profitez de conseils personnalisés pour Fatigue garder la forme ! Stress Sommeil Partout avec vous, même sur votre mobile Maux de tête Etat grippal Douleurs articulaires Feminité Equilibre Vitalité Maux de l’hiver Confort respiratoire Podcast Nutrition A l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie Voir tous les sujets Vos conseils santé naturelle tout au long de Au coeur de l’actualité 1 l’année Beauté / Bien-être 2 Vos astuces forme Minceur Chute des cheveux 3 Les conseils d’un phytothérapeute Beauté des cheveux Dermo-nutrition Bronzage Créer mon agenda COL 1 COL 2 COL 3 Voir tous les sujets Le stress est-il Chute de Lutter contre les communicatif ? cheveux rhumes à répétition Témoignages Benoit Monté Comment feiner la Le témoignage Connaissance & plantes psychologue chute de ou favoriser d’une internaute à répond à toutes nos la reposusse découvrir Stress questions... Consultez plus de 150 articles de Sommeil référence sur la phytothérapie Rhume Minceur Produits Posez des questions santé, forme et ? Ménopause bien-être, des experts répondent à vos Voir tous les sujets questions Votre pharmacie Le test du mois Naturactive Découvrez votre profil minceur Aromathérapie Phytothérapie Dermo-nutrition Menez vous une vie stressante ? code poste OK Doriance Anti-âge Phytaroma Elusanes Améliorer son Résoudre les Lutter contre le Trouvez les produits confort respiratoire troubles passagers photo-vieillissement Naturactive, les plus du sommeil proces de chez vous oui pas spécialement pas du tout lundi 23 novembre 2009
  • 163. Zoning MARQUE Accueil Le magazine Votre santé Nos produits Naturactive rechercher Professionnels Santé Créer votre agenda santé Digestion difficile En quelques clics, complétez votre profil santé Circulation et profitez de conseils personnalisés pour Fatigue garder la forme ! Stress Sommeil Partout avec vous, même sur votre mobile Maux de tête Etat grippal Douleurs articulaires Feminité CRM Equilibre Vitalité Maux de l’hiver ACCOMPAGNEMENT Confort respiratoire Podcast INFORMATIONS DʼACTUALITÉ Nutrition A l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie INFORMATIONS DE FOND PÉDAGOGIQUE Voir tous les sujets Vos conseils santé naturelle tout au long de Au coeur de l’actualité 1 l’année Beauté / Bien-être PARTICIPATIF 2 Vos astuces forme Minceur Chute des cheveux Les conseils d’un phytothérapeute Beauté THEMES 3 des cheveux Dermo-nutrition Bronzage Créer mon agenda Voir tous les sujets Le stress est-il Chute de Lutter contre les communicatif ? cheveux rhumes à répétition Témoignages Benoit Monté Comment feiner la Le témoignage Connaissance & plantes psychologue chute de ou favoriser d’une internaute à répond à toutes nos la reposusse découvrir Stress questions... Consultez plus de 150 articles de Sommeil PÉDAGOGIQUE référence sur la phytothérapie Rhume Minceur ACCOMPAGNEMENT et Produits Posez des questions santé, forme ? Ménopause bien-être, des experts répondent à vos Voir tous les sujets questions Votre pharmacie Le test du mois MARQUE Naturactive Découvrez votre profil minceur Aromathérapie Phytothérapie Dermo-nutrition Menez vous une vie stressante ? code poste OK Phytaroma Elusanes Doriance Anti-âge PARTICIPATIF Améliorer son Résoudre les Lutter contre le Trouvez les produits confort respiratoire troubles passagers photo-vieillissement Naturactive, les plus du sommeil proces de chez vous oui pas spécialement 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 d’information Design d’information 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. Tactique Structuration de l’information Design fonctionnel Spécification logique Documentation Conception Analyses Conception statistiques stratégique Etudes stratégiques Stratégique lundi 23 novembre 2009
  • 174. Tactique Structuration de l’information Design fonctionnel Spécification logique Documentation Conception Analyses Conception statistiques Stratégique Etudes stratégiques Stratégique lundi 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 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 Corolle Kinra Girls lundi 23 novembre 2009
  • 181. 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 edutainment module a member’s Board u 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 o Theme place Profile Preferences mN rati create my o mm Account Invite "real" Friends ion plo Make an artistic creation a vig Visit my ga t neighbors’ profile x Explore a uni Bookmarked Campus place a E Place io s ti n tie Play a multi-player game e s nv Gen I Join a Group / Club e See a member’s rat Profile Update my miniblog e lay Con P l en t a u Play a t single-player game Cas Share pictures lundi 23 novembre 2009
  • 182. lundi 23 novembre 2009
  • 183. Plateforme Gifted 2D post-achat User concept model Commande Livraisons achat Produit Feedbacks pré-achat Conseiller personnel Ambassadeurs + Groupes Contenus et offres personnalisées coach recoit suit conseillent des personnalise nouveautés peut renvoyer Boutiques en ligne Interface donne customisée reçoit 2D personnalise crée Gifted User browse, achète, Wishlist Profil personnalise des produits crée Magazine crée en ligne consulte Garde ajout de organise produits robe crée 3D consultent, conseille essaient visite partagent Avatar Espaces regarde, virtuelles non- participe marchands Gifted Friends consulte l!avatar Evénements de ses amis virtuels envoie des cadeaux conduit à Service cadeaux 3D lundi 21 septembre 2009 lundi 23 novembre 2009
  • 184. CISCO BFM TV / WIKITV ACCUEIL LIVE Phase 2 CISCO BFM WIKITV Annonce Présentation CISCO BFM WIKITV emission LIVE cercles de discussions FLUX LIVE LIVE Archives emissions Commentaires Projets Discussions Commentaires récentes Liste retenus par la participants rédaction MODERATION sélection de membres sélection de discussions sélection de projets BLOG REDACTION Blog rédaction Commentaires ARCHIVES EMISSIONS Archives des Présentation emissions emission Remontée Remontée Remontée Profils Commentaires Projets Sujets participants THEMATIQUES PROJETS Phase 2 Sujets Sujets Thème Thème Sujets Sujets Thème Thème Projets Sujets Sujets Thème Thème Présentation Commentaires Education etc. projet Cercle de discussion (détail) Présentation Forum/ blog de Sujets Thème Sujets Thème théme discussion CERCLES (sujet) Economie de discussions Environ.t Sujets Thème Thème Sujets Wiki projet Sujets Thème Thème Sujets Santé Sport Sujets Thème Thème Sujets Sujets Thème Thème Thème Thème Sujets Sujets Sujets COMMUNAUTE Inscription Profil simple Messagerie Créer un projet interne Simple Créateur Validation lundi 23 novembre 2009
  • 185. lundi 23 novembre 2009
  • 186. Choose Guys / Girls M/W Menu Browse collections Find your size (cf truejeans.com, zafu.com) Add to wishlist Discover the perfect match 1. measure Details Improve your look 2. body shape preview } } } } Event selection CATALOG RedTab Engineered Blue Vintage Want to feel different ? Pushed content Display product Product Colours Add to wishlist picture Patterns Discover the perfect match Pushed content Details Improve your look Add to wishlist Zoom Event selection Discover the perfect match Find your size Want to feel different ? Discover the perfect match Improve your look Event selection Want to feel different ? Tops Other Tops Tops Product Expert Browse by Browse by reviews picture review events mood FIT GUIDE Bottoms Bottoms Bottoms Find your size Shoes Find your size Shoes Find your size Shoes Accessories Accessories Accessories Pushed content Pushed content Pushed content Pushed content Add to wishlist Event selection Add to wishlist Add to wishlist Improve your look Discover the perfect match Improve your look Improve your look Registration form Registration form Registration form Post your look / reviews / comment Find your size (results) Wishlist COMMUNITY Other 3. results Product list Users reviews reviews PRINT Pushed content Pushed content Add to wishlist Event selection Receive info (newsletter / RSS...) Discover the perfect match Discover the perfect match PERSONNAL Other Product reviews reviews lundi 23 novembre 2009
  • 187. lundi 23 novembre 2009
  • 188. CISCO : HUMAN NETWORK Flux des Membres les discussions + actifs tous thèmes Profile Versac Accueil Landing page Cercles de discussions Emissions Blog Projets Phase 2 Connexion & Mon compte Inscription Catégorie Présentation Espace Connexion Mon Profil Mes Sommaire Thématique Sujet (forum) Live Emissions Sommaire Sommaire Forum Projet Projets Projet Administration préférences Projet Flux des Flux des Flux video Vidéo Flux des Liste des Liste des Présentation Flux des discussions discussions Live dernière résumés projets projets projet (extrait) comentaires tous thèmes tous sujets emiision Poster un Upload Poster un Projets les Projets les sujet video Push Profile plus plus Profile Membres les Projets en commentaire Discussion prochaine créateur Contacts + actifs relation live Versac commentés commentés emission Poster un Texte de Projets les Projets les commentaire présentation Voter Fichiers joints Projets Liste des plus récents plus récents Inscription récents Baromêtre emissions Upload Proposer un Liste des Liste des Video de Photos Billet Blog sujet Liste des catégories catégories présentation ds théme sujets Upload Validation Galerie documents email Editer mon Editer mes photos profil public informations Poster un Gestion du commentaire forum Supprimer Poster un mon compte Billet commentaire Validation ouverture espace projet Proposer Poster un Article un projet commentaire présentation (suite) lundi 23 novembre 2009
  • 189. lundi 23 novembre 2009
  • 190. lundi 23 novembre 2009
  • 191. 3. Stratégie / notions de design d’information ACCUEIL Recherche RECHERCHER RESULTATS DE RECHERCHE 0.0 Accueil R.0 Recherche R.0.1 R.0.1.1 Carnets R.2.1 Résultats non loggé Editorial editorial R.0.1.2 Q-R R.0.2 R.0.2.1 Membres R.2.2 Résultats Communauté Communauté R.0.1.2 Groupes R.1 Explorer (tags) Carnets de parents PARCOURIR LES CARNETS REDIGER UN COMMENTAIRE 1.1 Sommaire 1.2 Thème 1.3 Carnet 1.4 Billet a.1 Identification 1.4 Billet + form. m.1 bloc commentaire Confirmation a.2 inscription 0.1 Rediger un commentaire CREER UN CARNET REDIGER UN BILLET 0.2 Créer votre carnet a.1 Identification c.4.1 Reglages c.4.3 Rediger un Carnet billet a.2 inscription FONCTIONS ASSOCIÉES f.2 Envoyer à un f.2.1 Pop-in m.1. bloc ami Formulaire Confirmation Questions-réponses PARCOURIR LES Q-R REPONDRE A UNE QUESTION REPONSES 2.1 Sommaire 2.2 Thème 2.3 Question a.1 Identification 2.3 Répondre à m.1. bloc 2.3.2 Réponse une question Confirmation a.2 inscription POSER UNE QUESTION 0.3 Poser une a.1 Identification 2.4 Poser une question question a.2 inscription FONCTIONS ASSOCIÉES f.2 Envoyer à un f.2.1 Pop-in m.1. bloc f.3 Alerter f.3.1 Pop-in m.1. bloc ami Formulaire Confirmation l’administrateur Formulaire Confirmation Communauté V2 PARCOURIR LA COMMUNAUTE REJOINDRE UN GROUPE EXPLORER UN GROUPE PARTICIPER A UNE DISCUSSION 3.1 Communauté 3.1.2 Tous les 3.1.3 Thème 3.1.4 Groupe a.1 Identification g.0. Inscription a.3 Confirmation g.1 Groupe g.2 Discussions g.2 Discussion g.3 Publier un groupes (fiche) groupe email (accueil) groupe commentaire a.2 inscription PUBLIER UNE DISCUSSION AJOUTER PARENTS PRÉFÉRÉS 3.2 Tous les 3.2.2 Fiche a.1 Identification 3.2.2 Fiche g.4 Créer une membres membre membre + discussion a.2 inscription pop-in alerte CONTACTER MEMBRE a.1 Identification 3.2.2 Fiche membre + pop- a.2 inscription in message AJOUTER AMIS a.1 Identification 3.2.2 Fiche membre + a.2 inscription pop-in message lundi 23 novembre 2009
  • 192. UXD Interaction lundi 23 novembre 2009
  • 193. Définition Le design d’interaction appliqué au secteur logiciel et web est la discipline qui traite du comportement de l’interface avec laquelle interagit un utilisateur. La discipline s’intéresse au comportement des gabarits et des composants d’interface. lundi 23 novembre 2009
  • 194. Design d’interaction Prototype lundi 23 novembre 2009
  • 195. Degré de précision Interactif Basse résolution Haute résolution Statique lundi 23 novembre 2009
  • 196. Degré de précision Interactif Basse résolution Haute résolution Statique lundi 23 novembre 2009
  • 197. Degré de précision Interactif Basse résolution Haute résolution Sketching Statique lundi 23 novembre 2009
  • 198. Degré de précision Interactif Low résolution Hi résolution Sketching Statique lundi 23 novembre 2009
  • 199. Degré de précision Interactif Basse résolution Haute résolution Sketching Statique lundi 23 novembre 2009
  • 200. Degré de précision Interactif Prototype papier Basse résolution Haute résolution Sketching Statique lundi 23 novembre 2009
  • 201. Degré de précision Interactif Prototype papier Low résolution Hi résolution Sketching Statique lundi 23 novembre 2009
  • 202. Degré de précision Interactif Prototype papier Basse résolution Haute résolution Sketching Sketching Statique lundi 23 novembre 2009
  • 203. Degré de précision Interactif Prototype papier Basse résolution Haute résolution Ecrans Sketching Sketching (psd, jpg...) Statique lundi 23 novembre 2009
  • 204. Degré de précision Interactif Prototype papier Low résolution Hi résolution Ecrans Sketching Sketching (psd, jpg...) Statique lundi 23 novembre 2009
  • 205. Degré de précision Interactif Prototype papier Basse résolution Haute résolution Sketching Sketching Ecrans Statique lundi 23 novembre 2009
  • 206. Degré de précision Interactif Prototype Prototype digital papier (HTML, Flash) Basse résolution Haute résolution Sketching Sketching Ecrans Statique lundi 23 novembre 2009
  • 207. Degré de précision Interactif Prototype Prototype digital papier (HTML, Flash) Low résolution Hi résolution Sketching Sketching Mockup Statique lundi 23 novembre 2009
  • 208. Degré de précision Interactif Prototype Prototype papier digital Basse résolution Haute résolution Sketching Sketching Ecrans Statique lundi 23 novembre 2009
  • 209. Degré de précision Interactif Prototype Prototype papier digital Basse résolution Wireframes Haute résolution Sketching Ecrans Statique lundi 23 novembre 2009
  • 210. Degré de précision Interactif Prototype Prototype papier digital Basse résolution Wireframes Haute résolution NIDO Website - 1.1.1 Diary Hi Lynn | My account | Log Out | Help NIDO Home Moments Health Matters Our Range My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker John’s Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar Angelica Show me All entries Starting from rst day | today Only highlights Edit my pro le 12 Lorem ipsum et diliagt gentris sed etiam unique valor, Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, Peter Everyday | 2 comments new Family & Friends View all ! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAY melior paritus. Et uni soesu terrae submitta... You have: 6 family members, 14 3 friends you have new comments! Si meliora est vede meccum ! > View all Everyday | 2 comments new Your highlights Slideshow 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 08 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! > How to know if your child Everyday | 2 comments new is at risk 06 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments 05 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments Contact Us Privacy Terms & privacy Copyrights Send to a friend Sketching Ecrans Statique lundi 23 novembre 2009
  • 211. Hi Lynn | My account | Log Out | Help Degré de précision NIDO Home Moments Health Matters Our Range My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker John’s Family Diary TELL MY FRIENDS NOW ! Edit friends list Interactif Oscar Angelica Prototype Show me All entries Starting from rst day | today Only highlights Prototype papier Edit my pro le digital 12 Lorem ipsum et diliagt gentris sed etiam unique valor, Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! Mary, Ellen, Peter Everyday | 2 comments new View all 11 Lorem ipsum et diliagt gentris sed etiam unique valor, Comments MAY melior paritus. Et uni soesu terrae submitta... 3 you have new comments! Si meliora est vede meccum ! Everyday | 2 comments new Your highlights Slideshow 10 Lorem ipsum et diliagt gentris sed etiam Wireframes MAY unique valor, melior paritus. Et uni soesu Basse résolution Health Matters terrae submitta... Haute résolution Everyday | 2 comments Spotting & Treating Food Allergies 08 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! > How to know if your child Everyday | 2 comments new is at risk 06 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments 05 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Sketching Si meliora est vede meccum ! Ecrans Everyday | 2 comments Statique Contact Us Privacy Terms & privacy Copyrights Send to a friend lundi 23 novembre 2009
  • 212. Degré de précision Interactif Prototype Prototype papier digital Basse résolution Wireframes Haute résolution NIDO Website - 1.1.1 Diary Hi Lynn | My account | Log Out | Help NIDO Home Moments Health Matters Our Range My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker John’s Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar Angelica Show me All entries Starting from rst day | today Only highlights Edit my pro le 12 Lorem ipsum et diliagt gentris sed etiam unique valor, Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, Peter Everyday | 2 comments new Family & Friends View all ! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAY melior paritus. Et uni soesu terrae submitta... You have: 6 family members, 14 3 friends you have new comments! Si meliora est vede meccum ! > View all Everyday | 2 comments new Your highlights Slideshow 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 08 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! > How to know if your child Everyday | 2 comments new is at risk 06 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments 05 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments Contact Us Privacy Terms & privacy Copyrights Send to a friend Sketching Ecrans Statique lundi 23 novembre 2009
  • 213. Degré de précision Interactif Prototype Prototype papier digital Basse résolution Wireframes Haute résolution NIDO Website - 1.1.1 Diary Hi Lynn | My account | Log Out | Help NIDO Home Moments Health Matters Our Range My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker John’s Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar Angelica Show me All entries Starting from rst day | today Only highlights Edit my pro le 12 Lorem ipsum et diliagt gentris sed etiam unique valor, Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, Peter Everyday | 2 comments new Family & Friends View all ! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAY melior paritus. Et uni soesu terrae submitta... You have: 6 family members, 14 3 friends you have new comments! Si meliora est vede meccum ! > View all Everyday | 2 comments new Your highlights Slideshow 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 08 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! > How to know if your child Everyday | 2 comments new is at risk 06 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments 05 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments Contact Us Privacy Terms & privacy Copyrights Send to a friend Sketching Ecrans Statique lundi 23 novembre 2009
  • 214. Degré de précision Interactif Prototype Prototype papier digital Low résolution Wireframes Hi résolution NIDO Website - 1.1.1 Diary Hi Lynn | My account | Log Out | Help NIDO Home Moments Health Matters Our Range My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker John’s Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar Angelica Show me All entries Starting from rst day | today Only highlights Edit my pro le 12 Lorem ipsum et diliagt gentris sed etiam unique valor, Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, Peter Everyday | 2 comments new Family & Friends View all ! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAY melior paritus. Et uni soesu terrae submitta... You have: 6 family members, 14 3 friends you have new comments! Si meliora est vede meccum ! > View all Everyday | 2 comments new Your highlights Slideshow 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 08 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! > How to know if your child Everyday | 2 comments new is at risk 06 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments 05 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments Contact Us Privacy Terms & privacy Copyrights Send to a friend Sketching Mockup Statique lundi 23 novembre 2009
  • 215. Degré de précision Interactif Prototype Prototype papier digital Low résolution Wireframes Hi résolution NIDO Website - 1.1.1 Diary Hi Lynn | My account | Log Out | Help NIDO Home Moments Health Matters Our Range My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker John’s Family Diary TELL MY FRIENDS NOW ! Edit friends list Oscar Angelica Show me All entries Starting from rst day | today Only highlights Edit my pro le 12 Lorem ipsum et diliagt gentris sed etiam unique valor, Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta... Recently added Si meliora est vede meccum ! 3 You have new comments ! Mary, Ellen, Peter Everyday | 2 comments new Family & Friends View all ! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor, invitation Comments 11 MAY melior paritus. Et uni soesu terrae submitta... You have: 6 family members, 14 3 friends you have new comments! Si meliora est vede meccum ! > View all Everyday | 2 comments new Your highlights Slideshow 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 08 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! > How to know if your child Everyday | 2 comments new is at risk 06 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments 05 Lorem ipsum et diliagt gentris sed etiam unique valor, MAY melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum ! Everyday | 2 comments Contact Us Privacy Terms & privacy Copyrights Send to a friend Sketching Ecrans Statique lundi 23 novembre 2009
  • 216. Design d’interaction Designer les comportements d’objets lundi 23 novembre 2009
  • 217. Formalisation • Codes visuels montrant le potentiel d’interaction lundi 23 novembre 2009
  • 218. Drag and Drop lundi 23 novembre 2009
  • 219. Formalisation ‣ Codes visuels montrant le potentiel d’interaction Déplacements au click et motion design lundi 23 novembre 2009
  • 220. Formalisation • Scénario d’interaction statique lundi 23 novembre 2009
  • 221. lundi 23 novembre 2009
  • 222. Formalisation • Charte d’interaction (statique ou interactive) lundi 23 novembre 2009
  • 223. 1.0 Interface générale Formalisation Remarque générale sur le motion design : on prend ici comme principe que tout changement d’état de l’interface se fera par un interpolation sur les propriétés concernées (Tween avec easing Out). 1 Terre Comportement local - cas hors France •rollOver : •press : 5 1 Sur toute la terre, en dehors des Le curseur main diminue de taille La rotation de la terre se fait région, le curseur passe en état de 10%. uniquement selon l’axe de ci- spécial main Si une fenêtre est ouverte dessus. (élément 5, ci-contre) lorsqu’on 3 déplace la terre, celle ci-se referme aussitôt par un mouvement inverse avec lequel elle s’est ouverte. 2 version : 24/11/08 auteur : David Raichman lundi 23 novembre 2009
  • 224. Formalisation • Wireframe animé lundi 23 novembre 2009
  • 225. 7. Interaction / design d’interaction Formalisation lundi 23 novembre 2009