You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/extensibility/ux-guidelines/ux-essentials-for-visual-studio.md
+17-16Lines changed: 17 additions & 16 deletions
Original file line number
Diff line number
Diff line change
@@ -10,6 +10,7 @@ ms.workload:
10
10
- "vssdk"
11
11
---
12
12
# UX Essentials for Visual Studio
13
+
13
14
## Best practices
14
15
15
16
### 1. Be consistent within the Visual Studio environment.
@@ -79,7 +80,8 @@ ms.workload:
79
80
<br />Placing UI in an error state by default is a Visual Studio anti-pattern.
80
81
81
82
#### Alternatives
82
-
A much better solution to this problem would be to:
83
+
84
+
A better solution to this problem is to:
83
85
84
86
- Allow the user to add a declaration without warning and then move immediately to set properties on the item.
85
87
@@ -95,42 +97,41 @@ ms.workload:
95
97
#### Anti-pattern
96
98
The team inserting the video links into various places within the VS UI decided against the common pattern of the "×" close button and tooltip explanation as specified by UX, and instead implemented a drop-down and "Don't show again" link.
97
99
98
-
#### Example: video links in Team Explorer
100
+
#### Example: Video links in Team Explorer
99
101
Forcing the user to read explanatory text before dismissing UI is an anti-pattern within Visual Studio. Correctly designed, video links should display a tooltip with additional information on hover, and clicking the "×" should dismiss the message without need for further interaction.
100
102
101
103
<br />Incorrect video link pattern
102
104
103
-
#### Result
104
-
Instead of a simple close button (one click), the user is forced to use two clicks to simply dismiss the UI in every place that the video links appear.
105
+
Instead of a simple close button (one click), the user is forced to use two clicks to simply dismiss the UI in every place that the video links appear.
105
106
106
-
#### Alternatives
107
-
The correct design for this situation would be to follow the pattern common to Internet Explorer, Office, and Visual Studio: on hover, the user can see the tooltip description and one click hides the UI.
107
+
The correct design for this situation is to follow the pattern common to Internet Explorer, Office, and Visual Studio: on hover, the user can see the tooltip description and one click hides the UI.
108
108
109
109
<br />Correct video link pattern
110
110
111
111
### Using command bars for settings
112
-
**Figure A** represents this anti-pattern: putting a setting underneath a command button that applies to more than just the command. In this sketch, there are commands besides Start Debugging — like View in Browser, Start Without Debugging, and Step Into — that will respect the selected setting.
113
112
114
-
<br />Figure A: Command bar anti-pattern
113
+
**Figure A** represents this anti-pattern: putting a setting underneath a command button that applies to more than just the command. In this sketch, there are commands besides Start Debugging — like View in Browser, Start Without Debugging, and Step Into — that will respect the selected setting.
114
+
115
+
<br />Figure A: Command bar anti-pattern
115
116
116
-
Slightly better, but still undesirable, is putting settings of this type in the toolbars, as shown in **Figure B**. While split buttons take less space and are therefore an improvement over drop-downs, both designs are still using a toolbar to promote something that isn't really a command.
117
+
Slightly better, but still undesirable, is putting settings of this type in the toolbars, as shown in **Figure B**. While split buttons take less space and are therefore an improvement over drop-downs, both designs are still using a toolbar to promote something that isn't really a command.
117
118
118
-
<br />Figure B: Better, but still a command bar anti-pattern
119
+
<br />Figure B: Better, but still a command bar anti-pattern
119
120
120
-
In the correct approach shown in **Figure C**, the setting is tied to a series of commands. There is no global setting being set and we're just switching between four commands. This is the only situation in which commands in the toolbar are acceptable.
121
+
In the correct approach shown in **Figure C**, the setting is tied to a series of commands. There is no global setting being set and we're just switching between four commands. This is the only situation in which commands in the toolbar are acceptable.
121
122
122
-
<br />Figure C: Correct use of Visual Studio command bar pattern
123
+
<br />Figure C: Correct use of Visual Studio command bar pattern
123
124
124
125
### Control anti-patterns
125
126
Some anti-patterns are simply incorrect usage or presentation of a control or group of controls.
126
127
127
128
#### Underlining used as a group label, not a hyperlink
128
129
Underlining text should be used only for hyperlinks.
129
130
130
-
**Bad:**
131
+
**Bad:**\
131
132
<br />Underlined text that is not a hyperlink is a Visual Studio anti-pattern.
132
133
133
-
**Good:**
134
+
**Good:**\
134
135
<br />Styled correctly, non-hyperlink text appears unadorned in the environment font.
135
136
136
137
#### Clicking on a check box results in a pop-up dialog
@@ -139,15 +140,15 @@ Forcing the user to read explanatory text before dismissing UI is an anti-patter
139
140
<br />Bringing up a dialog after clicking a check box is a Visual Studio anti-pattern.
140
141
141
142
### Hyperlink anti-patterns
142
-
The following example contains two anti-patterns.
143
+
The following example contains two anti-patterns:
143
144
144
145
1. The foreground turning red on hover means that the correct shared color from the font service is not being used.
145
146
146
147
2. "Learn more" is not the appropriate text for a link to a conceptual topic. The user's goal is not to learn more, it is to understand the ramifications of their choice.
147
148
148
149
<br />Ignoring the color service and using "Learn more" for hyperlinks are Visual Studio anti-patterns.
149
150
150
-
**Better solution:** Pose the question the user would be asking by clicking the link.
151
+
**Better solution:** Pose the question the user would be asking by clicking the link. For example:
0 commit comments