palais descongrèsParis7, 8 et 9février 2012
Vous êtes dans la salle 351Retour dexpérience sur la conception dune application METRO pour WP7
Retour dexpérience sur laconception duneapplication METRO pourWP7                    09.02.2012Aude MoussetDesigner Intera...
ROAD MAP LES OBJECTIFS METRO APPLICATION PEPS’SEASON en version METRO CONCEPTION TECHNIQUE PRODUCTION METRO CONCEPTION VIS...
LES OBJECTIFS METRO09.02.2011Aude MOUSSET & Eric AMBROSIPeps Interactive
DE CLI à NUI…  Command Line Interface - CLI          beaucoup d’entrées peu de résultats          Nécessite beaucoup de ...
DE CLI à NUI…  Natural User Interface - NUI…      Peu d’efforts pour beaucoup de résultats      En prise avec le réel   ...
DE CLI à NUI…  … Natural User Interface - NUI     La technique est invisible, pas de « blue screen » ou de pop-up      d’...
NUI…Crée des UNIVERS COHÉRENTS en lien avec le mondephysiqueCes univers facilitent l’IMMERSION des utilisateursAgir devien...
QU’EST-CE QUE METRO ?
QU’EST-CE QUE METRO ?  Ergonomie…    Composants clés (Librairie de contrôles Silverlight 4 dédiée à     WP7)   Pivot     ...
QU’EST-CE QUE METRO ?  …Ergonomie   Structure de page grille   Transitions
QU’EST-CE QUE METRO ?  Graphisme   Typographie, corps de texte   Couleur d’accentuation
QU’EST-CE QUE METRO ?  Une identité visuelle commune aux environnement tactiles  Microsoft  Telerik propose un thème METRO...
Exemple d’applicationnom de codePEPS’SEASON09.02.2011Eric AMBROSIPeps Interactive
OBJECTIFS  Proposer une liste de fruits et légumes de saison  Donner accès au bilan énergétique de chaque produit  …  Fina...
MAP DE NAVIGATION PEPS’SEASON              Immersion et ExplorationChronologie
MAP DE NAVIGATION PEPS’SEASON       Immersion et Exploration                                  RechercheChronologie
MAP DE NAVIGATION PEPS’SEASON       Immersion et Exploration                                  Consultation                ...
PEPS’SEASON FULL METRO
CONCEPTIONTECHNIQUE09.02.2011Eric AMBROSIPeps Interactive
SERVICES ET DONNÉES  Base de donnée SQL AZURE  Couche de services AZURE  ENTITY FRAMEWORK et WCF
…SERVICES ET DONNÉESBACK OFFICE                         FRONT OFFICE•   Modèle de données complexe      •   Modèle de donn...
BILAN TECHNIQUE  Synchronisation et stockage locale (IsolatedStorage) pour  le mode déconnecté  Modèle simplifié côté Fron...
BILAN TECHNIQUE  Un unique ViewModel mis à part pour une ou deux pages  spécifiques  Utilisation unique du jpeg  En mode m...
UNE PRODUCTIONMETRO09.02.2011Eric AMBROSIPeps Interactive
PROFILS NECESSAIRES  Gestion de projet  Ergonomie  Architecture  Développement  Intégration / Design Interactif  Graphisme...
PEPS’SEASONCHARGES EN MODE METRO              Mode METRO 14 jours                       8     2                           ...
POURQUOI ALLER PLUS LOIN ?  À VOTRE AVIS QU’EST-   CE QUI NE VA PAS ?
CONCEPTION VISUELLEET METRO09.02.2011Aude MOUSSET et Eric AMBROSIPeps Interactive
LA CONCEPTION VISUELLEEST PARTOUT  chez soi ou sur soi  dans la presse, à la télé  dans les applications ?
POURQUOI S’APPUYER SUR LANORME VISUELLE METRO ?  Faciliter la production  L’application est une simple extension des fonct...
OU PAS..  Créer un univers immersif en rapport avec le sujet  Générer une émotion facilitant l’adoption utilisateur  Situe...
…OU PAS ?  Identifier la marque et être reconnu MONOPRIX                 DELL           COCA-                             ...
…OU PAS ?  Identifier la marque et être reconnu
…OU PAS ?  Identifier la marque et être reconnu
…OU PAS ?  Sortir du lot / se différencier de la concurrence
…OU PAS ?  Ne pas être piraté  ou copié facilementen rendantl’application unique etidentifiée
ADAPTER LA CHARTEGRAPHIQUE DU CLIENT09.02.2011Aude MOUSSET et Eric AMBROSIPeps Interactive
DÉFINIR UN SPLASHSCREEN ETPOSITIONNER LE LOGO N’EST PASSUFFISANT…  Le logo est conçu pour être affiché dans un contexte  g...
…DÉFINIR UN SPLASHSCREEN ETPOSITIONNER LE LOGO N’EST PASSUFFISANT  L’univers visuel doit être cohérent  Dans chaque page, ...
CONCEPTION D’UNE IDENTITEVISUELLE SOUS METRO…  Quels objets doit-on intégrer ?     La police de caractère     Arrière-pl...
PEPS’SEASON en versionoriginale
… CONCEPTION D’UNEIDENTITE VISUELLE SOUSMETRO  Quels sont les impacts ?     L’information est affichée de manière plus ad...
… CONCEPTION D’UNEIDENTITE VISUELLE SOUSMETRO
… CONCEPTION D’UNEIDENTITE VISUELLE SOUSMETRO  Quels sont les impacts ?   Les types Selector     L’applicationBar est à ...
PRODUCTION FINALE09.02.2011Aude MOUSSET et Eric AMBROSIPeps Interactive
FLUX DE PRODUCTIONCOMPLET  Définitions des objectifs et conception du cahier des charges  Début de la production  Phase d’...
METIERS NECESSAIRES  Gestion de projet  Ergonomie  Architecture  Développement  Intégration / Design Interactif  Graphisme...
PEPS’SEASONCHARGES TOTALESCOMPAREES (13 jours)          Avant                   Après (40 jours)                         1...
COMPARATIF AVANT ET APRES  Identité visuelle standard peu  adaptée au sujet dans de          Idéntité visuelle unique adap...
COMPARATIF AVANT / APRES
MERCI !Aude Moussetaude@peps-interactive.frEric Ambrosieric@peps-interactive.fr
Pour aller plus loin                                               Prochaines sessions des Dev Camps  Chaque semaine, les ...
Upcoming SlideShare
Loading in...5
×

Retour d'expérience sur la conception et la construction d'une application METRO pour WP7

71

Published on

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 !

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
71
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Retour d'expérience sur la conception et la construction d'une application METRO pour WP7

  1. 1. palais descongrèsParis7, 8 et 9février 2012
  2. 2. Vous êtes dans la salle 351Retour dexpérience sur la conception dune application METRO pour WP7
  3. 3. Retour dexpérience sur laconception duneapplication METRO pourWP7 09.02.2012Aude MoussetDesigner InteractifEric AmbrosiArchitecte User eXperiencePeps Interactive – www.peps-interactive.fr
  4. 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. 5. LES OBJECTIFS METRO09.02.2011Aude MOUSSET & Eric AMBROSIPeps Interactive
  6. 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. 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. 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. 9. NUI…Crée des UNIVERS COHÉRENTS en lien avec le mondephysiqueCes univers facilitent l’IMMERSION des utilisateursAgir devient NATURELL’interaction et la découverte génèrent du PLAISIRLe plaisir est vecteur d’ADOPTION Devices
  10. 10. QU’EST-CE QUE METRO ?
  11. 11. QU’EST-CE QUE METRO ? Ergonomie…  Composants clés (Librairie de contrôles Silverlight 4 dédiée à WP7) Pivot Panorama
  12. 12. QU’EST-CE QUE METRO ? …Ergonomie  Structure de page grille  Transitions
  13. 13. QU’EST-CE QUE METRO ? Graphisme  Typographie, corps de texte  Couleur d’accentuation
  14. 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. 15. Exemple d’applicationnom de codePEPS’SEASON09.02.2011Eric AMBROSIPeps Interactive
  16. 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. 17. MAP DE NAVIGATION PEPS’SEASON Immersion et ExplorationChronologie
  18. 18. MAP DE NAVIGATION PEPS’SEASON Immersion et Exploration RechercheChronologie
  19. 19. MAP DE NAVIGATION PEPS’SEASON Immersion et Exploration Consultation Navigation horizontale RechercheChronologie
  20. 20. PEPS’SEASON FULL METRO
  21. 21. CONCEPTIONTECHNIQUE09.02.2011Eric AMBROSIPeps Interactive
  22. 22. SERVICES ET DONNÉES Base de donnée SQL AZURE Couche de services AZURE ENTITY FRAMEWORK et WCF
  23. 23. …SERVICES ET DONNÉESBACK 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. 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. 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. 26. UNE PRODUCTIONMETRO09.02.2011Eric AMBROSIPeps Interactive
  27. 27. PROFILS NECESSAIRES Gestion de projet Ergonomie Architecture Développement Intégration / Design Interactif Graphisme TRANSVERSE
  28. 28. PEPS’SEASONCHARGES EN MODE METRO Mode METRO 14 jours 8 2 2 1 1
  29. 29. POURQUOI ALLER PLUS LOIN ? À VOTRE AVIS QU’EST- CE QUI NE VA PAS ?
  30. 30. CONCEPTION VISUELLEET METRO09.02.2011Aude MOUSSET et Eric AMBROSIPeps Interactive
  31. 31. LA CONCEPTION VISUELLEEST PARTOUT chez soi ou sur soi dans la presse, à la télé dans les applications ?
  32. 32. POURQUOI S’APPUYER SUR LANORME 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. 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. 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. 35. …OU PAS ? Identifier la marque et être reconnu
  36. 36. …OU PAS ? Identifier la marque et être reconnu
  37. 37. …OU PAS ? Sortir du lot / se différencier de la concurrence
  38. 38. …OU PAS ? Ne pas être piraté ou copié facilementen rendantl’application unique etidentifiée
  39. 39. ADAPTER LA CHARTEGRAPHIQUE DU CLIENT09.02.2011Aude MOUSSET et Eric AMBROSIPeps Interactive
  40. 40. DÉFINIR UN SPLASHSCREEN ETPOSITIONNER LE LOGO N’EST PASSUFFISANT… Le logo est conçu pour être affiché dans un contexte graphique spécifique
  41. 41. …DÉFINIR UN SPLASHSCREEN ETPOSITIONNER LE LOGO N’EST PASSUFFISANT 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. 42. CONCEPTION D’UNE IDENTITEVISUELLE 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. 43. PEPS’SEASON en versionoriginale
  44. 44. … CONCEPTION D’UNEIDENTITE VISUELLE SOUSMETRO 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. 45. … CONCEPTION D’UNEIDENTITE VISUELLE SOUSMETRO
  46. 46. … CONCEPTION D’UNEIDENTITE VISUELLE SOUSMETRO Quels sont les impacts ?  Les types Selector  L’applicationBar est à adapter
  47. 47. PRODUCTION FINALE09.02.2011Aude MOUSSET et Eric AMBROSIPeps Interactive
  48. 48. FLUX DE PRODUCTIONCOMPLET 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. 49. METIERS NECESSAIRES Gestion de projet Ergonomie Architecture Développement Intégration / Design Interactif Graphisme Illustration TRANSVERSE Design sonore
  50. 50. PEPS’SEASONCHARGES TOTALESCOMPAREES (13 jours) Avant Après (40 jours) 10 10 8 8 5 4 3 3 2 2 1 1 0 0 TRANSVERSE
  51. 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. 52. COMPARATIF AVANT / APRES
  53. 53. MERCI !Aude Moussetaude@peps-interactive.frEric Ambrosieric@peps-interactive.fr
  54. 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 dun Studio Pro, avec l’abonnement MSDN 2012 Meeting template METRO javascript 20 mars Live Retour dexpérience LightSwitch, Optimisation de www.visualstudio.fr 2012 Meeting laccès aux données, Intégration Silverlight 23 mars Live OAuth - la clé de lutilisation des réseaux sociaux dans 2012 Meeting votre application
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×