Successfully reported this slideshow.

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

3

Share

1 of 47
1 of 47

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

3

Share

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)

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)

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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. Introduction 2. Analyse de la demande 3. Reformulation : qu’est ce que l’UX? 4. Cas concrets 5. Conclusions
  3. 3. Introduction L’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è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. 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éfinitions http://www.allaboutux.org/ux-definitions
  21. 21. Une représentation http://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 designer http://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 INTERACTIF http://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 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. 47. Merci

×