Retour d’expérience designer-développeur

2. Retour d’expérience designer-développeur 08-02-2011 Johanna RoweDesigner Industriel et Interactif Nicolas CalviConsultant formateur MVP Surface

3. Qui sommes-nous • Johanna designer i&i - spécialisé dans les interfaces tactiles. chez Winwise depuis décembre lauréate internationale Imagine Cup 2008 Interface Design - Microsoft Microsoft Surface Academy en 2009 • Nicolas consultant et formateur - spécialisé dans les interfaces tactiles. chez Winwise depuis 3 ans MVP Surface depuis le 1er janvier 2011

4. L’expert de référence ! • Société d’expertise sur les technologies Microsoft • Partenaire historique et stratégique de Microsoft • Plus de 90 collaborateurs certifiés interviennent sur des missions à forte valeur ajoutée : • Missions d’expertise • Conseil & Audit • Réalisation de projets à engagement de résultats • Une offre couvrant l’ensemble du cycle de vie des applications : • Travail collaboratif, portail d’entreprise et Workflow • Business Intelligence & Data Management • Interfaces utilisateurs, Rich Internet Application & desktop application • Architecture d’entreprise et Architecture Life cycle Management • Infrastructure, Sécurité et Réseaux • Centre de formation et de Certification Microsoft • WINWISE est le pôle d’expertise MICROSOFT du Groupe ALTEN et bénéficie de la puissance financière d’un leader incontesté • WINWISE 130/136 Rue de Silly 92100 Boulogne-Billancourt www.winwise.com

5. Introduction • Présentation du processus projet  LCL à la carte sur Microsoft Surface. Réalisé au Pôle Innovationdu Crédit Agricole pour le LCL.

6. Base de travail : Site web LCL à la carte  mono-utilisateur

7. Microsoft Surface • Table tactile • Reconnaissance infrarouge • 5 caméras • Reconnaissance de « Tag » • Utilisation différente • Collaborative • Multiutilisateurs

8. Aboutissement : une solution client(s)+conseiller  multi-utilisateurs Les métiers : Cogniticien/ergonome (2), designer i&i (1), graphiste (2), développeur (3), chef de projet (1)

9. Phase 1 Spécifications et contexte projet

10. 1-Premier contact client Métiers : designer i&i + cogniticien • Valeurs de la société : - sérieux, écolo, innovant,… • Contexte du projet : - combien de personnes, - dans quel lieu, - en autonome ou accompagné, - but de l’application. -… • Cerner et vérifier que le besoin du client est bien en adéquation avec l’utilisateur final.

11. 1-Premier contact client Métier : chef de projet • Spécifications de l’application • Chiffrage du projet • Design • Graphisme • Ergonomie • Développement • Choix de la méthodologie

12. 2-Problématique design Métier : designer i&i • Partir d’une solution aboutit(site web)  et repartir « from scratch » • Solution mono-utilisateur à la maison  solution multi-utilisateurs en agence • Représentation d’éléments immatériels(sur une interface naturelle)  en objets physiques et palpables.

13. 3-Concepts et idées fortes de l’application • Conseil et accompagnement • Sérieux et moderne • Ludique dans son utilisation Métier : designer i&i • Résolument différent du Web • Intuitif • Respect de la charte graphique du LCL

14. 4-Validation du contexte Métier : designer i&i, cogniticien, chef de projet • Validation de cette première phase avec le client/MOA • Modifications si nécessaire

15. Phase 2 Design de l’application

16. 1-Qu’est-ce que le design industriel et interactif (i&i) • Pourquoi un designer industriel pour des interfaces tactiles ? • Phase naturelle  domaine de l’industrie • Nouveau et mal compris  domaine de l’informatique • Phase de design de l’application  créative & organisationnelle = base et de fil conducteur • En amont du graphisme et du développement • Démarche nécessaire  remettre l’utilisateur au centredu projet (User Centred Design ou User Oriented Design) • Valeur ajouté des projets

17. 2-Design du contenu Métiers : designer i&i + cogniticien • Organisation visuelle et arborescence du contenu(par rapport au support) • Séance de créa avec de « petits morceaux de papier » • Scénario complet : « petits morceaux de papier »  prenant en compte l’arborescence • Permet de déduire les contraintesorganisationnelles 3 1 2 1 2

18. 3-Design formel et fonctionnement • Recherche de formes : différentes inspirations de nombreux domaines : nature, jeux vidéos, mode etc. • Ressemblance à des objets réels du quotidien  l’utilisateur reconnaît l’objet et sait donc le manipuler Métiers : designer i&i + ergonome Boîte Poignée

19. 3-Design formel et fonctionnement • Produits : on c’est éloigné des formes trop conventionnelles tel que les ronds ou carrés. Métiers : designer i&i + ergonome Recherche de forme pour représenter un produit bancaire

20. 4-Vérification des scénarios Métiers : designer i&i + développeur • Vérification de l’ensemble de l’encombrement à échelle 1 avec les formes choisies. • Réalisation du scénario complet avec les formes choisies (ci-dessous) • Vérification de la faisabilité avec le lead technique 4 2 1 3 7 6 5 scénario complet avec design formel et interactions  permet validation équipe technique

21. 5-Validation du design Métiers : designer i&i + ergonome • Validation de cette seconde phase avec le client/MOA • Modifications de la phase 2 si nécessaire

22. Phase 3 Réalisation et tests

23. 1-Etape charnière Métiers : designer + ergonome+ graphiste + développeur • Acquis • Connaissance métier • Design formel pour les graphistes • Arbre d’utilisation de l’application grâce au design • Parallélisions des tâches • Prototypages et réalisation graphique • Développement de l’architecture • Mise en place des briques essentielles • Agilité des échanges • Reporting quotidien entre les différents corps de métier • Gestion par itération courte pour anticiper les problèmes • Tests unitaires quotidien avec les différents corps de métier

24. 2-Graphisme de l’application Métiers : lead créatif + graphiste + designer + ergonome Designer Graphiste • Respect des préconisationsde design • essentielpour une expérience utilisateur réussie • Rôle du graphiste = primordiale • ce que voit, toucheet comprend l’utilisateur • Contrainte particulière = résolution de la table V1

25. 2-Graphisme de l’application Métier : graphiste • Recherche de : • Formes • Couleurs • Textures • Fontes (Polices de caractère) • Se base sur : • Les valeurs de la marque • L’univers des utilisateurs finaux • Savoir faire • Technique (appliqué au domaine du graphisme) • Créatif • Artistique

26. 2-Graphisme de l’application Métier : graphiste • Résultat

27. 2bis-Validation du graphisme Métiers : graphiste + designer + lead créatif • Validation de graphisme avec le client/MOA • Modifications si nécessaire de la phase de graphisme et parfois modification de la phase 2 (design)

28. 3-Mise en place de l’archi Métiers : lead technique + développeur • Phase d’étude • Technologie • Briques techniques • Patterns • Mise en place de l’environnement de développement • Contrôle de sources • Normes de développement • Développement • Réalisation des parties non graphiques • Prototypage et étude de faisabilité des contrôles • Génération des données métiers en fichier numérique

29. 4-Process au sein du développement • Découpage des assets (Adobe Illustrator, Excel) • Etude avec le développeur • Création des fichiers en « PNG » • Plans techniques des composants (positionnement des éléments graphiques) • Tableau des dimensions • Création des Storyboards (Expression Blend) • Projet à part • Accompagnement pour le choix des contrôles et la nomenclature • Optimisation • Relecture et modification du XAML fournis • Test des fontes et tailles de textes • Accompagnement technique auprès de l’équipe créative Métiers : graphiste + développeur

30. 4-Process au sein du développement

31. 4-Process au sein du développement

32. 5-Mise en place de l’outil de visualisation • Besoins • Tester des configurations graphiques • Tester des assets graphiques, sonores et vidéos • Pouvoir agir sur les éléments pour affiner leurs spécifications • Pouvoir vérifier la lisibilité du texte sur Microsoft Surface • Application • Facile a utiliser • Permet l’utilisation de certains effets • Permet le prototypage d’écran • Travail collaboratif grâce à Microsoft Surface • Validation graphique avec le client Métier : développeurs

33. Démo Outil de visualisation

34. 6-Tests unitaires - agilité Prototypage Graphique à partir des planches de design Design du composant Designer, Ergonome Graphiste Etude de faisabilité technique Recherche de solutions conjointes Développeur Designer, Graphiste, Développeur Réalisation d’un prototype Développeur Test du prototype Affinage des éléments nécessaire Designer, Ergonome, Graphiste, Développeur Designer, Ergonome, Graphiste, Développeur Réalisation Développeur

35. 7-Tests utilisateurs en agence • Testé de juin à septembre 2010 • Valider ou corriger (gestuelles, graphismes) • Etudier le comportement des utilisateurs • Les conseillers trouve l’application facile à utiliser • Période courte pour l’apprentissage des gestuelles • Problèmes de lisibilité du texte

36. Démo LCL à la carte pour Microsoft Surface

37. Conclusion

38. 1-Chaque métier a son rôle - CHEF DE PROJET -

39. 1-Chaque métier a son rôle - COGNITICIEN - - ERGONOME -

40. 1-Chaque métier a son rôle - DESIGNER INDUSTRIEL - - LEAD CREATIF -

41. 1-Chaque métier a son rôle - GRAPHISTE -

42. 1-Chaque métier a son rôle - DEVELOPPEUR - - LEAD TECHNIQUE -

43. 2-Evolution des besoins = évolution des méthodologies • Utilisateur au centre des projets • Prise en compte de l’expérience utilisateur • Adoption plus rapide d’une application par les utilisateurs finaux • Images de marque de la société • Respect de l’image • Respect des valeurs • Des métiers complémentaires • Pluri discipline des projets • Savoir encadrer et gérer des personnes venues d’horizons différents

44. 3-Evolution technologique : parlons-en • Surface V2 • Amélioration visuel de l’interface • Lisibilité des textes • Meilleur rendu graphique • Meilleure reconnaissance tactile • Windows 7 : touch - une plateforme pour les réunir tous • Windows Phone 7

45. Contacts • Nos blogs http://blog.chaos-web.org/ http://www.johannarowe.com/ • Nos twitter @nicolascalvi @johanna_rowe • Retrouvez l’actualité Winwise Page Facebook : Winwise Twitter : @WinwiseTech

46. MSDN et TechNet: l’essentiel des ressources techniques à portée de clic • Portail administration et infrastructure pour informaticiens • Portail de ressources technique pour développeurs http://technet.com http://msdn.com