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.

2. Réussir des applications
attractives grâce au
prototypage et à Sketchflow
10 février 2011
Emmanuel Levi-Valensi. Directeur Associé PIA
Philippe Chaurand. Ingénieur IHM PIA
Yoan Maman. Designer PIA
Arnaud Weil. Expert Silverlight Freelance
2

3. PIA, cabinet de conseil en
ergonomie, design et
développement agile.

4. Spécialiste de l’expérience utilisateur
au service
des applications métiers

5. 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 RIA
2004
pour les applications
d’entreprise Ouverture Adhésion au
2008
2009
PIA Toulouse Comité Partenaire
2010
Développement Richelieu fondateur
à distance de l’institut
2004 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

6. 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 web
Coaching agile
_ Conseil et coaching pour le développement agile

7. Nos principales références
France
International
Partenaires

8. Arnaud Weil
Expert Silverlight & .NET freelance
Formation aux développeurs et graphistes
Conseil, Audit, Architecture
Prochaine formation Silverlight 4
en mars
http://aweil.fr/inter.aspx

9. Réussir des applications attractives
grâce au prototypage et à Sketchflow
9

10. Les nouveaux usages gagnent l’entreprise

11. Un contraste fort | Rupture dans l’Expérience Utilisateur (UX)
Manque de simplicité et d’attractivité

12. Méthodologie PIA
Construire la simplicité et l’attractivité

13. Méthodologie PIA
Construire la simplicité et l’attractivité

14. Méthodologie PIA | Construire la simplicité et l’attractivité
T
AN
AV

15. Méthodologie PIA | Construire la simplicité et l’attractivité
S
RE
AP

17. Design visuel

18. Design visuel
Analyse des
besoins

19. Design visuel
Analyse des besoins
Comprendre les usages, les utilisateurs, le
contexte
Outils : persona, cas d’utilisation, shadowing,
focus group, interviews,...
Analyse des
besoins

20. Design visuel
Local Operation Champion
Login
Architecture de l’information
Home Data Collection
Data Collect oriented Wizard
Analysis
Edit profile
local
Architecture
Operation Champion
Login
Home Review data
Dashboard Data Collect monitoring
Analysis
de l’information
Edit profile
global
Elaborer la structure de l’application
Administration
countries, users, static data
Login 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

21. 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 Champion
Login
Home Review data
Dashboard Data Collect monitoring
Analysis
de l’information
Edit profile
global
Administration
countries, users, static data
Login 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

22. Design visuel
Design visuel
Rendre attractive l’application
Outils : persona, planches de tendances,
charte chromatique, prototype haute
fidélité,...
Design des
interfaces
Local Operation Champion
Login
Home Data Collection
Data Collect oriented Wizard
Analysis
Edit profile
local
Architecture
Operation Champion
Login
Home Review data
Dashboard Data Collect monitoring
Analysis
de l’information
Edit profile
global
Administration
countries, users, static data
Login 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

23. Mise en oeuvre sur un cas pratique
Analyse des Design des Design visuel Coding
besoins interfaces

24. Mise en oeuvre sur un cas pratique
Analyse des Design des Design visuel Coding
besoins interfaces

25. Mise en oeuvre sur un cas pratique
Analyse des Design des Design visuel Coding
besoins interfaces

26. Mise en oeuvre sur un cas pratique
Analyse des Design des Design visuel Coding
besoins interfaces

27. Mise en oeuvre sur un cas pratique
Analyse des Design des Design visuel Coding
besoins interfaces

28. Analyse Design d’interfaces Design visuel Développement
Analyse

29. 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

30. Analyse Design d’interfaces Design visuel Développement
Cas pratique | Le besoin
Hôtel
Hôtel
Fiches d’amélioration
Hôtel Hôtel
26

31. 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

32. Analyse Design d’interfaces Design visuel Développement
Une formalisation qui va à l’essentiel
28

33. Analyse Design d’interfaces Design visuel Développement
Design d’interfaces
Philippe Chaurand, ingénieur IHM
PIA PIA
@anomes
29

34. Analyse Design d’interfaces Design visuel Développement
Monter à 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

35. Analyse Design d’interfaces Design visuel Développement
Une réunion de co-design
C’est quoi ?
Pourquoi ?
Avec qui ?
31

36. Analyse Design d’interfaces Design visuel Développement
Une réunion de co-design
C’est quoi ?
Pourquoi ?
Avec qui ?
31

37. Analyse Design d’interfaces Design visuel Développement
Une réunion de co-design
C’est quoi ?
Pourquoi ?
Avec qui ?
31

38. Analyse Design d’interfaces Design visuel Développement
Une réunion de co-design
C’est quoi ?
Pourquoi ?
Avec qui ?
31

39. Analyse Design d’interfaces Design visuel Développement
réunion de co-design
je consolide l’interface
32

40. Analyse Design d’interfaces Design visuel Développement
Architecture de l’information
Cinématiques
Zonings
33

41. Analyse Design d’interfaces Design visuel Développement
Architecture de l’information
Cinématiques
Zonings
Patterns
33

42. Analyse Design d’interfaces Design visuel Développement
Des prototypes papier
34

43. Analyse Design d’interfaces Design visuel Développement
Des prototypes papier
34

44. Analyse Design d’interfaces Design visuel Développement
Et ainsi de suite ...
réunion de co-design
Ut ilité
je consolide l’interface
bilité
til isa
U
35

45. Analyse Design d’interfaces Design visuel Développement
Prototype papier nal
36

46. Analyse Design d’interfaces Design visuel Développement
Prototype papier nal
36

47. Analyse Design d’interfaces Design visuel Développement
prototyper, c’est donner une
vision du futur produit ...
et partager cette vision !
37

48. Analyse Design d’interfaces Design visuel Développement
Peut-on aller plus loin ?
Un prototype plus n
Un prototype plus immersif
Un prototype plus interactif
Formaliser le prototype
38

49. Analyse Design d’interfaces Design visuel Développement
What’s next ?
L'interface 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

50. 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
@yoanmaman
40

51. Analyse Design d’interfaces Design Visuel Développement
41

52. Analyse Design d’interfaces Design Visuel Développement
Fonctionnel
41

53. Analyse Design d’interfaces Design Visuel Développement
Quʼapporte le Design Visuel ?
42

54. Analyse Design d’interfaces Design Visuel Développement
La reconnaissance des valeurs
43

55. Analyse Design d’interfaces Design Visuel Développement
Lʼenvie et le désir
44

56. Analyse Design d’interfaces Design Visuel Développement
Le confort dʼutilisation
45

57. Analyse Design d’interfaces Design Visuel Développement
Quʼapporte le Design Visuel ?
La reconnaissance des valeurs
Lʼenvie et le désir
Le confort dʼutilisation
46

58. Analyse Design d’interfaces Design Visuel Développement
Esthétique intelligente
5 . Prototype haute-fidélité
4 . Charte chromatique
3 . Etude des contrastes
2 . Planches de tendances
1 . Valeurs / Etude cible
47

59. Analyse Design d’interfaces Design Visuel Développement
Esthétique intelligente
1 . Valeurs / Etude cible
48

60. Analyse Design d’interfaces Design Visuel Développement
Esthétique intelligente
2 . Planches de tendances
49

61. Analyse Design d’interfaces Design Visuel Développement
Esthétique intelligente
3 . Etude des contrastes
50

62. Analyse Design d’interfaces Design Visuel Développement
Esthétique intelligente
4 . Charte chromatique
51

63. Analyse Design d’interfaces Design Visuel Développement
Esthétique intelligente
5 . Prototype haute-fidélité
52

64. Analyse Design d’interfaces Design Visuel Développement
Récupération directe
par lʼéquipe de développement
53

65. Le travail du
développeur
Arnaud Weil
1

66. Scénario 1
Je reçois la maquette
Je recode la maquette dans
mon environnement
Temps perdu
PAS DE
VACANCES
2

67. Scénario 2
Pas de maquette
Je deviens responsable de
problèmes qui ne sont pas les miens
BOUC
EMISSAIRE
3

68. 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

69. Solution
Processus
Collaboration outillée
Passage transparent de
Blend à Visual Studio
XAML Designer
DataBinding
Ergonome Développeur
XAML
5

70. Démo
Ajout de logique métier: validation
6

71. Ergonomie et apparence
Flexibilité: templates
Graphiste et
développeurs parlent
(enfin) le même
langage
Exemple:
http://sltemplates.codeplex.com
7

72. Analyse Design d’interfaces Design visuel Développement
Conclusion

73. Analyse Design d’interfaces Design visuel Développement
Prototyper 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

74. Analyse Design d’interfaces Design visuel Développement
Mais surtout pour réussir une
application attractive...

75. Analyse Design d’interfaces Design visuel Développement
La clé du succès est
dans la collaboration entre
Expert métier Ergonome Designer Développeur

76. Merci !
Philippe Chaurand
Ingénieur IHM
pch@piaction.com
Plus d’informations sur PIA Emmanuel Levi-Valensi
www.piaction.com Directeur Associé
www.blog.piaction.com elv@piaction.com
Yoan Maman
Designer
yma@piaction.com
Formations avec Arnaud Weil Arnaud Weil
www.aweil.fr Expert développement Silverlight
contact@aweil.fr