The official source of product insight from the Visual Studio Engineering Team
UPDATE: We hear you. There’s a lot of excitement about this release and a lot of passion about colors, designs, styles and icons. Know that we are listening to all your comments here, across social media and we are working hard to make Visual Studio 11 a fast, powerful and feature-rich product. Keep the comments coming, both good and bad. We are reading them all.
In this blog post (and the one that will follow) we’d like to introduce a few of the broad reaching experience improvements that we’ve delivered in Visual Studio 11. We’ve worked hard on them over the last two years and believe that they will significantly improve the experience that you will have with Visual Studio.
We know that developers often spend more of their time than they would like orienting themselves to the project and tools they are working with and, in some cases, only about 15% of their time actually writing new code. This is based on observations we’ve made in our research labs and observations that other independent researchers have made (for example, take a look at this paper). Obviously you need to spend some time orienting yourself to your code and tools, but wouldn’t it be good to spend more time adding new value to your applications? In Visual Studio 11 we’ve focused on giving you back more time by streamlining your development experience. Through thoughtful reduction in user interface complexity, and by the introduction of new experience patterns that simplify common workflows, we’ve targeted what we observed to be three major hurdles to developer efficiency.
The problem areas we targeted are:
In the remainder of this post we’ll describe in a lot more detail how we have given you more time to focus on adding value to your applications by reducing UI complexity in VS 11. In tomorrow’s post we’ll go into details regarding the new experience patterns we’ve introduced to simplify many of your common development workflows. The overall effect of the changes we’ve introduced is that Visual Studio 11 demands less of your focus, and instead allows you to focus far more on your code and the value that you can add to your applications.
Developers have repeatedly and passionately shared with us the degree to which tool overload is negatively impacting their ability to focus on their work. The effort to address these challenges began during development of VS 2010 and continues in VS 11 today. In VS 2010 we focused on putting in place the engineering infrastructure to enable us to have fine grained control over the look and feel of Visual Studio.
With this as the backdrop we set out in Visual Studio 11 to attack the tool overload challenge through thoughtful yet aggressive reduction in the following areas:
Toolbars are a prominent area where unnecessary command placements compete for valuable screen real-estate and user attention. In VS 11 we thoughtfully, based on user instrumentation data, but aggressively reduced toolbar command placements throughout the product by an average of 35%.When you open Visual Studio 11 for the first time you’ll notice that there are far fewer toolbar commands displayed by default. These commands haven’t been removed completely; we’ve just removed the toolbar placements for these commands. For example, the cut, copy and paste toolbar commands have been removed since we know from our instrumentation data that the majority of developers use the keyboard shortcuts for these commands. So, rather than have them take up space in the UI, we removed them from the toolbar.
The default toolbars in VS 2010
The default toolbars in VS 11
Feedback relating to the command placement reductions has been overwhelmingly positive. Developers have shared stories with us of discovering what they perceive to be new valuable features that are in fact pre-existing features that have only now gained their attention following the reductions. For example, during usability studies with the new toolbar settings, many users have noticed the Navigate Forward and Backward buttons and have assumed that this was new functionality added to the product when in fact this capability has been in the product for a number of releases.
Allowing for the use of color within content to take center stage is increasing in importance as developers target Metro style clients such as Xbox, Windows Phone 7, and Windows 8. In targeting these platforms developers are creating user experiences that involve the use of bolder and more vibrant colors. These color palettes showcase much more effectively in a more monochromatic tool setting.
In VS 11 we have eliminated the use of color within tools except in cases where color is used for notification or status change purposes. Consequently, the UI within VS 11 now competes far less with the developer’s content. Additionally, notifications and status changes now draw user attention much more readily than before.
Strong use of color in VS 2010
Reduced use of color in VS 11 focuses attention on the content
To do a great job of supporting the wide range of environments that you may work in and the wide range of content you may work with, we’ve provided two color schemes, each designed to allow your content to best take center stage. You can choose between a light shell and editor combination or a dark shell and editor combination from within Visual Studio Tools Options. You can still customize your editor settings in the same way that you are used to from previous versions of Visual Studio and load any profile changes you may have previously made.
The light color theme in VS 11
The dark theme in VS 11
In previous versions of Visual Studio we made use of boxes, separators, bevels, gradients, and shadows to create user interface structure and emphasis. One unintended consequence was that the combined effect of this ‘line work’ drew attention away from developer content. In VS 11 we removed as much structural line work as possible. We transitioned to typography and whitespace as our primary techniques for creating structure and emphasis. This transition together with the toolbar reductions outlined above resulted in the recovery of 42 pixels of vertical screen real estate. In the case of a developer editing code this equates to between 2 and 3 extra lines of code being in view at any point in time.
An example of the use of lines and gradients to add UI structure and emphasis
Removing lines and gradients and using whitespace and typography to add UI structure and emphasis
In addition to reducing structural line work we have reduced and simplified the artwork used within the iconography of VS 11. In this blog post we refer to icons following this simplified iconographic style as glyphs.
In VS 11 we have transitioned to glyph style iconography throughout the product. While we understand that opinions on this new style of iconography may vary, an icon recognition study conducted with 76 participants, 40 existing and 36 new VS users, showed no negative effect in icon recognition rates for either group due to the glyph style transition. In the case of the new VS users they were able to successfully identify the new VS 11 icons faster than the VS 2010 icons (i.e., given a command, users were faster at pointing to the icon representing that command). In this and subsequent studies more developers have expressed a preference for the glyph style icons over the former style, especially after having spent time getting used to the new glyph style icons.
Pictographic icons from VS 2010 on the top row with the equivalent VS 11 glyphs on the bottom row
Through reductions in toolbar command placements, line work, iconography, and color usage, VS 11 manages to simultaneously devote more space to content while at the same time engendering the impression that VS is lighter and less complex. In two recent extended usage studies developers indicated that these changes make VS feel both cleaner and simpler.
We designed Visual Studio 11 with a broader client and web based tool context in mind. In this release Visual Studio, Expression Blend, Team Foundation Service Preview, and additional supporting tools share common visual language elements such as iconography. Many design elements are shared or designed to be synergistic with other Microsoft offerings such as the new Windows Store for Developers.
Given the complexity of today’s software development tools and solutions, thoughtful reduction needs to be complemented by other complexity management strategies such as contextual search. There are many situations where search is an obvious strategy to pursue in order to bypass mounting complexity. One such situation is the time it takes to browse for desired tool functionality within menus, toolbars, and configuration dialogs. Another is trying to find targets of interest within tool windows such as toolboxes, property grids, file explorers, etc. Yet another is trying to find targets of interest within lengthy code files.
In each of these cases, the ideal experience would be one in which developers can locate targets of interest with minimal disruption to their overall task flow. We accomplish this in VS 11 by integrating search in a more contextual manner and providing a more optimal experience through both the keyboard and the mouse. In doing so, we’ve enabled developers to bypass complexity while fostering rather than disrupting core task flow.
In VS 11, we focused on task flow friendly search in the following areas:
With Quick Launch, developers are able to search through the entire catalog of commands in VS 11, as well as configurations options within Tools -> Options. While our reduction efforts have made it easier to find frequently used commands on the toolbar, search gives developers immediate access to any command within VS – even if they don’t know the exact full name of the command or its location.
Instead of being forced to manipulate the menus to find the command, search allows developers to focus on the content, and find the command that they want. This allows them to stay in the zone while they work on their task. Of course, when developers know where a command exists, the menus continue to work well for command access.
Recognizing that a developer’s hands are often on the keyboard at the very point when they need to search for a command, we optimized Quick Launch for keyboard usage in two ways. First, we assigned a simple keyboard shortcut to Quick Launch (Ctrl + Q). This allows the developer to quickly call up the search command without having to take their hands off the keyboard. Once a search has been executed, search results can be explored using the up/down arrow keys and a selection can be made by pressing Enter.
Secondly, we designed the Quick Launch results to educate developers as they browse the results. In the case of commands, if a particular command has a shortcut, the shortcut is listed next to the command along with the location of the command within the menu-bar. If desired, developers can pick up the shortcut and use it the next time they need the command, bypassing Quick Launch all together.
In the case of configuration options each result lists the popular options on that particular page, along with a summary description. This makes it much easier to choose between different results prior to choosing one.
All told, Quick Launch takes the often tedious task of browsing for commands and configuration options and streamlines it dramatically. The net result is that developers are able to get the command or configuration option they need quickly and get back to the core task at hand.
Quick Launch showing the results of a search for find
Another source of tool or content overload within today’s IDEs stems from trying to find targets of interest within tool windows such as toolboxes, error lists, file explorers, etc. As with commands, browsing through long lists within such tool windows disrupts the fast and fluid experience that developers crave.
In VS 11 we identified a number of tool windows that would benefit from contextualized search and prioritized them based on usage scenarios, feedback requesting search capabilities and the engineering costs of updating the UI of each appropriate tool window. Based on this prioritization we incorporated search into the following tool windows:
The toolbox, error list and solution explorer are now searchable, along with a number of other tool windows
Solution Explorer and Team Explorer are two areas where we anticipate search to have the greatest impact. With the Solution Explorer, search enables developers to quickly find a known piece of code, and then use it to browse relationships (we describe this in more detail in our post about simplification). With the Team Explorer, work items can be found quickly without having to craft a query before-hand.
Since practically every developer takes advantage of the Solution Explorer, we focused our keyboard enhancements on the search experience within that tool window as well. Search within the Solution Explorer can be activated at any time using Ctrl + ;. As with Quick Launch, developers can seamlessly arrow up and down through their results list.
In VS 11 we have also enhanced the experience of searching within files. Past versions of VS had multiple ways to search within files, each having capabilities that overlapped with the others.
In line with our overall emphasis on thoughtful reduction, we improved the user experience by consolidating features from multiple tool windows into one holistic experience. We consolidated two disparate feature areas – Incremental Search and Quick Find – and created a find UI at the top of the file to allow developers to navigate through search results while keeping their focus on the content (for more screenshots and video clips of search integrated into Visual Studio, see this blog post). Such an experience enables developers to focus on their content while performing potentially complex searches through that content.
The developer has performed a search for the term paint within the currently open file (PaintCanvas.cs)
Through reductions in toolbar command placements, line work, iconography, and color usage Visual Studio 11 manages to simultaneously devote more space to your content while at the same time engendering the impression that VS feels lighter and less complex. Furthermore, by integrating search in a more contextual manner throughout Visual Studio 11 and by emphasizing flow inducing interaction techniques such as keyboard invocation and navigation we’ve better enabled you to bypass complexity while fostering rather than disrupting your workflow. We’re looking forward to hearing your feedback relative to our work in these areas.
Monty 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.
Dear developers: you are not designers. Microsoft has obviously put much study and design behind this (did you read the article? They did many studies) just like all of their new platforms like Windows Phone. So they have a lot of logic and reason to back up these changes.
I think it looks great and I love the idea of removing distraction and focusing on content.
I am one for even less distraction - I would love to see even less tabs and icons (similar to Office 15). And why not use the window title bar area like Chrome uses it for tabs? That is completely wasted space :)
Looking fantastic though.
I think the scroll bars are the least used element in the IDE. It would be nice if they were displayed like on the phones with only a few pixels in width. This would keep them out of the way, unless you need them. Then you could simply mouse over them and display a larger scroll bar similar to what we have currently. Also, what would be nice is to have the ability to switch between layouts with hot keys. There are several things I do which use only a few tools but are there all the time because it is too much effort to hide/show/rearange all the time. Just having them hidden from view is not sufficient. I'm constantly pinning and unpinning tabs depending on the development mode i'm currently in (e.g. debugging while not actively running the debugger, code navigation while learning, writing code). This experiance could be much better.
The search features are great, but I am not a fan of the rest.
The inactive tabs have no borders at all and all-caps labels, which is a usability problem.
Where two inactive tabs are next to each other (something you maybe tried to avoid in the screenshots? :) but it is there in some) it is quite hard to tell where one tab ends and the next begins as a result.
Also, making the tab labels all-caps really does not help with vertical text, which is difficult enough to read without removing the extra visual cues that mixed-case text has.
I am not sure why you hate lines and borders quite so much. The result looks like a DOS app from the days before UIs could draw individual pixels. There were too many lines and borders in previous versions of Visual Studio but I think this new UI is seriously over-compensating. Now we have everything floating in a sea of solid gray, some elements difficult to tell apart from each other, and solid background rectangles which just sit next to each other without even a thin/subtle border around them, which personally I find very ugly (but I guess that is subjective).
You talk about, effectively, making Visual Studio's UI dull so that we can focus on the UIs we are building inside VS, but you seem to forget that Visual Studio itself is a UI that we are using. VS is not just an app for making other apps; some of us spend our entire lives in this program. Most of the time I am looking at code, not at UIs. The VS UI is not distracting me from anything; the VS UI *is* what I am paying attention to.
If there really is an issue with the VS UI distracting people from the UIs they are building inside it, maybe have the option to make VS change themes while a UI designer is open. Make it gray all the time by default if you want, of course, but please recognise that not everyone wants that all the time.
(Speaking of which: Something that would be *incredibly useful* is if the IDE's background color, or some other conspicuous element, could be configured to change while the debugger is active. I've lost count of the times I've accidentally closed all my "unwanted" debug tool windows, or been confused about why I can't build over my old EXEs, because I left the IDE in debug mode and forgot about it. I then have to re-open all the debug windows. If the IDE could change colors or something while debugging then it'd make the different modes obvious.)
((Speaking of which, it'd be really handy if we could save and load window/tool layouts, so we could close all the clutter when we don't want it, but easily get it back when we do.))
I was not a fan of the garish gold etc. from VS2010, but making everything gray isn't the answer either. And making the icons monochromatic is quite unhelpful as the color helped identify them.
Would it be that crazy for Visual Studio to actually respect the system-wide color configuration and visual styles? If I wanted gray windows, I would configure the OS that way. Provide overrides if you want but at least look like a standard app and respect the user's settings by default. What sort of example are you setting for other apps here? If every app looked like this, completely non-standard and dull, it'd put me off using Windows itself.
People are complaining that the scrollbars are out-of-place; I feel the opposite: The scrollbars are one of the few 'correct' things in the interface and it's everything else that looks out of place, especially when next to the other apps/windows that it will co-exist with on my desktop.
Color differentiation in a command/icon heavy app like VS11 is important to quickly locating something. Now I'm a giant command line/terminal/powershell user with things like vim and I close every single toolbar, but I know MANY MANY people who are going to be searching for the subtle difference in icon shape for hours.
Shape, location AND COLOR used to be tools for locating commands. Now it's ONLY shape and location. Not good.
I find the new UI to be very distracting. All of Visual Studio looks like it's currently disabled. The difference between a disabled and enabled icon is completely indistinguishable to me.
Also when you put the drab gray UI up next to a richly colored XML document it just looks completely out of place. It's like going into a house with gray walls and black ceilings then turning the corner and seeing a rainbow coffee table in the middle.
I also don't understand the rationale for using all cap letters. All caps are synonymous with shouting to the vast majority of developers. It's very distracting to see "SOLUTION EXPLORER", "DATA SOURCES", etc ... Why is Visual Studio yelling at me?
The loss of chrome and icon color is ridiculous. You've just remove a ton of bits used by our ever scanning eyes to identify UI elements. The monochromatic themes (like in Eclipse) make it more difficult for discovery. Please drop the academic nature of you analysis and be more practical. At least provide the option to restore the chrome and icon color rather than assuming that your ideals are best for all of us.
in one line 2010 theme is much better than the new one from visibility point of view. new one is very dull and hard to figure out things.
A very well layed out article. I love the new search mechanisms. Thanks for that.
Now for the frank discussion: The new Iconography is Boring Me To Pieces. And all that "grey matter" on my screen makes me fall asleep sitting up.
"Change" for the sake of "change" really sucks, guys. Please, please, pretty please remove that "need to change" clause out of your employee annual review requirements. It's a major market kill.
Really? Colored vs. monochrome icons is that big of a deal for some of you? Perhaps I'm different in that regard then, because I value productivity over sex appeal when it comes to my development toolset. That said, I will reserve judgement until I've used it extensively. I appreciate the fact that they seem to be taking a measured, scientific approach to usability. I hope that it translates to improved productivity.
I'm always open to new things and I'll definitely give VS 2011 a try but so far I'm not all that thrilled with the asthetic changes that I'm seeing here. I think that in many ways they are mostly a step backwards. I understand the need to improve performance and decrease application load times etc. After all, it's more important that the end product you design looks good and not necessarily the tool you use to create it. But, I still think there's something to be said for having a nice GUI with (dare I say) "shiny colorful icons" than a dull gray one.
Not all of us are Linux nerds living in our parent's basement who insist on coding everything by hand in a terminal window and only go outside in between episodes of Stargate to pickup more Redbull from 7-11.
I agree that things like removing the cut/copy/paste icons were a good move (I don't know anyone that ever used them) but stripping out all of the color, nice lines and shading that defined sections in the menus and layout/configuration windows that made previous versions of VS always stand out above other IDEs is not a good move.
If you look at what MS has been doing with all of their products lately the trend seems to be simplifying. Simplification is a great thing -when it's done correctly. There is a fine line between "simplifying" and "dumbing down". What Microsoft is doing for Metro, Windows Phone and now VS is the latter. The Office ribbon is a great example of simplifying without dumbing down. Instead of hiding everything in submenus, Microsoft realized that users were no longer using 14" monitors running at 640x480 resolution and decided the time was right to start making use of the extra screen real estate. If you are in the ribbon hater camp then you really need to ask yourself why. Is it because you're stuck in your old ways and never gave it a chance? How does it really cramp your style? Do you not like being able to see the affect of things like style changes previewed in real time? Think about it.
Moving on to a bad example of what MS has done by dumbing something down is with the new Windows logo and Metro. By now everyone has a computer of some form (desktop, laptop, tablet, phone etc.) that has more processing power and better graphics capabilities than at any other time in history. Now while that shouldn't be an open invitation to make over the top logos using every color known to man with wacky chrome effects, 3D objects and drop shadows everywhere it should at least open the door for a little creativity. Less is not always more. Sometimes it's just...less. I personally feel that the new Windows logo and VS design are both simply boring and uninspired. That's just my two (OK maybe 3) cents.
Anyhow, back to the topic at hand...MS, please don't keep dumbing down your products. It was the baby boomer generation that were afraid of computers, Gen-X and Gen-Y are pretty comfortable with them.
PS: As far as the new Metro color scheme goes...teal? Really? You guys chose teal?
I'll hold judgement until I actually get my hands on VS 11, but so far the only think I can think of: Terrible!
"engendering the impression that VS feels lighter and less complex."
I don't want a tools that gives me the false perception that it's "lighter" or "less complex" when the reality is quite the contrary. Why don't you fix the reality of the over-complexity of the UI rather than waste time with this foolhardy trickery!
Looks terrible. I really hope they listen to this feedback and make some serious adjustments.
Removing clutter is great but the grey UI is just depressing. I hope the old theme is still available!
I am one of those who prefer the new Subpixel rendering in Direct2D/DirectWrite. It pains me because the VS Team itself not using the tec - why sould any third party invest in it. Would love if we were given the choice.