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 5 and 1 and type the answer here:
  • Post
  • Not a fan of the brown folder icons... Might be a little better from usability perspective, but the colour just looks out of place.

  • I agree with Evgenii Golubev, the brown folder icons look out of place. Maybe blue folder icons would be a good alternative instead.

  • Not impressive.....!!

  • I'm with the previous two commenters. I know there was a lot of flak that you guys received about the monochrome experience, but the brown folders do look out of place to me. I'd say either keep the current folder icon and possibly tweak the icon itself or pick a different color from brown if you want to bring in color.

  • Looks like things are going in the right direction, in general. Always a thing or two that could be better, but the re-addition of color is a vast improvement over 2012's "grey on grey featuring grey" design.

  • It's still yelling at us, though :(.

  • Agree with the others that the brown looks a bit out of place, but I think it's much better than the old black color. Maybe "just" need to find another shade which harmonizes better / looks a bit friendlier.

  • Just like Evgenii Golubev, the folder icons color is just.. out of place.

  • +1 for @Evgenii Golubev. Folder icon is out of place. New folder icon have now two brown colors.

    The same for save icons in dark theme. Grey icons for that are better in Dark theme and blue theme.

    Also I'm no big fan of border around tool windows. I like VS2012 dark theme.

    But I like new more gentle icons

  • Why not just return normal TrueColor icons (as an option), or enable to load user-defined icons instead of these mockery ones?

  • Why, from all possible colors, you changed color of icons to the color of s..t? Why not standard icon from windows explorer?

  • Nice to see an attempt to improve the icons in the solution view. But I think you be can (and may) be bolder and more consistent.

    Here are some of my ideas:

    * Use the same type of symbol for the same object. Projects and solutions tend to be a rectangle with a thick line on top. A C# project is just a thin rectangle, please whack a thick line on top of it. This makes scanning for projects so much easier.

    * The lighter color of the folder icon is an improvement, at least it is not poking my eye out ;-). But is it possible to replace it with a circle and the special folders (properties/references/ etc.) with a circle merged with their current symbol. This let all folders stand out from the files and makes the reading the name behind it more easy to scan.

    * Reducing the line on the file symbol is nice, but it may be removed completely. Most items in the tree are by nature files, so only a type icon is needed. A good example is the C# file icon. Loosing the rectangle and a lighter color made a big improvement and was applauded by many.

    * If you put them together, you get a nice hierarchy in the tree:

    - A rectangle for projects and solutions

    - A cirlcle for folders on the next lever

    - Plain symbols for all files

    * Another nice touch would be a 20% color difference between the icon and the text. A nice (or bad) example are the *.CSHMTL files, the icon itself is textual. Using the same color for icon and name, makes it a single black line. A lighter color makes it easier to scan for the file part.

    And now we are on topic of the solution view, is it possible to loose the chevron left of the file icons? I have a lot of files and a lot of methods in a single file (they are really short). Keeping a list of methods open, reduces the ease of traversing the tree.

    I would appreciate it if you can convert (or add) is a context menu of the file tab. Maybe next (or as a replacement) to the pin tab icon. This would allow me to select a file and a specific method in one or two clicks. As an added bonus, it will disappear after the navigation. I use the mouse a lot for navigation to a different file (F12 only get you to your current context) and it would make such a difference.

  • I very like the return of coloured icons and the new C++ code formatter, but please more C++11 (at least default and delete functions, and fix the various lacks of the Standard Library, like the chrono not using HPET)..

  • Thanks for the new visual studio

  • zOMG WTF I can't believe what I'm reading...

    GO BACK AND READ THIS - AND THE COMMENTS:

    blogs.msdn.com/.../introducing-the-new-developer-experience.aspx

    That (infamous) blog post was written a year and a half ago (hopefully the guy who wrote it has been fired since).

    It's taken THIS LONG for MS to admit (somewhat) they were wrong (big time). You guys should be ashamed for not listening to your customers. And, for the record, it would be easier to just return the VS2010 icon set (as has been said many many times over already).

    Aaargh.

Page 1 of 8 (115 items) 12345»