Embed Size (px)
Citation preview
Design d’interfaceW i r e f r a m e & P r o t o t y p e s
Octobre 2009 - David Raichman - Senior UX Designer @ OgilvyInteractive
SOMMAIRE
! Introduction! Enjeux! Processus de conception et UCD! Interfaces et design d’information! Typologie des interfaces
Design d’interface
SOMMAIRE
Design d’interface
!Wireframe! Définition et usages ! Contraintes technologiques! Gabarits, zoning et grilles ! Contenus! Outils! Composants d’interface! Design d’interaction! Exercices et annexe
SOMMAIRE
Design d’interface
! Prototypes! Objectifs! Enjeux! Outils et techniques ! Tests utilisateurs
SOMMAIRE
! Références! Bibliographie ! Webographie
Design d’interface
! Introduction! Enjeux! Processus de conception et UCD! Interfaces et design d’information! Typologie des interfaces
Design d’interface
INTRODUCTION > Enjeux
Industrialisation du digital
! Nouveau paradigme métiers
Graphiste(s) Développeur(s)
+
Chef de projet
Années 90
Industrialisation du digital
! Nouveau paradigme métiers
Graphiste Développeur
+
Chef de projet
+User research
expert
Designerd’interaction
Ergonome
++
Années 2000 : naissance de l’UX
+
Designer d’interface
Architected’information
INTRODUCTION > Enjeux
Industrialisation du digital
! Nouveau paradigme métiers
Graphiste Développeur
+
Chef de projet
+User research
expert
Designerd’interaction
Ergonome
++
Années 2000 : naissance de l’UX
+
Designer d’interface
Architected’information
UX Designer
INTRODUCTION > Enjeux
!
! Nouvelle méthodologie
! Techniques et outils de conception à
inventer
! Nouvelle vague d’applications de conception
! Détournement des logiciels de réalisation graphique,
bureautique, ingénierie...
! Prise en compte les contraintes de planning/budget/
faisabilité/utilisabilité
Industrialisation du digital
! Nouveau paradigme métiers
INTRODUCTION > Enjeux
! Introduction! Enjeux! Processus de conception et UCD! Interfaces et design d’information! Typologie des interfaces
Design d’interface
! Faire participer les utilisateurs dans le processus de conception! Profiler les utilisateurs (Personas)! Scénariser les parcours utilisateurs! Focaliser sur les tâches des utilisateurs! Conduire des tests utilisateurs
INTRODUCTION > Processus de conception et UCD
UCD = User Centred Design
...
Spécifications fonctionnelles
Architecture d’information
...
Design d’interface
Design d’Interaction
Design visuel
S T R A T É G I E
C O N C E P T I O N
R É A L I S A T I O N
...
Besoins utilisateurs
Objectifs
...
Spécifications fonctionnelles
Architecture d’information
...
Design d’interface
Design d’Interaction
Design visuel
S T R A T É G I E
C O N C E P T I O N
R É A L I S A T I O N
...
Besoins utilisateurs
Objectifs
INTRODUCTION > Processus de conception et UCD
...
Spécifications fonctionnelles
Architecture d’information
...
Design d’interface
Design d’Interaction
Design visuel
S T R A T É G I E
C O N C E P T I O N
R É A L I S A T I O N
...
Besoins utilisateurs
Objectifs
...
Spécifications fonctionnelles
Architecture d’information
...
Design d’interface
Design d’Interaction
Design visuel
S T R A T É G I E
C O N C E P T I O N
R É A L I S A T I O N
...
Besoins utilisateurs
Objectifs
INTRODUCTION > Processus de conception et UCD
...
Spécifications fonctionnelles
Architecture d’information
...
Design d’interface
Design d’Interaction
Design visuel
S T R A T É G I E
C O N C E P T I O N
R É A L I S A T I O N
...
Besoins utilisateurs
Objectifs
...
Spécifications fonctionnelles
Architecture d’information
...
Design d’interface
Design d’Interaction
Design visuel
S T R A T É G I E
C O N C E P T I O N
R É A L I S A T I O N
...
Besoins utilisateurs
Objectifs
INTRODUCTION > Processus de conception et UCD
...
Spécifications fonctionnelles
Architecture d’information
...
Design d’interface
Design d’Interaction
Design visuel
S T R A T É G I E
C O N C E P T I O N
R É A L I S A T I O N
...
Besoins utilisateurs
Objectifs
...
Spécifications fonctionnelles
Architecture d’information
...
Design d’interface
Design d’Interaction
Design visuel
S T R A T É G I E
C O N C E P T I O N
R É A L I S A T I O N
...
Besoins utilisateurs
Objectifs
INTRODUCTION > Processus de conception et UCD
...
Spécifications fonctionnelles
Architecture d’information
...
Design d’interface
Design d’Interaction
Design visuel
S T R A T É G I E
C O N C E P T I O N
R É A L I S A T I O N
...
Besoins utilisateurs
Objectifs
INTRODUCTION > Processus de conception et UCD
...
Spécifications fonctionnelles
Architecture d’information
...
Design d’interface
Design d’Interaction
Design visuel
S T R A T É G I E
C O N C E P T I O N
R É A L I S A T I O N
...
Besoins utilisateurs
Objectifs
Prototypage
Optimisations
Test Utilisateur
Optimisations
PrototypageTest Utilisateur
INTRODUCTION > Processus de conception et UCD
...
Spécifications fonctionnelles
Architecture d’information
...
Design d’interface
Design d’Interaction
Design visuel
S T R A T É G I E
C O N C E P T I O N
R É A L I S A T I O N
...
Besoins utilisateurs
Objectifs
Prototypage
Optimisations
Test Utilisateur
Optimisations
PrototypageTest Utilisateur
PÉRIMÈTRE DU COURS
INTRODUCTION > Processus de conception et UCD
! Introduction! Enjeux! Processus de conception et UCD! Interfaces et design d’information! Typologie des interfaces
Design d’interface
Interactions Homme - Ordinateur
Homme Ordinateur
Interface
Input Utilisateur
Output Système
INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction
INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction
INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction
INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction
INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction
INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction
INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction
INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction
INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction
INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction
INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction
INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction
INTRODUCTION > Interfaces et design d’information
De l’information à l’interaction
INTRODUCTION > Interfaces et design d’information
Echelle d’iconicité
INTRODUCTION > Interfaces et design d’information
Iconicité maximale
Objet lui-même
Iconicité minimale
Relations topographiques
Echelle d’iconicité
INTRODUCTION > Interfaces et design d’information
Iconicité maximale
Objet lui-même
Iconicité minimale
Schéma anatomique
Relations topographiques
Echelle d’iconicité
INTRODUCTION > Interfaces et design d’information
Iconicité maximale
Objet lui-même
Iconicité minimale
Schéma anatomique
Schéma de principe
Relations topographiques Relations topologiques
Echelle d’iconicité
INTRODUCTION > Interfaces et design d’information
Iconicité maximale
Objet lui-même
Iconicité minimale
Schéma anatomique
Schéma de principe
Schéma de formulation
Relations topographiques Relations topologiques
Relations logiques
Echelle d’iconicité
INTRODUCTION > Interfaces et design d’information
Iconicité maximale
Objet lui-même
Iconicité minimale
Schéma anatomique
Schéma de principe
Schéma de formulation
Schéma en espace complexe
Relations topographiques Relations topologiques
Relations logiques
Echelle d’iconicité
INTRODUCTION > Interfaces et design d’information
Iconicité maximale
Objet lui-même
Iconicité minimale
Schéma anatomique
Schéma de principe
Schéma de formulation
Schéma en espace complexe
Relations topographiques Relations topologiques
Relations logiques
Visualisation de données
! Introduction! Enjeux! Processus de conception et UCD! Interfaces et design d’information! Typologie des interfaces
Design d’interface
INTRODUCTION > Typologie des interfaces
Implementation-centred
+ -
Facile à construire Apprentissage long
- Public expert
INTRODUCTION > Typologie des interfaces
Implementation-centred
+ -
Facile à construire Apprentissage long
- Public expert
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun apprentissage utopique
INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun apprentissage utopique
INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun apprentissage utopique
w w w . s o u t h w e s t . c o m ( 1 9 9 9 )
INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun apprentissage utopique
INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun apprentissage utopique
INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun apprentissage utopique
INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun apprentissage utopique
INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun apprentissage utopique
INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun apprentissage utopique
INTRODUCTION > Typologie des interfaces
user-centred / Métaphorique
+ -
intuitive contextuelle
aucun apprentissage utopique
INTRODUCTION > Typologie des interfaces
user-centred / Idiomatique
+ -
modulaireinteropérable
apprentissagecourt
interaction riche
INTRODUCTION > Typologie des interfaces
user-centred / Idiomatique
+ -
modulaireinteropérable
apprentissagecourt
interaction riche
w w w . n i c k a d . c o mINTRODUCTION > Typologie des interfaces
user-centred / Idiomatique
+ -
modulaireinteropérable
apprentissagecourt
interaction riche
INTRODUCTION > Typologie des interfaces
user-centred / Idiomatique
i n p u t o u t p u t
primitivespointage, clic,
drag, touche pressée curseur, texte
composéesdouble-clic, drag’n’drop, sélection checkbox, surbrillance
idiomesnaviguer, dessiner, acheter changer de section, trier
INTRODUCTION > Typologie des interfaces
!Wireframe! Définition et usages ! Contraintes technologiques! Gabarits, zoning et grilles ! Contenus! Outils! Composants d’interface! Design d’interaction! Exercices et annexe
Design d’interface
Le challenge
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxx
•xxxxxxxx•xxx•xxxxxxxx•xxxxxx•xxxxxxxx•xxxxxxx
lipsumlipsum
lipsum
lipsum Lorem“Sed ut perspiciatis unde omnis iste
natus error sit voluptatem “
iatis unde omnis iste
natus error sit
voluptatem iatis unde
omnis iste natus error sit
voluptatem
iatis unde omnis iste
natus error sit
voluptatem
Lorem“Sed ut perspiciatis unde omnis iste
natus error sit voluptatem “iatis unde omnis iste natus error sit voluptatem
iatis unde omnis iste natus error sit voluptatem
iatis unde omnis iste natus error sit voluptatem
Lorem“Sed ut perspiciatis unde omnis iste natus error sit voluptatem “
iatis unde omnis iste natus error sit voluptatem
iatis unde omnis iste natus error sit voluptatem
iatis unde omnis iste natus error sit voluptatem
ACCUEIL
PEAU YEUX
FICHES CONSEIL
GAMMEGAMME
GAMME
FICHE PRODUITFICHE PRODUIT
3.1
3.2
3.1.1
FICHES CONSEIL
GAMMEGAMME
GAMME
FICHE PRODUITFICHE PRODUIT
4.1
4.2
4.1.1
3.0 4.0
RECHERCHE
PLAN DU SITE
CONTACT
MENTIONS LEGALES
CREDITS
MA SELECTION
AUTRES SITES
FICHE PRODUITFICHE PRODUIT
KLORANE
DECOUVRIR
PLANTES REGION
5.0
5.2 NOS ENGAGEMENTS
5.1 ACTUALITES
5.3 LA RECHERCHE
5.4 LA PHYTOFILIERE
5.5
FICHE PLANTE
QUESTIONS/
REPONSESQUESTIONS/
REPONSES
FICHE PLANTE
?
WIREFRAME > Définition et usages
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.
«
WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
Statique
WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
Statique
WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
StatiqueSketching
WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
Prototype papier
StatiqueSketching
WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
Prototype papier
SketchingStatique
WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
Prototype papier
Sketching
WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
Prototype papier
Sketching Ecrans(psd, jpg...)
WIREFRAME > Définition et usages
WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
Prototype papier
Sketching Ecrans(psd, jpg...)
Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
Prototype papier
Sketching Ecrans
WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
Prototype papier
Sketching Ecrans
Prototype digital (HTML, Flash)
WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
Prototype papier
Sketching Mockup
Prototype digital (HTML, Flash)
WIREFRAME > Définition et usages
Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
Prototype papier
Sketching Ecrans
Prototype digital
WIREFRAME > Définition et usages
Degré de précision
Interactif
Statique
Low résolution Hi résolution
Prototype digital
Prototype papier
Sketching Ecrans
Wireframes
WIREFRAME > Définition et usages
Degré de précision
Interactif
Statique
Low résolution Hi résolution
Prototype digital
Prototype papier
Sketching Ecrans
WireframesNIDO Home Moments Health Matters Our Range
Hi Lynn | My account | Log Out | Help
NIDO Website - 1.1.1 Diary
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
Contact Us Privacy Terms & privacy Copyrights Send to a friend
John’s Family Diary
Oscar Angelica
Family & Friends
Your highlights Slideshow
You have new comments !
> View all
You have: 6 family members, 14 friends
3
Erin has accepted your invitation
Health MattersSpotting & Treating Food Allergies
> How to know if your child is at risk
!
you have new comments!3
Your Friends (14)
Edit my pro!le
Recently added
View all
Mary, Ellen, Peter
Comments
Show me All entries Only highlightsStarting from !rst day | today
12MAY
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
11MAY
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
10MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta...
Everyday | 2 comments
08MAY
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
06MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
TELL MY FRIENDS NOW !
Edit friends list
05MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
WIREFRAME > Définition et usages
WIREFRAME > Définition et usages
Degré de précision
Interactif
Statique
Low résolution Hi résolution
Prototype digital
Prototype papier
Sketching Ecrans
Wireframes
NIDO Home Moments Health Matters Our Range
Hi Lynn | My account | Log Out | Help
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
Contact Us Privacy Terms & privacy Copyrights Send to a friend
John’s Family Diary
Oscar Angelica
Your highlights Slideshow
Health MattersSpotting & Treating Food Allergies
> How to know if your child is at risk
you have new comments!3
Your Friends (14)
Edit my pro!le
Recently added
View all
Mary, Ellen, Peter
Comments
Show me All entries Only highlightsStarting from !rst day | today
12MAY
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
11MAY
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
10MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta...
Everyday | 2 comments
08MAY
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
06MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
TELL MY FRIENDS NOW !
Edit friends list
05MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
Degré de précision
Interactif
Statique
Low résolution Hi résolution
Prototype digital
Prototype papier
Sketching Ecrans
WireframesNIDO Home Moments Health Matters Our Range
Hi Lynn | My account | Log Out | Help
NIDO Website - 1.1.1 Diary
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
Contact Us Privacy Terms & privacy Copyrights Send to a friend
John’s Family Diary
Oscar Angelica
Family & Friends
Your highlights Slideshow
You have new comments !
> View all
You have: 6 family members, 14 friends
3
Erin has accepted your invitation
Health MattersSpotting & Treating Food Allergies
> How to know if your child is at risk
!
you have new comments!3
Your Friends (14)
Edit my pro!le
Recently added
View all
Mary, Ellen, Peter
Comments
Show me All entries Only highlightsStarting from !rst day | today
12MAY
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
11MAY
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
10MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta...
Everyday | 2 comments
08MAY
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
06MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
TELL MY FRIENDS NOW !
Edit friends list
05MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
WIREFRAME > Définition et usages
Degré de précision
Interactif
Statique
Low résolution Hi résolution
Prototype digital
Prototype papier
Sketching Ecrans
WireframesNIDO Home Moments Health Matters Our Range
Hi Lynn | My account | Log Out | Help
NIDO Website - 1.1.1 Diary
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
Contact Us Privacy Terms & privacy Copyrights Send to a friend
John’s Family Diary
Oscar Angelica
Family & Friends
Your highlights Slideshow
You have new comments !
> View all
You have: 6 family members, 14 friends
3
Erin has accepted your invitation
Health MattersSpotting & Treating Food Allergies
> How to know if your child is at risk
!
you have new comments!3
Your Friends (14)
Edit my pro!le
Recently added
View all
Mary, Ellen, Peter
Comments
Show me All entries Only highlightsStarting from !rst day | today
12MAY
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
11MAY
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
10MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta...
Everyday | 2 comments
08MAY
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
06MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
TELL MY FRIENDS NOW !
Edit friends list
05MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
WIREFRAME > Définition et usages
Degré de précision
Interactif
Statique
Low résolution Hi résolution
Prototype digital
Prototype papier
Sketching Mockup
WireframesNIDO Home Moments Health Matters Our Range
Hi Lynn | My account | Log Out | Help
NIDO Website - 1.1.1 Diary
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
Contact Us Privacy Terms & privacy Copyrights Send to a friend
John’s Family Diary
Oscar Angelica
Family & Friends
Your highlights Slideshow
You have new comments !
> View all
You have: 6 family members, 14 friends
3
Erin has accepted your invitation
Health MattersSpotting & Treating Food Allergies
> How to know if your child is at risk
!
you have new comments!3
Your Friends (14)
Edit my pro!le
Recently added
View all
Mary, Ellen, Peter
Comments
Show me All entries Only highlightsStarting from !rst day | today
12MAY
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
11MAY
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
10MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta...
Everyday | 2 comments
08MAY
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
06MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
TELL MY FRIENDS NOW !
Edit friends list
05MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
WIREFRAME > Définition et usages
Degré de précision
Interactif
Statique
Low résolution Hi résolution
Prototype digital
Prototype papier
Sketching Ecrans
WireframesNIDO Home Moments Health Matters Our Range
Hi Lynn | My account | Log Out | Help
NIDO Website - 1.1.1 Diary
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
Contact Us Privacy Terms & privacy Copyrights Send to a friend
John’s Family Diary
Oscar Angelica
Family & Friends
Your highlights Slideshow
You have new comments !
> View all
You have: 6 family members, 14 friends
3
Erin has accepted your invitation
Health MattersSpotting & Treating Food Allergies
> How to know if your child is at risk
!
you have new comments!3
Your Friends (14)
Edit my pro!le
Recently added
View all
Mary, Ellen, Peter
Comments
Show me All entries Only highlightsStarting from !rst day | today
12MAY
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
11MAY
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
10MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta...
Everyday | 2 comments
08MAY
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
06MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
TELL MY FRIENDS NOW !
Edit friends list
05MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
WIREFRAME > Définition et usages
!Quels sont les objectifs du wireframe ?! Communiquer les décisions structurelles aux équipes
créative, de développement! Servir de prototype pour les tests utilisateurs
!Quelle est l’audience ?! Créatifs (document de design)! Développeurs (document de spécification)! Client (document de présentation)
Les questions à se poser
WIREFRAME > Définition et usages
! Le degré de précision est-il adapté au
contexte ?
! Low-res / Hi-res ?
! Papier ou digital ?
! Statique, animé ou interactif ?
! Combien d’écrans ?
Les questions à se poser
WIREFRAME > Définition et usages
RENAULT-MERCHANDISING.COM
© RENAULT MERCHANDISING NEWSLETTER ｜ CONTACT ｜ PLAN DU SITE ｜ MENTIONS LEGALES ｜ CGU
ACCUEIL ｜ NOTRE ACTIVITE ｜ NOS PRODUITS ｜ NOS POINTS DE VENTE ｜ OFFRES WEB EXCLUSIVES
Les sites RenaultFR ｜ EN ｜
Mémoriser mes
informations
OK
Identifiant
Mot de passe
>Mot de passe oublié ?
>Inscrivez-vous
DEJA INSCRIT ?
mon panierma liste
2 articles5 articles
1.3.1.3 fiche produit web version non loggé
goRECHERCHER UN PRODUIT toutes catégories
Montre mixte
135,00!
Quantité 1couleur
Boîtier alliage, cadran blanc. Mouvement 2 aiguilles. Bracelet PU noir. LIvré sous étui cartonné. Garantie 2 ans.
Ajouter au panier
1 Image taille normale
1
2
Texte descriptif produit version longue2
3 4
3
4
5
Propriété du produit Au minimum il y a 0 liste déropulante de propriété.Au maximum, il y a 2 listes déroulantes de propriétés.Le qualificatif de la propriété dépend du produit (taille, couleur...)
Champ de saisie quantité
5Vignette vues produit pouvant aller de 0 à 3Chaque vignette est une réduction de d’une image de taille normale. Si pas de vues différentes, on affichera 0 vignettes.
Lien vers 4.a
en stock
Prix :
Disponibilité :
7
6
7
6 Affiche soit “en stock” soit (a) “épuisé" soit en cours d’approvisionnement. (b). Si (a) ou (b) alors “ajouter à mon panier’ ne s’affiche pas.
77 11 421 691 Personnel du groupe Renault
Professionnel
Auteur : David Raichman
Projet : Renault-merchandising.com
Version : 1.3 (31/01/08)
Produits webRenault
Twingo 2008Dacia 2008
Noël
Chèques cadeauxEvenements
Produits web > Renault >Twingo 2008 > Montre mixte
SpécificationsRENAULT-MERCHANDISING.COM
© RENAULT MERCHANDISING NEWSLETTER ｜ CONTACT ｜ PLAN DU SITE ｜ MENTIONS LEGALES ｜ CGU
ACCUEIL ｜ NOTRE ACTIVITE ｜ NOS PRODUITS ｜ NOS POINTS DE VENTE ｜ OFFRES WEB EXCLUSIVES
Les sites RenaultFR ｜ EN ｜
Mémoriser mes
informations
OK
Identifiant
Mot de passe
>Mot de passe oublié ?
>Inscrivez-vous
DEJA INSCRIT ?
mon panierma liste
2 articles5 articles
1.3.1.3 fiche produit web version non loggé
goRECHERCHER UN PRODUIT toutes catégories
Montre mixte
135,00!
Quantité 1couleur
Boîtier alliage, cadran blanc. Mouvement 2 aiguilles. Bracelet PU noir. LIvré sous étui cartonné. Garantie 2 ans.
Ajouter au panier
1 Image taille normale
1
2
Texte descriptif produit version longue2
3 4
3
4
5
Propriété du produit Au minimum il y a 0 liste déropulante de propriété.Au maximum, il y a 2 listes déroulantes de propriétés.Le qualificatif de la propriété dépend du produit (taille, couleur...)
Champ de saisie quantité
5Vignette vues produit pouvant aller de 0 à 3Chaque vignette est une réduction de d’une image de taille normale. Si pas de vues différentes, on affichera 0 vignettes.
Lien vers 4.a
en stock
Prix :
Disponibilité :
7
6
7
6 Affiche soit “en stock” soit (a) “épuisé" soit en cours d’approvisionnement. (b). Si (a) ou (b) alors “ajouter à mon panier’ ne s’affiche pas.
77 11 421 691 Personnel du groupe Renault
Professionnel
Auteur : David Raichman
Projet : Renault-merchandising.com
Version : 1.3 (31/01/08)
Produits webRenault
Twingo 2008Dacia 2008
Noël
Chèques cadeauxEvenements
Produits web > Renault >Twingo 2008 > Montre mixte
WIREFRAME > Définition et usages
RENAULT-MERCHANDISING.COM
© RENAULT MERCHANDISING NEWSLETTER ｜ CONTACT ｜ PLAN DU SITE ｜ MENTIONS LEGALES ｜ CGU
ACCUEIL ｜ NOTRE ACTIVITE ｜ NOS PRODUITS ｜ NOS POINTS DE VENTE ｜ OFFRES WEB EXCLUSIVES
Les sites RenaultFR ｜ EN ｜
Mémoriser mes
informations
OK
Identifiant
Mot de passe
>Mot de passe oublié ?
>Inscrivez-vous
DEJA INSCRIT ?
mon panierma liste
2 articles5 articles
1.3.1.3 fiche produit web version non loggé
goRECHERCHER UN PRODUIT toutes catégories
Montre mixte
135,00!
Quantité 1couleur
Boîtier alliage, cadran blanc. Mouvement 2 aiguilles. Bracelet PU noir. LIvré sous étui cartonné. Garantie 2 ans.
Ajouter au panier
1 Image taille normale
1
2
Texte descriptif produit version longue2
3 4
3
4
5
Propriété du produit Au minimum il y a 0 liste déropulante de propriété.Au maximum, il y a 2 listes déroulantes de propriétés.Le qualificatif de la propriété dépend du produit (taille, couleur...)
Champ de saisie quantité
5Vignette vues produit pouvant aller de 0 à 3Chaque vignette est une réduction de d’une image de taille normale. Si pas de vues différentes, on affichera 0 vignettes.
Lien vers 4.a
en stock
Prix :
Disponibilité :
7
6
7
6 Affiche soit “en stock” soit (a) “épuisé" soit en cours d’approvisionnement. (b). Si (a) ou (b) alors “ajouter à mon panier’ ne s’affiche pas.
77 11 421 691 Personnel du groupe Renault
Professionnel
Auteur : David Raichman
Projet : Renault-merchandising.com
Version : 1.3 (31/01/08)
Produits webRenault
Twingo 2008Dacia 2008
Noël
Chèques cadeauxEvenements
Produits web > Renault >Twingo 2008 > Montre mixte
RENAULT-MERCHANDISING.COM
© RENAULT MERCHANDISING NEWSLETTER ｜ CONTACT ｜ PLAN DU SITE ｜ MENTIONS LEGALES ｜ CGU
ACCUEIL ｜ NOTRE ACTIVITE ｜ NOS PRODUITS ｜ NOS POINTS DE VENTE ｜ OFFRES WEB EXCLUSIVES
Les sites RenaultFR ｜ EN ｜
Mémoriser mes
informations
OK
Identifiant
Mot de passe
>Mot de passe oublié ?
>Inscrivez-vous
DEJA INSCRIT ?
mon panierma liste
2 articles5 articles
1.3.1.3 fiche produit web version non loggé
goRECHERCHER UN PRODUIT toutes catégories
Montre mixte
135,00!
Quantité 1couleur
Boîtier alliage, cadran blanc. Mouvement 2 aiguilles. Bracelet PU noir. LIvré sous étui cartonné. Garantie 2 ans.
Ajouter au panier
1 Image taille normale
1
2
Texte descriptif produit version longue2
3 4
3
4
5
Propriété du produit Au minimum il y a 0 liste déropulante de propriété.Au maximum, il y a 2 listes déroulantes de propriétés.Le qualificatif de la propriété dépend du produit (taille, couleur...)
Champ de saisie quantité
5Vignette vues produit pouvant aller de 0 à 3Chaque vignette est une réduction de d’une image de taille normale. Si pas de vues différentes, on affichera 0 vignettes.
Lien vers 4.a
en stock
Prix :
Disponibilité :
7
6
7
6 Affiche soit “en stock” soit (a) “épuisé" soit en cours d’approvisionnement. (b). Si (a) ou (b) alors “ajouter à mon panier’ ne s’affiche pas.
77 11 421 691 Personnel du groupe Renault
Professionnel
Auteur : David Raichman
Projet : Renault-merchandising.com
Version : 1.3 (31/01/08)
Produits webRenault
Twingo 2008Dacia 2008
Noël
Chèques cadeauxEvenements
Produits web > Renault >Twingo 2008 > Montre mixte
Spécifications
WIREFRAME > Définition et usages
WIREFRAME > Définition et usages
Etude de cas! Louis Vuitton Mobile
WIREFRAME > Définition et usages
Etude de cas! Louis Vuitton Mobile
WIREFRAME > Définition et usages
Etude de cas! Louis Vuitton Mobile
WIREFRAME > Définition et usages
Etude de cas! Louis Vuitton Mobile
WIREFRAME > Définition et usages
Etude de cas! Louis Vuitton Mobile
WIREFRAME > Définition et usages
Etude de cas! Louis Vuitton Mobile
WIREFRAME > Définition et usages
Etude de cas! Louis Vuitton Mobile
WIREFRAME > Définition et usages
Etude de cas! Louis Vuitton Mobile
WIREFRAME > Définition et usages
Etude de cas! Louis Vuitton Mobile
WIREFRAME > Définition et usages
Etude de cas! Hennessy Black
!Wireframe! Définition et usages ! Contraintes technologiques! Gabarits, zoning et grilles ! Contenus! Outils! Composants d’interface! Design d’interaction! Exercices et annexe
Design d’interface
WIREFRAME > Contraintes technologiques
! Travailler avec une technologie imposée
! Trouver la technologie qui répond au cahier des charges de mon design d’interface
Deux approches
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
New
sM
ondes virtuels
Technologies
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
New
sM
ondes virtuels
Technologies
mouvements 2D/3Dtravelling, panoramiquetrajectoire, rotation, zoom...
transitions 2D/3Dfade, iris, wipe...
filtres 2D/3Dblur, glow, bevel...
réponse sonorepan stéréo, filtres, intensité...
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
New
sM
ondes virtuels
Technologies
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
RDA : Rich Desktop Application
RIA : Rich Internet Application
RMA : Rich Mobile Application
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
RDA : Rich Desktop Application
RIA : Rich Internet Application
RMA : Rich Mobile Application
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
RDA : Rich Desktop Application
RIA : Rich Internet Application
RMA : Rich Mobile Application
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
RDA : Rich Desktop Application
RIA : Rich Internet Application
RMA : Rich Mobile Application
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
RDA : Rich Desktop Application
RIA : Rich Internet Application
RMA : Rich Mobile Application
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
RDA : Rich Desktop Application
RIA : Rich Internet Application
RMA : Rich Mobile Application
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
RDA : Rich Desktop Application
RIA : Rich Internet Application
RMA : Rich Mobile Application
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
RDA : Rich Desktop Application
RIA : Rich Internet Application
RMA : Rich Mobile Application
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
RDA : Rich Desktop Application
RIA : Rich Internet Application
RMA : Rich Mobile Application
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
New
sM
ondes virtuels
Technologies
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
RDA : Rich Desktop Application
RIA : Rich Internet Application
RMA : Rich Mobile Application
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
RDA : Rich Desktop Application
RIA : Rich Internet Application
Social
Transactionnel
Blogs
New
s
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
Mondes virtuels
RMA : Rich Mobile Application
Technologies
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
RDA : Rich Desktop Application
RIA : Rich Internet Application
Social
Transactionnel
Blogs
New
s
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
Mondes virtuels
RMA : Rich Mobile Application
HTML/CSS, Ajax (javascript)
Technologies
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
RDA : Rich Desktop Application
RIA : Rich Internet Application
Social
Transactionnel
Blogs
New
s
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
Mondes virtuels
RMA : Rich Mobile Application
HTML/CSS, Ajax (javascript)Flash, Silverlight
Technologies
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
RDA : Rich Desktop Application
RIA : Rich Internet Application
Social
Transactionnel
Blogs
New
s
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
Mondes virtuels
RMA : Rich Mobile Application
HTML/CSS, Ajax (javascript)Flash, Silverlight.Net, Java...
Technologies
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
RDA : Rich Desktop Application
RIA : Rich Internet Application
Social
Transactionnel
Blogs
New
s
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
Mondes virtuels
RMA : Rich Mobile Application
HTML/CSS, Ajax (javascript)Flash, Silverlight.Net, Java...
Flex/AIR
, .Net, S
DK
...
Technologies
WIREFRAME > Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
RDA : Rich Desktop Application
RIA : Rich Internet Application
Social
Transactionnel
Blogs
New
s
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
Mondes virtuels
RMA : Rich Mobile Application
HTML/CSS, Ajax (javascript)Flash, Silverlight.Net, Java...
Flex/AIR
, .Net, S
DK
...D
irector, Java...
Technologies
WIREFRAME > Contraintes technologiques
!Wireframe! Définition et usages ! Contraintes technologiques! Gabarits, zoning et grilles ! Contenus! Outils! Composants d’interface! Design d’interaction! Exercices et annexe
Design d’interface
WIREFRAME > Gabarits, zoning et grilles
!Quel est le support final ?! Ecran ordinateur, mobile, écran tactile, TV ... ! La résolution d’affichage
!Quelle technologie ?! Flash ! HTML/CSS/Ajax ! SDK Iphone...
Les questions à se poser
!Quel est le genre ?! informationnel > penser “navigation”! applicatif > penser “outils” et “actions”! audiovisuel > penser “motion design”
!Quelle est la hiérarchie d’information ?! Contraintes éditoriales! Titraille! Images, illustrations...
Les questions à se poser
WIREFRAME > Gabarits, zoning et grilles
!Quel est le genre ?! informationnel > penser “navigation”! applicatif > penser “outils” et “actions”! audiovisuel > penser “motion design”
!Quelle est la hiérarchie d’information ?! Contraintes éditoriales! Titraille! Images, illustrations...
Les questions à se poser
WIREFRAME > Gabarits, zoning et grilles
!Quel est le genre ?! informationnel > penser “navigation”! applicatif > penser “outils” et “actions”! audiovisuel > penser “motion design”
!Quelle est la hiérarchie d’information ?! Contraintes éditoriales! Titraille! Images, illustrations...
Les questions à se poser
WIREFRAME > Gabarits, zoning et grilles
Définition
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.
«
WIREFRAME > Gabarits, zoning et grilles
Créer votre agenda santé
Au coeur de l’actualité
Le stress est-il communicatif ?
Benoit Monté psychologue
répond à toutes nos questions...
Chute de cheveux
Comment feiner la chute de ou favoriser
la reposusse
Lutter contre les rhumes à répétition
Le témoignage d’une internaute à
découvrir
PodcastA l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie
Santé
Beauté / Bien-être
Témoignages
Digestion difficileCirculationFatigueStressSommeilMaux de têteEtat grippalDouleurs articulaires FeminitéEquilibreVitalitéMaux de l’hiverConfort respiratoireNutrition
Voir tous les sujets
MinceurChute des cheveuxBeauté des cheveuxDermo-nutritionBronzage
Voir tous les sujets
StressSommeilRhumeMinceurMénopause
Voir tous les sujets
Produits
AromathérapiePhytaroma
Améliorer son confort respiratoire
Phytothérapie Elusanes
Résoudre les troubles passagers
du sommeil
Dermo-nutritionDoriance Anti-âge
Lutter contre le photo-vieillissement
En quelques clics, complétez votre profil santé et profitez de conseils personnalisés pour garder la forme !
Partout avec vous, même sur votre mobile
1
2
3
Vos astuces forme
Les conseils d’un phytothérapeute
Vos conseils santé naturelle tout au long de l’année
Créer mon agenda
Connaissance & plantes
Le test du moisDécouvrez votre profil minceur
Menez vous une vie stressante ?
oui pas spécialement pas du tout
Consultez plus de 150 articles de référence sur la phytothérapie
Posez des questions santé, forme et bien-être, des experts répondent à vos questions
?
Votre pharmacie
Naturactive
code poste OK
Trouvez les produits Naturactive, les plus proces de chez vous
rechercher Professionnels Accueil Le magazine Votre santé Nos produits Naturactive
HEADER
COL 1 COL 2 COL 3
NAV
WIREFRAME > Gabarits, zoning et grilles
Créer votre agenda santé
Au coeur de l’actualité
Le stress est-il communicatif ?
Benoit Monté psychologue
répond à toutes nos questions...
Chute de cheveux
Comment feiner la chute de ou favoriser
la reposusse
Lutter contre les rhumes à répétition
Le témoignage d’une internaute à
découvrir
PodcastA l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie
Santé
Beauté / Bien-être
Témoignages
Digestion difficileCirculationFatigueStressSommeilMaux de têteEtat grippalDouleurs articulaires FeminitéEquilibreVitalitéMaux de l’hiverConfort respiratoireNutrition
Voir tous les sujets
MinceurChute des cheveuxBeauté des cheveuxDermo-nutritionBronzage
Voir tous les sujets
StressSommeilRhumeMinceurMénopause
Voir tous les sujets
Produits
AromathérapiePhytaroma
Améliorer son confort respiratoire
Phytothérapie Elusanes
Résoudre les troubles passagers
du sommeil
Dermo-nutritionDoriance Anti-âge
Lutter contre le photo-vieillissement
En quelques clics, complétez votre profil santé et profitez de conseils personnalisés pour garder la forme !
Partout avec vous, même sur votre mobile
1
2
3
Vos astuces forme
Les conseils d’un phytothérapeute
Vos conseils santé naturelle tout au long de l’année
Créer mon agenda
Connaissance & plantes
Le test du moisDécouvrez votre profil minceur
Menez vous une vie stressante ?
oui pas spécialement pas du tout
Consultez plus de 150 articles de référence sur la phytothérapie
Posez des questions santé, forme et bien-être, des experts répondent à vos questions
?
Votre pharmacie
Naturactive
code poste OK
Trouvez les produits Naturactive, les plus proces de chez vous
rechercher Professionnels Accueil Le magazine Votre santé Nos produits Naturactive
HEADER
COL 1 COL 2 COL 3
NAV
WIREFRAME > Gabarits, zoning et grilles
Créer votre agenda santé
Au coeur de l’actualité
Le stress est-il communicatif ?
Benoit Monté psychologue
répond à toutes nos questions...
Chute de cheveux
Comment feiner la chute de ou favoriser
la reposusse
Lutter contre les rhumes à répétition
Le témoignage d’une internaute à
découvrir
PodcastA l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie
Santé
Beauté / Bien-être
Témoignages
Digestion difficileCirculationFatigueStressSommeilMaux de têteEtat grippalDouleurs articulaires FeminitéEquilibreVitalitéMaux de l’hiverConfort respiratoireNutrition
Voir tous les sujets
MinceurChute des cheveuxBeauté des cheveuxDermo-nutritionBronzage
Voir tous les sujets
StressSommeilRhumeMinceurMénopause
Voir tous les sujets
Produits
AromathérapiePhytaroma
Améliorer son confort respiratoire
Phytothérapie Elusanes
Résoudre les troubles passagers
du sommeil
Dermo-nutritionDoriance Anti-âge
Lutter contre le photo-vieillissement
En quelques clics, complétez votre profil santé et profitez de conseils personnalisés pour garder la forme !
Partout avec vous, même sur votre mobile
1
2
3
Vos astuces forme
Les conseils d’un phytothérapeute
Vos conseils santé naturelle tout au long de l’année
Créer mon agenda
Connaissance & plantes
Le test du moisDécouvrez votre profil minceur
Menez vous une vie stressante ?
oui pas spécialement pas du tout
Consultez plus de 150 articles de référence sur la phytothérapie
Posez des questions santé, forme et bien-être, des experts répondent à vos questions
?
Votre pharmacie
Naturactive
code poste OK
Trouvez les produits Naturactive, les plus proces de chez vous
rechercher Professionnels Accueil Le magazine Votre santé Nos produits Naturactive
MARQUE
INFORMATIONS D!ACTUALITÉ
PÉDAGOGIQUE
ACCOMPAGNEMENT
INFORMATIONS DE FOND
PARTICIPATIF
CRM
ACCOMPAGNEMENT
THEMES
MARQUE
PÉDAGOGIQUE
PARTICIPATIF
Créer votre agenda santé
Au coeur de l’actualité
Le stress est-il communicatif ?
Benoit Monté psychologue
répond à toutes nos questions...
Chute de cheveux
Comment feiner la chute de ou favoriser
la reposusse
Lutter contre les rhumes à répétition
Le témoignage d’une internaute à
découvrir
PodcastA l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie
Santé
Beauté / Bien-être
Témoignages
Digestion difficileCirculationFatigueStressSommeilMaux de têteEtat grippalDouleurs articulaires FeminitéEquilibreVitalitéMaux de l’hiverConfort respiratoireNutrition
Voir tous les sujets
MinceurChute des cheveuxBeauté des cheveuxDermo-nutritionBronzage
Voir tous les sujets
StressSommeilRhumeMinceurMénopause
Voir tous les sujets
Produits
AromathérapiePhytaroma
Améliorer son confort respiratoire
Phytothérapie Elusanes
Résoudre les troubles passagers
du sommeil
Dermo-nutritionDoriance Anti-âge
Lutter contre le photo-vieillissement
En quelques clics, complétez votre profil santé et profitez de conseils personnalisés pour garder la forme !
Partout avec vous, même sur votre mobile
1
2
3
Vos astuces forme
Les conseils d’un phytothérapeute
Vos conseils santé naturelle tout au long de l’année
Créer mon agenda
Connaissance & plantes
Le test du moisDécouvrez votre profil minceur
Menez vous une vie stressante ?
oui pas spécialement pas du tout
Consultez plus de 150 articles de référence sur la phytothérapie
Posez des questions santé, forme et bien-être, des experts répondent à vos questions
?
Votre pharmacie
Naturactive
code poste OK
Trouvez les produits Naturactive, les plus proces de chez vous
rechercher Professionnels Accueil Le magazine Votre santé Nos produits Naturactive
HEADER
COL 1 COL 2 COL 3
NAV
WIREFRAME > Gabarits, zoning et grilles
Créer votre agenda santé
Au coeur de l’actualité
Le stress est-il communicatif ?
Benoit Monté psychologue
répond à toutes nos questions...
Chute de cheveux
Comment feiner la chute de ou favoriser
la reposusse
Lutter contre les rhumes à répétition
Le témoignage d’une internaute à
découvrir
PodcastA l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie
Santé
Beauté / Bien-être
Témoignages
Digestion difficileCirculationFatigueStressSommeilMaux de têteEtat grippalDouleurs articulaires FeminitéEquilibreVitalitéMaux de l’hiverConfort respiratoireNutrition
Voir tous les sujets
MinceurChute des cheveuxBeauté des cheveuxDermo-nutritionBronzage
Voir tous les sujets
StressSommeilRhumeMinceurMénopause
Voir tous les sujets
Produits
AromathérapiePhytaroma
Améliorer son confort respiratoire
Phytothérapie Elusanes
Résoudre les troubles passagers
du sommeil
Dermo-nutritionDoriance Anti-âge
Lutter contre le photo-vieillissement
En quelques clics, complétez votre profil santé et profitez de conseils personnalisés pour garder la forme !
Partout avec vous, même sur votre mobile
1
2
3
Vos astuces forme
Les conseils d’un phytothérapeute
Vos conseils santé naturelle tout au long de l’année
Créer mon agenda
Connaissance & plantes
Le test du moisDécouvrez votre profil minceur
Menez vous une vie stressante ?
oui pas spécialement pas du tout
Consultez plus de 150 articles de référence sur la phytothérapie
Posez des questions santé, forme et bien-être, des experts répondent à vos questions
?
Votre pharmacie
Naturactive
code poste OK
Trouvez les produits Naturactive, les plus proces de chez vous
rechercher Professionnels Accueil Le magazine Votre santé Nos produits Naturactive
MARQUE
INFORMATIONS D!ACTUALITÉ
PÉDAGOGIQUE
ACCOMPAGNEMENT
INFORMATIONS DE FOND
PARTICIPATIF
CRM
ACCOMPAGNEMENT
THEMES
MARQUE
PÉDAGOGIQUE
PARTICIPATIF
Créer votre agenda santé
Au coeur de l’actualité
Le stress est-il communicatif ?
Benoit Monté psychologue
répond à toutes nos questions...
Chute de cheveux
Comment feiner la chute de ou favoriser
la reposusse
Lutter contre les rhumes à répétition
Le témoignage d’une internaute à
découvrir
PodcastA l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie
Santé
Beauté / Bien-être
Témoignages
Digestion difficileCirculationFatigueStressSommeilMaux de têteEtat grippalDouleurs articulaires FeminitéEquilibreVitalitéMaux de l’hiverConfort respiratoireNutrition
Voir tous les sujets
MinceurChute des cheveuxBeauté des cheveuxDermo-nutritionBronzage
Voir tous les sujets
StressSommeilRhumeMinceurMénopause
Voir tous les sujets
Produits
AromathérapiePhytaroma
Améliorer son confort respiratoire
Phytothérapie Elusanes
Résoudre les troubles passagers
du sommeil
Dermo-nutritionDoriance Anti-âge
Lutter contre le photo-vieillissement
En quelques clics, complétez votre profil santé et profitez de conseils personnalisés pour garder la forme !
Partout avec vous, même sur votre mobile
1
2
3
Vos astuces forme
Les conseils d’un phytothérapeute
Vos conseils santé naturelle tout au long de l’année
Créer mon agenda
Connaissance & plantes
Le test du moisDécouvrez votre profil minceur
Menez vous une vie stressante ?
oui pas spécialement pas du tout
Consultez plus de 150 articles de référence sur la phytothérapie
Posez des questions santé, forme et bien-être, des experts répondent à vos questions
?
Votre pharmacie
Naturactive
code poste OK
Trouvez les produits Naturactive, les plus proces de chez vous
rechercher Professionnels Accueil Le magazine Votre santé Nos produits Naturactive
HEADER
COL 1 COL 2 COL 3
NAV
WIREFRAME > Gabarits, zoning et grilles
Créer votre agenda santé
Au coeur de l’actualité
Le stress est-il communicatif ?
Benoit Monté psychologue
répond à toutes nos questions...
Chute de cheveux
Comment feiner la chute de ou favoriser
la reposusse
Lutter contre les rhumes à répétition
Le témoignage d’une internaute à
découvrir
PodcastA l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie
Santé
Beauté / Bien-être
Témoignages
Digestion difficileCirculationFatigueStressSommeilMaux de têteEtat grippalDouleurs articulaires FeminitéEquilibreVitalitéMaux de l’hiverConfort respiratoireNutrition
Voir tous les sujets
MinceurChute des cheveuxBeauté des cheveuxDermo-nutritionBronzage
Voir tous les sujets
StressSommeilRhumeMinceurMénopause
Voir tous les sujets
Produits
AromathérapiePhytaroma
Améliorer son confort respiratoire
Phytothérapie Elusanes
Résoudre les troubles passagers
du sommeil
Dermo-nutritionDoriance Anti-âge
Lutter contre le photo-vieillissement
En quelques clics, complétez votre profil santé et profitez de conseils personnalisés pour garder la forme !
Partout avec vous, même sur votre mobile
1
2
3
Vos astuces forme
Les conseils d’un phytothérapeute
Vos conseils santé naturelle tout au long de l’année
Créer mon agenda
Connaissance & plantes
Le test du moisDécouvrez votre profil minceur
Menez vous une vie stressante ?
oui pas spécialement pas du tout
Consultez plus de 150 articles de référence sur la phytothérapie
Posez des questions santé, forme et bien-être, des experts répondent à vos questions
?
Votre pharmacie
Naturactive
code poste OK
Trouvez les produits Naturactive, les plus proces de chez vous
rechercher Professionnels Accueil Le magazine Votre santé Nos produits Naturactive
MARQUE
INFORMATIONS D!ACTUALITÉ
PÉDAGOGIQUE
ACCOMPAGNEMENT
INFORMATIONS DE FOND
PARTICIPATIF
CRM
ACCOMPAGNEMENT
THEMES
MARQUE
PÉDAGOGIQUE
PARTICIPATIF
Considérations ergonomiques
WIREFRAME > Gabarits, zoning et grilles
!Gestalt théorie : psychologie de la forme
Considérations ergonomiques
WIREFRAME > Gabarits, zoning et grilles
!Gestalt théorie : psychologie de la forme
! La loi de la proximité : nous regroupons des blocs d'abord les plus proches les uns des autres.
Considérations ergonomiques
WIREFRAME > Gabarits, zoning et grilles
!Gestalt théorie : psychologie de la forme
! La loi de la proximité : nous regroupons des blocs d'abord les plus proches les uns des autres.
Considérations ergonomiques
proximité
WIREFRAME > Gabarits, zoning et grilles
!Gestalt théorie : psychologie de la forme
! La loi de la proximité : nous regroupons des blocs d'abord les plus proches les uns des autres.
Considérations ergonomiques
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme
! La loi de la proximité : nous regroupons des blocs d'abord les plus proches les uns des autres.
! La loi de similitude : si la distance ne permet pas de regrouper des blocs, nous nous attacherons ensuite à repérer les plus similaires d’entre eux.
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme
! La loi de la proximité : nous regroupons des blocs d'abord les plus proches les uns des autres.
! La loi de similitude : si la distance ne permet pas de regrouper des blocs, nous nous attacherons ensuite à repérer les plus similaires d’entre eux.
Similitude
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme
! La loi de la proximité : nous regroupons des blocs d'abord les plus proches les uns des autres.
! La loi de similitude : si la distance ne permet pas de regrouper des blocs, nous nous attacherons ensuite à repérer les plus similaires d’entre eux.
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme
! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme.
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme
! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme.
Continuité
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme
! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme.
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme
! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme
! La loi de clôture : une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu'une forme ouverte.
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme
! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme
! La loi de clôture : une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu'une forme ouverte.
Clôture
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme
! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme
! La loi de clôture : une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu'une forme ouverte.
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme
! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme
! La loi de clôture : une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu'une forme ouverte.
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme
! La loi de continuité : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme
! La loi de clôture : une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu'une forme ouverte.
Ces lois agissent en même temps et sont parfois contradictoires.
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)
zone optique primaire
zone secondaire
Axe d’orientation
zone faible
zone terminale
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)
WIREFRAME > Gabarits, zoning et grilles
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)
Breadcrumbs zone
logo
cat Bt 1 cat Bt 2 cat Bt n Cart zone
search field(s) zone
Browsing
area
Footer
Contents area
OK
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)
Breadcrumbs zone
logo
cat Bt 1 cat Bt 2 cat Bt n Cart zone
search field(s) zone
Browsing
area
Footer
Contents area
OK
zone optique primaire
zone secondaire
Axe d’orientation
zone faible
zone terminale
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)
un contre-exemple
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)
Les cinq zones accessibles de l’écran
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)Zones accessibles
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)! Flux de lecture
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)! Flux de lecture
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)! Flux de lecture
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)! Flux de lecture
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)! Flux de lecture
WIREFRAME > Gabarits, zoning et grilles
Considérations ergonomiques
!Gestalt théorie : psychologie de la forme! Le digramme de Gutenberg (à discuter)! Flux de lecture
WIREFRAME > Gabarits, zoning et grilles
! Créer un environnement structurant pour organiser spatialement l’interface
Grilles (Grid)
WIREFRAME > Gabarits, zoning et grilles
! Créer un environnement structurant pour organiser spatialement l’interface
!Optimiser le workflow conception/réalisation
Grilles (Grid)
WIREFRAME > Gabarits, zoning et grilles
Grilles (Grid)
sources : http://www.markboulton.co.uk
WIREFRAME > Gabarits, zoning et grilles
Grilles (Grid)
sources : http://www.markboulton.co.uk
WIREFRAME > Gabarits, zoning et grilles
Grilles (Grid)
sources : http://www.markboulton.co.uk
WIREFRAME > Gabarits, zoning et grilles
WIREFRAME > Gabarits, zoning et grilles
Grilles (Grid)
WIREFRAME > Gabarits, zoning et grilles
Grilles (Grid)
WIREFRAME > Gabarits, zoning et grilles
Grilles (Grid)
WIREFRAME > Gabarits, zoning et grilles
Grilles (Grid)
! Utiliser un framework Grille/CSS pour un process de coneption/réalisation simultané
http://www.thegridsystem.org
Le courant «Grid design»
WIREFRAME > Gabarits, zoning et grilles
http://www.blueprintcss.org
! Concevoir en prenant compte des spécificités du HTML/CSS
! Travailler avec un CMS : gabarits pré-existants
HTML / CSS : contraintes spécifiques
WIREFRAME > Gabarits, zoning et grilles
HTML / CSS : contraintes spécifiques
http://developer.yahoo.com/yui/grids/builder/
WIREFRAME > Gabarits, zoning et grilles
!Wireframe! Définition et usages ! Contraintes technologiques! Gabarits, zoning et grilles ! Contenus! Outils! Composants d’interface! Design d’interaction! Exercices et annexe
Design d’interface
WIREFRAME > Contenus
Quel types de contenus utiliser ?Type de contenu Description Utiliser pour Ne pas utiliser pour Exemple
Réel Véritable contenu navigation design, protoypage et tests uilisateurs
une présentation client. Risque de discussion sur le contenu et non sur le wireframe
David Raichman,
50 Bd de Port Royal,
75005 Paris
DummyContenu inventé qui ressemble au contenu réel
prototypes et test utilisateur, design graphique.
une présentation client. Risque de discussion sur le contenu et non sur le wireframe
Pierre Leroy,
120 rue Moreau,
92320 Levallois
SymboliqueSérie de symboles X pour les lettres, 9 pour les chiffres
décrire des champs de formulaire
une présentation client. Trop abstrait
XXXXXXXXX,
999 XXX, XXXXXXX
XXXXXXX, XX, 99
Quel types de contenus utiliser ?Type de contenu Description Utiliser pour Ne pas utiliser pour Exemple
Labels
Description du contenu + info supplémentaire.
Entre crochets
le développement un public non technique
[Nom-30], [Prenom-20]
[NumeroRue-2],
[NomRue-60],
[CodePostal-5],[Ville]
Latin Texte en latin design graphique et présentation client
le développement et les formulaires.
Lorem ipsum,
Dolor sit amet,
999 dui. Aliqua
GraphiqueTexte représenté par des lignes plus ou moins épaisses
design graphique (premier jet) ou en complément du texte réel trop pauvre
le développement et les formulaires et présentation client
WIREFRAME > Contenus
!Wireframe! Définition et usages ! Contraintes technologiques! Gabarits, zoning et grilles ! Contenus! Outils! Composants d’interface! Design d’interaction! Exercices et annexe
Design d’interface
WIREFRAME > Outils
! Papier! Papier! Stylo, crayons, couleurs...
! Digital! Logiciels dédiés! Logiciels détournés
Deux approches
WIREFRAME > Outils
Applis (populaires) pour les wireframes
Keynote Omnigraffle Axure Viso Powerpoint Flash Dream
Création de wireframe
Prise en main
Prototypage rapide
Export HTML
Interactivité
Spécifique conception non oui oui non
Keynote Omnigraffle Axure Viso Powerpoint Flash Dream
Création de wireframe
Prise en main
Prototypage rapide
Export HTML
Interactivité
Spécifique conception non oui oui non
Keynote Omnigraffle Axure Powerpoint Flash Dream
Création de wireframe
Prise en main
Prototypage rapide
Export HTML
Interactivité
Spécifique conception non oui oui non non non non
Visio
offline
WIREFRAME > Outils
Applis (nouvelles) pour les wireframes
online online
!Wireframe! Définition et usages ! Contraintes technologiques! Gabarits, zoning et grilles ! Contenus! Outils! Composants d’interface! Design d’interaction! Exercices et annexe
Design d’interface
Définition
Un composant d'interface est un élément de base d'une interface graphique avec lequel un utilisateur peut interagir»
La variations d’un gabarit et des composants d’interface définissent totalement les états d’une interface.
«
WIREFRAME > Composants d’interface
Les éléments d'affichage simple o Étiquette (Label)
o Icône
Les boutons o Bouton poussoir (button)
+ Boutons de barre d'outils
o Case à cocher (Check box)
o Bouton radio (Radio button)
Les menus o Menu de commande (Command menu)
o Menu contextuel (Context menu)
o Menu circulaire, (Pie menu)
Les conteneurs o Barre d'outils (Toolbar)
o Cadre (Frame)
o Onglet (Tabs)
o Barre de défilement (Scrollbar)
o Tiroir (informatique) (drawer) sous Mac OS X, un panel
déroulant attaché à une fenêtre
Les listes o Liste arborescente (Tree view)
o Vue tabulaire Tableau (Grid view)
o Boîte combinée (Combo box)
Les champs utilisateur o Zone de texte (Text box ou Edit Field)
o Zone de mot de passe (Password Field)
o Zone de sélection numérique (Spin Box)
o Curseur (Slider) À ne pas confondre avec le curseur de
souris
Les aides au retour utilisateur o Barre de progression (Progress bar)
o Barre d'état (Status bar)
o Bulle d'aide (Tooltip)
Les fenêtres (Window) o Fenêtre simple
o Fenêtre modale (Modal window)
o Boîte de dialogue (Dialog box)
o Palette (flottante) (Utility window)
Composants usuelsWIREFRAME > Composants d’interface
Les éléments d'affichage simple o Étiquette (Label)
o Icône
Les boutons o Bouton poussoir (button)
+ Boutons de barre d'outils
o Case à cocher (Check box)
o Bouton radio (Radio button)
Les menus o Menu de commande (Command menu)
o Menu contextuel (Context menu)
o Menu circulaire, (Pie menu)
Les conteneurs o Barre d'outils (Toolbar)
o Cadre (Frame)
o Onglet (Tabs)
o Barre de défilement (Scrollbar)
o Tiroir (informatique) (drawer) sous Mac OS X, un panel
déroulant attaché à une fenêtre
Les listes o Liste arborescente (Tree view)
o Vue tabulaire Tableau (Grid view)
o Boîte combinée (Combo box)
Les champs utilisateur o Zone de texte (Text box ou Edit Field)
o Zone de mot de passe (Password Field)
o Zone de sélection numérique (Spin Box)
o Curseur (Slider) À ne pas confondre avec le curseur de
souris
Les aides au retour utilisateur o Barre de progression (Progress bar)
o Barre d'état (Status bar)
o Bulle d'aide (Tooltip)
Les fenêtres (Window) o Fenêtre simple
o Fenêtre modale (Modal window)
o Boîte de dialogue (Dialog box)
o Palette (flottante) (Utility window)
Composants usuelsWIREFRAME > Composants d’interface
Considérations ergonomiques
OK
OK
! Loi de Fitt! Une cible est d’autant plus rapide à atteindre qu’elle est
proche et grande.
WIREFRAME > Composants d’interface
Considérations ergonomiques
! Loi de Fitt! Une cible est d’autant plus rapide à atteindre qu’elle est
proche et grande.
! Loi de Hicks! Le temps de prise de décision d’un utilisateur
augmente en fonction du nombre de possibilités qui lui sont offertes.
WIREFRAME > Composants d’interface
Considérations ergonomiques
! Loi de Fitt! Une cible est d’autant plus rapide à atteindre qu’elle est
proche et grande.
! Loi de Hicks! Le temps de prise de décision d’un utilisateur
augmente en fonction du nombre de possibilités qui lui sont offertes.
A B C
WIREFRAME > Composants d’interface
Considérations ergonomiques
! Loi de Fitt! Une cible est d’autant plus rapide à atteindre qu’elle est
proche et grande.
! Loi de Hicks! Le temps de prise de décision d’un utilisateur
augmente en fonction du nombre de possibilités qui lui sont offertes.
WIREFRAME > Composants d’interface
! Visibilité! Un composant d’interface doit être perçu comme
préhensible. Le rollover est insuffisant !
Considérations ergonomiquesWIREFRAME > Composants d’interface
! Visibilité! Un composant d’interface doit être perçu comme
préhensible. Le rollover est insuffisant !
! Affordance! La forme du composant doit donner des indices sur son
utilisation
Considérations ergonomiquesWIREFRAME > Composants d’interface
! Feedback! Toute interaction effective avec un composant
d’interface doit être marquée par un changement d’état de celui-ci.
Considérations ergonomiques
item 1
item 2
item 3
item 4
item 1
item 2
item 3
item 4
WIREFRAME > Composants d’interface
Bibliothèques de composantWIREFRAME > Composants d’interface
!Wireframe! Définition et usages ! Contraintes technologiques! Gabarits, zoning et grilles ! Contenus! Outils! Composants d’interface! Design d’interaction! Exercices et annexe
Design d’interface
Définition
Le design d’interaction appliqué au secteur logiciel et web est la discipline qui traite du comportement de l’interface avec laquelle interagit un utilisateur »
La discipline s’intéresse au comportement des gabarits et des composants d’interface.
«
WIREFRAME > Design d’interaction
Formalisation
Drag and Drop
WIREFRAME > Design d’interaction
! Codes visuels montrant le potentiel d’interaction
Formalisation
Drag and Drop
WIREFRAME > Design d’interaction
! Codes visuels montrant le potentiel d’interaction
Formalisation
Déplacements au click et motion design
WIREFRAME > Design d’interaction
WIREFRAME > Design d’interaction
! Codes visuels montrant le potentiel d’interaction
! Scénario d’interaction statique
Formalisation
WIREFRAME > Design d’interaction
! Codes visuels montrant le potentiel d’interaction
! Scénario d’interaction statique
Formalisation
! Codes visuels montrant le potentiel d’interaction
! Scénario d’interaction statique
! Charte d’interaction (statique ou interactive)
Formalisation
WIREFRAME > Design d’interaction
! Codes visuels montrant le potentiel d’interaction
! Scénario d’interaction statique
! Charte d’interaction (statique ou interactive)
Formalisation
WIREFRAME > Design d’interaction
version : 24/11/08
auteur : David Raichman
1.0 Interface générale
5
3
1
Remarque générale sur le motion design : on prend ici comme principe que tout changement d’état de l’interface se fera par un interpolation sur les propriétés concernées (Tween avec easing Out).
2
1 Terre
•rollOver : •press :
Comportement local - cas hors France
Sur toute la terre, en dehors des région, le curseur passe en état spécial main
Le curseur main diminue de taille de 10%. Si une fenêtre est ouverte (élément 5, ci-contre) lorsqu’on déplace la terre, celle ci-se referme aussitôt par un mouvement inverse avec lequel elle s’est ouverte.
La rotation de la terre se fait uniquement selon l’axe de ci-dessus.
! Codes visuels montrant le potentiel d’interaction
! Scénario d’interaction statique
! Charte d’interaction (statique ou interactive)
Formalisation
WIREFRAME > Design d’interaction
version : 24/11/08
auteur : David Raichman
1.0 Interface générale
5
3
1
Remarque générale sur le motion design : on prend ici comme principe que tout changement d’état de l’interface se fera par un interpolation sur les propriétés concernées (Tween avec easing Out).
2
1 Terre
•rollOver : •press :
Comportement local - cas hors France
Sur toute la terre, en dehors des région, le curseur passe en état spécial main
Le curseur main diminue de taille de 10%. Si une fenêtre est ouverte (élément 5, ci-contre) lorsqu’on déplace la terre, celle ci-se referme aussitôt par un mouvement inverse avec lequel elle s’est ouverte.
La rotation de la terre se fait uniquement selon l’axe de ci-dessus.
! Codes visuels montrant le potentiel d’interaction
! Scénario d’interaction statique
! Charte d’interaction (statique ou interactive)
Formalisation
WIREFRAME > Design d’interaction
Design pattern
En conception UX, les design pattern désignent des motifs d’interaction popularisés et standardisés. »
«
WIREFRAME > Design d’interaction
! Codes visuels montrant le potentiel d’interaction
! Scénario d’interaction statique
! Charte d’interaction (statique ou interactive)
!Wireframe animé
Formalisation
WIREFRAME > Design d’interaction
Design pattern
En conception UX, les design pattern désignent des motifs d’interaction popularisés et standardisés. »
Les design pattern sont des idiomes que les utilisateurs ont l’habitude d’utiliser.
«
http://interface.fh-potsdam.de/infodesignpatterns/news.php
http://developer.yahoo.com/ypatterns/
WIREFRAME > Design d’interaction
!Wireframe! Définition et usages ! Contraintes technologiques! Gabarits, zoning et grilles ! Contenus! Outils! Composants d’interface! Design d’interaction! Exercices et annexe
Design d’interface
! Pour inspiration...! http://webwithoutwords.com/
! Retro-wireframer les sites suivants :! http://news.bbc.co.uk/
! http://www.natl.tv/
! http://www.sfr.fr/
! http://www.nytimes.com/
! http://www.gotmilk.com/#/home/
Retro-wireframing
WIREFRAME > Exercices et annexe
Synthèse
WIREFRAME > Exercices et annexe
SynthèseSketching
Sketching
WIREFRAME > Exercices et annexe
Synthèse
produits
navigation principale + recherche +panier
branded headerlogo
navigation
secondaire
accès
utilisateurs
footer
accès autre sitesG
ab
arit (z
onin
g)
produits
navigation principale + recherche +panier
branded headerlogo
navigation
secondaire
accès
utilisateurs
footer
accès autre sitesG
ab
arit (z
onin
g)
WIREFRAME > Exercices et annexe
SynthèseWire
frame
RENAULT-MERCHANDISING.COM
ACCUEIL ｜ NOTRE ACTIVITE ｜ NOS PRODUITS ｜ NOS POINTS DE VENTE ｜ OFFRES WEB EXCLUSIVES
Les sites RenaultFR ｜ EN ｜
Mémoriser mes
informations
OK
Identifiant
Mot de passe
>Mot de passe oublié ?
>Inscrivez-vous
DEJA INSCRIT ?
Lunettes Homme Quicksilver
Team
Polaire Histoire & collection
Bagagerie
Logan Berline DACIA 2005 1/43
Objets d’images
Montre Bike Casio
Sportswear
Renault F1 teamTeamSportswearBagagerieObjets d’imagesJouetsMiniature
Renault SportRenaultDacia
Renault F1 Team
© RENAULT MERCHANDISING NEWSLETTER ｜ CONTACT ｜ PLAN DU SITE ｜ MENTIONS LEGALES ｜ CGU
mon panierma liste
2 articles5 articles
Polaire Histoire & collection
Jouets
Logan Berline DACIA 2005 1/43
Miniature
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
goRECHERCHER UN PRODUIT toutes catégories
Personnel du groupe Renault
Professionnel
voir la fiche produit+ voir la fiche produit+
voir la fiche produit+voir la fiche produit+
voir la fiche produit+
voir la fiche produit+ voir la fiche produit+
Logo
Wire
frame
RENAULT-MERCHANDISING.COM
ACCUEIL ｜ NOTRE ACTIVITE ｜ NOS PRODUITS ｜ NOS POINTS DE VENTE ｜ OFFRES WEB EXCLUSIVES
Les sites RenaultFR ｜ EN ｜
Mémoriser mes
informations
OK
Identifiant
Mot de passe
>Mot de passe oublié ?
>Inscrivez-vous
DEJA INSCRIT ?
Lunettes Homme Quicksilver
Team
Polaire Histoire & collection
Bagagerie
Logan Berline DACIA 2005 1/43
Objets d’images
Montre Bike Casio
Sportswear
Renault F1 teamTeamSportswearBagagerieObjets d’imagesJouetsMiniature
Renault SportRenaultDacia
Renault F1 Team
© RENAULT MERCHANDISING NEWSLETTER ｜ CONTACT ｜ PLAN DU SITE ｜ MENTIONS LEGALES ｜ CGU
mon panierma liste
2 articles5 articles
Polaire Histoire & collection
Jouets
Logan Berline DACIA 2005 1/43
Miniature
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
goRECHERCHER UN PRODUIT toutes catégories
Personnel du groupe Renault
Professionnel
voir la fiche produit+ voir la fiche produit+
voir la fiche produit+voir la fiche produit+
voir la fiche produit+
voir la fiche produit+ voir la fiche produit+
Logo
WIREFRAME > Exercices et annexe
SynthèseD
esig
n g
rap
hiq
ue / v
isuel
Desig
n g
rap
hiq
ue / v
isuel
WIREFRAME > Exercices et annexe
Hiérarchie visuelle
produits
navigation principale + recherche +panier
branded headerlogo
navigation
secondaire
accès
utilisateurs
footer
accès autre sites
WIREFRAME > Exercices et annexe
Zone visible d’écran : cas web
RENAULT-MERCHANDISING.COM
ACCUEIL ｜ NOTRE ACTIVITE ｜ NOS PRODUITS ｜ NOS POINTS DE VENTE ｜ OFFRES WEB EXCLUSIVES
Les sites RenaultFR ｜ EN ｜
Mémoriser mes
informations
OK
Identifiant
Mot de passe
>Mot de passe oublié ?
>Inscrivez-vous
DEJA INSCRIT ?
Lunettes Homme Quicksilver
Team
Polaire Histoire & collection
Bagagerie
Logan Berline DACIA 2005 1/43
Objets d’images
Montre Bike Casio
Sportswear
Renault F1 teamTeamSportswearBagagerieObjets d’imagesJouetsMiniature
Renault SportRenaultDacia
Renault F1 Team
© RENAULT MERCHANDISING NEWSLETTER ｜ CONTACT ｜ PLAN DU SITE ｜ MENTIONS LEGALES ｜ CGU
mon panierma liste
2 articles5 articles
Polaire Histoire & collection
Jouets
Logan Berline DACIA 2005 1/43
Miniature
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
goRECHERCHER UN PRODUIT toutes catégories
Personnel du groupe Renault
Professionnel
voir la fiche produit+ voir la fiche produit+
voir la fiche produit+voir la fiche produit+
voir la fiche produit+
voir la fiche produit+ voir la fiche produit+
Logo
WIREFRAME > Exercices et annexe
RENAULT-MERCHANDISING.COM
ACCUEIL ｜ NOTRE ACTIVITE ｜ NOS PRODUITS ｜ NOS POINTS DE VENTE ｜ OFFRES WEB EXCLUSIVES
Les sites RenaultFR ｜ EN ｜
Mémoriser mes
informations
OK
Identifiant
Mot de passe
>Mot de passe oublié ?
>Inscrivez-vous
DEJA INSCRIT ?
Lunettes Homme Quicksilver
Team
Polaire Histoire & collection
Bagagerie
Logan Berline DACIA 2005 1/43
Objets d’images
Montre Bike Casio
Sportswear
Renault F1 teamTeamSportswearBagagerieObjets d’imagesJouetsMiniature
Renault SportRenaultDacia
Renault F1 Team
© RENAULT MERCHANDISING NEWSLETTER ｜ CONTACT ｜ PLAN DU SITE ｜ MENTIONS LEGALES ｜ CGU
mon panierma liste
2 articles5 articles
Polaire Histoire & collection
Jouets
Logan Berline DACIA 2005 1/43
Miniature
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
goRECHERCHER UN PRODUIT toutes catégories
Personnel du groupe Renault
Professionnel
voir la fiche produit+ voir la fiche produit+
voir la fiche produit+voir la fiche produit+
voir la fiche produit+
voir la fiche produit+ voir la fiche produit+
Logo
résolution écran
1024 px
768 p
x
WIREFRAME > Exercices et annexe
RENAULT-MERCHANDISING.COM
ACCUEIL ｜ NOTRE ACTIVITE ｜ NOS PRODUITS ｜ NOS POINTS DE VENTE ｜ OFFRES WEB EXCLUSIVES
Les sites RenaultFR ｜ EN ｜
Mémoriser mes
informations
OK
Identifiant
Mot de passe
>Mot de passe oublié ?
>Inscrivez-vous
DEJA INSCRIT ?
Lunettes Homme Quicksilver
Team
Polaire Histoire & collection
Bagagerie
Logan Berline DACIA 2005 1/43
Objets d’images
Montre Bike Casio
Sportswear
Renault F1 teamTeamSportswearBagagerieObjets d’imagesJouetsMiniature
Renault SportRenaultDacia
Renault F1 Team
© RENAULT MERCHANDISING NEWSLETTER ｜ CONTACT ｜ PLAN DU SITE ｜ MENTIONS LEGALES ｜ CGU
mon panierma liste
2 articles5 articles
Polaire Histoire & collection
Jouets
Logan Berline DACIA 2005 1/43
Miniature
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
100% nylon, disponible en S, M, L, XL, XXLDoublure : 100% polyester
goRECHERCHER UN PRODUIT toutes catégories
Personnel du groupe Renault
Professionnel
voir la fiche produit+ voir la fiche produit+
voir la fiche produit+voir la fiche produit+
voir la fiche produit+
voir la fiche produit+ voir la fiche produit+
Logo
résolution écran
1024 px
768 p
xzone utile
1000 px630 p
xp
rem
ier s
cro
ll
WIREFRAME > Exercices et annexe
! Eviter la 3D! Sauf pour représenter une idée spécifique : cube, terre...! Sauf dans le cas où le framework graphique utilise un
style iconique 3D! Plus l’icône est petite, plus la 3D est à éviter (16 x 16 px >
64 x 64 px)
! Etre le plus général possible! Eviter de représenter un concept général avec une image
spécifique
Lignes directrices pour le design d’icône
WIREFRAME > Exercices et annexe
! Simplifier les formes! Ne garder que les traits caractéristiques minimaux. Par
exemple une orange est réductible à sa forme, couleur et tige
! Diminuer le nombre de couleurs! Si elles ne servent pas à représenter l'idée, les couleurs et
effet de lumières parasitent la compréhension des icônes.
Lignes directrices pour le design d’icône
WIREFRAME > Exercices et annexe
! Standards et utilisation! Avant le design d’icône, se demander si elle existe déjà
comme standard afin de la réutiliser.! Eviter d’utiliser une icône dans un contexte différent de
celui où elle est communément utilisée.
Lignes directrices pour le design d’icône
WIREFRAME > Exercices et annexe
! Prototypes! Objectifs! Enjeux! Outils et techniques ! Tests utilisateurs
Design d’interface
PROTOTYPES > Objectifs
A quoi servent les prototypes ?
! Communiquer avec l’équipe! Graphistes ! Développeurs (spécifications du motion design...)
! Communiquer avec le client! Montrer un concept interactif en action! Mettre en évidence des aspects fonctionnels,
techniques ...
PROTOTYPES > Objectifs
A quoi servent les prototypes ?
! Evaluer la logique de l’interface! Mettre à l’épreuve les spécifications (cas non traités,
erreurs logiques....)! Déceler les points techniques critiques (faisabilité)
! Tester l’utilisabilité (ergonomie) de l’interface! Repérage des zones principales de l’interface! Utilisation des composants d’interface! Wording (label, instructions...)! Architecture d’information (logique de navigation,
organisation des contenus...)! Efficacité du design graphique
PROTOTYPES > Objectifs
A quoi servent les prototypes ?
!Optimiser l’interface pour l’utilisateur! Conception itérative UCD
Test utilisateur et évaluation Prototype
Design
PROTOTYPES > Objectifs
A quoi servent les prototypes ?
PROTOTYPES > Objectifs
A quoi servent les prototypes ?
!Optimiser le temps et les ressources
PROTOTYPES > Objectifs
A quoi servent les prototypes ?
!Optimiser le temps et les ressources! Anticiper les problèmes ergonomiques...
PROTOTYPES > Objectifs
A quoi servent les prototypes ?
!Optimiser le temps et les ressources! Anticiper les problèmes ergonomiques...! Anticiper les problèmes logiques....
PROTOTYPES > Objectifs
A quoi servent les prototypes ?
!Optimiser le temps et les ressources! Anticiper les problèmes ergonomiques...! Anticiper les problèmes logiques....! Anticiper les problème techniques....
PROTOTYPES > Objectifs
A quoi servent les prototypes ?
!Optimiser le temps et les ressources! Anticiper les problèmes ergonomiques...! Anticiper les problèmes logiques....! Anticiper les problème techniques....
... Avant le graphisme et le développement
! Prototypes! Objectifs! Enjeux! Outils et techniques ! Tests utilisateurs
Design d’interface
PROTOTYPES > Enjeux
Typologie des prototypes
Interactif
Statique
Low résolution Hi résolution
Prototype digital
Prototype papier
Sketching Ecrans
PROTOTYPES > Enjeux
Typologie des prototypes
Interactif
Statique
Low résolution Hi résolution
Prototype digital
Prototype papier
Sketching Ecrans
Temps +
Ress
ources
Typologie des prototypes
! Prototype papier! Dessiné uniquement à la main! Mixte : intégration de certains éléments imprimés par
(images, menus....)
PROTOTYPES > Enjeux
Typologie des prototypes
! Prototype papier! Dessiné uniquement à la main! Mixte : intégration de certains éléments imprimés par
(images, menus....)
PROTOTYPES > Enjeux
Typologie des prototypes
! Prototype papier! Dessiné uniquement à la main! Mixte : intégration de certains éléments imprimés par
(images, menus....)
! Prototype digital! Codé (HTML, Flash...)! Non-codé (Powerpoint, Keynote, Axure)
PROTOTYPES > Enjeux
Les pièges du prototype digital! Passer trop de temps sur le rendu du
prototype! Les logiciels incitent souvent à parfaire le motion
design ou le graphisme alors qu’ils ne seront peut être pas gardés après test !
! Souvent, un protoype rudimentaire peut être suffisant pour tester la même chose qu’un prototype plus abouti ! ... et donnera les mêmes résultats.
! Croire à la réutilisabilité du code! Très rare ou récupération d’une petite partie, sauf
framework spécifique ou méthode agile
PROTOTYPES > Enjeux
Les pièges du prototype papier
! Vouloir tout prototyper en papier! Essayer de prototyper en papier un genre qui ne s’y
prête pas (typiquement audiovisuel)! Passer du temps à simuler des comportements
réalisables plus rapidement avec un logiciel de présentation (PowerPoint, Keynote...)
! Prototyper des standards fonctionnels (sites peu complexes avec structure, navigation classique)
PROTOTYPES > Enjeux
Critères d’un bon prototype! Création
! A quelle vitesse le prototype peut-il être créé “from scratch” ?
! Duplication! Peut-on dupliquer rapidement les bases de
l’interface du prototype afin de décliner les différents états ?
!Modification! Le prototype est-il facilement modifiable, réajustable
pour des tests ultérieurs ?
PROTOTYPES > Enjeux
Critères d’un bon prototype
! Réalisme! Le prototype présente-il un degré de réalisme visuel
et interactif nécessaire pour ce que l’on souhaite tester ?
PROTOTYPES > Enjeux
Paramètres
! Ce que l’on cherche à tester! archi d’info, ergonomie du design graphique,
wording, optimalité du parcours utilisateur...
! Le genre de l’interface! informationnel, applicatif, audiovisuel, ergonomie
standard, non-standard...
PROTOTYPES > Enjeux
APPLICATIF
AUDIOVISUEL
INFORMATIONNEL
STANDARD
NON-STANDARD
- étapes multiples
- orienté tâche
- navigation non-standard
PROTOTYPE PAPIER
TEST UTILISATEURS
WIREFRAME DIGITAL PROTOTYPE DIGITAL
- wording
- fonctions spécifiquesDESSIN PAPIER
D’INTERFACE
TEST UTILISATEURS
STORYBOARD + MOTION DESIGN PROTOTYPE DIGITAL
- interactions
- transition et orientation de l’utilisateur
WIREFRAME ANIMÉ
TEST UTILISATEURS
Arbre de décision prototype / genrePROTOTYPES > Enjeux
! Prototypes! Objectifs! Enjeux! Outils et techniques! Tests utilisateurs
Design d’interface
PROTOTYPES > Outls et techniques
Prototypes papiers! Le matériel
! Support dur de taille supérieure au prototype! Papier blanc! Différentes tailles et couleurs de stylo et effaçables! Papier transparent de couleur (jaune, rose..) (permet
de faire du highlighting)! Papier transparent incolor (pour les formulaires)! Ciseaux! Scotch transparent (pour attacher les différents
composants)! Pâte à fixe (pour poser les différents états de
l’interface)
PROTOTYPES > Outls et techniques
Prototypes papiers
! Support! On peut utiliser une impression faite à partir de
l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box
PROTOTYPES > Outls et techniques
Prototypes papiers
! Support! On peut utiliser une impression faite à partir de
l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box
PROTOTYPES > Outls et techniques
Prototypes papiers
! Support! On peut utiliser une impression faite à partir de
l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box
Prototypes papiers
! Support! On peut utiliser une impression faite à partir de
l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets
PROTOTYPES > Outls et techniques
Prototypes papiers
! Support! On peut utiliser une impression faite à partir de
l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets
PROTOTYPES > Outls et techniques
Prototypes papiers
! Support! On peut utiliser une impression faite à partir de
l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets
PROTOTYPES > Outls et techniques
Prototypes papiers
! Support! On peut utiliser une impression faite à partir de
l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant
PROTOTYPES > Outls et techniques
Prototypes papiers
! Support! On peut utiliser une impression faite à partir de
l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant
PROTOTYPES > Outls et techniques
Prototypes papiers
! Support! On peut utiliser une impression faite à partir de
l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant
PROTOTYPES > Outls et techniques
Prototypes papiers
! Support! On peut utiliser une impression faite à partir de
l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant
PROTOTYPES > Outls et techniques
Prototypes papiers
! Support! On peut utiliser une impression faite à partir de
l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant
PROTOTYPES > Outls et techniques
PROTOTYPES > Outls et techniques
! Support! On peut utiliser une impression faite à partir de
l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant! Sélection et highlight
PROTOTYPES > Outls et techniques
PROTOTYPES > Outls et techniques
! Support! On peut utiliser une impression faite à partir de
l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant! Sélection et highlight
PROTOTYPES > Outls et techniques
PROTOTYPES > Outls et techniques
! Support! On peut utiliser une impression faite à partir de
l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant! Sélection et highlight
PROTOTYPES > Outls et techniques
Prototypes papiers! Support
! On peut utiliser une impression faite à partir de l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant! Sélection et highlight! Boite expandable
PROTOTYPES > Outls et techniques
Prototypes papiers! Support
! On peut utiliser une impression faite à partir de l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant! Sélection et highlight! Boite expandable
PROTOTYPES > Outls et techniques
Prototypes papiers! Support
! On peut utiliser une impression faite à partir de l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant! Sélection et highlight! Boite expandable
PROTOTYPES > Outls et techniques
Prototypes papiers! Support
! On peut utiliser une impression faite à partir de l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant! Sélection et highlight! Boite expandable! Curseurs
PROTOTYPES > Outls et techniques
Prototypes papiers! Support
! On peut utiliser une impression faite à partir de l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant! Sélection et highlight! Boite expandable! Curseurs
PROTOTYPES > Outls et techniques
Prototypes papiers! Support
! On peut utiliser une impression faite à partir de l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant! Sélection et highlight! Boite expandable! Curseurs
PROTOTYPES > Outls et techniques
Prototypes papiers! Support
! On peut utiliser une impression faite à partir de l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant! Sélection et highlight! Boite expandable! Curseurs
Les prototypes papiers supposent un rôle hyperactif du testeur : c’est lui qui doit
simuler le comportement de l’interface en fonction des actions de l'utilisateur !
PROTOTYPES > Outls et techniques
Prototypes papiers! Support
! On peut utiliser une impression faite à partir de l’interface réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
! Les éléments d’interface! Boutons et check box! Onglets! Menu déroulant! Sélection et highlight! Boite expandable! Curseurs
PROTOTYPES > Outls et techniques
Prototypes digitaux
! Logiciel de présentation (non-codés)! Etude de cas : Europcar, Tag
! Programmation (codé)! HTML (Nido)! AJAX (Mattel)! Flash (Mattel/Amex)! Mixtes (ScreenCast, Non-codés, codé) (Sanford,
Mattel)
PROTOTYPES > Outls et techniques
offline
Applications pour le protoypage
offlineonline
PROTOTYPES > Outls et techniques
! Prototypes! Objectifs! Enjeux! Outils et techniques! Tests utilisateurs
Design d’interface
PROTOTYPES > Test utilisateurs
Fondements
! Phases! Identification des éléments à tester! Identification du public cible! Recrutement du panel! Rédaction du test : scénario du test, questionnaires ! Montage du Lab! Test! Analyses! Rapport
Fondements
! Redaction du test! Questionnaire! Guide d’entretien! Exemple
PROTOTYPES > Test utilisateurs
Fondements
! Recrutement du panel! Segmentation du public! Constitution de groupes! Combien d’utilisateurs ?
PROTOTYPES > Test utilisateurs
Protocoles
!Questionnaires! Tri de carte! Test de perception / Eyetracking! Test de mémorisation! Analyse du parcours utilisateur
! Capture vidéo de l’écran, actions de l’ustilisateur! HeatMap! Feedback oral de l’utilisateur enregistré (thinking
aloud)
Il est possible de combiner plusieurs protocoles
PROTOTYPES > Test utilisateurs
Dispositif et Outils : montage du Lab
!Matériel! Caméras / webcam! Micro! Eyetracker
! Logiciels ! Camtasia Studio! ScreenFlow! Snapz Pro
PROTOTYPES > Test utilisateurs
Dispositif et Outils : montage du Lab
! Logiciels (suite)! www.clicktale.com! crazyegg.com! www.feng-gui.com
PROTOTYPES > Test utilisateurs
! Références! Bibliographie ! Webographie
Design d’interface
RÉFÉRENCES > Bibliographie
Tidwell, Designing Interfaces, 2005, O’Reilly
Saffer, Designing Gestural Interfaces, 2008, O’Reilly
Hoekman, Designing the moment : web interface design concept in action, 2008, New Riders
Hoekman, Designing the Obvious: A Common Sense Approach to Web
Application Design, 2007, New Riders
Stone, Jarett, Woodroffe, Minocha, User Interface Design and Evaluation, 2005, Morgan Kaufmann
Elam K., Grid Systems, 2004, Princeton Architectural Press
Lidwell, Holden, Butler, Universal Principles of Design, 2003, Rockport
Raskin, The Humane Interface, 2007, Addison-Wesley
Design d’interface
Design d’interactionCooper, About Face 3 (The Essentials of Interaction Design), 2007, Wiley
Sharp, Interaction Design: Beyond Human-Computer Interaction, Wiley
Saffer, Designing for interaction, 2007, New Riders
Moggridge, Designing Interactions, MIT Press, 2006
RÉFÉRENCES > Bibliographie
Prototypage et UtilisabilitéSnyder, Paper Prototyping, 2003, Morgan Kaufmann
Boucher, Ergonomie web : pour des sites web efficaces, 2007, Eyrolles
Baccino, Mesure de l'Utilisabilité des Interfaces, 2005, Hermès
Krug, Don't Make Me Think: A Common Sense Approach to Web Usability, New Riders
RÉFÉRENCES > Bibliographie
! Références! Bibliographie ! Webographie
Design d’interface
RÉFÉRENCES > Webographie
Prototypage et Utilisabilité
Interfaces audiovisuelleshttp://www.everydayflash.com/blog/http://www.yellowpimento.com/
http://www.thefwa.com/
Interfaces richeshttp://www.fredcavazza.net/http://www.interfaces-riches.com/
Ressources et tutoriauxhttp://developer.yahoo.com/ypatterns/http://developer.yahoo.com/ypatterns/wireframes/
http://www.iconfinder.net/http://www.thegridsystem.org/
Design d’interface, Design d’interaction, UXhttp://wireframes.linowski.ca/http://www.uie.com/
http://deeplinking.net/
http://www.interaction-design.org/http://www.iconwerk.de/
http://www.uxmag.com/http://www.archive.org
http://www.pixelsumo.com/
http://www.moma.org/exhibitions/2008/elasticmind/http://www.metaverseroadmap.org/overview/
Utilisabilitéhttp://www.feng-gui.com/
http://www.useit.com/
http://www.surl.org/http://www.clicktale.com/
http://www.slideshare.net/davethepreacherA retrouver sur
