Visual Studio 11 User Interface Updates Coming in RC

Visual Studio 11 User Interface Updates Coming in RC

Rate This

With the release of Visual Studio 11 Beta back in February of this year, we introduced changes to the user experience based on two core design principles, the first being to give you more space for your content and the second being to draw more focus to that content. Since the debut of these changes there’s been significant community response and feedback. We’ve taken this feedback and based on what we heard have made a number of changes planned for Visual Studio 11 RC. I want to thank you for your continued feedback through this blog, and also through the various other community channels - please keep it coming.

The purpose of this post is to provide you with an update on the changes we’ve made since beta. I’ve also included a brief summary of the beta feedback that we’ve leveraged in making these updates.

Beta Feedback

We have been fortunate in getting a lot of actionable user feedback relating to the Visual Studio 11 Beta release. In sorting through the feedback we found it to be primarily focused on three aspects of the new themes.

  • An overall desire for more visual “energy” and contrast
  • Calls for a more balanced application of Metro styling
  • A desire for greater icon clarity and differentiation through the use of color

Here is a quick glimpse at the changes we’ve made from beta to RC in keeping with what we heard from you. Each of the changes reflected in these screenshots is called out in detail within the remainder of this post.

Visual Studio 11 Beta

Visual Studio 11 RC

Increasing the Energy

For beta there has been a lot of feedback on the overall grayness of the experience. We heard your call for greater vitality in the user experience and have taken steps to both lighten and brighten the experience through the use of bolder theme accents and lighter background colors.

There are three main aspects of the design where we have increased the “energy” level of the Visual Studio 11 themes. The first is to lighten the grays used in the Visual Studio 11 light theme and window chrome to improve both the energy level and readability of the experience.

Visual Studio 11

Visual Studio 11

The second is to colorize the Status Bar. We are using the status bar color to add visual interest and functional value by communicating various IDE state changes such as when the IDE is in debug mode.

Visual Studio 11

Visual Studio 11

The third way in which we will be adding greater flavor to the themes in general is to make broader and slightly bolder use of our accent colors in areas like tool window headers and tab treatments.

Visual Studio 11

Visual Studio 11

Control Styling

The feedback relating to the fit of Metro style elements in the new experience has fallen into three main buckets. The use of all caps for tool window titling is an area where we’ve heard your concerns. In line with our overall design principles for the release we’ve made lightweight changes that give structure and emphasis to screen areas like tool window title bars, auto-hidden tabs, tab groups, and separators that doesn’t require uppercasing the titles. As is reflected in the screenshots below we’ve removed all caps for tool window titles, auto-hidden tabs, and tab group members.

Visual Studio 11

For RC the only UI area where we will be using All Caps titling is for top level menu titles.

Visual Studio 11

Another area of requested change relating to user interface controls/chrome has been for us to improve the overall sense of Metro styling within the themes by drawing our own window chrome. By drawing our own window chrome we have succeeded in both making more efficient use of space and in increasing the overall sense of Metro styling.

Visual Studio 11

The custom chrome and line work changes we’ve made together with reducing the number of default toolbars and toolbar icons combine to give you three extra visible lines of code in the editor compared to Visual Studio 10. As I noted at the beginning of the post the overall objective behind many of the Visual Studio 11 theme changes is to give you maximum real-estate for, and ability to focus on, your code.

Visual Studio 11

A final area highlighted within your feedback was the desire to see us theme scrollbars and other UI elements so that they have a stronger Metro style feel. We are continuing to look into these requests and will keep you posted if there will be any additional modifications or updates.

Addressing Icon Usability Concerns

From Visual Studio 11 Beta we heard a lot of concern about the removal of color from icons negatively affecting product usability, specifically where color icons helped quickly distinguish between similar items. We have addressed this concern by systematically adding color back to select commands, IntelliSense, and Solution hierarchy icons.

Post-beta we have employed a simple rule set that combines icon selection heuristics for common actions and content conventions with a basic five color palette. When taken in conjunction with the flatter and simpler glyph style shapes of our Visual Studio 11 icons these rules give us a recipe for applying color in a very straightforward and consistent manner.

The first area where we’ve systematically reintroduced color into the icons is to add color to common action types (e.g. create/new, add/remove, start/stop, search, move/direction/connect). This helps add greater distinction to common action icons and in turn helps to breakup or chunk menus and toolbars into smaller more scan-able subgroups.

Visual Studio 11

The second area where we’ve reintroduced color in icons is the Solution Explorer. Feedback from users, instrumentation data, and observational research all tell us that next to your content (i.e., the editor), the Solution Explorer is where you spend the most time. The desire for us to use color to differentiate icons within the Solution Explorer was a key point of emphasis within the beta feedback. We have reintroduced color selectively to be an aid that helps you quickly scan/differentiate one type of item from the next. We anticipate continuing to add and refine the use of color to this class of icons in Visual Studio 11.

Visual Studio 11 Solution Explorer

A third area where we have reintroduced color to icons is to promote familiarity and differentiation within IntelliSense. The Beta feedback pointed out that using IntelliSense icons to guide selection happens both with minimal reflection and very frequently. For RC we have reintroduced familiar IntelliSense color cues to aid you in quickly getting back to your current efficiency levels and beyond.

Visual Studio 11

In addition to the feedback regarding icon color we also received feedback that within the light theme the icons did not appear clear or crisp due to subtle outline that appeared around them. The outline exists to allow the same icon to work in the light, dark, or high contrast themes. Words like fuzzy were sometimes used to describe the fact that the outline around the icons and the light gray fill color within certain icons was visible within the light theme. This resulted in a lack of crispness and impacted icon discernibility. To address this we have adjusted the grays within the icons to eliminate any fuzziness or halo effect that existed within the Beta.

Visual Studio 11

In addition to the above mentioned changes we will continue to evaluate the most critical and commonly used icons that the community identifies as needing to be more discernible. We welcome your feedback on this area, so please send any comments our way.

Bringing it All Together

As noted above the changes we’re introducing post-beta are designed to both address core areas of Beta feedback and to maintain alignment with our primary design objectives for the release. While I’ve talked about these changes primarily within the context of the lighter theme we are verifying that all changes also work well with the dark theme.

Now, I’m hoping you are all enthusiastic in wanting to share your feedback on these changes and if you feel these updates are ultimately steps in the right direction. We are eager to get these changes into your hands with RC. When RC is available please download the release, keep the comments coming, and let us know what you think.

Monty HammontreeMonty Hammontree – Director of User Experience, Microsoft Developer Tools Division
Short Bio: Monty has been at Microsoft for ten years focusing primarily on developer tool experiences. He and his team provide product design and user research direction for the Visual Studio product family. He has 25 years of industry experience in product design and user research management.

Leave a Comment
  • Please add 2 and 5 and type the answer here:
  • Post
  • That status bar... It's horrendous. I love the UI for the most part, but you have this very subtle UI and then this major burst of color, all across the bottom of the UI that's constantly staring at you. Way to intense, and the only thing it changes for are status changes that you should probably be aware of anyway.

    I'd rather have it off and guess when a status update occurs than to have it there all the time, and have it change color when I compile. Please, please at least give an option for a nice plain, white or black status bar.

  • The UI is awful and greatly hampers productivity - it's hard to find stuff! Don't take my word for it, go here and see the thousands upon thousands (over 9,000 votes and comments) who agree it's terrible and it's just unacceptable. We want a COMPLETE VS2010 theme option.

    visualstudio.uservoice.com/.../2623017-add-some-color-to-visual-studio-11

    visualstudio.uservoice.com/.../2819619-leave-vs-2010-theme-and-the-theme-editor-extensio

    Thanks.

  • I agree with ITMAGE,  this really needs a lot of work.  The boxes where you are supposed to type into are faded so you can't see the boundaries.  

    Drag and drop into VS does not seem to work at all.

    VS crashes for me when trying to open from a .cpp file.  

    I loved the UI in the previous versions of VS, but this is a major step backward.

  • absolutely no taking into account the tremendous amount of feedbacks shouting that the new UI is ugly, quasi monochrome and contra-productive. Monty and all that team of stupid designer, i really hate you now. thank you for making an environment so ugly that I just want to stop working and go enjoying the sun at the beach.

  • WHY ARE THE MENUS AND HEADERS SCREEMING AT ME? I'M SORRY I WROTE BAD CODE!! I'LL DO BETTER NEXT TIME!

  • Apparently this thing is going RTM on 15 Aug. I wonder if there will be a VS2010 theme option? My guess though from the silence, is NO there won't be. I certainly hope I'm wrong. You know people might say, 'You know Tom it's silly to decide to migrate your enterprise organization to VS2012 based on the UI', but guess what? It makes perfect sense. I need to keep our many developers happy, and thus far it seems they ALL dislike the current VS20102RC UI. So why exactly would I thrust this upon them? Why? At some point we may need to begin to support 4.5, but as it stands now we're just happy with a mix of 2.0 and 3.5. And since we're a business with LOB apps, we have zero desire to write anything even remotely metro at this time. So the traditional desktop is our target as well as not upgrading to Win8 anytime in the forseeable future (btw what's the big deal with giving people a start button? Really?). In my 30+ years of working with the Microsoft stack, I never for once though of moving to a competitor,,, until now. Too many changes, too fast, and for all the wrong reasons. Change for the sake of change is just ignorant. I understand the desire to compete in the tablet/phone arena, I really do. But this is not the way. Microsoft has ALWAYS been about choice, otherwise we would be with Apple. Now what distinguishes you?

  • In a certain sense I'm happy to see that so much people share my thought about the ugliness and ineffience of this new UI. What makes me really mad, sad and angry is that I feel that the only use of those comments is to reconfort us about the fact that we are not alone, but in fact it really seems that microsoft guys have filters that just let them ignore all those comments. And they even thank us for our precious feedbacks. I won't do the work of doing the next image, because I loose already so much precious time trying the RC.... So just close your eyes and imagine the full london subway map in monchrome... all lines grey! ... welcome in the metro as seen by microsoft ( which by the way will change name as it seems they have legal problems with the German Metro Company). Now the difference between the London Subway monochrome map and VS2012 is that in Vs2012 there would be hundreds of line that you can follow.... all in grey. Hope your imagination can figure out to use such a map out. Thank you Microsoft. I' m working in an university and have always took your defense against all those linux.java.php guys.... I will lost all my arguments now and I feel thay will laugh at me telling me that I should have lsiten to them and never have trusted Microsoft :-(

  • VS 2010 is a lot better, I wonder why did they change the VS10 look and feel.

  • Moises my guess is a combination of three things: 1) Trying to get people to like the 'metro' ui look so that there can be more sales of tablets/phones, 2) They hired a bunch of design/marketing people who are trying to prove their worth and don't actually use the thing, 3) Change for the sake of change.

    It's sad really,,, Microsoft did such a fantastic job with VS by gradually improving it over the years until it reached a near state of perfection: VS2010. Now they threw all that hard work away and have a totally cruddy looking interface. It should not be marketing that drives a 'development/engineering' product, but rather programmers and engineers. Look at Autocad or Multisim, they're tools used by engineers, and yes, they're a bit complicated. But guess what? The people who use them are complicated and need to be! Engineers, programmers, architects, scientists, mathematicans etc, are not the average every day folks. They are usually introverted (e.g. INTJ), complusive, picky, finicky and complicated, and it's exactly THOSE qualities which make them so very good at what they do. So changing this interface (w/o the option to keep things as they were - i.e VS2010 theme) is a terribly bad thing to do and will upset people greatly - I'm upset, and I rarely care about such things. I've been writing software and designing circuits for over 30+ years and in that time I have never commented as much as I'm commenting now, but this UI being forced upon us is just reprehensible and scrapes the bottom of th barrel. I can't imagine that the people in the VS team actually like this beast and I'll bet they're probably just as upset as we are.

  • Just why did you remove those colors ??

  • CAPS IS FINALLY WAY COOL AGAIN. YOU CAN"T IMAGINE HOW LONG I HAVE BEEN WAITING FOR THIS.  HI  EVERYONE, LOOKING FORWARD TO TALK TO YOU ABOUT THIS NEW VERSION !

  • DONT LISTEN TO THOSE CAPS HATERS. I LOVE THEM. I HAVE BEEN USING ONLY CAPS SINCE I STARTED COMPUTERS, AND NO ONE EVER COMPLAINED. OWN IT !

  • Looks retarded, like metro.

    anyone not a deluded microsoft fan will be sticking with 2010

  • You must be joking.

    I've downloaded the RTM and it sucks. Honestly.

    Who the hell designed it? Do you think that adding some green or blue could give more usability on the product?

    DID YOU EVER USE A DEVELOPMENT ENVIRONMENT????

    That metro crap is only marketing bullshit that impairs effective and productive usage.

    I've uninstalled it and switched back to VS2010.

    I'll install it again once you'll provide a vs2010 theme that restores full colors to all icons.

    Meanwhile I will not bother at all with metro development and I'll discourage other developers from doing it.

  • If you listen to some you would think MS never listens because they haven't catered to their specific needs.  I think the grownups in the room can take the emotion out of it and realize that there are many improvements in 2012 that make it worth using even with the current UI.

Page 77 of 80 (1,190 items) «7576777879»