Présentation donnée en février 2012 pendant les Techdays par Cyril Sansus et moi-même à propos d'un lecteur RSS pour Windows Open-Source arrêté depuis. Nous y décrivions le travail sur l'expérience utilisateur et comment mettre en place facilement des design grâce au XAML.

1. palais des
congrès
Paris
7, 8 et 9
février 2012

2. 07 février 2012
Bewise
Mise en pratique de l'ergonomie et du
design sur un exemple concret : Mishra
Reader

3. @ocourtois ocourtois.fr
Olivier Courtois
Responsable BewiseDesign
Consultant, Spécialiste UX
Toulouse Stand 47

4. @csansus codes-sources.com/vko
Cyril Sansus
Responsable NIU
Consultant
Toulouse Stand 47

5. Ouverture d’une
agence sur Paris !
Retrouvez nous sur
le stand 47
Diffuse une expertise novatrice
Contribue à l’émergence de logiciels
performants et ergonomiques
Pure Player Microsoft depuis 1999

6. Qu’est-ce que Mishra Reader ?

7. Mishra Reader
”
“Un lecteur de flux RSS développé
en WPF qui est ergonomique et
joliment animé
David Catuhe - Microsoft

8. Création Alpha1 26 Juillet 2011

9. Open-Source Codeplex Alpha4 1 Août 2011

10. Beta 1 11 Août 2011

11. Beta 2 En cours

12. L’expérience utilisateur

13. DEMO Beta 1

15. Incertitude Certitude
Recherche Itérations - Maquettes Mise en œuvre
* Représentation de Damien Newman - Central
METHODOLOGIE

16. RECHERCHES
1 Analyser la concurrence
2 Recherche de tendances

17. RECHERCHES

18. RECHERCHES

19. RECHERCHES

20. ITERATIONS

21. ITERATIONS

22. ITERATIONS

23. MVP
80
20

25. 1 Syndrome du non-choix
2 Point sur la méthodologie
3 Chercher l’inspiration
4 Comprendre les usages
5 80/20

26. DEMO Beta 2

27. AUTHENTICITE
1 Humain
2 Digital mais pas seulement

28. AUTHENTICITE

29. AUTHENTICITE

30. ELEGANCE
1 Augmente la satisfaction
2 Crée une image de marque - reconnaissable

31. VIVANT
1 Augmente la performance perçue
2 Apporte du sens

32. AU FINAL
1 +60% d’espace pour le contenu
2 Un seul clic pour atteindre le contenu
3 Une formidable expérience de lecture sous Windows

33. Soyez authentique. Soyez élégant. Soyez vivant.

34. L’intégration

35. ENTREE
Image
Mockup
SORTIE
Style
Template
XAML
Intégration ?

36. Microsoft Expression Blend
Outil dédié à l’intégration
Styles, Templates
States, Triggers
Animation

37. DEMO

38. 1 LAYOUTING
Structurer l’interface
2 STYLE & TEMPLATE
Habiller l’interface
3 ANIMATION
Dynamiser l’interface
L’INTEGRATION
sur Mishra en 3 étapes

39. 1 LAYOUTING
Structurer l’interface
Layout
Alignements
Marge
”“Structurez votre démarche pour
réussir plus rapidement

40. runtime design time

41. DEMO

42. Colorimétrie
2 STYLE & TEMPLATE
Habiller l’interface
Taille des polices
Choix des polices
Styles pour vos TextBlock
Styles par défaut des contrôles

43. Découpage efficace
2 STYLE & TEMPLATE
Habiller l’interface

44. DEMO

45. 3 ANIMATION
Dynamiser l’interface
States & Triggers
Storyboard
Easing functions
Partie difficile
150ms et 350ms
Exponential et Cubic

46. AnimatedTab
AnimatedListBox
Où trouver tous ces contrôles?

47. MISHRA READER BETA 2
http://mishrareader.codeplex.com/

48. Q/A Merci