.NET Tips and Tricks

Blog archive

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 at 1:16 PM


comments powered by Disqus

Featured

  • Xamarin.Forms 5 Preview Ships Ahead of .NET 6 Transition to MAUI

    Microsoft shipped a pre-release version of Xamarin.Forms 5 ahead of a planned transition to MAUI, which will take over beginning with the release of .NET 6 in November 2021.

  • ML.NET Improves Object Detection

    Microsoft improved the object detection capabilities of its ML.NET machine learning framework for .NET developers, adding the ability to train custom models with Model Builder in Visual Studio.

  • More Improvements for VS Code's New Python Language Server

    Microsoft announced more improvements for the new Python language server for Visual Studio Code, Pylance, specializing in rich type information.

  • Death of the Dev Machine?

    Here's a takeaway from this week's Ignite 2020 event: An advanced Azure cloud portends the death of the traditional, high-powered dev machine packed with computing, memory and storage components.

  • COVID-19 Is Ignite 2020's Elephant in the Room: 'Frankly, It Sucks'

    As in all things of our new reality, there was no escaping the drastic changes in routine caused by the COVID-19 pandemic during Microsoft's big Ignite 2020 developer/IT pro conference, this week shifted to an online-only event after drawing tens of thousands of in-person attendees in years past.

Upcoming Events