Mémo Win8 : Où placer les commandes dans mon application ?

 

 

Mémo Win8 : Où placer les commandes dans mon application ?

Rate This
  • Comments 1

Voir le mémo complet

 

Voici une règle qui résume bien la philosophie du positionnement des commandes dans les applications Windows 8 Metro :

Une commande ne peut apparaitre directement sur une page que si l’action associée est indispensable au fonctionnement de la page ou qu’elle correspond à la fonction principale de cette page. Ex: un bouton “Envoyer” sur la page de création d’un email.

Dans ce cas, préférez un positionnement accessible facilement sur une tablette.

Interaction areas

 

De manière générale, les autres commandes se retrouveront dans :

- l’AppBar située en haut de la page pour la commandes de navigation

- l’AppBar située en bas de la page pour les autres commandes

Navigating with the edge swipe

Il existe néanmoins des exceptions pour:

- le bouton Back pour revenir à la page précédente

- les commandes associées à des éléments non sélectionnables ou au Presse-Papier (copier/coller, …)

- les commandes de gestion de compte (connexion/déconnexion)

- les commandes de paramétrage, la recherche et le partage d’information

 

L’AppBar du haut pour la commandes de navigation

Dans les applications Metro, la plupart des actions explicites de navigation disparaissent au profit d’une gesture sur un élément de la page:

- touch/click d’un élément d’une grid

- touch/clic d’un header de section

- pich-out pour zoom sémantique

-  ….

L’AppBar située en haut de la page permet de rassembler les autres fonctions de navigation (si besoin).

Navigation bar and switching between multiple contexts

La navigation fera l’objet d’un mémo complet à paraitre prochainement.

 

L’AppBar du bas pour les autres commandes

Toutes les autres commandes qui sont secondaires au fonctionnement de la page et dont l’utilisation sera facultative pour l’utilisateur se retrouveront dans l’App Bar du bas.

Si vous hésitez ou que vous avez beaucoup de commandes importantes, une solution intermédiaire serait de placer vos commandes dans l’AppBar du bas et de forcer l’apparition de celle-ci à l’affichage de la page.

Chaque commande de l’AppBar doit être représentée par un glyph (voir table des caractères). Je vous conseille l’article de Jonathan Antoine qui permet de les avoir tous sous les yeux dans ce document.

 

Règles d’utilisation de l’AppBar du bas

Groupez vos commandes de manière fonctionnelle

Si vous avez 2 groupes, placez-en un aligné à gauche, l’autre à droite. Si vous avez plus de 2 groupes, utilisez des séparateurs et alignez-les à droite.

Hh761499.com_ico_appbar2(en-us,WIN.10).png

Placez toujours vos commandes de la même manière sur les différentes pages de votre application.

Il est recommandé d’afficher les commandes Supprimer | Nouveau,  Retirer | Ajouter, ou « Clear » sur le côté droit.

 

Commandes contextuelles à un élément sélectionné

Il est conseillé de faire apparaitre l’App Bar automatiquement pour visualiser les commandes contextuelles à l’élément sélectionné. Placez ces commandes contextuelles sur la gauche en décalant les autres commandes déjà présentes dans l’AppBar et en ajoutant un séparateur.

Hh761499.com_ico_appbar4(en-us,WIN.10).png

 

Trop de commandes ?

Si vous n’avez pas assez de place dans l’AppBar, regroupez des commandes entre elles suivant leurs fonctionnalités et affichez-les dans un menu flyout piloté par un bouton de l’AppBar.

Filtering in an app bar

 

Gestion du mode snap et du mode Portrait

Vérifiez le bon comportement de l’AppBar en mode Snap et Portrait où le nombre de commandes visibles est plus limité.

Vous pouvez modifier le nombre de commandes dans l’AppBar en fonction du mode d’affichage ; quitte à en cacher certaines moins pertinentes ou à en regrouper dans des menus flyout.

 

Les exceptions

Le bouton Back

Il sert à revenir à la page précédente et apparait à gauche du titre de la page.

image

 

Les commandes associées à des élements non sélectionnables ou au Presse-Papier

Les commandes d’édition en général comme le copier/coller doivent apparaitre sous la forme d’un menu flyout et ne pas se retrouver dans l’AppBar. Vous pouvez également utiliser un menu contextuel flyout pour toutes les commandes associées à des éléments non sélectionnables.

 

Les commandes de gestion de compte de l’utilisateur

Si vous avez une notion de compte utilisateur dans votre application, les commandes associées devront se retrouver dans les settings (accessible par le charm associé). Vous pouvez néanmoins proposer une commande de connexion directement sur la page principale si la connexion est indispensable à l’utilisation de votre application.

 

Les commandes de paramétrage, la recherche et le partage d’information

Toutes ces fonctionnalités se retrouvent dans les charms Settings, Search et Share et sont accessibles par ce biais.

Ne dupliquez pas une commande de charm dans l’AppBar.

Si une de ces fonctionnalités est primordiale au fonctionnement d’une page, vous pouvez ajouter un élément directement dans la page qui permet d’accéder au charm associé.

 image

image

 

 

Pour approfondir le sujet:

Commanding design for Metro style apps

Navigation design for Metro style apps

Guidelines and checklist for app bars

 

Voir le mémo complet

Leave a Comment
  • Please add 7 and 3 and type the answer here:
  • Post
  • Top! Super pratique. A relayer!

Page 1 of 1 (1 items)
Page 1 of 4 (87 items) 1234