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