SlideShare une entreprise Scribd logo
L’UX d’accord, mais que fait le storyboard ?
                           Par Ewane Prevotat-Deiller
                            FLUPA UX-Day 2012, Paris
1. Introduction


2. Analyse de la demande


3. Reformulation : qu’est ce que l’UX?


4. Cas concrets


5. Conclusions
Introduction




L’UX d’accord


               mais que fait le storyboard ?
2. Analyse de la demande
Développeurs


     C’est le déroulement de l’histoire pour une vidéo
     ou une application avec plus ou moins de détails
     en fonction de l’état d’avancement. A ne pas
     confondre avec des spécifications ou la créa.


     C’est à peu près comme dans le cinéma, ça sert à
     définir les enchainements et les actions possibles
     pour un site web.


     Ça sert à raconter une histoire et à définir les
     cinématiques d’écran.



      Cinéma tique
Chef de projet


      Ça sert simplement à représenter les
      proportions, le placement des objets dans la page
      de façon à avoir un truc harmonieux et pas oublier
      les choses


      C’est la représentation fonctionnelle des écrans et
      la scénarisation des enchainements.



      C’est ce qui permet de définir l’architecture de
      l’information er les procédés d’interaction d’un
      site internet


       Fonctionnalité            Interactions
SEO


      C’est la représentation illustrée de la mécanique
      de ton site internet. ça permet de connaitre la
      succession des différentes étapes



      C’est la première version. Ca permet de mettre à
      plat l’idée que tu souhaites développer en amont
      du design. Pour moi c’est du dessin le storyboard.


      C’est ce qui permet de définir l’architecture de
      l’information er les procédés d’interaction d’un
      site internet


       Illustration             Architecture
Design


     Déjà à identifier les différents types de pages à
     réaliser, à voir une vue de chaque page
     globalement. A définir les éléments dans chaque
     bloc sur différents niveaux d’information.


     Avoir tout le contenu, savoir comment il est
     placé, avoir les interactions entre les pages. C’est
     guider un peu la mise en page.


     C’est ce qui permet de définir l’architecture de
     l’information er les procédés d’interaction d’un
     site internet


   Contenus         Interactions            Zoning
Client




         C’est la pré-version non technique
         du site web avec les interactions et
         l’ergonomie.




                   Site internet
2. Analyse de la demande - Vu par
Header
                                 Logo, nom de la société + baseline
                                 Navigation principale
                                 Accès panier avec affichage détaillé
                                 au roll over




                            Push principal de la page. Misa à jour
                            hebdomadaire en fonction de l’actualité.
                            Retour d’expérience des acteurs.




                                                                          Bloc SEO à vocation de réassurance.
                                                                          Liste des acteurs et des partenaires.
                                                                          Accès à la fiche détaillée avec
                                                                          coordonnées et contact direct.




                                                                        Zone évènementielle
Une barre d’onglet pour fournir un                                      Service de sélection de date avec
accès direct aux offres spéciales                                       rafraichissement de la liste des évènements
organisées par profil                                                   associés. Partage, intégration au
                                                                        calendrier…
Le chef de projet
    Le chef de projet
Le développeur
   Développeur
Le consultant SEO
   SEO
Le designer
    Designer
Le client
    SEO
3. Reformulation L’UX




     L’UX vu par …
Don Norman en 1995




     I invented the term because I thought human   interface and usability were
     too narrow.
     (…) Cover allaspects of the person’s experience with the system including
     industrial design, graphics, the interface, the physical
     interaction, and the manual.
Don Norman en 2010




     The term has spread widely, so much so that   it is
     starting to lose it’s meaning…
Quelques définitions




http://www.allaboutux.org/ux-definitions
Une représentation




http://www.kickerstudio.com
Qui

                                 Directeur artistique
              UX designer
                                     Expert IHM
                 UI designer
    Experience designer
                       Chargé d’études UX
                  Web designer
                                                           Ergonome
         UX expert            Usability consultant
                                                           Designer
                            Interaction designer
                                      Directeur création
              Graphic designer
   Cognitive consultant Infographiste
                 Visual designer

            UX consultant
                                      Concept designer

http://vitamintalent.com/
Rappel




     L’objectif de l’ergonomie est l’adaptation des produits
     et des systèmes aux caractéristiques physiologiques
     et cognitives des utilisateurs (facteurs humains)
Rappel




     Par principe, la création   graphique n’a pas de
     principes, elle n’a que des aspirations : inventer, ou à
     défaut rendre visible, avec
     l’image, l’harmonie, l’essentiel d’un ensemble
     d’idées
4. Cas concrets : du story au design



                                       UN CRÉATIF
                                        DA, GRAPHISTE, DC, DESIGNE
                                        R, MOTION...




    UN ERGONOME
                ERGO, UX DESIGNER,
Types de storyboard


                           CDP                                   SEO
                           FONCTIONNEL                                         DÉTAILLÉ

                              Balsamiq

                                      Powerpoint                 Omnigraffle

                                                                 Justinmind
                                                   STORYBOARD
                                                                 Pidoco

                                                                 …

                                                      Axure
                                                              CLIENT                      Photoshop
                                            DEV
                                                                                          DESIGN
                                                   INTERACTIF




http://www.cennydd.co.uk/2012/why-i-dont-
wireframe-much/
4. Cas concret n 1
Le client et le storyboard

« C’est pas beau »
Le client et le design


« C’est pas ergonomique »
Analyse


 Le fond et la forme



 Expertise client
                        « j’ai un ipad »
4. Cas concret n 2
L’ergonome et le storyboard
Le designer et le storyboard
Analyse


 Manque d’inspiration



 Idées créatives versus propositions fonctionnelles
        « je n’y arrivais pas avec tes story »
4. Cas concret n 3
Le storyboard au quotidien


                              Difficulté à imaginer


                              « Ça fait pas fini »
                               « Beaucoup de texte »
4. Cas concret n 4
L’équipe UX et le concept
L’équipe UX et le storyboard
L’équipe UX et le design
Analyse


 Travail en amont du binôme Ergo Design



 Validation facilitée par l’intégration du concept créa dans les
  storyboards
5. Conclusions
Analyse du besoin



         Le but des storyboards
        Objectifs du storyboard  Quel storyboard
Analyse du besoin



               La méthodologie UX
 Connaissance Utilisateurs      Création               Technique




                                                       Développeur
            UX designer

                              Directeur artistique
    Ergonome
                                         Webdesigner
         UX consultant
                          …
Analyse du besoin



                La pédagogie

    Accompagnement        Client expert
Storyboard de la présentation
                                                                                                                             Recherche                 Chercher
         QUE FAIT LE STORYBOARD
         COMPANY BASELINE LOREM SIPUM DOLOR SIT AMET

            Utilisateurs        Objectifs      Outils      Ressources   Conclusions




 Tutorial                                                               Architecture de l'information                Champ lexical
 Ce storyboard illustre l'analyse et les conclusions qui viennent
 d'être présentées. Il s'agit du storyboard d'un storyboard. Ses
 enjeux, ses besoins, ses objectifs.                                                       Définitions de nos pairs
 Ce stroyboard n'a aucune prétention graphique mais supporte le         A quoi sert
 concept créatif final en terme de structure et d'organisation.          le storyboard      Vision de nos pairs
 En savoir plus

                                                                        Qu'est ce          Définitions

 Le client                            L'utilisateur                     que l'UX           Schéma

 ATELIER                              ANALYSE & TESTS

   •   Lorem ipsum dolor sit            •   Lorem ipsum dolor sit                           Définir les objectifs
       amet consectateur                    amet consectateur           Conclusion
                                            nonummy lorenzino.
                                                                                            Pédagogie
       nonummy lorenzino.
   •   Interdum volgus videt,           •   Interdum volgus videt,                          Binôme et plus
       est ubi peccat.                      est ubi peccat.




 Ressources                                   Objectifs                                                              Communication
 CLIENT                                        Architecture et                          Navigation et
                                                                                                                                       Combien de jours ?
 UTILISATEURS                                  hiérarchisation des                      cinématique                  Chef de projet
                                               informations                                                                    a dit
 ERGO DESIGN
                                                                                                                                       J'ai fini les recos
 DEV                                           Interactions                             Wording, contenus            Consultant SEO
                                                                                                                     a dit
 SEO                                                                                                                                   Mais je n'ai pas fait les story !
                                                                                                                      UX consultant
 CHEF DE PROJET                                                                                                       a dit
                                               Fonctionnalités,                         Démo
                                                                                                                                       Hum, tu pourras préciser le
 + TOUTES LES RESSOURCES                       spécifications                                                                           fonctionnement exact des
                                                                                                                      Développeur      blocs ? ça a l'air un peu
                                                                                                                      a dit            complexe
Merci

Contenu connexe

En vedette

FLUPA UX-Day 2012 : Atelier Eyetracking - Christian Bastien
FLUPA UX-Day 2012 : Atelier Eyetracking - Christian BastienFLUPA UX-Day 2012 : Atelier Eyetracking - Christian Bastien
FLUPA UX-Day 2012 : Atelier Eyetracking - Christian Bastien
Flupa
 
Ux design-jean-françois-marti
Ux design-jean-françois-martiUx design-jean-françois-marti
Ux design-jean-françois-marti
FrenchWeb.fr
 
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...
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
Carine Lallemand
 
Lean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork AxanceLean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork Axance
Alexandre Jubien
 
UX methode-paris web
UX methode-paris webUX methode-paris web
UX methode-paris web
Matthieu Mingasson
 
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Carine Lallemand
 
UX & SEO : one shot d'une nuit ou amour pour la vie ? - SEO campus nantes
UX & SEO : one shot d'une nuit ou amour pour la vie ? - SEO campus nantesUX & SEO : one shot d'une nuit ou amour pour la vie ? - SEO campus nantes
UX & SEO : one shot d'une nuit ou amour pour la vie ? - SEO campus nantes
Intuiti
 
FLUPA UX-Day 2012 - Luxe et e-commerce : quelle expérience utilisateur ? par ...
FLUPA UX-Day 2012 - Luxe et e-commerce : quelle expérience utilisateur ? par ...FLUPA UX-Day 2012 - Luxe et e-commerce : quelle expérience utilisateur ? par ...
FLUPA UX-Day 2012 - Luxe et e-commerce : quelle expérience utilisateur ? par ...
Flupa
 
UX, e-Commerce et Web Marketing (+ Chiffres e-Commerce et M-Commerce 2014)
UX, e-Commerce et Web Marketing (+ Chiffres e-Commerce et M-Commerce 2014)UX, e-Commerce et Web Marketing (+ Chiffres e-Commerce et M-Commerce 2014)
UX, e-Commerce et Web Marketing (+ Chiffres e-Commerce et M-Commerce 2014)
Frederic_Veidig
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
Audrey CHATEL
 
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéAgora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Guillaume Abel
 
Le management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en TLe management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en T
Guillaume Abel
 
Lean UX
Lean UX Lean UX
Lean UX
UX REPUBLIC
 
#ADBU2016 Qu'apportent les méthodes de Design UX par rapport aux méthodes tra...
#ADBU2016 Qu'apportent les méthodes de Design UX par rapport aux méthodes tra...#ADBU2016 Qu'apportent les méthodes de Design UX par rapport aux méthodes tra...
#ADBU2016 Qu'apportent les méthodes de Design UX par rapport aux méthodes tra...
ADBU
 
Formation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizonFormation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizon
HETIC
 

En vedette (16)

FLUPA UX-Day 2012 : Atelier Eyetracking - Christian Bastien
FLUPA UX-Day 2012 : Atelier Eyetracking - Christian BastienFLUPA UX-Day 2012 : Atelier Eyetracking - Christian Bastien
FLUPA UX-Day 2012 : Atelier Eyetracking - Christian Bastien
 
Ux design-jean-françois-marti
Ux design-jean-françois-martiUx design-jean-françois-marti
Ux design-jean-françois-marti
 
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...
BlendWebMix 2015 - UX Design : et si la clé du succès se trouvait dans les th...
 
Lean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork AxanceLean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork Axance
 
UX methode-paris web
UX methode-paris webUX methode-paris web
UX methode-paris web
 
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
Methodes de design UX : revolutionnez votre coffre à outils ! - Soiree TLMUX ...
 
UX & SEO : one shot d'une nuit ou amour pour la vie ? - SEO campus nantes
UX & SEO : one shot d'une nuit ou amour pour la vie ? - SEO campus nantesUX & SEO : one shot d'une nuit ou amour pour la vie ? - SEO campus nantes
UX & SEO : one shot d'une nuit ou amour pour la vie ? - SEO campus nantes
 
FLUPA UX-Day 2012 - Luxe et e-commerce : quelle expérience utilisateur ? par ...
FLUPA UX-Day 2012 - Luxe et e-commerce : quelle expérience utilisateur ? par ...FLUPA UX-Day 2012 - Luxe et e-commerce : quelle expérience utilisateur ? par ...
FLUPA UX-Day 2012 - Luxe et e-commerce : quelle expérience utilisateur ? par ...
 
UX, e-Commerce et Web Marketing (+ Chiffres e-Commerce et M-Commerce 2014)
UX, e-Commerce et Web Marketing (+ Chiffres e-Commerce et M-Commerce 2014)UX, e-Commerce et Web Marketing (+ Chiffres e-Commerce et M-Commerce 2014)
UX, e-Commerce et Web Marketing (+ Chiffres e-Commerce et M-Commerce 2014)
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
 
C’est quoi l’UX -
C’est quoi l’UX -C’est quoi l’UX -
C’est quoi l’UX -
 
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéAgora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
 
Le management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en TLe management d’une équipe UX par le profil en T
Le management d’une équipe UX par le profil en T
 
Lean UX
Lean UX Lean UX
Lean UX
 
#ADBU2016 Qu'apportent les méthodes de Design UX par rapport aux méthodes tra...
#ADBU2016 Qu'apportent les méthodes de Design UX par rapport aux méthodes tra...#ADBU2016 Qu'apportent les méthodes de Design UX par rapport aux méthodes tra...
#ADBU2016 Qu'apportent les méthodes de Design UX par rapport aux méthodes tra...
 
Formation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizonFormation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizon
 

Similaire à FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane Prevotat-Deiller

Metiers Design Numerique 2009
Metiers Design Numerique 2009Metiers Design Numerique 2009
Metiers Design Numerique 2009
designers interactifs
 
Présentation Métier / Responsable Webdesign
Présentation Métier / Responsable WebdesignPrésentation Métier / Responsable Webdesign
Présentation Métier / Responsable Webdesign
takaclike
 
Symposium uxdesign
Symposium uxdesignSymposium uxdesign
Symposium uxdesign
Versusmind
 
2012 folio brochure
2012 folio brochure2012 folio brochure
2012 folio brochure
Zélia Sakhi
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
Laurent Barbat
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016
Idean France
 
L'intervention de Damien Melich
L'intervention de Damien MelichL'intervention de Damien Melich
L'intervention de Damien Melich
Ludovic Dublanchet
 
AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !
Agile Toulouse
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UX
Newflux UX/UI News
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
Vincent Pereira
 
FLUPA à l'Agile Tour 2011
FLUPA à l'Agile Tour 2011FLUPA à l'Agile Tour 2011
FLUPA à l'Agile Tour 2011
Flupa
 
OnMap Visual Animation
OnMap Visual AnimationOnMap Visual Animation
OnMap Visual Animation
Nomia
 
Direction l'AgilUX - Agile Tour Paris 2011
Direction l'AgilUX - Agile Tour Paris 2011Direction l'AgilUX - Agile Tour Paris 2011
Direction l'AgilUX - Agile Tour Paris 2011
ENSIBS
 
Un aperçu du Petit dictionnaire du design numérique
Un aperçu du Petit dictionnaire du design numériqueUn aperçu du Petit dictionnaire du design numérique
Un aperçu du Petit dictionnaire du design numérique
designers interactifs
 
OnMap la solution saas de la business transformation
OnMap la solution saas de la business transformationOnMap la solution saas de la business transformation
OnMap la solution saas de la business transformation
Nomia
 
Designers, prenez le pouvoir !
Designers, prenez le pouvoir !Designers, prenez le pouvoir !
Designers, prenez le pouvoir !
David Koss
 
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Benoit Drouillat
 
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } Management
David Roessli
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
Microsoft Technet France
 

Similaire à FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane Prevotat-Deiller (20)

Metiers Design Numerique 2009
Metiers Design Numerique 2009Metiers Design Numerique 2009
Metiers Design Numerique 2009
 
Présentation Métier / Responsable Webdesign
Présentation Métier / Responsable WebdesignPrésentation Métier / Responsable Webdesign
Présentation Métier / Responsable Webdesign
 
Symposium uxdesign
Symposium uxdesignSymposium uxdesign
Symposium uxdesign
 
2012 folio brochure
2012 folio brochure2012 folio brochure
2012 folio brochure
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016
 
L'intervention de Damien Melich
L'intervention de Damien MelichL'intervention de Damien Melich
L'intervention de Damien Melich
 
AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UX
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
 
FLUPA à l'Agile Tour 2011
FLUPA à l'Agile Tour 2011FLUPA à l'Agile Tour 2011
FLUPA à l'Agile Tour 2011
 
OnMap Visual Animation
OnMap Visual AnimationOnMap Visual Animation
OnMap Visual Animation
 
Direction l'AgilUX - Agile Tour Paris 2011
Direction l'AgilUX - Agile Tour Paris 2011Direction l'AgilUX - Agile Tour Paris 2011
Direction l'AgilUX - Agile Tour Paris 2011
 
Un aperçu du Petit dictionnaire du design numérique
Un aperçu du Petit dictionnaire du design numériqueUn aperçu du Petit dictionnaire du design numérique
Un aperçu du Petit dictionnaire du design numérique
 
OnMap la solution saas de la business transformation
OnMap la solution saas de la business transformationOnMap la solution saas de la business transformation
OnMap la solution saas de la business transformation
 
Designers, prenez le pouvoir !
Designers, prenez le pouvoir !Designers, prenez le pouvoir !
Designers, prenez le pouvoir !
 
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...Guide des metiers du design interactif 2015 par Aquent et *designers interact...
Guide des metiers du design interactif 2015 par Aquent et *designers interact...
 
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } Management
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
 

Plus de Flupa

UX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
UX Days 2019 by Flupa - Conférence : Charlotte Breton SchreinerUX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
UX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
Flupa
 
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé GirardUX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
Flupa
 
UX Days 2019 by Flupa - Conférence : Patrick Maruejouls
UX Days 2019 by Flupa - Conférence : Patrick MaruejoulsUX Days 2019 by Flupa - Conférence : Patrick Maruejouls
UX Days 2019 by Flupa - Conférence : Patrick Maruejouls
Flupa
 
UX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline ThomasUX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline Thomas
Flupa
 
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid WolduUX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
Flupa
 
UX Days 2019 by Flupa - Conférence : Marc Stickdorn
UX Days 2019 by Flupa - Conférence : Marc StickdornUX Days 2019 by Flupa - Conférence : Marc Stickdorn
UX Days 2019 by Flupa - Conférence : Marc Stickdorn
Flupa
 
UX Days 2019 by Flupa - Conférence : Rowan Twine
UX Days 2019 by Flupa - Conférence : Rowan TwineUX Days 2019 by Flupa - Conférence : Rowan Twine
UX Days 2019 by Flupa - Conférence : Rowan Twine
Flupa
 
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
Flupa
 
UX Days 2019 by Flupa - Atelier : Nicolas Catherin
UX Days 2019 by Flupa - Atelier : Nicolas CatherinUX Days 2019 by Flupa - Atelier : Nicolas Catherin
UX Days 2019 by Flupa - Atelier : Nicolas Catherin
Flupa
 
UX Days 2019 by Flupa - Conférence : Morgane Peng
UX Days 2019 by Flupa - Conférence : Morgane PengUX Days 2019 by Flupa - Conférence : Morgane Peng
UX Days 2019 by Flupa - Conférence : Morgane Peng
Flupa
 
UX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
UX Days 2019 by Flupa - Conférence : Jean-Yves RigalUX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
UX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
Flupa
 
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
Flupa
 
UX Days 2019 by Flupa - Conférence : Aurélie Baton
UX Days 2019 by Flupa - Conférence : Aurélie BatonUX Days 2019 by Flupa - Conférence : Aurélie Baton
UX Days 2019 by Flupa - Conférence : Aurélie Baton
Flupa
 
UX Days 2019 by Flupa - Conférence : Alexia Buclet
UX Days 2019 by Flupa - Conférence : Alexia BucletUX Days 2019 by Flupa - Conférence : Alexia Buclet
UX Days 2019 by Flupa - Conférence : Alexia Buclet
Flupa
 
UX Days 2019 by Flupa - Conférence : Stéphane Maltor
UX Days 2019 by Flupa - Conférence : Stéphane MaltorUX Days 2019 by Flupa - Conférence : Stéphane Maltor
UX Days 2019 by Flupa - Conférence : Stéphane Maltor
Flupa
 
UX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
UX Days 2019 by Flupa - Conférence : Emmanuelle MarévéryUX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
UX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
Flupa
 
Flupa UX Days 2018 | Quentin Lefevre
Flupa UX Days 2018 | Quentin LefevreFlupa UX Days 2018 | Quentin Lefevre
Flupa UX Days 2018 | Quentin Lefevre
Flupa
 
Flupa UX Days 2018 | Nadège Bide
Flupa UX Days 2018 | Nadège BideFlupa UX Days 2018 | Nadège Bide
Flupa UX Days 2018 | Nadège Bide
Flupa
 
Flupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa UX Days 2018 | Jidé Tidjani-SerposFlupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa
 
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa
 

Plus de Flupa (20)

UX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
UX Days 2019 by Flupa - Conférence : Charlotte Breton SchreinerUX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
UX Days 2019 by Flupa - Conférence : Charlotte Breton Schreiner
 
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé GirardUX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
UX Days 2019 by Flupa - Conférence : Laure Constantinesco et Chloé Girard
 
UX Days 2019 by Flupa - Conférence : Patrick Maruejouls
UX Days 2019 by Flupa - Conférence : Patrick MaruejoulsUX Days 2019 by Flupa - Conférence : Patrick Maruejouls
UX Days 2019 by Flupa - Conférence : Patrick Maruejouls
 
UX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline ThomasUX Days 2019 by Flupa - Conférence : Pauline Thomas
UX Days 2019 by Flupa - Conférence : Pauline Thomas
 
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid WolduUX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu
 
UX Days 2019 by Flupa - Conférence : Marc Stickdorn
UX Days 2019 by Flupa - Conférence : Marc StickdornUX Days 2019 by Flupa - Conférence : Marc Stickdorn
UX Days 2019 by Flupa - Conférence : Marc Stickdorn
 
UX Days 2019 by Flupa - Conférence : Rowan Twine
UX Days 2019 by Flupa - Conférence : Rowan TwineUX Days 2019 by Flupa - Conférence : Rowan Twine
UX Days 2019 by Flupa - Conférence : Rowan Twine
 
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
UX Days 2019 by Flupa - Atelier : Silvan Cabot, Amel Taïbi et Julie Plemeniti...
 
UX Days 2019 by Flupa - Atelier : Nicolas Catherin
UX Days 2019 by Flupa - Atelier : Nicolas CatherinUX Days 2019 by Flupa - Atelier : Nicolas Catherin
UX Days 2019 by Flupa - Atelier : Nicolas Catherin
 
UX Days 2019 by Flupa - Conférence : Morgane Peng
UX Days 2019 by Flupa - Conférence : Morgane PengUX Days 2019 by Flupa - Conférence : Morgane Peng
UX Days 2019 by Flupa - Conférence : Morgane Peng
 
UX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
UX Days 2019 by Flupa - Conférence : Jean-Yves RigalUX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
UX Days 2019 by Flupa - Conférence : Jean-Yves Rigal
 
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
UX Days 2019 by Flupa - Atelier : Gwendoline Fradin, Marion Pillet et Elise M...
 
UX Days 2019 by Flupa - Conférence : Aurélie Baton
UX Days 2019 by Flupa - Conférence : Aurélie BatonUX Days 2019 by Flupa - Conférence : Aurélie Baton
UX Days 2019 by Flupa - Conférence : Aurélie Baton
 
UX Days 2019 by Flupa - Conférence : Alexia Buclet
UX Days 2019 by Flupa - Conférence : Alexia BucletUX Days 2019 by Flupa - Conférence : Alexia Buclet
UX Days 2019 by Flupa - Conférence : Alexia Buclet
 
UX Days 2019 by Flupa - Conférence : Stéphane Maltor
UX Days 2019 by Flupa - Conférence : Stéphane MaltorUX Days 2019 by Flupa - Conférence : Stéphane Maltor
UX Days 2019 by Flupa - Conférence : Stéphane Maltor
 
UX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
UX Days 2019 by Flupa - Conférence : Emmanuelle MarévéryUX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
UX Days 2019 by Flupa - Conférence : Emmanuelle Marévéry
 
Flupa UX Days 2018 | Quentin Lefevre
Flupa UX Days 2018 | Quentin LefevreFlupa UX Days 2018 | Quentin Lefevre
Flupa UX Days 2018 | Quentin Lefevre
 
Flupa UX Days 2018 | Nadège Bide
Flupa UX Days 2018 | Nadège BideFlupa UX Days 2018 | Nadège Bide
Flupa UX Days 2018 | Nadège Bide
 
Flupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa UX Days 2018 | Jidé Tidjani-SerposFlupa UX Days 2018 | Jidé Tidjani-Serpos
Flupa UX Days 2018 | Jidé Tidjani-Serpos
 
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
Flupa UX Days 2018 | Sara Wachter-Boettcher (EN)
 

FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane Prevotat-Deiller

  • 1. L’UX d’accord, mais que fait le storyboard ? Par Ewane Prevotat-Deiller FLUPA UX-Day 2012, Paris
  • 2. 1. Introduction 2. Analyse de la demande 3. Reformulation : qu’est ce que l’UX? 4. Cas concrets 5. Conclusions
  • 3. Introduction L’UX d’accord mais que fait le storyboard ?
  • 4. 2. Analyse de la demande
  • 5. Développeurs C’est le déroulement de l’histoire pour une vidéo ou une application avec plus ou moins de détails en fonction de l’état d’avancement. A ne pas confondre avec des spécifications ou la créa. C’est à peu près comme dans le cinéma, ça sert à définir les enchainements et les actions possibles pour un site web. Ça sert à raconter une histoire et à définir les cinématiques d’écran. Cinéma tique
  • 6. Chef de projet Ça sert simplement à représenter les proportions, le placement des objets dans la page de façon à avoir un truc harmonieux et pas oublier les choses C’est la représentation fonctionnelle des écrans et la scénarisation des enchainements. C’est ce qui permet de définir l’architecture de l’information er les procédés d’interaction d’un site internet Fonctionnalité Interactions
  • 7. SEO C’est la représentation illustrée de la mécanique de ton site internet. ça permet de connaitre la succession des différentes étapes C’est la première version. Ca permet de mettre à plat l’idée que tu souhaites développer en amont du design. Pour moi c’est du dessin le storyboard. C’est ce qui permet de définir l’architecture de l’information er les procédés d’interaction d’un site internet Illustration Architecture
  • 8. Design Déjà à identifier les différents types de pages à réaliser, à voir une vue de chaque page globalement. A définir les éléments dans chaque bloc sur différents niveaux d’information. Avoir tout le contenu, savoir comment il est placé, avoir les interactions entre les pages. C’est guider un peu la mise en page. C’est ce qui permet de définir l’architecture de l’information er les procédés d’interaction d’un site internet Contenus Interactions Zoning
  • 9. Client C’est la pré-version non technique du site web avec les interactions et l’ergonomie. Site internet
  • 10. 2. Analyse de la demande - Vu par
  • 11. Header Logo, nom de la société + baseline Navigation principale Accès panier avec affichage détaillé au roll over Push principal de la page. Misa à jour hebdomadaire en fonction de l’actualité. Retour d’expérience des acteurs. Bloc SEO à vocation de réassurance. Liste des acteurs et des partenaires. Accès à la fiche détaillée avec coordonnées et contact direct. Zone évènementielle Une barre d’onglet pour fournir un Service de sélection de date avec accès direct aux offres spéciales rafraichissement de la liste des évènements organisées par profil associés. Partage, intégration au calendrier…
  • 12. Le chef de projet Le chef de projet
  • 13. Le développeur Développeur
  • 15. Le designer Designer
  • 16. Le client SEO
  • 17. 3. Reformulation L’UX L’UX vu par …
  • 18. Don Norman en 1995 I invented the term because I thought human interface and usability were too narrow. (…) Cover allaspects of the person’s experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual.
  • 19. Don Norman en 2010 The term has spread widely, so much so that it is starting to lose it’s meaning…
  • 22. Qui Directeur artistique UX designer Expert IHM UI designer Experience designer Chargé d’études UX Web designer Ergonome UX expert Usability consultant Designer Interaction designer Directeur création Graphic designer Cognitive consultant Infographiste Visual designer UX consultant Concept designer http://vitamintalent.com/
  • 23. Rappel L’objectif de l’ergonomie est l’adaptation des produits et des systèmes aux caractéristiques physiologiques et cognitives des utilisateurs (facteurs humains)
  • 24. Rappel Par principe, la création graphique n’a pas de principes, elle n’a que des aspirations : inventer, ou à défaut rendre visible, avec l’image, l’harmonie, l’essentiel d’un ensemble d’idées
  • 25. 4. Cas concrets : du story au design UN CRÉATIF DA, GRAPHISTE, DC, DESIGNE R, MOTION... UN ERGONOME ERGO, UX DESIGNER,
  • 26. Types de storyboard CDP SEO FONCTIONNEL DÉTAILLÉ Balsamiq Powerpoint Omnigraffle Justinmind STORYBOARD Pidoco … Axure CLIENT Photoshop DEV DESIGN INTERACTIF http://www.cennydd.co.uk/2012/why-i-dont- wireframe-much/
  • 28. Le client et le storyboard « C’est pas beau »
  • 29. Le client et le design « C’est pas ergonomique »
  • 30. Analyse  Le fond et la forme  Expertise client « j’ai un ipad »
  • 32. L’ergonome et le storyboard
  • 33. Le designer et le storyboard
  • 34. Analyse  Manque d’inspiration  Idées créatives versus propositions fonctionnelles « je n’y arrivais pas avec tes story »
  • 36. Le storyboard au quotidien  Difficulté à imaginer « Ça fait pas fini » « Beaucoup de texte »
  • 38. L’équipe UX et le concept
  • 39. L’équipe UX et le storyboard
  • 40. L’équipe UX et le design
  • 41. Analyse  Travail en amont du binôme Ergo Design  Validation facilitée par l’intégration du concept créa dans les storyboards
  • 43. Analyse du besoin Le but des storyboards Objectifs du storyboard  Quel storyboard
  • 44. Analyse du besoin La méthodologie UX Connaissance Utilisateurs Création Technique Développeur UX designer Directeur artistique Ergonome Webdesigner UX consultant …
  • 45. Analyse du besoin La pédagogie Accompagnement Client expert
  • 46. Storyboard de la présentation Recherche Chercher QUE FAIT LE STORYBOARD COMPANY BASELINE LOREM SIPUM DOLOR SIT AMET Utilisateurs Objectifs Outils Ressources Conclusions Tutorial Architecture de l'information Champ lexical Ce storyboard illustre l'analyse et les conclusions qui viennent d'être présentées. Il s'agit du storyboard d'un storyboard. Ses enjeux, ses besoins, ses objectifs. Définitions de nos pairs Ce stroyboard n'a aucune prétention graphique mais supporte le A quoi sert concept créatif final en terme de structure et d'organisation. le storyboard Vision de nos pairs En savoir plus Qu'est ce Définitions Le client L'utilisateur que l'UX Schéma ATELIER ANALYSE & TESTS • Lorem ipsum dolor sit • Lorem ipsum dolor sit Définir les objectifs amet consectateur amet consectateur Conclusion nonummy lorenzino. Pédagogie nonummy lorenzino. • Interdum volgus videt, • Interdum volgus videt, Binôme et plus est ubi peccat. est ubi peccat. Ressources Objectifs Communication CLIENT Architecture et Navigation et Combien de jours ? UTILISATEURS hiérarchisation des cinématique Chef de projet informations a dit ERGO DESIGN J'ai fini les recos DEV Interactions Wording, contenus Consultant SEO a dit SEO Mais je n'ai pas fait les story ! UX consultant CHEF DE PROJET a dit Fonctionnalités, Démo Hum, tu pourras préciser le + TOUTES LES RESSOURCES spécifications fonctionnement exact des Développeur blocs ? ça a l'air un peu a dit complexe
  • 47. Merci