Informations
Le sujet que vous avez demandé est indiqué ci-dessous. Toutefois, ce sujet ne figure pas dans la bibliothèque.

Recommandations en matière de zoom sémantique

Applies to Windows and Windows Phone

Application Windows : affichages avec zoom avant et zoom arrière d’un contrôle de zoom sémantique

Application Windows : affichages avec zoom avant et zoom arrière d’un contrôle de zoom sémantique

Application Windows Phone : affichages avec zoom arrière et zoom avant d’un contrôle de zoom sémantique

Application Windows Phone : affichages avec zoom arrière et zoom avant d’un contrôle de zoom sémantique

Description

Un contrôle de zoom sémantique permet à l’utilisateur d’effectuer un zoom entre deux affichages sémantiques différents du même jeu de données. Un affichage contient une liste d’éléments regroupés selon une clé et l’autre affichage contient une liste de clés de groupe. Si vous appuyez sur une clé de groupe, vous effectuez un zoom avant sur les éléments du groupe.

Si le jeu de données est une liste d’exercices physiques regroupés selon la partie du corps concernée, l’affichage avec zoom avant correspond à une liste d’exercices regroupés en fonction des parties du corps (éléments) et l’affichage avec zoom arrière correspond à une liste des parties du corps (clés de groupe). Avec un jeu de données de grande taille, le fait de pouvoir effectuer un zoom arrière et consulter toutes les clés de groupe sur une seule page aide vraiment l’utilisateur à accéder rapidement à un élément distant.

Exemples

Capture d’écran du contrôle de zoom sémantique standard

Pratiques conseillées et déconseillées

  • Utilisez la taille de cible tactile correcte pour les éléments qui sont utilisables ou interactifs. Pour plus d’informations, voir Recommandations en matière de ciblage.
  • Fournissez une région de zoom sémantique appropriée et intuitive. Les utilisateurs commencent généralement le zoom sémantique dans la zone qui entoure les éléments affichés. Créez une région de zoom sémantique suffisamment grande pour inclure cette zone. Par exemple, le Windows Store prévoit une grande quantité d’espaces blancs autour de la liste d’applications dans laquelle l’utilisateur peut placer ses doigts pour effectuer un zoom avant ou arrière.
  • Utilisez une structure et une sémantique qui sont intrinsèques à la vue.
    • Utilisez le nom des groupes pour les éléments d’une collection groupée.
    • Utilisez un ordre de tri (par exemple, l’ordre chronologique pour les dates ou l’ordre alphabétique pour une lise de noms) pour une collection non groupée, mais triée.
    • Utilisez des pages pour représenter une collection de documents.
  • Vérifiez que la disposition des éléments et la direction du mouvement panoramique ne changent pas en fonction du niveau de zoom. Les dispositions et les interactions de mouvement panoramique doivent être cohérentes et prévisibles dans tous les niveaux de zoom.
  • Limitez le nombre de pages (ou d’écrans) à trois en mode d’affichage général. Le zoom sémantique permet à l’utilisateur d’accéder rapidement à du contenu. Un mouvement panoramique excessif annule cet avantage.
  • N’utilisez pas le zoom sémantique pour modifier l’étendue du contenu. Par exemple, un album photo ne doit jamais basculer vers une affichage de dossier dans l’Explorateur de fichiers.
  • Ne définissez pas une bordure sur les contrôles enfants du contrôle de zoom sémantique. Si vous définissez des bordures sur le contrôle de zoom sémantique et ses contrôles enfants, la bordure du contrôle de zoom sémantique et celle du contrôle enfant se trouvant dans l’affichage sont visibles. Lors du zoom avant ou arrière, les bordures du contrôle enfant sont mises à l’échelle en fonction du contenu et ne s’affichent pas correctement. Définissez une bordure uniquement sur le contrôle de zoom sémantique.

Indications d’utilisation supplémentaires

Le zoom optique change l’échelle et le grossissement du contenu. Le zoom sémantique change la sémantique (le sens) du contenu présenté entre les éléments regroupés par clé, ainsi que la liste de ces clés. Utilisez un contrôle de zoom sémantique quand vous souhaitez afficher une longue liste de données regroupées (par exemple, des exercices regroupés en fonction des parties du corps ou des noms regroupés en fonction des initiales).

Faire défiler les noms commençant par « A » jusqu’à un nom commençant par « Z » peut demander un grand nombre de mouvements de balayage. Avec un contrôle de zoom sémantique, il suffit d’appuyer deux fois : une fois pour effectuer un zoom arrière sur la liste des initiales, et une seconde fois pour effectuer un zoom avant sur les éléments de la lettre « Z ».

Le zoom sémantique gère le zoom entre ses deux affichages. Un affichage, qu’il s’agisse d’un affichage Liste ou Grille, contient les éléments ou les clés de groupe, selon la situation.

Le zoom sémantique utilise deux modes de classifications (ou niveaux de zoom) distincts pour organiser et présenter le contenu : un mode de niveau faible (ou affichage détaillé), généralement utilisé pour afficher les éléments dans une structure plate, toute en un, et un mode de niveau élevé (ou affichage général) qui affiche les éléments en groupes et permet à l’utilisateur de parcourir rapidement le contenu.

L’interaction de zoom sémantique s’effectue à l’aide des gestes de pincement et d’étirement (en écartant les doigts pour l’affichage en détails et en les rapprochant pour l’affichage plus général) ou en maintenant la touche Ctrl enfoncée tout en faisant défiler la roulette de la souris, ou encore en maintenant la touche Ctrl enfoncée (ou la touche Maj s’il n’y a pas de clavier numérique) et en appuyant sur la touche plus (+) ou moins (-).

Regardez cette courte vidéo pour avoir une vue d’ensemble du zoom sémantique.

Exemples d’applications pouvant faire appel au zoom sémantique :

  • Un carnet d’adresses qui organise les contacts par ordre alphabétique (ou autre) et présente les données en fonction des lettres de l’alphabet. L’utilisateur peut alors effectuer un zoom détaillé sur une lettre pour voir les contacts associés à cette lettre.
  • Un album photo qui organise les images par métadonnées (par exemple, la date de prise). L’utilisateur peut alors effectuer un zoom détaillé sur une date spécifique pour afficher la collection de photos associée à cette date.
  • Un catalogue de produits qui organise les articles par catégorie.

  • Autres exemples de dispositions de zoom sémantique :
    Affichage détailléAffichage plus général
    Exemple de disposition plus généraleExemple de disposition détaillée
    Exemple de disposition plus généraleExemple de disposition détaillée
    Exemple de disposition plus généraleExemple de disposition détaillée
    Exemple de disposition plus généraleExemple de disposition détaillée

     

Navigation avec le zoom sémantique

Même s’il est possible de naviguer dans du contenu simplement à l’aide du mouvement panoramique et simple (voir Recommandations en matière de mouvement panoramique), le zoom sémantique associé à ces fonctionnalités permet d’améliorer considérablement les performances de navigation et d’organisation.

Le mouvement panoramique et le défilement sont utiles pour les petits ensembles de contenus et les distances courtes. En revanche, la navigation devient rapidement complexe dans de grands ensembles de contenus. Le zoom sémantique réduit considérablement l’impression de navigation longue dans un contenu très riche et permet d’accéder rapidement et facilement aux emplacements au sein de ce contenu.

Remarque  

Ne confondez pas zoom sémantique et zoom optique (voir Recommandations en matière de zoom optique et de redimensionnement). Même si ces deux types de zoom interagissent et se comportent fondamentalement de la même façon (en affichant des données plus ou moins détaillées selon le facteur de zoom choisi), le zoom optique est destiné à ajuster le grossissement d’une zone de contenu ou d’un objet, tel qu’une photographie.

  • Défilement rapide

    Le fait d’appuyer sur du contenu en mode d’affichage général permet d’effectuer un zoom et de faire défiler la vue en panoramique vers le point appuyé, comme indiqué dans les trois schémas suivants.

    Capture d’écran montrant la vue sémantique d’origine.
    Dans la vue plus générale, l’intégralité du contenu peut représenter une cible tactile.
    Capture d’écran montrant un geste d’appui sur une section de la vue sémantique d’origine.
    Pression sur une section du contenu.
    Capture d’écran montrant la nouvelle vue sémantique au niveau de la cible d’appui.
    Vue zoomée et recentrée sur la zone appuyée.

     

  • Transitions

    Une animation d’échelle et de fondu enchaîné fluide est utilisée pour passer d’un niveau de zoom sémantique à un autre. Il s’agit du comportement tactile Windows par défaut et il ne peut pas être changé.

Remarques et recommandations

C’est vous-même qui définissez les deux niveaux sémantiques dans vos applications.

Lorsque vous créez le mode d’affichage général, posez-vous les questions suivantes :

  • Comment la structure et la présentation des informations doivent-elles changer en fonction du niveau de zoom ?
  • Est-il utile d’ajouter des suggestions ou des « indications » pour naviguer parmi les données ?
  • Quelle quantité de contenu constitue une vue sémantique utile tout en permettant de réduire les mouvements panoramiques et les défilements ?

Ces différents facteurs sont généralement en conflit les uns avec les autres. Vous souhaitez afficher du contenu riche avec beaucoup d’informations pour que vos utilisateurs sachent où ils vont accéder, mais vous devez équilibrer ces informations en fonction de la longueur totale du niveau de sémantique. Si les utilisateurs doivent effectuer un grand nombre de mouvements panoramiques en mode d’affichage général, vous perdez l’avantage principal offert par la navigation rapide du—zoom sémantique.

Ateliers pratiques pour Windows 8

Si vous voulez tester l’utilisation du zoom sémantique et d’autres fonctionnalités importantes de Windows 8, téléchargez les ateliers pratiques pour Windows 8. Ces laboratoires constituent une introduction modulaire pas à pas à la création d’un exemple d’application du Windows Store dans le langage de programmation de votre choix (JavaScript et HTML ou C# et XAML).

Apparence et interaction

L’apparence d’un contrôle de zoom sémantique dépend de l’affichage montré (chaque affichage est un contrôle d’affichage Liste ou un contrôle d’affichage Grille). Après un zoom avant, le zoom sémantique se présente sous la forme d’une liste d’éléments regroupés sous des en-têtes de clé. Après un zoom arrière, il se présente sous la forme d’une liste de clés.

Si vous appuyez sur un élément en effectuant un zoom avant, cela vous permet de sélectionner cet élément ou d’accéder à sa page des détails. Après un zoom arrière, si vous appuyez sur une clé de groupe, vous effectuez un zoom avant qui affiche le groupe correspondant.

  • Applies to Windows

Windows : l’interaction de zoom s’effectue à l’aide des gestes de pincement et d’étirement (en rapprochant les doigts pour l’affichage plus général et en les écartant pour l’affichage en détails) ou en maintenant la touche Ctrl enfoncée tout en faisant défiler la roulette de la souris, ou encore en maintenant la touche Ctrl enfoncée (ou la touche Maj s’il n’y a pas de clavier numérique) et en appuyant sur la touche plus (+) ou moins (-).

  • Applies to Windows Phone

Windows Phone : après un zoom avant, si vous appuyez sur un en-tête de clé de groupe, vous effectuez un zoom arrière.

Rubriques associées

Pour les concepteurs
Recommandations en matière d’interactions utilisateur courantes
Interactions tactiles
Pour les développeurs (HTML)
Ajout de contrôles SemanticZoom
Démarrage rapide : ajout d’un zoom sémantique
Démarrage rapide : pointeurs
Démarrage rapide : manipulations et mouvements DOM
Démarrage rapide : actions statiques
Démarrage rapide : actions de manipulation
SemanticZoom
Windows.UI.Input
Pour les développeurs (XAML)
Démarrage rapide : entrée tactile
Démarrage rapide : gestion des entrées de pointeur
Windows.UI.Xaml.Input
Pour les développeurs (application Windows Runtime en C++ basée sur DirectX)
Réponse à l’entrée tactile (DirectX et C++)
Exemples (WinJS)
Exemple de SemanticZoom HTML pour des contrôles personnalisés
Exemple de groupement de ListView et SemanticZoom HTML
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