Affichage de l'interface utilisateur à la demande avec la barre d'application

Blog des développeurs d'applications Windows 8

Indications sur la conception d'applications de style Metro pour Windows 8, par l'équipe d'ingénierie de Windows 8

Affichage de l'interface utilisateur à la demande avec la barre d'application

  • Comments 3

Pour créer une application de qualité, il convient d'identifier et de valoriser les principaux avantages de votre application dans sa catégorie. Windows 8 fournit des outils, tels que les icônes et les barres d'application, pour que l'utilisateur puisse se concentrer facilement sur les principaux avantages de votre application, sans être distrait par tout ce qui est secondaire. Apprenez à utiliser ces outils pour que vos utilisateurs puissent réellement apprécier tous les points positifs de votre application.

Se concentrer sur les principaux avantages de votre application

Lorsque vous allez voir un film au cinéma, le film est projeté sur un énorme écran et vous ne voyez rien d'autre. Le reste de la pièce est dans l'obscurité. La bande sonore vous environne et vous ne pouvez rien entendre d'autre que le film. Les gens parlent des films que vous devez aller voir au cinéma. Ce n'est pas la peine de les voir si vous ne pouvez pas profiter de cette immersion totale dans ces films. Les dialogues sont plus clairs et l'image plus vivante. Vous avez presque l'impression d'y être. En fait, vous êtes absorbé jusqu'à ce que la personne assise à côté de vous reçoive un appel téléphonique, ce qui vous distrait et vous éloigne du film. Chaque distraction vous en éloigne petit à petit.

Votre application est le cinéma et le contenu de votre application est le film. Cette idée de créer un environnement par lequel les utilisateurs peuvent s'immerger dans l'application est au cœur de la nouvelle conception. Dans le billet Création d'applications de style Metro qui sortent du lot, nous avons expliqué comment choisir une formulation des principaux avantages de votre application dans sa catégorie. Si vous connaissez les principaux avantages de votre application et que vous souhaitez vous concentrer sur ces aspects, Windows 8 vous offre les outils qui vous permettront de tenir tout le reste (toutes les distractions) à l'écart jusqu'à ce que l'utilisateur souhaite les appeler. Nous avons expliqué cette idée en nous appuyant sur l'exemple « Food with Friends ».

Nous avons conçu ces pages dans « Food with Friends » :

Hiérarchie « Food with Friends »

Figure 1 : hiérarchie « Food with Friends »

En fonction de ce qui a déjà été disposé dans « Food with Friends », vous pouvez répondre aux suggestions de vos amis concernant les activités de la soirée, trouver les restaurants dans lesquels ils souhaitent aller et trouver ceux qui vous intéressent. Il y a également des choses que vous ne pouvez pas encore faire à ce stade. Vous ne pouvez pas ajouter de restaurants à votre liste de préférences, trier ou filtrer la liste de tous les restaurants ou rechercher un restaurant en particulier. Ce n'est pas un problème. Toutes ces fonctionnalités sont importantes, mais elles ne constituent pas les principaux atouts de votre application. Souvenez-vous de cette phrase dans le billet précédent :

  • L'application « Food with Friends » est la meilleure dans sa catégorie pour aider les utilisateurs et leurs amis à trouver un restaurant où manger ce soir.

Il ne fait aucun doute que c'est exactement ce que vous pouvez faire, simplement en interagissant avec l'interface utilisateur de l'application que nous avons déjà mise en place. La formulation des principaux avantages est parfaitement représentée sur la zone de dessin. Si nous devions ajouter des boutons et des widgets pour permettre aux utilisateurs d'ajouter des éléments à votre liste de préférences ou de trier et filtrer les listes, ces commandes distrairaient les utilisateurs du contenu lorsqu'elles ne sont pas nécessaires. Mais à un moment donné, l'utilisateur aura besoin d'accéder à ces commandes. Alors, où placer ces commandes secondaires, mais importantes ?

Windows 8 offre des méthodes standardisées pour permettre aux utilisateurs d'accéder à l'interface utilisateur dans les applications. Cette interface utilisateur est accessible à la demande et est masquée jusqu'à ce que l'utilisateur décide de l'afficher. Lorsque les commandes sont accessibles à la demande, vous n'avez pas à distraire les utilisateurs en surchargeant la zone de dessin de votre application. L'interface utilisateur à la demande vous permet de concentrer chaque pixel de votre application sur votre formulation des principaux avantages. Il existe deux méthodes auxquelles presque toutes les applications font appel pour exposer leur interface utilisateur à la demande : la barre des icônes et la barre d'application. Comme la barre des icônes et la barre d'application seront toutes les deux disponibles dans tout l'écosystème et qu'elles sont toujours appelées d'une manière standard, vous pouvez être certain que les utilisateurs les appelleront lorsqu'ils en auront besoin et qu'ils se concentreront sur le contenu de votre application le reste du temps.

Icônes

Barre des icônes

Figure 2 : barre des icônes

En concevant Windows 8, nous savions que certaines fonctionnalités seraient présentes dans presque toutes les applications et que d'autres fonctionnalités sont incontournables dans une application de qualité. Pour répondre à leur omniprésence, nous avons créé un lieu permanent pour ces commandes, appelées icônes, dans chaque application. Les icônes permettent de rechercher, de partager, de se connecter aux périphériques et de configurer des paramètres dans chaque application et dans le système même. Vous pouvez les utiliser partout dans le système. Ainsi, lorsque vous développez votre application, vous n'avez pas besoin de vous demander où placer votre zone de recherche ou de trouver une méthode pratique pour que les utilisateurs puissent partager votre contenu avec d'autres applications ou réseaux sociaux. Ce n'est pas ce qui va différencier votre application de toutes les autres. Les paramètres peuvent être importants, mais ils ne doivent pas distraire des fonctionnalités formidables et pertinentes que vous avez créées. Les icônes permettent aux utilisateurs d'accéder de manière standardisée à ces fonctionnalités. Et surtout, elles restent hors écran tant que l'utilisateur ne les appelle pas, ce qui lui permet de ne pas être distrait de ce qui différencie véritablement votre application : le contenu. Les utilisateurs appellent les icônes en effectuant un mouvement de balayage à partir du bord droit, en faisant glisser la souris vers l'angle supérieur droit ou en appuyant sur la touche Windows + C. Cela fonctionne partout dans le système.

Barre d'application et barre de navigation

Barre d'application et barre de navigation dans l'application Sports

Figure 3 : barre d'application et barre de navigation

Tandis que les icônes permettent aux utilisateurs d'accéder de manière standardisée aux fonctionnalités de presque toutes les applications, la barre d'application et la barre de navigation permettent d'accéder aux fonctions propres à chaque application. Les sections d'une application qui renseignent une barre de navigation diffèrent d'une application à une autre. Les commandes qui apparaissent sur la barre d'application sont fonction du contexte de l'application, ou même de la sélection en cours. Même si la barre d'application et la barre de navigation sont différentes d'une application à une autre, elles constituent de puissants outils pour chaque application, car elles demeurent le principal endroit que les utilisateurs regardent pour savoir ce que l'application peut faire, car c'est ainsi que fonctionnent les applications. Dans toutes les applications, les utilisateurs parviennent à votre interface utilisateur à la demande en effectuant un mouvement de balayage du haut vers le bas de l'écran, en cliquant avec le bouton droit de la souris à l'importe quel endroit de l'application ou en appuyant sur la touche Windows + Z sur le clavier. Ces commandes fonctionnent dans chaque application avec la barre d'application et la barre de navigation.

L'interface utilisateur à la demande standard de Windows 8 permet aux utilisateurs d'explorer le contenu de votre application sans avoir à se demander comment s'articule l'interface utilisateur. Son fonctionnement repose sur la cohérence et la prévisibilité dans Windows et dans les applications. Dans ce qui suit, nous allons expliquer comment concevoir et créer de formidables barres d'application. Dans des billets à venir, nous expliquerons plus en détail certaines des autres fonctionnalités du système, telles que les icônes individuelles, qui vous aident à focaliser votre application sur ses principaux avantages tout en tirant pleinement parti de l'écosystème d'applications de Windows 8.

Éléments à insérer dans une barre d'application

Lorsque vous créez une barre d'application, la première chose que vous devez vous demander est ce que vous allez mettre dedans. Comme nous l'avons précédemment mentionné, il s'agit de fonctionnalités qui ne doivent être accessibles qu'à la demande, car ce ne sont pas des éléments clés par rapport aux scénarios principaux dans lesquels votre application doit exceller. Vous pouvez les identifier en vous demandant si ces fonctionnalités vont être fréquemment utilisées pendant la durée de vie de l'application. Par exemple, regardez la barre de l'application SkyDrive de la version Release Preview :

Barre de l'application SkyDrive

Figure 4 : barre de l'application SkyDrive

L'application SkyDrive excelle dans ce domaine : permettre aux utilisateurs d'accéder à toutes leurs données, où qu'ils soient. C'est pourquoi la zone de l'application est centrée sur la navigation au sein de ces données. Bien sûr, l'ajout de fichiers constitue une part importante de l'application. Après tout, comment obtiendriez-vous cette formidable collection de données autrement ? Mais comme ce n'est pas une opération que les utilisateurs vont effectuer en permanence, le bouton Ajouter peut parfaitement être accessible à la demande. Ainsi, chaque pixel de la zone de dessin de l'application est dédié à la navigation au sein de votre collection, sauf si vous avez décidé d'ajouter de nouveaux fichiers. Dans ce cas, les utilisateurs sauront exactement comment appeler la commande Ajouter, car elle s'affiche de la même manière que les éléments d'interface utilisateur masqués dans tout le système.

Création d'une barre d'application

Le contrôle AppBar en WinJS et XAML est la meilleure méthode de créer une interface utilisateur à la demande. Vous pouvez l'utiliser pour créer à la fois une barre d'application au bas de l'écran et une barre de navigation en haut (même si nous nous concentrons ici sur la première).

Une barre d'application de qualité doit, à la demande, mettre à la disposition de l'utilisateur toutes les commandes disponibles de l'application à l'aide des mouvements standard (mouvement de balayage à partir du haut ou du bas, clic droit ou touche Windows + Z). Le contrôle AppBar vous permet de bénéficier de ce comportement facilement et en plus, vous permet de créer très facilement une barre d'application de base qui s'ajuste parfaitement à l'apparence globale.

Par exemple, si nous devions créer une barre d'application pour la page de concentrateur de « Food with Friends », la seule commande par défaut qui soit pertinente est la possibilité de créer un nouveau projet pour le soir, ce qui apparaîtrait sous cette forme dans notre barre d'application :

Barre de l'application « Food with Friends » sur le concentrateurFigure 5 : barre de l'application « Food with Friends »

HTML

Créer une barre d'application standard en HTML est aisé. Il suffit de créer un contrôle AppBar, puis de placer des contrôles AppBarCommand à l'intérieur en définissant leurs propriétés comme il convient. Le procédé est rendu encore plus facile grâce à l'énumération AppBarIcons, qui est une liste d'icônes créées au préalable, prêtes à l'emploi et qui correspondent au nouveau style.

<div id="foodWithFriendsAppBar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdAdd',
label:'New plan',
icon:'add',
section:'global',
tooltip:'Create a new plan'}"
>
</button>
</div>

XAML

Pour créer un contrôle AppBar en XAML, vous devez instancier un élément AppBar et le définir comme propriété BottomAppBar ou TopAppBar sur l'objet Page en fonction de l'endroit où vous voulez que la barre d'application apparaisse. Ajoutez ensuite des boutons à la barre d'application à l'aide des styles fournis dans les modèles de projet Visual Studio par défaut pour les applications Windows Store. En XAML, vous choisissez la disposition des boutons au sein de la barre d'application en insérant les boutons dans les volets de disposition voulus.

<Page.BottomAppBar>
<AppBar>
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource AddAppBarButtonStyle}"
AutomationProperites.Name="New plan"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>

Contrôles pouvant intégrer la barre d'application

Nous voyons couramment certains types de commandes dans les barres d'application : boutons, boutons bascule et en JS, menus volants. Si vous souhaitez voir des exemples de chacun de ces types, regardez la barre de l'application Courrier dans la version Release Preview :

Barre de l'application Courrier avec des boutons standard, des boutons bascule et des menus volants. Le bouton [More] (Plus) permet de lancer un menu, le bouton [Font] (Police) permet de lancer un menu volant et le bouton [Underline] (Souligné) est un bouton bascule

Figure 6 : barre de l'application Courrier

La barre de l'application Courrier présente des exemples de boutons standard ([Paste] (Coller)), de boutons bascule ([Bold] (Gras), [Italic] (Italique) et [Underline] (Souligné)), de boutons qui permettent de lancer des menus ([More] (Plus)) et de menus volants personnalisés ([Font] (Police), [Font color] (Couleur de police) et [Highlight] (Mettre en surbrillance)). Pour créer ces types de boutons en JS, consultez l'article sur l'objet AppBarCommand. En XAML, suivez les styles présents dans les modèles de projet et pour les menus volants, utilisez la classe Popup avec comportement LightDismiss.

Contextualisation de la barre d'application

Afficher les éléments d'interface utilisateur à la demande fonctionne uniquement si les utilisateurs savent exactement où les trouver. S'ils doivent chercher partout dans votre application ou essayer chaque élément d'interface utilisateur pour découvrir les commandes cachées, il est peu probable qu'ils apprécient réellement votre application. C'est pourquoi une barre d'application réussie affiche toujours toutes les commandes qui sont disponibles à un moment donné. Les commandes appropriées peuvent varier en fonction de certains éléments : la page actuelle, la sélection actuelle ou tout ce qui change l'état de votre application. Dans ce cas, affichez toutes les commandes qui sont appropriées, celles qui sont disponibles globalement (parce qu'elles fonctionnent toujours) et celles qui sont spécifiques au contexte actuel. Par exemple, si vous cliquez avec le bouton droit de la souris sur l'écran d'accueil sans rien avoir sélectionné, la barre d'application comporte uniquement le bouton [All apps] (Toutes les applications) :

Barre d'application de l'écran d'accueil

Figure 7 : barre d'application de l'écran d'accueil

Si vous cliquez avec le bouton droit sur une vignette pour la sélectionner, la barre d'application comporte non seulement le bouton [All apps) (Toutes les applications) à sa position habituelle, mais également des commandes spécifiques à la vignette sur la gauche :

Barre d'application de l'écran d'accueil présentant des commandes spécifiques à la vignette

Figure 8 : barre d'application de l'écran d'accueil présentant des commandes spécifiques à la vignette

Si nous faisons en sorte que toutes les commandes pertinentes restent visibles, l'utilisateur peut cliquer avec le bouton droit à n'importe quel endroit de l'écran pour accéder à tous les éléments d'interface utilisateur à la demande. Il n'a pas besoin de faire attention à ne pas sélectionner par erreur une vignette lorsqu'il effectue un clic droit. En plaçant les commandes qui apparaissent et disparaissent sur la gauche (ou sur la droite pour les langues qui s'écrivent de droite à gauche), vous offrez un endroit prévisible dans lequel les utilisateurs voient ce qu'ils peuvent faire avec leur sélection. Les utilisateurs peuvent être assurés que s'ils cliquent avec le bouton droit à n'importe quel endroit, toutes les commandes disponibles apparaîtront, et les commandes spécifiques à leur sélection s'afficheront sur la gauche.

Les commandes contextuelles qui apparaissent et disparaissent sont placées à gauche pour des raisons d'ergonomie. Au cours de nos études, nous avons mis en évidence que la plupart des utilisateurs (même les gauchers !) utilisent les appareils tactiles avec leur main droite. Si les commandes basées sur la sélection s'affichaient sur la droite, en déplaçant votre bras droit pour sélectionner un élément, vous cacheriez les nouvelles commandes qui viennent d'apparaître ! De même, le fait de placer les commandes qui sont toujours présentes sur la droite vous permet d'utiliser votre main droite pour y accéder, ce qui est idéal car la plupart des utilisateurs interagissent avec les appareils tactiles avec la main droite. Par conséquent, placer les commandes qui apparaissent et disparaissent sur la gauche et les commandes qui sont présentes en permanence pour un écran donné sur la droite, permet aux utilisateurs d'y accéder beaucoup plus efficacement en mode tactile.

Sur la page de concentrateur de « Food with Friends », voici la barre d'application par défaut lorsque rien n'est sélectionné :

Barre de l'application « Food with Friends » sur la page de concentrateur sans aucun élément sélectionné sur la page

Figure 9 : barre de l'application « Food with Friends » sur la page de concentrateur, sans sélection

Si vous sélectionnez un restaurant, vous avez la possibilité de l'ajouter ou de le supprimer de la liste de préférences. Ainsi, lorsque
vous sélectionnez un restaurant, un bouton bascule de la liste de préférences apparaît sur la barre d'application :

Barre de l'application « Food with Friends » sur la page de concentrateur avec un événement sélectionné

Figure 10 : barre de l'application « Food with Friends » sur le concentrateur avec un événement sélectionné

Tout comme sur l'écran d'accueil, les commandes qui apparaissent et disparaissent en fonction de la sélection s'affichent à gauche pour les distinguer de la commande toujours présente [New plan] (Nouveau projet).

Voici comment insérer les commandes sur les différents côtés de la barre d'application et comment les faire apparaître et disparaître.

HTML

Pour placer une commande sur la gauche, vous devez l'insérer dans la section « selection ». Pour qu'elle soit masquée par défaut, définissez la propriété « hidden » sur « true ». La propriété « extraclass » vous permet de vous référer facilement à un ensemble de commandes dans le code, nous l'utilisons donc pour regrouper les commandes qui doivent s'afficher ensemble lors de la sélection d'un événement.

<div id="foodWithFriendsAppBar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdAdd',
label:'New plan',
icon:'add',
section:'global'"
>
</button>

<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdWishlist',
label:'Wishlist',
icon:'favorite',
section:'selection',
hidden:'true',
extraClass:'restaurantSelection'}"
>
</button>
</div>

Pour afficher et masquer dynamiquement les commandes sur la barre d'application, appelez simplement :

var restaurantSelectionCommands = document.querySelectorAll(".restaurantSelection");
appbar.showCommands(restaurantSelectionCommands);

Pour connaître toutes les icônes proposées pour la barre d'application, consultez l'énumération AppBarIcon. Pour obtenir la liste complète des propriétés AppBarCommand, consultez l'objet WinJS.UI.AppBarCommand.

XAML

Le contrôle AppBar en XAML ne gère pas la disposition des boutons par défaut. Ainsi, pour suivre la disposition prescrite avec les sections droite et gauche des commandes, vous devez fournir les volets de disposition nécessaires pour héberger les boutons. Nous utilisons ici une grille contenant deux colonnes, chacune occupant la moitié de la barre d'application. Nous ajoutons ensuite deux éléments StackPanel (l'un aligné à gauche et l'autre aligné à droite) pour contenir les boutons.

Il est possible de masquer/d'afficher les boutons de la barre d'application en XAML en définissant simplement la propriété Visibility de chaque bouton, mais cela ne permet pas d'animer correctement les boutons. Pour obtenir le comportement d'animation des boutons de la barre d'application en HTML, vous devez ajouter l'élément AddDeleteThemeTransition à la propriété ChildrenTransitions pour chaque volet qui héberge les boutons de la barre d'application. Ensuite, pour déclencher ces animations de transition, vous devez supprimer/ajouter les boutons à la barre d'application.

<Page.BottomAppBar>
<AppBar x:Name="BottomAppBar1" IsSticky="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
<StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
<Button x:Name="New" Style="{StaticResource AddAppBarButtonStyle}" AutomationProperties.Name="New" Tag="New"/>
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>

private void AddEventSelectionCommands(object sender, RoutedEventArgs e)
{
Button inButton = new Button();
Button vetoButton = new Button();
Button mehButton = new Button();

inButton.Style = App.Current.Resources["AcceptAppBarButtonStyle"] as Style;
inButton.AutomationProperties.Name = "In";
vetoButton.Style = App.Current.Resources["CancelAppBarButtonStyle"] as Style;
vetoButton.AutomationProperties.Name = "Veto";
mehButton.Style = App.Current.Resources["HelpAppBarButtonStyle"] as Style;
mehButton.AutomationProperties.Name = "Meh";

// Make it the second item
LeftPanel.Children.Insert(1, inButton);
LeftPanel.Children.Insert(2, vetoButton);
LeftPanel.Children.Insert(3, mehButton);
}

Une barre d'application présente quand vous en avez besoin

Par ailleurs, une barre d'application contextuelle doit apparaître lorsque l'utilisateur le souhaite. Par exemple, lorsque vous sélectionnez une vignette sur l'écran d'accueil (en effectuant un mouvement de balayage vers le bas sur la vignette, en cliquant avec le bouton droit sur une vignette ou en appuyant sur les touches Ctrl + Espace), la barre d'application s'affiche automatiquement tant qu'une sélection est présente. Si un utilisateur sélectionne une vignette, c'est parce qu'il souhaite faire quelque chose avec. La barre d'application est l'endroit qui permet d'effectuer des actions, c'est pourquoi elle doit s'afficher. De même, lorsqu'un utilisateur rédige un message électronique et sélectionne du texte, la barre de l'application Courrier s'affiche avec les commandes copier-coller et de mise en forme. Après tout, si un utilisateur sélectionne du texte, c'est probablement parce qu'il souhaite faire quelque chose avec !

Normalement, la barre d'application est dotée du comportement « light dismiss ». Cela signifie que si l'utilisateur appuie en-dehors de la barre d'application, elle disparaît. Lorsque vous affichez la barre d'application par programmation (comme lors d'une sélection), il est important de désactiver le comportement « light dismiss » en rendant la barre d'application rémanente. Cela permet aux utilisateurs de modifier leur sélection après coup, ou d'effectuer une sélection multiple, sans faire disparaître la barre d'application. N'oubliez pas de réactiver le comportement « light dismiss » une fois la sélection effacée !

HTML

Voici le code permettant de gérer un objet en cours de sélection :

var restaurantSelectionCommands = document.querySelectorAll(".restaurantSelection");
appbar.showCommands(restaurantSelectionCommands);
appbar.sticky = true;
appbar.show();

When the selection is cleared, you would write the inverse code:
var restaurantSelectionCommands = document.querySelectorAll(".restaurantSelection");
appbar.hideCommands(restaurantSelectionCommands);
appbar.sticky = false;
appbar.hide();

Consultez l'article sur l'exemple de contrôle AppBar en HTML pour voir un exemple pratique d'affichage et de masquage d'une barre d'application avec des commandes contextuelles basées sur la sélection.

XAML

En XAML, vous disposez d'un gestionnaire SelectionChanged pour votre liste qui permet de voir si un élément a été sélectionné ou désélectionné. Si un élément a été sélectionné, appelez la méthode permettant d'afficher les commandes, définissez la propriété « IsSticky » de la barre d'application sur « true », puis affichez la barre d'application. Si une sélection a été effacée, appelez la méthode permettant de masquer les commandes, redéfinissez la propriété « IsSticky » sur « false », puis fermez la barre d'application.

private void RestaurantList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListView lv = sender as ListView;
if (lv.SelectedItem != null)
{
ShowRestaurantCommands();
BottomAppBar.IsSticky = true;
BottomAppBar.IsOpen = true;
}
else
{
HideRestaurantCommands();
BottomAppBar.IsSticky = false;
BottomAppBar.IsOpen = false;
}
}

Disposition des commandes

La prochaine étape consiste à déterminer comment disposer vos commandes. Les endroits les plus appropriés pour les commandes sont les côtés droit et gauche de l'écran. Pour le tactile, comme les utilisateurs tiennent le plus souvent leur tablette par les côtés, le fait de placer les commandes sur les bords permet d'y accéder avec les pouces sans avoir à déplacer les mains. Pour les utilisateurs de la souris, ce choix est conforme à la loi de Fitts : les utilisateurs pouvant déplacer leur curseur vers les angles inférieurs plus facilement et rapidement que n'importe quel autre endroit de l'écran, il est plus facile de cibler les commandes qui se trouvent le plus près possible des bords.

La question est donc : quelles commandes choisir et comment les répartir sur les deux côtés. Nous expliquons ce sujet en détail dans le document Conception des commandes des applications de style Metro, mais pour résumer, comme avec chaque élément de la barre d'application, disposez vos commandes de façon à ce que leur position soit prévisible. Commencez par disposer les commandes en fonction des écrans les plus répandus, et des commandes les plus répandues. Soignez leur position et leur esthétique. La règle de base consiste à placer les commandes les plus fréquemment utilisées le plus près des bords ou de suivre des exemples de commande similaire dans d'autres applications connues. Cela permet aux utilisateurs de prévoir le fonctionnement de votre application, avant même de l'utiliser. Ensuite sur chaque écran suivant, conservez les commandes partagées au même endroit et placez le reste des commandes autour. Lorsqu'une commande est positionnée, ne la déplacez pas. Cela permet aux utilisateurs de connaître la position des commandes et d'utiliser votre application de manière de plus en plus naturelle, afin de se concentrer sur le contenu principal de l'application.

Les commandes apparaissent et disparaissent souvent en fonction de la sélection ou en fonction du contexte actuel de l'application. Par exemple, dans l'application « Food with Friends », sur la page répertoriant les restaurants, certaines commandes sont pertinentes uniquement si vous consultez les restaurants en mode Liste (par exemple la commande de tri), et d'autres commandes sont disponibles uniquement en mode Carte (par exemple centrer sur l'emplacement actuel de la carte). Dans ce cas, placez les commandes qui apparaissent dans les deux modes plus près des bords afin qu'elles ne soient pas déplacées lorsque l'utilisateur change de mode.

Dans l'application « Food with Friends », sur la page [All restaurants] (Tous les restaurants), l'utilisateur peut afficher les restaurants en mode Liste ou en mode Carte. L'ensemble des commandes disponibles change lorsque le mode d'affichage change, c'est pourquoi le positionnement des commandes est très important :

Page « All restaurants » de l'application « Food with Friends » en mode Liste. Les commandes qui dépendent du mode d'affichage actuel sont toutes situées à proximité des commandes de changement du mode d'affichage. [New] (Nouveau) est la commande stable, elle apparaît par conséquent sur la droite.

Figure 11 : page « All restaurants » de l'application « Food with Friends » en mode Liste

  Page « All restaurants » de l'application « Food with Friends » en mode Carte. Les commandes qui dépendent du mode d'affichage actuel sont toutes situées à proximité des commandes de changement du mode d'affichage. [New] (Nouveau) est la commande stable, elle apparaît par conséquent sur la droite

Figure 12 : page « All restaurants » en mode Carte 

Avez-vous remarqué que la commande [Filter] (Filtrer) se trouve à gauche de [Sort] (Trier) en mode Liste et à gauche du bouton du style de carte en mode Carte ? Maintenant, si vous changez de mode d'affichage, toutes les commandes communes conservent leur position, ce qui confère à la barre d'application un caractère stable et prévisible.

Changement du mode d'affichage

Commencer par disposer les commandes en mode Paysage de votre application est une pratique courante, mais il est également important de penser à l'apparence de la barre d'application en mode Portrait et lorsque votre application est ancrée. Par défaut, la barre d'application WinJS s'affiche automatiquement en fonction de la largeur disponible et s'assure que 10 commandes au maximum peuvent toujours être présentes. En mode Portrait, la barre d'application perd le libellé des commandes et en vue ancrée, les boutons sont répartis sur deux rangées. Il s'agit du comportement automatique, dont vous pouvez tirer parti si le contenu de l'application reste cohérent d'un mode d'affichage à un autre.

Avec la barre d'application XAML, ou si vous utilisez la disposition personnalisée de la barre d'application WinJS, vous contrôlez entièrement le contenu et la disposition de vos commandes. Cela signifie qu'en mode Portrait et en vue ancrée, vous devez faire très attention pour être certain que toutes vos commandes s'adaptent au nouveau mode d'affichage. Pour ce faire, vous pouvez éliminer le libellé de tous les boutons, regrouper les commandes dans des menus ou masquer les commandes qui ne sont pas appropriées dans ces états.

Les options de mode Liste et de mode Carte sont regroupées dans un menu en vue ancrée

Figure 13 : mode Carte en vue ancrée de la page « All restaurants »

Dans l'application « Food with Friends », vous pouvez voir un exemple de personnalisation de la barre d'application afin d'optimiser son apparence en vue ancrée tout en conservant toutes les commandes pertinentes. Dans ce cas, pour réduire à 5 boutons (afin que les boutons puissent tous tenir sur une seule ligne), les commandes de changement du mode d'affichage (mode Liste et mode Carte) sont regroupées dans un seul menu.

            

Personnalisez la barre d'application

Le contrôle AppBar vous permet de créer facilement une barre d'application de base. Il permet également de la personnaliser afin qu'elle s'adapte parfaitement au style de votre application. Les personnalisations les plus répandues sont notamment le changement de couleur, de glyphe ou du style de bouton. Soyez créatif ! La barre d'application doit être une extension naturelle de votre application, alors donnez-lui la même personnalité qu'au reste de l'application. Vous trouverez des exemples pour savoir comment procéder dans les articles sur l'exemple de contrôle AppBar en HTML et l'exemple de contrôle AppBar en XAML.

Selon les commandes dont vous disposez, vous pouvez même envisager d'afficher vos éléments d'interface utilisateur à la demande d'une façon totalement différente d'une barre d'application. Innovez ! Et si vous choisissez d'aller dans ce sens, n'oubliez pas que les utilisateurs s'attendront à ce que les éléments d'interface utilisateur masqués s'affichent à l'aide des mouvements standard (mouvement de balayage à partir du haut ou du bas, clic droit ou touche Windows + Z) et qu'ils disparaissent généralement en appuyant hors des éléments d'interface. Pour en savoir plus sur les événements standard d'interface utilisateur à la demande, consultez l'article sur la classe EdgeGesture.

Conclusion

La nouvelle conception consiste en grande partie à concentrer votre application sur ses principaux avantages. Ne perdez jamais de vue ce qui distingue votre application et limitez tous les éléments secondaires en les rendant disponibles à la demande. La barre d'application vous permet de le faire facilement. Le suivi des conventions habituelles sur le positionnement des commandes et la contextualisation de la barre d'application permettent aux utilisateurs de profiter pleinement de ce qui distingue votre application, sans avoir à se demander où se trouvent les commandes dans l'application. Si vous utilisez les outils et conventions que Windows 8 met à votre disposition pour focaliser votre interface utilisateur sur les principaux atouts de votre application, les utilisateurs apprendront à en apprécier les points forts.

Pour en savoir plus sur les éléments d'interface utilisateur à la demande, consultez le site http://design.windows.com et Recommandations et liste de vérification sur les barres d'application. Pour en savoir plus sur le contrôle AppBar en JS, utilisez l'exemple de contrôle AppBar en HTML, l'exemple de contrôle AppBar en XAML et consultez l'objet WinJS.UI.AppBar et la classe Windows.UI.Xaml.Controls.AppBar.

Bonne session de programmation !

--Jon Gordner, chef de projet, Windows

  • Loading...
Leave a Comment
  • Please add 5 and 3 and type the answer here:
  • Post