Modèles composites pour Visual Studio
Les modèles composites combinent les éléments d’interaction et de conception dans des configurations distinctes. Voici quelques-uns des modèles composites les plus importants dans Visual Studio en ce qui concerne la cohérence :
Visualisation des données
Les graphiques constituent un moyen visuel d’agréger et de visualiser les données afin d’améliorer la prise de décision. Ils peuvent aider les utilisateurs à faire face à de nombreuses données, mais peu de signification voient ce qui mérite de l’attention et ce qui peut nécessiter une action.
L’utilisateur bénéficie d’un graphique si l’une des conditions suivantes est remplie :
Le graphique aidera-t-il les utilisateurs à identifier les tâches sur lesquelles ils peuvent agir ?
Le graphique permettra-t-il aux utilisateurs de prévoir les conséquences des changements potentiels ?
Le graphique aidera-t-il les utilisateurs à découvrir les tendances et à identifier les modèles ?
Le graphique permettra-t-il aux utilisateurs de prendre de meilleures décisions ?
Le graphique aidera-t-il à répondre à une question spécifique que les utilisateurs peuvent avoir dans le contexte donné ?
Règles générales pour les graphiques
Étiquetez clairement les données. Les illustrations sans explication ne sont que de jolies images.
Démarrez les axes à zéro pour éviter les proportions de brochettes. La longueur de ligne et la taille des barres sont des indicateurs visuels importants pour comprendre les relations entre les points de données.
Créez des graphiques, et non des infographies. Les infographies sont des représentations artistiques des données, et leur objectif principal est la narration visuelle. Les graphiques peuvent (et doivent) être visuellement attrayants, mais laissez les données parler pour elle-même.
Évitez le skeumorphisme, les graphiques à barres pictoriales, les symboles de hachage de contraste et d’autres touches d’infographie.
N’utilisez pas d’effets 3D comme élément décoratif. Utilisez-les uniquement s’ils font partie intégrante de la capacité de l’utilisateur à comprendre les informations.
Évitez d’utiliser plusieurs lignes et remplissages, car plus de deux couleurs peuvent rendre ce type de graphique difficile à lire et à interpréter correctement.
N’utilisez pas de graphique (ou d’illustration) comme seul moyen de comprendre un concept ou d’interagir avec les données. Cela présente des difficultés pour les utilisateurs présentant des déficiences visuelles.
N’utilisez pas de graphiques comme éléments gratuits ou décoratifs sur une page. En d’autres termes, si un graphique n’ajoute aucune valeur ni aide les utilisateurs à résoudre un problème, ne l’utilisez pas.
Types de graphiques
Les types de graphiques utilisés dans Visual Studio incluent des graphiques à barres, des graphiques en courbes, un graphique en secteurs modifié appelé graphique en anneau ou « graphique en anneau », chronologie s, des nuages de points (également appelés « graphiques en cluster ») et des graphiques de Gantt. Chaque type de graphique est utile pour communiquer un type d’informations différent.
Autres considérations relatives au graphique
Couleur
Il existe une palette spécifique de couleurs de graphique définies pour une utilisation dans Visual Studio. La palette est accessible pour les principaux types de daltonisme, et les couleurs peuvent être différenciées même lorsqu’elles sont utilisées comme tranches très étroites de couleur. Vous pouvez utiliser ces couleurs dans n’importe quelle combinaison pour n’importe quel type de graphique ou de graphique dans votre interface utilisateur. Vous n’avez pas besoin d’utiliser les sept couleurs si vous n’avez pas besoin de nombreuses couleurs distinctes. Ces couleurs n’ont pas été conçues pour être utilisées avec des éléments de premier plan, donc ne placez pas de texte ni de glyphes sur ces couleurs. Ces teintes doivent être codées en dur et exposées à la personnalisation des utilisateurs sous Options d’outils > (voir Couleurs d’exposition pour les utilisateurs finaux).
| Swatch | Hex | RGB |
|---|---|---|
 |
#71B252 | 113,178,82 |
 |
#BF3F00 | 191,63,0 |
 |
#FCB714 | 252,183,20 |
 |
#903F8B | 144,63,139 |
 |
#117AD1 | 17,122,209 |
 |
#79D7F2 | 121,215,242 |
 |
#B5B5B5 | 181,181,181 |
Interface utilisateur sur l’objet et aperçu
Cette section donne un contexte à un aperçu, également appelé vue d’aperçu du code, un type d’interface utilisateur sur objet unique à Visual Studio.
L’interface utilisateur sur objet doit donner à l’utilisateur plus d’informations ou d’interactivité sans nuire à sa tâche principale.
Le modèle principal de l’interface utilisateur sur objet dans Visual Studio est appelé « informations au point d’attention ».
L’interface utilisateur sur objet dans Visual Studio est incluse ou flottante et durable ou temporaire.
La vue d’aperçu du code, un type d’interface utilisateur sur objet dans Visual Studio, est inline et durable.
CodeLens, un type d’interface utilisateur sur objet dans Visual Studio, est flottant et temporaire
Comprendre le fonctionnement d’un élément de code ou trouver des détails sur ce code nécessite souvent un développeur de changer de contexte et d’accéder à d’autres contenus ou à une autre fenêtre. Ces changements de contexte peuvent être perturbants, car les utilisateurs peuvent perdre le focus sur leur tâche d’origine s’ils quittent leur fenêtre principale. En outre, l’obtention de ce contexte d’origine peut être difficile, en particulier si le changement de fenêtres a entraîné l’obscurcissement de leur code d’origine par d’autres interfaces utilisateur.
L’interface utilisateur sur objet suit un modèle appelé « informations au point d’attention ». Ces messages, fenêtres contextuelles et boîtes de dialogue donnent aux utilisateurs des informations supplémentaires et pertinentes qui ajoutent des clarifications ou une interactivité sans perdre le focus sur leur tâche principale. Par exemple, l’interface utilisateur sur objet inclut des fenêtres contextuelles qui s’affichent lorsqu’un utilisateur place son pointeur sur une icône dans la zone de notification, lequiggle rouge sous un mot mal orthographié et la vue d’aperçu introduite dans Visual Studio 2013.
Points de décision
Dans Visual Studio, il existe plusieurs façons d’utiliser ce modèle d’informations au point d’attention. Choisir le bon mécanisme et l’implémenter de manière cohérente et prévisible est essentiel à l’expérience globale. Sinon, les utilisateurs peuvent être présentés avec une expérience déroutante ou incohérente qui empêche le focus du contenu lui-même.
Relations entre le contenu maître et le contenu détaillé
Les informations au point d’attention sont utilisées pour afficher une relation entre le contenu sur lequel l’utilisateur se concentre (le contenu « maître ») et le contenu associé supplémentaire (le contenu « détail »). Dans ce modèle, le contenu détaillé est clairement lié au contenu avec lequel l’utilisateur travaille et peut être affiché à proximité du contenu maître. Les informations supplémentaires ou les informations qui ne peuvent pas être résumées sans surcharger le contenu maître doivent suivre un autre modèle, tel qu’une fenêtre d’outil.
Affichez toujours le contenu détaillé à proximité du contenu maître.
Assurez-vous toujours que le contenu détaillé permet toujours à un utilisateur de rester concentré sur le contenu principal. Souvent, la meilleure façon d’y parvenir consiste à afficher le contenu de détail le plus proche possible du contenu maître. Pour ce faire, vous pouvez afficher le contenu détaillé dans une fenêtre contextuelle en regard du contenu maître ou en affichant le contenu détaillé en dessous du contenu maître.
N’utilisez jamais d’informations au point d’attention qui éloigne l’utilisateur du contenu maître. Si les utilisateurs doivent afficher le contenu des détails séparément, exposez une action explicite qui permet à l’utilisateur de le faire.
Détails de conception
Une fois que vous avez déterminé que l’interface utilisateur sur l’objet est le bon choix, il existe quatre considérations principales en matière de conception :
Persistance : le contenu doit-il être durable ou temporaire ? Les utilisateurs souhaitent-ils conserver les informations visibles pour faire référence ou interagir avec elles ? Ou les utilisateurs souhaitent-ils rapidement examiner les informations, puis poursuivre leur tâche principale ?
Type de contenu : le contenu sera-t-il informationnel, actionnable ou navigationnel ? L’utilisateur a-t-il besoin de détails supplémentaires sur le contenu maître ? L’utilisateur doit-il effectuer une tâche qui affecte le contenu principal ? Ou l’utilisateur doit-il être dirigé vers une autre ressource ?
Type d’indicateur : un indicateur ambiant est-il judicieux ? Les informations peuvent-elles être résumées de manière utile et affichées sans surcharger le contenu principal ?
Mouvements : quels gestes utiliseront pour appeler et ignorer l’interface utilisateur ? Comment l’utilisateur affiche-t-il le contenu détaillé et l’envoie-t-il ? Existe-t-il une valeur dans l’ajout d’un mouvement tel que l’épinglage pour basculer entre les états temporaires et durables ?
Chacun de ces quatre points de décision aura un impact sur les principaux composants de l’interface utilisateur sur objet.
Composants de l’interface utilisateur sur objet
Type de conteneur (présentateur de contenu)
Virgule flottante
Intraligne
Type de contenu
Information : données qui peuvent être statiques ou dynamiques
Actionnable : commandes qui modifient le contenu principal
Navigation : liens qui amènent l’utilisateur à une autre fenêtre ou application, par exemple MSDN
Mouvements
Invocation
Renvoi
Épinglage
Autres interactions
Modèle de persistance et de validation
Temporaire
Durable
Automatique
À la demande
Indicateurs ambiants (facultatif)
Soulignement de l’équiggle
Icône d’étiquette active
Autres indicateurs ambiants
Type de conteneur (présentateur de contenu)
Il existe deux options majeures disponibles pour présenter du contenu au point d’attention :
Inline : présentateur inline, tel que la vue d’aperçu introduite dans l’éditeur de code Visual Studio 2013, rend l’espace pour le nouveau contenu en déplaçant le contenu existant.
Préférez les présentateurs inline si vous attendez que les utilisateurs souhaitent passer un certain temps à faire référence ou interagir avec le contenu que vous présentez.
Évitez les présentateurs inline si vous attendez que les utilisateurs souhaitent regarder les informations que vous présentez, puis poursuivre leur tâche principale avec une interruption minimale.
Flottant : un présentateur flottant est positionné aussi près du contenu sélectionné que possible, mais ne modifie pas la disposition du contenu existant. Différentes stratégies peuvent être utilisées, telles que l’affichage d’un panneau de contenu flottant sur l’espace blanc disponible le plus proche du symbole sélectionné.
Préférez les présentateurs flottants si vous attendez que les utilisateurs souhaitent regarder les informations que vous présentez, puis poursuivre leur tâche principale avec une interruption minimale.
Évitez les présentateurs flottants si vous attendez que les utilisateurs souhaitent passer un certain temps à faire référence ou interagir avec le contenu que vous présentez.
Type de contenu
Il existe trois types principaux de contenu qui peuvent être affichés à l’intérieur d’un conteneur d’interface utilisateur sur objet. Toute combinaison de ces types d’informations peut être affichée. Les trois types sont les suivants :
Information : la plupart des conteneurs d’interface utilisateur sur objet affichent un type de contenu d’information. Le contenu peut représenter des informations sur l’état actuel de l’environnement ou représenter des informations sur un état futur potentiel de l’environnement. Par exemple, il peut être utilisé pour afficher l’effet d’une commande particulière, telle qu’une refactorisation, sur le code existant.
Utilisez toujours la représentation canonique des informations que vous affichez. Par exemple, le code doit ressembler au code, terminé avec la mise en surbrillance de la syntaxe et doit respecter les paramètres de police et d’autres paramètres d’environnement définis par l’utilisateur.
Envisagez toujours de prendre en charge toutes les actions sur le contenu informationnel qui serait possible si ces mêmes informations sont présentées en tant que contenu principal. Par exemple, si vous présentez du code existant à l’intérieur d’un conteneur d’interface utilisateur sur objet, envisagez fortement de prendre en charge la possibilité de parcourir et de modifier ce code.
Envisagez toujours d’utiliser une couleur d’arrière-plan différente si vous présentez du contenu informationnel qui représente un état futur potentiel.
Actionnable : certains conteneurs d’interface utilisateur sur objet offrent la possibilité d’effectuer une action sur le contenu maître, comme l’exécution d’une opération de refactorisation.
Positionnez toujours les commandes actionnables séparément du contenu informationnel.
Activez et désactivez toujours les actions le cas échéant.
Reportez-vous toujours aux instructions standard pour représenter des commandes à l’intérieur des boîtes de dialogue.
Conservez toujours le nombre d’actions exposées dans un conteneur d’interface utilisateur sur objet à un minimum absolu. L’interaction avec l’interface utilisateur sur objet doit être une expérience légère et rapide. L’utilisateur ne doit pas avoir à dépenser de l’énergie pour gérer lui-même le conteneur d’interface utilisateur sur l’objet.
Considérez toujours comment et quand un conteneur d’interface utilisateur sur objet est fermé ou ignoré. En guise de meilleure pratique, toute action qui conclut la boîte de dialogue entre le contenu maître et le contenu détaillé doit également fermer le conteneur d’interface utilisateur sur l’objet lorsque cette action est appelée.
Navigation : certains conteneurs d’interface utilisateur sur objet incluent des liens qui amènent l’utilisateur à une autre fenêtre ou application, par exemple l’ouverture d’un article MSDN dans le navigateur web de l’utilisateur.
Toujours précédé d’un lien de navigation avec « Ouvrir » afin que les utilisateurs ne soient pas surpris d’être redirigés vers d’autres contenus.
Séparez toujours les liens de navigation des liens actionnables.
Indicateurs ambiants (facultatif)
Les indicateurs ambiants peuvent être subtils, y compris le texte présenté dans une couleur contrastée du reste du code, ou évident, y compris les symboles de graduation, tels que les soulignements à bascule et les icônes de balise intelligente. Les indicateurs ambiants communiquent la disponibilité d’informations supplémentaires et pertinentes. Dans l’idéal, ils fournissent des informations utiles, même sans demander à l’utilisateur d’interagir avec eux.
Positionnez toujours un indicateur ambiant afin qu’il ne distraire ni submerger l’utilisateur. S’il est impossible de positionner un indicateur ambiant de telle façon, envisagez une autre solution.
Positionnez toujours l’indicateur ambiant le plus proche possible du contenu auquel il est lié.
Essayez toujours de créer un indicateur qui résume les informations qu’il met à disposition. Envisagez de fournir le nombre d’éléments de données disponibles (par exemple, « 3 références » au lieu de simplement « Références ») ou pensez à une autre façon de résumer les données.
- Dans les cas où les données d’un indicateur ne peuvent pas toujours être calculées et affichées, envisagez immédiatement de fournir des commentaires progressifs à mesure que les valeurs sont calculées. Par exemple, envisagez d’animer les modifications qui reflètent les mises à jour des données disponibles, comme la façon dont la vignette de messagerie dynamique sur Windows Téléphone s’actualise à mesure que le nombre d’e-mails non lus augmente.
N’ajoutez jamais plus d’indicateurs qu’un utilisateur peut raisonnablement prendre en compte pour un élément de contenu donné. Les indicateurs ambiants doivent être utiles sans nécessiter d’interaction de l’utilisateur. Les indicateurs perdent leur ambiance s’ils nécessitent un dépassement de capacité et d’autres contrôles de gestion pour les mettre en vue.
Mouvements
Un aspect clé de l’autorisation de l’utilisateur à maintenir le focus sur le contenu maître consiste à prendre en charge les mouvements appropriés pour ouvrir et ignorer le contenu de détail supplémentaire.
Exigez toujours que l’utilisateur effectue un mouvement explicite pour ouvrir le contenu supplémentaire. Les mouvements ouverts courants sont les suivants :
Pointage : info-bulles ou contenu informationnel non interactif
Commande explicite : présentateur inline
Double-cliquez sur l’indicateur ambiant : fenêtre contextuelle CodeLens
Ignorez toujours le contenu des détails chaque fois que l’utilisateur appuie sur la touche Échap.
Considérez toujours le contexte de l’interface utilisateur sur l’objet. Pour les présentateurs de contenu qui autorisent l’interaction au sein du conteneur, déterminez soigneusement s’il faut afficher des informations supplémentaires sur le pointage, ce qui est susceptible d’être perturbant le flux de travail de l’utilisateur.
N’affichez jamais le contenu sur le pointage qui semble être modifiable ou invite l’interaction utilisateur. Ce comportement peut frustrer les utilisateurs s’ils tentent de déplacer le curseur sur le contenu de détail, car le comportement standard d’une info-bulle consiste à ignorer immédiatement lorsque le curseur n’est plus sur le contenu maître qui l’a produit.
Modèles de sélection
Un modèle de sélection est le mécanisme utilisé pour indiquer et confirmer les opérations sur un ou plusieurs objets d’intérêt dans l’interface utilisateur. Cette rubrique décrit les modèles d’interaction de sélection dans les éditeurs de documents Visual Studio : éditeurs de texte, surfaces de conception et surfaces de modélisation.
Les utilisateurs doivent avoir un moyen d’indiquer à Visual Studio ce sur quoi ils travaillent, et Visual Studio doit répondre de manière prévisible avec des commentaires aux utilisateurs sur ce qu’il fonctionne. Les différences ou une mauvaise communication entre l’utilisateur et l’interface utilisateur peuvent entraîner la notication d’une action, ce qui peut avoir des conséquences inattendues. Souvent, l’erreur passe inaperçue jusqu’à ce que l’utilisateur voit qu’un élément est manquant ou a changé. Les modèles de sélection sont donc l’un des éléments les plus critiques de la conception de l’interface utilisateur. Bien que les modèles de sélection dans Visual Studio soient cohérents avec Windows, il existe de légères variations.
Dans Visual Studio, comme dans Windows, les modèles de sélection diffèrent selon le contexte dans lequel l’interaction se produit. Les sélections peuvent se produire dans quatre types d’objets :
Texte
Objets graphiques
Listes et arborescences
Grilles
Dans ces objets, il existe trois types de sélections :
Contiguë
Disjoint
Région
Étendue
Le composant le plus important de la sélection est de s’assurer que l’utilisateur sait dans quelle fenêtre elle fonctionne (activation) et où se trouve le focus (sélection). Visual Studio étend la fonctionnalité de gestion des fenêtres dans Windows, mais le schéma d’activation est le même : interagir avec une fenêtre met le focus sur la fenêtre. Visual Studio a deux indicateurs d’activation : un pour les fenêtres de document et un pour les fenêtres d’outils.
Pour les fenêtres de document, la fenêtre active est indiquée par un onglet fenêtre de document entrant dans l’avant et en modifiant sa couleur d’arrière-plan :
Sélection d’onglets actifs
Pour les fenêtres d’outils, la fenêtre active est indiquée par une modification de la couleur de la zone de barre de titre de la fenêtre outil :
Fenêtre outil active montrant la sélection principale d’un nœud
Fenêtre outil inactive, montrant la sélection latente du nœud
Une fois qu’une fenêtre est active, son focus est indiqué en fonction des modèles de sélection décrits dans cette section des instructions.
Context
Visual Studio a été conçu pour conserver un concept fort de contexte, en gardant le suivi de l’emplacement de travail de l’utilisateur. Une seule fenêtre est active, qu’il s’agisse d’un outil ou d’une fenêtre de document. Toutefois, la fenêtre de document la plus haute conserve toujours une sélection latente. Bien que le focus se trouvant dans une fenêtre d’outil, la fenêtre de document qui était active pour la dernière fois affiche une sélection, même dans un état inactif. Cela permet de conserver le contexte de l’utilisateur dans le document qu’il a modifié, en lui indiquant que Visual Studio a conservé son état afin qu’il puisse retourner et passer en toute transparence entre les fenêtres d’outils et les fenêtres de document.
Sélection de texte
Les éditeurs Visual Studio qui sont strictement textuels, tels que l’éditeur de texte intégré, utilisent le même modèle de sélection de texte et l’apparence décrits dans la page Souris et pointeurs de la page Instructions d’interaction de l’expérience utilisateur Windows sur MSDN. Le focus d’entrée dans l’éditeur de texte est indiqué par une barre verticale appelée point d’insertion. Le point d’insertion est un seul pixel épais et coloré comme l’inverse de tout ce qui apparaît derrière lui. Il clignote en fonction de la fréquence définie par le paramètre de vitesse de clignotement du curseur sous l’onglet Vitesse de l’applet clavier dans Panneau de configuration.
Sélection contiguë et disjointe
La sélection dans l’éditeur de texte est contiguë uniquement. Les sélections de texte disjoint ne sont pas autorisées, mais doivent être traitées dans les éditeurs d’objets graphiques. Lorsque le pointeur de la souris de l’utilisateur se trouve sur une zone de texte, le curseur passe à un faisceau I. Un seul clic place le point d’insertion dans l’éditeur de texte à l’emplacement de clic. Le fait de maintenir le bouton de la souris enfoncé démarre une sélection en surbrillance et de libérer le bouton de la souris met fin à la mise en surbrillance de la sélection.
Sélection de région (sélection de zone)
Visual Studio prend en charge les sélections de régions dans l’éditeur de texte, et cette option est appelée sélection de zone. La sélection de zone permet à l’utilisateur de sélectionner une région de texte qui ne suit pas le flux de texte normal. Comme pour la sélection de texte standard, la sélection doit être contiguë. La sélection de la zone est lancée en maintenant la touche Alt enfoncée tout en faisant glisser avec la souris. La sélection de zone peut également être lancée en maintenant enfoncées les touches Alt et Maj tout en utilisant les touches de direction pour indiquer la région de la sélection. La sélection de zone utilise la sélection normale et affiche le curseur du point d’insertion qui clignote à la fin de la zone de sélection.
Sélection de région (zone) dans Visual Studio
Apparence de la sélection de texte
Les couleurs utilisées pour la sélection active et inactive dans l’éditeur peuvent être personnalisées. Pour personnaliser l’apparence visuelle de l’éditeur, un utilisateur peut accéder aux options Outils>, puis consulter l’Éditeur de texte polices et couleurs > de l’environnement>.
Sélection graphique
Interaction
La sélection d’objets graphiques peut être complexe et dépend d’un certain nombre de facteurs :
Modèle de sélection principal de l’éditeur. Les éditeurs qui contiennent des objets graphiques peuvent également être utilisés pour modifier du texte ou des grilles. Par exemple, l’éditeur peut être un éditeur basé sur du texte qui prend également en charge le placement d’objets graphiques, tels que le concepteur XAML Visual Studio. La prise en charge de plusieurs types d’objets peut affecter la façon dont l’utilisateur sélectionne des groupes composés de différents types d’objets.
Prise en charge des états de sélection primaire et secondaire. Un éditeur peut fournir des états de sélection principaux et secondaires afin que les objets puissent être modifiés en unon, alignés les uns avec les autres, redimensionnés ensemble, et ainsi de suite.
Prise en charge de la modification sur place. Les éditeurs peuvent également autoriser la modification du contenu de leurs objets graphiques. Par exemple, une forme de rectangle peut également contenir du texte à l’intérieur qui peut être modifié par l’utilisateur. En outre, ce texte peut être centré ou justifié. La modification sur place implique un niveau d’interaction utilisateur plus détaillé et nécessite donc un ensemble approprié d’indicateurs visuels pour présenter des informations d’état à l’utilisateur.
Interaction avec la souris
| Input | Résultats |
|---|---|
| Cliquez sur un objet non sélectionné | Sélectionne l’objet et affiche une ligne en pointillés et des poignées de sélection, si l’objet est redimensionnable. |
| Cliquez sur un objet sélectionné | Active la modification sur place si l’objet le prend en charge. Cliquer en dehors de l’objet désactive le mode d’édition sur place. |
| Double-cliquez sur un objet | Ouvre le code derrière l’objet pour modification et peut insérer un gestionnaire d’événements par défaut, le cas échéant. |
| Pointer vers un objet | Modifie le pointeur vers le curseur de déplacement. L’apparence de l’objet, telle que sa luminosité ou sa couleur, peut changer. |
| Pointer vers un handle de sélection | Modifie le pointeur vers le curseur de redimensionnement. Pour les objets qui prennent en charge la rotation, certaines poignées de sélection peuvent changer le pointeur en curseur de rotation, car le pointeur est positionné différemment (par exemple, déplacé plus loin) par rapport au handle de sélection. |
| Glisser | Même si l’objet n’est pas sélectionné précédemment, modifie le pointeur vers le curseur de déplacement et déplace l’objet. |
| L’éditeur perd le focus | Désactive le mode d’édition sur place, bien que l’objet conserve le contenu et l’apparence qu’il avait au cours de sa dernière opération/état de sélection. |
| Sélection d’objets | Indiqué par une bordure, une ligne en pointillés ou un autre traitement visuellement distinct pour mettre en évidence la limite de l’objet. |
| Redimensionner un objet sélectionné | Indiqué par les handles de sélection. Un objet redimensionnable a huit handles, représentant chaque direction dans laquelle il peut être redimensionné. Moins de handles peuvent être utilisés si l’objet ne peut être redimensionné que dans certaines directions. Lorsque l’utilisateur dimensionne un objet jusqu’à l’emplacement où huit handles ne seraient pas interactifs, quatre handles peuvent être utilisés. Les tailles de handle doivent être liées à la bordure de la fenêtre et aux métriques de périphérie avec la fonction API GetSystemMetrics à dimensionner en proportion de la résolution d’affichage.  |
| Faire pivoter un objet sélectionné |  |
Interaction clavier
| Input | Résultats |
|---|---|
| Onglet | Déplace l’indicateur de focus entre l’ordre logique des objets dans l’éditeur. Il peut s’agir de gauche à droite ou de haut en bas en fonction de la valeur de propriété TabIndex (ou équivalent), de l’ordre de création d’objets et de l’objectif global de l’éditeur. Maj+Tab inverse la direction de l’indicateur de focus. |
| Espace | Active le mode panoramique pendant que la séquence de touches est conservée. Une entrée de souris supplémentaire est nécessaire pour faire défiler la position de la fenêtre d’affichage. |
| Ctrl+Barre d'espace | Active le mode de zoom pendant que la séquence de touches est conservée. Une entrée de souris supplémentaire est nécessaire pour augmenter et diminuer le facteur de zoom. |
| Ctrl+Alt+Signe Moins | Diminue le facteur de zoom d’un niveau. |
| Ctrl+Alt+Signe Plus | Augmente le facteur de zoom d’un niveau. |
| Maj OU Ctrl | Ajoute l’objet au groupe de sélection. Ctrl vous permet également de supprimer des objets individuellement du groupe de sélection. |
| Entrée | Exécute la commande par défaut de l’objet (généralement Ouvrir ou Modifier). |
| F2 | Active la modification sur place de l’objet. |
| Touches de direction | Déplace le ou les objets sélectionnés dans la direction de la touche de direction enfoncée, par petits incréments (par exemple, 1 pixel à la fois) |
| Ctrl+touches de direction | Déplace le ou les objets sélectionnés dans la direction de la touche de direction enfoncée, par incréments plus grands (par exemple, 10 pixels à la fois) |
| Maj+touches de direction | Redimensionne le ou les objets sélectionnés dans la direction respective, par petits incréments (par exemple, 1 pixel à la fois) |
| Ctrl+Maj+Touches de direction | Redimensionne le ou les objets sélectionnés dans la direction respective, par incréments plus grands (par exemple, 10 pixels à la fois) |
Lorsque les utilisateurs modifient des contrôles en place, il peut être judicieux que les objets puissent être redimensionnés automatiquement avec l’entrée utilisateur. Par exemple, si l’utilisateur modifie un contrôle d’étiquette, l’étiquette doit croître pour afficher le texte que l’utilisateur vient de taper. Si ce n’est pas le cas, l’utilisateur doit redimensionner le contrôle manuellement après avoir modifié le texte. Si l’utilisateur a beaucoup de contrôles, cela devient une tâche de rote et non productive.
Conteneurs graphiques
Dans certains cas, les éditeurs graphiques fournissent des conteneurs pour d’autres objets graphiques, tels que le contrôle panneau Windows Forms ou le contrôle Disposition de grille dans le concepteur HTML. Si votre éditeur fournit des conteneurs pour d’autres objets graphiques, le modèle de sélection suivant doit être utilisé uniquement pour le conteneur (les objets du conteneur suivent le modèle standard comme décrit ci-dessus) :
| Input | Résultats |
|---|---|
| Clic unique sur le conteneur | Sélectionne l’objet conteneur sans sélectionner directement les objets contenus. Le conteneur peut être déplacé et/ou redimensionné avec l’entrée standard de la souris et du clavier (comme décrit ci-dessus). Les objets contenus sont déplacés par rapport au conteneur, mais les objets contenus ne sont pas redimensionnés, sauf s’ils sont également sélectionnés directement. |
| Pointez sur la région de limite du conteneur | Transforme la souris en curseur de déplacement, indiquant que le conteneur peut être déplacé. |
| Faire glisser la région de limite du conteneur | Remplace la souris par le curseur de déplacement et déplace le conteneur (et les objets contenus dans). Le conteneur ne peut pas être déplacé sans être sélectionné en un seul clic. |
| Cliquer sur un objet dans le conteneur | Désélectionne le conteneur (le cas échéant) et sélectionne uniquement l’objet cliqué. |
| Maj+cliquez sur OU Ctrl+cliquez sur un objet contenu et/ou sur un conteneur | Ajoute l’objet cliqué à un groupe de sélection ou de sélection existant. Si l’objet cliqué est déjà membre du groupe de sélection, il est supprimé du groupe de sélection. |
Les objets contenus doivent respecter le modèle de sélection de base, comme décrit dans la section précédente. À partir du test de facilité d’utilisation du concepteur Windows Forms, les utilisateurs attendaient un accès transparent aux objets contenus sans effectuer d’étapes intermédiaires (imposées par l’objet de confinement).
Sélections disjointes et régionales
Les éditeurs d’objets graphiques doivent prendre en charge les sélections disjointes. Notez que ce graphique n’affiche pas l’apparence du contrôle pour Visual Studio. Consultez l’apparence de la sélection d’objets graphiques pour obtenir des spécifications visuelles détaillées.
Sélection disjointe
Les éditeurs graphiques doivent également fournir des sélections de région avec un indicateur de sélection de type marque. Si l’éditeur graphique prend en charge d’autres types d’objets (tels que du texte), les sélections de région peuvent ne pas être possibles en fonction des contraintes de ces autres types d’objets.
Sélection de marque
Sélections primaires et secondaires
Certains éditeurs d’objets graphiques permettent à l’utilisateur de modifier ou d’aligner des objets dans des groupes. Dans ce cas, le concept de sélections primaires et secondaires doit être introduit. La sélection principale est l’objet auquel tous les autres objets répondent pour les opérations de groupe. L’objet sélectionné par l’utilisateur devient d’abord le contrôle principal et les sélections suivantes deviennent les sélections secondaires. La sélection principale a un traitement visuel distinct de la ou des sélections secondaires pour indiquer l’objet principal :
Sélection principale avec deux sélections secondaires
Apparence de la sélection d’objets graphiques
Les poignées de sélection sont des carrés dessinés dans un motif rectangulaire autour du cadre englobant de l’objet. Le graphique ci-dessous montre des exemples des différents états qu’un objet graphique peut avoir avec la poignée, le dimensionnement et l’apparence d’édition sur place. La taille des handles doit être liée aux métriques de bordure de fenêtre et de périphérie à l’aide de l’API GetSystemMetrics .
| State | Apparence | Détails visuels |
|---|---|---|
| Non sélectionné | Par défaut |  |
| Sélection principale | Redimensionnable |  |
| Sélection principale | Non redimensionnable |  |
| Sélection principale | Verrouillé(e) |  |
| Sélection secondaire | Redimensionnable |  |
| Sélection secondaire | Non redimensionnable |  |
| Sélection secondaire | Verrouillé(e) |  |
| Interface utilisateur active | Par défaut |  |
Afficher les modèles de sélection
Arborescence
La sélection dans une arborescence s’affiche avec une mise en surbrillance simple. Si l’utilisateur clique sur un nom de nœud ou une icône de nœud, le nœud devient sélectionné. Les glyphes triangulaires à gauche du nœud se développent ou contractent le contrôle d’arborescence, mais n’affectent pas la sélection de l’utilisateur, à une exception près : lors de la réduction d’un nœud parent lorsque la sélection se trouve sur un enfant de ce nœud, la sélection passe au parent.
Arborescence classique dans Visual Studio
Les vues d’arborescence peuvent prendre en charge des sélections contiguës et disjointes, même sur plusieurs niveaux dans l’arborescence. Plusieurs sélections contiguës ou disjointes doivent être effectuées sur des nœuds d’arborescence visibles. Si un nœud est réduit, la sélection disjointe est perdue et le nœud qui a été réduit obtient la sélection. De cette façon, l’utilisateur peut voir les nœuds qui seront affectés par une opération. Lorsque les nœuds sont réduits, il devient peu clair quels nœuds peuvent être affectés.
Lorsqu’un nœud parent est sélectionné, l’opération doit s’appliquer au parent, bien qu’il soit possible qu’il soit judicieux qu’une opération s’applique au parent et à tous ses enfants. Dans ce cas, fournissez une interface utilisateur supplémentaire pendant l’opération, telle qu’une boîte de dialogue case activée ou de confirmation pour rendre l’option « appliquer à tous les enfants » explicite à l’utilisateur.
Renommage
Si les nœuds de l’arborescence prennent en charge le changement de nom, le changement de nom doit être effectué en place. L’opération sur place doit être la norme dans tous les contrôles d’arborescence dans Visual Studio. Fournissez une commande de renommage qui active immédiatement le mode d’édition sur place, avec la sélection de texte couvrant l’intégralité du nom du nœud, prête à accepter l’entrée utilisateur. Si le nœud représente un fichier, le nom de fichier doit contenir l’extension. La mise en surbrillance de la sélection doit inclure uniquement le corps du nom de fichier et non l’extension.
| Input | Résultats |
|---|---|
| Touche Entrée | Valide l’opération de renommage |
| Touche Échap | Annule l’opération de renommage |
| Cliquer en dehors de la région de modification sur place | Valide l’opération de renommage |
| Annuler | Fournir une annulation simple pour annuler l’opération de renommage |
Sélection dans les listes et les contrôles de grille
Le concept clé de la sélection de liste est qu’il est basé sur des lignes, ce qui signifie que lorsqu’une sélection est effectuée, la ligne entière est sélectionnée en tant qu’unité. En revanche, les grilles peuvent autoriser la sélection de cellules spécifiques sans affecter tout autre aspect de la ligne. Les grilles peuvent également contenir une hiérarchie de lignes imbriquées (comme dans un TreeGrid) qui permettent à l’ensemble des branches de la hiérarchie d’être sélectionnées et désélectionnées en interagissant avec les lignes parentes. La sélection dans les listes s’affiche par une couleur de surbrillance simple sur la ligne entière des données. Le focus est affiché par une bordure pointillée à un pixel autour de la ligne ou de la cellule modifiable actuelle (ligne si toutes les cellules sont en lecture seule).
Remarque
Le focus et la sélection sont des concepts différents. Le focus est une indication de l’élément d’interface utilisateur destiné à recevoir une entrée non explicitement dirigée vers un autre objet, tandis que la sélection fait référence à l’état de l’inclusion d’un objet dans un ensemble d’objets sur lesquels les opérations suivantes peuvent avoir lieu.
Les sélections dans les listes peuvent être contiguës, disjointes ou région. Lorsque plusieurs sélections sont autorisées, la sélection contiguë et disjointe doit toujours être prise en charge, tandis que la prise en charge des sélections de région (zone) est facultative. Les sélections de région sont lancées en faisant glisser dans l’espace blanc du corps de la liste.
| Object | Sélection |
|---|---|
| List | Contiguë |
| List | Disjoint |
| List | Région |
Cliquer une fois sur une liste sélectionne la ligne où le clic s’est produit. Si l’utilisateur clique sur une cellule de liste qui prend en charge la modification sur place, la cellule est également activée immédiatement pour la modification sur place. Sinon, toute la ligne est immédiatement sélectionnée et affiche une mise en surbrillance.
Faire glisser dans le corps de la liste effectue l’une des trois opérations suivantes :
Lance une sélection de région si la liste la prend en charge et que la souris est en espace blanc
Lance une opération de glisser-déplacer si la cellule ou la ligne de liste prend en charge l’utilisation d’une source de glisser
Sélectionne la ligne actuelle
Modification sur place
Lorsque la modification sur place est autorisée, il existe deux modèles de base : le contrôle d’édition simple et le sélecteur de propriétés. Avec un contrôle d’édition simple, le contenu est mis en surbrillance et prêt pour l’entrée utilisateur dès que la modification sur place est activée. Lorsqu’un sélecteur de propriétés est implémenté, le bouton qui appelle le sélecteur de propriétés s’affiche une fois le mode d’édition sur place activé et la sélection actuelle n’est pas mise en surbrillance. Le bouton sélecteur doit être justifié à droite dans la cellule. Pour obtenir des exemples d’édition sur place, consultez la fenêtre Propriétés et la liste des tâches dans Visual Studio.
Prise en charge du clavier
La prise en charge du clavier pour la sélection dans les listes et les grilles suit les conventions Windows standard :
Les touches de direction naviguent dans la liste, en sélectionnant chaque ligne/cellule lorsque le focus est déplacé.
Maj + flèche effectue une sélection contiguë dans la direction des touches de direction.
Ctrl + flèche suivie de la barre d’espace bascule entre l’ajout et la suppression d’éléments de liste de la sélection, créant une sélection disjointe.
Pour les grilles qui contiennent des hiérarchies imbriquées, la touche Flèche droite développe une ligne parente et la touche Flèche gauche réduit une.
La touche Tab déplace le focus entre les cellules de la ligne active si les cellules sont modifiables.
La clé Entrée exécute la commande par défaut sur l’élément de la liste (souvent Ouverte).
La touche F2 active la modification sur place pour la cellule actuellement sélectionnée.
Persistance et enregistrement des paramètres
Bien que chaque composant logiciel de Visual Studio soit généralement responsable de son propre état et de sa persistance, Visual Studio enregistre automatiquement les paramètres dans certains cas, comme avec des tailles de fenêtre et des positions. Le tableau ci-dessous est une combinaison de paramètres enregistrés automatiquement et de paramètres qui nécessitent l’action explicite d’un utilisateur ou d’un programme à entreprendre.
| Object | Que faire pour enregistrer | Quand enregistrer | Où enregistrer |
|---|---|---|---|
| Objet sélectionnable (par exemple, une ligne de code) | Point d’arrêt sur une ligne de code Raccourci utilisateur associé à la ligne de code |
Lorsque le projet est enregistré | Fichier d’options utilisateur (.suo) pour le projet |
| Dialog | Emplacement de la boîte de dialogue, s’il avait été déplacé Affichage que l’utilisateur a utilisé pour la dernière fois dans la boîte de dialogue |
Lorsque la boîte de dialogue se ferme Lorsque la session Visual Studio se termine |
En mémoire Registre dans HKEY_Current_User |
| Fenêtre | Taille et emplacement de la fenêtre | Lorsque la fenêtre se ferme Lorsque le mode Visual Studio change Lorsque la session Visual Studio se termine |
Fichier d’options utilisateur (.suo) pour le projet Fichier d’options personnalisées pour les paramètres de fenêtre |
| Document | Sélection actuelle dans le document Affichage du document Les derniers endroits visités par l’utilisateur |
Lorsque le document est enregistré | Fichier d’options utilisateur (.suo) pour le projet |
| Project | Références aux fichiers Références aux répertoires sur le disque Références à d’autres logiciels Composants Informations d’état sur le projet lui-même |
Lorsque le projet est enregistré | Fichier projet |
| Solution | Références aux projets Références aux fichiers |
Lorsque le projet ou la solution est enregistré | Fichier solution (.sln) |
| Paramètres dans Options des outils > | Personnalisations du clavier Personnalisations de la barre d’outils Modèles de couleurs |
Lorsque la boîte de dialogue Options des outils > se ferme Lorsque la session Visual Studio se termine |
Registre dans HKEY_Current_User |
Ce que fait l’utilisateur et quand il le fait, détermine si un paramètre est enregistré en mémoire (pendant la session), enregistré sur disque (entre les sessions comme paramètre de Registre), dans le cadre du fichier projet ou solution lui-même, dans le cadre du fichier d’options de solution (.suo) ou en tant que fichier de paramètres personnalisé que seul ce composant logiciel connaît. Le tableau ci-dessus montre plusieurs événements auxquels les paramètres peuvent être enregistrés. Toutefois, il existe d’autres fois où vous souhaiterez peut-être enregistrer l’état :
Lorsque l’utilisateur change d’emplacement dans une boîte de dialogue ou une fenêtre
Lorsque l’utilisateur transfère le focus vers une autre fenêtre
Lorsque l’utilisateur passe de la conception au mode débogage
Lorsque l’utilisateur se déconnecte de son compte
Lorsque l’ordinateur entre en veille prolongée ou s’arrête
Lorsque l’ordinateur/disque dur est sur le point d’être reformaté et de le configurer à nouveau
Configurations de fenêtre
Une configuration de fenêtre est la présentation de base de l’environnement de développement : il s’agit d’un schéma constitué de la liste des fenêtres d’outils présentes et de la façon dont ils sont organisés. Pour les fenêtres gérées par l’IDE (fenêtres IDE), les informations de disposition sont conservées par utilisateur. Par conséquent, lorsqu’un utilisateur lance l’IDE, la disposition de la fenêtre s’affiche de la même façon que lorsqu’elle a quitté Visual Studio pour la dernière fois. L’état et la position des fenêtres IDE sont conservés dans un fichier d’options personnalisées au format XML. Les fenêtres d’outils créées par des packages chargés dans l’IDE conservent leurs informations d’état dans le Registre et peuvent ou non être par utilisateur.
Dispositions spécifiques au profil
Chaque profil inclut des dispositions de fenêtre d’outils, organisées de manière familière à des personnes de développeur spécifiques (les développeurs Visual C++ s’attendent à voir les Explorateur de solutions sur le côté gauche de l’IDE, tandis que les développeurs C# s’attendent à voir les Explorateur de solutions à droite). Les dispositions de fenêtre spécifiques au profil sont chargées une fois que l’utilisateur choisit un profil au démarrage. Un auteur de package doit déterminer la disposition de fenêtre la plus adaptée à l’expérience de son client, sachant que les modifications apportées par l’utilisateur à la configuration de la fenêtre seront ensuite conservées.
Entrée tactile
Les utilisateurs utilisent de plus en plus des produits de développement Microsoft sur des appareils tactiles. Toutefois, il existe des obstacles qui rendent difficile l’utilisation d’outils de développement sur les appareils tactiles. Les utilisateurs s’attendent à ce que nos produits offrent une expérience tactile fiable et précise. L’objectif de ces instructions est d’informer les décisions sur les fonctionnalités tactiles à incorporer et à encourager une expérience tactile cohérente entre Visual Studio et les produits connexes.
Niveaux d’expérience
Les niveaux d’expérience suivants sont destinés à servir de guide pour aider les équipes à décider quelles fonctionnalités tactiles offrir en fonction du niveau d’intérêt souhaité pour l’investissement en contact.
L’expérience de base est destinée aux équipes qui souhaitent fournir des fonctionnalités tactiles afin qu’il n’y ait pas de fin mortes tout au long de leur travail.
L’expérience optimisée est destinée aux équipes qui souhaitent fournir les fonctionnalités tactiles les plus courantes (par exemple, celles généralement disponibles dans les applications de navigateur Internet).
L’expérience avec élévation de privilèges est destinée aux équipes qui souhaitent ajouter des fonctionnalités telles que des mouvements ou d’autres fonctionnalités facultatives qui peuvent rendre leur application tactile pour la première fois.
| Expérience de base | Expérience optimisée | Expérience avec élévation de privilèges | |
|---|---|---|---|
| Permet aux utilisateurs de ... | Corriger la lecture au niveau du code et de la solution/du projet sans fin morte | Effectuer des tâches de maintenance, de refactorisation et de navigation | Fonctionner dans une expérience cohérente, intuitive et fluide avec confiance |
| Éditeur | Mouvement panoramique tactile et sélection Touche de barre de défilement pour sauter et appuyer sur+faire glisser |
Zoom de pincement Défilement rapide Sélection Utilisation simple du menu contextuel |
|
| Fenêtres d’outils supérieures | Mouvement panoramique de liste Sélection d’élément Touche de barre de défilement pour sauter et appuyer sur+faire glisser |
Défilement et sélection d’éléments simples | |
| Fenêtrage | Redimensionner la fenêtre Accès rapide |
||
| Bien documenter | Navigation facile entre les fichiers ouverts | ||
| Mouvements | Vérifier que les mouvements courants fonctionnent dans l’IDE | Actions basées sur des mouvements Prise en charge des concepteurs et glisser-déplacer |
|
| Autres points à considérer | Clavier personnalisé à l’écran |
Mouvements
Les mouvements fournissent aux utilisateurs un raccourci vers les commandes susceptibles d’nécessiter une interaction plus complexe. Reportez-vous aux instructions Windows sur les mouvements tactiles courants pour les applications de bureau et suivez ces instructions pour la plupart des mouvements, y compris les mouvements simples tels que le mouvement panoramique et le zoom.