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

Design d'Information

Embed Size (px)

DESCRIPTION

Design d'informationLe design d'expérience utilisateur vu à travers le design d'informationGobelins - Ecole de l'Image2009

Citation preview

Page 1: Design d'Information

Design d’information pour le web

Ecole des Gobelins - Décembre 2008

worldwide

Page 2: Design d'Information

Design d’information pour le web

SOMMAIRE

‣ Introduction : éléments de contexte‣ 4 axes de conception‣ 6 questions à se poser‣ Outils

Page 3: Design d'Information

Design d’information pour le web

“Design is the intermediacy between information and understanding”

Richard GreféExecutive director, American Institute of Graphic Arts (AIGA)

Page 4: Design d'Information

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 2005http://www.fastcompany.com/magazine/95/design-strategy.html

Page 5: Design d'Information

Design d’information pour le web

Page 6: Design d'Information

Design d’information pour le web

INTRODUCTION

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

Page 7: Design d'Information

Design d’information pour le web

1. Introduction / Emergence d’une profession

‣ Emergence d’une profession

‣ Contributeurs‣ Profils

Page 8: Design d'Information

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

Page 9: Design d'Information

Design d’information pour le web

1. Introduction / Emergence d’une profession

Contributeurs

...des recherches appliquées dans de multiples domaines...

Design d’interface

Représentation de données

Design de matériel éducatif

Communication visuelle

Typographie et design graphique

Avec les sciences cognitives* qui établissent les fondamentaux...

Page 10: Design d'Information

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 de manuels d’instruction

Chercheurs Designers CollectionneursVulgariseurs InventeursAnalystes et systémistes

Documentalistes

...des recherches appliquées dans de multiples domaines...

Avec les sciences cognitives* qui établissent les fondamentaux...

Design d’interface

Représentation de données

Design de matériel éducatif

Communication visuelle

Typographie et design graphique

Page 11: Design d'Information

Design d’information pour le web

1. Introduction / Emergence d’une profession

Contributeurs...une nouvelle profession émerge :

LE DESIGN D’INFORMATION

Tiré de : “Information Design”, Robert Jacobson, MIT Press

...et des professionnels qui pratiquent en fonction d’intérêts variés...Rédacteurs de manuels d’instruction

Chercheurs Designers CollectionneursVulgariseurs InventeursAnalystes et systémistes

Documentalistes

...des recherches appliquées dans de multiples domaines...

Avec les sciences cognitives* qui établissent les fondamentaux...

Design d’interface

Représentation de données

Design de matériel éducatif

Communication visuelle

Typographie et design graphique

Page 12: Design d'Information

Design d’information pour le web

1. Introduction / Emergence d’une profession

Profils

Management de l’information

OrganisationStratégieSéquençageStandardisation

Page 13: Design d'Information

Design d’information pour le web

1. Introduction / Emergence d’une profession

Profils

Management de l’information

Systèmes d’information

OrganisationStratégieSéquençageStandardisation

TechnologiesPublication FormatsPortage

Page 14: Design d'Information

Design d’information pour le web

1. Introduction / Emergence d’une profession

Profils

Management de l’information

Visualisation de l’information

Systèmes d’information

OrganisationStratégieSéquençageStandardisation

IntégrationDesignRédactionRésolution de conflits

TechnologiesPublication FormatsPortage

Page 15: Design d'Information

Design d’information pour le web

1. Introduction / Emergence d’une profession

Profils

Management de l’information

Visualisation de l’information

Systèmes d’information

OrganisationStratégieSéquençageStandardisation

IntégrationDesignRédactionRésolution de conflits

TechnologiesPublication FormatsPortage

Inspiré par : http://informationr.net

Page 16: Design d'Information

Design d’information pour le web

1. Introduction / Emergence d’une profession

Profils

Management de l’information

Visualisation de l’information

Systèmes d’information

PROFIL EN T

Page 17: Design d'Information

Design d’information pour le web

1. Introduction / Emergence d’une profession

Profils

Management de l’information

Visualisation de l’information

Systèmes d’information

PROFILS EN T

Systèmes d’information

Visualisation de l’information

Management de l’information

Management de l’information

Visualisation de l’information

Systèmes d’information

Page 18: Design d'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 Designhttp://www.iiid.net/Definitions.htm

Page 19: Design d'Information

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

Page 20: Design d'Information

Design d’information pour le web

1. Introduction / Eléments du design d’information

Visualisation de donnéesReprésentation visuelle de données quantitatives sous forme schématique

Histogram chart

Pie chart Table chart + Pie Chart

Page 21: Design d'Information

Design d’information pour le web

1. Introduction / Eléments du design d’information

Visualisation d’information

Network data map

Utilisation d’une représentation interactive de données pour augmenter la cognition.

Interactive map

Page 22: Design d'Information

Design d’information pour le web

1. Introduction / Eléments du design d’information

Visualisation de conceptElaboration de concepts qualitatifs, d’idées, de plans d’actions et d’analyses.

Gant Chart

Concept Map

Page 23: Design d'Information

Design d’information pour le web

1. Introduction / Eléments du design d’information

Visualisation de strategieUtilisation 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

Page 24: Design d'Information

Design d’information pour le web

1. Introduction / Eléments du design d’information

Visualisation métaphoriqueUtilisation de métaphores visuelles pour véhiculer une vision à partir de la représentation d’information.

Page 25: Design d'Information

Design d’information pour le web

1. Introduction / Eléments du design d’information

Visualisation composéeComposition de différents types de représentations au sein d’un même schéma.

Graphic facilitation

Cartoon

Page 26: Design d'Information

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 Experiencehttp://www.jjg.net/elements/

Page 27: Design d'Information

Design d’information pour le web

The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered 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 beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstract

time

Conception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

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 auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

task-oriented information-oriented

30 March 2000

© 2000 Jesse James Garrett http://www.jjg.net/ia/

1. Introduction / Eléments de l’expérience utilisateur

Page 28: Design d'Information

Design d’information pour le web

The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered 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 beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstract

time

Conception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

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 auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

task-oriented information-oriented

30 March 2000

© 2000 Jesse James Garrett http://www.jjg.net/ia/

1. Introduction / Eléments de l’expérience utilisateur

Page 29: Design d'Information

Design d’information pour le web

The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered 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 beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstract

time

Conception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

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 auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

task-oriented information-oriented

30 March 2000

© 2000 Jesse James Garrett http://www.jjg.net/ia/

1. Introduction / Eléments de l’expérience utilisateur

Page 30: Design d'Information

Design d’information pour le web

The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered 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 beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstract

time

Conception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

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 auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

task-oriented information-oriented

30 March 2000

© 2000 Jesse James Garrett http://www.jjg.net/ia/

1. Introduction / Eléments de l’expérience utilisateur

Page 31: Design d'Information

Design d’information pour le web

The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered 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 beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstract

time

Conception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

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 auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

task-oriented information-oriented

30 March 2000

© 2000 Jesse James Garrett http://www.jjg.net/ia/

1. Introduction / Eléments de l’expérience utilisateur

Page 32: Design d'Information

Design d’information pour le web

The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered 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 beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstract

time

Conception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

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 auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

task-oriented information-oriented

30 March 2000

© 2000 Jesse James Garrett http://www.jjg.net/ia/

1. Introduction / Eléments de l’expérience utilisateur

Page 33: Design d'Information

Design d’information pour le web

The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered 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 beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstract

time

Conception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

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 auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

task-oriented information-oriented

30 March 2000

© 2000 Jesse James Garrett http://www.jjg.net/ia/

1. Introduction / Eléments de l’expérience utilisateur

périmètre du cours

Page 34: Design d'Information

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

Page 35: Design d'Information

Design d’information pour le web

‣ Préambule : Contexte métier

2. 4 axes de conception / Préambule

Page 36: Design d'Information

Design d’information pour le web

Tactique

Stratégique

ConceptionDocumentation

2. 4 axes de conception / Préambule

Page 37: Design d'Information

Design d’information pour le web

Tactique

Stratégique

ConceptionDocumentation

Etudesstratégiques

2. 4 axes de conception / Préambule

Page 38: Design d'Information

Design d’information pour le web

Tactique

Stratégique

ConceptionDocumentation

Conceptionstratégique

Etudesstratégiques

2. 4 axes de conception / Préambule

Page 39: Design d'Information

Design d’information pour le web

Tactique

Stratégique

ConceptionDocumentation

Design fonctionnel

Conceptionstratégique

Etudesstratégiques

2. 4 axes de conception / Préambule

Page 40: Design d'Information

Design d’information pour le web

Tactique

Stratégique

ConceptionDocumentation

Design fonctionnel

Structuration de

l’information

Conceptionstratégique

Etudesstratégiques

2. 4 axes de conception / Préambule

Page 41: Design d'Information

Design d’information pour le web

Tactique

Stratégique

ConceptionDocumentation

Design fonctionnel

Structuration de

l’information

Spécificationlogique

Conceptionstratégique

Etudesstratégiques

2. 4 axes de conception / Préambule

Page 42: Design d'Information

Design d’information pour le web

Tactique

Stratégique

ConceptionDocumentation

Design fonctionnel

Structuration de

l’information

Spécificationlogique

Conceptionstratégique

Etudesstratégiques

Analyses statistiques

2. 4 axes de conception / Préambule

Page 43: Design d'Information

Design d’information pour le web

Tactique

Stratégique

ConceptionDocumentation

Design fonctionnel

Structuration de

l’information

Spécificationlogique

ConceptionStratégique

Etudesstratégiques

Analyses statistiques

2. 4 axes de conception / Préambule

Page 44: Design d'Information

Design d’information pour le web

Design fonctionnel

Structuration de

l’information

Spécificationlogique

ConceptionStratégique

2. 4 axes de conception / Préambule

Page 45: Design d'Information

Design d’information pour le web

‣ Conception stratégique

2. 4 axes de conception / Conception stratégique

‣ Exploration conceptuelle‣ Définition du contexte, des besoins, des moyens

Page 46: Design d'Information

Design d’information pour le web

Mind map

“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

2. 4 axes de conception / Conception stratégique

✓ Initier la réflexion✓ Dépasser les limites du projet

Page 47: Design d'Information

Design d’information pour le web

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

Page 48: Design d'Information

Design d’information pour le web

Commandes

Previews

Etudes d e cas

Cahiers d e tendances

Newsletter

Podcasts

Blog "current brieffing"

Devenez correspondant ("Trend watcher")

Veille interactive

Photos / diaporama

Sons / ambiance

Couleurs

Objets

fiches

par thématiques

par format

p ar saison

fiches

inspirations

interviews portraits

spécialités

Equipe

Extension des cahiers

cf. Energie Lab

par cible

par marchés

Cahiers sociétaux

Publications

Ressources

Online training

Libres blancs

Articles

Accès conférences

Peclers "Connect"

Training / séminaires

Accompagnement sur missions

Coaching

Conférences

Petits-déjeuners Evènements

Conseil

indexation des cahiers d e tendance

Index par thèmes

par mot-clés

Questionnaire créatif

Recherche thématique

Accessibilité

Référencement

Périodicité des contenus

Diffusion

Visibilité

Ecoles d e design et mode

Network étudiants

Trend Lab 2.0Laboratoire participatif

Mentoring

Etudes

Design

Analyses

Veille

Processus d e conception

Missions

testimonials

client lists

client case

Références

Métier

PECLERS

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

Page 49: Design d'Information

Design d’information pour le web

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

Page 50: Design d'Information

Design d’information pour le web

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

Page 51: Design d'Information

Design d’information pour le web

Framework

2. 4 axes de conception / Conception stratégique

✓ Définir le périmètre de l’expérience utilisateur✓ Servir de lguide à la conception des fonctions

Page 52: Design d'Information

Design d’information pour le web

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

Page 53: Design d'Information

Design d’information pour le web

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

Corolle Kinra Girls

Intimate

Extimate

My accountMy profileMy avatar

My bedroomThe schoolAdventure places

MembersFriends

Edutainment modulesMediaGames

2

3

4

1

Who I am

Where I go

Who I meet

What I do

mardi 21 juillet 2009

Page 54: Design d'Information

Design d’information pour le web

Cas : AFII

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

Page 55: Design d'Information

Design d’information pour le web

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

Intégration réseaux

Information & documentation

Mise en relation

Page 56: Design d'Information

Design d’information pour le web

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

Page 57: Design d'Information

Design d’information pour le web

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

Page 58: Design d'Information

Design d’information pour le web

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

Page 59: Design d'Information

Design d’information pour le web

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

Page 60: Design d'Information

Design d’information pour le web

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

Page 61: Design d'Information

Design d’information pour le web

Cas : Michelin

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

Page 62: Design d'Information

USER MICHELINSMART

DRIVERSNETWORK

Page 63: Design d'Information

INDIVIDUAL

COLLECTIVE

PERSONAL PREFERENCES

COMMUNITY

EQUIPMENT

ENVIRONMENT

TRAFFIC

USER MICHELIN

Page 64: Design d'Information

DATA

INDIVIDUAL

COLLECTIVE

PERSONAL PREFERENCES

COMMUNITY

EQUIPMENT

ENVIRONMENT

TRAFFIC

USER MICHELINDATA

} }

Page 65: Design d'Information

USER MICHELIN

INDIVIDUAL

COLLECTIVE

My Account

Ask Michelin,Wikimedia

Brand website

User communities

Brand website

Ask Michelin,Wikimedia

Dealers input Dealers input

PERSONAL PREFERENCES

COMMUNITY

EQUIPMENT

ENVIRONMENT

TRAFFIC

Page 66: Design d'Information

Design d’information pour le web

Modèle conceptuel

2. 4 axes de conception / Conception stratégique

✓ Définir les besoins et les usages✓ Définir les moyens✓ Expliquer, éduquer

Page 67: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Schéma conceptuel

Page 68: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Schéma conceptuel

2D

pré-achat

achat

post-achat

Avatar

Magazine

en ligne

Contenus et offres

personnalisées

consulte

Profilcrée

reçoit

coach

Evénements

virtuels

regarde,participe

Gifted Friends

Espaces

virtuelles non-

marchands

crée

visite

Wishlist

3D

Garde

robe

Plateforme Gifted

User concept model

Service cadeaux

consulte l!avatar de ses amis

Feedbacks

Livraisons

suit recoit

Conseiller personnel

browse, achète, personnalise des produits

envoie des cadeaux

conduit à

Ambassadeurs+ Groupes

conseillent des nouveautés

Boutiques en ligne

2D

3D

conseille

Gifted User

consultent,essaient

partagent

organise

crée

ajout de produits

Produit

Commande

peut renvoyer

donneInterface

customisée

créepersonnalise

personnalise

lundi 21 septembre 2009

Page 69: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Schéma conceptuel

I WANT ANSWERS

I WANT TO KNOW MORE

I WANT TO PERSONALIZE

I WANT TO TELL OTHERS

IFP

First time

Mum Guide

Maternity finder

eCoupons

QuickFinder

for Infant

Formula

Brand campaigns

Product info

Milk

comparison

Mum!s experience concept model

ask questions in natural language

Semantic

search

specific answer

specific answer

specific answer

specific answer

display

display

display

want to have product information

Recipe content

want recipe ideas

want to retrieve informations about local maternities

want quick answers

Baby

routine

handbook

Baby reader /

Translator

Healthy start

activities

want quick answers

convert user

convert user

want to find best milk

find solutions for special needs

understand baby

IFP

First time

Mum Guide

convert user

convert user

Quality and

security

get help withdaily routine

trust products

get practical advices

get ideas for what to do with baby

want to save money

understand the what to feed baby

My

maternity

checklist

Baby

naming tool

My

pregnancy

calendar

My

Food diary

Calculators

My

baby!s

growth

curve

eLoyalty

My baby

handbook

First

milestones

album

track & learn

understand what my baby

needs

track and cherish

get organized

organize

understand & track

drive to a fidelity program

save money

family, friends

mum

mum

mum

inform

share

inspiration and trend spotting

share

delegate

share

inform

check

Growth

curves

understand

Nestlé

give opinion

display

mum

mercredi 29 juillet 2009

Page 70: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Schéma conceptuel

Interaction

Inve

stig

atio

n

Build

Com

munities

Navigation

Custo

m N

avigaion

Explo

ratio

n

Characters Adventu

res

Generate C

ontent

Educa

tive

Le

arni

ng

Casual

Pla

y

Explore a

Campus place

Explore a

Theme place

Explore a

Objects

?

Bookmarked

Place

Popular Places

View an

edutainment module

ABCABC

View a Kinra Media

View a Educative Media

create

my Avatar

create my

Bedroom

customize

my Bedroom

complete my

Preferences

customize

my Avatar

Navigation map

Navigation Lists

and menus

Shortcuts

Last visited

See a member’s

Profile

Visit my

neighbors’ profile

See who’s online

Chat

Join a Group / Club

Invite "real" Friends

Add a Member

as Friend

Send Message

to Friend

Send a Gift to FriendWrite a note on

a member’s Board

Participate in an enigma

Make an artistic creation

Update my miniblog

Share pictures

Participate in a Quizz

Play a

single-player game

Play a

multi-player game

Read / Listen to

a Kinra Story

create my

Account

create my

Profile

Page 71: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Schéma conceptuel

Page 72: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Schéma conceptuel

Page 73: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Conception stratégique / Schéma conceptuel

Page 74: Design d'Information

Design d’information pour le web

Cas : Peclers Paris

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

Page 75: Design d'Information

Design d’information pour le web

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

Page 76: Design d'Information

Design d’information pour le web

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

Page 77: Design d'Information

Design d’information pour le web

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

Page 78: Design d'Information

Design d’information pour le web

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

Page 79: Design d'Information

Design d’information pour le web

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

Page 80: Design d'Information

Design d’information pour le web

‣ Design fonctionnel

2. 4 axes de conception / Design fonctionnel

‣ Définition des fonctionnalités‣ Définition de l’expérience utilisateur

Page 81: Design d'Information

Design d’information pour le web

Conception fonctionnelle

2. 4 axes de conception / Design fonctionnel / Conception fonctionnelle

✓ Formaliser les principes directeurs✓ Définir les modalités de l’expérience utilisateur

Page 82: Design d'Information

Design d’information pour le web

CISCO BFM TV / WIKITV

Education

Economie

Santé Sport

Environ.t

etc.

CERCLES

de discussions

Thème

Thème

Thème

ThèmeThème

ThèmeThème

ThèmeThème

Thème

Thème

Thème

ThèmeThème Thème Thème

Thème

Cercle de discussion (détail)

Présentationthéme

Forum/ blog de discussion

(sujet)

Projets

Présentationprojet

Commentaires

sélection de discussions sélection de projetsMODERATION

THEMATIQUES PROJETS

COMMUNAUTEProfil simple Créer un projet

Wiki projet

ACCUEILCISCO BFM WIKITV

Annonce emission LIVE

Archives emissions

Présentation cercles de discussions

Projets Discussions récentes

LIVE

sélection de membres

Messagerie interne

Inscription

Simple

Créateur Validation

Thème

BLOG REDACTIONBlog rédaction Commentaires

ARCHIVES EMISSIONSPrésentation

emission

RemontéeCommentaires

CISCO BFM WIKITV

LIVEFLUX LIVE

Commentaires

Liste participants

Remontée Projets

Commentairesretenus par la

rédaction

Sujets

Sujets

Sujets Sujets

Sujets

Sujets

Sujets

Sujets

Sujets

Sujets

Sujets

SujetsSujets

Sujets

Sujets

Sujets

Sujets

Sujets

Remontée Sujets

Profils participants

Archives des emissions

Phase 2

Phase 2

2. 4 axes de conception / Design fonctionnel / Conception fonctionnelle

Page 83: Design d'Information

Design d’information pour le web

Choose Guys / Girls } } } }

RedTab Engineered Blue Vintage

Details

preview

Browse collections

M / W

Display product Product

picture

Discover the perfect match

Improve your look

Discover the perfect match Improve your look

Find your size (cf truejeans.com, zafu.com)

Product

picture

Tops

Bottoms

Shoes

Accessories

Expert

review

Other

reviews

1. measure

2. body shape

Add to wishlist

Pushed content

Improve your look

Add to wishlist

Pushed content

Discover the perfect match

Event selection

Pushed content

Discover the perfect match

Add to wishlist

Pushed content

Event selection

Browse by

events

Tops

Bottoms

Shoes

Accessories

Improve your look

Add to wishlist

Pushed content

Colours

Patterns

Details

Zoom

Find your size

Find your size Find your size

Event selection

Discover the perfect match

Improve your look

Add to wishlist

Menu

Event selection

Registration form

Find your size (results)

3. results

Discover the perfect match

Add to wishlist

Pushed content

Wishlist

Product list

Registration form

Discover the perfect match

Event selection

Pushed content

Want to feel different ?

Browse by

mood

Tops

Bottoms

Shoes

Accessories

Improve your look

Add to wishlist

Pushed content

Find your size

Want to feel different ?

Want to feel different ?

Post your look / reviews / comment

Users

reviews

Other

reviews

Registration form

Receive info (newsletter / RSS...)

Product

reviews

Other

reviews

PRINT

FIT

GU

IDE

CA

TA

LO

GC

OM

MU

NIT

YP

ER

SO

NN

AL

2. 4 axes de conception / Design fonctionnel / Conception fonctionnelle

Page 84: Design d'Information

Design d’information pour le web

Hennessy Artistry

The Collection

Inside Hennessy

e-Store

Art of Mixing

Landing

News & events

Downloads

VIPs

by countries

by artists

by date

Contest

Win tickets

Rate a video

Stores & Bars Locator

Henessy bars

Add a comment to a bar description

Rate a bar

Add your favorite bar

Hennessy Moments

240 years

Milestone

A cult brand

La Maison

Advertising

V.S.

V.S.O.P

Fine de Cognac

X.O.

Private Reserve

Paradis Extra

Richard Hennessy

Creating Cognac

When your senses sharpen

When the occasion

stands apart

Secrets of the Mix

(Podcast)

History of cocktails

Cocktails recipes

Newsletter

Local and global events

Products Bar Locator

History Artistry Events

eShop

What is Artistry

Best cocktails

Best atmosphere

Best music

Best location

Best design

Henessy Stores

Widget for iPhone

Participate :

(MANIFESTO)

When the light charms

everyone

Art of mixing

When the flavour tells

a story

When the music

sounds...

When the night glows from inside

When you savor the moment

1 2 3

4 5 6

7

Search

LLL

LL

L

L L

L

L

L

L

Contact us

Terms & conditions

Privacy Statement

Hennessy Artistry Tour Map

Participate :

Add a comment to a

video

by events

L : Managed by countries

Select :Select :

Register

Store & Bars LocatorCommunity

Profile

Phase 2Widget for your computer

Hennessy Pictures Gallery

My Playlist

Add to playlist

2. 4 axes de conception / Design fonctionnel / Conception fonctionnelle

Page 85: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Design fonctionnel / Conception fonctionnelle

Page 86: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Design fonctionnel / Conception fonctionnelle

Page 87: Design d'Information

Design d’information pour le web

Modèle utilisateur✓ Proposer une réponse aux besoins utilisateurs✓ Eprouver son dispositif stratégique✓ Visualiser les parcours et les usages

2. 4 axes de conception / Design fonctionnel / Modèle utilisateur

Page 88: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Design fonctionnel / Modèle utilisateur

Page 89: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Design fonctionnel / Modèle utilisateur

Page 90: Design d'Information

Design d’information pour le web

http://www.flickr.com/photos/activeside/2183235913/

2. 4 axes de conception / Design fonctionnel / Modèle utilisateur

Page 91: Design d'Information

Design d’information pour le web

Cas : Nestlé

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

Page 92: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Design fonctionnel / Modèle utilisateur

Page 93: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Design fonctionnel / Modèle utilisateur

Page 94: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Design fonctionnel / Modèle utilisateur

Page 95: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Design fonctionnel / Modèle utilisateur

Page 96: Design d'Information

Design d’information pour le web

Réaliser sous forme de croquis le modèle conceptuel de Amazon.fr

• produits• transactionnel• aspects “sociaux”• services

Prendre en compte :

Page 97: Design d'Information

Design d’information pour le web

‣ Structuration de l’information

2. 4 axes de conception / Structuration de l’information

‣ Stratégie des contenus‣ Arborescences

Page 98: Design d'Information

Design d’information pour le web

Stratégie des contenus✓ Expliquer, présenter, démontrer✓ Soutenir le propos stratégique✓ Définir les grandes masses d’information✓ Définir une logique de production des contenus

2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle

Page 99: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle

Page 100: Design d'Information

Design d’information pour le web

Minute Maid Natural Vitality / site map

Discover Natural Vitality

Bring life into your lifeBring life into your life

Products for your life Who we are

Phyto-nutrition

What are phyto-compounds?

How do they protect fruits?

Benefi ts for human health

Science links

Fruits & veg.in your diet

From fruits to fruit juices

Benefi ts of each fruits

History of fruits...

Myths & realities

Pleasure of fruits in our lives

Interview Videos

Quizz

Products for your life

Who we are

Range 1

Range 3

Range 2

Range...

Our process Commitments

Corp. news 1 detail

Corp. news... detail

Healthcare Pro.Healthcareprofessionals

HCP links

Press AreaPress releases

Press kit

Gallery

The MM Club

Offer 1

Offer...

Widgets

Interviews...

Videos...

Contact us

Search

Discover Natural Vitality / HP

Test your phyto-profi le

content provided by Burston Marsteller

Products

Recipes

Press area

Coupons &special offers

Exclusive content

Screensavers & wallpapers

Goodies

Health & wellness Tips

Corporate news

Our websites (Coca-cola company)

Tips & advice

Experts’ answers

Our label

History

MIXED CONTENT MANGEMENT(Local + Europe)

LOCAL CONTENT MANGEMENTEUROPEAN CONTENT MANGEMENT

Product news 1 detail

Product news... detail

Product News

Quality Environm.responsability

2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle

Page 101: Design d'Information

Design d’information pour le web

http://www.flickr.com/photos/pictopedia/2277436580/in/set-72157605031206718/

2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle

Page 102: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle

Confident and independant.

Mum

's M

ilest

ones

Mum

's Q

uest

ions

-9-10-11-12 -8 -7 -6 -5 -4 -3 -2 -1 Birth 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

Baby

's M

ilest

ones

Mum's JourneyCreated August 2009

First seperations. It's starting to feel like a family.Fusional relationship between Mum & Baby

ToddlerBabyNewbornIt's all about mumPrenatal

Mon

th b

y m

onth

baby can be naughty

teaching good behaviour

baby starts start potty training

baby starts to have friends

first 'real' holiday as a family

2 year check up

with Pediatri-

cian

Baby goes to

pre-school

toddler dresses on

his own

Can baby eat like us?Is he getting too much sugar?

How to deal with tantrums?

How can I teach him?

When will he play by himself?

When will he make friends?

What games can i find for baby online?

Is he ready for school?

Is he happy?

How to introduce a little brother/sister?

Will he remember his baby food?

What about a second baby?

What games can/ should we play?

How do I know my baby is well/healthy?

What should I do when baby is too excited to sleep?

climbs

dances to music

baby's digestive system reaches maturity

masters some words

start of tricycle riding

uses a fork

learns to rundevelops his balance

first sentences & can start to sing

toilet-trained

develops speech more quickly

still has specific nutritional needs

climbs stairs step by step

develops complete set of teeth

ridesbike

right or left handed?

better hand coordination

baby cries when mum leaves

feeling more "normal"

starting to get out and about

begin weaning

family mealtimes

dealing with "no"!

sharing new developments with friends & family

baby moves to own room

first games with baby

getting pre-pregnancy body back

monthly appointments with doctor (vaccinations, check-ups)

baby starts to sleep through the night

9 months check-up

baby's first

birthday

Is baby ready for weaning?

Ready for pram?what to do about Colic?

Can I find natural or food for baby?

How much?

Is he ready for finger food?

When will she feed herself?

can baby eat birthday cake?home-made or baby food?

When can I give her cow's milk?

How can I baby proof my house?

What to do with a fussy eater?

How do I teach baby good manners?

How can I save money?

Which foods are safe for baby?

When will she really say "mum" and "dad"?

What new foods, when and how?

How can I stimulate baby's development?

How do I protect my baby?

tries to catch his feet

babbles

first teeth

grabs his bib

more mature digestive system

stands on all fours

grabs his bib

begins to chew

better breathing while eating

starts self feeding

understands yes and no

shows likes and dislikes

can swallow mushy food

sees clearlyasserts independence

knows his name

masters chewing

first step

expresses refusal

language initiation

eats with spoon

starts to understand how objects work reinforced immune system

says "No" all the time

confident in walking

turns pages of books

starts to draw

shows when he is happy or scared

enjoys looking at books

waves bye bye

understands gestures and surrounding objects

recognises direction of sound

starts to say 'ma' and 'da'

sits with support

crawls

stands up

plays with feet

sits by himeself

picks up objects

grabs spoon

eats in highchair

passes objects

almost perfect vision

stomachcapacity250ml

laughs and smiles at familiar faces

recognises mum'sabsence

recognises smells and colours

drops things

takes food to mouth

drinks with help

says 'mum' and 'dad' with sense

chases things with his index

drinks from cup with help

better tongue and lip control

tries to eat alone

maintains eye contact

Lifts head 45°

Cries when hungry

grasps finger

recognises his hands

grasps finger

digestive system is immature

recognises voices and sounds

Listens and stays alert

restless before feeding

learns sucking reflex

first smile first laugh

stomach capacity

30 to 120ml

leaves the hospital

first night home

1st week check-up

quality time with baby: evening meals important

back at work (for some)

leaving baby with nanny or family

in a "bubble", at home with baby

birth announced (informal)

birth announced(formal cards)

rebuilding a couple life after birth

transition from breastmilk to bottle

Why is he losing weight?

Which name?Is he getting enough milk?

What can I eat to have the best milk?

Pacifier?

Is he comfortable?

Will he be allergic?

What will baby do next?

Why is baby crying?

Breastfeeding or bottle?

Am I a good mother?Is baby developing

normally?

Why can't baby sleep through?

baby blues

choosing a doctor

general announcement

morning sickness

start of cravings register for day nursery

notice body changes

anxiety about viability of pregnancy

look for maternity clothes

researching information about pregnancy & birth

checks ups with doctor/ gynecologist once a month

pregnancy test

baby's first kick

begins moving

tellingdad

maternityregistration

first ultrasound : expected birth date

Nesting: final preparation for baby's arrival

second ultrasound

birth classes

maternity leave

buying food adapted for pregnancy

Can my baby feel and think?

Do I need to take supplements?What can I eat?

Am I pregnant?Where can I find the right information?

Which hospital?

How do my habits affect my baby?

What should I expect?

Home or hospital birth? Boy or girl?

Are we ready?

Will my baby be healthy?

the embryo becomes a fœtus (90% of

organs have started to

grow)

umbilical cord starts

to grow

100% of organs are

formed

develops touch

sensitivity

sex is confirmed

develops capacity to

smell develops hearing

eye sight develops

brain development

quickens

able to form memories

false contractions adopts a

sleep pattern

baby engages

What can go wrong?

Will I be a good Mum?

I'm a mother!

Page 103: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle

Confident and independant.

Mum

's M

ilest

ones

Mum

's Q

uest

ions

-9-10-11-12 -8 -7 -6 -5 -4 -3 -2 -1 Birth 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

Baby

's M

ilest

ones

Mum's JourneyCreated August 2009

First seperations. It's starting to feel like a family.Fusional relationship between Mum & Baby

ToddlerBabyNewbornIt's all about mumPrenatal

Mon

th b

y m

onth

baby can be naughty

teaching good behaviour

baby starts start potty training

baby starts to have friends

first 'real' holiday as a family

2 year check up

with Pediatri-

cian

Baby goes to

pre-school

toddler dresses on

his own

Can baby eat like us?Is he getting too much sugar?

How to deal with tantrums?

How can I teach him?

When will he play by himself?

When will he make friends?

What games can i find for baby online?

Is he ready for school?

Is he happy?

How to introduce a little brother/sister?

Will he remember his baby food?

What about a second baby?

What games can/ should we play?

How do I know my baby is well/healthy?

What should I do when baby is too excited to sleep?

climbs

dances to music

baby's digestive system reaches maturity

masters some words

start of tricycle riding

uses a fork

learns to rundevelops his balance

first sentences & can start to sing

toilet-trained

develops speech more quickly

still has specific nutritional needs

climbs stairs step by step

develops complete set of teeth

ridesbike

right or left handed?

better hand coordination

baby cries when mum leaves

feeling more "normal"

starting to get out and about

begin weaning

family mealtimes

dealing with "no"!

sharing new developments with friends & family

baby moves to own room

first games with baby

getting pre-pregnancy body back

monthly appointments with doctor (vaccinations, check-ups)

baby starts to sleep through the night

9 months check-up

baby's first

birthday

Is baby ready for weaning?

Ready for pram?what to do about Colic?

Can I find natural or food for baby?

How much?

Is he ready for finger food?

When will she feed herself?

can baby eat birthday cake?home-made or baby food?

When can I give her cow's milk?

How can I baby proof my house?

What to do with a fussy eater?

How do I teach baby good manners?

How can I save money?

Which foods are safe for baby?

When will she really say "mum" and "dad"?

What new foods, when and how?

How can I stimulate baby's development?

How do I protect my baby?

tries to catch his feet

babbles

first teeth

grabs his bib

more mature digestive system

stands on all fours

grabs his bib

begins to chew

better breathing while eating

starts self feeding

understands yes and no

shows likes and dislikes

can swallow mushy food

sees clearlyasserts independence

knows his name

masters chewing

first step

expresses refusal

language initiation

eats with spoon

starts to understand how objects work reinforced immune system

says "No" all the time

confident in walking

turns pages of books

starts to draw

shows when he is happy or scared

enjoys looking at books

waves bye bye

understands gestures and surrounding objects

recognises direction of sound

starts to say 'ma' and 'da'

sits with support

crawls

stands up

plays with feet

sits by himeself

picks up objects

grabs spoon

eats in highchair

passes objects

almost perfect vision

stomachcapacity250ml

laughs and smiles at familiar faces

recognises mum'sabsence

recognises smells and colours

drops things

takes food to mouth

drinks with help

says 'mum' and 'dad' with sense

chases things with his index

drinks from cup with help

better tongue and lip control

tries to eat alone

maintains eye contact

Lifts head 45°

Cries when hungry

grasps finger

recognises his hands

grasps finger

digestive system is immature

recognises voices and sounds

Listens and stays alert

restless before feeding

learns sucking reflex

first smile first laugh

stomach capacity

30 to 120ml

leaves the hospital

first night home

1st week check-up

quality time with baby: evening meals important

back at work (for some)

leaving baby with nanny or family

in a "bubble", at home with baby

birth announced (informal)

birth announced(formal cards)

rebuilding a couple life after birth

transition from breastmilk to bottle

Why is he losing weight?

Which name?Is he getting enough milk?

What can I eat to have the best milk?

Pacifier?

Is he comfortable?

Will he be allergic?

What will baby do next?

Why is baby crying?

Breastfeeding or bottle?

Am I a good mother?Is baby developing

normally?

Why can't baby sleep through?

baby blues

choosing a doctor

general announcement

morning sickness

start of cravings register for day nursery

notice body changes

anxiety about viability of pregnancy

look for maternity clothes

researching information about pregnancy & birth

checks ups with doctor/ gynecologist once a month

pregnancy test

baby's first kick

begins moving

tellingdad

maternityregistration

first ultrasound : expected birth date

Nesting: final preparation for baby's arrival

second ultrasound

birth classes

maternity leave

buying food adapted for pregnancy

Can my baby feel and think?

Do I need to take supplements?What can I eat?

Am I pregnant?Where can I find the right information?

Which hospital?

How do my habits affect my baby?

What should I expect?

Home or hospital birth? Boy or girl?

Are we ready?

Will my baby be healthy?

the embryo becomes a fœtus (90% of

organs have started to

grow)

umbilical cord starts

to grow

100% of organs are

formed

develops touch

sensitivity

sex is confirmed

develops capacity to

smell develops hearing

eye sight develops

brain development

quickens

able to form memories

false contractions adopts a

sleep pattern

baby engages

What can go wrong?

Will I be a good Mum?

I'm a mother!

Page 104: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle

Confident and independant.

Mum

's M

ilest

ones

Mum

's Q

uest

ions

-9-10-11-12 -8 -7 -6 -5 -4 -3 -2 -1 Birth 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

Baby

's M

ilest

ones

Mum's JourneyCreated August 2009

First seperations. It's starting to feel like a family.Fusional relationship between Mum & Baby

ToddlerBabyNewbornIt's all about mumPrenatal

Mon

th b

y m

onth

baby can be naughty

teaching good behaviour

baby starts start potty training

baby starts to have friends

first 'real' holiday as a family

2 year check up

with Pediatri-

cian

Baby goes to

pre-school

toddler dresses on

his own

Can baby eat like us?Is he getting too much sugar?

How to deal with tantrums?

How can I teach him?

When will he play by himself?

When will he make friends?

What games can i find for baby online?

Is he ready for school?

Is he happy?

How to introduce a little brother/sister?

Will he remember his baby food?

What about a second baby?

What games can/ should we play?

How do I know my baby is well/healthy?

What should I do when baby is too excited to sleep?

climbs

dances to music

baby's digestive system reaches maturity

masters some words

start of tricycle riding

uses a fork

learns to rundevelops his balance

first sentences & can start to sing

toilet-trained

develops speech more quickly

still has specific nutritional needs

climbs stairs step by step

develops complete set of teeth

ridesbike

right or left handed?

better hand coordination

baby cries when mum leaves

feeling more "normal"

starting to get out and about

begin weaning

family mealtimes

dealing with "no"!

sharing new developments with friends & family

baby moves to own room

first games with baby

getting pre-pregnancy body back

monthly appointments with doctor (vaccinations, check-ups)

baby starts to sleep through the night

9 months check-up

baby's first

birthday

Is baby ready for weaning?

Ready for pram?what to do about Colic?

Can I find natural or food for baby?

How much?

Is he ready for finger food?

When will she feed herself?

can baby eat birthday cake?home-made or baby food?

When can I give her cow's milk?

How can I baby proof my house?

What to do with a fussy eater?

How do I teach baby good manners?

How can I save money?

Which foods are safe for baby?

When will she really say "mum" and "dad"?

What new foods, when and how?

How can I stimulate baby's development?

How do I protect my baby?

tries to catch his feet

babbles

first teeth

grabs his bib

more mature digestive system

stands on all fours

grabs his bib

begins to chew

better breathing while eating

starts self feeding

understands yes and no

shows likes and dislikes

can swallow mushy food

sees clearlyasserts independence

knows his name

masters chewing

first step

expresses refusal

language initiation

eats with spoon

starts to understand how objects work reinforced immune system

says "No" all the time

confident in walking

turns pages of books

starts to draw

shows when he is happy or scared

enjoys looking at books

waves bye bye

understands gestures and surrounding objects

recognises direction of sound

starts to say 'ma' and 'da'

sits with support

crawls

stands up

plays with feet

sits by himeself

picks up objects

grabs spoon

eats in highchair

passes objects

almost perfect vision

stomachcapacity250ml

laughs and smiles at familiar faces

recognises mum'sabsence

recognises smells and colours

drops things

takes food to mouth

drinks with help

says 'mum' and 'dad' with sense

chases things with his index

drinks from cup with help

better tongue and lip control

tries to eat alone

maintains eye contact

Lifts head 45°

Cries when hungry

grasps finger

recognises his hands

grasps finger

digestive system is immature

recognises voices and sounds

Listens and stays alert

restless before feeding

learns sucking reflex

first smile first laugh

stomach capacity

30 to 120ml

leaves the hospital

first night home

1st week check-up

quality time with baby: evening meals important

back at work (for some)

leaving baby with nanny or family

in a "bubble", at home with baby

birth announced (informal)

birth announced(formal cards)

rebuilding a couple life after birth

transition from breastmilk to bottle

Why is he losing weight?

Which name?Is he getting enough milk?

What can I eat to have the best milk?

Pacifier?

Is he comfortable?

Will he be allergic?

What will baby do next?

Why is baby crying?

Breastfeeding or bottle?

Am I a good mother?Is baby developing

normally?

Why can't baby sleep through?

baby blues

choosing a doctor

general announcement

morning sickness

start of cravings register for day nursery

notice body changes

anxiety about viability of pregnancy

look for maternity clothes

researching information about pregnancy & birth

checks ups with doctor/ gynecologist once a month

pregnancy test

baby's first kick

begins moving

tellingdad

maternityregistration

first ultrasound : expected birth date

Nesting: final preparation for baby's arrival

second ultrasound

birth classes

maternity leave

buying food adapted for pregnancy

Can my baby feel and think?

Do I need to take supplements?What can I eat?

Am I pregnant?Where can I find the right information?

Which hospital?

How do my habits affect my baby?

What should I expect?

Home or hospital birth? Boy or girl?

Are we ready?

Will my baby be healthy?

the embryo becomes a fœtus (90% of

organs have started to

grow)

umbilical cord starts

to grow

100% of organs are

formed

develops touch

sensitivity

sex is confirmed

develops capacity to

smell develops hearing

eye sight develops

brain development

quickens

able to form memories

false contractions adopts a

sleep pattern

baby engages

What can go wrong?

Will I be a good Mum?

I'm a mother!

Page 105: Design d'Information

Design d’information pour le web

Arborescences✓ Etablir la carte complète des briques d’information✓ Détailler la répartition de l’information✓ Visualiser les équilibres / déséquilibres

2. 4 axes de conception / Structuration de l’information / Cartographie informationnelle

Page 106: Design d'Information

Design d’information pour le web

Contre-exemples...

2. 4 axes de conception / Structuration de l’information / Cartographie informationnelle

Page 107: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Structuration de l’information / Cartographie informationnelle

Page 108: Design d'Information

Design d’information pour le web

Accueil

Etape 1Je suis

enceinte

Etape 2Mon corps

change

Etape 3Votre futur

bébé

Etape 4Le suivi de

ma

grossesse

Une

merveilleuse

aventure...

Qu’est-ce qui-

change dans

ma vie ?

D’où viennent

ces nouveaux

sentiments ?

Ma grossesse,

mes

démarches

Mon suivi

médical

Mon appetit

change

Ma prise de

poids

Mon capital

osseux

J’ai des petites

misères

Me préparer à

l’allaitement

Suis-je

fragile ?

Comment

sera-t-il ?

J’attend des

jumeaux

Son corps se

construit

Ses 5 sens

aparraissent

Il devient une

personne

On me

découvre un

diabète

gestationnel

On me

découvre

de la tension

J’ai un excès

de poids

J’ai des

grossesses

rapprochées...

Les 7 fiches

pratiques

Besoins

énergétqiues

Besoins

protéiques

Besoins

en glucides

Besoins

en fer

Besoins

en acide

folique

Besoins

en calcium

Les vitamines

ActualitésTri par

catégories

Recherche

d’articlesInscription

Newsletter

Push

Carnet

Ses

perceptions

évoluent

FAQs Noter un

article

Envoyer un

article à une

amie

Recettes pour nous

deux

Calendrier de ma

grossesse

2. 4 axes de conception / Structuration de l’information / Cartographie informationnelle

Page 109: Design d'Information

Design d’information pour le web

GEST. DURABLE

1.1

1.1.1 PROTÉGER L’ENVIRONNEMENT1.1.2 DISTRIBUER L’EAU1.1.3 CONSOMMER MIEUX1.1.4 L’EAU DANS VOTRE VIE1.1.5 NOS ENGAGEMENTS1.1.6 VOS QUESTIONS

1.2.1 VOS PROJETS1.2.2 OFFRES1.2.3 FICHES REGIONS1.2.4 CONSEILS PRATIQUES1.2.5 VOS QUESTIONS

1.3.1 MON AGENCE EN LIGNE1.3.2 CONTACTER MON AGENCE

RECHERCHE

PLAN DU SITE

MENTIONS LEG.

arborescence / VUE GENERALE

SERVICES

1.2

AGENCE

1.3

1.5 VOS QUESTIONS1.6 CONTACTEZ-NOUS

1.4 ABONNEMENTS

PARTICULIERS

1.0

GEST. DURABLE

2.1

2.1.1 PROTÉGER L’ENVIRONNEMENT2.1.2 DISTRIBUER L’EAU2.1.3 CONSOMMER MIEUX2.1.4 L’EAU DANS VOTRE COMMUNE2.1.5 NOS ENGAGEMENTS2.1.6 VOS QUESTIONS

2.2.1 TECHNOLOGIES ET INNOVATIONS2.2.2 PROJETS DE COLLECTIVITES2.2.3 OFFRES2.2.4 FICHES REGIONS

2.3.1 AGENCE PRO EN LIGNE2.3.2 MON CONSEILLER COMMERCIAL

SERVICES

2.2

AGENCE

2.3

2.5 RESSOURCES2.6 VOS QUESTIONS

2.4 ABONNEMENTS

COLLECTIVITES

2.0

2.7 CONTACTEZ-NOUS

GEST. DURABLE

3.1

3.1.1 PROTÉGER L’ENVIRONNEMENT3.1.2 DISTRIBUER L’EAU3.1.3 CONSOMMER MIEUX3.1.4 L’EAU DANS VOTRE REGION3.1.5 NOS ENGAGEMENTS3.1.6 VOS QUESTIONS

3.2.1 TECHNOLOGIES ET INNOVATIONS3.2.2 PROJETS DE COLLECTIVITES3.2.3 OFFRES

3.3.1 AGENCE PRO EN LIGNE3.3.2 MON CONSEILLER COMMERCIAL

SERVICES

3.2

AGENCE

3.3

3.5 RESSOURCES3.6 VOS QUESTIONS

3.4 ABONNEMENTS

ENTREPRISES

3.0

3.7 CONTACTEZ-NOUS

GESTION. PARCS. IMMO.

INDUSTRIELS3.2.4 FICHES REGIONS

ACCUEIL

JUNIORS

CONTENU TRANSVERSAL

ESPACES

ENSEIGNANTS

QUI SOMMES-NOUS ?

PRESSE

CARRIERES

CONTACTEZ-NOUS

TENDANCES & OPINIONS

SITES GROUPE

2. 4 axes de conception / Structuration de l’information / Cartographie informationnelle

Page 110: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Structuration de l’information / Cartographie informationnelle

Page 111: Design d'Information

Design d’information pour le web

http://www.flickr.com/photos/pictopedia/2001748234/

2. 4 axes de conception / Structuration de l’information / Cartographie informationnelle

Page 112: Design d'Information

Design d’information pour le web

Liste des emissions

Accueil

Cercles de discussions Emissions

Landing page

Sommaire Sujet (forum) ConnexionEmissionsLive

Blog

Sommaire

Poster un

commentaire

Poster un

commentaire

Poster un

commentaire

Voter

Projets

Sommaire

Poster un

sujet

Mon compte

Mon Profil Mes préférences

Editer mon

profil public

Editer mes

informations

Connexion &

Inscription

Validation

email

Phase 2

Proposer un

sujet

Thématique

Flux des discussions tous sujets

Projets en relation

Projets récents

Billet Blog ds théme

Flux des discussions tous thèmes

Membres les + actifs

Flux video Live

Discussionlive

Poster un

commentaire

Baromêtre

Liste des sujets

Supprimer

mon compte

Flux des résumés

Profile Versac

Flux des discussions tous thèmes

Profile Versac

Membres les + actifs

Flux des comentaires

Contacts

Billet

PrésentationProjet

Présentation projet (extrait)

Profile créateur

Fichiers joints

Liste des projets

Projets les plus

commentés

Inscription

CISCO : HUMAN NETWORK

Push prochaine emission

Projets les plus récents

Video de présentation

Proposer un projet

Espace Administration

Projet

Forum Projet

Vidéo dernière emiision

Poster un

commentaire

Liste des catégories

Catégorie Projets

Liste des projets

Projets les plus

commentés

Projets les plus récents

Liste des catégories

Article présentation

(suite)

Upload

video

Texte de

présentation

Upload

Photos

Upload

documents

Gestion du

forum

Validation ouverture

espace projet

Galerie photos

2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle

Page 113: Design d'Information

Design d’information pour le web

Agassi-Graff Deneuve

Acceuil

Gorbachev

Receive update

Send to a friend

Sound experience

Trunk : Agassi

Sound experience

Trunk : Deneuve

Sound experience

The Green Cross

Chapitres

menu : Agassi-Graff menu : Deneuve menu : Gobachev

menu : Agassi-Graff

menu : Agassi-Graff

LV Travel

menu : Agassi-Graff

menu : More Trunks

menu : Deneuve

menu : Deneuve

menu : More Trunks

Selection chapitres

Menu rollover

View by chapter

Download experience

menu : Agassi-Graff

Sous-titres (on/off)

menu : Agassi-Graff

L’arrivée à New York

menu : Agassi-Graff

L’énergie de Soho

menu : Agassi-Graff

ChinaTown and Little Italy

menu : Agassi-Graff

Central Park & National HIstory Museum

menu : Agassi-Graff

Campagnola Restaurant

menu : Agassi-Graff

Schaller & Weber. Deli

menu : Agassi-Graff

Yankee Stadium and Arthur Ashe Stadium

menu : Agassi-Graff

Coney Island

Chapitres

Selection chapitres

View by chapter

Download experience

menu : Deneuve

Sous-titres

menu : Deneuve

TBD

Sous-titres

menu : Deneuve

...

Chapitres

Selection chapitres

View by chapter

Download experience

menu : Gorbachev

Sous-titres

menu : Gobachev

TBD

Sous-titres

menu : Gobachev

...

menu : Gorbachev

menu : Gorbachev

Crédits

menu : Agassi-Graff

Making of

The climate project

Making of

menu : Agassi-Graff

menu : Agassi-Graff

menu : Deneuve

The climate project

menu : Deneuve

LV Travel

menu : Deneuve

Crédits

menu : Deneuve

LV Travel

menu : Gorbachoev

Crédits

menu : Gorbachev

13 objetsSac LV Ceinture LV Lunettes LV

Montre LV Souliers LV Organizer LV

Surf Balles Casque

Gants Bottes Surf Statue Liberté

Cadre photo

Rollover : x objectsTBD

Sous-titres (on/off)

Sous-titres (on/off)

Sous-titres (on/off)

Sous-titres (on/off)

Sous-titres (on/off)

Sous-titres (on/off)

Sous-titres (on/off)

ARBORESCENCE Minisite “ The Journeys”

Louisvuitton.com

Receive update

Send to a friend

Receive update

Send to a friend

Receive update

Send to a friend

Louisvuitton.com Louisvuitton.com Louisvuitton.com

0. 1.

2.0 3.0 4.0

2.0.1 2.0.2 2.0.3

2.1 2.1.2

2.1.32.2

2.2.3

2.2.1

2.1.1

2.3

2.4

2.5 2.6

3.0.1 4.0.1

3.1

3.2

3.3

3.4

3.5 3.6

3.1.3

3.1.2 4.1

4.1.3

4.1.2

4.2

4.3

4.4

4.5 4.6

Receive updatesReceive updates

2. 4 axes de conception / Structuration de l’information / Cartographie organisationnelle

Page 114: Design d'Information

Design d’information pour le web

‣ Spécification logique

‣ Conception détaillée‣ Documentation fonctionnelle

2. 4 axes de conception / Spécification logique

Page 115: Design d'Information

Design d’information pour le web

Conception détaillée

2. 4 axes de conception / Spécification logique / Conception détaillée

✓ Préciser sa pensée✓ Démontrer clairement✓ Eprouver le système✓ Détecter les failles

Page 116: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Spécification logique / Conception détaillée

Page 117: Design d'Information

Design d’information pour le web

http://www.flickr.com/photos/seeminglee/sets/72157601118684802/

2. 4 axes de conception / Spécification logique / Conception détaillée

Page 118: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Spécification logique / Conception détaillée

Page 119: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Spécification logique / Conception détaillée

Page 120: Design d'Information

Design d’information pour le web

http://www.flickr.com/photos/pictopedia/2001120445/in/photostream/

2. 4 axes de conception / Spécification logique / Conception détaillée

Page 121: Design d'Information

Design d’information pour le web

http://www.flickr.com/photos/pictopedia/2001817077/in/set-72157605031206718/

2. 4 axes de conception / Spécification logique / Conception détaillée

Page 122: Design d'Information

Design d’information pour le web

http://www.flickr.com/photos/pictopedia/2038191620/in/set-72157605031206718/

2. 4 axes de conception / Spécification logique / Conception détaillée

Page 123: Design d'Information

Design d’information pour le web

Documentation fonctionnelle✓ Lister les cas de façon exhaustive✓ Spécifier les détails✓ Transmettre son travail à une autre équipe

2. 4 axes de conception / Spécification logique / Documentation fonctionnelle

Page 124: Design d'Information

Design d’information pour le web

http://www.flickr.com/photos/22905080@N03/2233209327/

2. 4 axes de conception / Spécification logique / Documentation fonctionnelle

Page 125: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Spécification logique / Documentation fonctionnelle

Page 126: Design d'Information

Design d’information pour le web

http://www.flickr.com/photos/8760288@N07/2753050295/

2. 4 axes de conception / Spécification logique / Documentation fonctionnelle

Page 127: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Spécification logique / Documentation fonctionnelle

Page 128: Design d'Information

Design d’information pour le web

http://www.flickr.com/photos/pictopedia/2267207598/in/set-72157605031206718/

2. 4 axes de conception / Spécification logique / Documentation fonctionnelle

Page 129: Design d'Information

Design d’information pour le web

http://www.flickr.com/photos/pictopedia/1499739745/in/set-72157605031206718/

2. 4 axes de conception / Spécification logique / Documentation fonctionnelle

Page 130: Design d'Information

Design d’information pour le web

http://www.flickr.com/photos/pictopedia/2001483139/in/set-72157605031206718/

2. 4 axes de conception / Spécification logique / Documentation fonctionnelle

Page 131: Design d'Information

Design d’information pour le web

2. 4 axes de conception / Spécification logique / Documentation fonctionnelle

Page 132: Design d'Information

Design d’information pour le web

1.1 Sommaire 1.2 Thème 1.3 Carnet 1.4 Billet a.1 Identification 1.4 Billet + form. commentaire

a.2 inscription

0.0 Accueil non loggé

PARCOURIR LES CARNETS REDIGER UN COMMENTAIRE

CREER UN CARNET

a.1 Identification

a.2 inscription

c.4.1 Reglages Carnet

c.4.3 Rediger un billet

REDIGER UN BILLET

PARCOURIR LES Q-R

2.1 Sommaire 2.2 Thème

REPONDRE A UNE QUESTION

a.1 Identification

a.2 inscription

2.3 Répondre à une question

POSER UNE QUESTION

a.1 Identification

a.2 inscription

2.4 Poser une question

PARCOURIR LA COMMUNAUTE

3.1 Communauté 3.1.2 Tous les groupes

3.1.3 Thème

REJOINDRE UN GROUPE

3.1.4 Groupe (fiche)

3.2 Tous les membres

3.2.2 Fiche membre

a.1 Identification

a.2 inscription

g.0. Inscription groupe

g.1 Groupe (accueil)

a.3 Confirmationemail

AJOUTER PARENTS PRÉFÉRÉS

a.1 Identification

a.2 inscription

RECHERCHER

CONTACTER MEMBRE

a.1 Identification

a.2 inscription

3.2.2 Fiche membre + pop-in message

3.2.2 Fiche membre + pop-in alerte

AJOUTER AMIS

a.1 Identification

a.2 inscription

3.2.2 Fiche membre + pop-in message

EXPLORER UN GROUPE

g.2 Discussiong.2 Discussions groupe

PARTICIPER A UNE DISCUSSION

g.3 Publier un commentaire

PUBLIER UNE DISCUSSION

g.4 Créer une discussion

0.2 Créer votre carnet

0.1 Rediger un commentaire

0.3 Poser une question

R.0 Recherche R.2.1 Résultats editorial

R.0.1.1 Carnets

R.0.1.2 Q-R

R.1 Explorer (tags)

m.1 bloc Confirmation

R.0.1Editorial

R.0.2 Communauté

R.0.2.1 Membres

R.0.1.2 Groupes

RESULTATS DE RECHERCHE

R.2.2 Résultats Communauté

f.2 Envoyer à un ami

FONCTIONS ASSOCIÉES

m.1. bloc Confirmation

f.2.1 Pop-in Formulaire

f.2 Envoyer à un ami

FONCTIONS ASSOCIÉES

m.1. bloc Confirmation

f.2.1 Pop-in Formulaire

m.1. bloc Confirmation

REPONSES

f.3 Alerter l’administrateur

m.1. bloc Confirmation

f.3.1 Pop-in Formulaire

2.3 Question 2.3.2 Réponse

Communauté

Questions-réponses

Carnets de parents

RechercheACCUEIL

V2

2. 4 axes de conception / Spécification logique / Documentation fonctionnelle

Page 133: Design d'Information

Design d’information pour le web

6 QUESTIONS À SE POSER

‣ D’où provient l’information ?‣ Quelle est la nature de l’information ?‣ Quelle est l’audience ?‣ Quel est le contexte ?‣ Quels sont les résultats attendus ?‣ De combien de temps dispose-t-on ?

Page 134: Design d'Information

Design d’information pour le web

‣ D’où provient l’information ?

3. 6 questions à se poser

‣ Client décisionnaire‣ Client intermédiaire‣ Client spécialiste‣ Interne agence

Page 135: Design d'Information

Design d’information pour le web

‣ Quelle est la nature de l’information ?

3. 6 questions à se poser

‣ Brief‣ Etudes marketing‣ Recherches utilisateurs‣ Analyses data‣ Benchmarking‣ Bonnes pratiques

Page 136: Design d'Information

Design d’information pour le web

‣ Quelle est l’audience ?

3. 6 questions à se poser

‣ Client‣ Public débutant ou averti‣ Equipe interne‣ 1... 10... 200 personnes

Page 137: Design d'Information

Design d’information pour le web

‣ Quelle est le contexte ?

3. 6 questions à se poser

‣ Conception‣ Présentation‣ Documentation‣ Spécifications‣ Production‣ Nouveau projet ou upgrade‣ Etude

Page 138: Design d'Information

Design d’information pour le web

‣ De combien de temps dispose-t-on ?

3. 6 questions à se poser

‣ Pour la réalisation‣ Pour la présentation

Page 139: Design d'Information

Design d’information pour le web

‣ Quels sont les résultats attendus ?

3. 6 questions à se poser

‣ Vente‣ Concept global‣ Conception détaillée‣ Documentation

Page 140: Design d'Information

Design d’information pour le web

OUTILS

‣ Sketching‣ Les anciens outils‣ Les nouveaux outils‣ Les outils de demain...‣ Critères de choix

Page 141: Design d'Information

Design d’information pour le web

‣ Sketching

4. Outils / sketching

Page 142: Design d'Information

Design d’information pour le web

Page 143: Design d'Information

Design d’information pour le web

‣ Les anciens outils

4. Outils / Les anciens outils

‣ Powerpoint‣ Visio

Page 144: Design d'Information

Design d’information pour le web

Powerpoint

Page 145: Design d'Information

Design d’information pour le web

Visio

Page 146: Design d'Information

Design d’information pour le web

‣ Les nouveaux outils

4. Outils / Les nouveaux outils

‣ Applications de Mind Mapping‣ Axure‣ InDesign‣ Omnigraffle‣ Keynote

Page 147: Design d'Information

Design d’information pour le web

Applications de Mind Mapping

Visual Mind MindMeister Concept Draw Mind Map

FreeMind WikkaWiki VUE

XMIND

XMIND

Visual Mind OmniGraffle

Page 148: Design d'Information

Design d’information pour le web

Axure

Page 149: Design d'Information

Design d’information pour le web

InDesign

Page 150: Design d'Information

Design d’information pour le web

Omnigraffle

Page 151: Design d'Information

Design d’information pour le web

Keynote

Page 152: Design d'Information

Design d’information pour le web

‣ Demain

4. Outils / Demain

‣ Adobe Flash Catalyst

Page 153: Design d'Information

Design d’information pour le web

Adobe Flash Catalyst

Page 154: Design d'Information

Design d’information pour le web

‣ Critères de choix

4. Outils / Critères de choix

‣ Fonctionnalité et ergonomie applicative‣ Rapidité d’exécution‣ Portabilité et partage‣ Librairies‣ ...

Page 155: Design d'Information

Matthieu Mingasson Head of User Experience

136, Champs Elysées - 75008 Paris, France Tél. 33 (0)1 40 76 23 [email protected]

http://www.linkedin.com/in/mingasson

Ce cours a été élaboré par :