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 4 and type the answer here:
  • Post
  • There seems to be a simple solution to all this, but MS isn't listening - which is really the larger issue here that I feel will ultimately impact MS - but that's another story.  I believe it would be possible to simply allow a user to select the theme they want to use.  Done!  Doesn't matter the default MS decides to have when the product is shipped/installed, let the user change it to 2010 theme or use 2012 theme, etc.  Otherwise, please sell this new VS 2012 with a rope and a chair!

  • Over all I think it looks cleaner, but I still think it needs more color. I find it difficult to pick out certain parts of the solution explorer quickly. For example, folders; they are the same grey color as the surrounding icons and it makes it difficult to quickly focus on them. The human eye has evolved over countless millennium to categorize and organize information based on both shape and color. There is a good book by Stephen Few called Information Dashboard Design that goes into the science of how humans perceive such things as color and it's uses in organizing information.

  • Completely agree on the reviews for the UI being absolutely horrible.  VS2010 was such a huge improvement over 2005 and 2008, but, as manby have said here, this new UI in VS2012 takes us back to the bad days of monochrome screens.  

    A simple screen flip back and forth between VS2010 and VS2012 and you can easily see just how vibrant and easy to find things are in VS2010.  There are gradients, things stand out, and the default dark blue, light blue, and white perfectly align each section and it's incredibly easy to get my mouse to where it needs to be to click on any given item.  

    In VS2012, everything is flat and gray, despite that tiny amount of color added in RC.  It's difficult to find my way around this UI.  Maybe I missed something in the Metro specs, but is there a requirement for everything to be so bland?  A UX team should get involved here. :S

  • In general terms I think the RC changes are constructive improvements over the Beta UI. I must, however, urge you to rethink the ALL CAPS menu system as it's just plain horrible. We don't need a "call to action" for menus, we know where they are and have done for years! That aside, excellent work and I can't wait for it to go into production.

  • PLEASE KEEP THE MENU CAPS.  That way I can launch a complimentary product that turns them back to Title case and charge $9.99 to download it, it looks like I'll have quite a lot of customers.

  • Now if only there was some way you could support both options.  Some sort of design thing where there was some kinda square or circle that you could tick or hit to turn on or off different modes or themes.  Hmm, can't think of anything right now but maybe in the future somebody will invent technology making it possible.

  • "Increasing the Energy"

    Whoever coined this pretentious phrase needs to be fired immediately. You have clearly hired professional designers to come in with bright, new ideas and lingo, but then after application of said ideas you were left with a colossal failure in both usability and appearance. This, coupled with a demented corporate edict to inflict Metro in every way possible, is bringing your products close to ruin. Hey, look, we got negative feedback, so let's "Increase the Energy," why don't we? This reminds me of the IBM commercial where the young designer was so obsessed with the animated fire on the Web site that he didn't notice his customer was both baffled and angry that he fundamentally DIDN'T GET IT and wasn't delivering WHAT THE CUSTOMER WANTED. How much money did you guys just flush down the corporation toilet over this unnecessary change?

    I'm a little amazed that you have your pipsqueak designers go back with our feedback, then coin a hot new phrase, rearrange a few things and STILL LEAVE US WITH A COLOSSAL FAILURE IN BOTH USABILITY AND APPEARANCE!

    Does one arm there know what the other is doing?

    P.S. Visual Basic 6.0 did not use ALL CAPS. It looked pretty good for its time, actually.

  • I am repeating my post from 6/2/12, I figured out why it made no ipmact: I used normal casing.  this is for the guys at MS user expiriance:

    WHAT A WONDERFUL INTERFACE!  COLORS ARE SO CONFUSING, WE HUMANS EVOLVED TO DISTINGUISH MILLIONS OF COLORS BUT EVOLUTION MUST BE DUMB (HEY W. THINKS THE JURY IS STILL OUT) I THINK WHILE AT IT YOU SHOULD REMOVE THAT ENTIRE SILLY SYNTAX COLORING.  ALL THAT GREEN COMMENTS, BLUE KEYWORDS AND LIGHT BLUE KNOWN TYPES ARE SIMPLY CONFUSING AND DISTRACTING! ALL CODE MUST BE BLACK; PREFERABLY ALL UPPER CASE JUST LIKE THE TOOL BOXED IT IS SIMPLY AWESOME.  I STRONGLY SUGGEST YOU DON’T LISTEN TO ALL OF THEM DEVELOPERS WHO URGE YOU TO FIX IT! WHAT DO THEY KNOW?  KEEP UP THE GOOD WORK.

  • You know Microsoft was founded on the premise of focusing on developers and developer tools. Now it seems Microsoft has done a 180 and has become totally consumer oriented to the point of 'consumerizing' its dev products. I must say it's utterly baffling how you can can leave us out to dry like this, especially after how we've championed Microsoft products all these years. I'd bet that if you showed this to Bill G he would say it stinks too. Or if you asked him what he thought of an all grey UI in VS he'd recite his infamous line: "That's the stupidest thing I ever heard". Making a mistake is okay, it's human and we all do it from time to time. But doubling down and staying the course when you realize that mistake, is really just pig headed and plain stupid. I implore you to provide the option for a complete VS 2010 theme before you lose more dev talent to Apple and Google. I can guess what you're thinking: 'VS2012 is a fantastic product and there is no equal, people will just get use to the UI and maybe we might lose a few devs along the way'. Well think again. Now couple this with other things like the apparent death-by-silence of Silverlight (just as one example), and now,,, do you think devs might reconsider their technology choice? We're thinking at least 5 to 10 years out, and we see what seems to be the writing on the wall.

  • Hi im have trouble Installing Visual Studio 2012 RC and visual studio 2011, It starts to where the black screen so up then it says visual studio but after that it dose nothing.i have 2010 installed and i us that, i just wanted to try them out, but i have a question would visual studio 2010 ultimate mess up visual studio 2012 and 2011. thanks

    here is my system info

    Operating Systems

    Windows 7 (x86)

    Architectures

    32-bit (x86)

    Hardware

    3.6 GHz

    2 GB of RAM

    201 GB (NTFS)

    5400 RPM hard drive

    DirectX 9-capable video card running at 1024 x 768

  • This is RETRO not METRO

  • From this page:

    msdn.microsoft.com/.../hh464920.aspx

    "Embrace Metro design style principles

    Use these principles to help guide your design.

    Show pride in craftsmanship

    Devote time and energy to small things that are seen often by many.

    Engineer the experience to be complete and polished at every stage."

    Would you please follow your own guidelines please?

  • There is more. What happened to this?

    "Design with bold, vibrant and crisp colors and images that go beyond the limits of real world material."

  • @Another Poster:  ha ha, that's funny...yeah, it's very easy these days to catch MS being 2-faced.  They spew those design statements, but then they act like they never said it.  Funny....well, hypocrisy really.

  • FAIL

Page 76 of 80 (1,190 items) «7475767778»