Recommandations en matière de zoom sémantique

Article
10/02/2013

Cette rubrique décrit la nouvelle interface utilisateur Windows pour le zoom sémantique et fournit des recommandations en matière d’expérience utilisateur à prendre en compte lors de l’utilisation de ce nouveau mécanisme d’interaction dans vos applications 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

Vue d’ensemble du zoom sémantique

Le zoom sémantique est une technique optimisée pour l’interaction tactile utilisée par les applications du Windows Store dans Windows 8 pour présenter et parcourir des ensembles de données ou de contenus apparentés volumineux dans une vue unique (par exemple, un album photo, une liste d’applications ou un carnet d’adresses).

Remarque

Cette fonctionnalité est identique au défilement panoramique et au défilement simple (qui peuvent être utilisés conjointement au zoom sémantique) au sein d’une vue unique.

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

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

Les défilements panoramique et simple sont utiles pour les petits ensembles de contenus et les distances courtes. En revanche, la navigation devient rapidement complexe dans un ensemble de contenus importants. Le zoom sémantique réduit considérablement la perception de parcours sur des longes distances lors de la navigation dans un contenu très important 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 défilements panoramique et simple ?

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 défilements panoramique en mode d’affichage général, vous perdez l’avantage principal offert par la navigation rapide du—zoom sémantique.

Pratiques conseillées et déconseillées

Les conseils suivants sur les bonnes et mauvaises pratiques permettent d’optimiser l’expérience de zoom sémantique pour vos utilisateurs.

Pratiques 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 défilement panoramique ne change pas en fonction du niveau de zoom.
Les dispositions et les interactions de défilement 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 défilement panoramique excessif annule cet avantage.

Pratiques déconseillées

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 SemanticZoom.
Si vous définissez des bordures sur le contrôle SemanticZoom et sur ses contrôles enfants, la bordure du contrôle SemanticZoom et celle du contrôle enfant figurant dans la vue seront 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 SemanticZoom.

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