En se basant sur plus d'une année d'expérience de la plateforme, cette session se propose de faire un inventaire des règles de soumission les plus strictes qu'il faudra respecter pour obtenir à coup sûr le Sésame de la validation AFT pour le store Windows 8 du premier coup! Speaker : Michel Rousseau (microsoft)

2. La validation UX du Store
TOUT CE QUE VOUS AVEZ TOUJOURS VOULU SAVOIR
SANS JAMAIS OSER LE DEMANDER...
Michel ROUSSEAU
Technical Evangelist UX,UI,Design
Microsoft
mirousse@microsoft.com
@rousseau_michel
www.aka.ms/michel
Design/UX/UI

3. Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !!!
Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les Techdays !
#mstechdays
Design/UX/UI

4. Le programme AFT
#mstechdays
Design/UX/UI

5. Le programme AFT
Un programme de validation de l’UX.
Une certaine idée de la certification.
Une proposition de valeur technique.
#mstechdays
Design/UX/UI

6. Le programme AFT
#mstechdays
Design/UX/UI

7. Le programme AFT
#mstechdays
Design/UX/UI

8. Le programme AFT
Trois types de retours sur les grands points UX :
Required Must Fix ou Must Fix
Should Fix
Recommendation
.
#mstechdays
Design/UX/UI

9. #mstechdays
Design/UX/UI

10. Le programme AFT
Un process renouvelé à chaque étape:
Early review
Design review
Quality review
Final review
.
#mstechdays
Design/UX/UI

11. Mais ça, c’était avant…
#mstechdays
Design/UX/UI

12. Strategic Top App Review & Tech Support
Aka STARTS
#mstechdays
Design/UX/UI

13. Le programme STARTS
Plus de notions de design associées.
Une proposition de valeur de type « Quality bar ».
Ouvert depuis le 20 Janvier.
Un process unifié entre le Windows Store et le Windows
Phone Store.
#mstechdays
Design/UX/UI

14. Le programme STARTS
Plus de notions de design associées.
Une proposition de valeur de type « Quality bar ».
Ouvert depuis le 20 Janvier.
Un process unifié entre le Windows Store et le Windows
Phone Store.
#mstechdays
Design/UX/UI

15. Certification Windows Store
#mstechdays
Design/UX/UI

16. Splashscreen
Mise en avant du branding de l’application.
Pas de « default icon » ou de Splashscreen
vide.
Une transition douce entre le splash et l’écran
d’acceuil (pas de chaise vide de + de 2
secondes).
#mstechdays
Design/UX/UI

17. #mstechdays
Design/UX/UI

18. Gestuelle
Le scenario de base est le touch. Toutes les actions
et navigations doivent pouvoir être réalisées par le
touch.
On devrait utiliser le langage de gestuelles Windows.
Pas d’éléments d’interface interférant avec les actions
de bordure Windows.
#mstechdays
Design/UX/UI

19. Cibles de touch
On doit faire son possible pour éviter les
faux-contacts (surface de touch de 26x26 px
minimum. 40 px au mieux).
#mstechdays
Design/UX/UI

20. Feedbacks visuel
Tout élément interactif doit proposer un
feedback visuel.
#mstechdays
Design/UX/UI

21. Tuiles secondaires
Une tuile secondaire doit mener au contenu
spécifique du raccourci.
#mstechdays
Design/UX/UI

22. #mstechdays
Design/UX/UI

23. Les notifications
Les notifs sont interactives !
Elles doivent appeler l’application hôte au
premier plan dans le contexte de la notif.
#mstechdays
Design/UX/UI

24. L’indicateur de progression
… doit s’afficher pendant l’exécution d’une
tâche un peu longue.
#mstechdays
Design/UX/UI

25. Une application stable…
… ne crashe pas et est utilisable en mode
portrait ou « split ».
… ne crashe pas en mode offline. Mieux, elle
donne l’info lorsqu’elle perd le réseau.
#mstechdays
Design/UX/UI

26. Une application stable…
… gère le mode Suspend.
Elle conserve le contexte.
Elle sort des modes spécifiques sur la reprise
(Settings, partage,…)
#mstechdays
Design/UX/UI

27. La performance
L’application doit être fluide et dynamique.
Les transitions doivent sembler rapides.
Si un temps de chargement s’impose, on affiche
un indicateur de progression.
#mstechdays
Design/UX/UI

28. L’app bar
Les actions contextuelles appellent l’app bar.
On applique une sticky bar si les items sont
sélectionnés et contextualisés par défaut.
#mstechdays
Design/UX/UI

29. Le contenu
L’application s’affiche correctement dans tous
les modes (Résolution minimale, portrait et vue
fenêtrée).
Pas de message d’erreur si le layout est plus
haut que large.
#mstechdays
Design/UX/UI

30. #mstechdays
Design/UX/UI

31. Les hautes définitions
Une appli doit s’afficher correctement dans
les très hautes résolutions sans artefacts.
Dans toutes les résolutions, en fait.
#mstechdays
Design/UX/UI

32. Les médias.
L’audio d’une appli doit continuer en background.
Si une VoIP interrompt une appli avec du son, le son de celle-ci
doit baisser ou passer en pause.
La lecture de l’audio se fait via le contrôle idoine.
Une vidéo se met en pause lorsque l’on passe sur une autre
appli.
#mstechdays
Design/UX/UI

33. Certification Windows Store
#mstechdays
Design/UX/UI

34. Changement d’application rapide.
Ce scénario interrompt les requêtes réseaux.
L’appli doit donc se reconnecter et relancer
les requêtes de manière silencieuse.
#mstechdays
Design/UX/UI

35. Changement d’application rapide.
On doit d’ailleurs pouvoir faire plusieurs va-etvient sans erreurs ni plantages.
Si l’on passe par l’écran d’accueil et que l’on
relance l’appli par la tuile, on doit revenir au
contexte actuel.
#mstechdays
Design/UX/UI

36. Le SIP (Software Input Pad).
Les contrôles keyboard
doivent s’adapter au
contexte (texte,
alphanumérique,…).
…et disparaître lorsque l’on
clique au dehors d’une zone
de texte.
#mstechdays
Design/UX/UI

37. Les cibles de touch (encore…)
Attention, petite surface de contact, donc
grandes précaution dans le placement des
éléments interactifs.
#mstechdays
Design/UX/UI

38. La gestion de la batterie
L’application doit continuer à fonctionner
nominalement en mode d’économie
d’énergie.
#mstechdays
Design/UX/UI

39. Tombstoning
Pas de crash sur un retour de tombstoning.
L’appli doit revenir dans le même contexte
(status identique, saisie équivalente, etc…).
#mstechdays
Design/UX/UI

40. Pivots et Panos
Un contrôle sur une page ne doit pas empêcher la
navigation basique des contrôles de layout.
Pas de gestuelles qui se mélange, de manière
générale.
Par exemple : Un slider dans un panorama.
#mstechdays
Design/UX/UI

41. Le scenario non-connecté
Pas de crashes en perdant la connectivité.
Un bon message d’erreur, ou mieux, un
message informatif.
Pas de stack trace.
#mstechdays
Design/UX/UI

42. La tuile secondaire.
L’affichage de la tuile secondaire doit être raccord avec le style de
l’app.
Un « back », après une entrée dans l’app par une TS quitte
l’appli.
Si l’appli doit retirer la tuile secondaire, elle doit en informer
l’utilisateur.
Si une page utilise déjà une TS, on désactive l’icone de
punaisage.
#mstechdays
Design/UX/UI

43. Les background Agents.
L’application doit vivre sans crasher si
l’utilisateur empêche le travail des
background agents.
#mstechdays
Design/UX/UI

44. Les SNS (Social Network Services).
L’application doit permettre de se loguer, se
déloguer, supprimer son compte.
#mstechdays
Design/UX/UI

45. Le jeux.
Attention à la stabilité en cas de perte de connexion (leaderboard,
high scores).
La progression dans le jeu doit être sauvegardée si l’on quitte
l’appli.
L’expérience doit être maintenue, même sur des parties longues
de plus d’une heure.
#mstechdays
Design/UX/UI

46. #mstechdays
Design/UX/UI

47. La validation UX du Store
TOUT CE QUE VOUS AVEZ TOUJOURS VOULU SAVOIR
SANS JAMAIS OSER LE DEMANDER...
Michel ROUSSEAU
Technical Evangelist UX,UI,Design
Microsoft
mirousse@microsoft.com
@rousseau_michel
www.aka.ms/michel
Design/UX/UI