1. CONCEPTION
Master 2 : Management et Ingénierie de la Communication Numérique Interactive
E. Design d’interface et design d’interaction
Janvier 2010
Ecole des Gobelins
David Raichman
Senior UX Designer @ OgilvyInteractive
2. Conception | Design d’interface et design d’interaction
Les cours de conception
A. Introduction au design d’expérience utilisateur (UXD)
B. Les livrables de l’UXD
C. De la recherche utilisateur au design fonctionnel
D. Framework fonctionnel et stratégie des contenus
E. Design d’interface et design d’interaction
F. Utilisabilité
3. Conception | Design d’interface et design d’interaction
C. Design d’interface et design d’interaction
1. Introduction
2. Typologie des interfaces
3. Wireframes
4. Design d’interaction
6. Références
4. Conception | Design d’interface et design d’interaction
1. Introduction / Situation de la problématique
?
?
5. Conception | Design d’interface et design d’interaction
1. Introduction / Principe de l’IHM
Input Utilisateur
Interface
Homme Ordinateur
Output Système
6. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
7. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
8. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
9. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
10. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
11. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
12. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
13. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
14. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
15. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
16. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
17. Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
18. Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Re
lat
ion
Iconicité maximale st
op
ogra
ph
iqu
Objet lui-même es
Iconicité minimale
19. Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Re
lat
ion
Iconicité maximale st
op
ogra
ph
iqu
Objet lui-même es
Schéma anatomique
Iconicité minimale
20. Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Re
lat
ion
Iconicité maximale st
op
ogra
ph
iqu Re
Objet lui-même es
top latio
olo ns
giq
Schéma anatomique ue
s
Schéma de principe
Iconicité minimale
21. Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Re
lat
ion
Iconicité maximale st
op
ogra
ph
iqu Re
Objet lui-même es
top latio
olo ns
giq
Schéma anatomique ue
s
Schéma de principe Re
lat
ion
Schéma de formulation sl
og
iqu
es
Iconicité minimale
22. Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Re
lat
ion
Iconicité maximale st
op
ogra
ph
iqu Re
Objet lui-même es
top latio
olo ns
giq
Schéma anatomique ue
s
Schéma de principe Re
lat
ion
Schéma de formulation sl
og
iqu
es
Schéma en espace complexe
Iconicité minimale
23. Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Re
lat
ion
Iconicité maximale st
op
ogra
ph
iqu Re
Objet lui-même es
top latio
olo ns
giq
Schéma anatomique ue
s
Schéma de principe Re
lat
ion
Schéma de formulation sl
og
iqu
es
Schéma en espace complexe
Visualisation de données
Iconicité minimale
24. Conception | Design d’interface et design d’interaction
C. Design d’interface et design d’interaction
1. Introduction
2. Typologie des interfaces
3. Wireframes
4. Design d’interaction
6. Références
25. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Implementation-centred
+ -
Facile à construire Apprentissage long
- Public expert
26. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Implementation-centred
+ -
Facile à construire Apprentissage long
- Public expert
29. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Métaphoriques
w w w. s o u t h w e s t . c o m
+ -
intuitive contextuelle
aucun
utopique
apprentissage
38. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Idiomatiques
w w w. n i c k a d . c o m
+ -
modulaire apprentissage
interopérable court
interaction riche
40. Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Idiomatiques
i n p u t o u t p u t
naviguer, dessiner, idiomes changer de section,
acheter trier
composées
double-clic, checkbox, surbrillance
drag’n’drop, sélection
pointage, clic, primitives
curseur, texte
drag, touche pressée
41. Conception | Design d’interface et design d’interaction
C. Design d’interface et design d’interaction
1. Introduction
2. Typologie des interfaces
3. Wireframes
4. Design d’interaction
6. Références
42. Conception | Design d’interface et design d’interaction
3. Wireframes / Définition
Les wireframes sont des représentations visuelles
qui capturent à elles seules l’ensemble des décisions
stratégiques, fonctionnelles, d’architecture
d’information et d’ergonomie.»
Ils servent de référence pour le design graphique et pour le
développement du projet digital.
Ils contiennent différents niveaux de précision selon le
contexte.
43. Conception | Design d’interface et design d’interaction
3. Wireframes
Degré de précision
44. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Statique
45. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique
46. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique
47. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype papier
Low résolution Hi résolution
Sketching
Statique
48. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype papier
Low résolution Hi résolution
Sketching
Statique
49. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype
papier
Low résolution Hi résolution
Sketching
Statique
50. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype
papier
Low résolution Hi résolution
Sketching Ecrans (psd, jpg...)
Statique
51. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype
papier
Low résolution Hi résolution
Sketching Ecrans (psd, jpg...)
Statique
52. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype
papier
Low résolution Hi résolution
Sketching Ecrans
Statique
53. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype Prototype digital
papier (HTML, Flash...)
Low résolution Hi résolution
Sketching Ecrans
Statique
54. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype Prototype digital
papier (HTML, Flash...)
Low résolution Hi résolution
Sketching Ecrans
Statique
55. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Hi résolution
Sketching Ecrans
Statique
56. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Wireframes Hi résolution
Sketching Ecrans
Statique
57. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Wireframes Hi résolution
NIDO Website - 1.1.1 Diary
Hi Lynn | My account | Log Out | Help
NIDO Home Moments Health Matters Our Range
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
John’s Family Diary TELL MY
FRIENDS NOW !
Edit friends list
Oscar Angelica
Show me All entries Starting from rst day | today Only highlights
Edit my pro le
12 Lorem ipsum et diliagt gentris sed etiam unique valor,
Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta...
Recently added Si meliora est vede meccum !
3 You have new comments !
Mary, Ellen, Peter Everyday | 2 comments new
Family & Friends
View all
! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor,
invitation
Comments 11
MAY melior paritus. Et uni soesu terrae submitta...
You have: 6 family members, 14
3
friends you have new comments! Si meliora est vede meccum !
> View all Everyday | 2 comments new
Your highlights
Slideshow 10 Lorem ipsum et diliagt gentris sed etiam
MAY unique valor, melior paritus. Et uni soesu
terrae submitta...
Health Matters
Everyday | 2 comments
Spotting & Treating
Food Allergies
08 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
> How to know if your child Everyday | 2 comments new
is at risk
06 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
05 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
Contact Us Privacy Terms & privacy Copyrights Send to a friend
Sketching Ecrans
Statique
58. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Hi Lynn | My account | Log Out | Help
NIDO Home Moments Health Matters Our Range
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
John’s Family Diary Interactif TELL MY
Prototype FRIENDS NOW ! Prototype
papier Oscar Angelica
Edit friends list
digital
Show me All entries Starting from rst day | today Only highlights
Edit my pro le
12 Lorem ipsum et diliagt gentris sed etiam unique valor,
Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta...
Recently added Si meliora est vede meccum !
Mary, Ellen, Peter Everyday | 2 comments new
View all
11 Lorem ipsum et diliagt gentris sed etiam unique valor,
Comments MAY melior paritus. Et uni soesu terrae submitta...
3 you have new comments! Si meliora est vede meccum !
Everyday | 2 comments new
Your highlights
Wireframes
Slideshow 10 Lorem ipsum et diliagt gentris sed etiam
MAY
Low résolution Hi résolution
unique valor, melior paritus. Et uni soesu
terrae submitta...
Health Matters
Everyday | 2 comments
Spotting & Treating
Food Allergies
Lorem ipsum et diliagt gentris sed etiam unique valor,
NIDO Website - 1.1.1 Diary
08 Hi Lynn | My account | Log Out | Help
MAY NIDO melior paritus. Et uni soesu terrae submitta...
Home
My Activities |
Moments
Capture a moment
Health Matters
| Diary | Highlights
Our Range
| My friends | Health Tracker
John’s Family Diary
Si meliora est vede meccum ! TELL MY
FRIENDS NOW !
Edit friends list
Oscar Angelica
> How to know if your child Everyday | 2 comments new
Show me All entries Starting from rst day | today Only highlights
is at risk
Edit my pro le
12 Lorem ipsum et diliagt gentris sed etiam unique valor,
Your Friends (14) MAY melior paritus. Et uni soesu terrae submitta...
Recently added Si meliora est vede meccum !
3 You have new comments !
Mary, Ellen, Peter Everyday | 2 comments new
Family & Friends
View all
! Erin has accepted your Lorem ipsum et diliagt gentris sed etiam unique valor,
invitation
Comments 11
MAY melior paritus. Et uni soesu terrae submitta...
You have: 6 family members, 14
3
friends you have new comments! Si meliora est vede meccum !
Lorem ipsum et diliagt gentris sed etiam unique valor,
> View all Everyday | 2 comments new
06 Your highlights
Slideshow 10 Lorem ipsum et diliagt gentris sed etiam
MAY melior paritus. Et uni soesu terrae submitta...
MAY unique valor, melior paritus. Et uni soesu
terrae submitta...
Health Matters
Everyday | 2 comments
Spotting & Treating
Food Allergies
Si meliora est vede meccum !
08
MAY
Lorem ipsum et diliagt gentris sed etiam unique valor,
melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments new
> How to know if your child
is at risk
Everyday | 2 comments
06 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
05 Lorem ipsum et diliagt gentris sed etiam unique valor,
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
05 Lorem ipsum et diliagt gentris sed etiam unique valor, Contact Us Privacy Terms & privacy Copyrights Send to a friend
MAY melior paritus. Et uni soesu terrae submitta...
Si meliora est vede meccum !
Everyday | 2 comments
Sketching Ecrans
Statique
Contact Us Privacy Terms & privacy Copyrights Send to a friend
59. Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Prototype Prototype
papier digital
Low résolution Wireframes Hi résolution
Sketching Ecrans
Statique
60. Conception | Design d’interface et design d’interaction
3. Wireframes / Questions à se poser
‣ Quels sont les objectifs du wireframe ?
‣ Communiquer les décisions structurelles aux équipes
créative, de développement
‣ Servir de prototype pour des tests utilisateurs...
‣ Quelle est l’audience ?
‣ Créatifs (document de design)
‣ Développeurs (document de spécification)
‣ Client (document de présentation)
74. Conception | Design d’interface et design d’interaction
3. Wireframes / Contraintes technologiques
‣ Travailler avec une technologie imposée
‣ Trouver la technologie qui répond au cahier
des charges de mon design d’interface
75. Conception | Design d’interface et design d’interaction
3. Wireframes / Contraintes technologiques
Applicatif
Desktop, bornes, autres...
Director, Java...
RDA : Rich Desktop Application
Flex/AIR, .Net, SDK...
RMA : Rich Mobile Application
RIA : Rich Internet Application
.Net, Java... Flash, Silverlight HTML/CSS, Ajax (javascript)
Tr
Bl
N
So
Je
Fi
Pu
a
M
ew
og
lm
ns
ux
ci
bl
on
s
s
s,
al
a
ic
en
d
ct
ita
do
es
io
lig
ire
c
nn
vi
ne
in
,E
rtu
el
te
vt
el
ra
,P
s
ct
or
ifs
tfo
lio
...
Audiovisuel Informationnel
76. Conception | Design d’interface et design d’interaction
3. Wireframes / Contraintes technologiques
‣ Quel est le support final ?
‣ Ecran ordinateur, mobile, écran tactile, TV ...
‣ La résolution d’affichage
‣ Quelle technologie ?
‣ Flash
‣ HTML/CSS/Ajax
‣ SDK Iphone...
77. Conception | Design d’interface et design d’interaction
3. Wireframes
Gabarits, zoning et grilles
78. Conception | Design d’interface et design d’interaction
3. Wireframes / Gabarits, zoning et grilles
Un gabarit (ou squelette ou layout) est la structure
visuelle persistante qui définit la charpente d’une
interface.
La variations d’un gabarit définissent en partie les états
d’une interface.
Les gabarits constituent le fondement des wireframes.
La méthode de construction d’un gabarit s’appelle le zoning.
79. Conception | Design d’interface et design d’interaction
3. Wireframes / Gabarits, zoning et grilles (exemple)
HEADER
Accueil Le magazine Votre santé Nos produits NaturactiveNAVrechercher Professionnels
Santé Créer votre agenda santé
Digestion difficile
En quelques clics, complétez votre profil santé
Circulation
et profitez de conseils personnalisés pour
Fatigue garder la forme !
Stress
Sommeil Partout avec vous, même sur votre mobile
Maux de tête
Etat grippal
Douleurs articulaires
Feminité
Equilibre
Vitalité
Maux de l’hiver
Confort respiratoire Podcast
Nutrition A l’occasion de la semaine du sommeil, le Pr Marc Leroy
dresse un bilan de l’éfficacité clinique de la phythothérapie
Voir tous les sujets
Vos conseils santé naturelle tout au long de
Au coeur de l’actualité
1
l’année
Beauté / Bien-être
2 Vos astuces forme
Minceur
Chute des cheveux 3 Les conseils d’un phytothérapeute
Beauté des cheveux
Dermo-nutrition
Bronzage Créer mon agenda
COL 1 COL 2 COL 3
Voir tous les sujets Le stress est-il Chute de Lutter contre les
communicatif ? cheveux rhumes à répétition
Témoignages Benoit Monté Comment feiner la Le témoignage Connaissance & plantes
psychologue chute de ou favoriser d’une internaute à
répond à toutes nos la reposusse découvrir
Stress questions... Consultez plus de 150 articles de
Sommeil référence sur la phytothérapie
Rhume
Minceur
Produits Posez des questions santé, forme et
?
Ménopause
bien-être, des experts répondent à vos
Voir tous les sujets questions
Votre pharmacie Le test du mois
Naturactive Découvrez votre profil minceur
Aromathérapie Phytothérapie Dermo-nutrition Menez vous une vie stressante ?
code poste OK Doriance Anti-âge
Phytaroma Elusanes
Améliorer son Résoudre les Lutter contre le
Trouvez les produits confort respiratoire troubles passagers photo-vieillissement
Naturactive, les plus du sommeil
proces de chez vous oui pas spécialement pas du tout