Proposal: Update visuals of other basic input controls

[YuliKl]

Update visuals of other basic input controls

Summary

Change the default appearance of toggle switch, slider, and rating controls. This proposal is closely related to #3546.

Rationale

• XAML controls are inconsistent with how web and mobile apps are evolving.
• This is part of the work to refresh Xaml UI to align with other platforms while looking familiar on Windows.

Comps showing proposed changes

ToggleSwitch

Slider

RatingControl

[mdtauk]

Will these changes be purely styling, or will some of these controls receive feature or behaviour parity with Fluent UI for Web?

[YuliKl]

Will these changes be purely styling, or will some of these controls receive feature or behaviour parity with Fluent UI for Web?

@mdtauk do you have any examples of the kind of changes you would like to see?

[mdtauk]

Will these changes be purely styling, or will some of these controls receive feature or behaviour parity with Fluent UI for Web?

@mdtauk do you have any examples of the kind of changes you would like to see?

Slider doesn't have a range option - which would be useful for media trimming or editing experiences.

The Command Button is an example of a button style for FluentUI - but is not built into WinUI's buttons.

Fluent UI has various controls or UIs which are not in WinUI right now. :)

[yoshiask]

The Windows Community Toolkit has a RangeSlider (@mdtauk). Those styles will need to be updated to align with these new ones.

[YuliKl]

I see. This proposal is about visual changes to existing WinUI controls. Any new APIs are outside the scope of what I'm proposing.

[marcelwgn]

This might be due to the screenshot and actually not be that much of a problem in an app, but the differences between normal, hover and pressed for the ToggleSwitch look really small and hard to notice.

[harvinders]

@YuliKl If we look at the states for radio button and slider, in both the hover state the circle becomes little bigger and when in pressed state it become smaller. Whereas for toggle switch on hover it becomes bigger and for pressed it becomes even bigger (elongated). Visually looks little inconsistent to me.

Should toggle switch circle also be not smaller when pressed?

[mdtauk]

This might be due to the screenshot and actually not be that much of a problem in an app, but the differences between normal, hover and pressed for the ToggleSwitch look really small and hard to notice.

I agree with this mostly. This was why I wondered about contrast ratios.

It's good to give each control is own focus, care, and attention, but it still feels like a piece of a larger puzzle. How does it look on a form, or in the settings screens, and what would an entire window look like on the desktop, or with multiple Windows open.

The original MDL2 controls were not subtle, being blocky with heavy borders. Then with Fluent the borders thinned, and corners curved, but these Toggle Switches how well well the sit among body text etc

[shaheedmalik]

Maybe with the state for the buttons "Pressed State" could be in the middle?

[mdtauk]

Maybe with the state for the buttons "Pressed State" could be in the middle?

The thumb moves along with your mouse cursor when pressed down - so the position of it is not a state indication.

[mdtauk]

I think I can see where the slightly elongated Thumb comes from. The iOS React Native control exhibits this behaviour.

This however is slightly at odds with the other pressed states you are proposing which sees the thumb element shrink (as if pushed down)

[Poopooracoocoo]

The iOS-ey design makes sense given their rationale (my emphasis)

• XAML controls are inconsistent with how web and mobile apps are evolving.
• This is part of the work to refresh Xaml UI to align with other platforms while looking familiar on Windows.

[mdtauk]

I think the slider track may be a little dark, where the accent colour side of the slider can feel less distinctive compared to the rest of the track.

I know the Buffering one uses the distinction between lighter and darker shades, but could the lighter colour not work as the default, and darker specifically for the buffer enabled version?

---

I think the ControlAAFillColorDefaultBrush of #72000000 may be a little strong now the slider uses a 4px thickness, instead of the 2px one.

I notice there are no Secondary or Tertiary Control AA Fill Colours, so no hover or pressed states, but should there be alternate values for the thicker lines used by some controls?

It seems out of place with the new more subtle button and other input control borders.

[dphfox]

Just my two cents; I don't think the slider should have a shadow on this white outline (and the outline itself is questionable):

It doesn't line up with the designs for any of the other controls, and doesn't seem to have any usability or readability benefits.

Everything else looks pretty good, not much else to add that hasn't already been said here 🙂 Just make sure the final designs for everything meets the correct accessibility standards (e.g. contrast ratios - these designs seem to depend more light colours/shades of white, which could become an issue very easily for people with vision difficulties)

[mdtauk]

Just my two cents; I don't think the slider should have a shadow on this white outline (and the outline itself is questionable):

It doesn't line up with the designs for any of the other controls, and doesn't seem to have any usability or readability benefits.

Everything else looks pretty good, not much else to add that hasn't already been said here 🙂 Just make sure the final designs for everything meets the correct accessibility standards (e.g. contrast ratios - these designs seem to depend more light colours/shades of white, which could become an issue very easily for people with vision difficulties)

The shadow exists because the Thumb Control Part overlaps the other parts of the Control.

The middle part grows and shrinks as part of it's VisualStates like other controls, so the outer shape ensures there is contrast and visibility where both the Thumb and the Value track, use the Accent Colour.

[FredipusRex]

For the slider thumb, I think one way to look at it is in terms of attention - when hovering over it, the middle part should grow quite large as though trying to draw your attention to it, while when pressed it should all but disappear, as it already has your active attention. I think the grow/shrink dynamic is correct but simply too subtle.

[dphfox]

For the slider thumb, I think one way to look at it is in terms of attention - when hovering over it, the middle part should grow quite large as though trying to draw your attention to it, while when pressed it should all but disappear, as it already has your active attention. I think the grow/shrink dynamic is correct but simply too subtle.

Maybe not completely disappear, but a smaller thumb for more precision is an interesting idea!

[mdtauk]

It may also be worth mentioning, the inverted Tooltips have not been added yet with the rest of the visual refresh... @YuliKl