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.

1. 8 points des guidelines
ModernUI expliqués
Comprendre pour mieux épater…

2. Intervenants
Cyril 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. 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. Introduction guidelines…
300+ pages de
…le résumé, c’est parti !
21-sept.-12 8 points des Guidelines ModernUI expliqués 4

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. Microsoft design style
aka ModernUI
aka celui-dont-on-ne-doit-pas-prononcer-le-nom

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. 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. Navigation
Hié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. 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. 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. 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. 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. Interactions utilisateur :
touch+clavier
Sans tralala ni ding ding dong…

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. 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. 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. Mise à l’échelle
Accrochez-vous au pinceau…

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. Occuper l’espace
• Tirer parti des dispositions flexibles
21-sept.-12 8 points des Guidelines ModernUI expliqués 20

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. 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. 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. Contrats, charmes et
fonctionnalités
carpinus betulaceae

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. 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. 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. 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. 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. Tuiles, badges et
notifications
Elle est fraîche ma tuile, elle est fraîche !

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. 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. 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. 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. 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. 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 MonAppli
PAS BIEN Ca dépend PAS BIEN
21-sept.-12 8 points des Guidelines ModernUI expliqués 36

37. Contrôles
Vos papiers s’il vous plaît

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. 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. 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. Remonter une erreur : choisir la bonne
surface
• 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. 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. 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. 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. La tête dans les nuages
Vers l’infini et au-delà !

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. Fourre-tout
aka

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. 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. 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. 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. 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. 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. 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. Réponses
1. Harry Potter
2. Gunther
3. Le fou qui repeint son plafond
4. Nom latin du charme
5. Ordralfabétix
6. Gendarmerie nationale
7. Toy Story
8. Rébus « divers »