Microsoft-ui-xaml: Proposal: Cursor Change

[sravya03]

Summary

Update cursor to the same one used for hyperlink (hand).

Rationale

• Ensures consistency with web model
• HTML and XAML will have the identical experience when used in the same UI surface

Design details and visuals

Refer to this comp for places where the change is being proposed: Visual comp

[micahl]

Curious... what I see with a <Hyperlink/> is the same as what I see in Edge and Chrome. You get something different?

[Poopooracoocoo]

Do you want the cursor to turn into a hand when hovered over a button like on websites? I don't think that's a good idea personally. I think that when the cursor should be an arrow when hovered over buttons on websites.

[Felix-Dev]

I find this proposal confusing.

Update cursor to the same one used for hyperlink (hand).

That sounds like the cursor will be changed from arrow to hand globally. I see no narrowing scope in the summary of the prorposal or in its title.

If the proposal is as @Poopooracoocoo said, please add that information to the proposal. I also fully agree with him/her. This proposal, as it is right now, just sounds pretty weird to me.

[adrientetar]

I can see the motive behind this proposal, which is that web and desktop apps have had different conventions w.r.t. clickable surfaces. Desktop highlights the surface on hover while web switches to hand cursor and generally also highlight the target, albeit very slightly compared to the desktop. Given that the barrier between web and desktop apps is blurring now, for instance Electron apps (e.g. VSCode) that do use the hand cursor, it makes sense to standardize.
So there's a UI design compromise here, as in if you have the hand cursor you can do more subtle hover states in your design with a dimmer difference of colors etc.
The other thing is about conventions – traditionally desktop apps don't have the hand cursor (and have been around for longer than web), so wouldn't users feel like apps using Hand cursor are weird/different? I think it'd be worth doing a review of existing OS apps and webapps to see how they work in that respect. For instance how does Chrome OS behave? given it's kind of the main desktop OS to runs webapps as its native apps.

[chigy]

Status update

Added visual comp from design team to the proposal detail. Also here

[chigy]

Curious... what I see with a <Hyperlink/> is the same as what I see in Edge and Chrome. You get something different?

@micahl , please refer to the comp and let me know if this answers your question.

[mdtauk]

@chigy Can we discuss the semantic use of the finger cursor?

I personally believe that the finger cursor implies an action will happen when the control is clicked/tapped. So things that don't perform an action, but will show a flyout, should not use a finger cursor.

This change would also make XAML apps more separate compared to Win32 apps, which don't exhibit this behaviour. Win32 apps like File Explorer use the finger cursor for navigating the tree-view, but not for the ribbon or window controls

[chigy]

@mdtauk , good feedback. @sravya03 , do you have any comments?

[Poopooracoocoo]

@mdtauk XAML apps use the hand over links like wifi settings in the flyout. File Explorer's tree view must be like links which makes sense

[adrientetar]

For reference, it seems Material Design does promote hand cursor over clickable surfaces: https://material.io/design/interaction/states.html#hover but Chrome OS does not seem to follow that guidance yet. But I think that's where we're headed as I said in my previous comment.

[chigy]

Status update

Discussed with shell design team and agreed to put this in future consideration, but not act on it now.

[Poopooracoocoo]

it's worth noting that Flutter for web uses the regular cursor instead of a hand. It feels natural