Recommandations en matière de panoramique

Le mouvement panoramique ou le défilement permet aux utilisateurs de naviguer dans un affichage unique pour afficher le contenu de la vue qui ne s’adapte pas à la fenêtre d’affichage. Les exemples de vues incluent la structure de dossiers d’un ordinateur, une bibliothèque de documents ou un album photo.

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

Pratiques conseillées et déconseillées

Indicateurs de panoramique et barres de défilement

• Vérifiez que le panoramique/défilement est possible avant de charger du contenu dans votre application.

• Affichez les indicateurs de panoramique et les barres de défilement pour fournir des indicateurs d’emplacement et de taille. Masquez-les si vous fournissez une fonctionnalité de navigation personnalisée.

  Note Contrairement aux barres de défilement standard, les indicateurs de panoramique sont purement informatifs. Ils ne sont pas exposés aux appareils d’entrée et ne peuvent pas être manipulés de quelque manière que ce soit.

   

Balayage sur axe unique (défilement unidimensionnel)

• Utilisez le mouvement panoramique sur un axe pour les régions de contenu qui s’étendent au-delà des limites de la fenêtre d’affichage (vertical ou horizontal).

  • Mouvement panoramique vertical pour une liste unidimensionnelle d’éléments.
  • Panoramique horizontal pour une grille d’éléments.

• N'utilisez pas de points d'accroche obligatoires pour un panoramique sur un axe unique si un utilisateur doit pouvoir faire un panoramique et s'arrêter entre les points d'accroche. Les points d’ancrage obligatoires garantissent que l’utilisateur s’arrête sur un point d’ancrage. Utilisez plutôt des points de capture de proximité.

Mouvement panoramique libre (débordement bidimensionnel)

• Utilisez le mouvement panoramique sur deux axes pour les régions de contenu qui s’étendent au-delà des limites de la fenêtre d’affichage (à la fois vertical et horizontal).

  • Remplacez le comportement des rails par défaut et utilisez le panoramique de forme libre pour le contenu non structuré où l’utilisateur est susceptible de se déplacer dans plusieurs directions.

• Le mouvement panoramique de forme libre est généralement adapté à la navigation dans des images ou des cartes.

Affichage paginé

• Utilisez des points d’ancrage obligatoires lorsque le contenu est composé d’éléments discrets ou que vous souhaitez afficher un élément entier. Cela peut inclure des pages d’un livre ou d’un magazine, une colonne d’éléments ou des images individuelles.

  • Un point d’ancrage doit être placé à chaque limite logique.
  • Chaque élément doit être dimensionné ou mis à l’échelle pour s’adapter à la vue.

Points logiques et clés

• Utilisez des points d’ancrage de proximité s’il y a des points clés ou des emplacements logiques où un utilisateur est susceptible de s’arrêter dans le contenu. Par exemple, un en-tête de section.

• Si des contraintes ou limites de taille maximale et minimale sont définies, utilisez des commentaires visuels pour illustrer quand l’utilisateur atteint ou dépasse ces limites.

Chaînage de contenu incorporé ou imbriqué

• Utilisez un panoramique à axe unique (généralement horizontal) et des mises en page de colonnes pour le texte et le contenu basé sur une grille. Dans ces cas, le contenu encapsule et circule naturellement d’une colonne à l’autre et maintient l’expérience utilisateur cohérente et détectable dans les applications Windows.

• N’utilisez pas de régions panoramiques incorporées pour afficher du texte ou des listes d’éléments. Étant donné que les indicateurs de panoramique et les barres de défilement s’affichent uniquement lorsque le contact d’entrée est détecté dans la région, il ne s’agit pas d’une expérience utilisateur intuitive ou détectable.

• Ne chaînez pas ou placez une région panoramique dans une autre région panoramique si elles sont toutes deux panoramiques dans la même direction, comme illustré ici. Cela peut entraîner la panne involontaire de la zone parente lorsqu’une limite de la zone enfant est atteinte. Envisagez de rendre l’axe panoramique perpendiculaire.

  

Indications d’utilisation supplémentaires

Le panoramique par balayage ou glissement avec un ou plusieurs doigts est similaire au défilement avec la souris. L’interaction panoramique est similaire à la rotation de la roulette de la souris ou au glissement de la boîte de défilement, plus que de cliquer sur la barre de défilement. Sauf si une distinction est faite dans une API ou requise par une interface utilisateur Windows spécifique à l’appareil, nous faisons simplement référence aux deux interactions comme panoramiques.

Windows 10 Fall Creators Update - Changement de comportement Par défaut, au lieu de la sélection de texte, un stylet actif fait maintenant défiler ou panoramiquer dans les applications Windows (comme tactile, pavé tactile et stylet passif). Si votre application dépend du comportement précédent, vous pouvez remplacer le défilement du stylet et revenir au comportement précédent. Pour plus d’informations, consultez la rubrique de référence de l’API pour la classe ScrollViewer.

Selon l’appareil d’entrée, l’utilisateur déplace dans une zone déplaçable à l’aide de l’une des opérations suivantes :

• Une souris, un pavé tactile ou un stylet actif pour cliquer sur les flèches de défilement, faire glisser la zone de défilement ou cliquer dans la barre de défilement.
• Bouton de roulette de la souris pour émuler le glissement de la zone de défilement.
• Les boutons étendus (XBUTTON1 et XBUTTON2), si la souris les prend en charge.
• Touches de direction clavier pour émuler la zone de défilement ou les touches de page pour émuler le clic dans la barre de défilement.
• Touche tactile, pavé tactile ou stylet passif pour glisser ou balayer les doigts dans la direction souhaitée.

Le glissement implique de déplacer les doigts lentement dans le sens du mouvement. Cela entraîne une relation un-à-une, où le contenu défile à la même vitesse et distance que vos doigts. Le balayage, qui implique rapidement glisser et lever les doigts, entraîne l’application de la physique suivante à l’animation panoramique :

• Décélération (inertie) : le fait de lever les doigts entraîne la décélération du mouvement panoramique. Cela revient à glisser pour s'arrêter sur une surface glissante.
• Absorption : l'élasticité du défilement lors de la décélération provoque un léger recul si un point d'ancrage ou une limite de zone de contenu est atteinte.

Types de panoramique

Windows prend en charge trois types de défilement :

• Axe unique : la fonction de panorama est prise en charge dans une seule direction (horizontale ou verticale).
• Rails : le déplacement est pris en charge dans toutes les directions. Une fois que l'utilisateur dépasse un seuil de distance dans une direction spécifique, le défilement est alors limité à cet axe.
• Mode libre : le déplacement panoramique est pris en charge dans toutes les directions.

Interface utilisateur de défilement

L'expérience d'interaction de panoramique est unique pour chaque périphérique d'entrée tout en offrant des fonctionnalités similaires.

Il existe deux modes d’affichage panoramique en fonction de l’appareil d’entrée détecté :

• Indicateurs de mouvement panoramique pour l’interaction tactile.
• Barres de défilement pour d’autres périphériques d’entrée, notamment la souris, le pavé tactile, le clavier et le stylet.

Note Les indicateurs de panoramique ne sont visibles que lorsque le contact tactile se trouve dans la région panoramique. De même, la barre de défilement n'est visible que lorsque le curseur de la souris, le curseur du stylet ou l’attention du clavier se trouve dans la région de défilement.

Indicateurs de panoramique Les indicateurs de panoramique sont similaires à ceux d'une barre de défilement. Ils indiquent la proportion de contenu affiché par rapport à la zone déplaçable totale et la position relative du contenu affiché dans la zone déplaçable.

Le diagramme suivant montre deux zones défilables de longueurs différentes et leurs indicateurs de défilement.

Les comportements de déplacement panoramiquepoints de fixation Le déplacement panoramique avec le geste de balayage introduit le comportement d’inertie dans l’interaction lorsque le contact tactile est levé. Avec inertie, le contenu continue de faire défiler jusqu’à ce qu’un seuil de distance soit atteint sans entrée directe de l’utilisateur. Utilisez des points d’ancrage pour modifier ce comportement d’inertie.

Les points d’ancrage spécifient des arrêts logiques dans le contenu de votre application. Cognitivement, les points d’ancrage agissent comme un mécanisme de pagination pour l’utilisateur et réduisent la fatigue d’un glissement excessif ou d’un balayage dans de grandes régions panoramiques. Avec eux, vous pouvez gérer l'entrée utilisateur imprécise et vous assurer qu'un sous-ensemble spécifique de contenu ou d'informations clés s'affiche dans la fenêtre d'affichage.

Il existe deux types de points d’ancrage :

• Proximité : une fois le contact levé, un point d’ancrage est sélectionné si l’inertie s’arrête dans un seuil de distance du point d’ancrage. Le panoramique peut toujours s’arrêter entre les points de capture de proximité.
• Obligatoire : le point d’ancrage sélectionné est celui qui précède immédiatement ou réussit le dernier point d’ancrage franchi avant que le contact ne soit levé (selon la direction et la vitesse du mouvement). Le déplacement doit s’arrêter sur un point d'accroche obligatoire.

Les points de capture pour le défilement sont utiles pour les applications telles que les navigateurs Internet et les albums photo qui émulent du contenu paginé ou possèdent des groupements logiques d'éléments pouvant être regroupés dynamiquement pour s'adapter à une fenêtre d'affichage.

Les diagrammes suivants illustrent comment, en faisant un mouvement panoramique vers un certain point puis en relâchant, le contenu se déplace automatiquement vers un emplacement logique.

Rails Le contenu peut être plus large et plus élevé que les dimensions et la résolution d’un appareil d’affichage. Pour cette raison, le panoramique bidimensionnel (horizontal et vertical) est souvent nécessaire. Les rails améliorent l'expérience utilisateur dans ces cas en mettant en évidence le défilement selon l'axe du mouvement (vertical ou horizontal).

Le diagramme suivant illustre le concept de rails.

Chaînage de contenu incorporé ou imbriqué

Une fois qu’un utilisateur a atteint une limite de zoom ou de défilement sur un élément qui a été imbriqué dans un autre élément zoomable ou défilement, vous pouvez spécifier si cet élément parent doit continuer l’opération de zoom ou de défilement commencée dans son élément enfant. Il s’agit du chaînage de zoom ou de défilement.

Le chaînage est utilisé pour le déplacement dans une zone de contenu à axe unique qui contient une ou plusieurs régions de déplacement à axe unique ou libre, lorsque le contact tactile se trouve dans une de ces régions secondaires. Lorsque la limite de la zone de défilement de la région enfant est atteinte dans une direction spécifique, le défilement est ensuite activé sur la région parente dans la même direction.

Lorsqu’une région panoramique est imbriquée à l’intérieur d’une autre région panoramique, il est important de spécifier suffisamment d’espace entre le conteneur et le contenu incorporé. Dans les diagrammes suivants, une zone déplaçable est placée à l'intérieur d'une autre zone déplaçable, chacune se déplaçant dans des directions perpendiculaires. Il y a beaucoup d’espace pour que les utilisateurs puissent faire un panoramique dans chaque région.

Sans espace suffisant, comme illustré dans le diagramme suivant, la région défilable incorporée peut interférer avec le défilement dans le conteneur, et entraîner un défilement involontaire dans une ou plusieurs régions défilables.

Ces conseils sont également utiles pour les applications telles que les albums photo ou les applications de mappage qui prennent en charge le panoramique sans contrainte au sein d’une image ou d’une carte individuelle, tout en prenant également en charge le panoramique sur un axe unique dans l’album (dans les images précédentes ou suivantes) ou la zone de détails. Dans les applications qui fournissent une zone de détails ou d’options correspondant à une image ou une carte à défilement libre, nous vous recommandons que la mise en page commence par la zone de détails et d’options, car la zone de défilement libre de l’image ou de la carte pourrait faire interférence avec le défilement vers la zone de détails.

Articles connexes

• Interactions utilisateur personnalisées
• Optimiser ListView et GridView
• Accessibilité du clavier

Échantillons

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

Exemples d’archivage

• 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 détection tactile
• Exemple de zoom, de mouvement panoramique et de défilement XAML
• Entrée : exemplaire d'encre simplifiée
• Entrée : Exemple de manipulations et de mouvements
• Exemple d’entrée tactile DirectX