Sélection de texte et d’images

Cet article décrit la sélection et la manipulation de texte, d’images et de contrôles, et fournit des recommandations en matière d’expérience utilisateur à prendre en compte lors de l’utilisation de ces mécanismes dans vos applications.

API importantes : Windows.UI.Xaml.Input, Windows.UI.Input

Pratiques conseillées et déconseillées

• Utilisez des glyphes de police lors de l’implémentation de votre propre interface utilisateur de barre de redimensionnement. Le symbole de sélection est une combinaison de deux polices Segoe UI disponibles à l’échelle du système. L’utilisation de ressources de police simplifie les problèmes de rendu pour différentes valeurs de ppp et fonctionne bien avec les divers plateaux d’échelle d’interface utilisateur. Lorsque vous implémentez vos propres barres de redimensionnement, elles doivent partager les caractéristiques d’interface utilisateur suivantes :

  • forme circulaire,
  • visible par rapport à tout arrière-plan,
  • taille cohérente.

• Fournissez une marge autour du contenu sélectionnable pour prendre en compte l’interface utilisateur de la barre de redimensionnement. Si votre application permet la sélection de texte dans une région qui n’effectue pas de panoramique/défilement, prévoyez une marge large d’une demi barre de redimensionnement sur les côtés gauche et droit de la zone de texte et une marge haute d’une barre de redimensionnement en haut et en bas de la zone de texte (comme illustré dans les images suivantes). Cela garantit que l’interface utilisateur complète de barre de redimensionnement soit exposée à l’utilisateur et réduit les interactions involontaires avec d’autres éléments d’interface utilisateur latéraux.

  

• Masquez l’interface utilisateur de redimensionnement au cours d’une interaction. Élimine l’occlusion par les symboles de sélection/redimensionnement au cours de l’interaction. Cela est utile lorsqu’une barre de redimensionnement n’est pas complètement masquée par le doigt ou dans le cas de plusieurs barres de redimensionnement de sélection de texte. Cela permet d’éliminer les artefacts visuels durant l’affichage de fenêtres enfants.

• N’autorisez pas la sélection d’éléments d’interface utilisateur tels que des contrôles, des étiquettes, des images, des contenus propriétaires, etc. En règle générale, les applications Windows permettent cette sélection uniquement au sein de contrôles spécifiques. Les contrôles comme les boutons, les étiquettes et les logos ne peuvent pas être sélectionnés. Déterminez si la sélection représente un problème pour votre application et, le cas échéant, identifiez les zones de l’interface utilisateur dans lesquelles la sélection doit être interdite.

Indications d’utilisation supplémentaires

La sélection et la manipulation de texte représentent des difficultés particulières pour l’utilisateur en termes d’interactions tactiles. Les entrées effectuées par le biais de la souris, du stylo/stylet et du clavier sont des opérations extrêmement granulaires : un clic de souris ou un contact du stylo/stylet est généralement associé à un pixel unique, et une touche est appuyée ou non. Une entrée tactile n’est pas granulaire ; il est difficile d’associer la totalité de la surface de la pointe du doigt à un emplacement x-y spécifique sur l’écran pour placer avec précision un curseur de texte.

Remarques et recommandations

Utilisez les contrôles intégrés exposés par le biais des infrastructures de langage dans Windows pour générer des applications offrant une expérience d’interaction utilisateur de plateforme intégrale, y compris les comportements de sélection et de manipulation. Vous trouverez la fonctionnalité d’interaction des contrôles intégrés suffisante pour la majorité des applications Windows.

Lorsque vous utilisez des contrôles de texte Windows standard, les comportements de sélection et les visuels décrits dans cette rubrique ne peuvent pas être personnalisés.

Sélection de texte

Si votre application requiert une interface utilisateur personnalisée prenant en charge la sélection de texte, nous vous recommandons de suivre les comportements de sélection Windows décrits ici.

Contenu modifiable et contenu non modifiable

Avec l’entrée tactile, les interactions de sélection sont principalement effectuées par des gestes (par exemple, un appui pour placer un curseur d’insertion ou sélectionner un mot, et un glissement pour modifier une sélection). À l’instar des autres interactions tactiles de Windows, les interactions chronométrées sont limitées au geste d’appui prolongé pour afficher une interface utilisateur informative. Pour plus d’informations, voir Recommandations en matière de retour visuel.

Windows reconnaît deux états possibles pour les interactions de sélection, modifiable et non modifiable, et ajuste l’interface utilisateur, le retour et la fonctionnalité de sélection de manière appropriée.

Contenu modifiable

Un appui dans la moitié gauche d’un mot place le curseur immédiatement à gauche du mot, tandis qu’un appui dans la moitié droite le placement immédiatement à droite du mot.

L’image suivante montre comment placer un curseur d’insertion initial avec une barre de redimensionnement en appuyant à côté du début ou de la fin d’un mot.

L’image suivante montre comment ajuster une sélection en faisant glisser la barre de redimensionnement.

Les images suivantes montrent comment appeler le menu contextuel en appuyant dans la sélection ou sur une barre de redimensionnement (l’appui prolongé peut aussi être utilisé).

Remarque Ces interactions varient légèrement en cas de mot incorrectement orthographié. L’appui sur un mot qui est marqué comme incorrectement orthographié entraîne la mise en surbrillance de la totalité du mot et l’appel du menu contextuel d’orthographe suggérée.

 

Contenu non modifiable

L’image suivante montre comment sélectionner un mot en appuyant au sein de celui-ci (aucun espace n’est inclus dans la sélection initiale).

Suivez les mêmes procédures que pour le texte modifiable pour ajuster la sélection et afficher le menu contextuel.

Manipulation d’objet

Dans la mesure du possible, utilisez les mêmes ressources de préhension (ou des ressources similaires) comme sélection de texte lors de l’implémentation de la manipulation d’objets personnalisés dans une application Windows. Cela permet d’offrir une expérience d’interaction cohérente sur toute la plateforme.

Par exemple, il est possible également d’utiliser des barres de redimensionnement dans des applications de traitement d’image prenant en charge le redimensionnement et le rognage ou dans des applications de lecteur multimédia fournissant des barres de progression réglables, comme illustré dans les images suivantes.

Lecteur multimédia avec barre de progression réglable

Éditeur d’images avec poignées de rognage

Articles connexes

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 de périphériques

• Entrée : exemple de test de positionnement tactile

• Exemple de défilement, de mouvement panoramique et de zoom XAML

• Entrée : exemple d’entrée manuscrite simplifiée

• Entrée : Exemple de manipulations et de mouvements

• Exemple d’entrée tactile DirectX