SlideShare a Scribd company logo
1 of 155
Download to read offline
worldwide




Design d’information
pour le web


Ecole des Gobelins - Décembre 2008
Design d’information pour le web




SOMMAIRE

‣ Introduction : éléments de contexte
‣ 4 axes de conception
‣ 6 questions à se poser
‣ Outils
Design d’information pour le web




“Design is the intermediacy
between information and
understanding”
          Richard Grefé
          Executive director,
          American Institute of Graphic Arts (AIGA)
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
Design d’information pour le web
Design d’information pour le web




INTRODUCTION

‣ Emergence d’une profession
‣ Eléments du design d’information
‣ Eléments de l’expérience utilisateur
Design d’information pour le web

1. Introduction / Emergence d’une profession




‣   Emergence d’une profession
    ‣   Contributeurs
    ‣   Profils
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...
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...
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...
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...
Design d’information pour le web

1. Introduction / Emergence d’une profession




Profils
 Management
de l’information
                         Organisation
                         Stratégie
                         Séquençage
                         Standardisation
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
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
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
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
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
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
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
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
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
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
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
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.
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
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/
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/
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/
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/
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/
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/
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/
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/
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
Design d’information pour le web

2. 4 axes de conception / Préambule




‣   Préambule : Contexte métier
Design d’information pour le web

  2. 4 axes de conception / Préambule

                                         Tactique




Documentation                                         Conception




                                        Stratégique
Design d’information pour le web

  2. 4 axes de conception / Préambule

                                         Tactique




Documentation                                            Conception




                                             Etudes
                                          stratégiques




                                        Stratégique
Design d’information pour le web

  2. 4 axes de conception / Préambule

                                         Tactique




Documentation                                                          Conception


                                                         Conception
                                                         stratégique


                                             Etudes
                                          stratégiques




                                        Stratégique
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
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
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
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
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
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
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
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
Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Mindmap
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
Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Mindmap
Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Mindmap
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
Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Framework
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
Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Cas Peclers Paris




Cas : AFII
Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Framework


                                      Information &
                                     documentation




   Mise en                                                     Intégration
   relation                                                      réseaux
Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Framework
Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Framework
Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Framework
Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Framework
Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Framework
Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Cas Peclers Paris




Cas : Michelin
SMART
USER   DRIVERS   MICHELIN
       NETWORK
INDIVIDUAL


       PERSONAL PREFERENCES


            EQUIPMENT

USER       ENVIRONMENT
                              MICHELIN

             TRAFFIC


            COMMUNITY




          COLLECTIVE
INDIVIDUAL




                                }
              PERSONAL PREFERENCES




USER   DATA
              }    EQUIPMENT


                  ENVIRONMENT
                                     DATA   MICHELIN

                    TRAFFIC


                   COMMUNITY




                  COLLECTIVE
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
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
Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Schéma conceptuel
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
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
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information
Design d'Information

More Related Content

What's hot

Artificial Intelligence and Machine Learning
Artificial Intelligence and Machine LearningArtificial Intelligence and Machine Learning
Artificial Intelligence and Machine LearningMykola Dobrochynskyy
 
La théorie du multimédia
La théorie du multimédiaLa théorie du multimédia
La théorie du multimédiaRabia AZIZA
 
Artificial intelligence .pptx
Artificial intelligence .pptxArtificial intelligence .pptx
Artificial intelligence .pptxGautamMishra79
 
初探人工智慧
初探人工智慧初探人工智慧
初探人工智慧Paul Yang
 
introduction to Artificial intelligence
introduction  to Artificial intelligenceintroduction  to Artificial intelligence
introduction to Artificial intelligenceDr. Mazhar Ali Dootio
 
Les Fake News, nouveau visage de la desinformation
Les Fake News, nouveau visage de la desinformationLes Fake News, nouveau visage de la desinformation
Les Fake News, nouveau visage de la desinformationwallace04
 
Power Point Presentation on Artificial Intelligence and Cool Current Projects...
Power Point Presentation on Artificial Intelligence and Cool Current Projects...Power Point Presentation on Artificial Intelligence and Cool Current Projects...
Power Point Presentation on Artificial Intelligence and Cool Current Projects...PuneetGautam6
 
Leçon 1 les champs d'application de l'informatique
Leçon 1 les champs d'application de l'informatiqueLeçon 1 les champs d'application de l'informatique
Leçon 1 les champs d'application de l'informatiquewilliam aime GUIMFACK
 
Machine learning_ Replicating Human Brain
Machine learning_ Replicating Human BrainMachine learning_ Replicating Human Brain
Machine learning_ Replicating Human BrainNishant Jain
 
The Challenges and Opportunities of AI for the Indian Economy
The Challenges and Opportunities of AI for the Indian EconomyThe Challenges and Opportunities of AI for the Indian Economy
The Challenges and Opportunities of AI for the Indian EconomyDaniel Faggella
 
Integration de donnees_etl
Integration de donnees_etlIntegration de donnees_etl
Integration de donnees_etlhoracio lassey
 
Alan turing, inteligencia artificial
Alan turing, inteligencia artificialAlan turing, inteligencia artificial
Alan turing, inteligencia artificialrebecaa17
 
SNA - Gephi - Twitter Streaming Importer (2020)
SNA - Gephi - Twitter Streaming Importer (2020)SNA - Gephi - Twitter Streaming Importer (2020)
SNA - Gephi - Twitter Streaming Importer (2020)Groupe EEIE
 

What's hot (20)

Artificial Intelligence and Machine Learning
Artificial Intelligence and Machine LearningArtificial Intelligence and Machine Learning
Artificial Intelligence and Machine Learning
 
La théorie du multimédia
La théorie du multimédiaLa théorie du multimédia
La théorie du multimédia
 
Artificial intelligence .pptx
Artificial intelligence .pptxArtificial intelligence .pptx
Artificial intelligence .pptx
 
初探人工智慧
初探人工智慧初探人工智慧
初探人工智慧
 
introduction to Artificial intelligence
introduction  to Artificial intelligenceintroduction  to Artificial intelligence
introduction to Artificial intelligence
 
Artificial Intelligence = ML + DL with Tensor Flow
Artificial Intelligence = ML + DL with Tensor FlowArtificial Intelligence = ML + DL with Tensor Flow
Artificial Intelligence = ML + DL with Tensor Flow
 
Les Fake News, nouveau visage de la desinformation
Les Fake News, nouveau visage de la desinformationLes Fake News, nouveau visage de la desinformation
Les Fake News, nouveau visage de la desinformation
 
Artificial Intelligence
Artificial IntelligenceArtificial Intelligence
Artificial Intelligence
 
Power Point Presentation on Artificial Intelligence and Cool Current Projects...
Power Point Presentation on Artificial Intelligence and Cool Current Projects...Power Point Presentation on Artificial Intelligence and Cool Current Projects...
Power Point Presentation on Artificial Intelligence and Cool Current Projects...
 
Artificial Intelligence
Artificial IntelligenceArtificial Intelligence
Artificial Intelligence
 
Leçon 1 les champs d'application de l'informatique
Leçon 1 les champs d'application de l'informatiqueLeçon 1 les champs d'application de l'informatique
Leçon 1 les champs d'application de l'informatique
 
Deep learning
Deep learningDeep learning
Deep learning
 
Inteligencia Artificial Presentación Final
Inteligencia Artificial Presentación Final Inteligencia Artificial Presentación Final
Inteligencia Artificial Presentación Final
 
historique de l'informatique
historique de l'informatiquehistorique de l'informatique
historique de l'informatique
 
Procesadores
ProcesadoresProcesadores
Procesadores
 
Machine learning_ Replicating Human Brain
Machine learning_ Replicating Human BrainMachine learning_ Replicating Human Brain
Machine learning_ Replicating Human Brain
 
The Challenges and Opportunities of AI for the Indian Economy
The Challenges and Opportunities of AI for the Indian EconomyThe Challenges and Opportunities of AI for the Indian Economy
The Challenges and Opportunities of AI for the Indian Economy
 
Integration de donnees_etl
Integration de donnees_etlIntegration de donnees_etl
Integration de donnees_etl
 
Alan turing, inteligencia artificial
Alan turing, inteligencia artificialAlan turing, inteligencia artificial
Alan turing, inteligencia artificial
 
SNA - Gephi - Twitter Streaming Importer (2020)
SNA - Gephi - Twitter Streaming Importer (2020)SNA - Gephi - Twitter Streaming Importer (2020)
SNA - Gephi - Twitter Streaming Importer (2020)
 

Viewers also liked

Interfaces tactiles : nouveaux usages, nouvelles interactions ?
Interfaces tactiles : nouveaux usages, nouvelles interactions ?Interfaces tactiles : nouveaux usages, nouvelles interactions ?
Interfaces tactiles : nouveaux usages, nouvelles interactions ?Flupa
 
Ergonomie Web - Une Introduction
Ergonomie Web - Une IntroductionErgonomie Web - Une Introduction
Ergonomie Web - Une IntroductionFabien Tersoglio
 
Ergonomie web & interface tactile
Ergonomie web & interface tactileErgonomie web & interface tactile
Ergonomie web & interface tactileIdnetInfo
 
Conférence e-Cercle: la conception web expliquée aux entreprises communicantes
Conférence e-Cercle: la conception web expliquée aux entreprises communicantesConférence e-Cercle: la conception web expliquée aux entreprises communicantes
Conférence e-Cercle: la conception web expliquée aux entreprises communicantesMatthieu Mingasson
 
Trends and challenges in web application development
Trends and challenges in web application developmentTrends and challenges in web application development
Trends and challenges in web application developmentPixel Crayons
 
Connaissance marché et apports du web
Connaissance marché et apports du webConnaissance marché et apports du web
Connaissance marché et apports du webThomas Coustenoble
 
Count-Min Tree Sketch : Approximate counting for NLP tasks
Count-Min Tree Sketch : Approximate counting for NLP tasksCount-Min Tree Sketch : Approximate counting for NLP tasks
Count-Min Tree Sketch : Approximate counting for NLP tasksGuillaume Pitel
 
Modern Datacenter : de la théorie à la pratique
Modern Datacenter : de la théorie à la pratique Modern Datacenter : de la théorie à la pratique
Modern Datacenter : de la théorie à la pratique Microsoft Technet France
 
Les cabinets de recrutement spécialisés dans les métiers du numérique
Les cabinets de recrutement spécialisés dans les métiers du numériqueLes cabinets de recrutement spécialisés dans les métiers du numérique
Les cabinets de recrutement spécialisés dans les métiers du numériqueFrenchWeb.fr
 
Les professionnels de l'information face aux défis du Web de données
Les professionnels de l'information face aux défis du Web de donnéesLes professionnels de l'information face aux défis du Web de données
Les professionnels de l'information face aux défis du Web de donnéesGautier Poupeau
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project PresentationMilind Gokhale
 
#MDSGAM : Etude Digital Trends Morocco 2015
#MDSGAM : Etude Digital Trends Morocco 2015#MDSGAM : Etude Digital Trends Morocco 2015
#MDSGAM : Etude Digital Trends Morocco 2015Othmane Ghailane
 
Marie-Graphiste // Portfolio Web, Print, Data-visualisation
Marie-Graphiste // Portfolio Web, Print, Data-visualisationMarie-Graphiste // Portfolio Web, Print, Data-visualisation
Marie-Graphiste // Portfolio Web, Print, Data-visualisationMarie Van der Marlière
 
Modern Web Application Development Workflow - EclipseCon US 2014
Modern Web Application Development Workflow - EclipseCon US 2014Modern Web Application Development Workflow - EclipseCon US 2014
Modern Web Application Development Workflow - EclipseCon US 2014Stéphane Bégaudeau
 
Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015Idean France
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Idean France
 

Viewers also liked (19)

Interfaces tactiles : nouveaux usages, nouvelles interactions ?
Interfaces tactiles : nouveaux usages, nouvelles interactions ?Interfaces tactiles : nouveaux usages, nouvelles interactions ?
Interfaces tactiles : nouveaux usages, nouvelles interactions ?
 
Ergonomie Web - Une Introduction
Ergonomie Web - Une IntroductionErgonomie Web - Une Introduction
Ergonomie Web - Une Introduction
 
Ergonomie web & interface tactile
Ergonomie web & interface tactileErgonomie web & interface tactile
Ergonomie web & interface tactile
 
Marie-Graphiste Portfolio Dataviz 2016
Marie-Graphiste Portfolio Dataviz 2016Marie-Graphiste Portfolio Dataviz 2016
Marie-Graphiste Portfolio Dataviz 2016
 
Conférence e-Cercle: la conception web expliquée aux entreprises communicantes
Conférence e-Cercle: la conception web expliquée aux entreprises communicantesConférence e-Cercle: la conception web expliquée aux entreprises communicantes
Conférence e-Cercle: la conception web expliquée aux entreprises communicantes
 
27 conseils pratiques en ergonomie Web
27 conseils pratiques en ergonomie Web27 conseils pratiques en ergonomie Web
27 conseils pratiques en ergonomie Web
 
Trends and challenges in web application development
Trends and challenges in web application developmentTrends and challenges in web application development
Trends and challenges in web application development
 
Connaissance marché et apports du web
Connaissance marché et apports du webConnaissance marché et apports du web
Connaissance marché et apports du web
 
Count-Min Tree Sketch : Approximate counting for NLP tasks
Count-Min Tree Sketch : Approximate counting for NLP tasksCount-Min Tree Sketch : Approximate counting for NLP tasks
Count-Min Tree Sketch : Approximate counting for NLP tasks
 
Modern Datacenter : de la théorie à la pratique
Modern Datacenter : de la théorie à la pratique Modern Datacenter : de la théorie à la pratique
Modern Datacenter : de la théorie à la pratique
 
Les cabinets de recrutement spécialisés dans les métiers du numérique
Les cabinets de recrutement spécialisés dans les métiers du numériqueLes cabinets de recrutement spécialisés dans les métiers du numérique
Les cabinets de recrutement spécialisés dans les métiers du numérique
 
Les professionnels de l'information face aux défis du Web de données
Les professionnels de l'information face aux défis du Web de donnéesLes professionnels de l'information face aux défis du Web de données
Les professionnels de l'information face aux défis du Web de données
 
The Evolution of Web 3.0
The Evolution of Web 3.0The Evolution of Web 3.0
The Evolution of Web 3.0
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project Presentation
 
#MDSGAM : Etude Digital Trends Morocco 2015
#MDSGAM : Etude Digital Trends Morocco 2015#MDSGAM : Etude Digital Trends Morocco 2015
#MDSGAM : Etude Digital Trends Morocco 2015
 
Marie-Graphiste // Portfolio Web, Print, Data-visualisation
Marie-Graphiste // Portfolio Web, Print, Data-visualisationMarie-Graphiste // Portfolio Web, Print, Data-visualisation
Marie-Graphiste // Portfolio Web, Print, Data-visualisation
 
Modern Web Application Development Workflow - EclipseCon US 2014
Modern Web Application Development Workflow - EclipseCon US 2014Modern Web Application Development Workflow - EclipseCon US 2014
Modern Web Application Development Workflow - EclipseCon US 2014
 
Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...
 

Similar to Design d'Information

Fundamentals of Information Architecture Workshop
Fundamentals of Information Architecture WorkshopFundamentals of Information Architecture Workshop
Fundamentals of Information Architecture WorkshopKate Simpson
 
LIS3353 SP12 Week 10
LIS3353 SP12 Week 10LIS3353 SP12 Week 10
LIS3353 SP12 Week 10Amanda Case
 
LIS3353 SP12 Week 10
LIS3353 SP12 Week 10LIS3353 SP12 Week 10
LIS3353 SP12 Week 10Amanda Case
 
Osc share point 2010 information management seminar - 17th feb 2012 - public
Osc   share point 2010 information management seminar - 17th feb 2012 - publicOsc   share point 2010 information management seminar - 17th feb 2012 - public
Osc share point 2010 information management seminar - 17th feb 2012 - publicLee_Ralph
 
Nttd interactive 20120601
Nttd interactive 20120601Nttd interactive 20120601
Nttd interactive 20120601Dana Helland
 
Aligning people process and technology in km kwt presentation
Aligning people process and technology in km kwt presentationAligning people process and technology in km kwt presentation
Aligning people process and technology in km kwt presentationStephanie Barnes
 
Information Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in OrderInformation Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in OrderBusinessOnline
 
Think NON Overview
Think NON OverviewThink NON Overview
Think NON OverviewThink NON
 
The New Normal: Predictive Power on the Front Lines
The New Normal: Predictive Power on the Front LinesThe New Normal: Predictive Power on the Front Lines
The New Normal: Predictive Power on the Front LinesInside Analysis
 
Law firm knowledge management, an introduction: LawTech Camp 2012
Law firm knowledge management, an introduction: LawTech Camp 2012Law firm knowledge management, an introduction: LawTech Camp 2012
Law firm knowledge management, an introduction: LawTech Camp 2012Stephanie Barnes
 
Information architecture and SharePoint
Information architecture and SharePointInformation architecture and SharePoint
Information architecture and SharePointLulu Pachuau
 
The Best is the Enemy of the Good
The Best is the Enemy of the GoodThe Best is the Enemy of the Good
The Best is the Enemy of the GoodJared Spool
 
Osc share point_2010_roundtable
Osc share point_2010_roundtable Osc share point_2010_roundtable
Osc share point_2010_roundtable Lee_Ralph
 
Piloting with SharePoint—Learn to FLY by Eric Riz - SPTechCon
Piloting with SharePoint—Learn to FLY by Eric Riz - SPTechConPiloting with SharePoint—Learn to FLY by Eric Riz - SPTechCon
Piloting with SharePoint—Learn to FLY by Eric Riz - SPTechConSPTechCon
 
The Need to Professionalize the Discipline of EA The Need to Professionalize ...
The Need to Professionalize the Discipline of EA The Need to Professionalize ...The Need to Professionalize the Discipline of EA The Need to Professionalize ...
The Need to Professionalize the Discipline of EA The Need to Professionalize ...Software Park Thailand
 

Similar to Design d'Information (20)

Fundamentals of Information Architecture Workshop
Fundamentals of Information Architecture WorkshopFundamentals of Information Architecture Workshop
Fundamentals of Information Architecture Workshop
 
LIS3353 SP12 Week 10
LIS3353 SP12 Week 10LIS3353 SP12 Week 10
LIS3353 SP12 Week 10
 
LIS3353 SP12 Week 10
LIS3353 SP12 Week 10LIS3353 SP12 Week 10
LIS3353 SP12 Week 10
 
Osc share point 2010 information management seminar - 17th feb 2012 - public
Osc   share point 2010 information management seminar - 17th feb 2012 - publicOsc   share point 2010 information management seminar - 17th feb 2012 - public
Osc share point 2010 information management seminar - 17th feb 2012 - public
 
Nttd interactive 20120601
Nttd interactive 20120601Nttd interactive 20120601
Nttd interactive 20120601
 
Aligning people process and technology in km kwt presentation
Aligning people process and technology in km kwt presentationAligning people process and technology in km kwt presentation
Aligning people process and technology in km kwt presentation
 
Information Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in OrderInformation Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in Order
 
Think NON Overview
Think NON OverviewThink NON Overview
Think NON Overview
 
The New Normal: Predictive Power on the Front Lines
The New Normal: Predictive Power on the Front LinesThe New Normal: Predictive Power on the Front Lines
The New Normal: Predictive Power on the Front Lines
 
Law firm knowledge management, an introduction: LawTech Camp 2012
Law firm knowledge management, an introduction: LawTech Camp 2012Law firm knowledge management, an introduction: LawTech Camp 2012
Law firm knowledge management, an introduction: LawTech Camp 2012
 
Best Practices for Software Product Development
Best Practices for Software Product DevelopmentBest Practices for Software Product Development
Best Practices for Software Product Development
 
Information architecture and SharePoint
Information architecture and SharePointInformation architecture and SharePoint
Information architecture and SharePoint
 
The Best is the Enemy of the Good
The Best is the Enemy of the GoodThe Best is the Enemy of the Good
The Best is the Enemy of the Good
 
Osc share point_2010_roundtable
Osc share point_2010_roundtable Osc share point_2010_roundtable
Osc share point_2010_roundtable
 
Etch Group
Etch GroupEtch Group
Etch Group
 
KM Models and Samples
KM Models and SamplesKM Models and Samples
KM Models and Samples
 
Bi arch journal
Bi arch journalBi arch journal
Bi arch journal
 
Piloting with SharePoint—Learn to FLY by Eric Riz - SPTechCon
Piloting with SharePoint—Learn to FLY by Eric Riz - SPTechConPiloting with SharePoint—Learn to FLY by Eric Riz - SPTechCon
Piloting with SharePoint—Learn to FLY by Eric Riz - SPTechCon
 
The Need to Professionalize the Discipline of EA The Need to Professionalize ...
The Need to Professionalize the Discipline of EA The Need to Professionalize ...The Need to Professionalize the Discipline of EA The Need to Professionalize ...
The Need to Professionalize the Discipline of EA The Need to Professionalize ...
 
Ariston Interactive
Ariston InteractiveAriston Interactive
Ariston Interactive
 

Recently uploaded

Famous and Important UIUX Laws for your next Digital product
Famous and Important UIUX Laws for your next Digital productFamous and Important UIUX Laws for your next Digital product
Famous and Important UIUX Laws for your next Digital productThink 360 Studio
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistYudistira
 
Cascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna CollegeCascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna Collegefyzasm95
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxjoshuaclack73
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjjoshuaclack73
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headersekinlvnt
 
Mark Zuckerberg Carthago Delenda Est Shirt
Mark Zuckerberg Carthago Delenda Est ShirtMark Zuckerberg Carthago Delenda Est Shirt
Mark Zuckerberg Carthago Delenda Est ShirtMHBijoy3
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理thubko
 
Latest Trends in Home and Building Design
Latest Trends in Home and Building DesignLatest Trends in Home and Building Design
Latest Trends in Home and Building DesignResDraft
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...Amil baba
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Cloud99 Cloud
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Projectbuvanatest
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign designAkankshaD3
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 

Recently uploaded (20)

Famous and Important UIUX Laws for your next Digital product
Famous and Important UIUX Laws for your next Digital productFamous and Important UIUX Laws for your next Digital product
Famous and Important UIUX Laws for your next Digital product
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 
Cascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna CollegeCascading Style Sheet(CSS) PDF Notes by Apna College
Cascading Style Sheet(CSS) PDF Notes by Apna College
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Mark Zuckerberg Carthago Delenda Est Shirt
Mark Zuckerberg Carthago Delenda Est ShirtMark Zuckerberg Carthago Delenda Est Shirt
Mark Zuckerberg Carthago Delenda Est Shirt
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
 
Latest Trends in Home and Building Design
Latest Trends in Home and Building DesignLatest Trends in Home and Building Design
Latest Trends in Home and Building Design
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
 
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UAL毕业证书)伦敦艺术大学毕业证成绩单本科硕士学位证留信学历认证
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Project
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign design
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
 

Design d'Information

  • 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
  • 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