La plupart des applications WP7 restent dans les lignes visuelles METRO. Pourtant il est possible de créer des applications ayant une forte personnalité graphique, tout en suivant l'ergonomie METRO. Nous vous proposons de vous faire partager notre expérience, avec les bonnes pratiques en terme d'utilisation de composants et de workflow. Comprenez l'ergonomie METRO et mettez du graphisme dans vos applications !

1. palais des
congrès
Paris
7, 8 et 9
février 2012

2. Vous êtes dans la salle 351
Retour d'expérience sur la conception d'une application METRO pour WP7

3. Retour d'expérience sur la
conception d'une
application METRO pour
WP7 09.02.2012
Aude Mousset
Designer Interactif
Eric Ambrosi
Architecte User eXperience
Peps Interactive – www.peps-interactive.fr

4. ROAD MAP
LES OBJECTIFS METRO
APPLICATION PEPS’SEASON en version METRO
CONCEPTION TECHNIQUE
PRODUCTION METRO
CONCEPTION VISUELLE et METRO
ADAPTER LA CHARTE GRAPHIQUE DU CLIENT
PEPS’SEASON en version originale
CHARGE DE PRODUCTION FINALE
Agenda/Plan

5. LES OBJECTIFS METRO
09.02.2011
Aude MOUSSET & Eric AMBROSI
Peps Interactive

6. DE CLI à NUI…
Command Line Interface - CLI
 beaucoup d’entrées peu de résultats
 Nécessite beaucoup de
connaissances avant d’être utilisable
Graphic User Interface - GUI
 Interface graphique en mode fenêtré
 Basée sur l’exploration, le test et la
pédagogie par l’erreur

7. DE CLI à NUI…
Natural User Interface - NUI…
 Peu d’efforts pour beaucoup de résultats
 En prise avec le réel
 Tactile
 Boussole GPS, Accéléromètre et Gyroscope
 Vidéo conférence
 Le corps humain devient le périphérique et remplace claviers et souris. Il
est le medium permettant l’interaction.
Devices

8. DE CLI à NUI…
… Natural User Interface - NUI
 La technique est invisible, pas de « blue screen » ou de pop-up
d’erreur
 Interaction instantanée comme dans l’environnement physique
 L’apprentissage repose sur l’expérience acquise dans le monde
physique
Devices

9. NUI…
Crée des UNIVERS COHÉRENTS en lien avec le monde
physique
Ces univers facilitent l’IMMERSION des utilisateurs
Agir devient NATUREL
L’interaction et la découverte génèrent du PLAISIR
Le plaisir est vecteur d’ADOPTION
Devices

10. QU’EST-CE QUE METRO ?

11. QU’EST-CE QUE METRO ?
Ergonomie…
 Composants clés (Librairie de contrôles Silverlight 4 dédiée à
WP7)
Pivot Panorama

12. QU’EST-CE QUE METRO ?
…Ergonomie
 Structure de page grille
 Transitions

13. QU’EST-CE QUE METRO ?
Graphisme
 Typographie, corps de texte
 Couleur d’accentuation

14. QU’EST-CE QUE METRO ?
Une identité visuelle commune aux environnement tactiles
Microsoft
Telerik propose un thème METRO SILVERLIGHT / WPF
Windows Windows 8
Phone 7

15. Exemple d’application
nom de code
PEPS’SEASON
09.02.2011
Eric AMBROSI
Peps Interactive

16. OBJECTIFS
Proposer une liste de fruits et légumes de saison
Donner accès au bilan énergétique de chaque produit
…
Finalité : améliorer les modes de consommation

17. MAP DE NAVIGATION PEPS’SEASON
Immersion et Exploration
Chronologie

18. MAP DE NAVIGATION PEPS’SEASON
Immersion et Exploration
Recherche
Chronologie

19. MAP DE NAVIGATION PEPS’SEASON
Immersion et Exploration
Consultation
Navigation
horizontale
Recherche
Chronologie

20. PEPS’SEASON FULL METRO

21. CONCEPTION
TECHNIQUE
09.02.2011
Eric AMBROSI
Peps Interactive

22. SERVICES ET DONNÉES
Base de donnée SQL AZURE
Couche de services AZURE
ENTITY FRAMEWORK et WCF

23. …SERVICES ET DONNÉES
BACK OFFICE FRONT OFFICE
• Modèle de données complexe • Modèle de données simplifié
• Echange des données au format • Echange des données au format
Binaire XML

24. BILAN TECHNIQUE
Synchronisation et stockage locale (IsolatedStorage) pour
le mode déconnecté
Modèle simplifié côté FrontOffice
Limitation du nombre d’instances
Traitements des collections à l’initialisation Launching
Gestion de l’activation / désactivation de l’application

25. BILAN TECHNIQUE
Un unique ViewModel mis à part pour une ou deux pages
spécifiques
Utilisation unique du jpeg
En mode métro pas de transitions proposées par défaut
Limitation des traitements au runtime côté vue et vue-
modèle
Limitation des convertisseurs (IValueConverter) pour
alléger le processeur ARM
Ajout de propriétés calculées en remplacement

26. UNE PRODUCTION
METRO
09.02.2011
Eric AMBROSI
Peps Interactive

27. PROFILS NECESSAIRES
Gestion de projet
Ergonomie
Architecture
Développement
Intégration / Design Interactif
Graphisme TRANSVERSE

28. PEPS’SEASON
CHARGES EN MODE METRO
Mode METRO 14 jours
8
2 2
1 1

29. POURQUOI ALLER PLUS LOIN ?
À VOTRE AVIS QU’EST-
CE QUI NE VA PAS ?

30. CONCEPTION VISUELLE
ET METRO
09.02.2011
Aude MOUSSET et Eric AMBROSI
Peps Interactive

31. LA CONCEPTION VISUELLE
EST PARTOUT
chez soi ou sur soi
dans la presse, à la télé
dans les applications ?

32. POURQUOI S’APPUYER SUR LA
NORME VISUELLE METRO ?
Faciliter la production
L’application est une simple extension des fonctionnalités
existantes de l’OS
Développement simple d’un particulier
Aucun besoin d’identification spécifique
Pas de graphiste ou de designer

33. OU PAS..
Créer un univers immersif en rapport avec le sujet
Générer une émotion facilitant l’adoption utilisateur
Situer l’utilisateur plus simplement via des indices visuels
forts

34. …OU PAS ?
Identifier la marque et être reconnu
MONOPRIX DELL COCA-
COLA
MICROSOF BMW CIC
T
ELLE H&M CARREFOU
R
CARAMBA KENZO MILKA
R

35. …OU PAS ?
Identifier la marque et être reconnu

36. …OU PAS ?
Identifier la marque et être reconnu

37. …OU PAS ?
Sortir du lot / se différencier de la concurrence

38. …OU PAS ?
Ne pas être piraté
ou copié facilement
en rendant
l’application unique et
identifiée

39. ADAPTER LA CHARTE
GRAPHIQUE DU CLIENT
09.02.2011
Aude MOUSSET et Eric AMBROSI
Peps Interactive

40. DÉFINIR UN SPLASHSCREEN ET
POSITIONNER LE LOGO N’EST PAS
SUFFISANT…
Le logo est conçu pour être affiché dans un contexte
graphique spécifique

41. …DÉFINIR UN SPLASHSCREEN ET
POSITIONNER LE LOGO N’EST PAS
SUFFISANT
L’univers visuel doit être cohérent
Dans chaque page, la charte graphique du client doit être
identifiable
Les couleurs représentent un moyen d’identifier le client.
Le thème de couleur Windows Phone 7 peut devenir
source de conflit avec les couleurs du client.

42. CONCEPTION D’UNE IDENTITE
VISUELLE SOUS METRO…
Quels objets doit-on intégrer ?
 La police de caractère
 Arrière-plans, illustrations
 Des animations
 Des sons et des ambiances sonore pour appuyer le
visuel

43. PEPS’SEASON en version
originale

44. … CONCEPTION D’UNE
IDENTITE VISUELLE SOUS
METRO
Quels sont les impacts ?
 L’information est affichée de manière plus adaptée et
cohérente tout en respectant la structure grille METRO
 Le développement IHM est plus long
 Optimisation des mécanismes d’affichage
 La logique de transition est plus complexe dès que
l’on utilise un arrière-plan complexe avec matière.
 Adaptation dynamique des arrière plans

45. … CONCEPTION D’UNE
IDENTITE VISUELLE SOUS
METRO

46. … CONCEPTION D’UNE
IDENTITE VISUELLE SOUS
METRO
Quels sont les impacts ?
 Les types Selector
 L’applicationBar est à adapter

47. PRODUCTION FINALE
09.02.2011
Aude MOUSSET et Eric AMBROSI
Peps Interactive

48. FLUX DE PRODUCTION
COMPLET
Définitions des objectifs et conception du cahier des charges
Début de la production
Phase d’ergonomie
Conception de la charte graphique basée sur les maquettes
filaires METRO
Début du développement
Intégration des assets sonores à partir d’une capture vidéo de
l’application
Phase de recette

49. METIERS NECESSAIRES
Gestion de projet
Ergonomie
Architecture
Développement
Intégration / Design Interactif
Graphisme
Illustration
TRANSVERSE
Design sonore

50. PEPS’SEASON
CHARGES TOTALES
COMPAREES (13 jours)
Avant Après (40 jours)
10 10
8 8
5
4
3 3
2 2
1 1
0 0
TRANSVERSE

51. COMPARATIF AVANT ET APRES
Identité visuelle standard peu
adaptée au sujet dans de Idéntité visuelle unique adaptée au
nombreux cas sujet
Rapide à produire Jusqu’à 3 fois plus longue à
produire
Plus facile à réaliser
Immersive et agréable.
Peu reconnaissable
Difficile à copier
Peu immersive
Facile à décliner sur d’autres plate-
Moins agréable et dégageant peu formes type Windows 8
d’émotions
Assets graphiques transverses
Facile à copier ou à pirater réutilisables

52. COMPARATIF AVANT / APRES

53. MERCI !
Aude Mousset
aude@peps-interactive.fr
Eric Ambrosi
eric@peps-interactive.fr

54. Pour aller plus loin
Prochaines sessions des Dev Camps
Chaque semaine, les 10
Live Open Data - Développer des applications riches avec le
février
DevCamps 2012
16
Meeting protocole Open Data
ALM, Azure, Windows Phone, HTML5, OpenData février
Live
Meeting
Azure series - Développer des applications sociales sur
la plateforme Windows Azure
2012
http://msdn.microsoft.com/fr-fr/devcamp
17
Live Comprendre le canvas avec Galactic et la librairie
février
Meeting three.js
2012
Téléchargement, ressources 21
février
Live La production automatisée de code avec CodeFluent
Meeting Entities
et toolkits : RdV sur MSDN 2012
2 mars Live Comprendre et mettre en oeuvre le toolkit Azure pour
http://msdn.microsoft.com/fr-fr/ 2012 Meeting Windows Phone 7, iOS et Android
6 mars Live
Nuget et ALM
2012 Meeting
Les offres à connaître 9 mars
2012
Live
Meeting
Kinect - Bien gérer la vie de son capteur
90 jours d’essai gratuit de Windows 13 mars
2012
Live
Meeting
Sharepoint series - Automatisation des tests
Azure 14 mars Live TFS Health Check - vérifier la bonne santé de votre
www.windowsazure.fr 2012 Meeting plateforme de développement
15 mars Live Azure series - Développer pour les téléphones, les
2012 Meeting tablettes et le cloud avec Visual Studio 2010
Jusqu’à 35% de réduction sur Visual 16 mars Live Applications METRO design - Désossage en règle d'un
Studio Pro, avec l’abonnement MSDN 2012 Meeting template METRO javascript
20 mars Live Retour d'expérience LightSwitch, Optimisation de
www.visualstudio.fr 2012 Meeting l'accès aux données, Intégration Silverlight
23 mars Live OAuth - la clé de l'utilisation des réseaux sociaux dans
2012 Meeting votre application