Designing the Visual Studio 2013 User Experience

Designing the Visual Studio 2013 User Experience

Rate This

As we were beginning the development of Visual Studio 2012, the user experience teams from across Microsoft worked together to align the design of our products and services around a set of core company-wide design principles that each product and service applied to their specific domain. Windows Phone 8, Windows 8, Office 2013, and Visual Studio 2012 were the first wave of releases to reflect these shared principles in their new designs.

Having a more unified and consistent experience is growing in importance as we increasingly interconnect the new device platforms, tools, and services we are introducing this year and beyond.

Visual Studio 2012

The principle that had the greatest impact on the visual design of Visual Studio 2012 is frequently abbreviated as “content before chrome.” Applied to a development tool like Visual Studio, this principle translates to giving the content being created/edited dominant screen real estate and visual prominence.

Driven by this principle, the primary changes made to the visual design of Visual Studio 2012 were:

  • Increased content area by 3 lines of code in most contexts, through reduction of the interface chrome and toolbar real estate
  • All of the icons were redesigned in a simplified, modern style to reduce visual clutter
  • Introduced the Light and Dark themes, which utilize neutral tones to allow the chrome to recede and the content to stand out
  • The Status Bar was colorized, changing color to draw attention to the IDE state

Some of these changes to the user experience have been well received (or go largely unnoticed as a natural part of streamlining existing workflows). However, in some areas, we’ve received feedback that the changes in colors and designs went so far that they negatively impacted productivity and reduced the usability of the product.

Visual Studio 2013

In Visual Studio 2013 we are continuing to remain true to the Microsoft design principles while refining the VS 2012 visual design to address feedback and make improvements.

We have made broad but incremental changes, some of them subtle. Our overall aim is to have VS 2013 feel familiar to VS 2012 users, but better.

The changes are in the four primary areas which are explained and illustrated below.

Theme Chooser and Connected IDE

Starting with Update 2 of Visual Studio 2012 and moving forward, there are three built-in Color themes: Blue, Dark, and Light. Our surveys tell us that there are very strong feelings about the color themes—there is substantial support for all three, with each theme having at least 25% of developers who prefer it.

In Visual Studio 2013, you will be able to choose your preferred color theme when you first launch.

First launch theme chooser

First-launch theme chooser

Working with the new connected IDE feature, the theme that you choose will be stored in the cloud in your Visual Studio account, and will roam to other Visual Studio 2013 machines you use. Of course, you can still change the theme via Tools > Options at any time.

In Visual Studio 2013 each of the three themes is on equal footing. You choose your theme once and then you’ll not need to set it again.

In our surveys of users, when we compare the themes that they prefer to the themes that our data shows they are using, there is a consistent gap—40% to 45% of users are not running the theme that they prefer. Our primary aim with this new experience is to help more people land in the theme that they will be most satisfied with.

Color Theme Enhancements

For the Light and Dark themes we have received feedback about insufficient contrast between areas of the IDE and about difficulty locating the separators between windows.

In Visual Studio 2013 the themes have been revised to address this feedback by increasing contrast in the color palette and with the introduction of more border line work highlighting the edges of content areas.

image

Hover color

image

New border line work

Icon Colors

Based on your feedback, we have systematically added color to a large number of icons to increase their distinguishability and recognizability.

We have followed the icon color system diagrammed below, which uses accent colors in a consistent way while keeping them distinct from the colors used to draw attention to warnings/errors.

The additions to the color system in VS 2013 are primarily to the icons that include folders and to icons for save-related operations.  

image

Icon Color System in Visual Studio 2013 (click to enlarge)

image

Examples of new color icons

Icon Redesigns

Feedback about the icons with rectangular shapes was they were too heavy, causing them to be hard to distinguish from one another. We have addressed this with a systematic redesign of the common square/rectangular icons.

For some families of icons we received feedback that they didn’t properly convey the intended concept, or were too visually similar at a glance to other icons in the product. Many of these icons have been redesigned, most notably the family of icons that are work item-related.

image

Examples of redesigned icons

Summary

Building on the major design changes in Visual Studio 2012, and utilizing the feedback you’ve given us, we are making targeted refinements to the visual design of Visual Studio 2013.

image

Visual Studio 2013 (click to enlarge)

Feedback

Thank you for all of the feedback you provided about Visual Studio 2012.

We encourage you to try the Visual Studio 2013 Preview and then share your feedback. We are committed to continuing to improve the Visual Studio user experience based on your feedback.

There are several convenient ways to provide feedback:

  • If you have questions or comments about this post, please use this blog’s Comments.
  • If you run into something frustrating (or pleasing) while you’re using the VS 2013 Preview, there is a new Send a Smile feedback tool in the upper right of the Title Bar.
  • If there is a specific feature or visual change you would like to see in VS, please use User Voice to propose it (or to vote on it if it has already been proposed).
  • If you run into a bug in the VS 2013 Preview, you can file it via the Visual Studio Connect site.

 

Thanks!

clip_image002

Eric Zocher – Director of Design, Developer Division

Short Bio: Eric has been at Microsoft for seven years. He led the Expression Studio team until last year and then joined the Developer Division’s User Experience team as its director.

Leave a Comment
  • Please add 7 and 2 and type the answer here:
  • Post
  • It STILL sucks!

  • A very little bit better, but still far from VS 2010. Pls add possibility to use old good VS2010 theme and icons. And uppercase menu titles forever?

  • How about this for an idea? Currently things like icons are hard-coded all over the place in various binaries. I managed to replace mine with ones I like through resource editors, but this would have all been easier and a lot less hacky if the various icons Visual Studio used weren't hard-coded into DLLs, e.g.

    Taking all this content out of these binaries and making them separate images that people can more easily go in and edit should help the advanced user who really cares about tailoring his environment while at the same time making it more easy for you guys to go in and make updates. Eliminate the hard-coding and make the whole environment more customizable and I think you'd get a lot less complaints.

  • "[...] this principle translates to giving the content being created/edited dominant screen real estate and visual prominence."

    If this was the driving philosophy starting from VS 2012, which I do like (max space for code), why is the titlebar so freaking fat? It's about twice as high as the standard window title bars I have with all of my other applications. It's a complete screen hog and I'm starting to get tempted to use full screen viewing modes just to eliminate that big fat bar hogging up all my vertical screen space. Full screen mode obviously is going to maximize screen space, but I often want to use VS inside a window and this freaking titlebar takes so much of that space that it's ridiculous.

  • I'm still switching the dark and the light design in VS2012, still not sure, but in the end, why should I care about design when it's my end users who want a nice design, I just need productivity and Usability ! Maybe the 2010 interface was the best interface since the environment was immediately recognizable. I've searched for quite a while for the comment button in 2012 in the toolbar. Admitted he 2012/2013 design looks nicer.

    Just one question, have you asked your designers to stare at the screen for 8 hours while looking at VS2010 and the next day at VS2012/2013 ?

  • Please start listen to developers, otherwise you lost them (like Borland/Inprise/Embarcadero did). The developers use your product every day and so I think they have a big user experience for everyday use. Not directors, managers or development team. You provide a product for customers and so you should carefully evaluate customer's feedback. I stay with VS2010 and if you don't change captions, colors and icons, I'm afraid I skip second main release.

  • BTW, the best user interface of Visual Studio was 2008. I only regretted that it was gray, not blue as office 2003. Since then the UI experience is getting worse :-(. 2010 - no customizable icons, no floating toolbars, completelly ruined toolbar customization experience, a lot of rendering glitches. 2012 - gray, black & white, UPPER CASE, no borders. Thanks to Theme Editor and my own NiceVS something can be done about it, but having VS nice and customizable natively would be much better.

  • Why don't you just return to Visual Studio 2008 or 2010 icons? They were the best. If you listen to the developers you will return to it anyway, so why does it have to be so painful to us all and so long lasting? The styles you are experimenting with since v2012 are unusable and ugly to put it simply.

  • How do I get Dark theme with light editor?

  • same mediocre user interface like VS 2012 but with a little patch. It is a shame that all the functionality of VS is being shadow with this user interface so stupid.

  • microsoft is more loyal to microsoft than to the people actually using microsoft. Who came up with the 2012 design because it certainly wasnt a customer? who decided to continue to flog the dead horse? How many teams of people are working on this crap design? just go back 3 years and use that, and save all those salaries.

  • I find VS2012 and newer apps like that really UGLY! Win3.1 had more color choices. For the most part all I need is a monochrome monitor now days.

  • +1000 for Leo Davidson's post (5 Jul 2013 1:25 AM).  Applications should use standard platform controls so everything is familiar, consistent, accessible, etc.  Then the Windows platform theme should be made sufficiently customizable so every application can have a consistent look that is tailored to the user.

    For example, I find the lack of contrast makes everything harder to use.  The same is true for Windows 8 (in File Explorer, etc.).  The reduction in borders, color differentiation, depth cues (shadows) just makes everything a little harder to use.  With slight improvements to the theme engine, fans of both Metro design and traditional desktop design could be pleased.

  • If you change something, could you please do it with an option to return old behavior? Especially for team explorer and changesets. It is very inconvenient to switch between views in a single window back and forth instead of just open several windows (changesets) or display all in a single tree (several team projects)

    Red status bar is also awful - it is very distracting and annoying.

    Why on earth you decided to make it colored? It was gray for years and noone complained.

  • Does the title bar still not indicate active/inactive window?

Page 6 of 9 (126 items) «45678»