29

Ergonomie et design d'applications Windows Phone 7 Comprendre Metro (WP7103) Pierre Cauchois – Aude Mousset

Embed Size (px)

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