• Share
  • Email
  • Embed
  • Like
  • Private Content
Retour d'expérience sur la conception et la construction d'une application METRO pour WP7
 

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

on

  • 183 views

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

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 !

Statistics

Views

Total Views
183
Views on SlideShare
183
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 InteractifEric AmbrosiArchitecte User eXperiencePeps Interactive – www.peps-interactive.fr
    • 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
    • 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 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
    • 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
    • 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
    • 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
    • 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 Panorama
    • 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 SILVERLIGHT / WPF Windows Windows 8 Phone 7
    • 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 … Finalité : améliorer les modes de consommation
    • 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 Navigation horizontale RechercheChronologie
    • 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ées simplifié• Echange des données au format • Echange des données au format Binaire XML
    • 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
    • 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
    • UNE PRODUCTIONMETRO09.02.2011Eric AMBROSIPeps Interactive
    • PROFILS NECESSAIRES Gestion de projet Ergonomie Architecture Développement Intégration / Design Interactif Graphisme TRANSVERSE
    • PEPS’SEASONCHARGES EN MODE METRO Mode METRO 14 jours 8 2 2 1 1
    • 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 fonctionnalités existantes de l’OS Développement simple d’un particulier Aucun besoin d’identification spécifique Pas de graphiste ou de designer
    • 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
    • …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
    • …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 graphique spécifique
    • …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.
    • 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
    • PEPS’SEASON en versionoriginale
    • … 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
    • … CONCEPTION D’UNEIDENTITE VISUELLE SOUSMETRO
    • … CONCEPTION D’UNEIDENTITE VISUELLE SOUSMETRO Quels sont les impacts ?  Les types Selector  L’applicationBar est à adapter
    • 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’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
    • METIERS NECESSAIRES Gestion de projet Ergonomie Architecture Développement Intégration / Design Interactif Graphisme Illustration TRANSVERSE Design sonore
    • 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
    • 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
    • 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 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