1 / 29

Ergonomie et design d'applications Windows Phone 7

Ergonomie et design d'applications Windows Phone 7. Comprendre Metro (WP7103) Pierre Cauchois – Aude Mousset. Metro. Quels utilisateurs ?. METRO. METRO. typographie. corps de typo. gabarit de page. Layout misalignment. correct. incorrect.

willa
Download Presentation

Ergonomie et design d'applications Windows Phone 7

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Metro

  3. Quelsutilisateurs ?

  4. METRO

  5. METRO

  6. typographie

  7. corps de typo

  8. gabarit de page Layout misalignment correct incorrect Metro eststructuré par une grille - Les composants pivots et panorama doiventêtreferrés à gauche, avec unemarge de 24 pixels. Le contenu du composant Pivot estoptimisé par rapport à la taille de l’écran et doitêtrealignéverticalement Login here

  9. couleurs

  10. 3D vignettes dynamiques correct incorrect • évitez • Typo 3D • Dégradés • Coins arrondis • Noir & Blanc • Icônes non descriptives • Le logo doitêtrelisiblesur les thèmessombres et sur le thèmeclair. 3 Your ignored app

  11. navigation Pivot : Efficace Dirigé Utilisationrégulière Exemples: email, calendrier Panorama : Étendu Exploration Dynamiques Exemples: jeux, photos

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

  13. animations Utilisez les animations pour accompagnerl’utilisateur. Plus vousutilisez les animations, moinsellesaurontd’intérêt. L’utilisation des animations doitêtremesurée.

  14. Erreurs fréquentes

  15. Boutonsmasqués par le clavier correct incorrect Login here

  16. Oubli de l’écrand’accueil correct incorrect Login here

  17. Texteillisible correct incorrect Le design et les couleursutiliséesdoiventfonctionnées avec lethèmechoisit par l’utilisateur, qu’ilsoitclairousombre. Dans le casoùvotre application dépendfortementd’une palette de couleurspécifique,verrouillez les couleurs et évitez les couleurssystème. Ne fonctionne pas aussibiensur du clair Estlisiblesur un fond sombre Lorsque le theme du téléphoneestmodifié du sombre au clair, certainescouleurs ne seront plus lisibles. Login here

  18. Design orientéclic correct incorrect Tailleminimale de la police : 15pt. Taillerecommandée pour une zone tactile 9 mm Taille min. : 7mm Espace min. entre 2 éléments : 2mm Taillevisuelle d’un élément : 60 à 100% de la zone tactile Pensez au retour utilisateurlorsqu’unélémentest touché Doesn’t work as well on hte Is readable on a dark background When the core device thme color is changed from dak to light certain colors will no longer be readable. 1) Sheraton New York Hotel 2) Sheraton Manhattan Hotel 3) Sheraton Tribeca Login here

  19. Manque de retours utilisateurs correct incorrect L’effet tilt sur le textesélectionnédonne un retour supplémentaire à l’utilisateur qui luiconfirmequel’actioneffectuée a étéprise en compte. Sans celal’utilisateurn’est pas sûrque son action a été comprise jusqu’àceque la case à cochéesoitcochée. L’élémentsélectionnégrossit et bouge pour indiquerquelélément a étésélectionné.

  20. Intégrer du contenu web avec des comportementsnavigateurs incorrect • Utilisez les contrôles Silverlight et évitezd’utiliser du contenu web. • Si vousdevezintégrer du contenu web dansvotre application : • N’actiivez pas les gestures pinching, zooming, or panning. • Assurez-vousquececontenuestcomplètementlisible.

  21. Mauvaiseutilisation des contrôles incorrect Utilisez les contrôles WP7 de la bonnemanière : N’utilisez pas les sliders, toggles ou les map controls dans un panorama ou un pivot – ilsnécessitent les mêmes gestures pour fonctionner.

  22. Évitez les erreurs du panorama incorrect • - Contenutrop important qui sort du cadre- Utilisation de l’application bar- Fond tropprésent.- scrolling multiple 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, quisnostrud exercitation ullamcolaboris nisi ut aliquip ex eacommodo consequat. Duis aute irure dolor in reprehenderit in voluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborumeacommodo consequat. Duis aute irure dolor

  23. Utilisationcorrecte du panorama Invitezl’utilisateur à explorer. A ceniveau, affichezune petite quantité de tachesattractives. L’explorationdoitmener à des tâchesspécifiques.

  24. Utilisation d’un bouton home incorrect Inclure un nouveau mécanisme de navigation dansl’interfacevainterférer avec le principe du bouton back et créerune boucle.

  25. ressources utiles • Manuel de TYPOGRAPHIE FRANCAISE élémentaire – Yves Perrousseaux – Atelier Perrousseaux

  26. ressources utiles • Blog Clarity Consulting : http://blogs.claritycon.com/blog/category/wp7/ • SL Toolkithttp://silverlight.codeplex.com/ • Icones • C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons • Noun Project http://www.thenounproject.com/ • Templateshttp://go.microsoft.com/fwlink/?LinkId=196225 • Vidéo Design Dayshttp://blogs.msdn.com/b/jaimer/archive/2010/08/13/windows-phone-design-day-recordings.aspx

More Related