Date.

Présentation au sujet: "Date."— Transcription de la présentation:

1 date

2 Retour d’expérience designer-développeur
Johanna Rowe Designer Industriel et Interactif Nicolas Calvi Consultant 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 Présentation rapide 1’ total date

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 Boulogne-Billancourt

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

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

7 Microsoft Surface Table tactile Utilisation différente
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 Spécifications et contexte projet
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. date

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 date

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. date

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

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 Design de l’application
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 centre du projet (User Centred Design ou User Oriented Design) Valeur ajouté des projets Expliquer user centered design date

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 contraintes organisationnelles 1 1 2 2 3 date

18 3-Design formel et fonctionnement
Métiers : designer i&i + ergonome 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 Boîte Poignée

19 3-Design formel et fonctionnement
Métiers : designer i&i + ergonome Produits : on c’est éloigné des formes trop conventionnelles tel que les ronds ou carrés. 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 1 2 3 4 5 6 7 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 Acquis Parallélisions des tâches
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 date

24 2-Graphisme de l’application
Métiers : lead créatif + graphiste + designer + ergonome Designer Graphiste Respect des préconisations de design  essentiel pour une expérience utilisateur réussie Rôle du graphiste = primordiale ce que voit, touche et 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
Métiers : graphiste + développeur 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

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
Métier : développeurs 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

33 Outil de visualisation
Démo Outil de visualisation date

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 Début 38’ Test du prototype Affinage des éléments nécessaire Designer, Ergonome, Graphiste, Développeur Designer, Ergonome, Graphiste, Développeur Réalisation Développeur date

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 LCL à la carte pour Microsoft Surface
Démo LCL à la carte pour Microsoft Surface Début 45’ date

37 Conclusion 51’ date

38 1-Chaque métier a son rôle
- CHEF DE PROJET - OUTILS Office TFS DOMAINES D’INTERVENTION Gestion des spécifications fonctionnelles Communication avec le client Suivi et reporting du projet

39 1-Chaque métier a son rôle
- COGNITICIEN - OUTILS Mind mapping Méthodologies d’acquisition de connaissances DOMAINES D’INTERVENTION Recueil et analyse des besoins implicites et explicites Etablissement d’un livre de connaissance métier Formalisation de la connaissance métier - ERGONOME - OUTILS Questionnaires Entretiens Heuristiques DOMAINES D’INTERVENTION Validation ou invalidation de design de contenu et interactions. Validation ou invalidation des graphismes. Tests utilisateurs Observation et analyse et l’activité et du comportement.

40 1-Chaque métier a son rôle
- DESIGNER INDUSTRIEL - OUTILS Crayon Papier Ciseaux Expression Blend Expression Design DOMAINES D’INTERVENTION Spécification et contexte projet Design du contenu de l’application Design formel des composants Design des interactions Validation des graphismes - LEAD CREATIF - Vérification des graphismes par rapport aux phase 1 et 2 Vérification du respect du design lors de l’intégration (gestuelles…) Interface avec les développeurs Contrôle et validation des intégrations graphiques

41 1-Chaque métier a son rôle
- GRAPHISTE - OUTILS Adobe Illustrator Adobe Photoshop Expression Blend DOMAINES D’INTERVENTION Réalisation du graphisme des composants Mise en page des éléments textuels Découpe et export en .png

42 1-Chaque métier a son rôle
- DEVELOPPEUR - OUTILS Visual Studio Expression Blend SQL Server TFS Paint.net DOMAINES D’INTERVENTION Réalisation technique de l’application Gestion des données Propositions alternatives en cas de problèmes techniques Découpage graphique - LEAD TECHNIQUE - Encadrement des développeurs Garant de la méthodologie et des normes Interface avec les autres corps de métier

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 Nos twitter @nicolascalvi @johanna_rowe Retrouvez l’actualité Winwise Page Facebook : Winwise Twitter

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

47