Your SlideShare is downloading. ×
Design d'Information
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Design d'Information

7,999
views

Published on

Design d'information …

Design d'information
Le design d'expérience utilisateur vu à travers le design d'information
Gobelins - Ecole de l'Image
2009

Published in: Design

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,999
On Slideshare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
188
Comments
0
Likes
4
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. worldwide Design d’information pour le web Ecole des Gobelins - Décembre 2008
  • 2. Design d’information pour le web SOMMAIRE ‣ Introduction : éléments de contexte ‣ 4 axes de conception ‣ 6 questions à se poser ‣ Outils
  • 3. Design d’information pour le web “Design is the intermediacy between information and understanding” Richard Grefé Executive director, American Institute of Graphic Arts (AIGA)
  • 4. Design d’information pour le web “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 http://www.fastcompany.com/magazine/95/design-strategy.html
  • 5. Design d’information pour le web
  • 6. Design d’information pour le web INTRODUCTION ‣ Emergence d’une profession ‣ Eléments du design d’information ‣ Eléments de l’expérience utilisateur
  • 7. Design d’information pour le web 1. Introduction / Emergence d’une profession ‣ Emergence d’une profession ‣ Contributeurs ‣ Profils
  • 8. Design d’information pour le web 1. Introduction / Emergence d’une profession Contributeurs * Les sciences cognitives regroupent un ensemble de disciplines scientifiques dédiées à l'étude et la compréhension des mécanismes de la pensée humaine, animale ou artificielle, et plus généralement de tout système cognitif, c'est-à- dire tout système complexe de traitement de l'information capable d'acquérir, conserver, et transmettre des connaissances. Avec les sciences cognitives* qui établissent les fondamentaux...
  • 9. Design d’information pour le web 1. Introduction / Emergence d’une profession Contributeurs ...des recherches appliquées dans de multiples domaines... Design Représentation Design de Communication Typographie et d’interface de données matériel éducatif visuelle design graphique Avec les sciences cognitives* qui établissent les fondamentaux...
  • 10. Design d’information pour le web 1. Introduction / Emergence d’une profession Contributeurs ...et des professionnels qui pratiquent en fonction d’intérêts variés... Rédacteurs Analystes et de manuels Chercheurs Designers Vulgariseurs Collectionneurs Inventeurs Documentalistes systémistes d’instruction ...des recherches appliquées dans de multiples domaines... Design Représentation Design de Communication Typographie et d’interface de données matériel éducatif visuelle design graphique Avec les sciences cognitives* qui établissent les fondamentaux...
  • 11. Design d’information pour le web 1. Introduction / Emergence d’une profession Contributeurs Tiré de : “Information Design”, Robert Jacobson, MIT Press ...une nouvelle profession émerge : LE DESIGN D’INFORMATION ...et des professionnels qui pratiquent en fonction d’intérêts variés... Rédacteurs Analystes et de manuels Chercheurs Designers Vulgariseurs Collectionneurs Inventeurs Documentalistes systémistes d’instruction ...des recherches appliquées dans de multiples domaines... Design Représentation Design de Communication Typographie et d’interface de données matériel éducatif visuelle design graphique Avec les sciences cognitives* qui établissent les fondamentaux...
  • 12. Design d’information pour le web 1. Introduction / Emergence d’une profession Profils Management de l’information Organisation Stratégie Séquençage Standardisation
  • 13. Design d’information pour le web 1. Introduction / Emergence d’une profession Profils Management de l’information Organisation Stratégie Séquençage Standardisation Technologies Publication Formats Portage Systèmes d’information
  • 14. Design d’information pour le web 1. Introduction / Emergence d’une profession Profils Management Visualisation de l’information de l’information Organisation Intégration Stratégie Design Séquençage Rédaction Standardisation Résolution de conflits Technologies Publication Formats Portage Systèmes d’information
  • 15. Design d’information pour le web 1. Introduction / Emergence d’une profession Profils Inspiré par : http://informationr.net Management Visualisation de l’information de l’information Organisation Intégration Stratégie Design Séquençage Rédaction Standardisation Résolution de conflits Technologies Publication Formats Portage Systèmes d’information
  • 16. Design d’information pour le web 1. Introduction / Emergence d’une profession Profils Management PROFIL EN T Visualisation de l’information de l’information Systèmes d’information
  • 17. Design d’information pour le web 1. Introduction / Emergence d’une profession Profils PROFILS EN T Management Visualisation Systèmes Visualisation Management Systèmes de l’information de l’information d’information de l’information de l’information d’information Systèmes Management Visualisation d’information de l’information de l’information
  • 18. Design d’information pour le web 1. Introduction / Eléments du design d’information ‣ Eléments du design d’information “Information design is the defining, planning, and shaping of the contents of a message and the environments it is presented in with the intention of achieving particular objectives in relation to the needs of users.” International Institute for Information Design http://www.iiid.net/Definitions.htm
  • 19. Design d’information pour le web 1. Introduction / Eléments du design d’information ‣ Eléments du design d’information ‣ Visualisation de données ‣ Visualisation d’information ‣ Visualisation de concept ‣ Visualisation de stratégie ‣ Visualisation métaphorique ‣ Visualisation composée
  • 20. Design d’information pour le web 1. Introduction / Eléments du design d’information Visualisation de données Représentation visuelle de données quantitatives sous forme schématique Histogram chart Pie chart Table chart + Pie Chart
  • 21. Design d’information pour le web 1. Introduction / Eléments du design d’information Visualisation d’information Utilisation d’une représentation interactive de données pour augmenter la cognition. Network data map Interactive map
  • 22. Design d’information pour le web 1. Introduction / Eléments du design d’information Visualisation de concept Elaboration de concepts qualitatifs, d’idées, de plans d’actions et d’analyses. Concept Map Gant Chart
  • 23. Design d’information pour le web 1. Introduction / Eléments du design d’information Visualisation de strategie Utilisation de représentation visuel dans l’analyse, le développement, la formulation, la communication de strategie au sein d’une organisation. Decision discovery diagram Life Cycle diagram Strategic map
  • 24. Design d’information pour le web 1. Introduction / Eléments du design d’information Visualisation métaphorique Utilisation de métaphores visuelles pour véhiculer une vision à partir de la représentation d’information.
  • 25. Design d’information pour le web 1. Introduction / Eléments du design d’information Visualisation composée Composition de différents types de représentations au sein d’un même schéma. Graphic facilitation Cartoon
  • 26. Design d’information pour le web 1. Introduction / Eléments de l’expérience utilisateur ‣ Eléments de l’expérience utilisateur The Elements of User Experience http://www.jjg.net/elements/
  • 27. 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 Design d’information pour le web 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 1. Introduction / Eléments de l’expérience utilisateur 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/
  • 28. 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 Design d’information pour le web 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 1. Introduction / Eléments de l’expérience utilisateur 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/
  • 29. 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 Design d’information pour le web 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 1. Introduction / Eléments de l’expérience utilisateur 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/
  • 30. 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 Design d’information pour le web 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 1. Introduction / Eléments de l’expérience utilisateur 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/
  • 31. 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 Design d’information pour le web 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 1. Introduction / Eléments de l’expérience utilisateur 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/
  • 32. 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 Design d’information pour le web 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 1. Introduction / Eléments de l’expérience utilisateur 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/
  • 33. 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 Design d’information pour le web 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 1. Introduction / Eléments de l’expérience utilisateur 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 périmètre du cours http://www.jjg.net/ia/
  • 34. Design d’information pour le web 4 CHAMPS DE CONCEPTION ‣ préambule : contexte métier ‣ Conception stratégique ‣ Design fonctionnel ‣ Structuration de l’information ‣ Spécification logique
  • 35. Design d’information pour le web 2. 4 axes de conception / Préambule ‣ Préambule : Contexte métier
  • 36. Design d’information pour le web 2. 4 axes de conception / Préambule Tactique Documentation Conception Stratégique
  • 37. Design d’information pour le web 2. 4 axes de conception / Préambule Tactique Documentation Conception Etudes stratégiques Stratégique
  • 38. Design d’information pour le web 2. 4 axes de conception / Préambule Tactique Documentation Conception Conception stratégique Etudes stratégiques Stratégique
  • 39. Design d’information pour le web 2. 4 axes de conception / Préambule Tactique Design fonctionnel Documentation Conception Conception stratégique Etudes stratégiques Stratégique
  • 40. Design d’information pour le web 2. 4 axes de conception / Préambule Tactique Structuration de l’information Design fonctionnel Documentation Conception Conception stratégique Etudes stratégiques Stratégique
  • 41. Design d’information pour le web 2. 4 axes de conception / Préambule Tactique Structuration de l’information Design fonctionnel Spécification logique Documentation Conception Conception stratégique Etudes stratégiques Stratégique
  • 42. Design d’information pour le web 2. 4 axes de conception / Préambule Tactique Structuration de l’information Design fonctionnel Spécification logique Documentation Conception Analyses Conception statistiques stratégique Etudes stratégiques Stratégique
  • 43. Design d’information pour le web 2. 4 axes de conception / Préambule Tactique Structuration de l’information Design fonctionnel Spécification logique Documentation Conception Analyses Conception statistiques Stratégique Etudes stratégiques Stratégique
  • 44. Design d’information pour le web 2. 4 axes de conception / Préambule Structuration Design Spécification Conception de fonctionnel logique Stratégique l’information
  • 45. Design d’information pour le web 2. 4 axes de conception / Conception stratégique ‣ Conception stratégique ‣ Exploration conceptuelle ‣ Définition du contexte, des besoins, des moyens
  • 46. Design d’information pour le web 2. 4 axes de conception / Conception stratégique Mind map ✓ Initier la réflexion ✓ Dépasser les limites du projet “A mind map is a diagram used to represent words, ideas, tasks, or other items linked to and arranged radially around a central key word or idea. Mind maps are used to generate, visualize, structure, and classify ideas, and as an aid in study, organization, problem solving, decision making, and writing.” http://en.wikipedia.org/wiki/Mind_Map
  • 47. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Mindmap
  • 48. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Mindmap Ressources Commandes Online training Cahiers d e tendances Previews Libres blancs Peclers "Connect" Etudes d e c a s Articles Accès conférences fiches p a r thématiques Conférences Objets Evènements Couleurs Petits-déjeuners Conseil p a r format Publications Sons / ambiance Training / séminaires Extension d e s cahiers p a r saison Photos / diapo rama Accompagnement s ur fiches missions inspirations Coaching PECLERS Blog "current brieffing" Ecoles d e design et mod e Newsletter Network étudiants Mentoring Veille interactive Podcasts Laboratoire participatif Trend L a b 2.0 Devenez correspondant ("Trend watcher") Veille cf. Energie L a b Etudes Cahiers sociétaux Processus d e conception p a r cible Analyses p a r marchés Design interviews portraits Métier Equipe Index p a r thèmes Accessibilité spécialités p a r mot-clés Référencement Recherche thématique Visibilité indexation d e s cahiers d e Périodicité d e s contenus tendance Missions Diffusion Questionnaire créatif testimonials
  • 49. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Mindmap
  • 50. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Mindmap
  • 51. Design d’information pour le web 2. 4 axes de conception / Conception stratégique Framework ✓ Définir le périmètre de l’expérience utilisateur ✓ Servir de lguide à la conception des fonctions
  • 52. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Framework
  • 53. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Framework 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
  • 54. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Cas Peclers Paris Cas : AFII
  • 55. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Framework Information & documentation Mise en Intégration relation réseaux
  • 56. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Framework
  • 57. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Framework
  • 58. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Framework
  • 59. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Framework
  • 60. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Framework
  • 61. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Cas Peclers Paris Cas : Michelin
  • 62. SMART USER DRIVERS MICHELIN NETWORK
  • 63. INDIVIDUAL PERSONAL PREFERENCES EQUIPMENT USER ENVIRONMENT MICHELIN TRAFFIC COMMUNITY COLLECTIVE
  • 64. INDIVIDUAL } PERSONAL PREFERENCES USER DATA } EQUIPMENT ENVIRONMENT DATA MICHELIN TRAFFIC COMMUNITY COLLECTIVE
  • 65. My Account Brand website Brand website INDIVIDUAL PERSONAL PREFERENCES EQUIPMENT USER MICHELIN ENVIRONMENT Dealers input Dealers input TRAFFIC COMMUNITY User AskAsk Michelin, Michelin, COLLECTIVE Wikimedia communities Wikimedia
  • 66. Design d’information pour le web 2. 4 axes de conception / Conception stratégique Modèle conceptuel ✓ Définir les besoins et les usages ✓ Définir les moyens ✓ Expliquer, éduquer
  • 67. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Schéma conceptuel
  • 68. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Schéma conceptuel 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
  • 69. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Schéma conceptuel Mum!s experience concept model I WANT TO TELL OTHERS I WANT TO PERSONALIZE I WANT TO KNOW MORE specific answer specific answer My pregnancy specific answer calendar I WANT ANSWERS display My maternity display checklist Growth display curves My Brand campaigns Food diary specific answer understand Product info understand First time & track display Mum Guide get get practical advices organized mum track & learn Semantic Calculators want to have product convert user search information understand convert user understand the what my baby First time what to feed baby needs ask questions in natural Mum Guide mum language IFP mum My want quick answers convert user convert user baby!s mum check get ideas for what to do growth with baby curve IFP want quick answers get help with give opinion daily routine understand trust products baby track and Nestlé Healthy start cherish want to find best milk activities First Milk milestones want to retrieve Baby reader / Quality and organize find solutions for special comparison album informations about Translator security inspiration needs local maternities and trend Baby spotting want recipe ideas QuickFinder routine save want to save for Infant money handbook money Maternity finder Formula My baby handbook inform eCoupons Recipe content Baby drive to a fidelity program eLoyalty naming tool share delegate share inform share family, friends
  • 70. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Schéma conceptuel 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 lo Make an artistic creation a vig xp Visit my ga t neighbors’ profile Explore a u Bookmarked Campus place a E Place io nit s ti Play a n ie multi-player game ve s G In en 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
  • 71. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Schéma conceptuel
  • 72. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Schéma conceptuel
  • 73. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Schéma conceptuel
  • 74. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Cas Peclers Paris Cas : Peclers Paris
  • 75. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Cas Peclers Paris
  • 76. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Cas Peclers Paris
  • 77. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Cas Peclers Paris
  • 78. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Cas Peclers Paris
  • 79. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Cas Peclers Paris
  • 80. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel ‣ Design fonctionnel ‣ Définition des fonctionnalités ‣ Définition de l’expérience utilisateur
  • 81. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel / Conception fonctionnelle Conception fonctionnelle ✓ Formaliser les principes directeurs ✓ Définir les modalités de l’expérience utilisateur
  • 82. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel / Conception fonctionnelle 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
  • 83. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel / Conception fonctionnelle 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
  • 84. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel / Conception fonctionnelle Landing L : Managed by countries Hennessy Moments (MANIFESTO) Hennessy Artistry Stores & Bars Locator 1 When your 2 When the 3 When the senses occasion light charms sharpen stands apart everyone Products Bar Locator Art of mixing 4 When the 5 When the 6 When the flavour tells music night glows a story sounds... from inside L L History Artistry L Events L Select : Participate : Select : Participate : 7 When you by countries Add a Add your Best cocktails savor the comment to a favorite bar moment by artists video Best atmosphere Add a eShop L by date Rate a video comment to a Best music bar description by events Add to playlist Best location Rate a bar The Inside Art of Mixing News & Downloads Collection Hennessy events Best design Hennessy Artistry L Tour Map Henessy bars L Henessy Stores V.S. La Maison Secrets of Local and Widget for the Mix global events iPhone V.S.O.P Creating (Podcast) Cognac Widget for Phase 2 Fine de Cocktails your computer Cognac 240 years recipes Hennessy L Store & Bars Locator X.O. Milestone History of Pictures cocktails Gallery Community Private A cult brand Reserve Advertising My Playlist Paradis Extra Richard Hennessy e-Store VIPs Search Contact us What is Contest Artistry Profile Terms & conditions Win tickets L L L L Privacy Statement Newsletter Register
  • 85. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel / Conception fonctionnelle
  • 86. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel / Conception fonctionnelle
  • 87. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel / Modèle utilisateur Modèle utilisateur ✓ Proposer une réponse aux besoins utilisateurs ✓ Eprouver son dispositif stratégique ✓ Visualiser les parcours et les usages
  • 88. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel / Modèle utilisateur
  • 89. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel / Modèle utilisateur
  • 90. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel / Modèle utilisateur http://www.flickr.com/photos/activeside/2183235913/
  • 91. Design d’information pour le web 2. 4 axes de conception / Conception stratégique / Cas Peclers Paris Cas : Nestlé
  • 92. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel / Modèle utilisateur
  • 93. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel / Modèle utilisateur
  • 94. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel / Modèle utilisateur
  • 95. Design d’information pour le web 2. 4 axes de conception / Design fonctionnel / Modèle utilisateur
  • 96. Design d’information pour le web Réaliser sous forme de croquis le modèle conceptuel de Amazon.fr Prendre en compte : • produits • transactionnel • aspects “sociaux” • services
  • 97. Design d’information pour le web 2. 4 axes de conception / Structuration de l’information ‣ Structuration de l’information ‣ Stratégie des contenus ‣ Arborescences
  • 98. Design d’information pour le web 2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle Stratégie des contenus ✓ Expliquer, présenter, démontrer ✓ Soutenir le propos stratégique ✓ Définir les grandes masses d’information ✓ Définir une logique de production des contenus
  • 99. Design d’information pour le web 2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle
  • 100. Design d’information pour le web Minute Maid Natural Vitality / site map 2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle Discover Natural Vitality EUROPEAN CONTENT MANGEMENT LOCAL CONTENT MANGEMENT MIXED CONTENT MANGEMENT (Local + Europe) Discover Natural Contact us The MM Club Vitality / HP Search Coupons & Offer 1 special offers Offer... Bring life into your life Products for your life Who we are Goodies Widgets Bring life Products Who we into your for your life are Screensavers life & wallpapers Exclusive Interviews... content Phyto- What are Benefits for Products Range 1 Range 2 History nutrition phyto- human health Videos... compounds? How do they Science Range 3 Range... protect fruits? links Test your phyto-profile Our process Commitments Quality Environm. Press Area responsability Press area Press Pleasure of Fruits & veg. Benefits of releases fruits in our in your diet each fruits lives Press From fruits to History of kit Our label Corporate Corp. news 1 Corp. news... fruit juices fruits... news detail detail Gallery Myths & realities Experts’ answers Interview Videos Recipes Our websites (Coca-cola Healthcare Pro. company) Healthcare HCP links professionals Tips & advice Quizz Health & Product Product Product wellness Tips News content provided by Burston Marsteller news 1 detail news... detail
  • 101. Design d’information pour le web 2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle http://www.flickr.com/photos/pictopedia/2277436580/in/set-72157605031206718/
  • 102. Design d’information pour le web 2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle Mum's Journey Created August 2009 Prenatal Newborn Baby Toddler It's all about mum Fusional relationship between First seperations. It's starting to feel like a family. Confident and independant. 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 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 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 family mealtimes baby can be naughty look for maternity clothes first night baby's home first Mum's Milestones choosing a doctor back at work (for some) dealing with "no"! teaching good behaviour birthday baby starts to have friends telling maternity feeling more "normal" baby cries when Baby goes registration baby blues mum leaves to dad checks ups with doctor/ gynecologist once a month starting to get out and about 2 year pre-school in a "bubble", at home with baby baby starts start potty check up anxiety about viability of pregnancy 9 months training with toddler Nesting: final preparation for check-up Pediatri- buying food adapted baby's arrival dresses on morning sickness for pregnancy birth announced baby starts to sleep through the night cian his own (informal) start of cravings register for day nursery getting pre-pregnancy body back first 'real' holiday as a family 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-made or baby food? can baby eat birthday cake? mother! How can I teach him? What can go wrong? do next? weaning? When can I give her cow's milk? When will he make friends? Am I pregnant? Are we ready? Why can't baby sleep through? What new foods, when and how? Is he getting too much sugar? How to introduce a little brother/sister? Where can I find the right information? Home or Why is baby crying? How do I teach baby good manners? Can baby eat like us? hospital birth? Boy or girl? When will she feed herself? What games can i find Mum's Questions Ready for pram? How can I baby proof Pacifier? How to deal with tantrums? What can I eat? Is he comfortable? what to do about Colic? my house? What about a second baby? for baby online? Do I need to take supplements? Which hospital? Which name? How do I protect my baby? How much? What games can/ should we play? Will my baby be What should I expect? Is he getting enough milk? Can I find natural or How can I stimulate baby's development? When will he play by himself? Is he ready for school? food for baby? healthy? Am I a good mother? How do I know my baby is well/healthy? Will he remember his baby food? Will I be a Breastfeeding How can I save money? How do my habits good Mum? or bottle? Is baby developing When will she really say What should I do when baby is too excited to sleep? Is he happy? affect my baby? normally? "mum" and "dad"? Is he ready for finger food? Why is he losing weight? Can my baby feel and think? What to do with a Which foods are safe for baby? What can I eat to have fussy eater? the best milk? tries to catch his feet crawls enjoys looking at books plays with babbles feet recognises mum's understands gestures and surrounding objects absence stands on all fours waves bye bye turns pages of books Cries when hungry climbs understands yes and no says 'mum' and 'dad' with sense confident in walking Listens and stays alert sits with stands up support tries to eat alone says "No" all the time dances to music first sentences & can start to sing sees clearly first smile first laugh asserts independence starts to understand how objects work reinforced immune system the embryo sits by baby's digestive system reaches maturity grasps finger himeself becomes laughs and smiles at familiar faces language initiation rides Baby's Milestones a fœtus starts to draw masters some words (90% of develops brain baby maintains passes objects bike organs have touch development engages eye contact masters chewing expresses refusal toilet-trained sensitivity quickens started to can swallow mushy food learns to run grow) grasps finger knows his name first step false develops his balance umbilical 100% of develops adopts a contractions stomach picks up shows when he is happy or scared eats with spoon climbs stairs step by step develops sleep objects cord starts organs are capacity to hearing capacity Lifts head to grow formed smell pattern 30 to 120ml 45° almost develops complete set of teeth starts to say 'ma' and 'da' recognises smells and perfect recognises his hands colours vision eye sight able to form shows likes and dislikes stomach sex is develops memories capacity start of tricycle riding confirmed recognises voices and sounds 250ml recognises direction of sound drops things grabs better hand learns sucking reflex spoon coordination develops speech more quickly first teeth more mature digestive system drinks from cup with help begins moving restless before feeding grabs his bib chases things with his index digestive system is immature better breathing while eating right or left uses a fork better tongue and lip control handed? grabs his bib takes food to mouth starts self feeding eats in highchair still has specific nutritional needs begins to chew drinks with help
  • 103. Design d’information pour le web Mum's axes de conception / Structuration de l’information / Cartographie organisationnelle 2. 4 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 11 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-made or baby can What can go wrong? mother! do next? weaning? When can I g Am I pregnant? Are we ready? Why can't baby sleep through? What new foods, when and how Where can I find the right information? Home or Why is baby crying? hospital birth? Boy or girl? When will she feed herself? 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 natural or food for baby? healthy? Am I a good mother?
  • 104. telling maternity feeling more "normal" baby cries when Mum's Miles 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 Design d’information pour le web anxiety about viability of pregnancy 9 months 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 2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle 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-made or baby can What can go wrong? mother! do next? weaning? When can I g Am I pregnant? Are we ready? Why can't baby sleep through? What new foods, when and how Where can I find the right information? Home or Why is baby crying? hospital birth? Boy or girl? When will she feed herself? 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 natural or food for baby? healthy? Am I a good mother? Will I be a Breastfeeding How can I sav How do my habits Is baby developing affect my baby? good Mum? or bottle? normally? When will she really say "mum" and "dad"? Is h Why is he losing weight? Can my baby feel and think? What to do with a What can I eat to have fussy eater? the best milk? tries to catch his feet crawls enjoys looking at books plays with babbles feet recognises mum's understands gestures a absence stands on all fours waves bye bye Cries when hungry understands yes and no says 'mum' and 'dad' w Listens and stays alert sits with stands up support tries to eat alon sees clearly first smile first laugh asserts independence the embryo sits by grasps finger himeself becomes laughs and smiles at familiar faces Baby's Milestones a fœtus (90% of develops brain baby maintains passes objects organs have touch development engages eye contact masters chewing sensitivity quickens started to can swallow mushy food grow) grasps finger knows his name false umbilical 100% of develops adopts a contractions stomach picks up shows when he is happy or scared develops sleep objects cord starts organs are capacity to hearing capacity Lifts head to grow formed smell pattern 30 to 120ml 45° starts to say 'ma' and 'da' recognises smells and recognises his hands colours eye sight able to form shows likes and dislikes sex is develops memories confirmed recognises voices and sounds recognises direction of sound drops things grabs learns sucking reflex first teeth spoon begins more mature digestive system moving restless before feeding grabs his bib chases things with h digestive system is immature better tongue and lip control better breathing while eating grabs his bib takes food to mouth sta eats in highchair begins to chew drinks w
  • 105. Design d’information pour le web 2. 4 axes de conception / Structuration de l’information / Cartographie informationnelle Arborescences ✓ Etablir la carte complète des briques d’information ✓ Détailler la répartition de l’information ✓ Visualiser les équilibres / déséquilibres
  • 106. Design d’information pour le web 2. 4 axes de conception / Structuration de l’information / Cartographie informationnelle Contre-exemples...
  • 107. Design d’information pour le web 2. 4 axes de conception / Structuration de l’information / Cartographie informationnelle
  • 108. Design d’information pour le web 2. 4 axes de conception / Structuration de l’information / Cartographie informationnelle Accueil Etape 1 Etape 2 Etape 3 Etape 4 Les 7 Recettes Calendrier Actualités FAQs Noter un Tri par Push Je suis Mon corps Votre futur Le suivi de fiches pour nous de ma article catégories Carnet enceinte change bébé ma pratiques deux grossesse grossesse Une Mon appetit Comment On me Besoins Envoyer un Recherche merveilleuse change sera-t-il ? découvre un énergétqiues Inscription aventure... diabète article à une d’articles amie Newsletter gestationnel Qu’est-ce qui- Ma prise de J’attend des On me Besoins change dans poids jumeaux découvre protéiques ma vie ? de la tension D’où viennent Mon capital Son corps se J’ai un excès Besoins ces nouveaux osseux construit de poids en glucides sentiments ? Ma grossesse, J’ai des petites Ses 5 sens J’ai des Besoins mes misères aparraissent grossesses en fer démarches rapprochées... Mon suivi Me préparer à Il devient une Besoins médical l’allaitement personne en acide folique Suis-je Ses Besoins fragile ? perceptions en calcium évoluent Les vitamines
  • 109. Design d’information pour le web 2. 4 axes de conception / Structuration de l’information / Cartographie informationnelle arborescence / VUE GENERALE RECHERCHE ACCUEIL PLAN DU SITE MENTIONS LEG. CONTACTEZ-NOUS SITES GROUPE 1.0 2.0 3.0 PARTICULIERS COLLECTIVITES ENTREPRISES 1.1 2.1 3.1 CONTENU TRANSVERSAL GEST. DURABLE GEST. DURABLE GEST. DURABLE QUI SOMMES- NOUS ? 1.1.1 PROTÉGER L’ENVIRONNEMENT 2.1.1 PROTÉGER L’ENVIRONNEMENT 3.1.1 PROTÉGER L’ENVIRONNEMENT 1.1.2 DISTRIBUER L’EAU 2.1.2 DISTRIBUER L’EAU 3.1.2 DISTRIBUER L’EAU TENDANCES & OPINIONS 1.1.3 CONSOMMER MIEUX 2.1.3 CONSOMMER MIEUX 3.1.3 CONSOMMER MIEUX 1.1.4 L’EAU DANS VOTRE VIE 2.1.4 L’EAU DANS VOTRE COMMUNE 3.1.4 L’EAU DANS VOTRE REGION 1.1.5 NOS ENGAGEMENTS 2.1.5 NOS ENGAGEMENTS 3.1.5 NOS ENGAGEMENTS 1.1.6 VOS QUESTIONS 2.1.6 VOS QUESTIONS 3.1.6 VOS QUESTIONS ESPACES 1.2 2.2 3.2 SERVICES SERVICES SERVICES JUNIORS 1.2.1 VOS PROJETS 2.2.1 TECHNOLOGIES ET INNOVATIONS 3.2.1 TECHNOLOGIES ET INNOVATIONS ENSEIGNANTS 1.2.2 OFFRES 2.2.2 PROJETS DE COLLECTIVITES 3.2.2 PROJETS DE COLLECTIVITES 1.2.3 FICHES REGIONS 2.2.3 OFFRES 3.2.3 OFFRES 1.2.4 CONSEILS PRATIQUES 2.2.4 FICHES REGIONS GESTION. PARCS. IMMO. 1.2.5 VOS QUESTIONS INDUSTRIELS PRESSE 2.3 1.3 AGENCE 3.2.4 FICHES REGIONS 3.3 AGENCE AGENCE CARRIERES 2.3.1 AGENCE PRO EN LIGNE 1.3.1 MON AGENCE EN LIGNE 2.3.2 MON CONSEILLER COMMERCIAL 3.3.1 AGENCE PRO EN LIGNE 1.3.2 CONTACTER MON AGENCE 3.3.2 MON CONSEILLER COMMERCIAL 2.4 ABONNEMENTS 1.4 ABONNEMENTS 2.5 RESSOURCES 3.4 ABONNEMENTS 1.5 VOS QUESTIONS 2.6 VOS QUESTIONS 3.5 RESSOURCES 1.6 CONTACTEZ-NOUS 2.7 CONTACTEZ-NOUS 3.6 VOS QUESTIONS 3.7 CONTACTEZ-NOUS
  • 110. Design d’information pour le web 2. 4 axes de conception / Structuration de l’information / Cartographie informationnelle
  • 111. Design d’information pour le web 2. 4 axes de conception / Structuration de l’information / Cartographie informationnelle http://www.flickr.com/photos/pictopedia/2001748234/
  • 112. Design d’information pour le web 2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle 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)
  • 113. Design d’information pour le web 2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle 0. 1. Louisvuitton.com Acceuil Receive update Send to a friend ARBORESCENCE Minisite “ The Journeys” 2.0 3.0 4.0 Receive update Receive update Receive update Agassi-Graff Send to a friend Deneuve Send to a friend Gorbachev Send to a friend Menu rollover Receive updates Receive updates 2.0.1 2.0.2 2.0.3 3.0.1 4.0.1 menu : Agassi-Graff menu : Deneuve menu : Gobachev 2.1.1 2.1 2.1.2 3.1 3.1.2 4.1 4.1.2 Sound experience Selection chapitres Sound experience Selection chapitres Sound experience Selection chapitres View by chapter View by chapter View by chapter Download experience Download experience Download experience menu : Agassi-Graff menu : Agassi-Graff menu : Deneuve menu : Deneuve menu : Gorbachev menu : Gorbachev 2.2.1 Chapitres 2.1.3 Chapitres 3.1.3 Chapitres 4.1.3 2.2 3.2 4.2 L’arrivée à New York TBD TBD Trunk : Agassi Trunk : Deneuve Sous-titres (on/off) Sous-titres Sous-titres menu : Agassi-Graff menu : Deneuve menu : Gobachev menu : More Trunks menu : More Trunks L’énergie de Soho ... ... menu : Agassi-Graff menu : Deneuve 2.2.3 13 objets Rollover : x objects Sous-titres (on/off) Sous-titres Sous-titres Sac LV Ceinture LV Lunettes LV menu : Agassi-Graff TBD menu : Deneuve menu : Gobachev Montre LV Souliers LV Organizer LV ChinaTown and Surf Balles Casque Little Italy Gants Bottes Surf Statue Liberté Cadre photo Sous-titres (on/off) menu : Agassi-Graff 2.3 3.3 4.3 Central Park & National The climate project HIstory Museum The climate project The Green Cross Sous-titres (on/off) menu : Agassi-Graff Campagnola menu : Agassi-Graff Restaurant menu : Deneuve menu : Gorbachev 2.4 Sous-titres (on/off) 3.4 4.4 menu : Agassi-Graff Making of Making of Schaller & Weber. Deli Sous-titres (on/off) menu : Agassi-Graff menu : Agassi-Graff menu : Deneuve Yankee Stadium and Arthur Ashe Stadium Sous-titres (on/off) 2.5 2.6 3.5 3.6 4.5 4.6 menu : Agassi-Graff LV Travel Crédits LV Travel Crédits LV Travel Crédits Coney Island Sous-titres (on/off) menu : Agassi-Graff menu : Agassi-Graff menu : Agassi-Graff menu : Deneuve menu : Deneuve menu : Gorbachoev menu : Gorbachev Louisvuitton.com Louisvuitton.com Louisvuitton.com
  • 114. Design d’information pour le web 2. 4 axes de conception / Spécification logique ‣ Spécification logique ‣ Conception détaillée ‣ Documentation fonctionnelle
  • 115. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Conception détaillée Conception détaillée ✓ Préciser sa pensée ✓ Démontrer clairement ✓ Eprouver le système ✓ Détecter les failles
  • 116. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Conception détaillée
  • 117. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Conception détaillée http://www.flickr.com/photos/seeminglee/sets/72157601118684802/
  • 118. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Conception détaillée
  • 119. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Conception détaillée
  • 120. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Conception détaillée http://www.flickr.com/photos/pictopedia/2001120445/in/photostream/
  • 121. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Conception détaillée http://www.flickr.com/photos/pictopedia/2001817077/in/set-72157605031206718/
  • 122. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Conception détaillée http://www.flickr.com/photos/pictopedia/2038191620/in/set-72157605031206718/
  • 123. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Documentation fonctionnelle Documentation fonctionnelle ✓ Lister les cas de façon exhaustive ✓ Spécifier les détails ✓ Transmettre son travail à une autre équipe
  • 124. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Documentation fonctionnelle http://www.flickr.com/photos/22905080@N03/2233209327/
  • 125. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Documentation fonctionnelle
  • 126. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Documentation fonctionnelle http://www.flickr.com/photos/8760288@N07/2753050295/
  • 127. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Documentation fonctionnelle
  • 128. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Documentation fonctionnelle http://www.flickr.com/photos/pictopedia/2267207598/in/set-72157605031206718/
  • 129. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Documentation fonctionnelle http://www.flickr.com/photos/pictopedia/1499739745/in/set-72157605031206718/
  • 130. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Documentation fonctionnelle http://www.flickr.com/photos/pictopedia/2001483139/in/set-72157605031206718/
  • 131. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Documentation fonctionnelle
  • 132. Design d’information pour le web 2. 4 axes de conception / Spécification logique / Documentation fonctionnelle 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
  • 133. Design d’information pour le web 6 QUESTIONS À SE POSER ‣ D’où provient l’information ? ‣ Quelle est la nature de l’information ? ‣ Quelle est l’audience ? ‣ Quel est le contexte ? ‣ Quels sont les résultats attendus ? ‣ De combien de temps dispose-t-on ?
  • 134. Design d’information pour le web 3. 6 questions à se poser ‣ D’où provient l’information ? ‣ Client décisionnaire ‣ Client intermédiaire ‣ Client spécialiste ‣ Interne agence
  • 135. Design d’information pour le web 3. 6 questions à se poser ‣ Quelle est la nature de l’information ? ‣ Brief ‣ Etudes marketing ‣ Recherches utilisateurs ‣ Analyses data ‣ Benchmarking ‣ Bonnes pratiques
  • 136. Design d’information pour le web 3. 6 questions à se poser ‣ Quelle est l’audience ? ‣ Client ‣ Public débutant ou averti ‣ Equipe interne ‣ 1... 10... 200 personnes
  • 137. Design d’information pour le web 3. 6 questions à se poser ‣ Quelle est le contexte ? ‣ Conception ‣ Présentation ‣ Documentation ‣ Spécifications ‣ Production ‣ Nouveau projet ou upgrade ‣ Etude
  • 138. Design d’information pour le web 3. 6 questions à se poser ‣ De combien de temps dispose-t-on ? ‣ Pour la réalisation ‣ Pour la présentation
  • 139. Design d’information pour le web 3. 6 questions à se poser ‣ Quels sont les résultats attendus ? ‣ Vente ‣ Concept global ‣ Conception détaillée ‣ Documentation
  • 140. Design d’information pour le web OUTILS ‣ Sketching ‣ Les anciens outils ‣ Les nouveaux outils ‣ Les outils de demain... ‣ Critères de choix
  • 141. Design d’information pour le web 4. Outils / sketching ‣ Sketching
  • 142. Design d’information pour le web
  • 143. Design d’information pour le web 4. Outils / Les anciens outils ‣ Les anciens outils ‣ Powerpoint ‣ Visio
  • 144. Design d’information pour le web Powerpoint
  • 145. Design d’information pour le web Visio
  • 146. Design d’information pour le web 4. Outils / Les nouveaux outils ‣ Les nouveaux outils ‣ Applications de Mind Mapping ‣ Axure ‣ InDesign ‣ Omnigraffle ‣ Keynote
  • 147. Design d’information pour le web Applications de Mind Mapping Visual Mind MindMeister Concept Draw Mind Map XMIND FreeMind WikkaWiki VUE XMIND Visual Mind OmniGraffle
  • 148. Design d’information pour le web Axure
  • 149. Design d’information pour le web InDesign
  • 150. Design d’information pour le web Omnigraffle
  • 151. Design d’information pour le web Keynote
  • 152. Design d’information pour le web 4. Outils / Demain ‣ Demain ‣ Adobe Flash Catalyst
  • 153. Design d’information pour le web Adobe Flash Catalyst
  • 154. Design d’information pour le web 4. Outils / Critères de choix ‣ Critères de choix ‣ Fonctionnalité et ergonomie applicative ‣ Rapidité d’exécution ‣ Portabilité et partage ‣ Librairies ‣ ...
  • 155. Ce cours a été élaboré par : Matthieu Mingasson Head of User Experience 136, Champs Elysées - 75008 Paris, France Tél. 33 (0)1 40 76 23 85 matthieu.mingasson@ogilvy.com http://www.linkedin.com/in/mingasson