L’UX d’accord, mais que fait le storyboard ?                           Par Ewane Prevotat-Deiller                         ...
1. Introduction2. Analyse de la demande3. Reformulation : qu’est ce que l’UX?4. Cas concrets5. Conclusions
IntroductionL’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   ...
Chef de projet      Ça sert simplement à représenter les      proportions, le placement des objets dans la page      de fa...
SEO      C’est la représentation illustrée de la mécanique      de ton site internet. ça permet de connaitre la      succe...
Design     Déjà à identifier les différents types de pages à     réaliser, à voir une vue de chaque page     globalement. ...
Client         C’est la pré-version non technique         du site web avec les interactions et         l’ergonomie.       ...
2. Analyse de la demande - Vu par
Header                                 Logo, nom de la société + baseline                                 Navigation princ...
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.     (…) ...
Don Norman en 2010     The term has spread widely, so much so that   it is     starting to lose it’s meaning…
Quelques définitionshttp://www.allaboutux.org/ux-definitions
Une représentationhttp://www.kickerstudio.com
Qui                                 Directeur artistique              UX designer                                     Expe...
Rappel     L’objectif de l’ergonomie est l’adaptation des produits     et des systèmes aux caractéristiques physiologiques...
Rappel     Par principe, la création   graphique n’a pas de     principes, elle n’a que des aspirations : inventer, ou à  ...
4. Cas concrets : du story au design                                       UN CRÉATIF                                     ...
Types de storyboard                           CDP                                   SEO                           FONCTION...
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 st...
4. Cas concret n 3
Le storyboard au quotidien                              Difficulté à imaginer                              « Ça fait pas ...
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  storyboa...
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        ...
Analyse du besoin                La pédagogie    Accompagnement        Client expert
Storyboard de la présentation                                                                                             ...
Merci
Prochain SlideShare
Chargement dans…5
×

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

1 911 vues

Publié le

Conférence présentée lors du FLUPA UX-Day 2012 à Paris : L’UX, d’accord, mais que fait le storyboard ? par Ewane Prevotat-Deiller (Valtech)

Publié dans : Technologie
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 911
Sur SlideShare
0
Issues des intégrations
0
Intégrations
13
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. L’UX d’accord, mais que fait le storyboard ? Par Ewane Prevotat-Deiller FLUPA UX-Day 2012, Paris
  2. 2. 1. Introduction2. Analyse de la demande3. Reformulation : qu’est ce que l’UX?4. Cas concrets5. Conclusions
  3. 3. IntroductionL’UX d’accord mais que fait le storyboard ?
  4. 4. 2. Analyse de la demande
  5. 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. 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. 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. 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. 9. Client C’est la pré-version non technique du site web avec les interactions et l’ergonomie. Site internet
  10. 10. 2. Analyse de la demande - Vu par
  11. 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ènementielleUne barre d’onglet pour fournir un Service de sélection de date avecaccès direct aux offres spéciales rafraichissement de la liste des évènementsorganisées par profil associés. Partage, intégration au calendrier…
  12. 12. Le chef de projet Le chef de projet
  13. 13. Le développeur Développeur
  14. 14. Le consultant SEO SEO
  15. 15. Le designer Designer
  16. 16. Le client SEO
  17. 17. 3. Reformulation L’UX L’UX vu par …
  18. 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. 19. Don Norman en 2010 The term has spread widely, so much so that it is starting to lose it’s meaning…
  20. 20. Quelques définitionshttp://www.allaboutux.org/ux-definitions
  21. 21. Une représentationhttp://www.kickerstudio.com
  22. 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 designerhttp://vitamintalent.com/
  23. 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. 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. 25. 4. Cas concrets : du story au design UN CRÉATIF DA, GRAPHISTE, DC, DESIGNE R, MOTION... UN ERGONOME ERGO, UX DESIGNER,
  26. 26. Types de storyboard CDP SEO FONCTIONNEL DÉTAILLÉ Balsamiq Powerpoint Omnigraffle Justinmind STORYBOARD Pidoco … Axure CLIENT Photoshop DEV DESIGN INTERACTIFhttp://www.cennydd.co.uk/2012/why-i-dont-wireframe-much/
  27. 27. 4. Cas concret n 1
  28. 28. Le client et le storyboard« C’est pas beau »
  29. 29. Le client et le design« C’est pas ergonomique »
  30. 30. Analyse Le fond et la forme Expertise client « j’ai un ipad »
  31. 31. 4. Cas concret n 2
  32. 32. L’ergonome et le storyboard
  33. 33. Le designer et le storyboard
  34. 34. Analyse Manque d’inspiration Idées créatives versus propositions fonctionnelles « je n’y arrivais pas avec tes story »
  35. 35. 4. Cas concret n 3
  36. 36. Le storyboard au quotidien  Difficulté à imaginer « Ça fait pas fini » « Beaucoup de texte »
  37. 37. 4. Cas concret n 4
  38. 38. L’équipe UX et le concept
  39. 39. L’équipe UX et le storyboard
  40. 40. L’équipe UX et le design
  41. 41. Analyse Travail en amont du binôme Ergo Design Validation facilitée par l’intégration du concept créa dans les storyboards
  42. 42. 5. Conclusions
  43. 43. Analyse du besoin Le but des storyboards Objectifs du storyboard  Quel storyboard
  44. 44. Analyse du besoin La méthodologie UX Connaissance Utilisateurs Création Technique Développeur UX designer Directeur artistique Ergonome Webdesigner UX consultant …
  45. 45. Analyse du besoin La pédagogie Accompagnement Client expert
  46. 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 linformation Champ lexical Ce storyboard illustre lanalyse et les conclusions qui viennent dêtre présentées. Il sagit du storyboard dun storyboard. Ses enjeux, ses besoins, ses objectifs. Définitions de nos pairs Ce stroyboard na aucune prétention graphique mais supporte le A quoi sert concept créatif final en terme de structure et dorganisation. le storyboard Vision de nos pairs En savoir plus Quest ce Définitions Le client Lutilisateur que lUX 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 Jai fini les recos DEV Interactions Wording, contenus Consultant SEO a dit SEO Mais je nai 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 lair un peu a dit complexe
  47. 47. Merci

×