retour d’expérience designer-développeur

47

Upload: drew

Post on 24-Feb-2016

47 views

Category:

Documents


0 download

DESCRIPTION

Retour d’expérience designer-développeur. 08- 0 2-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 . c hez Winwise depuis décembre - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Retour d’expérience designer-développeur
Page 2: 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

Page 3: Retour d’expérience designer-développeur

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

Page 4: Retour d’expérience designer-développeur

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

Page 5: Retour d’expérience designer-développeur

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.

Page 6: Retour d’expérience designer-développeur

6

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

Page 7: Retour d’expérience designer-développeur

7

Microsoft Surface

Table tactile- Reconnaissance infrarouge- 5 caméras- Reconnaissance de « Tag »

Utilisation différente- Collaborative- Multiutilisateurs

Page 8: Retour d’expérience designer-développeur

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)

Page 9: Retour d’expérience designer-développeur

9

Phase 1Spécifications et contexte projet

Page 10: Retour d’expérience designer-développeur

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

Page 11: Retour d’expérience designer-développeur

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

Page 12: Retour d’expérience designer-développeur

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

Page 13: Retour d’expérience designer-développeur

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

Page 14: Retour d’expérience designer-développeur

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

Page 15: Retour d’expérience designer-développeur

15

Phase 2Design de l’application

Page 16: Retour d’expérience designer-développeur

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

Page 17: Retour d’expérience designer-développeur

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

Page 18: Retour d’expérience designer-développeur

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

Page 19: Retour d’expérience designer-développeur

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

Page 20: Retour d’expérience designer-développeur

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

Page 21: Retour d’expérience designer-développeur

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

Page 22: Retour d’expérience designer-développeur

22

Phase 3Réalisation et tests

Page 23: Retour d’expérience designer-développeur

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

Page 24: Retour d’expérience designer-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

Page 25: Retour d’expérience designer-développeur

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

Page 26: Retour d’expérience designer-développeur

26

2-Graphisme de l’application

Résultat

Métier : graphiste

Page 27: Retour d’expérience designer-développeur

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)

Page 28: Retour d’expérience designer-développeur

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

Page 29: Retour d’expérience designer-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

Page 30: Retour d’expérience designer-développeur

30

4-Process au sein du développement

Page 31: Retour d’expérience designer-développeur

31

4-Process au sein du développement

Page 32: Retour d’expérience designer-développeur

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

Page 33: Retour d’expérience designer-développeur

33

DémoOutil de visualisation

Page 34: Retour d’expérience designer-développeur

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

Page 35: Retour d’expérience designer-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

Page 36: Retour d’expérience designer-développeur

36

DémoLCL à la carte pour Microsoft Surface

Page 37: Retour d’expérience designer-développeur

37

Conclusion

Page 38: Retour d’expérience designer-développeur

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

Page 39: Retour d’expérience designer-développeur

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

Page 40: Retour d’expérience designer-développeur

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

Page 41: Retour d’expérience designer-développeur

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

Page 42: Retour d’expérience designer-développeur

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

Page 43: Retour d’expérience designer-développeur

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

Page 44: Retour d’expérience designer-développeur

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

Page 45: Retour d’expérience designer-développeur

45

Contacts

Nos blogshttp://blog.chaos-web.org/http://www.johannarowe.com/

Nos twitter@nicolascalvi@johanna_rowe

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

Page 46: Retour d’expérience designer-développeur

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

Page 47: Retour d’expérience designer-développeur