Recommandations en matière d’interface utilisateur d’instructionsInstructional UI guidelines

Dans certains cas, il peut être utile de former l’utilisateur aux fonctions les plus subtiles de votre application, telles que des interactions tactiles spécifiques.In some circumstances it can be helpful to teach the user about functions in your app that might not be obvious to them, such as specific touch interactions. Vous devez alors fournir des instructions par le biais de l’interface utilisateur pour signaler à l’utilisateur les fonctionnalités dont il risque de ne pas encore avoir eu connaissance.In these cases, you need to present instructions to the user through the user interface (UI), so that they can use those features they might have missed.

Quand utiliser l’interface utilisateur d’instructionsWhen to use instructional UI

L’interface utilisateur d’instructions doit être utilisée avec parcimonie.Instructional UI has to be used carefully. Si vous en abusez, cette interface risque d’être rapidement ignorée ou d’incommoder l’utilisateur, et donc de se révéler inefficace.When overused, it can be easily ignored or annoy the user, causing it to be ineffective.

L’interface utilisateur d’instructions doit permettre à l’utilisateur de découvrir les fonctionnalités importantes et subtiles de votre application, comme des mouvements tactiles ou des paramètres qui sont susceptibles de l’intéresser.Instructional UI should be used to help the user discover important and non-obvious features of your app, such as touch gestures or settings they may be interested in. Il est également possible de recourir à cette interface pour signaler aux utilisateurs les nouveautés ou modifications de votre application qui sont susceptibles de lui avoir échappé.It can also be used to inform users about new features or changes in your app that they might have otherwise overlooked.

À moins que votre application ne dépende des mouvements tactiles, l’interface utilisateur d’instructions ne doit pas être utilisée pour enseigner aux utilisateurs les fonctionnalités fondamentales de votre application.Unless your app is dependent on touch gestures, instructional UI should not be used to teach users the fundamental features of your app.

Principes de création d’une interface utilisateur d’instructionsPrinciples of writing instructional UI

Une interface utilisateur d’instructions allie pertinence et pédagogie, et améliore l’expérience utilisateur.Good instructional UI is relevant and educational to the user, and enhances the user experience. Ce doit être :It should be:

  • Simple : Les utilisateurs ne veulent pas que leur expérience soit interrompue avec des informations compliquéesSimple: Users don't want their experience to be interrupted with complicated information
  • Facilité de mémorisation : les utilisateurs ne veulent pas voir s’afficher les mêmes instructions chaque fois qu’ils tentent d’exécuter une tâche spécifique. Les instructions doivent donc se révéler faciles à mémoriser.Memorable: Users don't want to see the same instructions every time they attempt a task, so instructions need to be something they'll remember.
  • Pertinence immédiate : si l’interface utilisateur d’instructions ne présente pas une procédure directement liée à la tâche que l’utilisateur souhaite exécuter, celui-ci n’aura pas de raison d’y prêter attention.Immediately relevant: If the instructional UI doesn't teach a user about something that they immediately want to do, they won't have a reason to pay attention to it.

N’abusez pas de l’interface utilisateur d’instructions et prenez soin de choisir les rubriques adéquates.Avoid overusing instructional UI, and be sure to choose the right topics. N’abordez pas les éléments suivants :Do not teach:

  • Fonctionnalités fondamentales : si les utilisateurs ont besoin de disposer d’instructions d’utilisation concernant votre application, envisagez de retravailler la conception de votre application pour la rendre plus intuitive.Fundamental features: If a user needs instructions to use your app, consider making the app design more intuitive.
  • Fonctionnalités évidentes : si un utilisateur peut comprendre le rôle d’une fonctionnalité sans aucune instruction, l’interface utilisateur d’instructions ne fera que le gêner.Obvious features: If a user can figure out a feature on their own without instruction, then the instructional UI will just get in the way.
  • Fonctionnalités complexes : l’interface utilisateur d’instructions doit rester concise, et les utilisateurs intéressés par des fonctionnalités complexes sont généralement disposés à rechercher les instructions correspondantes sans avoir besoin qu’on les leur présente spontanément.Complex features: Instructional UI needs to be concise, and users interested in complex features are usually willing to seek out instructions and don't need to be given them.

Évitez de déranger l’utilisateur avec votre interface utilisateur d’instructions.Avoid inconveniencing the user with your instructional UI. Ne pas :Do not:

  • Masquer des informations importantes : l’interface utilisateur d’instructions ne doit jamais occulter d’autres fonctionnalités de votre application.Obscure important information: Instructional UI should never get in the way of other features of your app.
  • Exiger la participation des utilisateurs : les utilisateurs doivent avoir la possibilité d’ignorer l’interface utilisateur d’instructions et de continuer à parcourir l’application.Force users to participate: Users should be able to ignore instructional UI and still progress through the app.
  • Afficher des informations répétées : votre interface utilisateur d’instructions ne doit pas harceler l’utilisateur, même si ce dernier l’a ignorée la première fois.Displaying repeat information: Don't harass the user with instructional UI, even if they ignore it the first time. L’ajout d’un paramètre permettant de réafficher l’interface utilisateur d’instructions constitue une solution plus judicieuse.Adding an setting to display instructional UI again is a better solution.

Exemples d’interfaces utilisateur d’instructionsExamples of instructional UI

Voici quelques exemples dans lesquels une interface utilisateur d’instructions peut se révéler utile pour vos utilisateurs :Here are a few instances in which instructional UI can help your users learn:

  • Aidez les utilisateurs à découvrir les interactions tactiles.Helping users discover touch interactions. L’écran suivant illustre une interface utilisateur d’instruction qui apprend à un joueur à utiliser les interactions tactiles dans le jeu, Cut the Rope.The following screen shot shows instructional UI teaching a player how to use touch gestures in the game, Cut the Rope.

    capture d’écran d’un jeu montrant un message d’interface utilisateur d’instruction, « Effectuer un balayage transversal pour couper la corde »

  • Faites une première impression favorable.Making a great first impression. Quand l’application Instants vidéos est lancée pour la première fois, l’interface utilisateur d’instructions invite l’utilisateur à créer des films sans gêner son utilisation.When Movie Moments launches for the first time, instructional UI prompts the user to begin creating movies without obstructing their experience.

    Écran de démarrage de l’application Instants vidéos

  • Guidez les utilisateurs pour effectuer une tâche compliquée.Guiding users to take the next step in a complicated task. Dans l’application Courrier Windows, un texte en bas de la Boîte de réception les invite à utiliser les Paramètres pour accéder à des messages plus anciens.In the Windows Mail app, a hint at the bottom of the Inbox directs users to Settings to access older messages.

    partie d’une capture d’écran de l’application Courrier Windows qui montre un message d’interface utilisateur d’instruction

    Quand l’utilisateur clique sur le message, le menu volant Paramètres de l’application s’affiche sur le côté droit de l’écran, ce qui permet à l’utilisateur d’effectuer la tâche.When the user clicks the message, the app's Settings flyout appears on the right side of the screen, allowing the user to complete the task. Les captures d’écran suivantes montrent l’application Courrier avant et après le clic de l’utilisateur sur le message d’interface utilisateur d’instruction.These screen shots show the Mail app before and after a user clicks the instructional UI message.

    AvantBefore AprèsAfter
    Capture d’écran de l’application Courrier Windows capture d’écran de l’application courrier windows avec un menu volant paramètres étendu