DesignMichel : UX, UI and Design in Microsoft

Le design, l'expérience utilisateur et les interfaces pour les applications, sous Windows 8, Windows Phone et les plateformes Microsoft

La vue fenêtrée et les nouveaux codes du snap dans Windows 8.1

La vue fenêtrée et les nouveaux codes du snap dans Windows 8.1

  • Comments 2

 

Toujours plus loin dans l’analyse des nouvelles fonctionnalités de Windows 8.1, cet article va se consacrer au fenêtrage. Cette nouvelle manière d’afficher votre application peut se rapprocher conceptuellement de ce que l’on connaissait déjà avec la vue snap de Windows 8, mais, en l’espèce, le fenêtrage va beaucoup loin et propose de nouveaux scenarii fort intéressants.

 

Le snap de Windows 8

La fonction snap de l’ancienne mouture de l’OS tactile de Microsoft (et toujours applicable si vous maintenez votre appli W8 sous W 8.1) est une manière de prendre pied dans le multifenêtrage cher à l’environnement Windows, mais en mode ModernUI. En effet comment rendre deux applications utilisables, alors même que la guideline préconise le plein écran afin de mieux mettre en avant le contenu ?

 

Snap-Windows-8

La vue snap de Windows 8

Le concept du snap permet de faire cohabiter deux et seulement deux applis simultanément à l’écran. L’une des applis est considérée comme principale, l’autre comme application ancrée. L’ancrage se fait soit à droite, soit à gauche et la navigation d’une application ancrée se fait de manière verticale, dans un châssis fixe de 320 px de large (adaptatif dans la hauteur). On peut, si le scenario de l’application dans cette vue le permet, proposer toute la navigation fonctionnelle dans ce mode, ou une navigation restreinte aux fonctions basiques, ou encore, un cas particulier du métier de l’application. La pire des options étant de n’afficher que l’icône de l’appli, ce qui correspond aussi au contexte minimal de ce mode, puisque pour éviter un crash en cas de manipulation de l’utilisateur, il faut que cette vue soit effective dans l’application. La vue dans cette fenêtre en bande étroite est verticale et le mode de déplacement doit correspondre au form factor.

La philosophie de cette architecture de layout est de permettre à l’utilisateur de se focaliser sur une tâche avec la vue ¾ (qui peut être le bureau de Windows et les applications tournant dedans, comme Word, ou Excel), tout en gardant un œil sur les données d’une appli ModernUI (les cours de la bourse avec Bing Finance, les actualités avec Bing News). Certains scénarii se complètent d’ailleurs très bien, puisque je peux avoir une application de Finance en vue ¾ et une application d’actualité en vue snap, permettant de mettre en relation les nouvelles et leur impact sur le mode de la finance). C’est également excellent dans le cadre B2B, de pouvoir saisir des données en mode SharePoint sur le desktop de Windows, et de voir l’effet des modifications dans une application ModernUI en vue ancrée.

Pour rappel, les contrats dans l’environnement Windows 8 ne s’appliquent qu’à la fenêtre principale et pas à l’application ancrée, celle-ci étant considérée comme secondaire par rapport à l’application en vue ¾.

 

Le snapping et Windows 8.1

Mais pourquoi en rester là et ne proposer que deux applications ? Le nom de Windows n’est-il pas suffisamment évocateur ? Voilà pourquoi Windows 8.1 donne un nouvel élan à la notion de snap.

Tout d’abord, une fenêtre s’ancre par défaut en vue portrait de 500 px de large minimum, à concurrence de 50% de l’affichage en largeur. Pourquoi ce choix ? Tout simplement car la résolution minimum supportée par Windows est le 1024x768 px. Si j’ancre une application, je me retrouve avec deux parts égales de 500 px (l’appli ancrée et l’autre application), séparée par une tirette de 24 px. Soit 1024 px, le compte est bon. Dans le cas de résolution supérieure, on coupe le layout en deux et on adapte le contenu. Le but du jeu étant bien sûr de proposer une navigation spécifique, donc un layout adaptatif à ce mode. En tout cas, il est obligatoire que la vue fenêtrée ne gêne en rien la résolution du scénario primaire de l’application.

 

SnapWin81

La vue fenêtrée, avec deux applications, à part égales.

Et, bien sûr, la tirette centrale prend maintenant toute sa signification puisqu’elle est fonctionnelle et permet d’augmenter ou de rétrécir une application par rapport à l’autre. Cela implique plusieurs choses : Premièrement, qu’il n’y a plus une application ancrée et une application primaire, mais bien deux applications qui vivent au même niveau. Les contrats s’exécutent sur l’application qui a le focus, soit celle qui a été cliquée en dernier. D’ailleurs, vous avez un indice visuel de l’appli sous focus sous la forme d’une petite barre verticale dans la tirette centrale, du côté de l’application prioritaire.

 

Share81

La vue fenêtrée, avec deux applications et le partage

Deuxièmement, un design responsif est très important pour gérer la résolution effective de l’application, en fonction du placement de la tirette. Ceci n’est pas à proprement parler obligatoire, puisque l’on peut se contenter de mettre dans le layout l’application en vue pleine, mais tant qu’à proposer une vue proche du mode portrait (500x768 px min), pourquoi ne pas en profiter ?

Troisièmement, et en corollaire du point précédent, il peut devenir intéressant de proposer une navigation verticale dans la vue ancrée, en 500 px, et de repasser en vue verticale si la vue est supérieure à 500px de large.

Enfin, et même si ce n’est plus obligatoire, la vue snap est toujours d’actualité sous le nom de vue étroite. Cela correspond à la zone minimum d’affichage de la vue ancrée, soit la zone d’affichage la plus petite que la tirette peut permettre, avant que l’appli ne passe en arrière-plan (donc, de 320 à 499 px). On peut très bien reprendre ici les concepts prévalant dans le contexte Windows 8, puisque la vue étroite correspond en tout point à ces paradigmes, à savoir une fenêtre à châssis en 320 px de large. Là aussi, il est impératif que l’affichage et la navigation soit repensée spécifiquement.

 

SnapWin81

L’ appli Reading List en vue étroite

En tout cas, il faut que l’application reste utilisable, quelle que soit le mode d’affichage. On ne doit pas avoir d’artefacts visuels lors du redimensionnement (images pixellisées, dithering hasardeux, etc…) et on doit porter une attention particulière aux différents plateaux de résolution (x1, x1,4 et x1,8). Les barres d’actions et de navigation doivent rester pleinement utilisables et des boutons ne doivent pas se trouver hors écran. Le redimensionnement doit se faire de manière souple et agréable (on ne doit pas voir les opérations de réécriture), et enfin, on devrait supporter le fenêtrage en mode portrait.

Plus spécifiquement, au niveau de la silhouette, il faut que la marge minimum, en vue étroite ne soit pas inférieure à 20 px, on ne doit pas utiliser une police supérieure à 20 point pour le titre et surtout, il n’est plus bienvenu d’afficher seulement une image en vue étroite. La vue fenêtrée doit avoir un sens. Il est également recommandé d’utiliser le petit bouton back en vue étroite (20px).

Une application enfin ne peut toujours pas de « snapper » ou repasser en plein écran de manière programmatique. C’est un choix de l’utilisateur que d’adapter son layout. Si l’application, pour une raison ou pour une autre doit se snapper ou se désancrer, cela doit être sur une action de l’utilisateur (bouton, call to action spécifique).

 

One more thing…

Oui, parce qu’effectivement, je parlais précédemment de multifenêtrage. En effet, et dépendamment de la résolution, on peut dorénavant ancrer plus de deux applications simultanément à partir de 1600 px de large. On peut alors caser trois applications fenêtrées (3 layouts de 517 px séparés par deux tirettes de 24 px). On peut même aligner 4 applications sur les écrans à très fortes résolutions. Et ceci sur deux écrans simultanément. Ce qui permet des configurations assez amusantes, à défaut d’être hautement utilisables. La cinématique d’ancrage est assez intéressante, puisque si deux applications sont déjà ancrées, la mise en snap d’une autre application crée un vide permettant d’insérer la nouvelle frame. Si l’on a déjà atteint le maximum d’apps autorisées dans la résolution donnée, une animation de type « rétrécissement » permet de savoir dans quelle zone on va déposer la nouvelle appli et quelle est celle qui va passer en arrière-plan.

 

Vuedoubleecran

6 applications ouvertes, dont le bureau, sur deux écrans.

 

Conclusion

Lorsque l’on parle de fenêtrage dans Windows 8.1, Il s’agit bien d’une approche résolument nouvelle concernant le multitâche, plutôt qu’un simple reboot de la version Windows 8. De nouvelles règles, de nouveaux usages et surtout une approche moins « consumer » dans la philosophie, puisque ces nouveautés adressent tout de même les écrans à forte résolutions ou les systèmes multi écrans.

Plus d’informations sur ce sujet à cette adresse : http://msdn.microsoft.com/fr-fr/library/windows/apps/hh465371.aspx

Tip intéressant : Si vous voulez vous débarrasser d’une application ModernUI, il faut saisir l’application par le haut, et la descendre jusqu’en bas. Mais attention ! L’application est « Tombstonée », dans ce cas, c’est-à-dire qu’elle est toujours active, mais mise en niveau de consommation bas. Elle apparaît ainsi toujours dans le Task Manager. Pour la fermer complétement, il faut attraper l’appli par le haut, la tirer jusqu’en bas et l’y maintenir pendant deux secondes. Une animation de retournement viendra confirmer que l’application est en train de se fermer.

Comments
  • Tant qu'à parler du fenetrage, n'oublions pas non plus qu'avec 8.1, une application peut ouvrir plusieurs fenetres. C'est le cas par exemple de l'appli mail qui propose d'ouvrir les messages dans une fenetre separee.

  • il me semble que ça ne marche malheureusement qu'avec des aplications Windows 8

    pas avec d'autres.

Page 1 of 1 (2 items)
Leave a Comment
  • Please add 7 and 6 and type the answer here:
  • Post