1. *
CONCEVOIR POUR
L’EXPERIENCE UTILISATEUR
RÉVISION POUR TOUS
2. QUEL EST VOTRE PROCESS DE CONCEPTION ?
DESIGN
Panique non Validation oui Livré en
Client retard
INSPIRÉ PAR : smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/
46. Périmoètre
foncti nnel
Definition des fonctions,
des formats, des principes
d’interaction...
ORGANISATION
Objectifs:
- lister rles fonctions ent
- obteniun un accord cli
- fairmatiobudgetproduction
e
esti n de
et une
47. Périmoètre
foncti nnel
Definition des fonctions,
Management des
Contenus
des formats, des principes
d’interaction...
Tableau
Matrice des de page
ORGANISATION contenus
48. Périmoètre
foncti nnel
Definition des fonctions,
Management des
Contenus
des formats, des principes
d’interaction...
Tableau
Matrice des de page
ORGANISATION contenus
49. Périmoètre
foncti nnel
Definition des fonctions,
Management des
Contenus
des formats, des principes
d’interaction...
Tableau
Matrice des de page
ORGANISATION contenus
50. Périmoètre
foncti nnel
Definition des fonctions,
Management des
Contenus
des formats, des principes
d’interaction...
Tableau
Matrice des de page
ORGANISATION contenus
51. Périmoètre
foncti nnel
Definition des fonctions,
Management des
Contenus
des formats, des principes
d’interaction...
Tableau
Matrice des de page
ORGANISATION contenus
Structure
Plan de site Arborescence
Logique Méthode:
Méthode: d’ensemble -Vue détaillée tableur
schéma -Nommage ou arbre
-Références
52. Périmoètre
foncti nnel
Definition des fonctions,
Management des
Contenus
des formats, des principes
d’interaction...
Tableau
Matrice des de page
ORGANISATION contenus
Structure
Plan de site Arborescence
Logique Méthode:
Méthode: d’ensemble -Vue détaillée tableur
schéma -Nommage ou arbre
-Références
53. Périmoètre
foncti nnel
Definition des fonctions,
Management des
Contenus
des formats, des principes
d’interaction...
Tableau
Matrice des de page
ORGANISATION contenus
Structure
Plan de site Arborescence
Logique Méthode:
Méthode: d’ensemble -Vue détaillée tableur
schéma -Nommage ou arbre
-Références
55. Desiognnel
foncti n
Shémas de Flux
structure` logiques
(wireframes) DESIGN
56. Desiognnel
foncti n
Shémas de Flux
structure` logiques
(wireframes) DESIGN
57. Desiognnel
foncti n
Shémas de Flux
structure` logiques
(wireframes) DESIGN
58. Desiognnel
foncti n
Shémas de Flux
structure` logiques
(wireframes) DESIGN
59. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
60. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
61. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
62. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
63. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
64. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
65. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
66. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
Basse
définition
- Papier
- Balsamiq
67. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
Basse Moyenne
définition définition
- Papier - Wiqruables
cli eframes
- Balsamiq - Demo client
Flash ou autre
68. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
Basse Moyenne Haute
définition définition définition
- Papier - Wiqruables - Prototype de
cli eframes développement
- Balsamiq - Demo client HTML/CSS/DOM
ou FLASH
Flash ou autre
69. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
70. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
Basse
définition
- Papier
- Balsamiq
71. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
Basse Moyenne
définition définition
- Papier - Wiqruables
cli eframes
- Balsamiq - Demo client
Flash ou autre
72. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
Basse Moyenne Haute
définition définition définition
- Papier - Wiqruables - Prototype de
cli eframes développement
- Balsamiq - Demo client HTML/CSS/DOM
ou FLASH
Flash ou autre
73. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
74. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
Basse
définition
- Papier
- Balsamiq
75. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
Basse Moyenne
définition définition
- Papier - Wiqruables
cli eframes
- Balsamiq - Demo client
Flash ou autre
76. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
Basse Moyenne Haute
définition définition définition
- Papier - Wiqruables - Prototype de
cli eframes développement
- Balsamiq - Demo client HTML/CSS/DOM
ou FLASH
Flash ou autre
77. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
Basse Moyenne Haute
définition définition définition
- Papier - Wiqruables - Prototype de
cli eframes développement
- Balsamiq - Demo client HTML/CSS/DOM
ou FLASH
Flash ou autre
78. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
Basse Moyenne Haute
définition définition définition
- Papier - Wiqruables - Prototype de
cli eframes développement
- Balsamiq - Demo client HTML/CSS/DOM
ou FLASH
Flash ou autre
79. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype
Basse Moyenne Haute
définition définition définition
- Papier - Wiqruables - Prototype de
cli eframes développement
- Balsamiq - Demo client HTML/CSS/DOM
ou FLASH
Flash ou autre
80. Desiognnel
foncti n d Design on
,interacti
Shémas de Flux Charte
Comportements d’interaction
structure` logiques
(wireframes) DESIGN des objets
Prototype Interface
Basse Moyenne Haute
définition définition définition Lisibilité Composants
(technologie)
(fond)
- Papier - Wiqruables - Prototype de
cli eframes développement Grille Navigation
- Balsamiq - Demo client HTML/CSS/DOM
(forme) (fonction)
ou FLASH
Flash ou autre
82. Specifications Production Production Specifications
Fonctionnelles graphique de contenus techniques
MANAGEMENT DE PRODUCTION
83. Specifications Production Production Specifications
Fonctionnelles graphique de contenus techniques
MANAGEMENT DE PRODUCTION
PRODUCTION
DES SHEMAS DE
STRUCTURE
(WIREFRAMES)
- a fairefier
STATUS - a modi
- validé
84. Specifications Production Production Specifications
Fonctionnelles graphique de contenus techniques
MANAGEMENT DE PRODUCTION
PRODUCTION
DES SHEMAS DE
STRUCTURE
(WIREFRAMES)
- a fairefier
STATUS - a modi
- validé
85. Specifications Production Production Specifications
Fonctionnelles graphique de contenus techniques
MANAGEMENT DE PRODUCTION
PRODUCTION GABARITS & OBJETS
DES SHEMAS DE Objectifs:
STRUCTURE
(WIREFRAMES)
- Ratimnalisle développement
o er les gabarits
- Opti iser
- a fairefier Modélisation Description des
STATUS - a modi de l’organisation composants
- validé des gabarits
86. Specifications Production Production Specifications
Fonctionnelles graphique de contenus techniques
MANAGEMENT DE PRODUCTION
PRODUCTION GABARITS & OBJETS
DES SHEMAS DE Objectifs:
STRUCTURE
(WIREFRAMES)
- Ratimnalisle développement
o er les gabarits
- Opti iser
- a fairefier Modélisation Description des
STATUS - a modi de l’organisation composants
- validé des gabarits
87. Specifications Production Production Specifications
Fonctionnelles graphique de contenus techniques
MANAGEMENT DE PRODUCTION
PRODUCTION GABARITS & OBJETS
DES SHEMAS DE Objectifs:
STRUCTURE
(WIREFRAMES)
- Ratimnalisle développement
o er les gabarits
- Opti iser
- a fairefier Modélisation Description des
STATUS - a modi de l’organisation composants
- validé des gabarits
88. Specifications Production Production Specifications
Fonctionnelles graphique de contenus techniques
architecte n
d’informatio
chef de ITÉRATION
projet designer
d’interface
MANAGEMENT DE PRODUCTION
PRODUCTION GABARITS & OBJETS
DES SHEMAS DE Objectifs:
STRUCTURE
(WIREFRAMES)
- Ratimnalisle développement
o er les gabarits
- Opti iser
- a fairefier Modélisation Description des
STATUS - a modi de l’organisation composants
- validé des gabarits
90. AGILITÉ DU PROCESSUS
Découverte Concept Organisation Design Production
Niveau d’engagement
Niveau d’engagement
Degrés de définition
Inspiré par UX Matters: http://tiny.cc/ux-process-source
91. AGILITÉ DU PROCESSUS
Découverte Concept Organisation Design Production
Niveau d’engagement
Niveau d’engagement
ITERATIONS
Degrés de définition
- Recherches - “Ideation” - Périmètre - Schémas de
structure
- Specifications
utilisateurs - Esquisses fonctionnel fonctionelles
- Personas - Management des - Flux logiques - Production graphique
- Modélisation de la contenus - Rédaction
- benchmark stratégie editoriale fonctionnelle - Production de
compétitif et et fonctionnelle - Structure de site contenus
fonctionnel - Réalisation de
prototype
Inspiré par UX Matters: http://tiny.cc/ux-process-source