La validation UX du Store : Tout ce que vous avez toujours voulu savoir sans jamais oser le...

Design/UX/UI

La validation UX du Store

Michel ROUSSEAUTechnical Evangelist UX,UI,Design

Microsoft

mirousse@microsoft.com@rousseau_michel

www.aka.ms/michel

TOUT CE QUE VOUS AVEZ TOUJOURS VOULU SAVOIR SANS JAMAIS OSER LE DEMANDER...

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 !

Design/UX/UI#mstechdays

Le programme AFT

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

Design/UX/UI#mstechdays

Le programme AFT

Design/UX/UI#mstechdays

Le programme AFT

Design/UX/UI#mstechdays

Trois types de retours sur les grands points UX :

Required Must Fix ou Must FixShould FixRecommendation.

Le programme AFT

Design/UX/UI#mstechdays

Design/UX/UI#mstechdays

Un process renouvelé à chaque étape:

Early reviewDesign reviewQuality review Final review.

Le programme AFT

Design/UX/UI#mstechdays

Mais ça, c’était avant…

Design/UX/UI#mstechdays

Strategic Top App Review & Tech Support

Aka STARTS

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

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

Design/UX/UI#mstechdays

Certification Windows Store

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

Design/UX/UI#mstechdays

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

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

Design/UX/UI#mstechdays

Tout élément interactif doit proposer un feedback visuel.

Feedbacks visuel

Design/UX/UI#mstechdays

Une tuile secondaire doit mener au contenu spécifique du raccourci.

Tuiles secondaires

Design/UX/UI#mstechdays

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

Design/UX/UI#mstechdays

… doit s’afficher pendant l’exécution d’une tâche un peu longue.

L’indicateur de progression

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…

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…

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

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

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

Design/UX/UI#mstechdays

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

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.

Design/UX/UI#mstechdays

Certification Windows Store

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.

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.

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).

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…)

Design/UX/UI#mstechdays

L’application doit continuer à fonctionner nominalement en mode d’économie d’énergie.

La gestion de la batterie

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

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

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é

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.

Design/UX/UI#mstechdays

L’application doit vivre sans crasher si l’utilisateur empêche le travail des background agents.

Les background Agents.

Design/UX/UI#mstechdays

L’application doit permettre de se loguer, se déloguer, supprimer son compte.

Les SNS (Social Network Services).

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.

Design/UX/UI#mstechdays

Design/UX/UI

La validation UX du Store

Michel ROUSSEAUTechnical Evangelist UX,UI,Design

Microsoft

mirousse@microsoft.com@rousseau_michel

www.aka.ms/michel

TOUT CE QUE VOUS AVEZ TOUJOURS VOULU SAVOIR SANS JAMAIS OSER LE DEMANDER...