search

eBay / ebayui-core

Collection of Marko widgets; considered to be the core building blocks for all eBay components, pages & apps
https://ebay.github.io/ebayui-core/
Other
217 stars 103 forks source link

Remove `cursor: pointer` for all buttons #218

Closed scttdavs closed 6 years ago

scttdavs commented 6 years ago

Bug Report

eBayUI Version: 0.5.0

Description

Put this under bug report as I don't think it is a feature. Really it is more like a missed requirement maybe.

https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b

The hand cursor should be used by links as they have weak affordance. Buttons, on the other hand, have strong affordance (well designed ones at least), and do not need the hand cursor. To avoid confusion, hand cursors should only be used for links.

I've noticed this in the carousel, but also dialog. ebay-button does NOT come with hand cursor from skin, btw 👍

Screenshots

can't get screenshot with cursor in it 😞

ianmcburnie commented 6 years ago

I totally agree that buttons that very obviously look like buttons should not have a hand cursor. I've referenced that same article myself a few times :-)

In summary though, the stance up to now has been:

I've always been a little on the fence regarding icon buttons. Especially borderless icon buttons, because I thought sometimes they may not give enough affordance that they are interactive (especially if they are "not well designed ones"). However, I think in these days of touch based screens, relying on a cursor to indicate interactivity of any kind is largely redundant and a bad practice. Touch screens enforce good design, placement and affordance on ALL buttons.

I say we go ahead and remove the hand cursor from all buttons. There should be other kinds of affordance built into the UI to indicate interactivity. Hand cursor can be reserved exclusively to indicate link behaviour for mouse users.

I will create a separate ticket in Skin.

abiyasa commented 6 years ago

Interesting. Do we have this cursor behavior (to show not to show hand cursor on hover) documented somewhere?

For us, it's not clear if Skin button intentionally not showing hand cursor on hover. We usually interpret this as "it depends on your use case or app" so we always add hand cursor for any clickable element to make it consistent. Maybe it's nice to have a guideline on this issue.

ianmcburnie commented 6 years ago

Skin button is intentionally not showing a hand cursor. As Scott says, the hand cursor is what distinguishes a link from a button for mouse users. It get's a little funky for fake buttons though... I've gone with showing a hand cursor in that case as a clue about it's link behaviour.

If you look at HTML's built-in clickable elements, such as checkbox, radio, select, none of them show a hand cursor. Despite this, we decided sometime back that custom ARIA widgets such as tabs, menus, etc should show a hand cursor, but I think it's time we revisited that and remove the cursor.