Overcoming the New Visual Studio UI

In a blog post last week, Monty Hammontree, the Director of User Experience for Visual Studio, announced the UI refresh for Visual Studio. This is a project that I had some involvement in (mostly as a reviewer) while still at Microsoft, and have been waiting patiently for this announcement so that I could talk about it.

iconRefreshPersonally I love the new UI. Sure, its not perfect, but it is a huge improvement over where Visual Studio has been for the past ten years. What is surprising to me is the amount of negative reaction the blog post has gotten. Some of my favorite comments from the blog post are:

Okay, i get wanting to reduce distraction and “lighten” the UIs feel… but GEEZ! Why do good ideas always get taken too far? This UI is SO bland and SO dead, I’d be afraid of it putting me to sleep on the job as opposed to reducing distractions. ICH! – Aaron – 23 Feb 2012 10:20 AM

Is it a desktop app?  Is it a metro app?  Decide and stop mangling the two UIs together.  The capitalized titles hurt my eyes.  They’re distracting and out of place. – Mike – 23 Feb 2012 10:26 AM

…While I do like introducing simplicity, I won’t be installing this if there is no option to replace these very low contrast lay-outs. And I’m pretty sure other people will don’t want to upgrade to this either, which will cost you some Metro developers in the long term… – Tom Wijsman – 23 Feb 2012 10:31 AM

Windows 3.1 is back? – Andrey – 23 Feb 2012 10:52 AM

The monochromatic color scheme is so bad it is distracting.  Instead of staying out of the way, my eyes are drawn to just how bad it really is…It is so bad and so distracting that a new word should be created to describe how bad and distracting it is…like baddistracting or bastracting.  The monochromatic scheme is bastracting and should be stopped. – jparramore – 23 Feb 2012 11:38 AM

Anyway, you get the point. There is a lot of negative reaction to the new UI. But is the new UI really that bad. Is it possible that it is actually a significant improvement, and we, the develoeprs who use and love Visual Studio, are just not ready to accept change?

A Bit on Metro

The Metro design echoes the visual language of an airport or metro system signage in both its design and typeface. The goal of the Metro design style is to create contextual relevance through content – primarily icons. Icons should be clear and understandable, and leverage real-world metaphors that are familiar to users. They should have simple geometry and limit the amount of fine detail.

Simplicity is the key. Every icon should be as simple as it can be (and no simpler). The primary purpose of the action the icon enables should be clearly and cleanly represented by the icon.

420.xamlLook all around your life and you will find these icons. They are not only on airport and metro signs, they are on your electronics, your clothing tags, and the dashboard of your car. You are so used to seeing Metro style icons, that you have developed an ability to quickly understand instructions and information based on a simple icon.

Metro style’s main goal is to make understanding information and instructions at a glance easy. The challenge is always balancing what you need to know with how much you can consume. For example, look at the laundering instructions on a piece of clothing. There could be 5 or 6 icons there, some of which you may not understand. That is likely because they are not within your domain, or context. I guarantee you that anyone working in a dry cleaning facility understands them all at a glance.

A Good Metro Implementation Focuses on Content

I think of the dashboard of my car, an Audi A6, as a great Metro style implementation. It provides me easy access to the information that I need in context, and easy way to switch context (e.g. between audio entertainment and navigation), and draws my focus and attention to the content that matters (speed, RPMs).


Most command buttons have an easy to understand icon (seat heaters, parking brake, fans, etc.). Some things use text (On/Off, Nav, CD/Aux, etc.) instead of icons. In either case it is easy to quickly infer the meaning and intent of the button. All of the command buttons and interfaces are the same color – white icons and text (redish backlight if its dark) on a black button. Essentially a monochromatic UI that makes finding and using the commands easy, but focuses my attention on the important stuff – warnings and content.

    • Warning information is indicated with a different color than the rest of the UI. For example the “Passenger Air Bag Off” warning and the check engine icon are both yellow.
    • Content that requires my focus and attention is white, such as the speedometer and tachometer, and the navigation screen (which includes a small set of other colors to indicate route, landmarks and warnings).

I can’t imaging how distracting it would be to drive my car if every icon and button were a colorized button. It would make finding and focusing on the important content much more difficult. As it is, I know to focus on the white content, and pay extra attention to any yellow content.
The new Visual Studio UI is attempting to do exactly what my Audi dashboard does. Make it easy for you to find information and commands, but draw your focus and attention to the content that matters most (aka your code).

Resisting Change

The fact of human psychology is that we tend to resist change before we embrace it. This seems to be the tone of many of the comments on Monty’s blog post. Many people are likely going through the stages of grief – Shock, Denial, Anger, Bargaining, Depression, Acceptance.

    Many people seems to be in the first four or five stages.

Shocked by the change.

WO WO WO. Let’s get one thing straight. There had better be a GIANT button in there to “MAKE IT LOOK LIKE IT USE TO.” – Don’t “Windows 8” me! – 27 Feb 2012 3:07 AM

Denying the change.

Why not keep the current GUI? it seems that your vs11 will be the worst design ever… please, see all these post, reconsider your transition… – ammin – 26 Feb 2012 5:15 AM

Anger toward Microsoft for the change.

I assume these god damn awful UI changes are meant to hide the lack of real changes over VS2010? – Steve – 27 Feb 2012 10:56 AM

Bargaining with Microsoft regarding the change.

Folks, we need to organize & mobilize to fight this: talk to your co-workers, give them link to this page, ask them to comment here. – Dee – 25 Feb 2012 9:32 AM

Depressed about the change.

Don’t care.  It is what it is and nothing anyone says here can change that. – Not Anal – 27 Feb 2012 12:12 AM

Its not clear to me that the mass of Visual Studio developers will reach acceptance of the new UI, nor is it clear to me if the bargaining will result in change. I like to believe that both will happen.

The Path Ahead

My opinion is that this is a step in the right direction. Of course, its near impossible to actually tell if its an improvement with out extended usage of the new UI, to see if it improves my productivity or not. This means that for many people there is likely a step of “testing” that must occur prior to acceptance. The testing may be challenging at first because we have to unlearn a few old things in order to learn some new things. Like the Audi dashboard example above, this happens almost anytime you buy a new car as well. Basically things work the same – there is a speedometer and tachometer, although they may be in reverse positions from what you are used to; there is a console for controlling audio, heat and AC and possibly navigation; and there are warning indicators, but possibly different ones, or they are in different positions. Testing the change requires a little patience in order to fully determine if the change is manageable – that is to say, you may not be able to affect the change, but you can determine your acceptance of the change.I encourage everyone to withhold judgment until you’ve had a chance to try the new Visual Studio UI. Once you’ve given it a fair chance, provide actionable feedback to the team via Monty’s blog (e.g. “There had better be a GIANT button in there to “MAKE IT LOOK LIKE IT USE TO.” isn’t really actionable).

As someone who leads product development, I can tell you that there is nothing more important than hearing from customers. It is the challenge of the product development team to determine actionable, real feedback from shock, denial, anger and depression driven feedback. A good product development team will be innovative and creative, and it may not immediately resonate with the customer, but if they’ve done their job right, the customer will accept and embrace the change in the long run, and have a better product experience as a result.

My favorite Henry Ford quote:

If I asked my customers what they want, they simply would have said a faster horse.

Henry Ford went on to introduce a radical change and innovation, that was met with both immediate acceptance and criticism. Can you imagine if that change had not been widely accepted?