user-interface - 将手形光标用于按钮等可点击项目是错误的吗？

Question

我一直认为手形光标是向用户显示“您可以单击此处”的理想视觉指示器。我们习惯于每天在这种情况下看到它，因为它用于超链接，因此也用于所有 Web 按钮。

                 

但是，大多数桌面应用程序似乎保留了按钮的默认指针箭头。

                                 

当按钮和其他可点击项目（如复选框和单选按钮）使用手形光标时，我真的感觉好多了。不知何故，当我将鼠标悬停在可点击的项目上时，我个人觉得看到这个光标很高兴，可能是因为它与网页甚至许多游戏的做法一致。

但是作为开发人员，我们必须为孩子用户着想，有时我们做的事情不是我们喜欢他们，而是用户喜欢他们。问题是，我对按钮上的手形光标感到非常模糊，以至于我对它不合适的可能性视而不见。许多设计错误都是由这样的个人决定造成的。

                                      

你怎么看待这件事？

编辑：最近我注意到 Photoshop 上手形光标的使用（XP 上的 CS3），但可能只是因为我更广泛地使用它。截屏：

                                         

请注意，许多使用手的地方显然是可点击的。
EDIT2：还要注意他们甚至使用了自定义光标，老实说我永远不会这样做，特别是对于像手形光标这样无处不在的微不足道的东西。它甚至不漂亮。

Answer 1

光标在超链接上改变形状的原因可能与以下有关：

• 超链接以文本块开头，因此您可以单击它们打开另一个页面并不明显。
• 链接本身的显示样式的变化可能不足以传达链接的“可点击性”。可能还因为显示样式的变化并不完全标准化，而手形光标则是。
• 网页上的按钮过去是“通常”可点击的，我想虽然我不记得它们是否导致光标改变形状。如今，“按钮”通常是使用 css 来“伪造”的，您需要一些其他方式来告诉用户他们可以点击它 => 手形光标已成为默认设置。

然而，以上所有内容都是为了在网页内容中传达“可点击性”。按钮、工具栏上的按钮、菜单项等总是可以点击而不改变光标的形状。当您将鼠标悬停在菜单项或工具栏按钮上时，您也不会看到浏览器改变光标的形状。

In a desktop application you probably wouldn't change the cursor over every item in a tree even if that brings up different information in a panel to the side of the tree? Or for every item you can select in a listbox? Or for the radiobuttons or checkboxes on a form? So why do it for form buttons which in a desktop application have always been easy to identify and are clickable by nature.

I wouldn't change the cursor shape for anything in a desktop application that is (has always been understood to be) "clickable by nature". I would only use "web-like" cursor shapes when displaying information in a "web-like" manner. For example clickable parts of text in a grid in which the text is not normally clickable. Otherwise I'd stick with the standard cursor shapes. It also helps to keep down the "noise" in the user interface.

---

update in response to comment(s)

@Camilo: I get your "command" vs "selection" distinction. I would even add "navigation" to that mix. However, I still don't see the need to change cursor shapes on a command ui-element.

The distinction between navigation and command may get somewhat blurred if you think of them both simply as responses to user actions. To me there is a clear distinction between the two. Navigation are all actions to open forms, select items, etc. In general just rummage around... Commands are all actions that cause data to change, cause notifications (mail, messages of any kind) to be sent, or where the initiated action may take a longer than a second or two (establishing a connection, filtering a large dataset).

Loosely: if you would submit a form on the web using a "POST" (or "DELETE"), it would probably be a command, whereas anything else would be navigation.

Anyway, one thing I would never do is have a ui-element that is naturally more geared towards navigation and selection (like a treeview) execute a command. So where clicking on a treeview item will probably change the contents of some other part of the user interface, in my apps it would never for example initiate a payment...

As such, a tree of possible servers to connect to, to me is still a selection element. I would hope the actual connection is not made on a single click, but only when an item is double-clicked or after an item has been selected when a "connect" button is clicked. And therefore, in this particular case, I still wouldn't use a handshaped cursor on the tree.

Answer 2

Personally, I have found in my research that this is generally perceived as one of those "we have always done it this way, so it is the expected and best way of doing it" situations.

The hand cursor made one of its earliest appearances in Hypercard stacks. Which were targeted at less-experienced users. So, like a lot of things, it got picked up and carried along with us.

However, because of its inconsistent use, I don't think there really is a "best" choice between the arrow and hand... people are used to either and/or both, so any consistent, thoughtful use of both seems to be generally effective.

For me, though I go by the following guideline:

Arrows are for items that are obviously clickable, like things that look like buttons, radio-buttons, drop-down menus and such. The hand is useful when you need to give something that may or may not appear button-like a little extra attention. It really does re-enforce the call to action of "click-me!", "click-me!".

Also, on the internet, I have noticed that the hand tends to indicate items that when clicked, will expose MORE relevant content regarding what you just clicked on, while the arrow seems to be more "command" driven, i.e. "do this now".

But, like I said, as long as it is consistent, users will adjust quickly to you site's use of either cursor because they have been exposed to both for so long already. The only real trouble seems to occur when you are inconsistent in your handling of the two cursor types.

IMHO - There is nothing that is inherently "intuitive". Intuitive is just another way of saying "more familiar" or "less familiar".

Answer 3

AFAIK hand was dropped for fat client apps, and instead you have buttons and other user elements who emit tool-tips or have 'hover' effect.

Stay with hand cursor ONLY if you want to mimic web-app look&feel.

Answer 4

interesting point .. let me try to make it simple.

Arrows - are suggestible for Desktop App + interfaces which are very intuitive

Hand - must there for HYPER TEXT, for average user its important to know which text is click-able.

Answer 5

I think also we need to remember that hand generally indicates it's a link to somewhere else.

I don't think there is clear answer, but to me if the platform I'm coding for (Windows) I'll just follow the examples of the underlying OS to keep it consistent which means no Hand icons for buttons in Windows.

As a user I think it feels awkward to see hand icon in a Windows GUI (unless I'm clicking to a link which will take me to a website)

Answer 6

I came here thinking this question would have a clear-cut answer, but looking at these answers as well as going to major sites shows very blurry distinctions. As the line between web and desktop client blurs, I'm observing a similar blurring of the behaviors.

Earlier... desktop clients nearly always used a single cursor, and hover caused button to change visible state indicating area of clickability. Web pages had the cursor change on links, and no consistent behavior when an action was handled by javascript.

Going to some of the most heavily-used websites and apps around, I find... As a user, I don't care as much as I thought. Deskstop clients mostly just change the button, and if the cursor changes, I don't notice. Web clients tend to change the cursor AND often apply a visual button hover state, and rarely do I notice when they don't.

Until someone makes a compelling argument otherwise, I'm going with the simplest rule for our design: always changing cursor on actions, and applying button hovers for regularly used buttons.

Answer 7

“指针”光标应该用于超链接或任何功能类似于超链接的对象。否则，“默认”光标应用于所有其他可点击元素，例如按钮、切换、开关、下拉菜单等，因为本质上“应该”看起来像可点击项目。

查看超链接的定义以获取更多信息。

示例：Google 云端硬盘