Ergonomie et design d'applications Windows Phone 7 Comprendre Metro (WP7103) Pierre Cauchois –...
Preview:
Citation preview
- Page 1
- Page 2
- Ergonomie et design d'applications Windows Phone 7 Comprendre
Metro (WP7103) Pierre Cauchois Aude Mousset
- Page 3
- Metro
- Page 4
- Quels utilisateurs ?
- Page 5
- Page 6
- METRO
- Page 7
- Page 8
- Page 9
- typographie
- Page 10
- corps de typo
- Page 11
- Layout misalignment correctincorrect Login here Metro est
structur par une grille - Les composants pivots et panorama doivent
tre ferrs gauche, avec une marge de 24 pixels. Le contenu du
composant Pivot est optimis par rapport la taille de lcran et doit
tre align verticalement gabarit de page
- Page 12
- couleurs
- Page 13
- correctincorrect vitez Typo 3D Dgrads Coins arrondis Noir &
Blanc Icnes non descriptives Le logo doit tre lisible sur les thmes
sombres et sur le thme clair. Your ignored app vignettes
dynamiques
- Page 14
- Panorama : tendu Exploration Dynamiques Exemples: jeux, photos
Pivot : Efficace Dirig Utilisation rgulire Exemples: email,
calendrier navigation
- Page 15
- Panorama ou Pivot? Panorama Suggrer Explorer Rappeler
Personnaliser Non Exhaustif Unique Couverture de magazine Pas
dapp-bar Pas de mode paysage Charge tout en mme temps Pivot
navigation Naviguer Sparer Trier Exhaustif Multiples Onglet App-bar
Mode paysage Charger les items sparment
- Page 16
- animations Utilisez les animations pour accompagner
lutilisateur. Plus vous utilisez les animations, moins elles auront
dintrt. Lutilisation des animations doit tre mesure.
- Page 17
- Erreurs frquente s
- Page 18
- correctincorrect Login here Boutons masqus par le clavier
- Page 19
- correctincorrect Login here Oubli de lcran daccueil
- Page 20
- correctincorrect Login here Le design et les couleurs utilises
doivent fonctionnes avec le thme choisit par lutilisateur, quil
soit clair ou sombre. Dans le cas o votre application dpend
fortement dune palette de couleur spcifique, verrouillez les
couleurs et vitez les couleurs systme. Ne fonctionne pas aussi bien
sur du clair Lorsque le theme du tlphone est modifi du sombre au
clair, certaines couleurs ne seront plus lisibles. Est lisible sur
un fond sombre Texte illisible
- Page 21
- correctincorrect Login here Taille minimale de la police :
15pt. Taille recommande pour une zone tactile 9 mm Taille min. :
7mm Espace min. entre 2 lments : 2mm Taille visuelle dun lment : 60
100% de la zone tactile Pensez au retour utilisateur lorsquun lment
est touch Doesnt work as well on hte When the core device thme
color is changed from dak to light certain colors will no longer be
readable. Is readable on a dark background 1) Sheraton New York
Hotel 2) Sheraton Manhattan Hotel 3) Sheraton Tribeca Design orient
clic
- Page 22
- correctincorrect Leffet tilt sur le texte slectionn donne un
retour supplmentaire lutilisateur qui lui confirme que laction
effectue a t prise en compte. Sans cela lutilisateur nest pas sr
que son action a t comprise jusqu ce que la case coche soit coche.
Llment slectionn grossit et bouge pour indiquer quel lment a t
slectionn. Manque de retours utilisateurs
- Page 23
- incorrect Utilisez les contrles Silverlight et vitez dutiliser
du contenu web. Si vous devez intgrer du contenu web dans votre
application : 1)Nactiivez pas les gestures pinching, zooming, or
panning. 2)Assurez-vous que ce contenu est compltement lisible.
Intgrer du contenu web avec des comportements navigateurs
- Page 24
- incorrect Utilisez les contrles WP7 de la bonne manire :
Nutilisez pas les sliders, toggles ou les map controls dans un
panorama ou un pivot ils ncessitent les mmes gestures pour
fonctionner. Mauvaise utilisation des contrles
- Page 25
- - Contenu trop important qui sort du cadre - Utilisation de
lapplication bar - Fond trop prsent. - scrolling multiple incorrect
my crowded panorama Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborumea commodo consequat. Duis aute irure
dolor vitez les erreurs du panorama
- Page 26
- Invitez lutilisateur explorer. A ce niveau, affichez une petite
quantit de taches attractives. Lexploration doit mener des tches
spcifiques. Utilisation correcte du panorama
- Page 27
- Inclure un nouveau mcanisme de navigation dans linterface va
interfrer avec le principe du bouton back et crer une boucle.
incorrect Utilisation dun bouton home
- Page 28
- Manuel de TYPOGRAPHIE FRANCAISE lmentaire Yves Perrousseaux
Atelier Perrousseaux ressources utiles
- Page 29
- Blog Clarity Consulting :
http://blogs.claritycon.com/blog/category/wp7/
http://blogs.claritycon.com/blog/category/wp7/ SL Toolkit
http://silverlight.codeplex.com/http://silverlight.codeplex.com/
Icones C:\Program Files (x86)\Microsoft SDKs\Windows
Phone\v7.0\Icons Noun Project
http://www.thenounproject.com/http://www.thenounproject.com/
Templates
http://go.microsoft.com/fwlink/?LinkId=196225http://go.microsoft.com/fwlink/?LinkId=196225
Vido Design Days
http://blogs.msdn.com/b/jaimer/archive/2010/08/13/windows
-phone-design-day-recordings.aspx
http://blogs.msdn.com/b/jaimer/archive/2010/08/13/windows
-phone-design-day-recordings.aspx ressources utiles