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

Slides:



Advertisements
Présentations similaires
Scénariser une formation e-learning
Advertisements

Support.ebsco.com Guide dUtilisation Création dune collection locale.
© Dokeos STUDIO, Creative Commons BY-SA licenseDokeosCreative Commons BY-SA 1 Scénariser une formation e-learning Modèles pour les producteurs de contenu.
Bienvenue à la démonstration de Cisco WebExTM Meeting Center
Logiciel de création de brochures, de prospectus, de revues, etc.
ma date et mon pied de page (titre présentation)
Accès aux Métiers de l’Informatique
1 Comment utiliser votre Extranet Se connecter 2.My Site 3.Documentation 3.1 Documents dintégration 3.2 Documents types 4.Vos informations privées.
Concevoir un diaporama avec Power Point.
Sophie Ringuet, conseillère pédagogique
Interfaces et Scénarisation (COM2571) 29 octobre 2013 Grégory Petit
2 Introduction au SDK Windows Phone 7 Mardi 8 Février 2011 Pierre CAUCHOIS Relation avec les développeurs Microsoft Julien CORIOLAND Consultant / Formateur.
31 octobre 2012 Grégory Petit
Création et présentation d’un tableau avec Word 2007
relative à la motivation du licenciement: procédure et sanction (s)
TD11 : Logiciel de présentation PowerPoint
Commission locale de l'eau Réunion du 23 janvier 2012 REVISION DU SAGE PAGD Plan d'aménagement et de gestion durable de la ressource.
Commission locale de l'eau Réunion du 19 mars 2012 REVISION DU SAGE PAGD Plan d'aménagement et de gestion durable de la ressource.
Créez des applications Silverlight 3 David Rousset Relations Techniques avec les développeurs Microsoft France
Sommaire portrait de tc transcontinental 3 Sous-titre
Réaliser un diaporama Notions de bases Ecoles de Tavannes
MEDIASOFT LAFAYETTE INTRODUCTION
1 Session de formation Windows 8.1 Bienvenue !. Module de formation 1 2 Sujets : Naviguez dans Windows 8.1 Découvrez les bases de la nouvelle interface,
Cours 3 21 janvier 2010 Quelques principes d’ergonomie de l’écran et du contenu de la page web Cours 3 21 janvier 2010 Quelques principes d’ergonomie de.
Bureau de la Commission locale de l'eau Réunion du 21 février 2012 REVISION DU SAGE PAGD Plan d'aménagement et de gestion durable de la ressource.
 Histoire. Your Text here Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
1 Silverlight & XNA Développeurs, à vous le mobile! Pierre Cauchois - Microsoft France Relations avec les développeurs (mobiles et embarqués)
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
Page 1 Name of presentation by Mr X. Page 2 First Page "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
Pour plus de modèles : Modèles Powerpoint PPT gratuitsModèles Powerpoint PPT gratuits Page 1Free Powerpoint Templates Name Of Presentation by Mr X.
Pour plus de modèles : Modèles Powerpoint PPT gratuitsModèles Powerpoint PPT gratuits Page 1 Name Of Presentation by Mr X.
Pour plus de modèles : Modèles Powerpoint PPT gratuitsModèles Powerpoint PPT gratuits Page 1Free Powerpoint Templates Name Of Presentation by Mr X.
Free Powerpoint Templates Page 1 Free Powerpoint Templates Name of presentation by Mr X.
Page 1 Name Of Presentation by Mr X. Page 2 First Page : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
Pour plus de modèles : Modèles Powerpoint PPT gratuitsModèles Powerpoint PPT gratuits Page 1 Free Powerpoint Templates Name Of Presentation by Mr X.
PROGRAMMATION DES FONDS STRUCTURELS EUROPEENS  Programme Wallonie-2020.EU COMITE D’ACCOMPAGNEMENT DU PORTEFEUILLE « NOM DU PORTEFEUILLE »
Page 1 Powerpoint Templates Name Of Presentation by Mr X.
Pour plus de modèles : Modèles Powerpoint PPT gratuitsModèles Powerpoint PPT gratuits Page 1 Name Of Presentation by Mr X.
WELCOME TO THE BIG APPLE
Pour plus de modèles : Modèles Powerpoint PPT gratuitsModèles Powerpoint PPT gratuits Page 1 Free Powerpoint Templates Name Of Presentation by Mr X.
Pour plus de modèles : Modèles Powerpoint PPT gratuitsModèles Powerpoint PPT gratuits Page 1 Name Of Presentation by Mr X.
PROGRAMMATION DES FONDS STRUCTURELS EUROPEENS  Programme Wallonie-2020.EU COMITE D’ACCOMPAGNEMENT DU PORTEFEUILLE « NOM DU PORTEFEUILLE »
Titre de la présentation
Prénom NOM dossier partenaires
Sous titre lorem ipsum est delores
Social Network PowerPoint presentation Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
<AUTEURS, ORGANISME> contact : site :
Entreprise Lorem ipsum Lorem ipsum dolor sit amet EN SAVOIR PLUS >
Titre de la présentation
Titre de la présentation
Name of presentation Company name. Slide master Your Text here Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.
Bienvenue 1 Félicitations vous avez été inscrit pour le concours NINA Awards de votre région ! Pour aider le comité de sélection à étudier votre dossier,
Graphique SmartArt d’organigramme horizontal
GANTT CHART PowerPoint Templates Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
GLADE Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor labore et dolore magna aliqua enim ad minim.
Ressources humaines : diapositive 1
Ressources humaines : diapositive 1
Proposition de subvention pour Nom du projet
Concepteur web, Développeur
MPC (moyenne pondérée cumulative)
MPC (moyenne pondérée cumulative)
8 Nom ici années PROFIL EXPÉRIENCE FORMATION COMPÉTENCES d’expérience
Concepteur web, Développeur
ARC Couverture JANVIER [ANNÉE] RÉCIT 1 - PAGE 1 RÉCIT 2 - PAGE 5
Titre de la présentation ici
8 Nom ici années PROFIL EXPÉRIENCE FORMATION COMPÉTENCES d’expérience
Titre principal Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad.
Titre de la présentation ici
Graphique SmartArt d’organigramme horizontal
Transcription de la présentation:

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

Metro

Quels utilisateurs ?

METRO

typographie

corps de typo

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

couleurs

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

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

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

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.

Erreurs fréquente s

correctincorrect Login here Boutons masqués par le clavier

correctincorrect Login here Oubli de lécran daccueil

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

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

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

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

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

- 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

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

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

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

Blog Clarity Consulting : SL Toolkit Icones – C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons – Noun Project – Templates Vidéo Design Days -phone-design-day-recordings.aspx -phone-design-day-recordings.aspx ressources utiles