Ergonomie et design d'applications Windows Phone 7 - Comprendre Metro

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

Quels utilisateurs ?4

5METRO

6METRO

7

typographie

9

corps de typo10Layout misalignmentcorrectincorrect

Login hereMetro 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

couleurs12correctincorrectvitezTypo 3DDgradsCoins arrondisNoir & BlancIcnes non descriptivesLe logo doit tre lisible sur les thmes sombres et sur le thme clair.

3

Your ignored app

3D

vignettes dynamiquesPanorama :tenduExplorationDynamiquesExemples: jeux, photos

Pivot :EfficaceDirigUtilisation rgulireExemples: email, calendrier

navigation14Panorama ou Pivot?PanoramaSuggrerExplorerRappelerPersonnaliserNon ExhaustifUnique

Couverture de magazine

Pas dapp-barPas de mode paysageCharge tout en mme temps

PivotnavigationNaviguerSparerTrier

ExhaustifMultiples

Onglet

App-barMode paysageCharger les items sparment

15animationsUtilisez les animations pour accompagner lutilisateur.

Plus vous utilisez les animations, moins elles auront dintrt. Lutilisation des animations doit tre mesure.Erreurs frquentes

correctincorrect

Login here

Boutons masqus par le claviercorrectincorrect

Login here

Oubli de lcran daccueilcorrectincorrect

Login hereLe 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 clairLorsque le theme du tlphone est modifi du sombre au clair, certaines couleurs ne seront plus lisibles.Est lisible sur un fond sombreTexte illisiblecorrectincorrect

Login hereTaille 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 hteWhen the core device thmecolor is changed from dak to light certain colors will no longer be readable.Is readable on a darkbackground

1) Sheraton New York Hotel2) Sheraton Manhattan Hotel3) Sheraton Tribeca

Design orient cliccorrectincorrect

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 utilisateursincorrectUtilisez les contrles Silverlight et vitez dutiliser du contenu web.

Si vous devez intgrer du contenu web dans votre application :Nactiivez pas les gestures pinching, zooming, or panning.Assurez-vous que ce contenu est compltement lisible.

Intgrer du contenu web avec des comportements navigateursincorrectUtilisez 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 contrles24- 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 panorama25

Invitez lutilisateur explorer. A ce niveau, affichez une petite quantit de taches attractives. Lexploration doit mener des tches spcifiques.

Utilisation correcte du panorama26Inclure un nouveau mcanisme de navigation dans linterface va interfrer avec le principe du bouton back et crer une boucle.

incorrectUtilisation dun bouton home27Manuel de TYPOGRAPHIE FRANCAISE lmentaire Yves Perrousseaux Atelier Perrousseauxressources utiles

Blog Clarity Consulting : http://blogs.claritycon.com/blog/category/wp7/

SL Toolkit http://silverlight.codeplex.com/

IconesC:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\IconsNoun Project http://www.thenounproject.com/Templates http://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

ressources utiles