Recommandations en matière de zoom optique et de redimensionnement

Article
10/02/2013

Cette rubrique décrit la nouvelle interface utilisateur Windows permettant de zoomer sur des éléments et de les redimensionner. Elle fournit également des recommandations en matière d’expérience utilisateur en cas d’utilisation de ces nouveaux mécanismes 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 optique et du redimensionnement

Le zoom optique permet à l’utilisateur d’agrandir la vue du contenu au sein d’une zone de contenu (l’interaction s’effectue sur la zone de contenu elle-même), tandis que le redimensionnement lui permet de modifier la taille relative d’un ou de plusieurs objets sans modifier la vue dans la zone de contenu (dans ce cas, l’interaction s’effectue sur les objets figurant dans la zone de contenu).

Remarque

Ne confondez pas l’interaction de zoom optique avec l’interaction de zoom sémantique. Même si elles partagent les mêmes gestes, l’interaction de zoom sémantique désigne la présentation et la navigation au sein d’une seule vue de données ou de contenus structurés (par exemple, la structure de dossiers d’un ordinateur, une bibliothèque de documents ou un album photo).

Les interactions de zoom optique et de redimensionnement s’effectuent à l’aide des gestes de pincement et d’étirement (resserrez les doigts pour faire un zoom avant et écartez-les pour faire un zoom arrière) 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 (-).

Les schémas suivants montrent les différences entre le redimensionnement et le zoom optique.

Zoom optique : l’utilisateur sélectionne une zone, puis effectue un zoom sur la totalité de la zone.

Resserrez les doigts pour faire un zoom avant et écartez-les pour faire un zoom arrière.

Redimensionnement : l’utilisateur sélectionne un objet au sein d’une zone et le redimensionne.

Resserrez les doigts pour rétrécir un objet et écartez-les pour l’agrandir.

Recommandations en matière d’expérience utilisateur pour le zoom optique et le redimensionnement

Pour les applications prenant en charge le redimensionnement ou le zoom optique, tenez compte des recommandations suivantes :

Si des limites ou des contraintes de tailles maximale et minimale sont définies, utilisez le retour visuel pour indiquer quand l’utilisateur atteint ou dépasse ces limites.
Utilisez des points d’ancrage pour influencer le comportement du zoom et du défilement panoramique en spécifiant des points logiques où arrêter la manipulation et garantir qu’un sous-ensemble spécifique de contenu soit visible dans la fenêtre d’affichage. Prévoyez des points d’ancrage pour les niveaux de zoom ou les affichages logiques courants afin de faciliter leur sélection par l’utilisateur. Par exemple, une application de photographie peut prévoir un point d’ancrage de redimensionnement à 100 % ou, dans le cas d’une application de cartographie, les points d’ancrage peuvent s’avérer utiles dans les vues de la ville, de la province et du pays.

Les points d’ancrage permettent à l’utilisateur d’exécuter correctement ces opérations, en exigeant moins de précision dans ses mouvements.

Il existe deux types de points d’ancrage :
- De proximité : lorsque l’utilisateur met fin au contact, un point d’ancrage est sélectionné si l’inertie s’arrête au sein du seuil de distance du point d’ancrage. Les points d’ancrage de proximité permettent à un zoom ou à un redimensionnement de se terminer entre des points d’ancrage.
- Obligatoire : le point d’ancrage sélectionné est celui qui précède ou qui suit immédiatement le dernier point d’ancrage rencontré avant que l’utilisateur ait mis fin au contact (en fonction de la direction et de la vitesse du mouvement). Une manipulation doit prendre fin sur un point d’ancrage obligatoire.
Les mouvements physiques d’inertie doivent être utilisés, notamment :
- Décélération : se produit dès que l’utilisateur arrête le pincement ou l’étirement. Cette action s’apparente à glisser sur une surface glissante jusqu’à l’arrêt.
- Rebond : un léger effet de rebond se produit lorsqu’une limite ou une contrainte de taille est dépassée.
Espacez les contrôles conformément aux Recommandations en matière de ciblage.
N’utilisez pas la fonction de zoom pour parcourir l’interface utilisateur ou exposer des contrôles supplémentaires au sein de votre application ; utilisez plutôt une région de défilement panoramique. Pour plus d’informations sur le défilement panoramique, voir Recommandations en matière de défilement panoramique.

Pour les applications prenant en charge le redimensionnement, respectez les recommandations suivantes.

Fournissez des poignées de redimensionnement pour le redimensionnement contraint. Le redimensionnement isométrique, ou proportionnel, est l’option par défaut si les poignées ne sont pas spécifiées.
En règle générale, vous ne devez pas placer des objets redimensionnables dans une zone de contenu redimensionnable. Les exceptions à cette règle sont les suivantes :
- Applications de dessin dans lesquelles des éléments redimensionnables peuvent s’afficher sur une zone de dessin ou un carton redimensionnable.
- Pages Web comportant un objet incorporé, tel qu’une carte.
Remarque

Dans tous les cas, la zone de contenu sera redimensionnée, sauf si tous les points tactiles figurent dans l’objet redimensionnable.