Visual Studio UI Refresh
The Microsoft Fluent design language provides a unified framework to create and deliver more productive, consistent, and accessible applications. The Fluent design principles have been applied across familiar products like Microsoft 365 and we’ve been using those principles in the IDE to make targeted improvements to real problems. We’re excited to share these early designs so we can incorporate your feedback into making Visual Studio the best IDE for developers. We’ve created a new Developer Community Ticket tracking the improvements we’ve made to the command shelf, menus, tool window chrome, and document tabs where you can share comments and suggestions as we iterate on bringing these experiments to a future preview release.
The current visual language (which hasn’t been updated since Visual Studio 2012) has limitations for many customers. These limitations include small and crowded controls that can be difficult to interact with, visual noise which makes it difficult to focus or identify the active area, and inconsistent state indication that can cause distractions and confusion. Inconsistent visual design makes it harder to predict common control behaviors, creating an environment that is potentially difficult to navigate.
Our new UI updates focus on three main pillars: cohesiveness, accessibility, and productivity.
- Cohesiveness: It is important to make sure these updates balance a new, refreshed look and feel with the familiarity of the Visual Studio our customers already know. By aligning with Fluent, Visual Studio will look and feel more seamless with the rest of the operating system and other Microsoft products.
- Accessibility: It is important that the updates follow our accessibility best practices and make the product easier to use. This manifests in several ways, including: adjusting target sizes to make them easier to use while maintaining information density, using color more intentionally to decrease visual noise and draw attention to the active areas of the IDE, and using lighter weight controls to make it easier to distinguish different actions.
- Productivity: The UI updates work towards creating more consistent experiences, making it easier to navigate the product with confidence by reducing the amount of time it takes to get familiarized with the UI. Our updates also work to reduce cognitive load and mental fatigue, making Visual Studio a more comfortable work environment.
How this appears in the product
Toolbars
Above: Visual Studio 17.6 toolbar, Below: Proposed toolbar
We know that cognitive load is reduced by minimizing visual clutter, which is often achieved by increasing the amount of spacing between controls. We also know that developers want as much space as possible for their coding environment. Balancing these two attributes against each other is a tricky proposition. To that end, we’re increasing the perception of space by using lighter weight control styling to reduce cognitive load. We’re also making minimal increases in target size to reduce the likelihood of accidentally activating the wrong control.
Menus
Left: Visual Studio 17.6 menu UI; Right: Proposed menu UI
Similar to toolbars, we’re exploring adjustments to spacing, alignment, and color application to reduce visual noise and cognitive load. This makes it easier to read each item and navigate through our menus. While working on menu styling, we noticed these changes are impacting the length of our menus, which has previously been a source of feedback. We’ll continue to look for other ways to improve our menus.
Active region styling
Above: Visual Studio 17.6 document tabs, Below: Proposed document tabs
Left: Visual Studio 17.6 tool window chrome, Right: Proposed tool window chrome
It can be difficult to locate the active area when there are many tool windows open in the IDE. We’re now using colors and spacing more intentionally to reduce unnecessary visual noise. This way the active part of the UI stands out, making it easier to recognize. The examples above show how the updates impact document tabs and tool window chrome.
These design changes are still a work in progress and we’re hoping to make them available publicly soon. To get involved and see more concepts as we continue to explore this work, please follow the Developer Community Ticket for updates and discussion.
153 comments
I don’t have any specific feedback, but I am strongly in favor of this effort! I particularly encourage the distinctive highlighting for current tabs. I think I like the neon outline, but I also think there’s room for more experimentation there.
Same here – no specific feedback yet, but I can’t wait to see this in (hopefully!) the next preview!
the new toolbar doesn’t give the vibe of i can be moved and reorganized like the old one
Hi Ahmed! The new designs still allow for the toolbars to be moved or reorganized. If anything specific makes it feel like they cannot be moved or reorganized, please feel free to add a note to our Developer Community ticket.
Kaitlin:
1. Can you give alternating background colors to the Rows in Explorers and Tool Windows like Solution Explorer, Properties, etc.
2. Also, kindly do not forget to add a hover effect to the solution explorer files (like in VS Code). It’s such a basic thing and it’s been overlooked for every VS version out there since 2003, I guess.
Thanks! Other than that, this effort is great!
Hopefully this will not be a repeat of the 2012 debacle and feedback will not be dismissed out of hand.
How about the Start Window debacle? You know that major UI change which no one asked for, is nearly universally disliked and MS couldn’t care less about the torrent of feedback.
Yes, we fought the Start Window and New Project Dialog changes for quite a while, but they only made cosmetic changes that did nothing to address the issues discussed.
This proposed design is a welcome effort. They should proceed.
I’ve seen something important with that… developers and other advanced ‘computer literate people’ did use the start menu, as intended… a way to organise and access your applications when your screen is full of another maximized app(s). It’s much easier to click the windows button and see the other app you need to open to multi-task and hit it’s tile by body memory rather than having to minimise / close out and return to your mess of a desktop space and find the icon to start your desired app. BUT, most general users, in over 20+ years of work have NEVER adapted to multi-tasking nor have they moved away from a mess of icons on the desktop as program launch. If they have Word open and need Excel, they close Word, get back to desktop and open Excel. So… there are really two Windows user communities, General and Advanced… and Windows is designed to serve the vast majority of General users that are barely hanging on (more or less, some better than others). It really doesn’t listen to anyone that would be commenting here. Sigh.
Have you ever actually seen anyone do what you claim is the “general users’ way”?
I haven’t anyone seen anyone do anything THAT stupid even back when I was doing user support in late 1990s.
I’d settle for simply making the dark theme, and every other theme, consistent within the entire application. Just as an example, please no more blinding white background for the “Options “dialog no matter what theme you are using. ALL dialogs, and controls should obey the theming choices of the user.
Totally agree. Make the entire IDE to follow the selected theme before any other redesign.
Tools / Option window doesn’t follows the selected theme for a long time. It’s time to redesign that…
Looks great! This redesign, in combination with a Mica treatment, as done in this mockup (maybe a bit more subtle and optional, of course), would be really nice. From these proposals, I would add more padding to the active document tab on the left, though.
As long as it loads fast and it’s very reactive. Please don’t do any cool thing that can hurt performances, or give us the config option to remove all of that.
Hi Yeska, thanks for sharing with us!
Updating the UI without negatively impacting performance and productivity is one of our top priorities. We’ve started with visual improvements to address issues such as cognitive load, confusion caused by inconsistency, and to meet color contrast requirements. There should be no loss of functionality or performance with these visual changes.
Some existing usability and performance issues (not caused by this UI change) may surface as we take a closer look at our current implementation. We’re taking this opportunity to refactor some aspects of our UI and supporting internal services. The improvements we’re making to our design system will allow us to continuously improve product quality over the long term.
In your performance metric, there should be spatial density. The new UI laguage is much less dense and that can be a drawback for smaller screens or when we are using many commands while trying to maximize the space for code, tests etc. Ideally you want to allow the developer to keep the same density or to allow to adjust it. To me this lower density is a no go. The same way W11 start menu is a no go.
Very excited about this! Pixel density has gone up a fair bit in the last 11 years. Things were looking pretty tiny.
I often miss-click around the Debug triangle button, since the border activates the dropdown and not the button.
F5
Making UI Components larger on higher DPI monitors is a system setting and should NOT AT ALL be handled by application developers.
Great work! As a surface user who occasionally use VS on the go (literally coding/searching in VS while holding surface as a tablet), these are great changes. There is one important but not-quite-actionable feedback I can give: please make the editor touch friendly. It’s difficult to pinpoint the exact requirement but try to move the text cursor, or highlight text, or move the output window around while touch keyboard is open – you would notice it’s not simple. Make it just 50% smoother and you’d have the best touch-enabled code editor on the go, and this surface + VS combo would be a great system seller.
Very exciting! Can’t wait to see these new changes land in Visual Studio 😍
I am strongly against larger toolbars and headers. I want more coding room, not less. This isn’t a website or a mobile app, it’s an IDE that we spend all day working in. Anyone who has used VS for more than a week has either committed the keyboard shortcuts or the icon locations to memory, so enlarging the toolbar really benefits no one.
This. Why waste space between areas (text editor, solution explorer, output) with needless paddings and empty space? I have to work with a full HD display at work and already am feeling to constrained with the space available.
Same for the wider frames on everything. It’s useless padding taking up space from useful information.
Yep 100% agree. This is needless change for its own sake, and bereft of any insight or understanding as to how users actually use VS.
I like some of the changes presented on those screenshots, but the amount of additional whitespace especially in the menus is just ridiculous.
Also I think just color theme adjustments would be good enough, no need for larger paddings or whatnot. I want my screen estate for my code.
Very much agree, I work on a laptop and real estate is already scarce.
ALT + SHIFT + ENTER – full screen mode. same to get back to normal. It will get rid of all that noise and give you much more screen real estate for code.
It must be customizable. It would be nice to increase the display spacing for touch device users. I believe most users use VS on a PC with keyboard and mouse. Gmail and Otlook.com have options for display density.
Same here. I’m really not fan of these changes that are mostly just changing icons and increasing margins between items and toolbars. Remember, not all developers use 4K 32″ monitor screens.
Often I need to work on my 15″ laptop with FullHD screen, so personally I’d like to see the opposite VS UI update where the margins are even smaller than today, with as much space as possible dedicated for actual code. This could be acomplished by merging the Menu bar and Toolbar into one, while hiding some not so frequently used menu items + moving the status bar into Solution explorer area.
I have a 2k 32″ wide screen, so this UI enhancements looks good to me. Can’t wait for the next preview to try them out
This a good move, since Rider have done the same and it’s globally welcomed by the devs.
Are you referring to the “new ui”? I don’t like it at all, so maybe not globally welcomed.
The Active region styling looks like a big improvement!
Don’t forget about those that don’t use any toolbars whatsoever, anywhere. Last time you did a UI refresh you forgot about that, had empty gaps everywhere and it took you a few release cycles to remove all the gaps and “return” free space for code windows. My code window occupies 95% of screen space, while most “tech evangelists” use 5% code space and plaster the rest of the screen with tool windows and tool bars for buttons they use once in a century. Writing code requires a keyboard, using toolbars requires a mouse.
Please do NOT add more white space. Or make that configurable.
Better is make the UI scalable as a whole.
Really like the highlighting you are doing with the Active region styling, makes it a lot easier to recognize the active area. On the other hand, the new File menu style makes it a lot harder to distinguish the menu outline from the rest of the UI below.
Personally I don’t see any of these UI changes as solving any of the “real problems” with the IDE. While I have no problem making the buttons a little farther apart I don’t see that it actually solves any issues for me. You still have a large stream of buttons across the top so if it somehow is easier for my brain to understand simply by putting a few extra pixels on either side of it then I’m really curious how my brain is so strained. Personally I want a better toolbar customization experience since I don’t use any of the built in toolbars anyway. Make it quick and easy to create my own toolbars for any commands I want however I want and I’m fine.
For the menus I would start pushing back more because the “real problem” isn’t spacing (see above). It is the fact that menus are infinitely long and often requiring scrolling to get to the items I need. Even in your screenshot it is clear the menus are now taller which means more of the options I need are going to require scrolling. I know it is outside the box but how about making the menus smarter instead? For example I use maybe 10 items on the average menu. How about using some smarts to start moving those items together (like a recent list) so I can open a menu and immediately select the option(s) I want rather than having to find them? Even better is to make the menus customizable so I can select the items to appear “at the top” and let the rest of the menu items fall in below that. Again, stop making me scroll to find the items I care about.
This brings me to the third UI issue that I have with the IDE, too much functionality. Years ago MS said they understood that the IDE was overwhelming and starting moving non-core functionality out. But then new functionality started being added as “mandatory” and it has ballooned out of control again. What I really want in the IDE is the ability to say “show me this stuff and not that”. That would declutter the IDE far better than anyone at MS can because it allows me to fully customize the IDE to fit my very specific needs. For example I never use the `Analyze` or `Team` menus. I rarely use `Project`. Let me declutter the UI by getting them out of the way. Same with buttons (which I currently do by using a custom toolbar) and menu items. The # of windows in the IDE is out of control and some of the more common one’s I need is under `Other Windows` in the menu. Let me customize all this so the IDE fits my needs and not the needs that a subset of users answer survey questions about.
Thank you so much for your feedback. We’re taking your feedback to heart and may come back with more questions as we continue to explore. Would you mind adding your concerns to our Developer Community ticket? We are aware of the issues with lengthy menus and the abundance of command buttons in the toolbars and will continue to look for ways to improve.
make menus with two or more columns
If you really have us have to scroll the menu, at least get rid of the useless slow scroll buttons at the top and bottom of the menu and add a real scroll bar to it instead.
You can do all of that by right clicking on an empty space in the toolbar area and clicking “Customize…”, you can get rid of the extra windows by just closing them. They stay closed.
We’re not talking about window layouts here, we’re talking about customizing the UI (menus, toolbars, everything) to fit the needs of the specific user. You cannot customize root menu options, for example, today. You can painstakingly customize the existing menus (until an update at least, unless it is an extension added item) and toolbars but see my first point about how painful it is.
You already can modify the menus to your liking: Tools -> Customize… -> Commands
Its a pain in the whereyousiton but its possible. That definitely could be made smarter, instead of having an “Feature search” as a last resort when you dont find the menu item because there are just too many.
We already know that. Please re-read what I posted and my follow up comment. Customizing the menu/toolbars has been supported since at least VS 6 (and broken multiple times during every preview thereafter). But that doesn’t solve the root menu problem (which cannot be customized) nor the broken customization options available today.
Agreed. While the additional space is welcome as it makes it easier not to hit a wrong button, the main problem with some menus is actually the number of items, especially the right-click menus in the code editor and the solution explorer. Not all of the options need to be immediately accessible (I know, it depends on user preference) and some of them can be just plain wrong in the context. (Here the extensions often make things worse by not hiding their items when not applicable so the solution is not obvious nor simple, but putting them in order will take time so the sooner something is done about it the better). Maybe a multi-column menu, as somebody mentioned above, could be a solution, possibly even a contextual toolbar like the one in MS Office – just please don’t opt for replacing the main menu with a ribbon because the one in Office is pretty much undiscoverable.
Kindly keep the new fluent UI design changes optional. The VS team has already messed up with the NEW PROJECT dialog which 99% of VS users never liked in the first place but MS is turning deaf ears on the user voice forum. If you really want to improve VS then pl restore the classic NEW PROJECT dialog with the fluent theme. Nothing more is required for VS 2022 version.
The new project dialog made it nearly impossible to find something unless you know exactly what to look for. The dropdown filters are mutually exclusive in most cases, and luck any structure. The group/category based approach made much more sense.
I so much do not agree with that:
We know that cognitive load is reduced by minimizing visual clutter, which is often achieved by increasing the amount of spacing between controls.
I’m one of these persons who try to remove as much as possible as white space as possible, I want all my buttons, menu options, etc… to be as close as possible so to minimize mouse movements.
The suggested improvements don’t bring any improvement to me, it makes things worse, basically it makes it look like a web application designed to be used with fingers on a touch screen, not something who is used by people who have been using keyboard and mice for many years.
The tabs taking even more room is a terrible idea, it means you can have less files open at the same time before you start seing tabs truncated or moved to a second line of tabs.
At the very least, you should have some options to allow tweaking the spacing, down to a minimum spacing equivalent to the current versions of visual studio.
I’m not sure if it was Visual Studio 2012 which tried something WHERE ALL THE MENUS WERE IN UPPER CASE BECAUSE SOMEONE DECIDED IT WAS A GOOD IDEA TO HAVE YOUR IDE SEEM TO BE SCREAM AT YOU… that was the same version where someone decided that colors were not important and removed every single color of the icons so they were all monochromatic… basically making it impossible to recognize anything.
Proper UI improvement for Visual Studio is not this type of change, what would provide real progress are things like what some third party tools provide, like being able to colorize tabs based on the type of file (or some regular expression), things that provide actual benefits, not just “we think it looks better like this and it had not been changed in a while”.
The current visual language (which hasn’t been updated since Visual Studio 2012) has limitations for many customers. These limitations include small and crowded controls that can be difficult to interact with, visual noise which makes it difficult to focus or identify the active area, and inconsistent state indication that can cause distractions and confusion. Inconsistent visual design makes it harder to predict common control behaviors, creating an environment that is potentially difficult to navigate.
As mentioned above, the “small and crowded” is a personal preference, so sure, but make it a parameter. The rest of the issues is related to the state of the controls and how they behave, that should be independent of their size and spacing.
tldr; Add support for people who want to use their Surface Tablet if you want, but make sure it’s possible to revert to a compact mode for people who are fine with the existing layout.
Please don’t.
I like it especially the easy to see borders of tabs – in recent years it has become harder and harder to see the edges of windows in Explorer in general. Obviously it would be nice to be able to dial up/down the padding between controls in settings.
We have the (expletives omitted) that designed the dumb flat Metro aka “Modern UI” to thank for than.
UI refresh is a go-to project of management that is actually incapable of improving the core function of the product. How about fixing IntelliSense, instead?
Great work! However, this concept looks better to me: Update UI of Visual Studio 2022 like the new Windows 11 UI. I hope the options window has been refreshed as well.
The purple border around the active document tab in the editor seems a bit annoying. I also think that you should not add keyboard shortcut hints in every possible place: Search Solution Explorer (Ctlr + ;), Search (Ctrl + Q). Most developers already know them anyway – they only reduce the readability of the UI.
I like the concept you linked to as well. It’s got much more contract between the elements, making it easier to distinguish the regions. The MS proposed theme (especially the light one) has so little contrast, it looks like all the icons and text are just splodged on the screen.
Please make this waste of valuable screen space optional, and default it to not using the new style.
I have a just received a laptop with WUXGA resolution (1920×1200 – more height then FHD).
Now you want to take away this screen space.
PLEASE NO!
Make it configurable!
Reorder the menus smartly – (What is “Start session” & “Join session” doing in file?)
Colors – why is the background getting lighter and lighter.
The first thing I do, with any theme is to make my editor PURE BLACK…
So I can focus on the text.
If it’s same color as menus, the menus are distracting me!
It’s like the active is blending with the inactive and the foreground with the background…
I don’t understand the recent UX principles.
They seem to be going in the direction of merging everything into one big blob.
I don’t need big fat borders, but I need to see some type of clear boundaries between between elements.
I want to see the borders before I move the pointer over it – I will aiming for that area, not for the displayed glyph.
The glyph is smaller and slows down the aiming.
Tollbars – I want to have only 1 row of buttons. Making the buttons bigger will force me to have 2.
Make the toolbars have configurable color separators (between toolbars and elements), will better allow me to visually find my needed buttons.
One of the worst possible ideas.
Remember, people run VS on laptops, there any waste of space is unacceptable.
Make it optional or do not make it at all, please.
If you are programming on a laptop you are already doing it wrong. Nobody can create serious code on a laptop keyboard.
Just wondering, who are you to teach me or somebody else?
Then half my dev team is “doing it wrong”. Laptop keyboards work just as well as desktops and are generally the same size (or close). You may be thinking of tablets perhaps which tend to be smaller…
Who ever proposed this doesn’t use the product. Context menus are already filling the screen top to bottom, with all this dead space it will only be worse.
Instead of wasting cpu cycles on this, performance should be favored.
Don’t want to be negativ here, but I feel like this is not really helping the product. I also feel like this is the reason products like rider gained traction in the first place.
On a sarcastic note, the only thing missing from that new design are ads that can’t be disabled. To be cohesive with the windows experience these days. I really dislike the Mac ui but stuff like this really makes you consider switching.
> Who ever proposed this doesn’t use the product.
That’s my impression on vast majority of app GUI “modernizations” over the last decade.
Yes, literally NO ONE is asking for this.
Please pay very close attention to all the upvotes on the comments saying that the new spacing for toolbars and menu entries is wasted and unnecessary!
The extra spacing is indeed not good. Even on high-dpi, things are fine. Don’t make a touch-friendly UI for a developer tool. Make a better UI. Those are different.
Thank you for your concern about my “cognitive load” but I’ll be just fine and you are wrong.
This is a welcome idea. Also, new files and folders icons. And make the VS explorer zoomable – ability to use mouse wheel to increase or decrease the font size.
No offense, but this seems like an unnecessary waste of screen real estate in a program where screen real estate is incredibly valuable. Visual Studio is arguably one of the most important programs in the world, as it’s used for development of the software we use every day. This is a product for professionals. Please resist the temptation to jump on modern design trends and make changes that will make the product worse.
We also know that developers want as much space as possible for their coding environment. – You say that but having seen the “solution” you came up with, I honestly doubt that.
Here’s some data points for you:
1) my text editor font size is set to 7 for a 1080p monitor: https://i.imgur.com/2FRD4g8.png
2) I have my output window moved to the right, not under the text editor. The fact that for widescreen monitors you’re still putting the output window below the text editor is clear proof that whoever’s designing the UI does not in fact know and/or understand what you claim to know. A far more practical layout: https://i.imgur.com/fOxHdKu.png
Balancing these two attributes against each other is a tricky proposition. – No, it’s not tricky at all, that’s what the options window is for. And before you say it – no, “too many options” isn’t an argument here since there’s like thousands of them already. Also, who’s asking for increased spacing? High DPI usability is solved by scaling the entire UI, not bloating up the padding. So if that was done instead of, say, ruining the UI for everyone, you wouldn’t have a bunch of disappointed people in comments rightfully pointing out the issues. It’s honestly baffling to see how people with Microsoft salaries often struggle with UX basics, particularly in domains that were once a strong point.
And what in the world is this?! – https://i.imgur.com/Hf7jjvY.png
Who’s benefitting from all this waste of space? The gap, the title, the near-empty toolbar below, everything.
This honestly feels more like someone was inspired by the near-empty American parking lots and thought it’d be fun to replicate that in UI.
An actually useful change on the other hand would be to merge the toolbar with the title bar for these docked windows.
At the risk of suggesting something you already know, I’d prefer to have code tabs stacked vertically and not moving around as much. In your cutesy design mockup there are short file names and very few tabs, in practice the names are quite a bit longer and in my case about 40 files are open at the same time. Stacking them vertically would allow for easier navigation between them. I’ve never quite understood how and when the tabs get evicted from visible space either, I find myself reordering and reopening them all the time.
That said, unless IDE and C++ Intellisense memory usage and responsiveness will drastically improve, I do not intend to move from VS 2017, tried once with VS 2022 and that was a major downgrade, went back after that.
Active region styling is a welcome change. 🙂
Adding my “Please don’t do this” vote here.
– Devs turning their monitors vertically intentionally to get more vertical space, you are trying to diminish that performance benefit.
– Productive people buying 16×10 screens intentinally, to get more text on screen for better performance.
– What if my cognitive processing power is enough to process even more dense text that you have in 17.6?
We know that cognitive load is reduced by minimizing visual clutter, which is often achieved by increasing the amount of spacing between controls.
Really? Just ‘add more whitespace’ and everything is just magically better? Is there any research to back this up? This sounds made up – like confected reasoning some clueless or pretensions designer made up to justify changing things to suit their own arbitrary preferences, and never bothered to conduct actual research to confirm it.
If there is research on this, how was ‘clutter’ defined? Physical clutter is disorganised, like laundry that should be in a basket, but is on the floor and furniture – that doesn’t apply to VS. VS defaults are very organized – the menus are at the top, 2 rows of toolbars (for back/forward, open, save etc) just below it, then below them are file tabs. Tool windows like the solution explorer are to the right, the build results/MSBuild output is at the bottom and so on.
It seems “visual clutter” is being used as a clumsy equivocation, that ‘many items on screen’ is equal to ‘clutter’ – that is not true – it would be true if all the icons, menus and tool-windows in VS were disorganized – all over the place, ungrouped or grouped with unrelated items, and positioned in some other random way. But that’s not the case – it’s not clutter, it’s complexity, and with VS the complexity is necessary for an app with so many features.
Users of VS are mostly programmers – by the nature of their jobs, they deal with lots of complexity on a day-to-day basis; needing to process lots of information like business requirements, bug reports or feature requests, and translate all that into code. It’s easier to process lots of information when there is less wasted space on screen because it either obviates or reduces:
* Excess mouse movement and cursor traveling
* Excess screen scrolling
* Eye travel movement
For a program like VS, higher density of information and controls is more desirable, not less!
Well said! 😎
Very well said indeed. Context menus are already very long and can use the full screen height but they fit. If you use VS everyday you know where to locate the command in the context menu and can trigger it with minimal mouse movement. If you add spacing we’ll need to first scroll the menu to locate the command which is going to be a pain. The screenshots in your blog post perfectly illustrate this. As someone else said VS is an IDE that we are spending the whole day working with, so density is a feature not an issue.
I survived VS11 when Microsoft turned all the icons black and white. They made the menus ALL CAPS. The whole thing was a disaster.
I opened a UserVoice issue asking them to revert it. It got hundreds of upvotes and comments.
They eventually buckled to the pressure and the colors returned. The ALL CAPS was gone.
This? I can live with this. In fact I like it.
I up voted that UserVoice item. 😂
I too can live with these changes, and rather like them as well.
The people responsible for the VS11 design should have been fired!
No, they should have been made developers and use VS11 for the next decade
With the effort of refreshing the UI, is it also possible to migrate Visual Studio from .NET Framework to modern .NET (eg. .NET 8) so that it can benefit from all performance improvements and ICU as well as the latest Unicode support?
Some aspects look better, some look worse. My strong recommendation is that, like with the Windows 11 Explorer option, you include an option to toggle between normal spacing and this new expanded spacing.
+ The clearly visible lavender highlight around the Solution Explorer tab. 🙂
– The barely visible border of the popup menu, putting slightly darker gray around dark gray. It was crisper to see with the light gray outline around dark gray. Also, the disembodied menu name and popup is weird too (“File” is now disconnected from its contents with a gap between them 🤨).
– The File menu looks a lot more spaced out now which will be ~50% more mouse travel distance to reach items 😕. Looser spacing may be useful if you have big fingers and you’re using a touch tablet to write code, but what tiny percentage of coders seriously uses a touch tablet for writing code rather than a mouse? I’d hate to worsen the experience for 97% of devs for the sake of the 3% (granted, I’m pulling figures out of thin air, based on anecdotal experience of my ~50 software developer friends). I’m generally against spacing things out that you’re already familiar with like toolbars, because it just occupies more space on your screen, reduces the number of useful content lines you can fit (e.g. code), while barely reducing cognitive load. Such crowding *is* a concern for things you’re less familiar with, like new reading code where visually spacing things out really helps (which is why loose Webkit code is easier to efficiently read than crowded Chromium code), but I don’t know that the cognitive load argument applies to very familiar and frequently seen things like toolbars, given those research studies were most likely applied to people who hadn’t seen items/images before the study, and we already have a spatial mental map in our heads.
Thank you for your feedback! Addressing the contrast issues between menus/context menus and the content behind them is definitely on our radar. In regards to the menu content, we’re trying to find a balance between making it easier for brand new without drastically impacting the experience for our current customers. We’ll continue to post concepts and explorations on our Developer Community ticket if you’d like to add your feedback to the conversation there.
From my point of view the UI is already good enough.
What it is lacking are the Git workflows that still could offer more capabilities from what CLI is capable of, lack of UI designers for WinUI/MAUI/EF, the jurassic development experience of using C++/WinRT alongside XAML (back to pre-NET COM days) since C++/CX was deprecated in 2016, the occasional crashes and UI hangs.
The new tabs look great. Never been a fan of cramming as much content into a box as possible so seeing some more whitespace around elements is a big win. Though the spacing in the menu seems to be a bit too much
i’m not against ui redesigns in general and most of the changes look fine, but please have an option to remove some of the whitespace in the menus and especially the tabs, many of us have a ton of tabs open and adding even a bit of padding there eats up alot of space.
Even if the default for new users is to have more padding to make it less noise, please have an option for more compact ui for us old dogs that have been coding for a long time
I like the idea about finding active elements easier. Biggest problem is to match opened file with tab.
But for me the biggest problems with VS are laggy typing (Zero-latency Typing will be welcome), not smart InteliSense, buggy error list.
Please don’t waste spaces like this. I can agree in modernizing the UI of the screen for those mobile/website application, but this is a professional/enterprise applications.
If you want to keep empty spaces all over the IDE then please provide an options where we can specify a dense or very-dense UI like Windows 11 does for the folder explorer.
The fresh is a great addition to a UI getting older…
My only concern is about the menu: the menu not visually bound to the title, and even worst the menu is aligned with the bottom content. Maybe their is something visually not clear here:
As may other people have already mentioned in the comments, increasing the whitespace is probably the worst decision, so i won’t focus on that.
The dark mode theme looks a bit pale.. what’s up with that?
The new context menu color is nice, the spacing not so much.
In the toolbar having 2/3 layers of color for the background (black -> dark gray (combo boxes -> light gray) makes the whole thing look much more cluttered than it was, while also wasting valuable space (huh, didn’t manage to let it go..).
The rounded corners of the combo boxes on the toolbar look childish (could also be due to the 3 color thing..)
Really? tab headers of open files take up more space? really??
Yes, the styling is slightly cleaner but I echo the comments of others in saying this seems to be missing the point. The most successful UI shift IMO has been exemplified by Visual Studio Code where CTRL-SHIFT-P allows me to quickly get to the functionality I’m interested in with a couple of keystrokes. Similarly I use Resharper’s CTRL-SHIFT-T almost exclusively for navigation within VS because I can get to the class I want within seconds. When I contrast that with the difficulty of “Making project active (debug target)” or setting command line parameters for an application I’m debugging it’s a different order of magnitude … I have to open a long menu, figure out where the command is in the menu, click on it, do other steps etc before I can even do the action I wanted.
I appreciate that I may be particularly keyboard focussed and obviously there are accessibility requirements but I’d suggest putting effort into a command pallette as a priority.
There’s already a command palette (CTRL+Q)
Amazing – thank you. I have been using the latest previews for the last 5 years and never noticed this! I suppose that proves the point that the UI is just too cluttered to be easily discoverable in its present form. Would have been even nicer if VS had borrowed the VS Code shortcut – I notice that Terminal has also “standardardised on CTRL-SHIFT-P.
Ooh, I never used that either (despite the edit box clearly showing “Search (Ctrl+Q)” right there :b). Though, thinking about it some, I prefer two keystroke Ctrl+Q over the longer three-key Ctrl+Shift+P.
ReSharpers CTRL-SHIFT-T really is the best. I cannot emphasize this enough.
Please, remember than some people here are paying for this product. We are not “users”, we are paying customers.
What I’m struggling the most in visual studio is room to have everything on 2 screens 16:10 (move to 16:10 for more vertical spaces)
In previous version you already put all source windows text bigger and I loose 3/5 lines.
Putting files tab bigger will lose easy access to open files so we probably lose 1 or 2 files on single click.
There is lot to improve in visual, but not sure adding empty space everywhere is good strategy.
Visual is a tool for professional like Adobe photoshop. All toolbar and menu should be small and not in the way to distract us from the most important part of our job the text file we edit, debug, read.
If you want to work on tabs, please look into way to differentiate 2 files with the same name in different folder (like cmakelists.txt). The 2 sec tooltip is slower than opening each one.
What’s stopping you guys from using WinUI in Visual Studio?
Great question!
Perhaps all the add-ins that inject UI (based upon the existing UI framework) into VS would be a stopper. Of course the ideal time would have been with the move to VS 2022 and x64 as that broke all non-.NET addins. But I suspect given the effort to make it x64 prevented making any major UX changes.
Additionally WinUI is a great marketing tool and for simple apps but no major app has migrated to it yet that I’m aware of. Office isn’t using it and neither is VS. Switching to a “modern” WinUI will likely anger more people than this change in spacing in the menus…
To me this is a much-needed and very welcome effort. It will naturally be iterative and although there may be some collateral damage as changes are introduced, I don’t think there is much choice. There will only be more options coming as writing code gets more and more connected with the hive mind.
The changes in spacing are very welcome – targets are quite small right now, especially when running high resolution, and the information density is much too high for my preference. I would also like to see some minor UX changes in terms of menu item visibility, grouping and ordering.
As an example, if I right-click my project in Solution Explorer and I want to select Properties I then have to mouse almost the full screen height to find it at the bottom of my screen, at the bottom of a list of 35 items. Just musing, I wonder if introducing a tab or two in the context menu might be better, as those tabs would be very close to the mouse after the right-click. Another possible change would be moving Properties to the top, as it really is a special one.
Thanks for your efforts – it’s a challenging task and you will never please everyone 🙂
Thank you for the feedback! We are aware of the issues with lengthy menus and will continue to look for ways to improve. We’ll keep posting concepts and explorations on our Developer Community ticket if you’d like to add your feedback or any other thoughts to the conversation there.
If anything make VS Code and the Visual Studio IDE more similar for those of us having to jump between the two. (Or at least give us a way to make the keyboard short cuts the same between the two.)
Please don’t. VS Code’s UI is minimalistic (which can be good sometimes), mostly useless with the “explorer” bar for anything beyond text editing and simple code stepping and difficult for finding features you may not be comfortable with. I use the command palette to jump to the commands I often use when I would much rather just have a button I can drop onto the toolbar to get there quickly because I’m not memorizing the 50 keystrokes I need outside the standard Windows commands and bringing up the palette every time is wasteful. Seriously I want to auto-format a document, why do I have to use a keypress to bring up the palette to figure out the keystroke to format a document when I could just press a button to do the same thing like I do in VS already?
VS is more discoverable at the cost of a complex UI. I want a happy medium where we have the simple “starter UI” of VS Code combined with the flexibility of making it our own like VS does. Debugging, in particular, in VS Code is far more flexible (currently) in VS Code in terms of defining customized debugging configurations (Powershell in particular) at the cost of you having to discover/customize everything up front to get started. But once you’ve defined your configurations then it works well. But the UI while debugging is awful. I don’t want everything in the explorer bar window. I want to dock/move to separate windows my variable windows, callstack, etc. Not be forced to go to the Explorer window and navigate everything from there.
I also find VS Code’s settings UI to be very flexible but honestly trying to find that one setting that controls something in the editor is a nightmare. Again, would love for a happy mix of VS and VS Code here…
Bad ideas, not contributing anything useful. We already can customize with themes.
Stop dealing with “fluff” (and come up with minor issues) and start working on the real issues, like the New Project dialog that is a fiasco since VS 2019.
This “fluff” is critically important as technology marches on. Folks w/ very high-density screens or potential customers coming from other platforms will care very much about how VS looks and feels. VS hasn’t been the only game in town for a while now and they have to remain competitive in all aspects. Lastly, the engineers updating the look ‘n feel of the IDE are not the same engineers that would be “working on the real issues”, so there’s no drawback to the UX update.
Much more critical is having a performant product that is reliable and relatively bug free. VS 2022, still has some way to go, especially re bugs. You seem to think that MS have infinite numbers of engineers too? Why do you presume the engineers working on this (apart from the UI/UX guys) wouldn’t be working on infrastructure and core features?
Definitely a move in the right direction. 👍 Good work everybody.
Two question:
1. How will the new UI components propagate to extensions? Will they automagically be updated, or will slow or never to update extensions just look weird?
2. How will the new UI affect the Git UI? I used to work on the Git tooling for Visual Studio, so it’s near and dear to my heart still. 😁
Hi Jeremy!
1. If the extension UI uses existing shared commands, toolbars and menus, they’ll pick up the new styles as the shell. We plan to preview the new style in the shell area first to get early feedback and address issues before we expose them in VSSDK. Extensions should be able to use some exposed style keys in Microsoft.VisualStudio.Shell and they should pick up new styles once we update them.
2. Git UI is definitely on our UI refresh priority list 🙂 Like extensions, some components in Git using shared shell style keys will pick up the new UI automatically. There are some custom UI elements that need manual updates, but we’ll make sure to not impact the functionality, productivity and accessibility negatively.
When I right-click a project node in the Solution Explorer, the context menu that opens is so tall that it barely fits my monitor. I counted, and it has 45 items in it plus 15 separators. If there’s more padding in the menus, I’ll have to scroll a lot more.
That will be a terrible UX having to right-click, open a context menu, and scroll all the time. And I don’t even want to imagine how this will look on a small laptop screen when I’m on-the-go.
Please make a compact version available for laptop users…
It’s well enough said about wasting space in menus etc. On the screenshot of “old” menu after the “Exit” command there’s a lot of space below while in “new” menu it’s only “Page Setup”. Really? R-E-A-L-L-Y? Is it joke? For the proof of preposterous “design”, take a look at two screenshots where I compare two Office products: Office 2010 and Office 2016. They, too, “removed the clutter”, and now 2,5 rows ARE GONE! Take a look at QAT: 2010 is as half width as of 2016! Please, do not do this for the sake of change. Now my monitors are hardly enough for such great “designs”.
Icon colors look bright and weird, look at that folder icon, it’s like orange rather than yellow. The icons and colors are very bad. It’s too bad to put spaces all over the place.
No, please god no. At least make this optional. The biggest thing I hate about Teams is all the wasted space, I don’t want that to come to my IDE too. I get that you need to do something to make a difference and get promoted, but FFS not this.
that’s great.
I am interested to know how Fluent Design is implemented? Is Xaml-Islands used or are the controls designed in WPF? Or is WASDK/WinUI 3 used?
Refactor Menu/Tools/Options window.
It currently doesn’t follow the dark theme when selected as the rest of the IDE.
Visual Studio should expand the area of the code editor and reduce the required area for everything else. The scrollbar alone just takes to make space. Imagine you are working on 15 inches laptop (even a 13 inches laptop), and the area for the code editor is just too small. I’m unsure about the ratio; I don’t know how to measure it.
The matter got even worse when developers like me are getting older and contracted long eyesight. This makes me have not space for coding.
Please either don’t do this – or make it optional, or the old format available as compact.
I rarely hear people complaining about VS’s GUI. What I do hear and see often is complaints about:
– Performance
– Bugs (and poor response of support staff to them, and unclear, erroneous updates on the progress of bugfixing)
– Half working features.
Please don’t expend effort here that could be much more usefully spent elsewhere. Redesigning the GUI means that we’ll have to relearn the GUI and muscle memory suffers – especially for people who for legacy reasons have to use multiple different versions of VS. I have to use VS 2005, 2013, 2019, 2022 as one example.
You did this before with VS 2019 and got lambasted for it. Please think twice.
Hello, I hope the color scheme of the code can have a similar color scheme to Rider
Extra space between menu items, document tabs, etc., means that the majority of users will have to scroll or search more to find the stuff they have open. People coding on tablets and other devices are a minority and, while they should be catered for, please don’t make the experience of using VS on a desktop/laptop suffer as a result.
If super small or super large screens are causing issues with the current UI then you could offer an option to scale it. Please don’t reduce the number of useful things I can fit on my screen and tell me it’s more productive.
Do people actually code on tablets? That boggles my mind. I can’t even use a laptop. I need real estate to maintain ‘picture’ with regard to the piece of code I’m working on. I my old, fat fingers need a proper ergonomic keyboard.
Also, I have to be connected to the diverse hardware I’m actually controlling with my code.
I don’t like the tabs title taking so much space !!! This means less tabs in my window.
I would also add, would it be possible to assign symbols to tabs (replacing/next to text) ? For example I would use red circle for one tab, white diamond for another, etc..
To make it more intuitive and fast working with the same group of tabs / having more tabs available in the window
Stop. Just stop. Make this optional, but do NOT make it the default. I need the IDE to give me space on the screen for my code. I don’t need more space, bigger fonts, or rounded corners on tab outlines.
This is an announcement that tickled my curiosity. I am looking forward to have more information on the Preview version so that I can test it live on my own set-up.
Screenshots are interesting but nothing will replace actual in-vivo testing
Do you plan to follow the general Windows 11 UI philosophy, and make the UI not only slightly nicer, but also much slower and laggier?
Pinned tabs should be smaller (e.g. Solution Explorer Tab , Error, Output ,etc..) when they get pinned, tab size should be smaller,they eats text editor size.
YES! I really appreciate all of these changes. Rounded corner all-the-things! And the spacing helps to reduce the cognitive load for me. I originally started in VS Code. So coming to Visual Studio was a bit of a shock to me. (I still prefer VS Codes implementation of code folding and find)
The extra spacing is only useful if the user has a touch enabled screen. Otherwise, this does not help developers at all.
Another thing, why are you changing the target audience of VS to people who are just beginning students in coding? Shouldn’t the product be geared to those who actually use it every day at work? Please stop trying to dumb down VS.
I have reservations for the changes to the contrast and spacing and to me it seems like this proposal is trying to solve issues in an application that were already solved with OS settings.
For the contrast changes:
1. It looks much harder to determine what control is disabled or enabled at a glance.
2. It makes things much harder to see on dimmer screens.
I understand that some displays are very bright nowadays, but the solution should be for the user to adjust their screen brightness instead of making text harder to read for everyone else. As a bonus, lower screen brightness settings reduces battery consumption.
For the increased spacing, it makes menu items harder to glance through and it’s also harder to see the delimited sections since the gaps and lines are much less visible.
Again, I understand that some displays have much higher PPIs than in the past, but these changes make using lower density displays much less usable.
In the same way that the brightness could already be changed easily with the OS, display scaling seems like a better solution for these issues rather than modifying application UI.
You can see this approach in all aspects of Windows too.
Nobody cares for low-DPI text readability anymore — ClearType is disappearing, grayscale AA is inferior to other OSs.
Nobody cares for small displays — everything is bigger, fonts are 12pt instead 9pt, useless padding everywhere.
Nobody cares for low-contrast screens — everything is just slightly lighter/darker share of gray, outlines are being removed, etc.
I’m pretty sure all people in Bay area have nice large expensive monitors, so screw everyone else, right? But that’s not the case for the most of the world.
This is so bad.
All of these changes make significant sacrifices in readability and practicality.
I’m all for a better UI but this is not the way.
Although I like the idea of this change, I’m not entirely sure what the point of a UI refresh without WinUI is at this point. You just end up with something that looks like it’s trying to mimic it.
And that diamond in the corner is kind of pointless, unless you decided to eradicate the three different versions. Community is explicitly free for a set of people, there’s no need to push the Professional/Enterprise version.
UI design revamps have been done with every version update (not just Visual Studio), whether it is really needed or not, and the feedback has been welcome, bewildering, or even angry.
What Microsoft, as a platformer, needs to work on is not adjusting or revamping the UI design itself. It is to create a foundation where anyone can easily adjust their own UI design, publish it, and share it. At least, that’s what I expect, and that’s what I think a platformer should be.
Thanks MS! Few months ago I requested this exact change from the VS feedback section. Surprised to see it being implemented so soon! Keep up the good work. Fluent design is better than Metro. Bring it everywhere, VS Code too.
For me, this is very cool because I like how Fluent Design changes everything in terms of cohesiveness. But if someone want’s NOT to use this design, please make it optional so we can configure if we want to enable this new design or not. But don’t judge me because I can’t wait to try it and give another feedback about it.
You have to leave an option for people who prefer the old UI, especially for laptop users who don’t have a large screen.
It is mostly nice changed, but please do not add that extra whitespace. Anyone that does most of their development on a 13.5″ screen is going to dislike that wasted whitespace.
Spacing can be used to suggest visual groups/chunks, so less individual components have to be parsed. This reduces the higher-level search space to the group count, thus reducing cognitive load. It often makes sense to group based on similar functionality and thus similar interaction with for example grouping the project folders (convention already) together and putting some space around them in relation to the other file types. 😊
Why do you guys always try to fix stuff that isn’t broken?
I’ve never heard of any developer say “There’s too many buttons and I want them spaced out more to reduce my cognitive load”.
I would like to see the research data that points to the issue that suggests there’s a problem with spacing.
Can the new UI be like Visual Studio Code, where you can easily collapse/expand the file explorer with one click?I hope this feature can be added.
Please make different button brightness.
For example, if you press the button once every 6 months, it is dimly lit, if 20 times in 6 months it is a little brighter, and if you press it every day, it has the brightest light. Or maybe set the Most Pressed Buttons to a different font to help the eyes focus more quickly.
This can be done for the Project context menu.
Just incredible, I’ve been waiting for this!!
How about spending time getting Visual Studio onto the current .NET platform instead? It is embarrassing that VS is still stuck on the old .NET Framework when you are promoting modern .NET. How about eating your dogfood? And if there are gaps in .NET that block moving Visual Studio over, maybe fix them?
I do hope we don’t have to spend another decade waiting for you to catch up, like we did with 64 bit VS…
And about the UI, I’d prefer spending resources to make every dialog in VS consistently styled according to theme (looking at you, Options window!).
Well many people and companies can still be using older .net framework versions. You can just select desired .NET and use it. Myself for example, i was working in a mouse&keyboard support for xcloud, i’ve used .NET Framework 8.0 to create winforms stuff (because Designer load extremely faster comparated to .NET 5/6/7).
“.NET Framework 8.0” – there is no such thing. You clearly have no idea what you are talking about…
.NET Framework is dead. It has seen no improvements in 10+ years, compared to each year’s significant improvements in .NET. And Microsoft should certainly lead the way by having their flagship IDE use the latest version of their own platform.
I liked the new UI but the spacing between some controls is quite large, does it make less things fit on the screen. At least gives us options to control spacing, specially in context menus and tabs bars.
Another thing, would it be possible someday to add the line height option in the code editor? Sometimes I would like to adjust the line size in the visual studio text editor but there is no such option. It makes similar to VSCode that we can manually control the desired line height.
My major pain point are the menus, especially the context menus in the editor and the solution explorer. Every extension adds its own 5 entries or more, and most of those menu items in the editor and solution explorer could be actually “CONTEXT” sensitive and not just a collection of everything that could be done in this window.
A right click in an empty line in a C# editor shows at least 25 menu entries that can not be invoked there or just make no sense to invoke there.
Toolbars: for the most part I dont care about the toolbars, I rip them apart anyway to the minimum and leave only the ones I dont want to learn a shortcut for because I use them rarely but not rarely enough to leave them in the menu only.
Menus: make them smart not big.
Solution explorer: needs more contrast not less, I dont care about the outline but the selection in it.
Tabs: need improvement, yes, but larger isnt good. Better coloring and organizing.
I like that
Thanks All
Please, no more regressions or less productivity like the unuseable “New Project dialog”, the “Start Screen (instead of the Start Page)” or Windows 11. Please, no more mobile first, touch first, cloud first regressions and unproductivity.
It ain’t broken. Please, don’t fix it!
All icons, toolbars, menus and lists should be as compact as possible to allow efficient work. We are not average users, we are professional developers!
Please provide us a minimalistic design, similar to what JetBrains offers with Rider. By the way, I have been using Rider for three years now mostly because of its design. Most of the .NET developers I know prefer using keyboard shortcuts and don’t rely on buttons. For those who prefer a more traditional design, you can offer an older layout. By the way, Rider supports 2 layouts right now.
It’s as simple as that.
Rider minimalistic design:
https://i.postimg.cc/rF7xLR9D/Rider.png
P.s.: All icons/actions can be customized (added, removed, rearanged) 🙂
I like the look of this! I would like the whole “chrome” to zoom in/out as you can with VS Code.
Hello! Can JavaEE development features be introduced in Visual Studio 2022 17.x? We have been waiting for this for a long time, Microsoft also released their own JDK version in 2020, we have been waiting for more than 20 years since Microsoft removed Java development features from Visual Studio in 2000, now is the time for Microsoft Reintroducing the JavaEE development function provides a more convenient and efficient way for Microsoft Azure Java developers to develop Azure Spring Apps cloud computing applications, instead of switching back and forth between multiple IDEs, which is too expensive for developers to learn. High, if the JavaEE development function can be integrated into Visual Studio, it will be more conducive to the rapid advancement, expansion and widespread popularization of Microsoft Azure business in various regions of the world. Hope you can consider this proposal. Thanks!😜
Just learn from vs code!
Absolutely not.
It is recommended that all UI elements of Visual Studio 2022 be transformed with modern UI design ideas, and some advanced UI design ideas and elements such as IOS and Android can be absorbed and presented in Visual Studio 2022. It is recommended to improve the rendering capabilities of UI fonts and editor fonts so that it can increase the rendering of modern high-definition fonts. It is recommended to migrate VSCode’s shortcut key setting UI interaction window to Visual Studio 2022 to enable it to have modern shortcut key setting capabilities. It is very supportive to upgrade and transform the various elements of Visual Studio 2022 UI in a more thorough, reasonable and friendly route. Let Visual Studio 2022 (the first IDE in the universe) continue to maintain its industry-leading, tenacious, renewed vitality and vitality, as well as an excellent user experience.
建議將 Visual Studio 2022 所有的UI元素都應用現代UI設計思想來進行改造,可以吸取IOS、安卓等一些先進UI設計思想與元素到 Visual Studio 2022 身上來呈現。建議改善UI字體與編輯器字體的渲染能力使其可以增加對現代高清字體的呈現。建議將VSCode的快捷鍵設置UI交互窗口遷移到 Visual Studio 2022 身上來使其擁有現代化的快捷鍵設置能力。非常支持對 Visual Studio 2022 UI各個元素進行更加徹底、更加合理、更加友好的路線進行升級與改造。讓 Visual Studio 2022 (宇宙第一IDE) 得以繼續保持業內領先的、頑強的、煥然一新的活力與生命力以及絕佳的用戶使用體驗感。
😜👍🤞😊💖
> We know that cognitive load is reduced by minimizing visual clutter, which is often achieved by increasing the amount of spacing between controls.
Please don’t. I have never met anyone that wanted that. Everyone whom has voiced an opinion to me on the matter has always expressed frustration at the amount of space between things.