Successfully reported this slideshow.
palais des
congrès
Paris
7, 8 et 9
février 2012
07 février 2012
Bewise
Mise en pratique de l'ergonomie et du
design sur un exemple concret : Mishra
Reader
@ocourtois ocourtois.fr
Olivier Courtois
Responsable BewiseDesign
Consultant, Spécialiste UX
Toulouse Stand 47
@csansus codes-sources.com/vko
Cyril Sansus
Responsable NIU
Consultant
Toulouse Stand 47
Ouverture d’une
agence sur Paris !
Retrouvez nous sur
le stand 47
Diffuse une expertise novatrice
Contribue à l’émergence ...
Qu’est-ce que Mishra Reader ?
Mishra Reader
”
“Un lecteur de flux RSS développé
en WPF qui est ergonomique et
joliment animé
David Catuhe - Microsoft
Création Alpha1 26 Juillet 2011
Open-Source Codeplex Alpha4 1 Août 2011
Beta 1 11 Août 2011
Beta 2 En cours
L’expérience utilisateur
DEMO Beta 1
Incertitude Certitude
Recherche Itérations - Maquettes Mise en œuvre
* Représentation de Damien Newman - Central
METHODOLO...
RECHERCHES
1 Analyser la concurrence
2 Recherche de tendances
RECHERCHES
RECHERCHES
RECHERCHES
ITERATIONS
ITERATIONS
ITERATIONS
MVP
80
20
1 Syndrome du non-choix
2 Point sur la méthodologie
3 Chercher l’inspiration
4 Comprendre les usages
5 80/20
DEMO Beta 2
AUTHENTICITE
1 Humain
2 Digital mais pas seulement
AUTHENTICITE
AUTHENTICITE
ELEGANCE
1 Augmente la satisfaction
2 Crée une image de marque - reconnaissable
VIVANT
1 Augmente la performance perçue
2 Apporte du sens
AU FINAL
1 +60% d’espace pour le contenu
2 Un seul clic pour atteindre le contenu
3 Une formidable expérience de lecture s...
Soyez authentique. Soyez élégant. Soyez vivant.
L’intégration
ENTREE
Image
Mockup
SORTIE
Style
Template
XAML
Intégration ?
Microsoft Expression Blend
Outil dédié à l’intégration
Styles, Templates
States, Triggers
Animation
DEMO
1 LAYOUTING
Structurer l’interface
2 STYLE & TEMPLATE
Habiller l’interface
3 ANIMATION
Dynamiser l’interface
L’INTEGRATION...
1 LAYOUTING
Structurer l’interface
Layout
Alignements
Marge
”“Structurez votre démarche pour
réussir plus rapidement
runtime design time
DEMO
Colorimétrie
2 STYLE & TEMPLATE
Habiller l’interface
Taille des polices
Choix des polices
Styles pour vos TextBlock
Styles...
Découpage efficace
2 STYLE & TEMPLATE
Habiller l’interface
DEMO
3 ANIMATION
Dynamiser l’interface
States & Triggers
Storyboard
Easing functions
Partie difficile
150ms et 350ms
Exponentia...
AnimatedTab
AnimatedListBox
Où trouver tous ces contrôles?
MISHRA READER BETA 2
http://mishrareader.codeplex.com/
Q/A Merci
Retour sur mishra reader
Retour sur mishra reader
Prochain SlideShare
Chargement dans…5
×

Retour sur mishra reader

457 vues

Publié le

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.

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Retour sur mishra reader

  1. 1. palais des congrès Paris 7, 8 et 9 février 2012
  2. 2. 07 février 2012 Bewise Mise en pratique de l'ergonomie et du design sur un exemple concret : Mishra Reader
  3. 3. @ocourtois ocourtois.fr Olivier Courtois Responsable BewiseDesign Consultant, Spécialiste UX Toulouse Stand 47
  4. 4. @csansus codes-sources.com/vko Cyril Sansus Responsable NIU Consultant Toulouse Stand 47
  5. 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. 6. Qu’est-ce que Mishra Reader ?
  7. 7. Mishra Reader ” “Un lecteur de flux RSS développé en WPF qui est ergonomique et joliment animé David Catuhe - Microsoft
  8. 8. Création Alpha1 26 Juillet 2011
  9. 9. Open-Source Codeplex Alpha4 1 Août 2011
  10. 10. Beta 1 11 Août 2011
  11. 11. Beta 2 En cours
  12. 12. L’expérience utilisateur
  13. 13. DEMO Beta 1
  14. 14. Incertitude Certitude Recherche Itérations - Maquettes Mise en œuvre * Représentation de Damien Newman - Central METHODOLOGIE
  15. 15. RECHERCHES 1 Analyser la concurrence 2 Recherche de tendances
  16. 16. RECHERCHES
  17. 17. RECHERCHES
  18. 18. RECHERCHES
  19. 19. ITERATIONS
  20. 20. ITERATIONS
  21. 21. ITERATIONS
  22. 22. MVP 80 20
  23. 23. 1 Syndrome du non-choix 2 Point sur la méthodologie 3 Chercher l’inspiration 4 Comprendre les usages 5 80/20
  24. 24. DEMO Beta 2
  25. 25. AUTHENTICITE 1 Humain 2 Digital mais pas seulement
  26. 26. AUTHENTICITE
  27. 27. AUTHENTICITE
  28. 28. ELEGANCE 1 Augmente la satisfaction 2 Crée une image de marque - reconnaissable
  29. 29. VIVANT 1 Augmente la performance perçue 2 Apporte du sens
  30. 30. 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
  31. 31. Soyez authentique. Soyez élégant. Soyez vivant.
  32. 32. L’intégration
  33. 33. ENTREE Image Mockup SORTIE Style Template XAML Intégration ?
  34. 34. Microsoft Expression Blend Outil dédié à l’intégration Styles, Templates States, Triggers Animation
  35. 35. DEMO
  36. 36. 1 LAYOUTING Structurer l’interface 2 STYLE & TEMPLATE Habiller l’interface 3 ANIMATION Dynamiser l’interface L’INTEGRATION sur Mishra en 3 étapes
  37. 37. 1 LAYOUTING Structurer l’interface Layout Alignements Marge ”“Structurez votre démarche pour réussir plus rapidement
  38. 38. runtime design time
  39. 39. DEMO
  40. 40. 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
  41. 41. Découpage efficace 2 STYLE & TEMPLATE Habiller l’interface
  42. 42. DEMO
  43. 43. 3 ANIMATION Dynamiser l’interface States & Triggers Storyboard Easing functions Partie difficile 150ms et 350ms Exponential et Cubic
  44. 44. AnimatedTab AnimatedListBox Où trouver tous ces contrôles?
  45. 45. MISHRA READER BETA 2 http://mishrareader.codeplex.com/
  46. 46. Q/A Merci

×