Microsoft-ui-xaml: Proposal: Improve reveal visual

[chigy]

Proposal: Improve reveal visual

Background

During pitch process for #1054, I was requested we track "reveal all up" topic as a new GitHub item.

Summary

Reveal is a unique to Windows experience that was introduced with Fluent. As we were re-evaluating the visual updates, we wanted to improve the reveal visual on some controls to more in line with cleaner look that the rest of the control set is headed.

Rationale

• Reveal is a unique to Windows experience and we want it to be great!
• We feel that there are small changes that make the experience better, but it needs to be looked at holistically.

Important Notes

Here are some places where design team identified could be improved, however we need to think this through to ensure it covers the entire set holistically (not yet done).

Open Questions

• Which controls and surfaces would benefit from improved reveal?
• There was an ask to remove the border reveal but what's the exact design if so?
• Reveal feels good on dark theme since it is light. How do we make it more delightful on light theme?
• When removal of outline reveal is requested, is it when the mouse is approaching the item or it is over the item? What's the exact behavior?

[mdtauk]

Initial thoughts, anything that interacts with a click, should have reveal.

_TextBox_

Edge UWP uses reveal on the 1px border around the Address Bar. This could be expanded to all Text Box and Form Picker controls

---

_Button_

The outline could only appear as a reveal effect

---

_Tabs_

Obviously the design is changing for the Tabs, but reveal could work for the unselected tabs

[chigy]

@mdtauk , the proposal wasn't clear (since we don't have a firm plan yet), but the direction our design team is going for is to not have the border reveal but have just the spotlight effect. Though I am not sure if it should be just for light theme since dark theme seem to do this well. I've opened this item to track ideas for now so thanks for jumping on. That said, if you could explorer doing reveal only with the spotlight effect and no border and let us know how it works out, that'll be a help. :)

[mdtauk]

@chigy I am surprised by the team asking for this. I can't help but feel this is similar to the proposal of adding a light inner border on flyouts. #895 Helping the surface stand out in both Light and Dark themes...

One way to make the spotlight effect work in Light theme, whilst taking away the border effect - would be to either ensure no reveal controls are placed on white surfaces.

The spotlight effect could add some darkness to the control's backplate which makes the spotlight element stand out.

But there are controls which already have a border, should Reveal really not do anything with them?

Text Boxes have a back colour, but on white they don't show up.

[mdtauk]

I know this darkening effect used to exist before it was removed from the light theme, but without borders, Reveal would be barely visible without it.

[jevansaks]

We stopped doing the darkening effect in light theme because we got a lot of feedback that it looked "too gloomy" and "like a storm cloud following me". So we changed to reveal always lightening in both dark and light theme -- which meant that in light theme there had to be a slightly darkened base layer that could be lightened up.

[mdtauk]

We stopped doing the darkening effect in light theme because we got a lot of feedback that it looked "too gloomy" and "like a storm cloud following me". So we changed to reveal always lightening in both dark _and_ light theme -- which meant that in light theme there had to be a slightly darkened base layer that could be lightened up.

If the Reveal borders are being taken away, then something will have to be done with the Outlined Buttons, or the Text Boxes and Pickers - which don't use a darkened plate.

Without pure white surfaces, the highlight may be more visible, but there has not been any progress on proposals to change the default Light and Dark Theme Resources.

[mdtauk]

I have started making a Figma file, for my various control designs I have been making over the past few months, and I came up with another idea for the reveal effect.

Probably out of scope as the request is to lose the borders, but I thought I would share it anyway.

Inner and outer border, to avoid the "gloomy" darkening, that would be needed for the Light Theme

[Felix-Dev]

I'm a fan of the border reveal effect and as @Chigy said it works just fine in Dark mode (it actually adds visual beauty to the UI without negative side effects, such as distraction). @chigy Can you please tell us why the Design team feels they have to remove the border reveal effect?

[chigy]

I'm a fan of the border reveal effect and as @chigy said it works just fine in Dark mode (it actually adds visual beauty to the UI without negative side effects, such as distraction). @chigy Can you please tell us why the Design team feels they have to remove the border reveal effect?

@Felix-Dev , I am trying to get to the bottom of the feedback. There are a few things going on... We currently do not make theme unique. Meaning light is opposite of dark, we don't make dark theme completely different from light. So to make light theme look better, removal is one option. Another is the fact many surfaces use HTML today and it doesn't support reveal. This would be inconsistency and coherence issue. That said, I'm trying to understand exactly what the desired design is so that we can propose technical solution if necessary.

[mdtauk]

@chigy Windows needs to find a way to expose the Accent Colours to WebViews and Edgium/PWAs. The Windows Store defaulted to blue, because it uses mostly HTML and Fluent Web controls and styles.

Reveal is something exclusive to Windows, and because HTML is not capable of making use of it right now, should not mean removing it from the OS.

Dark and Light theme colours could do with some updating, and not just inverting one to the other. Reveal would work better, if the Light Theme's window and acrylic fallback is not pure white, but having a slight and subtle darker part, to make the control pop - is a good compromise.

If everything in Windows was about bringing it into parity with "bog-standard" html - then the experience suffers.

It should be about the best for Windows apps and shell, and bring support for OS notions to web apps and web frameworks. Light and Dark media queries came about, because Windows Phone pioneered the ability to change from Light to Dark mode. Others have copied.

Accent Colour overrides should come next, and figuring out what kind of reveal effect is possible on the web.

[jevansaks]

I have started making a Figma file, for my various control designs I have been making over the past few months, and I came up with another idea for the reveal effect.

@mdtauk would you be able to share the effect recipe / formula you used to make the reveal effect? We've run into trouble with some of the designs in the past using effects that we can't do due to the limited blend modes we have available in Composition. Basically the "light" layer can use any effects it wants but when blending the light layer with the destination it has to be just a normal alpha blend.

We can also work with you to make a branch where we change the actual Reveal effect implementation so we can see if what you propose is feasible in the comp effects system.

[mdtauk]

I have started making a Figma file, for my various control designs I have been making over the past few months, and I came up with another idea for the reveal effect.

@mdtauk would you be able to share the effect recipe / formula you used to make the reveal effect? We've run into trouble with some of the designs in the past using effects that we can't do due to the limited blend modes we have available in Composition. Basically the "light" layer can use any effects it wants but when blending the light layer with the destination it has to be just a normal alpha blend.

We can also work with you to make a branch where we change the actual Reveal effect implementation so we can see if what you propose is feasible in the comp effects system.

I am using simple radial gradients, the central point being where the cursor is. White 100% Opacity > White 0% Opacity (with the same thing using black for the dark gradients, but the central point is 0% opacity and outside 100%) and just reducing the opacity on the whole border element.

I know the effect via composition is more complicated, as it is an actual point light, but when making mock ups, using gradients is a simple solution.

[Felix-Dev]

Reveal is something exclusive to Windows, and because HTML is not capable of making use of it right now, should not mean removing it from the OS.

If everything in Windows was about bringing it into parity with "bog-standard" html - then the experience suffers.

It should be about the best for Windows apps and shell, and bring support for OS notions to web apps and web frameworks.

This. So much this. It saddens me to see these kind of UI proposals which take away Windows' unique UI look & feel because it seems to be inconsistent with UI platform X. While Windows should be open to take inspirations from other UI platforms out there, ultimately, it should still carve its own unique UI path. It's Windows after all and not Web OS.

You've said it yourself, reveal is _unqiue_ to Windows and Microsoft wants it to be "great". Now learning that "great" might mean stripping away feature(s) of reveal because it is not supported on a completely unrelated UI platform....I cannot follow that logic. @chigy Please tell the Design team to reconsider.

[chigy]

@mdtauk and @Felix-Dev , I hear you. Why do you think I've opened this GitHub proposal which says to "improve reveal" rather than to remove reveal?

Designing a system is complicated. There are reasons (good or bad) behind all the ideas you talk about here and I know why we do not do them. I am not saying I agree with them, but it is complicated. I try to decompose the complicated so that we can create delight, even small. So what would really help with you and the community is to help me understand the small delights so I can discuss the small wins with the design.

IMO, the improvements must be independently meaningful. I'd like for us to be able to say "We recommend change #1 because of this benefit A, etc." Otherwise it is just about people pushing their opinion without any reasoning behind. That's where I am trying to get to, anyways...

[mdtauk]

@chigy going back to the original request made of you, to remove the border on Reveal...

Can you offer any more information about why this request was made? All we know is that you were asked to open a discussion on GitHub about changing the Reveal effect, with a view to removing the borders.

In the Dark theme, the light shows up in a pleasing way within the "plate" of the controls, as well as a stronger highlight as a border around the control.

In the Light theme, the light is not used, and instead a darker border is shown around the control.

Using a light for the Light theme, would require changing the Light Theme colours to stop using a pure white colour behind the controls - or adding a darkened effect on the control "plate" so it shows up. This is how it was done, before feedback called it "gloomy" and so it was removed, leaving only the border effect.

The purpose behind Reveal is to indicate something can be interacted with, as the user is moving the cursor around the UI. If this effect were to no longer be treated as a light source in the app, then what other effects could replace the current Reveal?

HoloLens UX uses a colour gradient that shifts as you move around in the environment, almost like a reflection. Could there be some kind of lens or colour effect?

_https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/README_BoundingBox.html_

---

Of the specific examples you called out in the proposal:

Calendar View
There is already a gap between the day boxes, the Reveal borders could be done there, rather than within each of the boxes individually.

[chigy]

@mdtauk , feedback like what you say is the reason why I've opened this ask. The whole reason why this item is here is to discuss open issues like what you mention with the design team, but this proposal is not currently worked on today.

[mdtauk]

Reveal, with subtle borders and inner spotlight

_Ghost Button_

_Outlined Button_

_Filled Button_

_Accent Button_

[JustinXinLiu]

While lines in 3D objects look nice, it just doesn't look so great in 2D controls, especially when the controls are next to each other, then you end up having double lines that look quite messy. An example of this is the CalendarView control. In light theme, lines with reveal lighting look like shadow done wrong for me...

I propose an elevated button design with reveal lighting similar to this. :)

If you want a flat button design with borders by default, that's OK too. But the light should naturally be applied to the background and the border, and ideally with an animated shadow appearing on the bottom as well as a small negative offset Y on hover to make it feel like it's lifted up.

[mdtauk]

It was to give that feeling of the control lifting, why I included a dark border around the control in my animated examples, without actually giving a Z translation to the control which theme shadow uses. Also theme shadow is limited to only squared off control shapes, but controls like the toggle switch could use the border idea.

The truth is though, light theme will always have issues using a light based approach to reveal. And there are limits to shadow casting elements currently.

[mdtauk]

I think Reveal styles for Buttons in Light Mode, need updating, now the hover state for the buttons has changed.

_Light Reveal hover_

_Light default hover_

---

Dark mode Reveal is fine, but the Button Hover state should probably lighten the control, not darken it.

_Dark Reveal hover_

_Dark default hover_

[mdtauk]

As for Revel in general, why not follow HoloLens, and use a spectrum of colours as a hover border and fill, alongside the Spotlight effect. That should also change the perception of it being Gloomy.

[mdtauk]

[chigy]

@mdtauk , thank you for the suggestions. One thing for you to keep in mind is that we are applying reveal on PC which is also a work environment for many. When we looked into reveal focus, we got feedback that Xbox-like focus rect is too "flashy" on desktop. So there is a very fine balance here to keep in mind.

[mdtauk]

@mdtauk , thank you for the suggestions. One thing for you to keep in mind is that we are applying reveal on PC which is also a work environment for many. When we looked into reveal focus, we got feedback that Xbox-like focus rect is too "flashy" on desktop. So there is a very fine balance here to keep in mind.

I did try to keep the effect subtle, so a thin 1px border around the control, not a glow eminating from it. But then you have the spotlight within the control on hover, and to avoid the "gloomy" darkening, I opted to use colour, which should bring some subtle delight.

HoloLens has a colour shifting effect to focus the eye on the element you are gazing at, so it brings some alignment to that.

On Xbox, you have the Reveal Glow, which would not be changed - But Focus and Reveal are two different things. Reveal indicates something can be tapped or interacted with, whilst moving the cursor around it. It also replaces the Hover state, when the pointer is over the element.

[mdtauk]

YouTube link

[lukasf]

If you apply a color as border reveal, I'd rather use either gray or the accent color (or a light shade of it) instead of flashy rainbow colors. Then it would be consistent with other colors used in the app or system, and it would not overwhelm professional users.

[Poopooracoocoo]

I was about to make a new issue called "reveal button hover effect looks different to regular button even when transparency effects are off" but then I saw this issue which I've seen before.

the below is what both look like when not hovered over.

[jevansaks]

I was about to make a new issue called "reveal button hover effect looks different to regular button even when transparency effects are off" but then I saw this issue which I've seen before.

the below is what both look like when not hovered over.

This sounds like a bug, right @chigy @kikisaints? Also @chingucoding this sounds like it's up your alley. :)

[chigy]

I was about to make a new issue called "reveal button hover effect looks different to regular button even when transparency effects are off" but then I saw this issue which I've seen before.


the below is what both look like when not hovered over.

This sounds like a bug, right @chigy @kikisaints? Also @chingucoding this sounds like it's up your alley. :)

Poopooracoocoo , sorry I do not understand the issue you are pointing out. Can you elaborate?

[chingucoding]

This sounds like a bug, right @chigy @kikisaints? Also @chingucoding this sounds like it's up your alley. :)

@jevansaks I would happily help out with that, when it is clear what exactly should be done :)

@chigy I think @Poopooracoocoo is referring to the fact that the button does not have a lighter gray when it has reveal visual applied to it and the user hover overs the button.

[chigy]

@chingucoding , @Poopooracoocoo , @jevansaks ,
Checking with design because this is part of improving reveal visual discussion.

[Poopooracoocoo]

@chigy in those two screenshots I have transparency effects enabled so they should be the same. Speaking of that setting, it's very confusing and doesn't imply that it disables reveal or shadows and I've commented on the latter before. Personally, I think the outline feels unique to Windows 10.

[chigy]

@Poopooracoocoo , this is the current design because reveal means there's an outline border. This proposal is tracking what it means when reveal doesn't have border.

[mdtauk]

@Poopooracoocoo , this is the current design because reveal means there's an outline border. This proposal is tracking what it means when reveal doesn't have border.

I don't think the outline is the main issue, but that the button fill colour doesn't get lighter with the reveal hover effect

[Jaiganeshkumaran]

Technically it is possible to create Reveal effects in CSS. However, performance could be an issue. Reveal is a great design choice and I miss it when switching to other platforms. https://github.com/d2phap/fluent-reveal-effect. Microsoft is just lazy to implement it in Fluent UI web and they are trying to be like material by false claims like the web doesn't support it.

[Jaiganeshkumaran]

@Poopooracoocoo , this is the current design because reveal means there's an outline border. This proposal is tracking what it means when reveal doesn't have border.

I don't think the outline is the main issue, but that the button fill colour doesn't get lighter with the reveal hover effect

I think the outline border is distracting and should be removed for a clean look.