date

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

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

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

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.

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

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

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)

Spécifications et contexte projet Phase 1 Spécifications et contexte projet

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

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

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

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

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

Design de l’application Phase 2 Design de l’application

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

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

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

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

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

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

Phase 3 Réalisation et tests

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

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

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

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

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)

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

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

4-Process au sein du développement

4-Process au sein du développement

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

Outil de visualisation Démo Outil de visualisation date

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

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

LCL à la carte pour Microsoft Surface Démo LCL à la carte pour Microsoft Surface Début 45’ date

Conclusion 51’ date

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

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.

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

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

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

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

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

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

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