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