8 points des guidelinesModernUI expliquésComprendre pour mieux épater…
IntervenantsCyril Cathala                                    Nathanael Marchand• So@t Expert C#/XAML                      ...
Agenda• Microsoft design style• Interactions utilisateur : touch+clavier• Mise à l’échelle• Contrats, charmes et fonctionn...
Introduction guidelines…300+ pages de                                      …le résumé, c’est parti !           21-sept.-12...
Jeu concours  Chaque sous-titre de section contient une               référence …Trouve-les toutes, et tente de gagner un ...
Microsoft design styleaka ModernUIaka celui-dont-on-ne-doit-pas-prononcer-le-nom
Principes de base• Content not chrome• Une expérience unifiée   •   Navigation   •   AppBar   •   Charmes   •   Snapped Vi...
Content not chrome• Le contenu prime sur sa présentation• Eviter les effets inutiles  • Skeuomorphisme (à vos souhaits)  •...
NavigationHiérarchique                                      A plat• Utilisée dans la plupart des cas                • Cont...
L’AppBar• Regroupe les commandes• Ne plus afficher de commandes sur les pages• Commandes en bas, navigation en haut       ...
Les charmes• Interactions entre l’application et le monde• Utilisation des contrats   •   Recherche   •   Partage   •   Im...
Fast & fluid• Une interface qui répond à l’utilisateur• Des animations pour souligner, suggérer, pas pour rendre  épilepti...
Eléments standards d’interface• Présentation en grille• Contrôles standardisés :   •   Bandeaux   •   Flyouts   •   FlipVi...
Interactions utilisateur :touch+clavierSans tralala ni ding ding dong…
Touch• Zones « touchables » : attention aux dimensions et aux marges          minimum                      précis         ...
Touch : zones• Interaction                                       • Lecture• Clavier virtuel                               ...
Touch+Clavier• Gestures tactiles avec équivalence à la souris• Retour visuel   •   Prise en compte d’une action : confirma...
Mise à l’échelleAccrochez-vous au pinceau…
Principes de bases• Occuper l’espace• Gérer les modes d’affichage• La taille compte !               21-sept.-12   8 points...
Occuper l’espace• Tirer parti des dispositions flexibles                21-sept.-12   8 points des Guidelines ModernUI exp...
Occuper l’espace• Attention au défilement        ok                           pas bien !                           pas bie...
Gérer les modes d’affichage• Une tablette ça se retourne !   • Portrait, paysage et la tête à l’envers• Une application ça...
La taille ça compte !• S’adapter aux résolutions• Travailler avec du vectoriel ou optimiser les images               21-se...
Contrats, charmes etfonctionnalitéscarpinus betulaceae
Principes de base• Simplifier et standardiser les interactions   • Avec l’écosystème (autres apps)   • Avec le système (pé...
Contrat : Recherche• Utiliser la barre des charmes                                                                        ...
Autres contrats• Partage (comme destination ou source)                                                                    ...
Extensions• Rendre votre appli incontournable sur le système                                                              ...
Quelques mises en garde• Respecter la confidentialité de l’utilisateur• Envoyer des SMS ou utiliser la connexion peut coût...
Tuiles, badges etnotificationsElle est fraîche ma tuile, elle est fraîche !
Principes de base• La tuile est plus que le raccourci vers l’application   • Tuile principale   • Tuile secondaire = une s...
Contraintes sur la tuile• Une information pas à jour et c’est la tuile !• Attention au contenu• Une tuile secondaire n’est...
Contraintes sur les badges• Un pictogramme simple  • Numérique ou symbolique (palette réduite)  • Doit être significatif  ...
Contraintes sur les notifications• Apparaît comme un « toast »• N’en faites pas des tartines   • Sur souscription de l’uti...
L’écran de verrouillage• L’utilisateur choisit le contenu• Le contenu est celui du badge et/ou de la tuile• Accorde des pr...
Quizz !                                                                              Il y a deux jours : La voiture Trucmu...
ContrôlesVos papiers s’il vous plaît
AppBar• Navigation en haut, commandes en bas• Groupe les commandes  • Non contextuelles : à gauche  • Contextuelles : à dr...
Progression• ProgressRing   • Indéterminé et modal• ProgressBar   • Style « déterminé » : avancement prévisible   • Style ...
Flyouts et boîtes de dialogues• MessageDialog   • information urgente, erreur ou question bloquante   • à éviter pour des ...
Remonter une erreur : choisir la bonnesurface• Erreur non-critique et locale  texte en ligne• Erreur non-critique globale...
En vrac …• FlipView  • Ne pas utiliser pour de grosses collections  • Collection grosse = récapitulatif• Semantic Zoom  • ...
Quizz !          utilisateur   moi                                      utilisateur      moi      mot de passe      ******...
Quizz ! (2)                            Vous avez ajouté cette série à votre profil                             Vous avez a...
La tête dans les nuagesVers l’infini et au-delà !
Exploiter le nuage• Configurer une fois, profiter partout• Propager les paramètres   • Oui mais pas tous…• Exploiter le Si...
Fourre-toutaka
L’écran d’accueil• Souhaite la bienvenue à l’utilisateur• Ne pas faire trop attendre l’utilisateur• Une image statique mai...
La gestion d’états• Sauver régulièrement l’état• Sauver lorsque l’application est suspendue• Restaurer l’état lorsque l’ut...
Divers trucs & astuces• Ne pas négliger les paramètres de confidentialités• Ne pas oublier l’aide• Localiser l’application...
Mais qui c’est qu’a tout cassé ?• Les règles, sont faites pour être contournées• Oui mais pas toutes               21-sept...
Conclusion• ModernUI, une identité propre avec laquelle jouer• Des guidelines non pas pour brider le développeur…• …mais p...
Aller plus loin• UX Guidelines for Windows Store Apps :        http://bit.ly/win8guidelines              21-sept.-12   8 p...
Questions ?• Retrouvez nous sur nos blogs:                  • Retrouvez nous sur Twitter:  • http://cyril.cathala.org/blog...
Réponses1.   Harry Potter2.   Gunther3.   Le fou qui repeint son plafond4.   Nom latin du charme5.   Ordralfabétix6.   Gen...
Prochain SlideShare
Chargement dans…5
×

8 points des guidelines "ModernUI" expliqués

2 398 vues

Publié le

Résumé des principales guidelines Windows 8 en 50 slides.

Présentation de septembre 2012 lors du ModernUI Dating v2 de la communauté Windows 8.

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 398
Sur SlideShare
0
Issues des intégrations
0
Intégrations
452
Actions
Partages
0
Téléchargements
32
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

8 points des guidelines "ModernUI" expliqués

  1. 1. 8 points des guidelinesModernUI expliquésComprendre pour mieux épater…
  2. 2. IntervenantsCyril Cathala Nathanael Marchand• So@t Expert C#/XAML • So@t Expert C#/XAML• Showrizo pour Windows 8 • Showrizo pour Windows 8 (vainqueur DevKings) (vainqueur DevKings)• Silverlight France • Silverlight France• Coach Windows Phone • Rédacteur/modérateur• Communauté Windows Phone developpez.com• http://cyril.cathala.org/blog • http://www.natmarchand.fr• @CyrilCathala • @NatMarchand 21-sept.-12 8 points des Guidelines ModernUI expliqués 2
  3. 3. Agenda• Microsoft design style• Interactions utilisateur : touch+clavier• Mise à l’échelle• Contrats, charmes et fonctionnalités• Tuiles et notifications• Contrôles• La tête dans les nuages• Fourre-tout 21-sept.-12 8 points des Guidelines ModernUI expliqués 3
  4. 4. Introduction guidelines…300+ pages de …le résumé, c’est parti ! 21-sept.-12 8 points des Guidelines ModernUI expliqués 4
  5. 5. Jeu concours Chaque sous-titre de section contient une référence …Trouve-les toutes, et tente de gagner un super goodies ! + 21-sept.-12 8 points des Guidelines ModernUI expliqués 5
  6. 6. Microsoft design styleaka ModernUIaka celui-dont-on-ne-doit-pas-prononcer-le-nom
  7. 7. Principes de base• Content not chrome• Une expérience unifiée • Navigation • AppBar • Charmes • Snapped View• Une expérience agréable : Fast & fluid !!• Eléments standards d’interface 21-sept.-12 8 points des Guidelines ModernUI expliqués 7
  8. 8. Content not chrome• Le contenu prime sur sa présentation• Eviter les effets inutiles • Skeuomorphisme (à vos souhaits) • Bords arrondis, ombres, relief, transparence, etc.• Typographie sans fioritures (ex. Segoe) 21-sept.-12 8 points des Guidelines ModernUI expliqués 8
  9. 9. NavigationHiérarchique A plat• Utilisée dans la plupart des cas • Contenus indépendants• Navigation par les données • Adapté aux changements de• Hub  section  détails contexte 21-sept.-12 8 points des Guidelines ModernUI expliqués 9
  10. 10. L’AppBar• Regroupe les commandes• Ne plus afficher de commandes sur les pages• Commandes en bas, navigation en haut 21-sept.-12 8 points des Guidelines ModernUI expliqués 10
  11. 11. Les charmes• Interactions entre l’application et le monde• Utilisation des contrats • Recherche • Partage • Impression • Paramètres 21-sept.-12 8 points des Guidelines ModernUI expliqués 11
  12. 12. Fast & fluid• Une interface qui répond à l’utilisateur• Des animations pour souligner, suggérer, pas pour rendre épileptique• Des surfaces adaptées aux actions 21-sept.-12 8 points des Guidelines ModernUI expliqués 12
  13. 13. Eléments standards d’interface• Présentation en grille• Contrôles standardisés : • Bandeaux • Flyouts • FlipView • ListView 21-sept.-12 8 points des Guidelines ModernUI expliqués 13
  14. 14. Interactions utilisateur :touch+clavierSans tralala ni ding ding dong…
  15. 15. Touch• Zones « touchables » : attention aux dimensions et aux marges minimum précis à éviter! 21-sept.-12 8 points des Guidelines ModernUI expliqués 15
  16. 16. Touch : zones• Interaction • Lecture• Clavier virtuel q w e r t y u i o p ⌫ a s d f g h j k l ‘ Enter • Adapter le contenu, ne pas le cacher z x c v b n m , . ? &1 Ctrl 23 < > ⌨ 21-sept.-12 8 points des Guidelines ModernUI expliqués 16
  17. 17. Touch+Clavier• Gestures tactiles avec équivalence à la souris• Retour visuel • Prise en compte d’une action : confirmation immédiate • Changement de couleur / taille • Interactions (survol de la souris, tap...) • Eviter d’utiliser l’appui long (« hold ») pour autre chose que l’affichage d’informations 21-sept.-12 8 points des Guidelines ModernUI expliqués 17
  18. 18. Mise à l’échelleAccrochez-vous au pinceau…
  19. 19. Principes de bases• Occuper l’espace• Gérer les modes d’affichage• La taille compte ! 21-sept.-12 8 points des Guidelines ModernUI expliqués 19
  20. 20. Occuper l’espace• Tirer parti des dispositions flexibles 21-sept.-12 8 points des Guidelines ModernUI expliqués 20
  21. 21. Occuper l’espace• Attention au défilement ok pas bien ! pas bien ! 21-sept.-12 8 points des Guidelines ModernUI expliqués 21
  22. 22. Gérer les modes d’affichage• Une tablette ça se retourne ! • Portrait, paysage et la tête à l’envers• Une application ça peut s’épingler 21-sept.-12 8 points des Guidelines ModernUI expliqués 22
  23. 23. La taille ça compte !• S’adapter aux résolutions• Travailler avec du vectoriel ou optimiser les images 21-sept.-12 8 points des Guidelines ModernUI expliqués 23
  24. 24. Contrats, charmes etfonctionnalitéscarpinus betulaceae
  25. 25. Principes de base• Simplifier et standardiser les interactions • Avec l’écosystème (autres apps) • Avec le système (périphériques)• Interactions avec la machine = Extension• Interactions avec l’écosystème = Contract 21-sept.-12 8 points des Guidelines ModernUI expliqués 25
  26. 26. Contrat : Recherche• Utiliser la barre des charmes Search • Uniformiser Share • Rechercher depuis n’importe où Start• Pas de bouton / champ recherche sur la page• Sauf si Devices • Fonctionnalité principale • Trouver dans la page Settings 21-sept.-12 8 points des Guidelines ModernUI expliqués 26
  27. 27. Autres contrats• Partage (comme destination ou source) Search• Paramètres Share • Evite la dispersion• FilePicker Start • Unification des sources de fichier (local + cloud) Devices Settings 21-sept.-12 8 points des Guidelines ModernUI expliqués 27
  28. 28. Extensions• Rendre votre appli incontournable sur le système Search • Activation sur protocole Share • Association sur extension• Imprimer Start• Travailler en arrière plan (« Background tasks ») Devices Settings 21-sept.-12 8 points des Guidelines ModernUI expliqués 28
  29. 29. Quelques mises en garde• Respecter la confidentialité de l’utilisateur• Envoyer des SMS ou utiliser la connexion peut coûter cher à l’utilisateur• La connexion ne fonctionne pas toujours 21-sept.-12 8 points des Guidelines ModernUI expliqués 29
  30. 30. Tuiles, badges etnotificationsElle est fraîche ma tuile, elle est fraîche !
  31. 31. Principes de base• La tuile est plus que le raccourci vers l’application • Tuile principale • Tuile secondaire = une sous-partie de l’application• La notification, un boomerang vers l’application• Mise à jour locale ou distante• Attention à ne pas saturer l’utilisateur ! 21-sept.-12 8 points des Guidelines ModernUI expliqués 31
  32. 32. Contraintes sur la tuile• Une information pas à jour et c’est la tuile !• Attention au contenu• Une tuile secondaire n’est pas un simple raccourci• Deux formats disponibles (carré et large)• Le large est réservée aux tuiles animées 21-sept.-12 8 points des Guidelines ModernUI expliqués 32
  33. 33. Contraintes sur les badges• Un pictogramme simple • Numérique ou symbolique (palette réduite) • Doit être significatif 21-sept.-12 8 points des Guidelines ModernUI expliqués 33
  34. 34. Contraintes sur les notifications• Apparaît comme un « toast »• N’en faites pas des tartines • Sur souscription de l’utilisateur • Notifications importantes (faible volume, grand intérêt) • A éviter lorsque l’application est en premier plan• Ca n’est pas un moyen fiable de prévenir l’utilisateur 21-sept.-12 8 points des Guidelines ModernUI expliqués 34
  35. 35. L’écran de verrouillage• L’utilisateur choisit le contenu• Le contenu est celui du badge et/ou de la tuile• Accorde des privilèges à l’application 21-sept.-12 8 points des Guidelines ModernUI expliqués 35
  36. 36. Quizz ! Il y a deux jours : La voiture Trucmuche, une Une météorite s’est voiture qu’elle est bien! écrasée : kaboom ! MonAppli MonAppliPAS BIEN Ca dépend PAS BIEN 21-sept.-12 8 points des Guidelines ModernUI expliqués 36
  37. 37. ContrôlesVos papiers s’il vous plaît
  38. 38. AppBar• Navigation en haut, commandes en bas• Groupe les commandes • Non contextuelles : à gauche • Contextuelles : à droite• Utiliser des flyouts pour compléter lorsque trop de commandes• Ne pas utiliser pour les commandes essentielles 21-sept.-12 8 points des Guidelines ModernUI expliqués 38
  39. 39. Progression• ProgressRing • Indéterminé et modal• ProgressBar • Style « déterminé » : avancement prévisible • Style « indéterminé »• Style déterminé • Eviter les variations brutales ou étranges (les fameuses « minutes » Windows)• Style indéterminé • Griser les boutons associés • Bien positionner le contrôle, et afficher du texte 21-sept.-12 8 points des Guidelines ModernUI expliqués 39
  40. 40. Flyouts et boîtes de dialogues• MessageDialog • information urgente, erreur ou question bloquante • à éviter pour des erreurs locales• Flyout • à l’initiative de l’utilisateur • à éviter si UI trop chargée 21-sept.-12 8 points des Guidelines ModernUI expliqués 40
  41. 41. Remonter une erreur : choisir la bonnesurface• Erreur non-critique et locale  texte en ligne• Erreur non-critique globale  texte en haut de la page• Erreur importante  bandeau d’avertissement • Laisse la possibilité d’interagir avec l’erreur• Erreur fatale  boîte de dialogue • L’utilisateur ne peut pas continuer sans interagir 21-sept.-12 8 points des Guidelines ModernUI expliqués 41
  42. 42. En vrac …• FlipView • Ne pas utiliser pour de grosses collections • Collection grosse = récapitulatif• Semantic Zoom • Ne pas utiliser pour changer de contexte 21-sept.-12 8 points des Guidelines ModernUI expliqués 42
  43. 43. Quizz ! utilisateur moi utilisateur moi mot de passe ******* mot de passe ******* Connecter Connecter BIEN PAS BIEN 21-sept.-12 8 points des Guidelines ModernUI expliqués 43
  44. 44. Quizz ! (2) Vous avez ajouté cette série à votre profil Vous avez ajouté cette série à votre profil OK 21-sept.-12 8 points des Guidelines ModernUI expliqués 44
  45. 45. La tête dans les nuagesVers l’infini et au-delà !
  46. 46. Exploiter le nuage• Configurer une fois, profiter partout• Propager les paramètres • Oui mais pas tous…• Exploiter le Single Sign-On• Attention à la connexion utilisateur 21-sept.-12 8 points des Guidelines ModernUI expliqués 46
  47. 47. Fourre-toutaka
  48. 48. L’écran d’accueil• Souhaite la bienvenue à l’utilisateur• Ne pas faire trop attendre l’utilisateur• Une image statique mais…• Peut être couplé à un écran complémentaire animé 21-sept.-12 8 points des Guidelines ModernUI expliqués 48
  49. 49. La gestion d’états• Sauver régulièrement l’état• Sauver lorsque l’application est suspendue• Restaurer l’état lorsque l’utilisateur relance l’application • Rafraichir le contenu si besoin• Démarrage normal si le contenu est obsolète• L’application doit marcher sans connection 21-sept.-12 8 points des Guidelines ModernUI expliqués 49
  50. 50. Divers trucs & astuces• Ne pas négliger les paramètres de confidentialités• Ne pas oublier l’aide• Localiser l’application• Implémenter l’accessibilité totalement ou ne pas l’implémenter 21-sept.-12 8 points des Guidelines ModernUI expliqués 50
  51. 51. Mais qui c’est qu’a tout cassé ?• Les règles, sont faites pour être contournées• Oui mais pas toutes 21-sept.-12 8 points des Guidelines ModernUI expliqués 51
  52. 52. Conclusion• ModernUI, une identité propre avec laquelle jouer• Des guidelines non pas pour brider le développeur…• …mais pour rassurer l’utilisateur• Prise en main plus rapide des applications• Ne pas oublier les différents « form factors » 21-sept.-12 8 points des Guidelines ModernUI expliqués 52
  53. 53. Aller plus loin• UX Guidelines for Windows Store Apps : http://bit.ly/win8guidelines 21-sept.-12 8 points des Guidelines ModernUI expliqués 53
  54. 54. Questions ?• Retrouvez nous sur nos blogs: • Retrouvez nous sur Twitter: • http://cyril.cathala.org/blog • @CyrilCathala • http://www.natmarchand.fr • @NatMarchand • http://blog.soat.fr • @SoatExpertsNET 21-sept.-12 8 points des Guidelines ModernUI expliqués 54
  55. 55. Réponses1. Harry Potter2. Gunther3. Le fou qui repeint son plafond4. Nom latin du charme5. Ordralfabétix6. Gendarmerie nationale7. Toy Story8. Rébus « divers »

×