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 3 and 6 and type the answer here:
  • Post
  • Brown folders?  Blue folders?  Pink folders?  Rainbow folders?  All this flak...

    How about just making them the same colour as in Windows, then everyone can relax and have a cup of tea...?(!)

  • >How about just making them the same colour as in Windows

    In windows it is not enough dull.

  • The UI is still ugly. With a few exceptions, visually Visual Studio 2010 had it right. Instead of wasting all sorts of time trying to fix the broken icons, why not simply allow users to choose to use those from Visual Studio 2010? Better yet, provide an option to get the VS 2010 look and feel in its entirety back? By ANY measure it's vastly superior.

    Almost everyone I know refuses to use VS 2012 because they find it visually unusable. The few that do use it, despise it.

    Finally, what is the purpose of allowing toolbars to be customized but NOT the icons?

    Please, put your egos aside and LISTEN to your customers. For once. (And, to be honest, until you do this little thing, everything you say about listening to customers is a lie since this is the number one complaint by magnitudes.)

  • Still got the caps menus?  Do you guys need a UI specialist?  It's not hard to tell that having all caps slows down the user response.  It seems like you guys got it right in the past and then forgot about the UI.  At least you are headed back there.  If you need help there are classes that teach the basics.  It is typically measured in ms response time and is already well understood.  Just follow the basics.  Once you get there you still have plenty of room to improve.

    * Make icons distinguishable

    * Used mixed case

    * Use now more than 7 menu items, 6 is preferable.

    * Use space for separation of different ideas.

    I can go on.

  • Live Webinar - Wed, 3rd July 2013 • 12:00 (BST)

    Testhouse Live Webinar in partnership with Microsoft on Visual Studio 2012 New Updates and Features Available Now

    We are focusing on some of the new features of VS2012 such as SharePoint Testing Development, TFS 2012 and will also provide a brief overview of the new "Visual Studio 2013".

    www.microsoft.com/.../visual-studio-events

    Speakers: Peter Shave (Testhouse) Giles Davies (Microsoft)

  • I wonder to what extent the current lack of WinRT apps is caused by the fact that many developers plain and simple hate to use VS2012 because of the design...

  • The main problem is that the core company-wide design principles are UGLY. Very UGLY. Because of this is the Windows Phone, Windows 8, Office 2013, etc. fiasco.

  • Remove the borders! Why are you added these borders to pane windows? They look like detached like waiting to dock somewhere and ugly :( I liked the old style borderless clean UI.

    BTW, Keep this UI as same as VS2012 except the icon changes. I love it.

  • Too far in the other direction. Please return more monochromatic icons to light/dark (content over chrome) and keep colour in any 'coloured themes' like blue. Or like others have said, make it user configurable.

  • Also +1 for revising the borders on the dark theme. Eugh.

  • This is a really sad update. I cannot understand this update. Yes it adds color back but its like taking 100 dollars from someone and then giving 20 dollars back and saying how you helped them out. Honestly, I have no idea where your team is from, but please have them use VS 2012 as a developer and  see how many times they have to stop to understand what the icon is, no offense but adding one color per icon  is silly, my computer supports millions. This is no Tandy 1000. I know you are new  to this team, but just give me my icons back or a button I can press. Hell lets make a  competition. Add a button in that lets the user choose VS 2010 icons or yours and send stats back to HQ.  Whichever version is used more in 2013, then lets go with that.

  • Hi,

    Please download this file:

    ColorThemeEditor-vs2013.vsix

    www.box.com/.../7zt15t3xm5g4wmrh5j8t

    This is patched version of this extension. I only changed target version number. No more changes applied. It will install without an error.

    Plus, I love VS2012 UI colors WITHOUT PANE/WINDOW BORDERS so, this theme for VS2013. This theme will change VS2013 to VS2012 look and feel.

    VS2012.vstheme

    www.box.com/.../6w2w3oq34oe3pf32pr39

  • Continue to my previous message...

    Please note that, while import and create your own theme or even save, it shows an error message. But don't worry. It just works :) Just switch between themes and you will see that it is working.

    This is the only solution until Microsoft create an extension for 2013...

  • "Having a more unified and consistent experience is growing in importance"

    This is very true, but you're making the wrong things consistent.

    Users on a platform want their applications to be consistent with each other, i.e. with the other apps on that platform. You should be making VS consistent with the standard Windows look & feel, and the visual style and colour choices made by the user and respected by well-written software (i.e. very little of what Microsoft have produced lately, sadly).

    You are making the Lotus Notes mistake of thinking users want consistency with apps on different platforms, which they either do not use or are already accustomed to behaving differently. That consistency is not useful.

    This is part of Microsoft's biggest problem at the moment, from Windows, to Visual Studio, and even to the Xbox One: You are confusing what *you* want with what the user wants. You want everyone to adopt all your different platforms and to drive adoption of them by making them seem familiar. We do not want that. It has no value to us, and most of us do not use your other platforms and have no reason to want to use them.

    If you really want Windows desktop applications to be consistent with Windows Phone or tablet/Metro apps, do it properly by introducing a visual style which does just that. If the visual styles/themes system isn't up to the job at the moment, improve it. (The Windows API is a pathetically bad system for drawing UIs in 2013, given it still doesn't even let users choose the colours of things! But you could improve it instead of letting it rot.)

    I don't really have the energy to say much more. There are so many good things happening on the C++ compiler side of Visual Studio, it is such a shame that the UI/UX team continue down this path and continue ignoring feedback. It feels like a lost cause even writing this brief comment, given you still have the all-caps menus by default, which almost everyone who saw them hated. (They are not the biggest problem, but they're the easiest to fix, and they show that you simply are not listening to us, or do not care about what we think. It's pig-headed arrogance, and the only reason we put up with it is that there is no competition, unlike what just happened with the Xbox One where the whole world has jumped ship to a competitor after being insulted by Microsoft's plans & attitude.)

  • Since you have put so much work into theme customization and colors, I'm hoping that the VS 2013 IDE will have the capability to change the color of the window or tab when connected to different projects, or database connections, Git Branches, etc. For example, perhaps someone would want their editor to be red when editing a file in a production bug fix branch.  With SSDT, I would want my query window to be red if it's connection string were pointing to any production databases to prevent any mistakes if I had access to production.  If connected to the development environment, then maybe the window would be green.  Visual feedback help people identify the code they want to flip back and forth between a half dozen open windows would help a lot.

Page 4 of 9 (124 items) «23456»