retour d’expérience designer-développeur

2

Retour d’expérience

designer-développeurJohanna Rowe

Designer Industriel et Interactif

Nicolas CalviConsultant formateur MVP Surface

08-02-2011

3

Qui sommes-nous

Johannadesigner 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

Nicolasconsultant 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’expertiseConseil & AuditRéalisation de projets à engagement de résultats

Une offre couvrant l’ensemble du cycle de vie des applications :Travail collaboratif, portail d’entreprise et WorkflowBusiness Intelligence & Data Management Interfaces utilisateurs, Rich Internet Application & desktop application Architecture d’entreprise et Architecture Life cycle ManagementInfrastructure, Sécurité et RéseauxCentre 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 Innovation du 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 1Spécifications et contexte projet

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 l’application.-…

Cerner et vérifier que le besoin du client est bien en adéquation avec l’utilisateur final.

Métiers : designer i&i + cogniticien

11

1-Premier contact client

Spécifications de l’application

Chiffrage du projet- Design- Graphisme- Ergonomie- Développement

Choix de la méthodologie

Métier : chef de projet

12

2-Problématique design

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.

Métier : designer i&i

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 contexteMétier : designer i&i, cogniticien, chef de projet

Validation de cette première phase avec le client/MOA

Modifications si nécessaire

15

Phase 2Design 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

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 l’arborescence

Permet de déduire les contraintes organisationnelles

Métiers : designer i&i + cogniticien

1 221 3

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

PoignéeBoîte

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

Métiers : designer i&i + développeur

1 2 3 4

5 6 7 scénario completavec design formel et interactions permet validationéquipe technique

21

5-Validation du designMétiers : designer i&i + ergonome

Validation de cette seconde phase avec le client/MOA

Modifications de la phase 2 si nécessaire

22

Phase 3Réalisation et tests

23

1-Etape charnière

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

Métiers : designer + ergonome + graphiste + développeur

24

2-Graphisme de l’application

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

Métiers : lead créatif + graphiste + designer + ergonome

25

2-Graphisme de l’application

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

Métier : graphiste

26

2-Graphisme de l’application

Résultat

Métier : graphiste

27

2bis-Validation du graphismeMé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

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

Métiers : lead technique + développeur

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émoOutil de visualisation

34

6-Tests unitaires - agilité

Prototypage Graphique à partir des planches de

design

Etude de faisabilité technique

Réalisation d’un prototype

Test du prototype

Réalisation

Recherche de solutions conjointes

Affinage des éléments nécessaire

Graphiste

Développeur

Développeur

Designer, Ergonome, Graphiste, Développeur

Développeur

Designer, Graphiste, Développeur

Design du composantDesigner, Ergonome

Designer, Ergonome, Graphiste, 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émoLCL à la carte pour Microsoft Surface

37

Conclusion

38

1-Chaque métier a son rôle

- CHEF DE PROJET -OUTILSOfficeTFS

DOMAINES D’INTERVENTIONGestion des spécifications fonctionnellesCommunication avec le clientSuivi et reporting du projet

39

1-Chaque métier a son rôle

- ERGONOME -

- COGNITICIEN -

OUTILSQuestionnairesEntretiensHeuristiques

DOMAINES D’INTERVENTIONValidation ou invalidation de design de contenu et interactions.Validation ou invalidation des graphismes.Tests utilisateursObservation et analyse et l’activité et du comportement.

OUTILSMind mappingMéthodologies d’acquisition de connaissances

DOMAINES D’INTERVENTIONRecueil et analyse des besoins implicites et explicitesEtablissement d’un livre de connaissance métierFormalisation de la connaissance métier

40

Vérification des graphismes par rapport aux phase 1 et 2Vérification du respect du design lors de l’intégration (gestuelles…)Interface avec les développeursContrôle et validation des intégrations graphiques

1-Chaque métier a son rôle - DESIGNER INDUSTRIEL -

- LEAD CREATIF -

OUTILSCrayonPapierCiseauxExpression BlendExpression Design

DOMAINES D’INTERVENTIONSpécification et contexte projetDesign du contenu de l’applicationDesign formel des composantsDesign des interactionsValidation des graphismes

41

1-Chaque métier a son rôle

- GRAPHISTE -OUTILSAdobe IllustratorAdobe PhotoshopExpression Blend

DOMAINES D’INTERVENTIONRéalisation du graphisme des composantsMise en page des éléments textuelsDécoupe et export en .png

42

Encadrement des développeursGarant de la méthodologie et des normesInterface avec les autres corps de métier

1-Chaque métier a son rôle

- DEVELOPPEUR -

- LEAD TECHNIQUE -

OUTILSVisual StudioExpression BlendSQL ServerTFSPaint.net

DOMAINES D’INTERVENTIONRéalisation technique de l’applicationGestion des donnéesPropositions alternatives en cas de problèmes techniquesDécoupage graphique

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 blogshttp://blog.chaos-web.org/http://www.johannarowe.com/

Nos twitter@nicolascalvi@johanna_rowe

Retrouvez l’actualité WinwisePage Facebook : WinwiseTwitter : @WinwiseTech

46

MSDN et TechNet : l’essentiel des ressources techniques à portée de clic

http://technet.com http://msdn.com

Portail administration et infrastructure pour informaticiens

Portail de ressources technique pour développeurs