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 4 and 1 and type the answer here:
  • Post
  • Love the changes, even prettier than vs 2010 now.

  • I am sad to say that our company has decided to not upgrade to VS11 solely based upon the look and feel of the environment. 2010 is a much better looking and much easier environment to work with visually. We have hopes that VS 12 will bring back better usability visually.

  • This is a very drab UI...the title is the same color as the toolbar which is the same color as the menu. The caps on the menu look silly -- at least use a "Small Caps" approach. Very very mono-chromatic.

    You guys may be taking a "coloring content" design approach but you don't have content - you have text. This comes across as a "proof of concept" look - like you didn't have time to make it look slick.

    Microsoft hasn't understood the outcry from the beta on grayness. I mean you guys made the title bar gray after all that?? It's just a lighter gray.

  • okay...microsoft...terrible, terrible move. this is a horrible, horrible interface!!! someone needs to be fired. replaced. slapped. this interface is attacking my eyes.

  • oh, hey! it's the emperors new clothes!

  • Still not enough color in the UI.

  • STUPID!!!!!

  • I think this hole theme looks like garbage, are we aiming for windows 3.1.  The Icons looks like there are disabled, and when they are disabled, it appears like there was a 16bit image there.  For the next version of Visual Studio this is the garbage you guys came up with, we are going back to the Stone Age now. FY, All previous versions looks better than this crap. I loving in Visual Studio, but I strongly believe this Metro Style theme, has a strong resemblance of window 3.1, windows 98 theme looked better.

  • UI is indeed terrible. What is going on over there? Watching too many silent films? You know there are people who have a condition known as eye floaters, some have a few while others may have dozens (floaters are like spots on your glasses that move around, some are connected to others like a spider web). For those with this condition the light theme is totally unusable (dark theme is at least tolerable) as the lack of color and intense use of grey greatly exacerbates the floaters (very distracting to say the least). For example when I look at the grey background of the solution explorer (or any main windows), the floaters are quite noticable. But for whatever reason, a white background isn't as bad (strange but true). I tend to try not to exaggerate but this has to rate amongst the worst UIs I've seen (and I've seen some pretty lame ones in my 30+ years of programming). The VS2010 UI in contrast is quite excellent and most people seem to like it, so why change? For the sake of change? Because you want to be inline with the Metro theme and make people think 'METRO'? Well this is certainly not representative of the Metro theme, not even close. And you do not want people to design UIs into their apps that look like this. I wonder, did anyone really complain about the VS2010 UI? If so how many? 50? 100? 500? Was there a sample pool? Were they mostly programmers? Or did you pick people who don't program and so have no clue what they were looking at, and ask them things like 'so what jumps out at you'? There are literally thousands of folks complaining about this. We need (at least I need) the option of selecting a VS2010 theme, because if I have to use this grey thing I'll have a very difficult time physically focusing (and I've tried to force myself over the past few months).  But it's not just about adding color, but rather the whole concept including the icons and borders (which help to delineate windows) is drabby. Adding a few pixels of color here and there just isn't going to do it or make most happy. Give us the option of a VS2010 theme, complete with the original icons, colors, borders, backgrounds and so on. If it takes extra coding, time and money, then so be it. Your customers deserve it.

  • I just installed the RC and the solutions explorer is still terrible. Most of the icons are still gray with little contrast.

  • I can understand the desire to use metro styling on mobile devices, but hey guys this is a desktop application and should be treated as such and not paint everything with the same bucket. Of course we want more real estate but we also need to maximize our time. The idea is at a glance to see where I am, actions I can take. Guys you can do better

    NO CAPS MENU, this should be obvious!

    Lots more colour, especially on icons so we can differentiate between action at a glance. Also, if all icons are grey, how can I quickly tell disabled actions???

    Colouring the status bar if you're debugging, WHAT? We already know if we're debugging an app, guys let's start using our common sense!

    PS: I also love the way you colour the C# part of the app template icon, hilarious!

  • JUDGING BY THE PATH MICROSOFT HAS CHOSEN, THE NEXT VERSION OF VISUAL STUDIO WILL BE ALL GREEN, A LIGHTER GREEN UI, ON A DARK GREEN MONITOR. THAT WAY WE WILL BE SURE THAT IT'S 1970 ONCE AGAIN.

    THE SIMPLE FACT THAT YOU REINTRODUCED PART OF THE COLORS DEMONSTRATES THAT THE WHOLE IDEA OF GRAY MONOCHROME UI WAS BRAIN DAMAGED FROM FIRST. PROVIDING A COMPROMISE BETWEEN BRAIN DAMAGE AND NORMALITY IS NOT A SOLUTION.

    GET RID OF THE ENTIRE NEW HORRIBLE UI, WITH IT'S MONOCHROMATIC GRAYNESS AND LIFELESS ICONS AND CAPS LOCK!!!

    THE STUBBORNNESS OF KEEPING THE CAPS LOCK LETTERS (BUT MOVING THEM FROM ONE MENU TO ANOTHER) IS THE FINAL PROOF THAT MICROSOFT HAS COMPLETELY LOST IT. THE ENTIRE TEAM RESPONSIBLE FOR THIS MISERABLE UI SHOULD BE KEPT AWAY FROM MICROSOFT GATES.

    PEOPLE SO STUBBORN SHOULD BE MADE PAY A PERSONAL PRICE FOR THEIR PROFESSIONAL FAILURES. EVERYONE FAILS FROM TIME TO TIME, BUT THE SMART ONES ACCEPT THE CORRECTIONS. UNFORTUNATELY THIS IS NOT THE CASE WITH VISUAL STUDIO 2012.

  • Looks much better, but why in the world ALL CAPS for the menus?  What is MS thinking these days?  That's horrible!

  • Mr. Hammontree - Well, just installed RC and it's probably way too late that MS will make any changes before RTM, but I'm EXTREMELY disappointed with this Visual Studio's GUI.  Not sure how else to say it.  This is a desktop app (not a mobile one) and all the color is gone.  There is just not enough to really distinguish icons, etc.  Why would you want to change this?  Too many complaints about it? Just something for you guys to do? Or is one person forcing this down to the developers there?  ALL CAPS MENUS... really?  Is this a new standard that I need to start doing to all my apps? - haven't seen the news release on that one.  Developers are all you have to keep Windows going against the competition out there - don't lose them too!  Hate there to be a huge backlash on this and only then have to wait a few years for the changes to be reverted in a future VS version.  MS continues to surprise and disappoint.  At very least get rid of the ALL CAPS MENUS for production release.

  • I still don't like it.  I don't like that there is very little deliniation between the sections (title, menu, icons, toolbox, etc...).  It would be fine if it was just for reading but this is an interactive piece of software.  Also, I am color blind and this UI is frighteningly boring.  

Page 75 of 80 (1,190 items) «7374757677»