Réussir des applicationsattractives grâce auprototypage et à Sketchflow10 février 2011Emmanuel Levi-Valensi. Directeur Asso...
PIA, cabinet de conseil en  ergonomie, design et  développement agile.
Spécialiste de l’expérience utilisateur              au service      des applications métiers
Une société agile, impliquée et concernée                               2006                                      Soutien ...
Ergonomie & Design d’IHM_ Cas d’utilisation, persona, maquettage, prototypage,shadowing, tests,...Expertise technique_ Arc...
Nos principales référencesFranceInternationalPartenaires
Arnaud WeilExpert Silverlight & .NET freelance  Formation aux développeurs et graphistes  Conseil, Audit, ArchitectureProc...
Réussir des applications attractivesgrâce au prototypage et à Sketchflow                9
Les nouveaux usages gagnent l’entreprise
Un contraste fort | Rupture dans l’Expérience Utilisateur (UX)          Manque de simplicité et d’attractivité
Méthodologie PIAConstruire la simplicité et l’attractivité
Méthodologie PIAConstruire la simplicité et l’attractivité
Méthodologie PIA | Construire la simplicité et l’attractivité                                                            T...
Méthodologie PIA | Construire la simplicité et l’attractivité                                                            S...
Design visuel
Design visuelAnalyse des  besoins
Design visuel                Analyse des besoins                Comprendre les usages, les utilisateurs, le               ...
Design visuel                                         Local Operation ChampionLogin                                       ...
Design visuel                                                                                             Design des inter...
Design visuel                                                                           Design visuel                     ...
Mise en oeuvre sur un cas pratiqueAnalyse des   Design des   Design visuel   Coding  besoins     interfaces
Mise en oeuvre sur un cas pratiqueAnalyse des   Design des   Design visuel   Coding  besoins     interfaces
Mise en oeuvre sur un cas pratiqueAnalyse des   Design des   Design visuel   Coding  besoins     interfaces
Mise en oeuvre sur un cas pratiqueAnalyse des   Design des   Design visuel   Coding  besoins     interfaces
Mise en oeuvre sur un cas pratiqueAnalyse des   Design des   Design visuel   Coding  besoins     interfaces
Analyse   Design d’interfaces   Design visuel   Développement                          Analyse
Analyse   Design d’interfaces   Design visuel   Développement Cas pratique | Le besoin     - Un groupe hôtelier souhaite a...
Analyse     Design d’interfaces   Design visuel   DéveloppementCas pratique | Le besoin                                   ...
Analyse   Design d’interfaces   Design visuel   Développement Exemples de fiches d’améliorations     - Nombreux incidents s...
Analyse   Design d’interfaces   Design visuel   Développement Une formalisation qui va à l’essentiel28
Analyse   Design d’interfaces   Design visuel   Développement                  Design d’interfaces                        ...
Analyse   Design d’interfaces   Design visuel   DéveloppementMonter à bord           Ma vision           Les directeurs d’...
Analyse   Design d’interfaces   Design visuel   DéveloppementUne réunion de co-designC’est quoi ?Pourquoi ?Avec qui ?     ...
Analyse   Design d’interfaces   Design visuel   DéveloppementUne réunion de co-designC’est quoi ?Pourquoi ?Avec qui ?     ...
Analyse   Design d’interfaces   Design visuel   DéveloppementUne réunion de co-designC’est quoi ?Pourquoi ?Avec qui ?     ...
Analyse   Design d’interfaces   Design visuel   DéveloppementUne réunion de co-designC’est quoi ?Pourquoi ?Avec qui ?     ...
Analyse   Design d’interfaces   Design visuel   Développement                                    réunion de co-design     ...
Analyse   Design d’interfaces   Design visuel   DéveloppementArchitecture de l’informationCinématiquesZonings             ...
Analyse   Design d’interfaces   Design visuel   DéveloppementArchitecture de l’informationCinématiquesZoningsPatterns     ...
Analyse   Design d’interfaces   Design visuel   DéveloppementDes prototypes papier                                        ...
Analyse   Design d’interfaces   Design visuel   DéveloppementDes prototypes papier                                        ...
Analyse   Design d’interfaces   Design visuel   DéveloppementEt ainsi de suite ...                                    réun...
Analyse   Design d’interfaces   Design visuel   DéveloppementPrototype papier nal                                         ...
Analyse   Design d’interfaces   Design visuel   DéveloppementPrototype papier nal                                         ...
Analyse   Design d’interfaces   Design visuel   Développement                     prototyper, c’est donner une            ...
Analyse   Design d’interfaces   Design visuel   DéveloppementPeut-on aller plus loin ?Un prototype plus nUn prototype plus...
Analyse     Design d’interfaces   Design visuel   DéveloppementWhat’s next ?          Linterface est utile (elle répond au...
Analyse     Design d’interfaces   Design Visuel   Développement Réussir des applications attractives grâce au prototypage ...
Analyse   Design d’interfaces   Design Visuel   Développement41
Analyse   Design d’interfaces   Design Visuel   Développement                                Fonctionnel41
Analyse    Design d’interfaces   Design Visuel   Développement               Quʼapporte le Design Visuel ?42
Analyse   Design d’interfaces   Design Visuel   DéveloppementLa reconnaissance des valeurs43
Analyse   Design d’interfaces   Design Visuel   DéveloppementLʼenvie et le désir44
Analyse   Design d’interfaces   Design Visuel   DéveloppementLe confort dʼutilisation45
Analyse   Design d’interfaces   Design Visuel   DéveloppementQuʼapporte le Design Visuel ?               La reconnaissance...
Analyse   Design d’interfaces   Design Visuel   DéveloppementEsthétique intelligente     5 . Prototype haute-fidélité     4...
Analyse   Design d’interfaces   Design Visuel   DéveloppementEsthétique intelligente       1 . Valeurs / Etude cible48
Analyse   Design d’interfaces   Design Visuel   DéveloppementEsthétique intelligente       2 . Planches de tendances49
Analyse   Design d’interfaces   Design Visuel   DéveloppementEsthétique intelligente       3 . Etude des contrastes50
Analyse   Design d’interfaces   Design Visuel   DéveloppementEsthétique intelligente       4 . Charte chromatique51
Analyse   Design d’interfaces   Design Visuel   DéveloppementEsthétique intelligente       5 . Prototype haute-fidélité52
Analyse    Design d’interfaces   Design Visuel   Développement                     Récupération directe               par ...
Le travail dudéveloppeurArnaud Weil              1
Scénario 1Je  reçois  la  maquette   Je  recode  la  maquette  dans     mon  environnement       Temps  perdu             ...
Scénario 2Pas  de  maquette        Je  deviens  responsable  de          problèmes  qui  ne  sont  pas  les  miens        ...
Ce que je fais ne se voit pas                         On  me  juge                             sur  ça              Appare...
Solution Processus Collaboration outillée   Passage transparent de   Blend à Visual Studio   XAML                       De...
DémoAjout de logique métier: validation                     6
Ergonomie et apparence Flexibilité: templates Graphiste et développeurs parlent (enfin) le même langage     Exemple:      ...
Analyse   Design d’interfaces   Design visuel   Développement                          Conclusion
Analyse   Design d’interfaces   Design visuel   DéveloppementPrototyper c’est...Générer des idées                     Mont...
Analyse   Design d’interfaces   Design visuel   Développement          Mais surtout pour réussir une                  appl...
Analyse   Design d’interfaces   Design visuel   Développement                      La clé du succès est            dans la...
Merci !                              Philippe Chaurand                              Ingénieur IHM                         ...
Conférence PIA au MS TechDays 2011 : "Réussir des applications attractives grâce au prototypage et à Blend Sketchflow"
Conférence PIA au MS TechDays 2011 : "Réussir des applications attractives grâce au prototypage et à Blend Sketchflow"
Prochain SlideShare
Chargement dans…5
×

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

2 325 vues

Publié le

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.

Publié dans : Technologie
1 commentaire
1 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
2 325
Sur SlideShare
0
Issues des intégrations
0
Intégrations
353
Actions
Partages
0
Téléchargements
37
Commentaires
1
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×