Recommandations en matière de retours visuels

Utilisez le retour visuel pour montrer aux utilisateurs que leurs interactions sont détectées, interprétées et traitées. Le retour visuel peut aider les utilisateurs en encourageant l’interaction. Il indique le succès d’une interaction, ce qui améliore le sentiment de contrôle de l’utilisateur. Il indique également l’état du système et réduit les erreurs.

API importantes : Windows.Devices.Input, Windows.UI.Input, Windows.UI.Core

Recommandations

• Essayez de limiter les modifications d’un modèle de contrôle à celles qui sont directement liées à votre intention de conception, car des changements importants peuvent avoir un impact sur les performances et l’accessibilité du contrôle et de votre application.
  • Pour en savoir plus sur la personnalisation des propriétés d’un contrôle, y compris les propriétés d’état visuel, reportez-vous à Styles XAML.
  • Pour en savoir plus sur les modifications apportées à un modèle de contrôle, reportez-vous à la Classe UserControl
  • Envisagez de créer votre propre contrôle basé sur un modèle personnalisé si vous devez apporter des modifications significatives à un modèle de contrôle. Pour obtenir un exemple de contrôle basé sur un modèle personnalisé, reportez-vous à l’exemple de contrôle d’édition personnalisé.
• N’utilisez pas de visualisations tactiles dans des situations où elles pourraient interférer avec l’utilisation de l’application. Pour en savoir plus, reportez-vous à ShowGestureFeedback.
• N’affichez pas de retour, sauf en cas d’absolue nécessité. Gardez l’interface utilisateur propre et épurée en n’affichant pas de retour visuel à moins que vous n’apportiez une valeur ajoutée qui n’est pas disponible ailleurs.
• Essayez de ne pas personnaliser radicalement les comportements de retour visuel des gestes Windows intégrés, car l’expérience utilisateur risque d’être incohérente et confuse.

Indications d’utilisation supplémentaires

La visualisation des contacts revêt une importance particulière pour les interactions tactiles qui requièrent exactitude et précision. Par exemple, votre application doit indiquer clairement l’emplacement d’un tapotement pour permettre à l’utilisateur de savoir s’il a manqué sa cible, de combien il l’a manquée et quels ajustements il doit faire.

L’utilisation des contrôles de plateforme XAML disponibles par défaut garantit que votre application fonctionne correctement sur tous les appareils et dans toutes les situations de saisie. Si votre application comporte des interactions personnalisées qui nécessitent un retour d’information personnalisé, vous devez vous assurer que le retour est approprié, qu’il s’étend à tous les périphériques d’entrée et qu’il ne détourne pas l’utilisateur de sa tâche. Un tel problème peut se poser en particulier dans les applications de jeu ou de dessin, où le retour visuel peut entrer en conflit avec l’interface utilisateur essentielle ou la masquer.

Important

Nous déconseillons de modifier le comportement d’interaction des mouvements prédéfinis.

Retour sur les appareils

Le retour visuel dépend généralement du périphérique d’entrée (tactile, pavé tactile, souris, stylo/stylet, clavier, etc.). Par exemple, le retour prédéfini pour une souris implique généralement le déplacement et la modification du curseur, tandis que le toucher et le stylo nécessitent des visualisations de contact, et que la saisie et la navigation au clavier utilisent des rectangles de focus et la surbrillance.

ShowGestureFeedback vous permet de définir le comportement du retour sur les mouvements de la plateforme.

Si vous personnalisez l’interface utilisateur de retour, assurez-vous de fournir un retour adapté à tous les modes de saisie.

Voici quelques exemples de visualisations de contact prédéfinies dans Windows.

Visualisation tactile	Visualisation de la souris/du pavé tactile	Visualisation du stylet	Visualisation du clavier

Visuels de focus à haute visibilité

Toutes les applications Windows sont dotées d’un visuel de focus mieux défini autour des commandes interactives de l’application. Ces nouveaux visuels de focus sont entièrement personnalisables et peuvent être désactivés si nécessaire.

Pour l’expérience des 3 mètres propre à l’utilisation de la Xbox et de la télévision, Windows prend en charge Révéler focus, un effet d’éclairage qui anime la bordure des éléments focalisables, tels qu’un bouton, lorsqu’ils sont focalisés par le biais d’une manette de jeu ou d’une entrée clavier.

Personnalisation et couleur de la marque

Propriétés des bordures

Les visuels de focus à haute visibilité se composent de deux parties : la bordure primaire et la bordure secondaire. La bordure principale a une épaisseur de 2 px et apparaît autour de la bordure secondaire extérieure. La bordure secondaire a une épaisseur de 1 px et apparaît autour de la bordure principale intérieure.

Pour modifier l’épaisseur du type de bordure (primaire ou secondaire), utilisez respectivement FocusVisualPrimaryThickness ou FocusVisualSecondaryThickness :

<Slider Width="200" FocusVisualPrimaryThickness="5" FocusVisualSecondaryThickness="2"/>

La marge est une propriété de type Épaisseur, et par conséquent, la marge peut être personnalisée pour apparaître uniquement sur certains côtés du contrôle. Voir ci-dessous :

La marge est l’espace entre les limites de l’élément visuel du contrôle et le début de la bordure secondaire des visuels du focus. La marge par défaut est à 1 px des limites du contrôle. Vous pouvez modifier cette marge pour chaque contrôle, en modifiant la propriété FocusVisualMargin :

<Slider Width="200" FocusVisualMargin="-5"/>

Une marge négative éloigne la bordure du centre du contrôle, tandis qu’une marge positive rapproche la bordure du centre du contrôle.

Pour désactiver entièrement les visuels de focus sur le contrôle, désactivez simplement UseSystemFocusVisuals :

<Slider Width="200" UseSystemFocusVisuals="False"/>

L’épaisseur, la marge, ou le fait que le développeur de l’application souhaite ou non avoir des visuels de focus, sont déterminés pour chaque contrôle.

Propriétés de la couleur

Il n’existe que deux propriétés de couleur pour les visuels de focus : la couleur de la bordure primaire et la couleur de la bordure secondaire. Ces couleurs de bordure visuelle de focus peuvent être modifiées par contrôle au niveau d’une page et globalement au niveau de l’application :

Pour marquer les visuels de focus à l’échelle de l’application, remplacez les pinceaux du système :

<SolidColorBrush x:Key="SystemControlFocusVisualPrimaryBrush" Color="DarkRed"/>
<SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="Pink"/>

Pour modifier les couleurs au niveau de chaque contrôle, il suffit de modifier les propriétés du visuel de mise au point sur le contrôle souhaité :

<Slider Width="200" FocusVisualPrimaryBrush="DarkRed" FocusVisualSecondaryBrush="Pink"/>

Articles connexes

Pour les concepteurs

• Instructions relatives au mouvement panoramique

Pour les développeurs

• Interactions utilisateur personnalisées

Exemples

• Exemple d’entrée de base
• Exemple d’entrée à faible latence
• Exemple de mode d’interaction utilisateur
• Exemples de visuels de focus

Exemples d’archive

• Entrée : exemple d’événements d’entrée utilisateur XAML
• Entrée : exemple de fonctionnalités d’appareil
• Entrée : exemple de test de positionnement tactile
• Exemple de zoom, de mouvement panoramique et de défilement XAML
• Entrée : exemple d’entrée manuscrite simplifié
• Entrée : exemple de mouvements sous Windows 8
• Entrée : exemple de manipulations et de mouvements
• Exemple d’entrée tactile DirectX