UX Essentials pour Visual Studio

Bonnes pratiques

1. Soyez cohérent dans l’environnement Visual Studio.

• Suivez les modèles d’interaction existants dans l’interpréteur de commandes .

• Fonctionnalités de conception cohérentes avec le langage visuel et les exigences de l’artisanat de l’interpréteur de commandes.

• Utilisez des commandes et des contrôles partagés lorsqu’ils existent.

• Comprendre la hiérarchie Visual Studio et comment elle établit le contexte et pilote l’interface utilisateur.

2. Utilisez le service d’environnement pour les polices et les couleurs.

• L’interface utilisateur doit respecter le paramètre de police d’environnement actuel, sauf s’il est exposé pour la personnalisation dans la page Polices et couleurs de la boîte de dialogue Options.

• Les éléments d’interface utilisateur doivent utiliser le service VSColor, à l’aide de jetons d’environnement partagés ou de jetons spécifiques à la fonctionnalité.

3. Rendre toutes les images cohérentes avec le nouveau style VS.

• Suivez les principes de conception de Visual Studio pour les icônes, les glyphes et d’autres graphiques.

• Ne placez pas de texte dans les éléments graphiques.

4. Conception du point de vue centré sur l’utilisateur.

• Créez le flux de tâches avant les fonctionnalités individuelles qu’elle contient.

• Familiarisez-vous avec vos utilisateurs et faites en sorte que ces connaissances soient explicites dans votre spécification.

• Lors de l’examen de l’interface utilisateur, évaluez l’expérience complète ainsi que les détails.

• Concevez votre interface utilisateur de façon à ce qu’elle reste fonctionnelle et attrayante, quel que soit les paramètres régionaux ou la langue.

Résolution d’écran

Résolution minimale

• La résolution minimale pour Visual Studio 2015 est de 1280 x 720. Cela signifie qu’il est possible d’utiliser Visual Studio à cette résolution, même s’il peut ne pas s’agir d’une expérience utilisateur optimale. Il n’existe aucune garantie que tous les aspects seront utilisables aux résolutions inférieures à 1280 x 720.

• La résolution cible pour Visual Studio est 1366x768. Il s’agit de la résolution la plus basse à laquelle nous promettons une bonne expérience utilisateur.

• La hauteur de boîte de dialogue initiale doit être inférieure à 700 pixels, de sorte qu’elle correspond à la résolution minimale du cadre IDE à 96 ppp.

Affichages à haute densité

L’interface utilisateur dans Visual Studio doit fonctionner correctement dans tous les facteurs de mise à l’échelle ppp pris en charge par Windows : 150 %, 200 % et 250 %.

Anti-modèles

Visual Studio contient de nombreux exemples d’interface utilisateur qui suivent nos recommandations et nos meilleures pratiques. Dans un effort de cohérence, les développeurs empruntent souvent des modèles de conception d’interface utilisateur produit similaires à ce qu’ils créent. Bien qu’il s’agit d’une bonne approche qui nous aide à assurer la cohérence dans l’interaction utilisateur et la conception visuelle, nous faisons à l’occasion des fonctionnalités d’expédition avec quelques détails qui ne répondent pas à nos instructions en raison de contraintes de planification ou de hiérarchisation des défauts. Dans ces cas, nous ne voulons pas que les équipes copient l’un de ces « anti-modèles », car ils prolifèrent une interface utilisateur incorrecte ou incohérente dans l’environnement Visual Studio.

Champs/paramètres obligatoires affichés dans l’état d’erreur par défaut

Objectifs de l’équipe de fonctionnalités

• Avertir les utilisateurs qu’ils ont ajouté un élément qui doit être configuré.

• Attirez l’attention de l’utilisateur sur les zones qui ont besoin d’une entrée.

Solution anti-modèle

Dès que l’utilisateur a lancé une action et avant d’avoir terminé la tâche, placez immédiatement les icônes d’arrêt critique en regard des zones qui ont besoin de configuration.

Exemple : déclarations du Concepteur de manifestes

L’ajout d’une déclaration à la liste le place immédiatement dans un état d’erreur, qui persiste jusqu’à ce que l’utilisateur définit les propriétés requises.

Dans ce cas, il existe un problème supplémentaire, car l’icône utilisée pour l’alerte contient une icône « × », de sorte que l’icône de suppression commune ne peut pas être utilisée à côté de celle-ci. Par conséquent, l’interface utilisateur utilise un bouton Supprimer, un contrôle plus clunky.

Le placement de l’interface utilisateur dans un état d’erreur par défaut est un anti-modèle Visual Studio.

Autres solutions

Une meilleure solution à ce problème consiste à :

• Autorisez l’utilisateur à ajouter une déclaration sans avertissement, puis déplacez immédiatement pour définir des propriétés sur l’élément.

• Ajoutez l’icône d’avertissement (triangle or) lorsque le focus se déplace de l’élément, par exemple pour ajouter une autre déclaration à la liste ou pour tenter de modifier les onglets dans le concepteur.

• Si l’utilisateur tente de modifier les onglets avant de définir des propriétés sur des déclarations, affichez une boîte de dialogue expliquant que l’application ne générera pas (ou quelles que soient les implications) jusqu’à ce que les avertissements soient résolus. Si l’utilisateur ignore la boîte de dialogue et modifie les onglets de toute façon, une icône (critique ou avertissement, le cas échéant) est ajoutée à l’onglet Déclarations.

Plusieurs clics pour ignorer l’interface utilisateur

Objectifs de l’équipe de fonctionnalités

N’autorisez pas l’utilisateur à ignorer l’interface utilisateur sans voir d’abord le texte d’explication.

Anti-modèle

L’équipe qui insère les liens vidéo dans différents endroits de l’interface utilisateur VS a décidé d’utiliser le modèle commun du bouton de fermeture et de l’info-bulle « × » comme spécifié par l’expérience utilisateur, et a implémenté au lieu de cela un lien déroulant et « Ne plus afficher à nouveau ».

Exemple : Liens vidéo dans Team Explorer

Forcer l’utilisateur à lire du texte explicatif avant d’ignorer l’interface utilisateur est un anti-modèle dans Visual Studio. Correctement conçus, les liens vidéo doivent afficher une info-bulle avec des informations supplémentaires sur le pointage, puis cliquer sur « × » doit ignorer le message sans avoir besoin d’une interaction supplémentaire.

Modèle de lien vidéo incorrect

Au lieu d’un simple bouton fermer (un clic), l’utilisateur est obligé d’utiliser deux clics pour simplement ignorer l’interface utilisateur à chaque endroit où les liens vidéo s’affichent.

La conception correcte de cette situation consiste à suivre le modèle commun à Internet Explorer, Bureau et Visual Studio : au pointage, l’utilisateur peut voir la description de l’info-bulle et un clic masque l’interface utilisateur.

Modèle de lien vidéo correct

Utilisation de barres de commandes pour les paramètres

La figure A représente ce modèle anti-modèle : placer un paramètre sous un bouton de commande qui s’applique à plus que la seule commande. Dans cette croquis, il existe des commandes en plus de démarrer le débogage ( par exemple, Afficher dans le navigateur, Démarrer sans débogage et Pas à pas) qui respectent le paramètre sélectionné.

Figure A : Anti-modèle de barre de commandes

Légèrement mieux, mais toujours indésirable, place les paramètres de ce type dans les barres d’outils, comme illustré dans la figure B. Bien que les boutons fractionnés prennent moins d’espace et sont donc une amélioration sur les listes déroulantes, les deux conceptions utilisent toujours une barre d’outils pour promouvoir quelque chose qui n’est pas vraiment une commande.

Figure B : Mieux, mais toujours une barre de commandes anti-modèle

Dans l’approche correcte indiquée dans la figure C, le paramètre est lié à une série de commandes. Il n’y a pas de paramètre global défini et nous changeons simplement entre quatre commandes. Il s’agit de la seule situation dans laquelle les commandes de la barre d’outils sont acceptables.

Figure C : Utilisation correcte du modèle de barre de commandes Visual Studio

Contrôler les anti-modèles

Certains anti-modèles sont simplement une utilisation incorrecte ou une présentation d’un contrôle ou d’un groupe de contrôles.

Sous-souligné utilisé comme étiquette de groupe, et non comme lien hypertexte

Le texte en surlinage ne doit être utilisé que pour les liens hypertexte.

Mauvais:

Le texte souligné qui n’est pas un lien hypertexte est un anti-modèle Visual Studio.

Bon:

Correctement mis en forme, le texte non hypertexte n’apparaît pas dans la police d’environnement.

Cliquer sur une zone de case activée génère une boîte de dialogue contextuelle

Cliquez sur la zone « Activer le Bureau à distance pour tous les rôles » case activée dans l’Assistant « Publier l’application Windows Azure » affiche immédiatement une boîte de dialogue contextuelle, un anti-modèle Visual Studio. En outre, le champ de zone case activée ne se remplit pas d’une zone de case activée après avoir été sélectionné, un autre anti-modèle d’interaction.

L’affichage d’une boîte de dialogue après avoir cliqué sur une boîte de dialogue case activée est un anti-modèle Visual Studio.

Anti-modèles de lien hypertexte

L’exemple suivant contient deux anti-modèles :

1. Le premier plan activant le pointage rouge signifie que la couleur partagée correcte du service de police n’est pas utilisée.

2. « En savoir plus » n’est pas le texte approprié pour un lien vers une rubrique conceptuelle. L’objectif de l’utilisateur n’est pas d’en savoir plus, c’est de comprendre les ramifications de son choix.

   
   Ignorer le service de couleur et utiliser « En savoir plus » pour les liens hypertexte sont des anti-modèles Visual Studio.

Meilleure solution : Posez la question que l’utilisateur poserait en cliquant sur le lien. Par exemple :

• Comment fonctionnent les services Windows Azure ?

• Quand ai-je besoin d’un projet Windows Azure Mobile Services ?

Utilisation de « Cliquez ici » pour les liens

Les liens hypertexte doivent être auto-descriptifs. Il s’agit d’un anti-modèle à utiliser « Cliquez ici » ou toute variante similaire.

Mauvaise : « Cliquez ici pour obtenir des instructions sur la création d’un projet ».

Bon : « Comment faire créer un projet ? »