Defining a User Interface for Visual Studio with CodeRush
Tools like CodeRush that extend Visual Studio require a different approach to user interface design than other applications. As I noted
in an earlier blog, CodeRush packs a ton of information into the Visual Studio screen. Wondering about how CodeRush makes it work, I asked Mark Miller (chief scientist at DevExpress) about what conclusions Developer Express has come to about UI design. Specifically, I asked about any general principles that Mark could share.
As his answers show, what DevExpress has learned applies to all applications, not just to Visual Studio Add-Ins. As Marks says, "Every UI decision should be intentional and should be justifiable using guidelines to good design. We avoid UI decisions based on whimsy or weak justification."
Mark Miller: Avoid modal dialogs, especially for frequently-accessed functionality. Instead try to flatten your UI; pull it down to the same level as the data. This has the advantage of keeping important data in view and is often a more pleasing experience for the customer.
Consistency is very good. Once a UI convention is established, use it everywhere it makes sense. For example, we use a glowing border to indicate active Fields, active Linked Text, and active references with the Tab to Next Reference feature. If used consistently, UI conventions become a sort of language, effectively communicating information to the customer.
Staying with convention simplifies the cognitive path to understanding (which is a very good thing). For example, our Tab to Next Reference feature uses the Tab key to shift focus among references in the code. This follows the well-established convention of using the Tab key to shift focus among controls in a window, so it makes the experience of using this feature quite enjoyable.
Also, we use well-established visual conventions when appropriate. For example, our preview hints for refactorings uses strikethrough to indicate deleted text and proofreader insertion marks ("^") to indicate where references to the new local variable will be inserted.
Use context to infer customer intent whenever possible. For example, Tab to Next Reference works when the caret is inside an identifier and you press the Tab key. If the caret is at the start or end of a line, then the Tab key simply inserts a tab as expected.
Another example: In CodeRush when the Refactor key is pressed, a short list of available refactorings (out of over 200 possible) appears in the menu. If only one refactoring is available, we can simply apply it.
The answer to the question of availability is the responsibility of each refactoring, but it's all based on context, such as the location of the caret or selection in the code. That also allows us to have one-keystroke access to a great deal of power without overloading the customer with noise (e.g., showing menu items for refactorings that simply don't apply in the given context).
Position relevant details in close proximity to the elements they describe. This reduces the amount of eye movement needed to take it all in. For example, in addition to shipping unit test runner (which is useful for viewing, managing and running tests from a high level), CodeRush places the results of individual unit test runs inside the code, right next to each test method, so it's easy to see if it has passed, failed or is waiting to be run.
Preview hints are very effective. They lower the barrier to first use, showing customers what will happen when they select the active menu item.
Posted by Peter Vogel on 09/30/2010