La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le...
-
Upload
microsoft-developpeurs -
Category
Technology
-
view
469 -
download
2
description
Transcript of La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le...
![Page 1: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/1.jpg)
![Page 2: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/2.jpg)
Design/UX/UI
La validation UX du Store
Michel ROUSSEAUTechnical Evangelist UX,UI,Design
Microsoft
[email protected]@rousseau_michel
www.aka.ms/michel
TOUT CE QUE VOUS AVEZ TOUJOURS VOULU SAVOIR SANS JAMAIS OSER LE DEMANDER...
![Page 3: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/3.jpg)
Design/UX/UI#mstechdays
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 !
Donnez votre avis !
![Page 4: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/4.jpg)
Design/UX/UI#mstechdays
Le programme AFT
![Page 5: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/5.jpg)
Design/UX/UI#mstechdays
Un programme de validation de l’UX.Une certaine idée de la certification.Une proposition de valeur technique.
Le programme AFT
![Page 6: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/6.jpg)
Design/UX/UI#mstechdays
Le programme AFT
![Page 7: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/7.jpg)
Design/UX/UI#mstechdays
Le programme AFT
![Page 8: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/8.jpg)
Design/UX/UI#mstechdays
Trois types de retours sur les grands points UX :
Required Must Fix ou Must FixShould FixRecommendation.
Le programme AFT
![Page 9: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/9.jpg)
Design/UX/UI#mstechdays
![Page 10: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/10.jpg)
Design/UX/UI#mstechdays
Un process renouvelé à chaque étape:
Early reviewDesign reviewQuality review Final review.
Le programme AFT
![Page 11: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/11.jpg)
Design/UX/UI#mstechdays
Mais ça, c’était avant…
![Page 12: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/12.jpg)
Design/UX/UI#mstechdays
Strategic Top App Review & Tech Support
Aka STARTS
![Page 13: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/13.jpg)
Design/UX/UI#mstechdays
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.
Le programme STARTS
![Page 14: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/14.jpg)
Design/UX/UI#mstechdays
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.
Le programme STARTS
![Page 15: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/15.jpg)
Design/UX/UI#mstechdays
Certification Windows Store
![Page 16: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/16.jpg)
Design/UX/UI#mstechdays
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).
Splashscreen
![Page 17: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/17.jpg)
Design/UX/UI#mstechdays
![Page 18: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/18.jpg)
Design/UX/UI#mstechdays
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.
Gestuelle
![Page 19: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/19.jpg)
Design/UX/UI#mstechdays
On doit faire son possible pour éviter les faux-contacts (surface de touch de 26x26 px minimum. 40 px au mieux).
Cibles de touch
![Page 20: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/20.jpg)
Design/UX/UI#mstechdays
Tout élément interactif doit proposer un feedback visuel.
Feedbacks visuel
![Page 21: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/21.jpg)
Design/UX/UI#mstechdays
Une tuile secondaire doit mener au contenu spécifique du raccourci.
Tuiles secondaires
![Page 22: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/22.jpg)
Design/UX/UI#mstechdays
![Page 23: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/23.jpg)
Design/UX/UI#mstechdays
Les notifs sont interactives !
Elles doivent appeler l’application hôte au premier plan dans le contexte de la notif.
Les notifications
![Page 24: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/24.jpg)
Design/UX/UI#mstechdays
… doit s’afficher pendant l’exécution d’une tâche un peu longue.
L’indicateur de progression
![Page 25: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/25.jpg)
Design/UX/UI#mstechdays
… 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.
Une application stable…
![Page 26: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/26.jpg)
Design/UX/UI#mstechdays
… gère le mode Suspend.
Elle conserve le contexte.
Elle sort des modes spécifiques sur la reprise (Settings, partage,…)
Une application stable…
![Page 27: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/27.jpg)
Design/UX/UI#mstechdays
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.
La performance
![Page 28: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/28.jpg)
Design/UX/UI#mstechdays
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.
L’app bar
![Page 29: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/29.jpg)
Design/UX/UI#mstechdays
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.
Le contenu
![Page 30: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/30.jpg)
Design/UX/UI#mstechdays
![Page 31: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/31.jpg)
Design/UX/UI#mstechdays
Une appli doit s’afficher correctement dans les très hautes résolutions sans artefacts.
Dans toutes les résolutions, en fait.
Les hautes définitions
![Page 32: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/32.jpg)
Design/UX/UI#mstechdays
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.
Les médias.
![Page 33: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/33.jpg)
Design/UX/UI#mstechdays
Certification Windows Store
![Page 34: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/34.jpg)
Design/UX/UI#mstechdays
Ce scénario interrompt les requêtes réseaux. L’appli doit donc se reconnecter et relancer les requêtes de manière silencieuse.
Changement d’application rapide.
![Page 35: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/35.jpg)
Design/UX/UI#mstechdays
On doit d’ailleurs pouvoir faire plusieurs va-et-vient 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.
Changement d’application rapide.
![Page 36: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/36.jpg)
Design/UX/UI#mstechdays
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.
Le SIP (Software Input Pad).
![Page 37: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/37.jpg)
Design/UX/UI#mstechdays
Attention, petite surface de contact, donc grandes précaution dans le placement des éléments interactifs.
Les cibles de touch (encore…)
![Page 38: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/38.jpg)
Design/UX/UI#mstechdays
L’application doit continuer à fonctionner nominalement en mode d’économie d’énergie.
La gestion de la batterie
![Page 39: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/39.jpg)
Design/UX/UI#mstechdays
Pas de crash sur un retour de tombstoning. L’appli doit revenir dans le même contexte (status identique, saisie équivalente, etc…).
Tombstoning
![Page 40: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/40.jpg)
Design/UX/UI#mstechdays
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.
Pivots et Panos
![Page 41: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/41.jpg)
Design/UX/UI#mstechdays
Pas de crashes en perdant la connectivité. Un bon message d’erreur, ou mieux, un message informatif.Pas de stack trace.
Le scenario non-connecté
![Page 42: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/42.jpg)
Design/UX/UI#mstechdays
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.
La tuile secondaire.
![Page 43: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/43.jpg)
Design/UX/UI#mstechdays
L’application doit vivre sans crasher si l’utilisateur empêche le travail des background agents.
Les background Agents.
![Page 44: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/44.jpg)
Design/UX/UI#mstechdays
L’application doit permettre de se loguer, se déloguer, supprimer son compte.
Les SNS (Social Network Services).
![Page 45: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/45.jpg)
Design/UX/UI#mstechdays
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.
Le jeux.
![Page 46: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/46.jpg)
Design/UX/UI#mstechdays
![Page 47: La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le demander...](https://reader035.fdocument.pub/reader035/viewer/2022081413/547fb234b4af9f5a528b479e/html5/thumbnails/47.jpg)
Design/UX/UI
La validation UX du Store
Michel ROUSSEAUTechnical Evangelist UX,UI,Design
Microsoft
[email protected]@rousseau_michel
www.aka.ms/michel
TOUT CE QUE VOUS AVEZ TOUJOURS VOULU SAVOIR SANS JAMAIS OSER LE DEMANDER...