Recommandations en matière de sélection de texte et d’images (applications Windows Runtime)

Applies to Windows and Windows Phone

Cette rubrique décrit la nouvelle interface utilisateur Windows pour 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 nouveaux mécanismes de sélection et de manipulation dans votre application du Windows Store.

Voir cette fonctionnalité en action dans le cadre de notre série Fonctionnalités d’application de A à Z:  Interaction utilisateur : entrée tactile... et plus encore

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. La barre de redimensionnement 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 permet de s’assurer que l’interface utilisateur complète de la barre de redimensionnement est exposée à l’utilisateur et réduit les interactions involontaires avec d’autres éléments d’interface utilisateur latéraux.

    Marges de barre de redimensionnement de sélection de texte

  • Masquez l’interface utilisateur des barres de redimensionnement au cours d’une interaction. Élimine l’occlusion par les barre sde 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. Les applications du Windows Store en JavaScript requièrent que vous désactiviez la sélection. 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. Pour plus d’informations sur la désactivation de la sélection, voir Comment désactiver une sélection de texte et d’images.

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 8 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. La fonctionnalité d’interaction des contrôles intégrés se révèle suffisante pour la plupart des applications du Windows Store.

Lorsque vous utilisez des contrôles de texte Windows 8 standard, vous ne pouvez pas personnaliser les comportements et les éléments visuels de sélection décrits dans cette rubrique.

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 8 décrits ici.

Contenu modifiable et contenu non modifiable

Afin de résoudre le manque de précision du comportement de ciblage des interactions tactiles, les éléments visuels de l’expérience utilisateur en matière de sélection et de manipulation (tels que les « barres de redimensionnement » qui indiquent qu’une sélection est modifiable et identifient la cible de l’interaction) ont été complètement remaniés pour Windows 8.

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 8, 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.

Aucun changement du comportement de sélection n’intervient lors de l’utilisation d’une souris, d’un stylo/stylet ou d’un clavier dans Windows 8.

Windows 8 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.

Appuyez (ou effectuez un appui prolongé) sur le côté gauche du mot pour placer un curseur et une barre de redimensionnement au début du mot. Appuyez (ou effectuez un appui prolongé) sur le côté droit du mot pour placer un curseur et une barre de redimensionnement à la fin du mot.

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

Faites glisser la barre de redimensionnement dans n’importe quelle direction pour ajuster la sélection (la première barre de redimensionnement reste ancrée et une deuxième barre de redimensionnement s’affiche). Faites glisser l’une des deux barres pour effectuer d’autres ajustements.

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é).

Appuyez (ou effectuez un appui prolongé) dans la sélection ou sur une barre de redimensionnement pour appeler le menu contextuel.

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).

Appuyez dans un mot pour le sélectionner (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

Chaque fois que cela est possible, utilisez les mêmes ressources de symbole de sélection/redimensionnement (ou des ressources similaires) que la sélection de texte lors de l’implémentation d’une manipulation d’objet personnalisée dans une application du Windows Store. 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

Lecteur multimédia avec barre de progression réglable

Image avec poignées de rognage

Éditeur d’images avec poignées de rognage

Rubriques connexes

Pour les concepteurs
Recommandations en matière d’interactions utilisateur courantes
Conception de l’interaction tactile
Pour les développeurs (applications Windows Runtime en JavaScript et HTML)
Comment désactiver une sélection de texte et d’images
Démarrage rapide : pointeurs
Démarrage rapide : manipulations et mouvements DOM
Démarrage rapide : actions statiques
Démarrage rapide : actions de manipulation
Pour les développeurs (applications Windows Runtime en C#/VB/C++ et XAML)
Démarrage rapide : entrée tactile
Démarrage rapide : gestion des entrées de pointeur
Windows.UI.Input
Pour les développeurs (application Windows Runtime en C++ basée sur DirectX)
Réponse à l’entrée tactile (DirectX et C++)
Windows.UI.Xaml.Input
Exemples (DOM)
Exemple de zoom, de panoramique et de défilement HTML
Entrée : exemple de mouvements instanciables
Exemples (API d’applications du Windows Store)
Entrée : exemple de manipulations et de mouvements (JavaScript)
Entrée : exemple de mouvements Windows 8
Entrée : exemple d’événements d’entrée utilisateur XAML
Exemple de zoom, de panoramique et de défilement XAML
Exemples (DirectX)
Exemple d’entrée tactile DirectX
Entrée : exemple de manipulations et de mouvements (C++)

 

 

Afficher:
© 2014 Microsoft