Microsoft-ui-xaml: Proposal: Re-add Background Acrylic to NavigationView in expanded mode

[carmellolb]

As stated a while ago, BG Acrylic should be re-added to NavigationView in expanded mode. I am proposing this again, in hope of it coming back with WinUI 3.0.
-->

Proposal: Re-add Background Acrylic to NavigationView in expanded mode

Summary:
BG Acrylic was removed a while ago, in favor of a plain grey, the fallback color. Acrylic is a key, major feature of Fluent Design that was removed without logical reason and which the removal of will almost definitely receive backlash in the future, for good reason. It provides depth, and is beautiful. It is a huge disappointment to me, and a very large amount of other people. I highly disagree with removing it. It was removed because of the claim that “it was distracting”, but it wasn’t. In fact, the grey next to white is more distracting than BG Acrylic ever was, because the white pane and the grey pane are the same material (or lack of), so therefore attention is drawn to the Navigation pane, which is what you is not wanted, am I correct? Acrylic is a different material than plain white, so unless the Acrylic is very transparent, which it doesn’t need to be, then attention is not fully drawn to the Navigation pane.

Also, with an effect such as Background Acrylic, you can see what is behind the window. So therefore, in the real world, if something shines through to what is behind it, it is likely in the back. Like if you have a set of real objects, piled on top of each other, the ones on top would be transparent only to the object acting as the base for the other objects, but the object on the bottom would be transparent to whatever is below the objects. Therefore, using BG Acrylic is the right choice for NavView in expanded mode because it makes it appear as if it were in the back, which draws attention tot the main content on the right, rather than NavigationView itself, which is what is wanted, correct?

Also, adding an inset shadow to the left pane will make it appear as if the main pane on the right is in front, which will completely eliminate any distracting elements of the Acrylic. It doesn’t need to be super transparent, but please, I beg you, bring BG Acrylic back!

Fluent Design may have evolved into a system that is mainly focused on coherence and hierarchy rather than visuals, but visuals matter TOO, unlike what you guys seem to believe. Both are important! And you guys don’t seem to be putting yourselves in the users’ shoes. Look around, who is asking for all of these things you are implementing? Not many. They are great, but no one asked for them. Who asked for a transparent material? THOUSANDS. Maybe even MORE. Look on another page about this on this GitHub page! Look on Windows Feedback Hub! Look on social media! Everyone wants it! Yes, hierarchy, coherence, controls, attention, etc is all very important, but what the majority of your users count on you to implement is a beautiful visual design. And you did just that.
And then removed it.

Please bring Background Acrylic back to NavigationView panes!

Rationale:
It creates depth.
It makes apps beautiful, and unique from other operating systems, like what everyone wants!
It helps with visual hierarchy.

[kmgallahan]

This does not make my experience using the Settings app better in any way:

[carmellolb]

This does not make my experience using the Settings app better in any way:

Settings’ Acrylic is very transparent. It can be a bit much. Settings’ version may be a bit distracting. But it doesn’t need to be that transparent. Also, you said it doesn’t make it better, but does it make it worse? Because for a huge majority of people, it does make it better. And if you don’t like it, why don’t you simply turn transparency off? What we want is CHOICE!

[kmgallahan]

but does it make it worse?

Yes, it makes usability worse due to:

• Variable and lower than desired text contrast ratios
• Unintended coloration of menu elements that has no bearing on application context
• Can be more difficult to locate the selection indicator
• All the above multiplied many times over if a video is playing in the background

And if you don’t like it, why don’t you simply turn transparency off?

Telling users to disable a system-wide setting is not the right approach when deciding how and where to make use of acrylic.

Acrylic is a key, major feature of Fluent Design that was removed without valid reason.

False. The acrylic documentation provides well thought out reasoning and guidance for how to use it appropriately. More reasons were further identified the first time you opened this issue.

[carmellolb]

but does it make it worse?

Yes, it makes usability worse due to:

• Variable and lower than desired text contrast ratios
• Unintended coloration of menu elements that has no bearing on application context
• Can be more difficult to locate the selection indicator
• All the above multiplied many times over if a video is playing in the background

And if you don’t like it, why don’t you simply turn transparency off?

Telling users to disable a system-wide setting is not the right approach when deciding how and where to make use of acrylic.

Acrylic is a key, major feature of Fluent Design that was removed without valid reason.

False. The acrylic documentation provides well thought out reasoning and guidance for how to use it appropriately. More reasons were further identified the first time you opened this issue.

The issues you listed are all when Acrylic is very transparent. It could simply use the transparency level of the taskbar and start menu, which they did not remove Acrylic from!

[shaheedmalik]

This just reminds me that the settings app needs to be retemplated.

[carmellolb]

This just reminds me that the settings app needs to be retemplated.

Oh no, does this mean Acrylic will be gone from yet another place?

[mdtauk]

This just reminds me that the settings app needs to be retemplated.

Oh no, does this mean Acrylic will be gone from yet another place?

PLEASE NO, don't take away the Acrylic from Settings!!!

[duke7553]

The acrylic in the Settings app looks simply out of place and distracting.

[duke7553]

With all due respect, if you want full Acrylic in your app by default then by all means you can implement it, but there is a strong consensus among the community and designers that it is distracting and becomes unappealing after extended exposure. I think this issue should be closed because it doesn't fit the direction of this UI framework. See: https://github.com/microsoft/microsoft-ui-xaml/issues/761

[mdtauk]

With all due respect, if you want full Acrylic in your app by default then by all means you can implement it, but there is a strong consensus among the community and designers that it is distracting and becomes unappealing after extended exposure. I think this issue should be closed because it doesn't fit the direction of this UI framework. See: #761

Define Strong Consensus?

The conversation doesn't have to be Acrylic or no Acrylic. But what percentage transparency should be the default and recommendation.

I believe Settings uses a 60% value, but changing it to 80% would preserve the transparency, but make it less "distracting".

So why not update the AcrylicBrush theme resources used by the controls, to use a different percentage opacity?

[carmellolb]

The acrylic in the Settings app looks simply out of place and distracting.

Its transparency can be simply reduced.

[carmellolb]

With all due respect, if you want full Acrylic in your app by default then by all means you can implement it, but there is a strong consensus among the community and designers that it is distracting and becomes unappealing after extended exposure. I think this issue should be closed because it doesn't fit the direction of this UI framework. See: #761

Define Strong Consensus?

The conversation doesn't have to be Acrylic or no Acrylic. But what percentage transparency should be the default and recommendation.

I believe Settings uses a 60% value, but changing it to 80% would preserve the transparency, but make it less "distracting".

So why not update the AcrylicBrush theme resources used by the controls, to use a different percentage opacity?

If AcrylicBrush was less transparent by default, then it could be re-added into NavigationView in expanded mode without being distracting.

[carmellolb]

With all due respect, if you want full Acrylic in your app by default then by all means you can implement it, but there is a strong consensus among the community and designers that it is distracting and becomes unappealing after extended exposure. I think this issue should be closed because it doesn't fit the direction of this UI framework. See: #761

There is also a “strong consensus” across thousands of people on many platforms, as mentioned in the description of this proposal, to do the opposite. With all due respect, there are just as many other people that believe the opposite.

[Felix-Dev]

@duke7553
Second what @mdtauk and @carmellolb have been saying (and what we've been saying since a few months now in other issues in this repo). It's not about adding back "full acrylic" but replacing it with a less strong acrylic effect. @mdtauk is proposing using an 80% acrylic brush and I have been pointing to the acrylic brush used in the Windows shell (jump lists, start menu,...) and even the acrylic brush introduced in the recent Microsoft ToDo UI update (which is even less strong than the formerly mentioned Windows shell acrylic) as possible replacement candidates.

Windows does not have a homogenous group of users - especially when it comes to its UI - and while you will certainly find folks agreeing with you, you can be just as sure that there will also be dissenting users. The design approach should respect the different opinions and I'm convinced a revised acrylic surface for the navigation menu is the way to go here.

Also bringing this recent discussion to the attention of the team again @YuliKl (I know you have just a few weeks ago given us an update on the acrylic surface in NavigationView.)

[mdtauk]

There is an option to turn of transparency effects if a user really finds it distracting. I think that more than covers the situation for those who don't want it.

[carmellolb]

@duke7553
Second what @mdtauk and @carmellolb have been saying (and what we've been saying since a few months now in other issues in this repo). It's not about adding back "full acrylic" but replacing it with a less strong acrylic effect. @mdtauk is proposing using an 80% acrylic brush and I have been pointing to the acrylic brush used in the Windows shell (jump lists, start menu,...) and even the acrylic brush introduced in the recent Microsoft ToDo UI update (which is even less strong than the formerly mentioned Windows shell acrylic) as possible replacement candidates.

Windows does not have a homogenous group of users - especially when it comes to its UI - and while you will certainly find folks agreeing with you, you can be just as sure that there will also be dissenting users. The design approach should respect the different opinions and I'm convinced a revised acrylic surface for the navigation menu is the way to go here.

Also bringing this recent discussion to the attention of the team again @YuliKl (I know you have just a few weeks ago given us an update on the acrylic surface in NavigationView.)

Yes, the Acrylic in the To Do app is a perfect example of what they should implement. Not too strong, not at all distracting, but provides depth, and beauty.

[shaheedmalik]

@duke7553
Second what @mdtauk and @carmellolb have been saying (and what we've been saying since a few months now in other issues in this repo). It's not about adding back "full acrylic" but replacing it with a less strong acrylic effect. @mdtauk is proposing using an 80% acrylic brush and I have been pointing to the acrylic brush used in the Windows shell (jump lists, start menu,...) and even the acrylic brush introduced in the recent Microsoft ToDo UI update (which is even less strong than the formerly mentioned Windows shell acrylic) as possible replacement candidates.
Windows does not have a homogenous group of users - especially when it comes to its UI - and while you will certainly find folks agreeing with you, you can be just as sure that there will also be dissenting users. The design approach should respect the different opinions and I'm convinced a revised acrylic surface for the navigation menu is the way to go here.
Also bringing this recent discussion to the attention of the team again @YuliKl (I know you have just a few weeks ago given us an update on the acrylic surface in NavigationView.)

Yes, the Acrylic in the To Do app is a perfect example of what they should implement. Not too strong, not at all distracting, but provides depth, and beauty.

I'm not even sure that is even see-through.

[carmellolb]

@duke7553
Second what @mdtauk and @carmellolb have been saying (and what we've been saying since a few months now in other issues in this repo). It's not about adding back "full acrylic" but replacing it with a less strong acrylic effect. @mdtauk is proposing using an 80% acrylic brush and I have been pointing to the acrylic brush used in the Windows shell (jump lists, start menu,...) and even the acrylic brush introduced in the recent Microsoft ToDo UI update (which is even less strong than the formerly mentioned Windows shell acrylic) as possible replacement candidates.
Windows does not have a homogenous group of users - especially when it comes to its UI - and while you will certainly find folks agreeing with you, you can be just as sure that there will also be dissenting users. The design approach should respect the different opinions and I'm convinced a revised acrylic surface for the navigation menu is the way to go here.
Also bringing this recent discussion to the attention of the team again @YuliKl (I know you have just a few weeks ago given us an update on the acrylic surface in NavigationView.)

Yes, the Acrylic in the To Do app is a perfect example of what they should implement. Not too strong, not at all distracting, but provides depth, and beauty.

I'm not even sure that is even see-through.

What are you talking about? Open a surface that uses it and put something behind it. It IS see through.

[shaheedmalik]

@duke7553
Second what @mdtauk and @carmellolb have been saying (and what we've been saying since a few months now in other issues in this repo). It's not about adding back "full acrylic" but replacing it with a less strong acrylic effect. @mdtauk is proposing using an 80% acrylic brush and I have been pointing to the acrylic brush used in the Windows shell (jump lists, start menu,...) and even the acrylic brush introduced in the recent Microsoft ToDo UI update (which is even less strong than the formerly mentioned Windows shell acrylic) as possible replacement candidates.
Windows does not have a homogenous group of users - especially when it comes to its UI - and while you will certainly find folks agreeing with you, you can be just as sure that there will also be dissenting users. The design approach should respect the different opinions and I'm convinced a revised acrylic surface for the navigation menu is the way to go here.
Also bringing this recent discussion to the attention of the team again @YuliKl (I know you have just a few weeks ago given us an update on the acrylic surface in NavigationView.)

Yes, the Acrylic in the To Do app is a perfect example of what they should implement. Not too strong, not at all distracting, but provides depth, and beauty.

@duke7553
Second what @mdtauk and @carmellolb have been saying (and what we've been saying since a few months now in other issues in this repo). It's not about adding back "full acrylic" but replacing it with a less strong acrylic effect. @mdtauk is proposing using an 80% acrylic brush and I have been pointing to the acrylic brush used in the Windows shell (jump lists, start menu,...) and even the acrylic brush introduced in the recent Microsoft ToDo UI update (which is even less strong than the formerly mentioned Windows shell acrylic) as possible replacement candidates.
Windows does not have a homogenous group of users - especially when it comes to its UI - and while you will certainly find folks agreeing with you, you can be just as sure that there will also be dissenting users. The design approach should respect the different opinions and I'm convinced a revised acrylic surface for the navigation menu is the way to go here.
Also bringing this recent discussion to the attention of the team again @YuliKl (I know you have just a few weeks ago given us an update on the acrylic surface in NavigationView.)

Yes, the Acrylic in the To Do app is a perfect example of what they should implement. Not too strong, not at all distracting, but provides depth, and beauty.

I'm not even sure that is even see-through.

What are you talking about? Open a surface that uses it and put something behind it. It IS see through.

If it is already there, then their is no need to add it?

This just reminds me that the settings app needs to be retemplated.

Oh no, does this mean Acrylic will be gone from yet another place?

PLEASE NO, don't take away the Acrylic from Settings!!!

The settings version is one of poorest implementations of it. It was the the reason it was taken away.

[carmellolb]

@duke7553
Second what @mdtauk and @carmellolb have been saying (and what we've been saying since a few months now in other issues in this repo). It's not about adding back "full acrylic" but replacing it with a less strong acrylic effect. @mdtauk is proposing using an 80% acrylic brush and I have been pointing to the acrylic brush used in the Windows shell (jump lists, start menu,...) and even the acrylic brush introduced in the recent Microsoft ToDo UI update (which is even less strong than the formerly mentioned Windows shell acrylic) as possible replacement candidates.
Windows does not have a homogenous group of users - especially when it comes to its UI - and while you will certainly find folks agreeing with you, you can be just as sure that there will also be dissenting users. The design approach should respect the different opinions and I'm convinced a revised acrylic surface for the navigation menu is the way to go here.
Also bringing this recent discussion to the attention of the team again @YuliKl (I know you have just a few weeks ago given us an update on the acrylic surface in NavigationView.)

Yes, the Acrylic in the To Do app is a perfect example of what they should implement. Not too strong, not at all distracting, but provides depth, and beauty.

@duke7553
Second what @mdtauk and @carmellolb have been saying (and what we've been saying since a few months now in other issues in this repo). It's not about adding back "full acrylic" but replacing it with a less strong acrylic effect. @mdtauk is proposing using an 80% acrylic brush and I have been pointing to the acrylic brush used in the Windows shell (jump lists, start menu,...) and even the acrylic brush introduced in the recent Microsoft ToDo UI update (which is even less strong than the formerly mentioned Windows shell acrylic) as possible replacement candidates.
Windows does not have a homogenous group of users - especially when it comes to its UI - and while you will certainly find folks agreeing with you, you can be just as sure that there will also be dissenting users. The design approach should respect the different opinions and I'm convinced a revised acrylic surface for the navigation menu is the way to go here.
Also bringing this recent discussion to the attention of the team again @YuliKl (I know you have just a few weeks ago given us an update on the acrylic surface in NavigationView.)

Yes, the Acrylic in the To Do app is a perfect example of what they should implement. Not too strong, not at all distracting, but provides depth, and beauty.

I'm not even sure that is even see-through.

What are you talking about? Open a surface that uses it and put something behind it. It IS see through.

If it is already there, then their is no need to add it?

This just reminds me that the settings app needs to be retemplated.

Oh no, does this mean Acrylic will be gone from yet another place?

PLEASE NO, don't take away the Acrylic from Settings!!!

The settings version is one of poorest implementations of it. It was the the reason it was taken away.

Then why can it be reimplemented in a better way rather than being removed? This is the all or nothing approach, which is a very bad practice.

[Felix-Dev]

@carmellolb @shaheedmalik Please stop creating these "extended quotation" messages. It makes it very hard to see the actual reply. Much appreciated 🙂

[Elttob]

Having read all of the above, here's what I know and what I'm understanding;

• There is no consensus either way on this issue (some people want it to stay the same, some people want it gone, some people want their own variant of it, etc.)
• The current implementation of Acrylic is inconsistent across the UI (Settings vs To-Do - Settings has too much transparency, but To-Do doesn't have this issue)
• The current proposed solution (removing Acrylic from Nav'nView entirely) is divisive
• The current proposed solution is already available via disabling Transparency effects in Settings

Additionally, from my personal experiences, I struggle to separate the navigation UI from the main area when Acrylic is turned off. This also occurs in older versions of Windows 10 where Acrylic didn't exist; therefore I understand this issue as an accessibility/usability issue moreso than an aesthetic/visual appeal issue.

Given the above, I would agree that this decision needs to be revisited, and that a compromise should be struck that balances the depth/material differentiation/context retention/aesthetic appeal of Acrylic with the accessibility/simplicity of solid colour.

My opinion on how that could be done would be to have an Acrylic effect more similar to the To-Do app, where the transparency is reduced significantly, such that the text:background colour contrast remains sufficiently high, and the effect doesn't draw attention, while still subtly providing depth and context, and importantly, separating the navigation UI from the main area.

[carmellolb]

@mdtauk @Felix-Dev @Elttob @shaheedmalik
Something just dawned on me. With an effect such as Background Acrylic, you can see what is behind the window. So therefore, in the real world, if something shines through to what is behind it, it is likely in the back. Like if you have a set of real objects, piled on top of each other, the ones on top would be transparent only to the object acting as the base for the other objects, but the object on the bottom would be transparent to whatever is below the objects.

Therefore, using BG Acrylic is the right choice for NavView in expanded mode because it makes it appear as if it were in the back. And as @chigy stated in a previous version of this proposal, attention should be drawn to the content on the right, the main content, not the navigation pane. And using background acrylic does just that, by letting the eye perceive it as being in the back.

This is just further reason to re-add BG Acrylic to NavigationView.

---

I just added this comment to the proposal.

[YuliKl]

I appreciate your passion about this subject but don't have anything new to add. In other issues, I have already explained the rationale for acrylic having been removed. The introduction of WinUI 3.0 in no way changes the principles behind the Fluent Design System. So this issue remains a duplicate of #716.

As several of you have noted, there are differences across Microsoft apps in how/at what transparency acrylic is utilized. Neither Settings nor To Do use the NavigationView control, so fixing this issue won't promote consistency. We already provide multiple AcrylicBrush ThemeResources with different transparencies. App developers passionate about having acrylic in their NavigationViews can easily customize their Panes to use acrylic.

All the tools for customization are in place. I just don't have the blessing of the Fluent design team to change NavigationView's default appearance.

[mdtauk]

Here is an illustration of both 60% and 80% acrylic

[carmellolb]

Here is an illustration of both 60% and 80% acrylic

This is perfect! Acrylic is still visible, and it is not distracting, but still beautiful. Why on earth can they not implement this?