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