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
Upcoming SlideShare
Loading in...5
×

Retour sur mishra reader

185

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
185
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Un développeur a beaucoup plus de points communs avec un artiste que ce que l’on pourrait croire … J’appelle ça le syndrome de non choix. Un artiste fait confiance à son instinct et la maitrise de son art pour créer. On appelle ça l’art. Le développeur ne choisit pas vraiment la manière dont il construit son écran. Il suit son instinct à mesure qu’il code les fonctionnalités et nous nous retrouvons avec des écrans non choisis, non pensés pour l’utilisateur final… On appelle ça du mauvais boulot. http://www.istockphoto.com/stock-photo-1757786-artistic-endeavour.php?st=99e92a4
  • http://www.istockphoto.com/stock-photo-18173589-ikea-instruction-manual-with-screwdriver-and-screws.php?st=a62ac7c
  • Quelques fonctionnalités clés reset groupinto customedition des templaterecheche d’assetsoutline
  • Problèmes liés au design time : Les bindings ne sont pas évalué La couleur de fond n’est pas bonne
  • Problèmes liés au design time : Les bindings ne sont pas évalués La couleur de fond n’est pas bonne
  • Organisation : avoir un découpage efficace !
  • Création d’une checkbox type iPhone avec Blend
  • Organisation : avoir un découpage efficace !
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×