Le succès et l’adoption d’une application sont étroitement liés à la qualité de l’expérience utilisateurs. Nous vous présenterons lors de cette session comment le développement en méthodologies agiles de vos applications Windows 8 vous garantit souplesse, productivité accrue, respect des délais et véritable valeur pour vos utilisateurs. Nous insisterons également sur l’importance à donner au design et à l’ergonomie afin de définitivement garantir l’adoption de vos applications par vos utilisateurs.

1. 12/02/2013
De l’ergonomie aux bonnes méthodes de
développement de vos applications Windows 8
Microsoft TechDays - Session du mardi 12 février 2013

2. Expertises
Développement
Maintenance
Expertises
Infogérance
Transformation
Maintenance critique
BYOD & mobilité
Cloud
Portail & collaboration
Mise en production

3. Sommaire
Osiatis et Windows 8
Ergonomie et design
L’agilité gage de réussite
L’atelier de développement
O’MyBoard, Retour d’expérience
Fév. 2013 Microsoft Tech.days 2013P. 3
1
2
3
4
5

4. Fév. 2013 Microsoft Tech.days 2013P. 4
1.
Osiatis et Windows 8

5. Fév. 2013 Microsoft Tech.days 2013P. 5
Osiatis et Windows 8
Un engagement fort auprès de Microsoft
Osiatis intègre le cercle
Microsoft Apps Circle Windows 8…
1

6. Fév. 2013 Microsoft Tech.days 2013P. 6
Osiatis et Windows 8
Windows 8, de nouveaux concepts…
Une nouvelle conception de la navigation
 Interface Windows ex « Modern UI »
 Des règles de design et d’ergonomie imposées
 Zoom sémantique
L’intégration de l’application à l’OS
 Contrats de recherche, paramètres, « charm bar »
Un cœur commun aux systèmes W8 & WP8
1

7. Fév. 2013 Microsoft Tech.days 2013P. 7
Osiatis et Windows 8
O’MyBoard, un tableau virtuel
1

8. 2.
Ergonomie et design
Fév. 2013 Microsoft Tech.days 2013P. 8

9. Démarche « Mobile First »
Fév. 2013 Microsoft Tech.days 2013P. 9
Ergonomie et design
Le design mobile s’impose dans chaque projet
2

10. Démarche « Mobile First »
Fév. 2013 Microsoft Tech.days 2013P. 10
Ergonomie et design
Penser « mobile »
 Révolution des comportements, des habitudes
 Reformatage des réflexes et des usages
 Design mobile, une conception d’interfaces par l’usage
Conception / Développement & Design 2 métiers
 Osiatis a fait le choix de travailler avec des spécialistes du design :
2

11. Démarche « Mobile First »
Fév. 2013 Microsoft Tech.days 2013P. 11
Ergonomie et design
La révolution mobile et ses conséquences sur le design
d’interface
Interface
Mobinaute
Contenus & Fonctionnalités Terminal mobile
3
Un Œil
Un Pouce
4
Less is More
1
Du WIMP
Au TOUCH
2
L’objet & la
Métaphore
2

12. Du WIMP au TOUCH
Fév. 2013 Microsoft Tech.days 2013P. 12
Ergonomie et design
L’interface homme machine
Windows Icônes Menus Pointeurs
Tap Double Tap Drag Flick
2

13. Du WIMP au TOUCH
Fév. 2013 Microsoft Tech.days 2013P. 13
Ergonomie et design
L’interactivité avec le « métal »
Nouvelles possibilités
 GPS / Boussole
 Accéléromètre / Gyroscope
 Lumière ambiante
 Vidéo – Photo / double caméra (avant-arrière)
 Connexion avec d’autres appareils (bluetooth, airmedia…)
 Live tiles
2

14. L’objet et la métaphore
Fév. 2013 Microsoft Tech.days 2013P. 14
Ergonomie et design2

15. Un Œil / un pouce
Fév. 2013 Microsoft Tech.days 2013P. 15
Ergonomie et design
Mieux
Meilleur
OK
Mieux
Meilleur
OK
Mieux
L’usager dans ses environnements
2

16. Less is more
Fév. 2013 Microsoft Tech.days 2013P. 16
Ergonomie et design
Interface Windows
Le contenu au cœur de
l’application
Synthétiser au maximum
 Les contenus
 Les fonctionnalités
2

17. 3.
L’agilité gage de réussite
Fév. 2013 Microsoft Tech.days 2013P. 17

18. Le manifeste Agile
Fév. 2013 Microsoft Tech.days 2013P. 18
L’agilité gage de réussite
Un style de développement itératif
centré sur les personnes et mettant
l’accent sur la satisfaction du client à
travers l’intégration continue d’un
logiciel entièrement fonctionnel.
3

19. Fév. 2013 Microsoft Tech.days 2013P. 19
L’agilité gage de réussite
O’MyBoard, un outil interne
Objectif
 Utiliser sur une tablette Windows 8 le tableau virtuel des post-its
permettant de suivre l’avancée du projet dans le cadre d’une démarche
agile.
Gestion des projets
Gestion des User Stories
Gestion des Sprints
Gestion des tâches
Gestion des ressources
Recherche
Outil utilisé chez Osiatis pour le suivi des projets
3

20. Le design intégré en Méthode Agile
Une itération Design ?
 NON : du Design dans chaque itération !
Fév. 2013 Microsoft Tech.days 2013P. 20
L’agilité gage de réussite3
Le design
est une tâche

21. Le design intégré en Méthode Agile
Wire Frame + Story Board
Fév. 2013 Microsoft Tech.days 2013P. 21
L’agilité gage de réussite3

22. Fév. 2013 Microsoft Tech.days 2013P. 22
L’agilité gage de réussite
Wire Frame de la User Story
« Création d’une nouvelle colonne »
3

23. Une étape indispensable
Même les applications les plus simples nécessitent un
sketching
Les interactions avec l’utilisateur doivent être naturelles
Toutes les interactions doivent être prévues
Fév. 2013 Microsoft Tech.days 2013P. 23
L’agilité gage de réussite
Sketcher c’est prévoir, et prévoir c’est gérer…
3

24. 4.
L’atelier de développement
Fév. 2013 Microsoft Tech.days 2013P. 24

25. Microsoft Blend
pour Visual Studio 2012
Animation, Visual States, Transitions
Styles et GroupStyles
Template editing, Layout
Data Binding
Control creation
Property editing
Fév. 2013 Microsoft Tech.days 2013P. 25
L'atelier de développement
Utilisez Blend pour concevoir des applications pour le Windows Store
4

26. Choix technologiques
Choix du langage et de l’architecture
 XAML/C# vs HTML5/CSS3/JS
 Framework MVVM
Séparation des responsabilités
 Architecture en couches
Code partagé (W8 / WP8)
 Code commun dans les « Portable libraries »
Fév. 2013 Microsoft Tech.days 2013P. 26
L'atelier de développement
L’architecture et le respect des normes de développement
Gage de la qualité
4

27. HTML5 / CSS3 / Javascript
Fév. 2013 Microsoft Tech.days 2013P. 27
L'atelier de développement
 IntelliSense avancé dans Visual Studio
 Mode Debug
 Design dans Blend
 Prise en main rapide
Pour les développeurs Web
4

28. XAML / C#
Fév. 2013 Microsoft Tech.days 2013P. 28
L'atelier de développement
 Techno similaire aux développements
Silverlight, WPF, Windows Phone
 Toute la puissance de .Net
Binding, Attached et Dependency Properties,…
 Architectures en couches
Séparation des responsabilités
Pattern MVVM
 Possibilité de partager du code
Windows 8 / Windows Phone 8
API Cross Platform
4

29. Fév. 2013 Microsoft Tech.days 2013P. 29
5.
O’MyBoard, retour d’expérience

30. Fév. 2013 Microsoft Tech.days 2013P. 30
O’MyBoard, Retour d’expérience
Pour bien démarrer son projet Windows 8
Les questions clés ?
Cible Windows 8 RT et/ou Windows 8 Pro ?
Comment déployer / diffuser l’application ?
Quelle connexion avec le SI ?
Choix du langage et de l’architecture ?
5

31. Fév. 2013 Microsoft Tech.days 2013P. 31
O’MyBoard, Retour d’expérience
Dans le respect des Guidelines pour les applications Windows Store
Les étapes franchies…
 Drag & Drop dans ListView / GridView
 Persistance des données
 Base de démonstration initiale
 Contrat de recherche
 Prise de photos
 Les mentions légales
 La suite
SQLite, échanges de données sans fil, Back-office…
5

32. Fév. 2013 Microsoft Tech.days 2013P. 32
O’MyBoard, Retour d’expérience
Centre de développement - applications du Windows Store
Recette, validation et déploiement sur le store
 Chaque fin de sprint :
Kit de certification pour le Windows Store
– Corriger les erreurs éventuelles du rapport
Recette par les utilisateurs pilotes
 Produire les descriptions, copies d’écrans et les mentions légales pour
le Windows Store
 Générer les packages pour les architectures ciblées
 Uploader les informations sur le site
5

33. Fév. 2013 Microsoft Tech.days 2013P. 33

34. Fév. 2013 Microsoft Tech.days 2013P. 34