Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Conférence PIA au MS TechDays 2011 : "Réussir des applications attractives grâce au prototypage et à Blend Sketchflow"

2,619 views

Published on

PIA a présenté avec Arnaud Weil, une démarche outillée pour moderniser les applications métier, réduire leur time-to-market et faciliter leur adoption par les utilisateurs.
L'accent a été mis sur l'importance de la collaboration entre expert métier, ergonome, designer et développeur.

Published in: Technology

Conférence PIA au MS TechDays 2011 : "Réussir des applications attractives grâce au prototypage et à Blend Sketchflow"

  1. 1. Réussir des applicationsattractives grâce auprototypage et à Sketchflow10 février 2011Emmanuel Levi-Valensi. Directeur Associé PIAPhilippe Chaurand. Ingénieur IHM PIAYoan Maman. Designer PIAArnaud Weil. Expert Silverlight Freelance 2
  2. 2. PIA, cabinet de conseil en ergonomie, design et développement agile.
  3. 3. Spécialiste de l’expérience utilisateur au service des applications métiers
  4. 4. Une société agile, impliquée et concernée 2006 Soutien de l’OSEO pour le financement d’innovations 2009 2010 Financement Agrément de PEA avec CIR Zebunet Pionnier des RIA2004 pour les applications d’entreprise Ouverture Adhésion au 2008 2009 PIA Toulouse Comité Partenaire 2010 Développement Richelieu fondateur à distance de l’institut2004 2011 Adhésion PIA adhère designers Lauréat 2007 2009 à l’AFDEL interactifs Fast50 France 2010 Fast500 EMEA PIA soutient 2005 2009 Statut JEI le Pacte PME
  5. 5. Ergonomie & Design d’IHM_ Cas d’utilisation, persona, maquettage, prototypage,shadowing, tests,...Expertise technique_ Architecture, benchmarking, qualité, audit,développement de composants,...Développement « sur mesure »_ Réalisation d’applications métiers et webCoaching agile_ Conseil et coaching pour le développement agile
  6. 6. Nos principales référencesFranceInternationalPartenaires
  7. 7. Arnaud WeilExpert Silverlight & .NET freelance Formation aux développeurs et graphistes Conseil, Audit, ArchitectureProchaine formation Silverlight 4en mars http://aweil.fr/inter.aspx
  8. 8. Réussir des applications attractivesgrâce au prototypage et à Sketchflow 9
  9. 9. Les nouveaux usages gagnent l’entreprise
  10. 10. Un contraste fort | Rupture dans l’Expérience Utilisateur (UX) Manque de simplicité et d’attractivité
  11. 11. Méthodologie PIAConstruire la simplicité et l’attractivité
  12. 12. Méthodologie PIAConstruire la simplicité et l’attractivité
  13. 13. Méthodologie PIA | Construire la simplicité et l’attractivité T AN AV
  14. 14. Méthodologie PIA | Construire la simplicité et l’attractivité S RE AP
  15. 15. Design visuel
  16. 16. Design visuelAnalyse des besoins
  17. 17. Design visuel Analyse des besoins Comprendre les usages, les utilisateurs, le contexte Outils : persona, cas d’utilisation, shadowing, focus group, interviews,...Analyse des besoins
  18. 18. Design visuel Local Operation ChampionLogin Architecture de l’information Home Data Collection Data Collect oriented Wizard Analysis Edit profile local Architecture Operation ChampionLogin Home Review data Dashboard Data Collect monitoring Analysis de l’information Edit profile global Elaborer la structure de l’application Administration countries, users, static dataLogin Administrator Administration, Users tab Edit user Administration, Countries Edit country tab Administration, Zones tab Administration, Systems Edit system tab Outils : card sorting, cas d’utilisation, zoning, Modal Sceen Kinematic window prototypage,... Analyse des besoins
  19. 19. Design visuel Design des interfaces Design des interfaces Concevoir les IHM, l’émotionnel en moins Local Operation Champion Outils : prototype papier, maquette simple, prototype interactif, tests utilisateur...Login Home Data Collection Data Collect oriented Wizard Analysis Edit profile local Architecture Operation ChampionLogin Home Review data Dashboard Data Collect monitoring Analysis de l’information Edit profile global Administration countries, users, static dataLogin Administrator Administration, Users tab Edit user Administration, Countries Edit country tab Administration, Zones tab Administration, Systems Edit system tab Modal Sceen Kinematic window Analyse des besoins
  20. 20. Design visuel Design visuel Rendre attractive l’application Outils : persona, planches de tendances, charte chromatique, prototype haute fidélité,... Design des interfaces Local Operation ChampionLogin Home Data Collection Data Collect oriented Wizard Analysis Edit profile local Architecture Operation ChampionLogin Home Review data Dashboard Data Collect monitoring Analysis de l’information Edit profile global Administration countries, users, static dataLogin Administrator Administration, Users tab Edit user Administration, Countries Edit country tab Administration, Zones tab Administration, Systems Edit system tab Modal Sceen Kinematic window Analyse des besoins
  21. 21. Mise en oeuvre sur un cas pratiqueAnalyse des Design des Design visuel Coding besoins interfaces
  22. 22. Mise en oeuvre sur un cas pratiqueAnalyse des Design des Design visuel Coding besoins interfaces
  23. 23. Mise en oeuvre sur un cas pratiqueAnalyse des Design des Design visuel Coding besoins interfaces
  24. 24. Mise en oeuvre sur un cas pratiqueAnalyse des Design des Design visuel Coding besoins interfaces
  25. 25. Mise en oeuvre sur un cas pratiqueAnalyse des Design des Design visuel Coding besoins interfaces
  26. 26. Analyse Design d’interfaces Design visuel Développement Analyse
  27. 27. Analyse Design d’interfaces Design visuel Développement Cas pratique | Le besoin - Un groupe hôtelier souhaite améliorer la qualité dans ses établissements répartis dans toute la France. - Chaque manager d’hôtel pourra remonter des propositions d’action d’amélioration. - Le Responsable de la Qualité Groupe se chargera de consolider l’ensemble des propositions.25
  28. 28. Analyse Design d’interfaces Design visuel DéveloppementCas pratique | Le besoin Hôtel Hôtel Fiches d’amélioration Hôtel Hôtel26
  29. 29. Analyse Design d’interfaces Design visuel Développement Exemples de fiches d’améliorations - Nombreux incidents sur les téléviseurs - Manque de réactivité sur la réparation de la clim’ - Problèmes avec les relations fournisseurs pour le transport des clients (navette, taxi)27
  30. 30. Analyse Design d’interfaces Design visuel Développement Une formalisation qui va à l’essentiel28
  31. 31. Analyse Design d’interfaces Design visuel Développement Design d’interfaces Philippe Chaurand, ingénieur IHM PIA PIA @anomes 29
  32. 32. Analyse Design d’interfaces Design visuel DéveloppementMonter à bord Ma vision Les directeurs d’hôtel envoient des actions d’amélioration Le responsable qualité les formalise puis les pilote Le responsable qualité veut mesurer l’e cacité 30
  33. 33. Analyse Design d’interfaces Design visuel DéveloppementUne réunion de co-designC’est quoi ?Pourquoi ?Avec qui ? 31
  34. 34. Analyse Design d’interfaces Design visuel DéveloppementUne réunion de co-designC’est quoi ?Pourquoi ?Avec qui ? 31
  35. 35. Analyse Design d’interfaces Design visuel DéveloppementUne réunion de co-designC’est quoi ?Pourquoi ?Avec qui ? 31
  36. 36. Analyse Design d’interfaces Design visuel DéveloppementUne réunion de co-designC’est quoi ?Pourquoi ?Avec qui ? 31
  37. 37. Analyse Design d’interfaces Design visuel Développement réunion de co-design je consolide l’interface 32
  38. 38. Analyse Design d’interfaces Design visuel DéveloppementArchitecture de l’informationCinématiquesZonings 33
  39. 39. Analyse Design d’interfaces Design visuel DéveloppementArchitecture de l’informationCinématiquesZoningsPatterns 33
  40. 40. Analyse Design d’interfaces Design visuel DéveloppementDes prototypes papier 34
  41. 41. Analyse Design d’interfaces Design visuel DéveloppementDes prototypes papier 34
  42. 42. Analyse Design d’interfaces Design visuel DéveloppementEt ainsi de suite ... réunion de co-design Ut ilité je consolide l’interface bilité til isa U 35
  43. 43. Analyse Design d’interfaces Design visuel DéveloppementPrototype papier nal 36
  44. 44. Analyse Design d’interfaces Design visuel DéveloppementPrototype papier nal 36
  45. 45. Analyse Design d’interfaces Design visuel Développement prototyper, c’est donner une vision du futur produit ... et partager cette vision ! 37
  46. 46. Analyse Design d’interfaces Design visuel DéveloppementPeut-on aller plus loin ?Un prototype plus nUn prototype plus immersifUn prototype plus interactifFormaliser le prototype 38
  47. 47. Analyse Design d’interfaces Design visuel DéveloppementWhat’s next ? Linterface est utile (elle répond au besoin) L’interface est utilisable (c’est simple et intuitif ) Elle est dans un format collaboratif (Sketch ow)Mais …- Est-elle lisible sans fatigue visuelle ?- Est-elle en accord avec mes valeurs ?- Est-elle attractive ? 39
  48. 48. Analyse Design d’interfaces Design Visuel Développement Réussir des applications attractives grâce au prototypage et à Sketchflow Yoan MAMAN Designer Intéractif PIA • People in action @yoanmaman40
  49. 49. Analyse Design d’interfaces Design Visuel Développement41
  50. 50. Analyse Design d’interfaces Design Visuel Développement Fonctionnel41
  51. 51. Analyse Design d’interfaces Design Visuel Développement Quʼapporte le Design Visuel ?42
  52. 52. Analyse Design d’interfaces Design Visuel DéveloppementLa reconnaissance des valeurs43
  53. 53. Analyse Design d’interfaces Design Visuel DéveloppementLʼenvie et le désir44
  54. 54. Analyse Design d’interfaces Design Visuel DéveloppementLe confort dʼutilisation45
  55. 55. Analyse Design d’interfaces Design Visuel DéveloppementQuʼapporte le Design Visuel ? La reconnaissance des valeurs Lʼenvie et le désir Le confort dʼutilisation46
  56. 56. Analyse Design d’interfaces Design Visuel DéveloppementEsthétique intelligente 5 . Prototype haute-fidélité 4 . Charte chromatique 3 . Etude des contrastes 2 . Planches de tendances 1 . Valeurs / Etude cible47
  57. 57. Analyse Design d’interfaces Design Visuel DéveloppementEsthétique intelligente 1 . Valeurs / Etude cible48
  58. 58. Analyse Design d’interfaces Design Visuel DéveloppementEsthétique intelligente 2 . Planches de tendances49
  59. 59. Analyse Design d’interfaces Design Visuel DéveloppementEsthétique intelligente 3 . Etude des contrastes50
  60. 60. Analyse Design d’interfaces Design Visuel DéveloppementEsthétique intelligente 4 . Charte chromatique51
  61. 61. Analyse Design d’interfaces Design Visuel DéveloppementEsthétique intelligente 5 . Prototype haute-fidélité52
  62. 62. Analyse Design d’interfaces Design Visuel Développement Récupération directe par lʼéquipe de développement53
  63. 63. Le travail dudéveloppeurArnaud Weil 1
  64. 64. Scénario 1Je  reçois  la  maquette Je  recode  la  maquette  dans   mon  environnement Temps  perdu PAS DE VACANCES 2
  65. 65. Scénario 2Pas  de  maquette Je  deviens  responsable  de   problèmes  qui  ne  sont  pas  les  miens BOUC EMISSAIRE 3
  66. 66. Ce que je fais ne se voit pas On  me  juge   sur  ça Apparence Ergonomie Ce  que  je   fais Algorithmes Web services Logique métier Tests unitaires 4
  67. 67. Solution Processus Collaboration outillée Passage transparent de Blend à Visual Studio XAML Designer DataBinding Ergonome Développeur XAML 5
  68. 68. DémoAjout de logique métier: validation 6
  69. 69. Ergonomie et apparence Flexibilité: templates Graphiste et développeurs parlent (enfin) le même langage Exemple: http://sltemplates.codeplex.com 7
  70. 70. Analyse Design d’interfaces Design visuel Développement Conclusion
  71. 71. Analyse Design d’interfaces Design visuel DéveloppementPrototyper c’est...Générer des idées Montrer Se faire comprendre Economiser du temps, Réduire les risques en se de l’énergie et de l’argent confrontant aux utilisateurs
  72. 72. Analyse Design d’interfaces Design visuel Développement Mais surtout pour réussir une application attractive...
  73. 73. Analyse Design d’interfaces Design visuel Développement La clé du succès est dans la collaboration entreExpert métier Ergonome Designer Développeur
  74. 74. Merci ! Philippe Chaurand Ingénieur IHM pch@piaction.comPlus d’informations sur PIA Emmanuel Levi-Valensiwww.piaction.com Directeur Associéwww.blog.piaction.com elv@piaction.com Yoan Maman Designer yma@piaction.comFormations avec Arnaud Weil Arnaud Weilwww.aweil.fr Expert développement Silverlight contact@aweil.fr

×