Microsoft-ui-xaml: Proposal: Change Check Box Tick mark to be thicker and look better alongside Indeterminate Checkbox and Radio Button Marks

[mdtauk]

Proposal: Change Check Box Tick mark to be thicker and look better alongside Indeterminate Checkbox and Radio Button Marks

Summary

The Tick glyph used for the CheckBox control can seem a little thin and too close to the edges of the box. FastDNA has the nicest looking version to my eye, compared to the other Microsoft UI frameworks - and I would like to see the others changed to match. The Indeterminate mark and the Checked mark, feel more in balance

Edit: As @chigy suggested, my purpose for asking for a change to the current Tick mark, is because it feels too thin when sat alongside the Intdeterminate mark (whether it is the horizontal line or square mark) as well as the selected Radio Button circle mark. FastDNA's mark works better currently.

---

_FastDNA CheckBox_

---

_Fabric Web_

---

_XAML UWP_

---

_Office UWP_

---

_Win32_

---

_Material Design - Android_

---

_macOS_

Important Notes

FastDNA uses an SVG shape, but either the current glyph in the MDL2 font, or a new altered glyph should be added to match the look.

[jevansaks]

Thanks @mdtauk! There is a proposal #839 which will include an update to the checkbox visual. Looks like you've weighed in on that proposal, is there more in this suggestion that isn't captured in the proposed updates?

[mdtauk]

@jevansaks I understood that proposal to be focused on ensuring the CheckBox used in various WinUI controls, are consistent amongst themselves. Also that the proposed visual comps, continues to use the current MDL2 glyph, with only a change of fontsize where needed.

I am happy for this proposal to be rolled into that one, if there is scope to change the checkmark itself.

[jevansaks]

I see, yes then I think these should be separate proposals. @chigy do you know if a checkmark glyph update is part of this design update?

[shaheedmalik]

The filled in ones look the best.

Maybe like this instead?

[Poopooracoocoo]

@mdtauk The win32 screenshot is from Windows 7. Mind updating it to one from W10?

I really dislike the new checkboxes in #839 even though I want checkbox consistency. It's the only reason I reacted with a thumbs down

[mdtauk]

@Poopooracoocoo Is this image better?

---

@shaheedmalik The proposal is only about the design of the checkmark, not the full control - but filled on Checked and Indeterminate states makes sense to me, and fits in with most modern UI approaches from other OSs.

Here is the same checkmark applied to the UWP style checkbox states

[mdtauk]

I know within the MDL 2 Assets font, there are checkbox glyphs. I see both 16 px and 14 px scaled glyphs, and so I made a quick font with 20px, 16px, and 14px scaled versions of the new checkmark, but rounded to match the upcoming control designs.

WinUI.zip
_TTF file and FontLab editable file_

[chigy]

@mdtauk , I don't have time to look deeply into this request yet but by just scanning, it looks like a duplicate request to issue #839?

[mdtauk]

@mdtauk , I don't have time to look deeply into this request yet but by just scanning, it looks like a duplicate request to issue #839?

@chigy It is somewhat related, but it is specifically about replacing the current "tick" glyph, with the one used by FastDNA's CheckBoxes

[bheston]

Thanks for the comments on the FAST check icon. We're actually working right now on switching the checked state to a filled style. That icon will remain the same shape, but will be white over a neutral fill.

The indeterminate mode is being updated to a dash more than a square, to further differentiate it from a radio button. It will be unfilled.

This coordinates with the platform / user agent changes we've worked on with Chromium, which will be rolling out shortly.

[mdtauk]

@bheston could you share the check mark SVG with the Windows team, so the thicker shape can be used in WinUI and Xbox

[bheston]

Here it is.
fast-check.svg.txt

And the indeterminate one we are updating to.
fast-indeterminate.svg.txt

Note that indeterminate will be unfilled, since clicking it in this state toggles it to checked.

[chigy]

Folks often ask us about the alignment between WinUI and Fabric. This one is actually a case where we are in alignment. FastDNA cannot use the MDL2 font.

[mdtauk]

It is true that both Fabric and WinUI are using the same glyph. My point was that I felt the Checkmark used by FastDNA was a better glyph to use. It has a thicker stroke, which fits better with the Indeterminate/ThreeState glyph, as well as the Radio Button glyph.

So if adding a new thicker tick mark to the MDL2 font is how this "problem" is solved, then that could be done.

[chigy]

It is true that both Fabric and WinUI are using the same glyph. My point was that I felt the Checkmark used by FastDNA was a better glyph to use. It has a thicker stroke, which fits better with the Indeterminate/ThreeState glyph, as well as the Radio Button glyph.

So if adding a new thicker tick mark to the MDL2 font is how this "problem" is solved, then that could be done.

@mdtauk , yes I understood where you were coming from but I was also commenting on some other feedback about alignment issues. This has to go to both Fabric and Windows design team to see if they want to thicken the tick glyph.

Can you please update your proposal to be very clear "Make Tick glyph thicker" or something like that? I can do that, too, if it is agreeable.

[mdtauk]

@mdtauk , yes I understood where you were coming from but I was also commenting on some other feedback about alignment issues. This has to go to both Fabric and Windows design team to see if they want to thicken the tick glyph.

Can you please update your proposal to be very clear "Make Tick glyph thicker" or something like that? I can do that, too, if it is agreeable.

I updated the title - I originally mentioned FastDNA as it, like the Office XAML tick mark, uses a different design, that I assume was approved before appearing, so just making an arbitrary change, might not be deemed appropriate.