Recommandations et liste de vérification pour les contrôles de progression (applications du Windows Store)

Cette rubrique décrit les meilleures pratiques pour utiliser des contrôles de progression dans votre application du Windows Store en C++, C# ou Visual Basic.

Feuille de route : comment cette rubrique s’articule-t-elle par rapport aux autres ? Voir :

Est-ce le contrôle approprié ?

Les contrôles ProgressBar et ProgressRing indiquent aux utilisateurs la progression d’une opération dont la durée est supérieure à 2 secondes. Un contrôle ProgressBar peut afficher un pourcentage approximatif d’achèvement (progression déterminée), et les deux contrôles de progression peuvent indiquer qu’une opération est en cours (progression indéterminée).

Il n’est pas systématiquement nécessaire de présenter un contrôle de progression. Parfois, le caractère manifeste ou rapide de la progression d’une tâche ne justifie pas la présentation d’un contrôle de progression. Voici quelques points à considérer pour déterminer si vous devez présenter un contrôle de progression.

  • L’opération va-t-elle s’effectuer en deux secondes ou moins ?

    Si oui, ne présentez pas de contrôle de progression. Si une opération nécessite plus de deux secondes pour s’accomplir dans la plupart des cas (mais pas toujours), patientez 500 ms avant de présenter le contrôle pour éviter tout scintillement.

  • L’opération attend-elle que l’utilisateur effectue une tâche ?

    Si oui, n’utilisez pas de barre de progression. Les barres de progression concernent la progression de l’ordinateur, pas celle de l’utilisateur.

  • L’utilisateur a-t-il besoin de savoir que quelque chose se produit ?

    Par exemple, si l’application télécharge des données en arrière-plan sans intervention de l’utilisateur, celui-ci n’a pas besoin de suivre la progression du téléchargement.

  • L’opération est-elle une activité en arrière-plan qui ne bloque pas celle de l’utilisateur et dont l’intérêt est minime (mais tout de même existant) pour l’utilisateur ?

    Utilisez du texte et des points de suspension lorsque votre application effectue des tâches qui n’ont pas à être visibles tout le temps, mais dont vous souhaitez quand même indiquer le statut.

    Exemple de texte utilisé en tant qu’indicateur de progression

    Utilisez les points de suspension pour indiquer que la tâche est en cours. S’il existe plusieurs tâches ou éléments, vous pouvez indiquer le nombre de tâches restantes. Lorsque toutes les tâches sont terminées, faites disparaître l’indicateur.

  • Pouvez-vous utiliser le contenu de l’opération pour visualiser la progression ?

    Si oui, ne présentez pas de contrôle de progression. Par exemple, lors de l’affichage d’images chargées depuis le disque, celles-ci apparaissent à l’écran une par une au fur et à mesure de leur chargement. L’affichage d’un contrôle de progression ne présenterait aucun avantage et ne ferait qu’encombrer l’interface utilisateur.

N’utilisez pas le « curseur d’attente » pour indiquer une activité, car les utilisateurs qui interagissent de manière tactile avec le système ne le voient pas et ceux qui utilisent la souris n’ont pas besoin de deux manières de visualiser l’activité (le curseur et le contrôle de progression).

Choix du type approprié de style de contrôle de progression

Il existe 3 styles de contrôle de progression :

  • La barre de progression déterminée

    Exemple de barre de progression déterminée

    Utilisez le style de barre de progression déterminée lorsqu’une tâche est déterminée, c’est-à-dire lorsqu’elle a une durée bien définie ou une fin prévisible. Voici quelques exemples de tâches déterminées :

    • L’application télécharge une photo de 500 ko et a pour l’heure reçu 100 ko.
    • L’application affiche une annonce de 15 secondes et 2 secondes se sont écoulées.
  • La barre de progression indéterminée

    Exemple de barre de progression indéterminée

    Utilisez ce style pour les tâches qui ne sont pas déterminées et qui sont non modales (qui ne bloquent pas l’interaction de l’utilisateur).

  • L’anneau de progression indéterminée

    Exemple d’anneau de progression

    Utilisez ce style pour les tâches qui ne sont pas déterminées mais modales (qui bloquent l’interaction de l’utilisateur).

Considérez les tâches partiellement modales comme non modales. Certaines tâches bloquent l’interaction le temps qu’une certaine progression ait lieu, après quoi l’utilisateur peut recommencer à interagir avec l’application. Par exemple, lorsque l’utilisateur effectue une requête de recherche, son interaction est bloquée jusqu’à ce que le premier résultat s’affiche. Traitez les tâches de ce type comme des tâches non modales et utilisez la barre de progression indéterminée si l’état modal dure moins de 2 secondes. Si l’état modal peut durer plus de 2 secondes, utilisez l’anneau de progression indéterminée pour la phase modale de la tâche, et la barre de progression indéterminée pour la phase non modale.

Recommandations générales

Voici quelques recommandations générales à suivre, quel que soit le style de contrôle de progression utilisé.

  • Présentez un seul contrôle de progression pour plusieurs tâches actives connexes. S’il existe plusieurs éléments connexes à l’écran qui effectuent simultanément un type d’activité, ne présentez pas plusieurs contrôles de progression. Présentez-en plutôt un qui se termine lorsque la dernière tâche est accomplie. Par exemple, si l’application télécharge plusieurs photos, présentez un seul contrôle de progression, plutôt qu’un pour chaque photo.
  • Ne changez pas l’emplacement ou la taille du contrôle de progression pendant que la tâche s’exécute.

Recommandations pour les tâches déterminées

Si vous pouvez estimer la quantité de travail restante en temps, octets, fichiers ou autres unités de mesure quantifiables, utilisez une barre de progression déterminée. Voici quelques recommandations concernant l’utilisation de la barre de progression déterminée.

Basculement d’une progression indéterminée vers une progression déterminée

Si un délai (ou une action) est nécessaire avant de fournir une progression déterminée, utilisez d’abord la barre indéterminée, puis basculez vers la barre déterminée.

Par exemple, si la première étape d’une tâche de téléchargement est la connexion à un serveur, vous ne pouvez pas estimer la durée de cette tâche. Une fois la connexion établie, basculez vers la barre de progression déterminée pour montrer la progression du téléchargement. Maintenez la barre de progression exactement au même emplacement, sans modifier sa taille après le basculement.

Passage d’une barre de progression indéterminée à une barre de progression déterminée

Affichage de la progression et du statut

Supposons que vous ayez une liste d’éléments, telle qu’une liste d’imprimantes, et que certaines actions puissent initier une opération sur les éléments de cette liste (telle que l’installation d’un pilote pour l’une des imprimantes). Dans ce cas et lorsque l’opération est déterminée, présentez une barre de progression déterminée en regard de l’élément.

Montrez l’objet (étiquette) de la tâche au-dessus de la barre de progression et le statut en dessous. N’indiquez pas de texte de statut si ce qui se produit est une évidence. Une fois la tâche terminez, masquez la barre de progression. Utilisez le texte de statut pour communiquer le nouvel état d’un élément.

Affichage de la progression avec statut

Affichage de plusieurs opérations

Lorsque vous voulez montrer une liste de tâches, alignez le contenu dans une grille afin que les utilisateurs puissent voir le statut d’un seul coup. Montrez les barres de progression de tous les éléments, même ceux en attente.

Étant donné que l’objectif de cette liste est de montrer les opérations en cours, supprimez les opérations de la liste lorsqu’elles sont terminées.

Affichage de plusieurs barres de progression

Affichage de la progression déterminée d’une application modale dans la barre de l’application

Si un utilisateur initie une tâche à partir de la barre de l’application et qu’elle bloque son interaction, présentez le contrôle de progression dans la barre de l’application.

Si l’opération dont la progression est indiquée par la barre de progression est clairement identifiée, vous pouvez aligner la barre de progression sur la partie supérieure de la barre de l’application et ignorer l’étiquette et le statut ; sinon, fournissez une étiquette et un texte de statut.

Désactivez l’interaction pendant la tâche en désactivant les contrôles dans la barre de l’application et en ignorant la saisie dans la zone de contenu.

 

Recommandations concernant les tâches déterminées

Pratiques conseilléesSi l’opération est modale (elle bloque l’interaction de l’utilisation) et nécessite plus de 10 secondes, fournissez un moyen de l’annuler.
Échelonnez les mises à jour de la progression de manière régulière. Évitez les situations dans lesquelles la progression augmente de plus de 80 %, puis s’arrête pendant longtemps. Il est préférable d’accélérer la progression vers la fin, plutôt que de la ralentir. Évitez les sauts considérables, par exemple de 0 % à 90 %.
Avant de définir la progression à 100 %, patientez jusqu’à ce que l’animation de la barre de progression déterminée soit terminée avant de la masquer.
Si votre tâche est arrêtée (par un utilisateur ou une condition externe), mais que l’utilisateur peut la reprendre, indiquez visuellement que la progression est interrompue en définissant la propriété ShowPaused sur true. Fournissez un texte de statut sous la barre de progression afin d’indiquer à l’utilisateur ce qui se passe.
Si la tâche est arrêtée et qu’elle ne peut pas être reprise ou qu’elle doit être redémarrée à partir de zéro, indiquez visuellement l’existence d’une erreur en définissant la propriété ShowError sur true. Remplacez le texte de statut (sous la barre) par un message qui indique à l’utilisateur la nature du problème et la procédure à suivre pour le résoudre (si possible).

 

Pratiques déconseilléesNe décrémentez pas la progression. Incrémentez toujours la valeur de la progression. Si vous avez besoin d’inverser une action, présentez la progression de l’inversion comme vous présenteriez la progression de toute autre action.
Ne redémarrez pas la progression (de 100 % à 0 %), sauf s’il est évident pour l’utilisateur qu’une étape ou tâche en cours n’est pas la dernière. Par exemple, supposons qu’une tâche comporte deux parties : le téléchargement de certaines données, puis le traitement et l’affichage de ces données. Une fois le téléchargement terminé, réinitialisez la barre de progression à 0 % et commencez à montrer la progression du traitement des données. S’il n’est pas clair pour les utilisateurs qu’il existe plusieurs étapes dans une tâche, réduisez les tâches à une seule échelle 0-100 % et mettez à jour le texte de statut au fur et à mesure que vous passez d’une tâche à la suivante.

 

Recommandations pour les tâches indéterminées

Si la tâche est modale (elle bloque l’interaction jusqu’à son achèvement), utilisez l’anneau de progression indéterminée. Si la tâche n’est pas modale, utilisez le style de barre de progression indéterminée.

Anneau de progression indéterminée

Suivez ces recommandations pour afficher un anneau de progression :

  • Affichez l’anneau de progression dans le contexte de l’action : présentez-le près de l’emplacement auquel l’utilisateur a initié l’action ou auquel apparaîtront les données obtenues.
  • Fournissez un texte de statut à droite de l’anneau de progression.
  • Utilisez la même couleur pour l’anneau de progression et son texte de statut.
  • Désactivez les contrôles avec lesquels l’utilisateur ne doit pas interagir pendant l’exécution de la tâche.
  • Si la tâche génère une erreur, masquez l’indicateur de progression et le texte de statut et affichez un message d’erreur à la place.

Voici quelques recommandations pour des situations particulières qui impliquent l’anneau de progression.

Dans une boîte de dialogue, une action se produit avant l’affichage de l’écran suivant.

Placez l’anneau de progression juste au-dessus de la zone des boutons, alignez-le à gauche sur le contenu de la boîte de dialogue.

Progression dans une boîte de dialogue
Affichage de la progression dans une fenêtre d’application avec des contrôles alignés à droite

Placez l’anneau de progression à gauche, ou juste au-dessus, du contrôle à l’origine de l’action. Alignez l’anneau de progression à gauche sur le contenu connexe.

Progression dans une fenêtre d’application
Affichage de la progression dans une fenêtre d’application avec des contrôles alignés à gauche

Si un contrôle qui démarre l’action modale est aligné à gauche, placez l’anneau de progression à droite de ce contrôle. Ou vous pouvez le placer en dessous du contrôle.

Anneau de progression avec des contrôles alignés à gauche

- ou -

Anneau de progression sous des contrôles alignés à gauche

Affichage de la progression dans un menu volant

Présentez un menu volant si l’activité peut se poursuivre en arrière-plan lorsque l’utilisateur fait disparaître le menu volant en appuyant en dehors de celui-ci.

Contrôle de progression dans un menu volant
Affichage de plusieurs éléments

Placez l’anneau de progression et le texte de statut en dessous du titre de l’élément. Si une erreur se produit, remplacez l’anneau de progression et le texte de statut par un texte d’erreur.

Anneau de progression dans une liste de plusieurs éléments

 

Barre de progression indéterminée

Utilisez une barre de progression indéterminée pour les tâches qui ne bloquent pas l’interaction de l’utilisateur (non modales).

Voici quelques recommandations pour des situations spécifiques impliquant une barre de progression indéterminée.

Affichage de la progression dans un menu volant

Placez la barre de progression indéterminée en haut du menu volant et définissez sa largeur afin qu’elle s’étende sur la totalité du menu volant. Cette position permet de réduire l’effet de distraction tout en communiquant quand même l’activité en cours. Ne donnez pas de titre au menu volant car celui-ci vous empêcherait de placer la barre de progression en haut du menu volant.

Barre de progression indéterminée dans un menu volant
Dans une fenêtre d’application

Placez la barre de progression indéterminée tout en haut de la fenêtre de l’application, de manière à ce qu’elle englobe la totalité de la fenêtre.

Barre de progression indéterminée dans une fenêtre d’application

 

Recommandations pour le texte de statut

  • Lorsque vous utilisez la barre de progression déterminée, n’affichez pas le pourcentage de progression dans le texte de statut. Le contrôle fournit déjà cette information.
  • Si vous utilisez du texte pour indiquer l’activité sans contrôle de progression, recourez à des points de suspension pour montrer que l’activité est en cours.
  • Si vous recourez à un contrôle de progression, n’utilisez pas de points de suspension dans votre texte de statut, car le contrôle de progression indique déjà que l’opération est en cours.

Modèles de disposition

Voici des recommandations de disposition pour plusieurs modèles courants d’utilisation de contrôles de progression.

  • Barre de progression déterminée avec étiquette et statut

    Barre de progression déterminée avec une étiquette et des informations de statut

  • Barres de progression multiples

    Disposition recommandée pour plusieurs barres de progression

  • Anneau de progression indéterminée avec texte de statut

    Disposition pour anneau de progression indéterminée avec texte de statut

  • Barre de progression indéterminée

    Barre de progression indéterminée

Rubriques associées

Feuille de route pour la création d’applications en C#, C++ ou VB

 

 

Afficher:
© 2014 Microsoft