View
3.599
Download
4
Category
Preview:
DESCRIPTION
Module de conception MICNI : Cours sur le design d'interface et design d'interaction
Citation preview
CONCEPTION
E. Design d’interface et design d’interaction
Master 2 : Management et Ingénierie de la Communication Numérique Interactive
Janvier 2010 Ecole des GobelinsDavid Raichman Senior UX Designer @ OgilvyInteractive
Conception | Design d’interface et design d’interaction
Les cours de conception
A. Introduction au design d’expérience utilisateur (UXD)
B. Les livrables de l’UXD
C. De la recherche utilisateur au design fonctionnel
D. Framework fonctionnel et stratégie des contenus
E. Design d’interface et design d’interaction
F. Utilisabilité
Conception | Design d’interface et design d’interaction
1. Introduction2. Typologie des interfaces
3. Wireframes
4. Design d’interaction
6. Références
C. Design d’interface et design d’interaction
Conception | Design d’interface et design d’interaction
1. Introduction / Situation de la problématique
?
?
Conception | Design d’interface et design d’interaction
1. Introduction / Principe de l’IHM
Homme Ordinateur
Interface
Input Utilisateur
Output Système
Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
Conception | Design d’interface et design d’interaction
1. Introduction / De l’information à l’interaction
Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Iconicité maximale
Objet lui-même
Iconicité minimale
Relations topographiques
Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Objet lui-même
Schéma anatomique
Iconicité maximale
Iconicité minimale
Relations topographiques
Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Objet lui-même
Schéma anatomique
Iconicité maximale
Iconicité minimale
Schéma de principe
Relations topographiques Relations topologiques
Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Objet lui-même
Schéma anatomique
Relations topographiques
Iconicité maximale
Iconicité minimale
Schéma de principe
Relations topologiques
Schéma de formulation
Relations logiques
Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Objet lui-même
Schéma anatomique
Relations topographiques
Iconicité maximale
Iconicité minimale
Schéma de principe
Relations topologiques
Schéma de formulation
Relations logiquesSchéma en espace complexe
Conception | Design d’interface et design d’interaction
1. Introduction / Echelle d’iconicité
Objet lui-même
Schéma anatomique
Relations topographiques
Iconicité maximale
Iconicité minimale
Schéma de principe
Relations topologiques
Schéma de formulation
Relations logiquesSchéma en espace complexe
Visualisation de données
Conception | Design d’interface et design d’interaction
1. Introduction
2. Typologie des interfaces
3. Wireframes4. Design d’interaction
6. Références
C. Design d’interface et design d’interaction
Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Implementation-centred
+ -
Facile à construire Apprentissage long
- Public expert
Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Implementation-centred
+ -
Facile à construire Apprentissage long
- Public expert
Conception | Design d’interface et design d’interaction
+ -
intuitive contextuelle
aucun apprentissage
utopique
2. Typologie des interfaces / Métaphoriques
Conception | Design d’interface et design d’interaction
+ -
intuitive contextuelle
aucun apprentissage
utopique
2. Typologie des interfaces / Métaphoriques
Conception | Design d’interface et design d’interaction
+ -
intuitive contextuelle
aucun apprentissage
utopique
2. Typologie des interfaces / Métaphoriques
w w w . s o u t h w e s t . c o m
Conception | Design d’interface et design d’interaction
+ -
intuitive contextuelle
aucun apprentissage
utopique
2. Typologie des interfaces / Métaphoriques
Conception | Design d’interface et design d’interaction
+ -
intuitive contextuelle
aucun apprentissage
utopique
2. Typologie des interfaces / Métaphoriques
Conception | Design d’interface et design d’interaction
+ -
intuitive contextuelle
aucun apprentissage
utopique
2. Typologie des interfaces / Métaphoriques
Conception | Design d’interface et design d’interaction
+ -
intuitive contextuelle
aucun apprentissage
utopique
2. Typologie des interfaces / Métaphoriques
Conception | Design d’interface et design d’interaction
+ -
intuitive contextuelle
aucun apprentissage
utopique
2. Typologie des interfaces / Métaphoriques
Conception | Design d’interface et design d’interaction
+ -
intuitive contextuelle
aucun apprentissage
utopique
2. Typologie des interfaces / Métaphoriques
Conception | Design d’interface et design d’interaction
+ -
intuitive contextuelle
aucun apprentissage
utopique
2. Typologie des interfaces / Métaphoriques
Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Idiomatiques
+ -
modulaireinteropérable
apprentissagecourt
interaction riche
Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Idiomatiques
+ -
modulaireinteropérable
apprentissagecourt
interaction riche
w w w . n i c k a d . c o m
Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Idiomatiques
+ -
modulaireinteropérable
apprentissagecourt
interaction riche
Conception | Design d’interface et design d’interaction
2. Typologie des interfaces / Idiomatiques
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électioncheckbox, surbrillance
idiomesnaviguer, dessiner, acheter
changer de section, trier
Conception | Design d’interface et design d’interaction
1. Introduction
2. Typologie des interfaces
3. Wireframes
4. Design d’interaction6. Références
C. Design d’interface et design d’interaction
Conception | Design d’interface et design d’interaction
3. Wireframes / Définition
Les wireframes sont des représentations visuelles qui capturent à elles seules l’ensemble des décisions stratégiques, fonctionnelles, d’architecture
d’information et d’ergonomie.»Ils servent de référence pour le design graphique et pour le développement du projet digital.
Ils contiennent différents niveaux de précision selon le contexte.
Conception | Design d’interface et design d’interaction
3. Wireframes
Degré de précision
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Statique
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
Prototype papier
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
Prototype papier
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique
Prototype papier
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique
Prototype papier
Ecrans (psd, jpg...)
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique
Prototype papier
Ecrans (psd, jpg...)
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique
Prototype papier
Ecrans
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique
Prototype papier
Ecrans
Prototype digital (HTML, Flash...)
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique
Prototype papier
Ecrans
Prototype digital (HTML, Flash...)
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique
Prototype papier
Ecrans
Prototype digital
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique
Prototype papier
Ecrans
Prototype digital
Wireframes
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique
Prototype papier
Ecrans
Prototype digital
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
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique
Prototype papier
Ecrans
Prototype digital
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
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
Conception | Design d’interface et design d’interaction
3. Wireframes / Degré de précision
Interactif
Low résolution Hi résolution
Sketching
Statique
Prototype papier
Ecrans
Prototype digital
Wireframes
Conception | Design d’interface et design d’interaction
3. Wireframes / Questions à se poser
‣Quels sont les objectifs du wireframe ?‣ Communiquer les décisions structurelles aux équipes
créative, de développement
‣ Servir de prototype pour des tests utilisateurs...
‣Quelle est l’audience ?‣ Créatifs (document de design)
‣ Développeurs (document de spécification)
‣ Client (document de présentation)
Conception | Design d’interface et design d’interaction
3. Wireframes
Exemples
Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
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
Renault merchandising
Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
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
Renault merchandising
Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon
Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon
Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon
Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon
Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon
Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon
Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon
Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon
Conception | Design d’interface et design d’interaction
3. Wireframes / Exemple de spécifications
Louis Vuitton Mobile Japon
Conception | Design d’interface et design d’interaction
3. Wireframes
Contraintes technologiques
Conception | Design d’interface et design d’interaction
3. Wireframes / Contraintes technologiques
‣ Travailler avec une technologie imposée
‣ Trouver la technologie qui répond au cahier des charges de mon design d’interface
Conception | Design d’interface et design d’interaction
3. Wireframes / Contraintes technologiques
Audiovisuel Informationnel
Applicatif
Desktop, bornes, autres...
Social
Transactionnel
Blogs
News
Mondes virtuels
Publicitaire, Evt, Portfolio...
Films, doc interactifs
Jeux en ligne
RDA : Rich Desktop Application
RIA : Rich Internet Application
RMA : Rich Mobile Application
HTML/CSS, Ajax (javascript)Flash, Silverlight.Net, Java... Flex/A
IR, .N
et, SD
K...
Director, Java...
Conception | Design d’interface et design d’interaction
‣ Quel est le support final ?‣ Ecran ordinateur, mobile, écran tactile, TV ...
‣ La résolution d’affichage
‣Quelle technologie ?‣ Flash
‣ HTML/CSS/Ajax
‣ SDK Iphone...
3. Wireframes / Contraintes technologiques
Conception | Design d’interface et design d’interaction
3. Wireframes
Gabarits, zoning et grilles
Conception | Design d’interface et design d’interaction
3. Wireframes / Gabarits, zoning et grilles
Un gabarit (ou squelette ou layout) est la structure visuelle persistante qui définit la charpente d’une interface.La variations d’un gabarit définissent en partie les états d’une interface.
Les gabarits constituent le fondement des wireframes.
La méthode de construction d’un gabarit s’appelle le zoning.
Conception | Design d’interface et design d’interaction
3. Wireframes / Gabarits, zoning et grilles (exemple)
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
Conception | Design d’interface et design d’interaction
3. Wireframes / Gabarits, zoning et grilles (exemple)
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
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
Conception | Design d’interface et design d’interaction
3. Wireframes / Gabarits, zoning et grilles (exemple)
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
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
Conception | Design d’interface et design d’interaction
3. Wireframes / Gabarits, zoning et grilles (exemple)
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
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
Conception | Design d’interface et design d’interaction
3. Wireframes / Grid design
‣ Les grilles créent un environnement structurant pour organiser spatialement l’interface
‣ Les gilles optimisent le workflow conception/réalisation
Conception | Design d’interface et design d’interaction
3. Wireframes / Grid design
Conception | Design d’interface et design d’interaction
3. Wireframes / Grid design
Conception | Design d’interface et design d’interaction
3. Wireframes / Grid design
Conception | Design d’interface et design d’interaction
3. Wireframes / Grid design (exemple)
Conception | Design d’interface et design d’interaction
3. Wireframes / Grid design (exemple)
Conception | Design d’interface et design d’interaction
3. Wireframes / Grid design (exemple)
Conception | Design d’interface et design d’interaction
3. Wireframes / Grid design (exemple)
Conception | Design d’interface et design d’interaction
3. Wireframes / Grid design en html - css
Utiliser un framework Grille/CSS pour une méthode de coneption/réalisation simultanée
http://www.thegridsystem.org
http://www.blueprintcss.org
Conception | Design d’interface et design d’interaction
3. Wireframes
Contenus
Conception | Design d’interface et design d’interaction
3. Wireframes / Contenus
Conception | Design d’interface et design d’interaction
3. Wireframes / Typologie des contenus
Type de contenu Description Utiliser pour Ne pas utiliser pour Exemple
Réel Véritable contenunavigation design, protoypage et tests uilisateurs
une présentation client. Risque de discussion sur le contenu et non sur le wireframe
David Raichman,
50 rue monge,
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
Conception | Design d’interface et design d’interaction
3. Wireframes / Typologie des contenus
Type de contenu Description Utiliser pour Ne pas utiliser pour Exemple
Labels
Description du contenu + info supplémentaire.
Entre crochets
le développementun public non technique
[Nom-30], [Prenom-20]
[NumeroRue-2],
[NomRue-60],
[CodePostal-5],[Ville]
Latin Texte en latindesign 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
Conception | Design d’interface et design d’interaction
3. Wireframes
Outils
Conception | Design d’interface et design d’interaction
3. Wireframes / Outils
‣ Papier‣ Papier
‣ Stylo, crayons, couleurs...
‣ Digital‣ Logiciels dédiés
‣ Logiciels détournés
Conception | Design d’interface et design d’interaction
3. Wireframes / Outils
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
Conception | Design d’interface et design d’interaction
3. Wireframes / Outils
offline online online
Conception | Design d’interface et design d’interaction
3. Wireframes / Outils
Conception | Design d’interface et design d’interaction
3. Wireframes
Synthèse
Conception | Design d’interface et design d’interaction
3. Wireframes / Synthèse
Sketching
Sketching
Conception | Design d’interface et design d’interaction
3. Wireframes / Synthèse
produits
navigation principale + recherche +panier
branded headerlogo
navigation
secondaire
accès
utilisateurs
footer
accès autre sites
Gab
arit (z
on
ing
)
produits
navigation principale + recherche +panier
branded headerlogo
navigation
secondaire
accès
utilisateurs
footer
accès autre sites
Gab
arit (z
on
ing
)
Conception | Design d’interface et design d’interaction
3. Wireframes / Synthèse
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+
LogoWire
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
Conception | Design d’interface et design d’interaction
3. Wireframes / Synthèse
Desig
n g
rap
hiq
ue / v
isu
el
Desig
n g
rap
hiq
ue / v
isu
el
Conception | Design d’interface et design d’interaction
3. Wireframes / Synthèse
produits
navigation principale + recherche +panier
branded headerlogo
navigation
secondaire
accès
utilisateurs
footer
accès autre sites
Hiérarchie visuelle
Conception | Design d’interface et design d’interaction
3. Wireframes / Synthèse
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
Conception | Design d’interface et design d’interaction
3. Wireframes / Synthèse
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 px
Conception | Design d’interface et design d’interaction
3. Wireframes / Synthèse
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 pxzone utile
1000 px630 p
xp
remier scroll
Conception | Design d’interface et design d’interaction
‣Utilisez une variation de couleurs pour rendre-compte de la hiérarchie éditoriale
‣Utilisez un logiciel de votre choix pour l’exercice (Photoshop, powerpoint, Visio, Illustrator...)
Rétro-wireframer le site http://news.bbc.co.uk
3. Wireframes / Exercice
Conception | Design d’interface et design d’interaction
1. Introduction
2. Typologie des interfaces
3. Wireframes
4. Design d’interaction6. Références
C. Design d’interface et design d’interaction
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Définition
Le design d’interaction est la discipline qui traite du comportement de l’interface avec laquelle interagit un utilisateur.
Dans le contexte web et mobile, la discipline s’intéresse au comportement des gabarits et des composants d’interface.
Conception | Design d’interface et design d’interaction
Formalisation
4. Design d’interaction
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Formalisation
Drag and Drop
‣ Codes visuels montrant le potentiel d’interaction
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Formalisation
‣ Codes visuels montrant le potentiel d’interaction
Déplacements au click et motion design
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Formalisation
‣ Codes visuels montrant le potentiel d’interaction‣ Scénario d’interaction statique
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Formalisation
‣ Codes visuels montrant le potentiel d’interaction‣ Scénario d’interaction statique
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Formalisation
‣ Codes visuels montrant le potentiel d’interaction‣ Scénario d’interaction statique‣ Charte d’interaction (statique ou
interactive)
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Formalisation
‣ Codes visuels montrant le potentiel d’interaction‣ Scénario d’interaction statique‣ Charte d’interaction (statique ou
interactive)
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.
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Formalisation
‣ Codes visuels montrant le potentiel d’interaction‣ Scénario d’interaction statique‣ Charte d’interaction (statique ou
interactive)
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.
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Formalisation
‣ Codes visuels montrant le potentiel d’interaction‣ Scénario d’interaction statique‣ Charte d’interaction (statique ou
interactive)
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Formalisation
‣ Codes visuels montrant le potentiel d’interaction‣ Scénario d’interaction statique‣ Charte d’interaction (statique ou
interactive)‣Wireframe animé
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Design patterns
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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Formalisation (exemple)
Cas : Vuitton, Hennessy black, Mattel
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Exercice
Storyboarder un tunnel d’achat d’un e-commerce HTML/Ajax
‣Wireframer les étapes suivantes (papier, crayons)-Récapitulatif du panier d’achat-Création du compte-Renseignement des adresses
‣La partie «adresse» doit permettre à l’utilisateur d’être livré à des adresses différentes pour chaque produit
Conception | Design d’interface et design d’interaction
Protoypes
4. Design d’interaction
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Introduction aux prototypes
A quoi servent les prototypes ?
SHARED COMMUNICATION
WORKING THROUGH A DESIGN
SELLING YOUR IDEA INTERNALLY
GAUGING TECHNICAL FEASIBILITY
USABILITY TESTING
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Introduction aux prototypes
A quoi servent les prototypes ?
‣ Communiquer avec l’équipe, le client‣ Graphistes
‣ Développeurs (spécifications du motion design...)
‣ Montrer un concept interactif en action
‣ Mettre en évidence des aspects fonctionnels, techniques ...
‣ Design‣ Tester un principe d’interface
‣ Construire par itération
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Introduction aux prototypes
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é 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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Introduction aux prototypes
A quoi servent les prototypes ?
Wireframes
Design d’interactionPrototypage
Optimisations
Test
Design visuel
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Introduction aux prototypes
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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Typologie des prototypes
Interactif
Low résolution Hi résolution
Sketching
Statique
Prototype papier
Ecrans
Prototype digital
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Typologie des prototypes
Interactif
Low résolution Hi résolution
Sketching
Statique
Prototype papier
Ecrans
Prototype digital
Temps +
Ress
ources
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Typologie des prototypes
‣ Prototype papier‣ Dessiné uniquement à la main
‣ Mixte : intégration de certains éléments imprimés par (images, menus....)
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Typologie des prototypes
‣ Prototype papier‣ Dessiné uniquement à la main
‣ Mixte : intégration de certains éléments imprimés par (images, menus....)
Conception | Design d’interface et design d’interaction
4. Design d’interaction / 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...)
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Typologie des prototypes
‣ 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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / 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 ?
‣ Réalisme‣ Le prototype présente-il un degré de réalisme visuel et
interactif nécessaire pour ce que l’on souhaite tester ?
Conception | Design d’interface et design d’interaction
APPLICATIF
AUDIOVISUEL
INFORMATIONNEL
STANDARD
NON-STANDARD
- étapes multiples
- orienté tâche
- navigation non-standard
PROTOTYPE PAPIER
TEST
WIREFRAME DIGITAL PROTOTYPE DIGITAL
- wording
- fonctions spécifiques
DESSIN PAPIER
D’INTERFACE
TEST
STORYBOARD + MOTION DESIGN PROTOTYPE DIGITAL
- interactions
- transition et orientation de l’utilisateur
WIREFRAME ANIMÉ
TEST
4. Design d’interaction / Arbre de décision
Conception | Design d’interface et design d’interaction
4. Design d’interaction / 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)
Conception | Design d’interface et design d’interaction
4. Design d’interaction / 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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / 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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / 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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / 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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / 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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / 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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / 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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / 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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / 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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / 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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / 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
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Prototypes papiers
Les prototypes papiers supposent deux personnes : celui qui doit simuler le
comportement de l’interface en fonction des actions de l'utilisateur et le testeur.
Conception | Design d’interface et design d’interaction
4. Design d’interaction / Exemples de prototypes
‣ Logiciel de présentation (non-codés)‣ Etude de cas : Europcar, Tag
‣ Programmation (codé)‣ AJAX (Mattel)
‣ Flash (Mattel/Amex)
‣ Mixtes (ScreenCast, Non-codés, codé) (Sanford, Mattel)
Conception | Design d’interface et design d’interaction
1. Introduction
2. Typologie des interfaces
3. Wireframes
4. Design d’interaction
6. Références
C. Design d’interface et design d’interaction
Conception | Design d’interface et design d’interaction
6. Références / Bibliographie
Tidwell, Designing Interfaces, 2005, O’Reilly
Warfel, Prototyping, 2009, Rosenfeld
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
Saffer, Designing Gestural Interfaces, 2008, O’Reilly
Cooper, About Face 3 (The Essentials of Interaction Design), 2007, Wiley
Elam K., Grid Systems, 2004, Princeton Architectural Press
Snyder, Paper Prototyping, 2003, Morgan Kaufmann
Conception | Design d’interface et design d’interaction
6. Références / Webographie
http://wireframes.linowski.ca/ (Wireframes)
http://webwithoutwords.com/ (Wireframes)
http://developer.yahoo.com/ypatterns/ (Design patterns)
http://www.iconfinder.net/ (Design d’interface)
http://www.thegridsystem.org/ (Grid Design)
http://www.slideshare.net/davethepreacher
Recommended