UX methode-paris web

Matthieu Mingasson
Matthieu MingassonCreative Director for Experience Design
*
     CONCEVOIR POUR
L’EXPERIENCE UTILISATEUR
      RÉVISION POUR TOUS
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/
Design

Contenu     UX/IA       Business


          Technologie
Design
                    Forme

Contenu   Fond                Objectif   Business

                   Fonction
                 Technologie
Design
                    Forme

Contenu   Fond                Objectif   Business

                   Fonction
                 Technologie
5 NIVEAUX
1.   DECOUVERTE
2.   CONCEPT
3.   ORGANISATION
4.   DESIGN
5.   MANAGEMENT DE PRODUCTION
*1
DECOUVERTE
Recherches
      Utilisateurs
  - Sources: metrics, analyses...
  - Recherches: ethnographie...
Quantitatif
 +      Qualitatif                  DÉCOUVERTE
Recherches
      Utilisateurs
  - Sources: metrics, analyses...
  - Recherches: ethnographie...
Quantitatif
 +      Qualitatif                  DÉCOUVERTE
Recherches
      Utilisateurs
  - Sources: metrics, analyses...
  - Recherches: ethnographie...
Quantitatif
 +      Qualitatif                  DÉCOUVERTE
                                          Audit
                     - Sources: contenus, experience       Business
                                                           analyst
                     - Besoins: audit, demande...
                     - Equipe: capacité, organisation...
Recherches                                           Modèles Utilisateurs
      Utilisateurs                                           - Segments: marché
                                                             - Personas: comportements
  - Sources: metrics, analyses...                            - Scénario d’usage: outil conceptuel
  - Recherches: ethnographie...
Quantitatif
 +      Qualitatif                  DÉCOUVERTE
                                          Audit
                     - Sources: contenus, experience          Business
                                                              analyst
                     - Besoins: audit, demande...
                     - Equipe: capacité, organisation...
Recherches                                           Modèles Utilisateurs
      Utilisateurs                                           - Segments: marché
                                                             - Personas: comportements
  - Sources: metrics, analyses...                            - Scénario d’usage: outil conceptuel
  - Recherches: ethnographie...
Quantitatif
 +      Qualitatif                  DÉCOUVERTE
                                          Audit
                     - Sources: contenus, experience          Business
                                                              analyst
                     - Besoins: audit, demande...
                     - Equipe: capacité, organisation...
Recherches                                           Modèles Utilisateurs
      Utilisateurs                                           - Segments: marché
                                                             - Personas: comportements
  - Sources: metrics, analyses...                            - Scénario d’usage: outil conceptuel
  - Recherches: ethnographie...
Quantitatif
 +      Qualitatif                  DÉCOUVERTE
                                          Audit
                     - Sources: contenus, experience          Business
                                                              analyst
                     - Besoins: audit, demande...
                     - Equipe: capacité, organisation...
Recherches                                           Modèles Utilisateurs
      Utilisateurs                                           - Segments: marché
                                                             - Personas: comportements
  - Sources: metrics, analyses...                            - Scénario d’usage: outil conceptuel
  - Recherches: ethnographie...
Quantitatif
 +      Qualitatif                  DÉCOUVERTE
                                                                             Benchmark
                                                                              - Collecte, capture,
                                          Audit                                    veille appliquée
                     - Sources: contenus, experience          Business
                                                              analyst
                     - Besoins: audit, demande...
                     - Equipe: capacité, organisation...
Recherches                                           Modèles Utilisateurs
      Utilisateurs                                           - Segments: marché
                                                             - Personas: comportements
  - Sources: metrics, analyses...                            - Scénario d’usage: outil conceptuel
  - Recherches: ethnographie...
Quantitatif
 +      Qualitatif                  DÉCOUVERTE
                                                                             Benchmark
                                                                              - Collecte, capture,
                                          Audit                                    veille appliquée
                     - Sources: contenus, experience          Business
                                                              analyst
                     - Besoins: audit, demande...
                     - Equipe: capacité, organisation...
Recherches                                           Modèles Utilisateurs
      Utilisateurs                                           - Segments: marché
                                                             - Personas: comportements
  - Sources: metrics, analyses...                            - Scénario d’usage: outil conceptuel
  - Recherches: ethnographie...
Quantitatif
 +      Qualitatif                  DÉCOUVERTE
                                                                             Benchmark
                                                                              - Collecte, capture,
                                          Audit                                    veille appliquée
                     - Sources: contenus, experience          Business
                                                              analyst
                     - Besoins: audit, demande...
                     - Equipe: capacité, organisation...
Recherches                                           Modèles Utilisateurs
      Utilisateurs                                           - Segments: marché
                                                             - Personas: comportements
  - Sources: metrics, analyses...                            - Scénario d’usage: outil conceptuel
  - Recherches: ethnographie...
Quantitatif                                                                   GRILLE DE
                                                                              SYNTHÈSE
 +      Qualitatif                  DÉCOUVERTE
                                                                             Benchmark
                                                                              - Collecte, capture,
                                          Audit                                    veille appliquée
                     - Sources: contenus, experience          Business
                                                              analyst
                     - Besoins: audit, demande...
                     - Equipe: capacité, organisation...
Recherches                                           Modèles Utilisateurs
      Utilisateurs                                           - Segments: marché
                                                             - Personas: comportements
  - Sources: metrics, analyses...                            - Scénario d’usage: outil conceptuel
  - Recherches: ethnographie...
Quantitatif                                                                   GRILLE DE
                                                                              SYNTHÈSE
 +      Qualitatif                  DÉCOUVERTE
                                                                             Benchmark
                                                                              - Collecte, capture,
                                          Audit                                    veille appliquée
                     - Sources: contenus, experience          Business
                                                              analyst
                     - Besoins: audit, demande...
                     - Equipe: capacité, organisation...
Recherches                                           Modèles Utilisateurs
      Utilisateurs                                           - Segments: marché
                                                             - Personas: comportements
  - Sources: metrics, analyses...                            - Scénario d’usage: outil conceptuel
  - Recherches: ethnographie...
Quantitatif                                                                   GRILLE DE
                                                                              SYNTHÈSE
 +      Qualitatif                  DÉCOUVERTE
                                                                             Benchmark
                                                                              - Collecte, capture,
                                          Audit                                    veille appliquée
                     - Sources: contenus, experience          Business
                                                              analyst
                     - Besoins: audit, demande...
                     - Equipe: capacité, organisation...
*
  2
CONCEPT
“IdeatioD’IDÉES
      GENERATION
                 n”
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
- Storyquoi la page d’accueil (par persona)
- C’estner la boite
- Desig
- ...                              CONCEPT
“IdeatioD’IDÉES
      GENERATION
                 n”
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
- Storyquoi la page d’accueil (par persona)
- C’estner la boite
- Desig
- ...                               CONCEPT


                         source: http://www.learninglab.jumpassociates.com/?p=113
“IdeatioD’IDÉES
      GENERATION
                 n”
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
- Storyquoi la page d’accueil (par persona)
- C’estner la boite
- Desig
- ...                              CONCEPT


                                          source: adaptive path
“IdeatioD’IDÉES
      GENERATION
                 n”
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
- Storyquoi la page d’accueil (par persona)
- C’estner la boite
- Desig
- ...                              CONCEPT


                      source: http://weizhou.wordpress.com/2008/07/07/prototype/
“IdeatioD’IDÉES
      GENERATION
                 n”
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
- Storyquoi la page d’accueil (par persona)
- C’estner la boite
- Desig
- ...                              CONCEPT
“IdeatioD’IDÉES
      GENERATION
                 n”
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
- Storyquoi la page d’accueil (par persona)
- C’estner la boite
- Desig
- ...                              CONCEPT
“IdeatioD’IDÉES
                 n”
      GENERATION
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
                                              Modélisation
- Storyquoi la page d’accueil (par persona)
- C’estner la boite
- Desig
- ...                              CONCEPT
Stratégie
      “IdeatioD’IDÉES
                 n”                                  d’ensemble
      GENERATION
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
                                              Modélisation
- Storyquoi la page d’accueil (par persona)   Stratégie des      Stratégie
- C’estner la boite
- Desig                                       contenus           Fonctionnelle
- ...                              CONCEPT          + modèles hybrides
Stratégie
      “IdeatioD’IDÉES
                 n”                                  d’ensemble
      GENERATION
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
                                              Modélisation
- Storyquoi la page d’accueil (par persona)   Stratégie des      Stratégie
- C’estner la boite
- Desig                                       contenus           Fonctionnelle
- ...                              CONCEPT          + modèles hybrides
Stratégie
      “IdeatioD’IDÉES
                 n”                                  d’ensemble
      GENERATION
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
                                              Modélisation
- Storyquoi la page d’accueil (par persona)   Stratégie des      Stratégie
- C’estner la boite
- Desig                                       contenus           Fonctionnelle
- ...                              CONCEPT          + modèles hybrides
Stratégie
      “IdeatioD’IDÉES
                 n”                                  d’ensemble
      GENERATION
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
                                              Modélisation
- Storyquoi la page d’accueil (par persona)   Stratégie des      Stratégie
- C’estner la boite
- Desig                                       contenus           Fonctionnelle
- ...                              CONCEPT          + modèles hybrides
Stratégie
      “IdeatioD’IDÉES
                 n”                                  d’ensemble
      GENERATION
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
                                              Modélisation
- Storyquoi la page d’accueil (par persona)   Stratégie des      Stratégie
- C’estner la boite
- Desig                                       contenus           Fonctionnelle
- ...                              CONCEPT          + modèles hybrides
Stratégie
      “IdeatioD’IDÉES
                 n”                                  d’ensemble
      GENERATION
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
                                              Modélisation
- Storyquoi la page d’accueil (par persona)   Stratégie des      Stratégie
- C’estner la boite
- Desig                                       contenus           Fonctionnelle
- ...                              CONCEPT          + modèles hybrides
Stratégie
      “IdeatioD’IDÉES
                 n”                                  d’ensemble
      GENERATION
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
                                              Modélisation
- Storyquoi la page d’accueil (par persona)   Stratégie des      Stratégie
- C’estner la boite
- Desig                                       contenus           Fonctionnelle
- ...                              CONCEPT          + modèles hybrides
Stratégie
      “IdeatioD’IDÉES
                 n”                                  d’ensemble
      GENERATION
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
                                              Modélisation
- Storyquoi la page d’accueil (par persona)   Stratégie des      Stratégie
- C’estner la boite
- Desig                                       contenus           Fonctionnelle
- ...                              CONCEPT          + modèles hybrides
Stratégie
      “IdeatioD’IDÉES
                 n”                                                     d’ensemble
      GENERATION
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
                                                               Modélisation
- Storyquoi la page d’accueil (par persona)                   Stratégie des      Stratégie
- C’estner la boite
- Desig                                                       contenus           Fonctionnelle
- ...                              CONCEPT                          + modèles hybrides



                                               Visualisation
                                       Principes:
                                     - Construirerapidementd’ensemble
                                                  une vision
                                     - Visualiser
                                                                 Méthode:    CROQUIS
Stratégie
     “IdeatioD’IDÉES
                n”                                                     d’ensemble
     GENERATION
   Principes:
- générer pasplusmauvaisespossible
             le d’idées
                                                               Modélisation
- iparticipaants: de trop, ni trop peu
   l n’y                      idées                              Stratégie des       Stratégie
- prendre toutnien note                                          contenus            Fonctionnelle
-
   Méthode:                       CONCEPT                              + modèles hybrides
- Usages/Objectifs Business
- avant-pendant-après l (pour mon persona)
- c’estner lalaboite d’accuei
         quoi page
- desig ons
- questi
- ...                                        Visualisation
                                         Principes:
                                       - Construirerapidementd’ensemble
                                                    une vision
                                       - Visualiser
                                                                    Méthode: CROQUIS
                                                                               + schémas....
Stratégie
     “IdeatioD’IDÉES
                n”                                                     d’ensemble
     GENERATION
   Principes:
- générer pasplusmauvaisespossible
             le d’idées
                                                               Modélisation
- iparticipaants: de trop, ni trop peu
   l n’y                      idées                              Stratégie des       Stratégie
- prendre toutnien note                                          contenus            Fonctionnelle
-
   Méthode:                       CONCEPT                              + modèles hybrides
- Usages/Objectifs Business
- avant-pendant-après l (pour mon persona)
- c’estner lalaboite d’accuei
         quoi page
- desig ons
- questi
- ...                                        Visualisation
                                         Principes:
                                       - Construirerapidementd’ensemble
                                                    une vision
                                       - Visualiser
                                                                    Méthode: CROQUIS
                                                                               + schémas....
Stratégie
     “IdeatioD’IDÉES
                n”                                                     d’ensemble
     GENERATION
   Principes:
- générer pasplusmauvaisespossible
             le d’idées
                                                               Modélisation
- iparticipaants: de trop, ni trop peu
   l n’y                      idées                              Stratégie des       Stratégie
- prendre toutnien note                                          contenus            Fonctionnelle
-
   Méthode:                       CONCEPT                              + modèles hybrides
- Usages/Objectifs Business
- avant-pendant-après l (pour mon persona)
- c’estner lalaboite d’accuei
         quoi page
- desig ons
- questi
- ...                                        Visualisation
                                         Principes:
                                       - Construirerapidementd’ensemble
                                                    une vision
                                       - Visualiser
                                                                    Méthode: CROQUIS
                                                                               + schémas....
Stratégie
      “IdeatioD’IDÉES
                 n”                                                     d’ensemble
      GENERATION
- Diviser par questi/ons ence
- Scénaritelling / boarding
          o d’usage d’expéri
                                                               Modélisation
- Storyquoi la page d’accueil (par persona)                   Stratégie des      Stratégie
- C’estner la boite
- Desig                                                       contenus           Fonctionnelle
- ...                              CONCEPT                          + modèles hybrides



                                               Visualisation
                                       Principes:
                                     - Construirerapidementd’ensemble
                                                  une vision
                                     - Visualiser
                                                                 Méthode:    CROQUIS
*3
ORGANISATION
Périmoètre
foncti nnel
Definition des fonctions,
des formats, des principes
d’interaction...

                             ORGANISATION
Périmoètre
foncti nnel
Definition des fonctions,
des formats, des principes
d’interaction...

                             ORGANISATION
Périmoètre
foncti nnel
Definition des fonctions,
des formats, des principes
d’interaction...

                             ORGANISATION
Périmoètre
foncti nnel
Definition des fonctions,
des formats, des principes
d’interaction...

                             ORGANISATION
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
Périmoètre
foncti nnel
Definition des fonctions,
                                       Management des
                                         Contenus
des formats, des principes
d’interaction...
                                                        Tableau
                                            Matrice des de page
                             ORGANISATION   contenus
Périmoètre
foncti nnel
Definition des fonctions,
                                       Management des
                                         Contenus
des formats, des principes
d’interaction...
                                                        Tableau
                                            Matrice des de page
                             ORGANISATION   contenus
Périmoètre
foncti nnel
Definition des fonctions,
                                       Management des
                                         Contenus
des formats, des principes
d’interaction...
                                                        Tableau
                                            Matrice des de page
                             ORGANISATION   contenus
Périmoètre
foncti nnel
Definition des fonctions,
                                       Management des
                                         Contenus
des formats, des principes
d’interaction...
                                                        Tableau
                                            Matrice des de page
                             ORGANISATION   contenus
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
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
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
*
  4
DESIGN
Desiognnel
     foncti   n
Shémas de      Flux
structure`     logiques
(wireframes)              DESIGN
Desiognnel
     foncti   n
Shémas de      Flux
structure`     logiques
(wireframes)              DESIGN
Desiognnel
     foncti   n
Shémas de      Flux
structure`     logiques
(wireframes)              DESIGN
Desiognnel
     foncti   n
Shémas de      Flux
structure`     logiques
(wireframes)              DESIGN
Desiognnel
     foncti   n                    d   Design on
                                    ,interacti
Shémas de      Flux                              Charte
                                   Comportements d’interaction
structure`     logiques
(wireframes)              DESIGN   des objets
Desiognnel
     foncti   n                    d   Design on
                                    ,interacti
Shémas de      Flux                              Charte
                                   Comportements d’interaction
structure`     logiques
(wireframes)              DESIGN   des objets
Desiognnel
     foncti   n                    d   Design on
                                    ,interacti
Shémas de      Flux                              Charte
                                   Comportements d’interaction
structure`     logiques
(wireframes)              DESIGN   des objets
Desiognnel
     foncti   n                    d   Design on
                                    ,interacti
Shémas de      Flux                              Charte
                                   Comportements d’interaction
structure`     logiques
(wireframes)              DESIGN   des objets
Desiognnel
     foncti   n                    d   Design on
                                    ,interacti
Shémas de      Flux                              Charte
                                   Comportements d’interaction
structure`     logiques
(wireframes)              DESIGN   des objets
Desiognnel
     foncti   n                    d   Design on
                                    ,interacti
Shémas de      Flux                              Charte
                                   Comportements d’interaction
structure`     logiques
(wireframes)              DESIGN   des objets
Desiognnel
     foncti   n                    d   Design on
                                    ,interacti
Shémas de      Flux                              Charte
                                   Comportements d’interaction
structure`     logiques
(wireframes)              DESIGN   des objets


          Prototype
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
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
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
Desiognnel
     foncti   n                    d   Design on
                                    ,interacti
Shémas de      Flux                              Charte
                                   Comportements d’interaction
structure`     logiques
(wireframes)              DESIGN   des objets


          Prototype
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
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
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
Desiognnel
     foncti   n                    d   Design on
                                    ,interacti
Shémas de      Flux                              Charte
                                   Comportements d’interaction
structure`     logiques
(wireframes)              DESIGN   des objets


          Prototype
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
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
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
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
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
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
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
*
     5
MANAGEMENT DE
  PRODUCTION
Specifications   Production    Production Specifications
Fonctionnelles     graphique   de contenus techniques




       MANAGEMENT DE PRODUCTION
Specifications      Production    Production Specifications
  Fonctionnelles        graphique   de contenus techniques




          MANAGEMENT DE PRODUCTION
 PRODUCTION
DES SHEMAS DE
 STRUCTURE
      (WIREFRAMES)
       - a fairefier
STATUS - a modi
       - validé
Specifications      Production    Production Specifications
  Fonctionnelles        graphique   de contenus techniques




          MANAGEMENT DE PRODUCTION
 PRODUCTION
DES SHEMAS DE
 STRUCTURE
      (WIREFRAMES)
       - a fairefier
STATUS - a modi
       - validé
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
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
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
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
*
Conclusion
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
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
*
Discutons sur..
@activeside #parisweb
linkedin.com/in/mingasson
slideshare.net/activeside
design.activeside.net
1 of 92

Recommended

5 phases du Design pour l'Experience Utilisateur by
5 phases du Design pour l'Experience Utilisateur5 phases du Design pour l'Experience Utilisateur
5 phases du Design pour l'Experience UtilisateurMatthieu Mingasson
7.7K views62 slides
Flupa 2010 Personas Eric Brangier by
Flupa 2010 Personas Eric BrangierFlupa 2010 Personas Eric Brangier
Flupa 2010 Personas Eric BrangierFlupa
1.6K views23 slides
Persona grata by
Persona grata Persona grata
Persona grata Eric Brangier
1.7K views45 slides
UX Design - Soutenance 2016 Marie Glandus by
UX Design - Soutenance 2016 Marie GlandusUX Design - Soutenance 2016 Marie Glandus
UX Design - Soutenance 2016 Marie GlandusMarie Glandus
3.3K views42 slides
3. Recherche utilisateur by
3. Recherche utilisateur3. Recherche utilisateur
3. Recherche utilisateurLaurent Barbat
371 views76 slides

More Related Content

What's hot

Améliorer le Design pour améliorer l'UX by
Améliorer le Design pour améliorer l'UXAméliorer le Design pour améliorer l'UX
Améliorer le Design pour améliorer l'UXL_Demontiers
1.7K views59 slides
Workshop UX Design - FLUPA UX-Day 2013 by
Workshop UX Design - FLUPA UX-Day 2013Workshop UX Design - FLUPA UX-Day 2013
Workshop UX Design - FLUPA UX-Day 2013Carine Lallemand
4.2K views37 slides
Strategie editoriale web_persona by
Strategie editoriale web_personaStrategie editoriale web_persona
Strategie editoriale web_personaescale-web.com
4.7K views12 slides
4. Atelier : Exploration > Synthèse by
4. Atelier : Exploration > Synthèse4. Atelier : Exploration > Synthèse
4. Atelier : Exploration > SynthèseLaurent Barbat
203 views50 slides
WAQ16 - Atelier design émotionnel - Carine Lallemand by
WAQ16 - Atelier design émotionnel - Carine LallemandWAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine LallemandCarine Lallemand
43K views53 slides
UX Mobile - Experience Utilisateur Mobile by
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileAudrey CHATEL
14.4K views61 slides

What's hot(19)

Améliorer le Design pour améliorer l'UX by L_Demontiers
Améliorer le Design pour améliorer l'UXAméliorer le Design pour améliorer l'UX
Améliorer le Design pour améliorer l'UX
L_Demontiers1.7K views
Workshop UX Design - FLUPA UX-Day 2013 by Carine Lallemand
Workshop UX Design - FLUPA UX-Day 2013Workshop UX Design - FLUPA UX-Day 2013
Workshop UX Design - FLUPA UX-Day 2013
Carine Lallemand4.2K views
Strategie editoriale web_persona by escale-web.com
Strategie editoriale web_personaStrategie editoriale web_persona
Strategie editoriale web_persona
escale-web.com4.7K views
4. Atelier : Exploration > Synthèse by Laurent Barbat
4. Atelier : Exploration > Synthèse4. Atelier : Exploration > Synthèse
4. Atelier : Exploration > Synthèse
Laurent Barbat203 views
WAQ16 - Atelier design émotionnel - Carine Lallemand by Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine LallemandWAQ16 - Atelier design émotionnel - Carine Lallemand
WAQ16 - Atelier design émotionnel - Carine Lallemand
Carine Lallemand43K views
UX Mobile - Experience Utilisateur Mobile by Audrey CHATEL
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
Audrey CHATEL14.4K views
7. Du Design UX au Design de la collaboration by Laurent Barbat
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration
Laurent Barbat695 views
Design de service - le parcours utilisateur by Eva Villebrun
Design de service - le parcours utilisateurDesign de service - le parcours utilisateur
Design de service - le parcours utilisateur
Eva Villebrun93.6K views
1. Introduction à l'Expérience utilisateur by Laurent Barbat
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
Laurent Barbat1.5K views
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th... by Carine Lallemand
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
Carine Lallemand13.5K views
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand by Carine Lallemand
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine LallemandBlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
BlendWebMix 2017 - Guérilla UX, "quick" mais pas "dirty" - Carine Lallemand
Carine Lallemand34.6K views
A2006 1-903261.commentpreparersonfocusgroup by damhhhy
A2006 1-903261.commentpreparersonfocusgroupA2006 1-903261.commentpreparersonfocusgroup
A2006 1-903261.commentpreparersonfocusgroup
damhhhy53.2K views
Ux design-jean-françois-marti by FrenchWeb.fr
Ux design-jean-françois-martiUx design-jean-françois-marti
Ux design-jean-françois-marti
FrenchWeb.fr7.7K views
Paris Web 2015 Atelier "Evaluer l'UX : des méthodes simples mais efficaces !" by Carine Lallemand
Paris Web 2015 Atelier "Evaluer l'UX : des méthodes simples mais efficaces !"Paris Web 2015 Atelier "Evaluer l'UX : des méthodes simples mais efficaces !"
Paris Web 2015 Atelier "Evaluer l'UX : des méthodes simples mais efficaces !"
Carine Lallemand13.6K views
Flupa Orléans 2016 - Eurêka ! Innover avec les méthodes d'idéation UX by Carine Lallemand
Flupa Orléans 2016 - Eurêka ! Innover avec les méthodes d'idéation UXFlupa Orléans 2016 - Eurêka ! Innover avec les méthodes d'idéation UX
Flupa Orléans 2016 - Eurêka ! Innover avec les méthodes d'idéation UX
Carine Lallemand3.4K views
Introduction au design de service - Design Innovation-Azimut 060314 by Anne-Sophie Prévost
Introduction au design de service - Design Innovation-Azimut 060314Introduction au design de service - Design Innovation-Azimut 060314
Introduction au design de service - Design Innovation-Azimut 060314
Anne-Sophie Prévost11.2K views
Design Thinking & UX/UI by Évolt
Design Thinking & UX/UIDesign Thinking & UX/UI
Design Thinking & UX/UI
Évolt8.1K views
Design de services by wedo studios
Design de servicesDesign de services
Design de services
wedo studios19.4K views
UX Design : Concevoir des expériences positives et engageantes - Carine Lalle... by Carine Lallemand
UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...
UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...
Carine Lallemand5.7K views

Similar to UX methode-paris web

Méthodologie D’Intelligence D’Affaires by
Méthodologie D’Intelligence D’AffairesMéthodologie D’Intelligence D’Affaires
Méthodologie D’Intelligence D’AffairesAlain Charpentier
2.4K views16 slides
PB VEILLE CONSULTING by
PB VEILLE CONSULTINGPB VEILLE CONSULTING
PB VEILLE CONSULTINGPBVC007
1.4K views16 slides
Altics - Benchmark by
Altics - BenchmarkAltics - Benchmark
Altics - BenchmarkALTICS
722 views5 slides
Marketing Evénementiel Sportif - Electif Master ESC - séance 2 by
Marketing Evénementiel Sportif - Electif Master ESC - séance 2Marketing Evénementiel Sportif - Electif Master ESC - séance 2
Marketing Evénementiel Sportif - Electif Master ESC - séance 2Guillaume LAURIE
1.2K views74 slides
Offre Search by
Offre SearchOffre Search
Offre SearchSmile I.T is open
2.9K views30 slides
#Fiche Produit : Diagnostic & Feuille de Route (Big) Data Marketing ! by
#Fiche Produit : Diagnostic & Feuille de Route (Big) Data Marketing !#Fiche Produit : Diagnostic & Feuille de Route (Big) Data Marketing !
#Fiche Produit : Diagnostic & Feuille de Route (Big) Data Marketing !Camp de Bases (Webedia Data Services)
1.7K views2 slides

Similar to UX methode-paris web(20)

Méthodologie D’Intelligence D’Affaires by Alain Charpentier
Méthodologie D’Intelligence D’AffairesMéthodologie D’Intelligence D’Affaires
Méthodologie D’Intelligence D’Affaires
Alain Charpentier2.4K views
PB VEILLE CONSULTING by PBVC007
PB VEILLE CONSULTINGPB VEILLE CONSULTING
PB VEILLE CONSULTING
PBVC0071.4K views
Altics - Benchmark by ALTICS
Altics - BenchmarkAltics - Benchmark
Altics - Benchmark
ALTICS722 views
Marketing Evénementiel Sportif - Electif Master ESC - séance 2 by Guillaume LAURIE
Marketing Evénementiel Sportif - Electif Master ESC - séance 2Marketing Evénementiel Sportif - Electif Master ESC - séance 2
Marketing Evénementiel Sportif - Electif Master ESC - séance 2
Guillaume LAURIE1.2K views
Portails d'information by SKennel
Portails d'informationPortails d'information
Portails d'information
SKennel966 views
L’évolution du métier de veilleur by Camille A
L’évolution du métier de veilleur L’évolution du métier de veilleur
L’évolution du métier de veilleur
Camille A5.4K views
analyse de la valeur-.pdf by JabirArif
analyse de la valeur-.pdfanalyse de la valeur-.pdf
analyse de la valeur-.pdf
JabirArif12 views
[FR] Solutions et Applications Spotter 2013 by Celine Molina
[FR] Solutions et Applications Spotter 2013[FR] Solutions et Applications Spotter 2013
[FR] Solutions et Applications Spotter 2013
Celine Molina1.3K views
[FR] Présentation Corporate Spotter 2013 by Celine Molina
[FR] Présentation Corporate Spotter 2013[FR] Présentation Corporate Spotter 2013
[FR] Présentation Corporate Spotter 2013
Celine Molina873 views
Cm6.03 part2 veille_technologique_chunsi_ing by idigroupe6
Cm6.03 part2 veille_technologique_chunsi_ingCm6.03 part2 veille_technologique_chunsi_ing
Cm6.03 part2 veille_technologique_chunsi_ing
idigroupe6367 views
Ergonomie des IHM web - Notes de cours (3/3) by ElodieDescharmes
Ergonomie des IHM web - Notes de cours (3/3)Ergonomie des IHM web - Notes de cours (3/3)
Ergonomie des IHM web - Notes de cours (3/3)
ElodieDescharmes124 views
Techniques documentaires et veille stratégique by apajard
Techniques documentaires et veille stratégiqueTechniques documentaires et veille stratégique
Techniques documentaires et veille stratégique
apajard3.7K views
MesInfos : la révolution des données personnelles partagées by Fing
MesInfos : la révolution des données personnelles partagéesMesInfos : la révolution des données personnelles partagées
MesInfos : la révolution des données personnelles partagées
Fing740 views
Se Documenter3 by apajard
Se Documenter3Se Documenter3
Se Documenter3
apajard1K views
FLUPA à l'Agile Tour 2011 by Flupa
FLUPA à l'Agile Tour 2011FLUPA à l'Agile Tour 2011
FLUPA à l'Agile Tour 2011
Flupa1.1K views
Les entreprises innovantes issues de la recherche publique processus, acteurs... by Ilyas Azzioui
Les entreprises innovantes issues de la recherche publique processus, acteurs...Les entreprises innovantes issues de la recherche publique processus, acteurs...
Les entreprises innovantes issues de la recherche publique processus, acteurs...
Ilyas Azzioui1.6K views

UX methode-paris web

  • 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/
  • 3. Design Contenu UX/IA Business Technologie
  • 4. Design Forme Contenu Fond Objectif Business Fonction Technologie
  • 5. Design Forme Contenu Fond Objectif Business Fonction Technologie
  • 6. 5 NIVEAUX 1. DECOUVERTE 2. CONCEPT 3. ORGANISATION 4. DESIGN 5. MANAGEMENT DE PRODUCTION
  • 8. Recherches Utilisateurs - Sources: metrics, analyses... - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE
  • 9. Recherches Utilisateurs - Sources: metrics, analyses... - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE
  • 10. Recherches Utilisateurs - Sources: metrics, analyses... - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE Audit - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...
  • 11. Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE Audit - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...
  • 12. Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE Audit - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...
  • 13. Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE Audit - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...
  • 14. Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE Benchmark - Collecte, capture, Audit veille appliquée - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...
  • 15. Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE Benchmark - Collecte, capture, Audit veille appliquée - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...
  • 16. Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE Benchmark - Collecte, capture, Audit veille appliquée - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...
  • 17. Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif GRILLE DE SYNTHÈSE + Qualitatif DÉCOUVERTE Benchmark - Collecte, capture, Audit veille appliquée - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...
  • 18. Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif GRILLE DE SYNTHÈSE + Qualitatif DÉCOUVERTE Benchmark - Collecte, capture, Audit veille appliquée - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...
  • 19. Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif GRILLE DE SYNTHÈSE + Qualitatif DÉCOUVERTE Benchmark - Collecte, capture, Audit veille appliquée - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...
  • 21. “IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT
  • 22. “IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT source: http://www.learninglab.jumpassociates.com/?p=113
  • 23. “IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT source: adaptive path
  • 24. “IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT source: http://weizhou.wordpress.com/2008/07/07/prototype/
  • 25. “IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT
  • 26. “IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT
  • 27. “IdeatioD’IDÉES n” GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT
  • 28. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides
  • 29. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides
  • 30. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides
  • 31. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides
  • 32. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides
  • 33. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides
  • 34. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides
  • 35. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides
  • 36. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides Visualisation Principes: - Construirerapidementd’ensemble une vision - Visualiser Méthode: CROQUIS
  • 37. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION Principes: - générer pasplusmauvaisespossible le d’idées Modélisation - iparticipaants: de trop, ni trop peu l n’y idées Stratégie des Stratégie - prendre toutnien note contenus Fonctionnelle - Méthode: CONCEPT + modèles hybrides - Usages/Objectifs Business - avant-pendant-après l (pour mon persona) - c’estner lalaboite d’accuei quoi page - desig ons - questi - ... Visualisation Principes: - Construirerapidementd’ensemble une vision - Visualiser Méthode: CROQUIS + schémas....
  • 38. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION Principes: - générer pasplusmauvaisespossible le d’idées Modélisation - iparticipaants: de trop, ni trop peu l n’y idées Stratégie des Stratégie - prendre toutnien note contenus Fonctionnelle - Méthode: CONCEPT + modèles hybrides - Usages/Objectifs Business - avant-pendant-après l (pour mon persona) - c’estner lalaboite d’accuei quoi page - desig ons - questi - ... Visualisation Principes: - Construirerapidementd’ensemble une vision - Visualiser Méthode: CROQUIS + schémas....
  • 39. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION Principes: - générer pasplusmauvaisespossible le d’idées Modélisation - iparticipaants: de trop, ni trop peu l n’y idées Stratégie des Stratégie - prendre toutnien note contenus Fonctionnelle - Méthode: CONCEPT + modèles hybrides - Usages/Objectifs Business - avant-pendant-après l (pour mon persona) - c’estner lalaboite d’accuei quoi page - desig ons - questi - ... Visualisation Principes: - Construirerapidementd’ensemble une vision - Visualiser Méthode: CROQUIS + schémas....
  • 40. Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides Visualisation Principes: - Construirerapidementd’ensemble une vision - Visualiser Méthode: CROQUIS
  • 42. Périmoètre foncti nnel Definition des fonctions, des formats, des principes d’interaction... ORGANISATION
  • 43. Périmoètre foncti nnel Definition des fonctions, des formats, des principes d’interaction... ORGANISATION
  • 44. Périmoètre foncti nnel Definition des fonctions, des formats, des principes d’interaction... ORGANISATION
  • 45. Périmoètre foncti nnel Definition des fonctions, des formats, des principes d’interaction... ORGANISATION
  • 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
  • 81. * 5 MANAGEMENT DE PRODUCTION
  • 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