Visual Studio UI Refresh
Kaitlin Brooks
Cherry Wang
Dante Gagne
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.
Kaitlin Brooks Senior Art Director, Developer Division Design Team
Cherry Wang Design Developer, Developer Division Design Team
Light
Dark
111 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.
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…
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
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.
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.
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
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.
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.
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.
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! 😎
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!
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 😕. Tighter spacing may be useful if you have fat fingers and are 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 clean loose Webkit code is much easier to efficiently read than cramped crowded Chromium code), but I don’t believe 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.
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)
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.)
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…
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.