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

Présentation au sujet: "Ergonomie et design d'applications Windows Phone 7 Comprendre Metro (WP7103) Pierre Cauchois – Aude Mousset."— Transcription de la présentation:

1

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

3 Metro

4 Quels utilisateurs ?

5

6 METRO

7

8

9 typographie

10 corps de typo

11 Layout misalignment correctincorrect Login here Metro est structuré par une grille - Les composants pivots et panorama doivent être ferrés à gauche, avec une marge de 24 pixels. Le contenu du composant Pivot est optimisé par rapport à la taille de lécran et doit être aligné verticalement gabarit de page

12 couleurs

13 correctincorrect évitez Typo 3D Dégradés Coins arrondis Noir & Blanc Icônes non descriptives Le logo doit être lisible sur les thèmes sombres et sur le thème clair. Your ignored app vignettes dynamiques

14 Panorama : Étendu Exploration Dynamiques Exemples: jeux, photos Pivot : Efficace Dirigé Utilisation régulière Exemples: email, calendrier navigation

15 Panorama ou Pivot? Panorama Suggérer Explorer Rappeler Personnaliser Non Exhaustif Unique Couverture de magazine Pas dapp-bar Pas de mode paysage Charge tout en même temps Pivot navigation Naviguer Séparer Trier Exhaustif Multiples Onglet App-bar Mode paysage Charger les items séparément

16 animations Utilisez les animations pour accompagner lutilisateur. Plus vous utilisez les animations, moins elles auront dintérêt. Lutilisation des animations doit être mesurée.

17 Erreurs fréquente s

18 correctincorrect Login here Boutons masqués par le clavier

19 correctincorrect Login here Oubli de lécran daccueil

20 correctincorrect Login here Le design et les couleurs utilisées doivent fonctionnées avec le thème choisit par lutilisateur, quil soit clair ou sombre. Dans le cas où votre application dépend fortement dune palette de couleur spécifique, verrouillez les couleurs et évitez les couleurs système. Ne fonctionne pas aussi bien sur du clair Lorsque le theme du téléphone est modifié du sombre au clair, certaines couleurs ne seront plus lisibles. Est lisible sur un fond sombre Texte illisible

21 correctincorrect Login here Taille minimale de la police : 15pt. Taille recommandée pour une zone tactile 9 mm Taille min. : 7mm Espace min. entre 2 éléments : 2mm Taille visuelle dun élément : 60 à 100% de la zone tactile Pensez au retour utilisateur lorsquun élément 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

22 correctincorrect Leffet tilt sur le texte sélectionné donne un retour supplémentaire à lutilisateur qui lui confirme que laction effectuée a été prise en compte. Sans cela lutilisateur nest pas sûr que son action a été comprise jusquà ce que la case à cochée soit cochée. Lélément sélectionné grossit et bouge pour indiquer quel élément a été sélectionné. Manque de retours utilisateurs

23 incorrect Utilisez les contrôles Silverlight et évitez dutiliser du contenu web. Si vous devez intégrer du contenu web dans votre application : 1)Nactiivez pas les gestures pinching, zooming, or panning. 2)Assurez-vous que ce contenu est complètement lisible. Intégrer du contenu web avec des comportements navigateurs

24 incorrect Utilisez les contrôles WP7 de la bonne manière : Nutilisez pas les sliders, toggles ou les map controls dans un panorama ou un pivot – ils nécessitent les mêmes gestures pour fonctionner. Mauvaise utilisation des contrôles

25 - Contenu trop important qui sort du cadre - Utilisation de lapplication bar - Fond trop présent. - 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

26 Invitez lutilisateur à explorer. A ce niveau, affichez une petite quantité de taches attractives. Lexploration doit mener à des tâches spécifiques. Utilisation correcte du panorama

27 Inclure un nouveau mécanisme de navigation dans linterface va interférer avec le principe du bouton back et créer une boucle. incorrect Utilisation dun bouton home

28 Manuel de TYPOGRAPHIE FRANCAISE élémentaire – Yves Perrousseaux – Atelier Perrousseaux ressources utiles

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 Vidéo 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