La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

2 Retour dexpérience designer-développeur Johanna Rowe Designer Industriel et Interactif Nicolas Calvi Consultant formateur MVP Surface 08-02-2011.

Présentations similaires


Présentation au sujet: "2 Retour dexpérience designer-développeur Johanna Rowe Designer Industriel et Interactif Nicolas Calvi Consultant formateur MVP Surface 08-02-2011."— Transcription de la présentation:

1

2 2 Retour dexpérience designer-développeur Johanna Rowe Designer Industriel et Interactif Nicolas Calvi Consultant formateur MVP Surface

3 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 1 er janvier 2011

4 4 Lexpert de référence ! Société dexpertise 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 dexpertise Conseil & Audit Réalisation de projets à engagement de résultats Une offre couvrant lensemble du cycle de vie des applications : Travail collaboratif, portail dentreprise et Workflow Business Intelligence & Data Management Interfaces utilisateurs, Rich Internet Application & desktop application Architecture dentreprise et Architecture Life cycle Management Infrastructure, Sécurité et Réseaux Centre de formation et de Certification Microsoft WINWISE est le pôle dexpertise MICROSOFT du Groupe ALTEN et bénéficie de la puissance financière dun leader incontesté WINWISE 130/136 Rue de Silly Boulogne-Billancourt

5 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 6 Base de travail : Site web LCL à la carte mono-utilisateur

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

8 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 9 Phase 1 Spécifications et contexte projet

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

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

12 12 2-Problématique design Partir dune 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. Métier : designer i&i

13 13 3-Concepts et idées fortes de lapplication 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 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 15 Phase 2 Design de lapplication

16 16 1-Quest-ce que le design industriel et interactif (i&i) Pourquoi un designer industriel pour des interfaces tactiles ? Phase naturelle domaine de lindustrie Nouveau et mal compris domaine de linformatique Phase de design de lapplication créative & organisationnelle = base et de fil conducteur En amont du graphisme et du développement Démarche nécessaire remettre lutilisateur au centre du projet (User Centred Design ou User Oriented Design) Valeur ajouté des projets

17 17 2-Design du contenu 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 larborescence Permet de déduire les contraintes organisationnelles Métiers : designer i&i + cogniticien

18 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 lutilisateur reconnaît lobjet et sait donc le manipuler Métiers : designer i&i + ergonome Poignée Boîte

19 19 3-Design formel et fonctionnement Produits : on cest é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 20 4-Vérification des scénarios Vérification de lensemble de lencombrement à é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 Métiers : designer i&i + développeur scénario complet avec design formel et interactions permet validation équipe technique

21 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 22 Phase 3 Réalisation et tests

23 23 1-Etape charnière Acquis - Connaissance métier - Design formel pour les graphistes - Arbre dutilisation de lapplication grâce au design Parallélisions des tâches - Prototypages et réalisation graphique - Développement de larchitecture - 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 Métiers : designer + ergonome + graphiste + développeur

24 24 2-Graphisme de lapplication DesignerGraphiste 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 lutilisateur Contrainte particulière = résolution de la table V1 Métiers : lead créatif + graphiste + designer + ergonome

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

26 26 2-Graphisme de lapplication Résultat Métier : graphiste

27 27 2 bis -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 28 3-Mise en place de larchi Phase détude - Technologie - Briques techniques - Patterns Mise en place de lenvironnement 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 Métiers : lead technique + développeur

29 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 30 4-Process au sein du développement

31 31 4-Process au sein du développement

32 32 5-Mise en place de loutil 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 lutilisation de certains effets - Permet le prototypage décran - Travail collaboratif grâce à Microsoft Surface - Validation graphique avec le client Métier : développeurs

33 33 Démo Outil de visualisation

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

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

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

37 37 Conclusion

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

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

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

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

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

43 43 2-Evolution des besoins = évolution des méthodologies Utilisateur au centre des projets - Prise en compte de lexpérience utilisateur - Adoption plus rapide dune application par les utilisateurs finaux Images de marque de la société - Respect de limage - Respect des valeurs Des métiers complémentaires - Pluri discipline des projets - Savoir encadrer et gérer des personnes venues dhorizons différents

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

45 45 Contacts Nos blogs Retrouvez lactualité Winwise Page Facebook : Winwise Twitter

46 46 MSDN et TechNet : lessentiel des ressources techniques à portée de clic Portail administration et infrastructure pour informaticiens Portail de ressources technique pour développeurs

47


Télécharger ppt "2 Retour dexpérience designer-développeur Johanna Rowe Designer Industriel et Interactif Nicolas Calvi Consultant formateur MVP Surface 08-02-2011."

Présentations similaires


Annonces Google