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