Proposal: Update the corner radii of common controls to be consistent with web and app style direction

[sravya03]

Proposal: Update default control styles with rounded corners and make them easy to customize

---

Corner Radius (aka Rounded Corner) How-To document PR is created.

This will be added to docs.microsoft.com as a documentation. It will be a new page under https://docs.microsoft.com/en-us/windows/uwp/design/style/.

Ask to community: I am trying out writing a little more "background explanation (WHY)" that our customers have expressed we provide with our documentation in some of our focus groups. I would like feedback as this does not follow normal documentation pattern.

Are those extra information useful/helpful, not relevant, other info missing, etc.?

---

Summary

Update default control styles with rounded corners and make them easy to customize. Developers should not have to retemplate the controls to "unround" the corners or round them further.

Rationale

Problems today:

• XAML controls are inconsistent with how web and mobile apps are evolving – this highlights the inconsistency across app ecosystem on Windows when these UI are used intermixed with each other.

• There are many different levels of corner rounding in the market today but the way XAML controls are architected require those developers who wants to update to retemplate all the controls, locking them to a version of the control that will not be able to take advantage of future updates as easily.

Functional Requirements

#	Feature	Priority
1	When developers use common controls as is, all the controls are consistent with each other. (Update default control style.)	Must
1.1	Users experience form controls (e.g. button, text box, etc.) with rounded corner.	Must
1.2	Users experience popup/transient menu type controls (e.g. flyout, CommandBarFlyout, etc.) with rounded corner and they look appropriate with shadow.	Must
1.3	Users experience "bars" with rounded corners (e.g. selection bar, scrollbar, etc.)	Must
2	When developers use the controls in a normal use case, there will be no perceived performance issue or slowness in rendering	Must
3	Developers have flexibility to style values of corner radii without retemplating. (This is tracked by #684.)	Should
4	Control update feel coherent with the same controls used by Fabric, Edge, and Xbox	Should
5	Users experience fully circular slider thumb that feels more touch friendly.	Should
6	Developers are able to round the popup/transient menu type controls' corner further and users do not experience visual glitch	Could
7	Users experience rounded keyboard focus rectangle	Could
8	Controls with rounded corners are rendered in performant way when they are used in more stressful/less normal use cases (e.g. 100s of rounded corners are used at once, large surface has rounded corner that is persistent (i.e. not temporary or transient))	Could
9	Update controls to render with more performant ninegrid so there are less measurable performant impact (this is measurable by data, but still not perceivable by user as in number 4 above)	Could
10	Make it possible to round the inner and outer lines of border individually rounded vs. not	Won't
11	When performance is measured, there is no difference between when the corner is not round vs. round (this is physically impossible)	Won't

Important Notes

There are three categories of changes being proposed (requirement number 1.1, 1.2, and 1.3) and here are mock up of those.

Here are relevant visual comp files: https://github.com/microsoft/microsoft-ui-xaml-specs/tree/user/chigy/roundedcorner/active/RoundedCorner/ImageFiles

Courtesy of @mrlacey , we have this easier to view version of the above file folder: https://github.com/mrlacey/microsoft-ui-xaml-specs/blob/RoundedCornerVisualizations/active/RoundedCorner/ImageFiles/index.md

Form type controls (req 1.1) • Button • CheckBox • ComboBox • DropDownButton • Slider • SplitButton • ToggleButton • ToggleSplitButton • Flipview • GridView • ListView • TreeView • ContentDialog • AutoSuggestBox • PasswordBox • RichEditBox • TextBox • DatePicker • CalendarDatePicker • Tab control

Popup/transient menu type controls (req 1.2) • CalendarDatePicker • DatePicker • TimePicker • Flyout • TeachingTip • ToolTip • DropDownButton • SplitButton • Slider • AutoSuggestBox • CommandBarFlyout • MenuFlyout • ComboBox • ColorPicker • MediaPlayerElement • ContentDialog • MenuBar • ToggleSplitButton

Bars (req 1.3) • NavigationView • Pivot • ScrollIndicator • ProgressBar • Slider • ColorPicker • MediaPlayerElement • WebView (not a part of XAML change)

User Feedback

Windows 10 Reddit Thread

Open Questions

[mdtauk]

This should be a wider project than just the rounded corners on buttons etc as used by Fabric.

• Buttons
• Spinners/ProgressRing
• Indeterminate ProgressBar
• Checkboxes & Radio Buttons
• ComboBoxes and TextFields And so on.

Xbox will continue to have different requirements, but with a new set of Xbox consoles on the way, perhaps the Microsoft Design teams can work together to align everything in time for WinUI 3.0 and Xbox Next.

Fabric seems to be getting a lot of focus at the moment, what with it's cross platform and PWA use cases. So perhaps Fabric becomes the blueprint - at least for the Compact Density, and move from 2px to 4px as a minimum measurement - and then you extrapolate the touch affordances and fill out the missing control states.

The ThemeShadows will need to account for the rounded corners. And Acrylic surfaces should probably include inner and outer borders to ensure they appear elevated from the backgrounds.

[chigy]

@mdtauk As requirement number 4 states, there's a plan to rationalize this change with Xbox. That said, this specific feature is limited to rounded corner only to keep the work clearly scoped. Please feel free to open separate requests for other design suggestions you have.

BTW, I don't quite understand your feedback on inner and outer borders for Acrylic surfaces? Is it the Xbox design you are mentioning since we currently do not use two borders as you specify.

[mdtauk]

@chigy Sure with the Xbox, that is its own thing. But the point is the rounded corners need to work on all the relevant controls.

I am not aware of the internal figma design specs the Fluent Team may or may not have agreed on - but it needs to be more than Buttons.

Fluent Web uses a 2px corner radius for its rounded corners, but Fluent XAML has tended to use 4px as a base measurement. Then there is the CompactDensity templates which would probably use the same metrics as FluentWeb?

I made a comparison image of Xbox Fluent and Fabric shared controls, and how different they look. So there is more than the rounded corners that needs to be done whilst these control templates are being looked at.

Ignore the Xbox stuff

[chigy]

@mdtauk , For you to get an impression this is only about button, I must not have speced clearly... Rest assured, it is not. See the requirements number 1 and their sub items. This is about all of the controls.

I have not had chance to publish design file but the corner radius we are planning are indeed 2px (4px for overlay UI). I actually do work very closely with Fabric team (i.e. Fluent Web) and we are evaluating these changes together. That said, making them match exactly the same is not our goal, but we do need to be coherent and feel part of the family when users see them side by side. See requirement number 4.

So there is more than the rounded corners that needs to be done whilst these control templates are being looked at.

It is in the works but we are doing this one by one/case by case basis. We are careful in making changes that makes sense not to change things for the sake of change.

[mdtauk]

@chigy Thank you, thank you, thank you!

I would love if you were able to share these designs with the community, not only because we all want to see where the controls and UI are going, but also so when the changes are implemented we can point out inconsistencies, as well as ensure future control proposals will feel at home!

Fabric Web as well as Fluent Web do seem to be ahead of the pack, and XAML as well as WPF and WinForms/Visual Styles should follow!

[Felix-Dev]

@chigy @mdtauk See my response here. Just seeing the UI concepts "to know where Fluent Design is going" or to point out inconsistencies in my opinion isn't enough. I elaborate on this point further in the linked issue above, but long story short I want there to be an active back-and-forth between the users and the Fluent Design (FD) team even when it comes to Design proposals.

@mdtauk I keep seeing you raise the point of updating the WPF/WinForms controls to match FD. I'm opposed to that as you will have WinUI if you want to ship a non-UWP app with Win10 native look & feel and the team(s) at MS only have finite resources which are best spent on making UWP/WinUI THE definite Windows Presentation platform. So, @YuliKl @chigy @pag3: Can you comment on this? Will the default WinForms/WPF controls be updated to have a new FD look or will the WinUI controls be the way to go for the latest-and-greatest design features as I understand it?

[mdtauk]

I posted this image in the Numberbox proposal, but it may have some relevance to the TextBox controls being updated.

The BorderThickness, FocusReveal on Focused State, Border on Disabled State.

The "Spin buttons" style could apply to the search button, password reveal button, clear text button.

[Felix-Dev]

The shadow around the border/control elements in focused state looks way too strong to me. Why do they even need shadows at all? Current version (just border color changing) is totally fine. Shadows might suggest the control (element) is being elevated to the foreground, which might make sense in 3D environments but certainly isn't needed for classic desktop environments and, one could argue, add some distraction.

[mdtauk]

The shadow around the border/control elements in focused state looks way too strong to me. Why do they even need shadows at all? Current version (just border color changing) is totally fine. Shadows might suggest the control (element) is being elevated to the foreground, which might make sense in 3D environments but certainly isn't needed for classic desktop environments and, one could argue, add some distraction.

The Glow around the control when focused, is the FocusVisualKind.Reveal and is controlled by the system. I had to approximate how it looks because I don't have the metrics to match the opacity and size exactly.

Take my use of it as an indication that I think the glow will make it's focus much clearer, than just changing the border colour.

[chigy]

@mdtauk , respectively, could you please limit conversation in this issue to rounded corner? I really would like to get feedback on rounded corner specifically and I am afraid this conversation is getting too confusing for those who might have just come here for that purpose.

That said, what you are showing looks to me like a Reveal Focus behavior. We looked into making the focus state stronger and did some user research and we confirmed they are way too strong just as @Felix-Dev mentions in his response. https://docs.microsoft.com/en-us/windows/uwp/design/style/reveal-focus

[mdtauk]

@chigy If the research shows that Reveal Focus on text control focus is too much, I will accept that. My examples do include the rounded corners, All be it with some slight changes to the border, which fit with the "... consistent with web and app style direction" part of the proposal.

[chigy]

@mdtauk and @Felix-Dev , I've now uploaded visual comps of the changes being proposed.

[mdtauk]

@chigy is there any possibility of reconsidering the border thickness of the text controls, combo boxes, check and radio controls.

Fabric Web opted for 1 epx thickness and I think this makes the controls more elegant, especially with the new rounded corners. At present they feel a little bulky.

Text boxes in compact mode would greatly benefit. But when focused the border can be thicker

Buttons use the background fill with 20% opacity by default. In Fabric Web, they use a 1 epx border and no fill. I think this may be a better solution, and would also allow buttons in a textbox control to fit nicely.

The NumberBox with spin buttons proposal illustrates this combination of Button and Text Field

Perhaps if the team is unwilling to make this style the new default, then a style/template can be included for it.

[mrlacey]

To aid viewing the visual comps created by @chigy I created this

[Zucce05]

Anecdotal and unprofessional feedback on the topic of rounded corners. Using both Edge and CrEdge, my number one problem with CrEdge is the rounded feel to the whole UI. It's hideous, and actively makes me dislike using it. If you add rounded corners to things, please add the ability to toggle sharp edge for those of us who don't want something that looks like a kid with safety scissors cut it out.

[chigy]

To aid viewing the visual comps created by @chigy I created this

@mrlacey, thank you so much!!

[chigy]

@chigy is there any possibility of reconsidering the border thickness of the text controls, combo boxes, check and radio controls.

@mdtauk , we have a few more visual changes being sorted out right now as to how to bucket the work (we want them to be individually addressable but coherent), one of them is what you are asking so stay tuned.

[chigy]

Anecdotal and unprofessional feedback on the topic of rounded corners. Using both Edge and CrEdge, my number one problem with CrEdge is the rounded feel to the whole UI. It's hideous, and actively makes me dislike using it. If you add rounded corners to things, please add the ability to toggle sharp edge for those of us who don't want something that looks like a kid with safety scissors cut it out.

@Zucce05 , Yes #684 will address your concern by being able to switch back to not rounded corner easily. That said, as you can see in our comp proposal, the corners are not that round to stay professional look.

[Felix-Dev]

@chigy I'm not a fan of the rounded corners design change as well, so I'm glad to hear there is an option to easily switch back. I don't think there will be a system-wide corner radius option though, will there (similar to setting a system-wide accent color)?

On the topic of the border thickness: I like the current thickness of buttons and the border thickness also feels rather unique to me in the current UI landscape. I rarely, if at all, see this border thickness in UI different from the UWP UI, so it always acts as a nice distinguisher: "The UI I'm currently looking at is UWP." I'd like to see the thickness stay as it currently is.

Looking at your posted visual comps, the only area where I find the border thickness to look weird is in the case of a TreeView with checkboxes. In that case, the thickness of the checkboxes looks too thick to me. It might be a misleading visual effect but it seems to me that standalone checkboxes have a thinner border thickness and it looks good to them. So, I would reduce the border thickness of checkbixes in a TreeView to match the visual effect of the normal checkbox border thickness.

[mdtauk]

@mdtauk , we have a few more visual changes being sorted out right now as to how to bucket the work (we want them to be individually addressable but coherent), one of them is what you are asking so stay tuned.

@chigy I have done some visual mock ups to illustrate the changes I mentioned, and brings the controls closer to Fabric Web's controls - but still using the Fluent control metrics.

The shadows added to the hover are used by the Fluent Web controls on the Microsoft Store webviews, but this can be ommitted by default, or the Z Translation can be achieved by a Theme animation which can be removed.

[Felix-Dev]

Looking at some of the design proposals by @mdtauk above, I clearly prefer the current border thickness of buttons, etc...

I'd also like to note that I'm not a fan of basing Windows Fluent Design on Fabric Web or other Web UI components so much - I want Windows to have a unique look, dictinct from what is going on with the web. Take Internet Browsers for example: Chrome is the most-widely used browser by a mile these days, yet does that mean the Edge Chromium-based browser should look exactly the same or only marginally different? Not in my view. As I said above, current UWP default control styles gives UWP (and thus Windows) a nice unique look. Something I'd love for the Windows Fluent team to consider (i.e. don't just change stuff for the sake of change).

[mdtauk]

@Felix-Dev Fabric Web is Microsoft's Web control designs based on Fluent. Chromium Edge is planning to use those control styles by default. But of course web designers can re-design their CSS controls, and devs can also choose their own templates for XAML controls.

I am not sure why Microsoft's control designs need to differ so much from Web to Windows. It just seems like different teams, not talking together. And developers still have the option to override. And these new defaults do not take affect unless the app is recompiled to WinUI 3.0

[chigy]

Looking at your posted visual comps, the only area where I find the border thickness to look weird is in the case of a TreeView with checkboxes.

@Felix-Dev, for this particular issue, I think it is just some odd bug of Figma exporting visual with somewhat weird scale. I double checked the actual build and actual Figma file that I exported the PNG from, they look OK.

[chigy]

RE: Popularity of rounded corner @mdtauk and @Felix-Dev , My colleague did an informal query of what the developers (they were mostly LOB/WPF/WinForms devs) think about us updating our controls with rounded corner during their sneak preview and they got applause from the audience with very good reception. We also get people complain about us not rounding corners on Twitter for Windows often.

So while I do respect your feedback (and I hope you have those coming), we have anecdotal data that indicates opposite of what I am hearing here from you. That said, that's why we are considering the way to change it back in case you wish to do so. Design is tricky as they are rather subjective. I cannot force you to wear red shirt if you don't like red, but if that's a "wear a red day," it might be of your interest to wear one not to stand out. If you catch what I mean... :)

[Felix-Dev]

Well, in the end it just comes down to personal preferrences. I think the current UWP default control styles look just fine and one big part for me is that they looking unique compared to what you see on the web or in popular apps like the Chrome browser or mobile OSs like Android. It's a nice breath of fresh air.

Now, I can see why MS wants to have different "default" styles for both Windows and Web for their design language. I do, however, get the feeling that the current direction is to make Windows look more like mobile apps/mobile OSes and I'm not really a fan of that (see "XAML controls are inconsistent with how web and mobile apps are evolving" in the issue proposal).

Devs can likely easily modify styles but most important for me is the default style MS will go with, as that styling will be used in all MS-provided apps (i.e. Settings) and thus will be a styling external devs will also base their work on (some more, some less).

@chigy

My colleague did an informal query of what the developers (they were mostly LOB/WPF/WinForms devs) think about us updating our controls with rounded corner during their sneak preview and they got applause from the audience with very good reception.

Isn't that perhaps the wrong audience to ask? What about every-day users? I did see quite a few users complaining about the recent rounded corners push in reddit and discord channels, for example (though you will also always have users who won't care or support that change).

As for the Twitter example: That's an app from a third-party which perhaps wants to have it's own unique brand styling. I'd be fine with that (after all, that's where your team comes in and adds cutomization support for control styles). But I certainly wouldn't use an external app as a reason to overhaul the official Design Language of Windows.

Long story short, it feels like the Windows Design team is set on styling Windows closer to the mobile-/web-world. Now, I only hope those changes won't be too radical and that Windows will still remain a unique look, making it easily distinguishable from other environments.

[mdtauk]

@Felix-Dev The Fabric Web controls are unique from other frameworks and the default web controls. They were recently updated to use Fluent Design, compared to the older look which was kind of like the Windows 10 MDL2 controls, and the Windows 8/WinJS controls.

The XAML controls currently still use their MDL2 control designs, some elements like the flyouts and menus use Fluent Design elements and materials.

Text Styles in Fluent and Fabric have been making more use of Bold and Semibold weights. The various Windows 10 concepts have used these too. But the Windows Shell and inbox apps have not all moved to this style yet.

Fabric Web and Fluent Web are the most recent changes to controls from Microsoft since Fluent Design was announced, and so it is natural that we look at those designs to help us find a direction where these UIs will go to. With WinUI 3.0 being a big change for the platform and all the controls given a fresh look to make them feel better, fresher, and more consistent with Microsoft's Fluent Design.

[chigy]

RE: Web consistency, Fluent, and being unique to Windows @Felix-Dev and @mdtauk , One of the Windows design team’s goals are “familiarity.” They’ve done a lot of user research with our customers (like you indicate, not our devs but our daily users) and found out that being different for no good reason is not a good thing as you could imagine (I’m super summarizing so this is not the exact test they did, so don’t quote me here). Windows need to attract new types of users whose experience with any technology might be starting out with Mobile or Web. Those users feel a huge gap when they are introduced to Windows and having “different” look and feel doesn’t help it. A small changes like rounded corner makes a huge difference in perception. Office team did a similar study with the similar results, thus we are moving forward with the rounded corner. We are not making this decision lightly or in a vacuum.

That doesn’t mean we make them exactly the same. If there are places where we can improve, we want that. We also want to be unique like Felix mention, but they need to be meaningful, not just difference in opinions. Those are places where we utilize Fluent unique treatments.

As I mentioned earlier in this discussion, I’m working very closely with Office, Windows, and Edge teams. Our design teams are eager to have one design that is coming out of Microsoft/Fluent so they are looking very carefully at differences and tying to eliminate where the differences do not make sense so that we have a starting point where we can evolve together.

It is very interesting, though, many of these changes were being incubated by these teams separately but they often arrived at very similar spots. Thinning of the border is something Office implemented first but Windows has been discussing about that for a while now. And these are all part of Fluent Design direction as Martin suggests.

[mdtauk]

RE: Popularity of rounded corner @mdtauk and @Felix-Dev , My colleague did an informal query of what the developers (they were mostly LOB/WPF/WinForms devs) think about us updating our controls with rounded corner during their sneak preview and they got applause from the audience with very good reception. We also get people complain about us not rounding corners on Twitter for Windows often.

So while I do respect your feedback (and I hope you have those coming), we have anecdotal data that indicates opposite of what I am hearing here from you. That said, that's why we are considering the way to change it back in case you wish to do so. Design is tricky as they are rather subjective. I cannot force you to wear red shirt if you don't like red, but if that's a "wear a red day," it might be of your interest to wear one not to stand out. If you catch what I mean... :)

RE: Web consistency, Fluent, and being unique to Windows @Felix-Dev and @mdtauk , One of the Windows design team’s goals are “familiarity.” They’ve done a lot of user research with our customers (like you indicate, not our devs but our daily users) and found out that being different for no good reason is not a good thing as you could imagine (I’m super summarizing so this is not the exact test they did, so don’t quote me here). Windows need to attract new types of users whose experience with any technology might be starting out with Mobile or Web. Those users feel a huge gap when they are introduced to Windows and having “different” look and feel doesn’t help it. A small changes like rounded corner makes a huge difference in perception. Office team did a similar study with the similar results, thus we are moving forward with the rounded corner. We are not making this decision lightly or in a vacuum.

That doesn’t mean we make them exactly the same. If there are places where we can improve, we want that. We also want to be unique like Felix mention, but they need to be meaningful, not just difference in opinions. Those are places where we utilize Fluent unique treatments.

As I mentioned earlier in this discussion, I’m working very closely with Office, Windows, and Edge teams. Our design teams are eager to have one design that is coming out of Microsoft/Fluent so they are looking very carefully at differences and tying to eliminate where the differences do not make sense so that we have a starting point where we can evolve together.

It is very interesting, though, many of these changes were being incubated by these teams separately but they often arrived at very similar spots. Thinning of the border is something Office implemented first but Windows has been discussing about that for a while now. And these are all part of Fluent Design direction as Martin suggests.

I am all in favour of changing the default controls, and the Fabric Web controls feel more elegant and polished than the current XAML control designs IMO.

But this is more than just changing templates, it is about exposing more properties which allow developers to override these changes easily without needing to re-template the whole control.

The new default CornerRadius values could be ThemeResources, something like <Thickness x:Name="ControlCornerRadius" Value="2,2,2,2"/> <Thickness x:Name="FlyoutCornerRadius" Value="4,4,4,4"/>

Then a dev can just override these in App.xaml - or apply CornerRadius="0" onto the controls they want to remain squared off.

Following this, I would also suggest that BorderThickness have it's defaults set to be 1epx instead of 2epx - but all the controls would use ThemeResources, something like: <Thickness x:Name="ControlBorderThickness" Value="1,1,1,1" <Thickness x:Name="ControlFocusedBorderThickness" Value="2,2,2,2" <Thickness x:Name="FlyoutInnerBorderThickness" Value="1,1,1,1" <Thickness x:Name="FlyoutOuterBorderThickness" Value="1,1,1,1"

So these can be overridden globally in App.xaml, or just in a Style applied to a few controls.

Set a new default, but allow overrides which do not require re-templating.

[chigy]

But this is more than just changing templates, it is about exposing more properties which allow developers to override these changes easily without needing to re-template the whole control.

@mdtauk , That's right and as I mentioned, it is tracked by change proposed with #684. Adding @kikisaints to this thread so she sees the good feedback you gave (but not quoting the whole thing as it will be huge. :)

[mdtauk]

@chigy As I was posting that last response, other things were added, so I had to include the quotes :)

I would love to hear more about the kinds of discussions the Windows UI teams have been having. I have been making control design ideas for the past few years for my own purposes and for twitter conversations, and some of the things now in Fabric Web and Office Xaml were things I had wanted to change. Border thicknesses, certain inconsistencies with Radio Buttons, Check Boxes, drop downs etc.

I am excited to see these changes develop, and am happy to be involved in the discussions going on here!

Thank you for taking my enthusiasm in the constructive way I intended, even if it may come across as pushy or opinionated.

[Felix-Dev]

I definitely applaud the decision to make customizing controls as simple as setting a property instead of having to re-template the whole control for a single change.

However, in the end, what I most want to see is increased personalization support in the OS: As you know by now, I'm not a fan of the proposed changes (subtle corner radius is one thing, reducing border thickness yet another) and I like the current design. On the other hand, we have users like @mdtauk who are clearly a huge fan of the proposed changes. Windows should make use of the new flexibility in those controls and give options to customize the look system-wide - for cases where it makes sense and also give developers the flexibility to opt-out of following the system settings.

Looking at border thinkness in particular, the proposed system makes poviding a system-wide option for corner radii extremely easy (just as with the accent color today, which is exposed as a resource apps can use). Especially seeing that the proposed corner radii changes are rather small, this might also be feasible design-wise for apps (and if the developer doesn't feel so, can always opt-out).

[chigy]

I would love to hear more about the kinds of discussions the Windows UI teams have been having.

@mdtauk , it is our intention to bring all the upcoming visual changes via GitHub so expect more of those to come. I also am planning on expanding documentation to include some of these background, but that's something I'm experimenting with so not sure if that's going to be a sure thing...

However, in the end, what I most want to see is increased personalization support in the OS... Windows should make use of the new flexibility in those controls and give options to customize the look system-wide - for cases where it makes sense and also give developers the flexibility to opt-out of following the system settings.

@Felix-Dev , the type of personalization we currently are looking at for Windows (I'm assuming something user can change from settings?) are things that impact the usability. I am not sure if rounded corner or border thickness are one of them. It is not Windows goal to make it so that user can design the whole entire UI as they wish. We still want to provide Windows design and rounded corner is one of a key design factor that I do not think is something meant for personalization... At least as of right now per the definition of personalization. Thank you for your feedback and I'll look for places where it makes sense to expose as we think of further design changes.

[mdtauk]

@Felix-Dev With the amount of customisation devs can do to the controls, it would be impossible to be consistent with any OS Settings regarding control design alterations.

@chigy As you bring the design comps for each of the new control designs to GitHub, it would be useful to include information Microsoft has gathered from any research studies as to why the changes will improve things. So rather than "We changed this from a triangle to a hexagon" it would be something like "when conducting a user comfort and familiarity experiment, it was found that when changing this button design from a triangle to a hexagon, more people found it easier to identify it as a button, and when compared to other platform UIs felt an affinity with this design" etc

[Felix-Dev]

@mdtauk

With the amount of customisation devs can do to the controls, it would be impossible to be consistent with any OS Settings regarding control design alterations.

I'm not talking about how external devs would honor that user setting - they can already style the controls today in any way they want - but about the look of Windows components. That means the Settings app, Clipboard, Snip & Sketch, UI elements in task bar flyouts (like the buttons in the network panel), etc...

I for one am barely using any UWP apps outside of MS provided ones so I don't have any problem with custom styles by external devs. I do interact daily with UWP elements in the Windows system though.

@chigy Correct, I was looking at a setting in the Win 10 Settings app where a user can change - to some extend - the look of the UI. It remains to be seen what would actually make sense and also be viable in terms of added work making UI characteristics changeable by the user. I do feel the smaller the changes being proposed are now (subtle corner radius) the more viable it will be to add an option to return to the previous style (squared controls).

One last thing: Win 10 has 800 million users and counting. Not everyone is so enthusiastic as Martin about the proposed changes and it would be nice if Windows would also try to accommodate those users. As you said, UI is highly subjective and if there is any possibility of adding flexibility into the UI system, MS should at least consider that. For Internet browsers, for example, there is a whole industry of theming, where not only colors are changed but also the look of UI elements such as tabs or the search bar: https://github.com/muckSponge/MaterialFox (Funny enough, that particular project adds rounded corners to Firefox - and I'm not a fan of rounded corners.) For the Windows system, however, users can't just create an own theme, so it would be nice if MS could provide UI customization options.

@mdtauk @chigy Please check out this reddit post to see that it is not just me who is not a fan of rounded corners. We have people disliking the whole move and also many calling for giving users choices for their Windows look so they can revert back to the current look.

[Neptune-mk2]

Alright so I was urged by many people to give some feedback to this thread because there is an inquiry to proposed changes in UI, mainly the idea of forcing rounded corners onto literally everything and as someone who is a both a graphic interface designer (mostly concept and design) and has used Windows 10 since it was even in development I am absolutely going to side with everyone who strongly dislikes the proposed change to add rounded corners to the entire OS, and strongly urge for these changes to not be done or either let the user have preference of whether they want rounded corners or sharp corners via a option in personalization.

In lament terms : Just keep them Square or make it optional at user level.

I have more than enough reasons but my biggest are simply the fact that Windows since Windows 8 has had square corners and pretty everything has been designed around this for years, this proposal is very much an attempt to adopt the very same rounded corners from the iOS and Android platforms for whatever reason. The bigger problem is doing this would not only increase the amount of inconsistency system wide but forcing such a "little" UI change that in reality is much bigger than what you realize would also cause inconsistency in the entire app eco-system because you will have developers that do not want to update their app simply because of a simple change like that.

In my opinion this should absolutely NOT be a developer choice, not only for the reasons stated above but, Windows has always been about customization and power, take the Windows 98 aka Classic theme for an example. When Windows XP came around many people still used Classic because it had more customization options than the Luna theme. XP did not force the Luna theme onto everyone at all, you still had the option to use Classic. This proposed change does NOT give you the option to retain square corners anywhere, it is forcing everyone to deal with something they may not like, a very bad thing in my opinion when it comes to letting a user customize the OS to their liking.

I know your probably thinking, "such a small change is not something that users would be interested in" or "letting the user customize too many things would confuse them" but I'm pretty sure any user would be able to understand what toggling between round and sharp corners or even a theme would do given the proper description and context. I will also add many people are definitely interested in having the option for this instead of having something else forced onto them against their will, see the Reddit post @Felix-Dev posted if you need any more proof of people not liking the idea of rounded corners everywhere.

Many people highly dislike even the proposal for rounded corners and many consider it a step backwards, even check the comments in several videos of the upcoming Hololens UI being rounded, majority of the comments once again are about strongly disliking all the rounded corners and there's even comments saying variations of "Microsoft throwing in the towel in the UI department and copying either Apple or Google", even though its not the first time Microsoft used rounded corners people now see it as a negative thing.

Again this should just really be a option or even a theme, its not even a new concept since Windows has had themes for years in previous versions, if anything this should be a message asking for the return of robust theming, instead of again forcing something onto everyone and reducing options.

[Felix-Dev]

I created a reddit post linking to this proposal so we can gather more feedback. Looking through the comments so far, I can say that many people appreciate the subtle approach with the rounded corners.

People are also calling out UI inconsistencies - even in official Win 10 MS apps, see Settings app and Security app (NavigationView extending into titlebar) - and also the differences between win32 system components and the newer UWP elements. As @SavoySchuler mentioned, this will hopefully be addressed with WinUI 3.0. It's not a specific point regarding this proposal but more of an "overarching" desire among many of us Windows users. Not so much about corners being round or not but consistency in the Windows system.

[mdtauk]

Consistency is the key here, and had been my main concern.

WinUI 3.0 is about changes to the XAML controls which affect inbox apps and Windows UI.

Fabric Web is it's own team, but all teams are communication together, and basing their decisions on Fluent Design, so my assumption is that Fabric Web's design is the latest thinking from Microsoft, and so consistency should prevail.

Xbox Next, Windows Lite and Windows Core OS will come with new shells, so that must be a consideration for the teams also - with Windows 10 for legacy support

[Neptune-mk2]

What @chigy said is exactly what I and many others have just been asking for, a more subtle change that would also allow people at user level instead of developer level to simply decide whether they want to see Sharp corners or Rounded Corners, similar to how Windows themes used to work.

[Felix-Dev]

Basing on what @Nepxune said above, it would perhaps be cool to give users a select range of values they could choose from for a system-wide corner radius. At least for small values in the range of 0 - 2 I think there wouldn't be any negative impact on meticulously designed UI. After all, these are very subtle changes and thus should still preserve the UI identity of Windows.

I do see though that even if UI customization will get added to Windows, there have to be limits, both in the number of elements changeable by the user and also the set of values a user can choose from. Otherwise, there is a risk of impacting existing UI negatively and also stray away too much from the desired Windows look by the Design Team.

[19lmyers]

I have a sort of a different perspective on this. Earlier in the thread I saw discussion about bringing Fabric UI (Web) and Windows (UWP) styles closer together, and this worries me a bit.

Here's some context: I have been a user of Microsoft Edge for years, and one of my favorite things about it was its UWP-inspired look and feel. When Edge Insider was revealed, I was very disappointed to see it used modified Chrome and Web UI design instead of its predecessor's UWP styling. While the round corners shown are very minimal, to the point where I have no problem with them, this thread is giving me the same sense of disappointment. I don't want to see Windows lose its unique (and superior!) look and feel in favor of matching ill-designed "web standards." In fact, I'd rather see aspects of Fluent UWP design make their way to Fabric!

[mdtauk]

I believe the plan for Edge is to eventually bring back Acrylic, and move the UI more towards a Windows/Fluent Design style.

But Windows is also moving slightly forward to hopefully bridge the divide.

It is not impossible to bring about a Setting in the OS to choose between rounded and non-rounded controls, it is impossible to impose it on all apps, and works in a totally different way to the XP era Visual Styles.

Also WinUI 3.0 is about separating the app platform and controls from the OS, and so it may not be a good decision to tie more of it together.

Of course as an app dev, you have the option to set the CornerRadius value on your controls to 0 to bring back the squared off controls.

[dphfox]

I support this push for small rounded corners, but I prefer the current vertical-handle slider control to the circle-handle slider control. The vertical handle feels more precise and is easier to figure out where it is at a glance. At least that's how I view it. Keep up the good work tho!

[mdtauk]

Is there a reason why the MediaTransport Scrub Bar Thumb is round with an outline, where as the proposed new Slider Thumb is a filled in circle?

I think the circle thumb is much more pleasing than the awkward lozenge/pill shape which doesn't fit any of the other controls.

[Tourniquet88]

I don't know if you guys remember it but even making the people tile in rounded corners were a big problem for a lot of Windows fans back in the day and that was just some minor change. For me having rounded corners everywhere would mean Windows would loose it distinctive look it has ever since the introduction of the metro design language and fluent design. Tbh the design language was always a big key for me what made uwp development attractive for me. It would be really sad to see it go and become generic.

[mdtauk]

Along with the TextBox and NumberBox design concepts I have done - here are some for the ComboBox and the EditableComboBox

[quantumfrost]

Nice job! I have a couple suggestions about the flyout menus. With the shadows demarcating the menu, do we really need the border? And IMO the selection highlight could cover the entire width of the flyout surface, without leaving gaps.

I appreciate the thinner unfocused borders, and the focus reveal glow should make it easier to see which element is focused while tabbing through the UI using a keyboard (I'd actually prefer it to be slightly stronger than above).

[mdtauk]

Nice job! I have a couple suggestions about the flyout menus. With the shadows demarcating the menu, do we really need the border? And IMO the selection highlight could cover the entire width of the flyout surface, without leaving gaps.

The selection highlight does cover the entire width, but I have placed a lighter inner border to the flyouts, which will help it lift from the surface along with the Acrylic effect and shadow - the inner border could be made more subtle however if its too strong - its more an idea than a fully final design proposal.

[Felix-Dev]

@mdtauk

It is not impossible to bring about a Setting in the OS to choose between rounded and non-rounded controls, it is impossible to impose it on all apps, and works in a totally different way to the XP era Visual Styles.

That's why I said making it optional for devs. Honestly, nothing really would change. Third-party apps already can ship with any look they want. If a company wants to ship their app with a rounded UI (Circle buttons,...) they are free to do so.

Also WinUI 3.0 is about separating the app platform and controls from the OS, and so it may not be a good decision to tie more of it together.

As I said above, I picture it similar to how the Accent Color (which the user can set in the settings) is handled today. Expose it as a resource controls can bind their corner radius to, that way, corner radius changes will be reflected in the app with no additional work for the devs.

[zag2me]

Just leaving my feedback from reddit here from a users perspective: “I love the clean rounded corner look from the proposal. Like everyone else though(on reddit), the consistency around the whole OS still needs a lot of love.”

[chigy]

Is there a reason why the MediaTransport Scrub Bar Thumb is round with an outline, where as the proposed new Slider Thumb is a filled in circle?

@mdtauk , as a matter of fact, that's something we are looking at, but that doesn't mean we will make the change so I am not setting expectations...