对按钮等可点击项目使用手形光标是否错误?

发布于 2024-10-01 11:14:22 字数 1431 浏览 6 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

别忘他 2024-10-08 11:14:26

我来到这里认为这个问题会有一个明确的答案,但查看这些答案以及访问主要网站会发现非常模糊的区别。随着网络和桌面客户端之间的界限变得模糊,我观察到行为也出现了类似的模糊。

早期...桌面客户端几乎总是使用单个光标,悬停会导致按钮更改指示可点击区域的可见状态。网页上的链接上的光标会发生变化,并且当 JavaScript 处理操作时,行为不会保持一致。

在访问一些最常用的网站和应用程序时,我发现......作为用户,我并不像我想象的那么在乎。桌面客户端大多只是更改按钮,如果光标发生变化,我不会注意到。 Web 客户端倾向于更改光标并经常应用可视按钮悬停状态,而我很少注意到它们不这样做。

除非有人提出令人信服的论点,否则我将采用最简单的设计规则:始终更改操作上的光标,并对常用按钮应用按钮悬停。

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.

提赋 2024-10-08 11:14:25

有趣的一点..让我试着让它变得简单。

箭头 - 建议桌面应用程序+界面非常直观

- 超文本必须有,对于普通用户来说,知道哪些文本是可点击的很重要。

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.

木落 2024-10-08 11:14:24

就我个人而言,我在研究中发现,这通常被认为是“我们一直这样做,所以这是预期的、最好的做法”情况之一。

手形光标是 Hypercard 堆栈中最早出现的光标之一。其针对的是经验不足的用户。所以,就像很多东西一样,它被我们捡起并随身携带。

然而,由于其使用不一致,我不认为箭头和手之间确实存在“最佳”选择……人们习惯于其中之一和/或两者,因此对两者的任何一致、深思熟虑的使用似乎都是一般有效。

对我来说,尽管我遵循以下准则:

箭头适用于明显可点击的项目,例如看起来像按钮、单选按钮、下拉菜单等的项目。当您需要给予可能会或可能不会像按钮一样的东西时,手会很有用额外。它确实再次强化了“点击我!”、“点击我!”的号召性用语。

另外,在互联网上,我注意到手往往指示单击时会显示更多与您刚刚单击的内容相关的内容,而箭头似乎更受“命令”驱动,即“立即执行此操作” 。

但是,就像我说的,只要它是一致的,用户就会快速适应您网站对任一光标的使用,因为他们已经接触这两种光标很长时间了。当您对两种游标类型的处理不一致时,似乎会出现唯一真正的麻烦。

恕我直言 - 没有什么是本质上“直观”的。直观只是“更熟悉”或“不太熟悉”的另一种说法。

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".

饮湿 2024-10-08 11:14:24

我认为我们还需要记住,手通常表示它是到其他地方的链接

我认为没有明确的答案,但对我来说,如果我正在编码的平台(Windows)我将只遵循底层操作系统的示例以保持一致,这意味着 Windows 中的按钮没有手形图标。

作为一名用户,我认为在 Windows GUI 中看到手形图标感觉很尴尬(除非我点击一个链接将我带到一个网站)

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)

北方的巷 2024-10-08 11:14:24

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

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

示例:谷歌云端硬盘

The "pointer" cursor should be used for hyper-links or any object that functions like a hyper-link.
otherwise the "default" cursor should be used for all other clickable elements such as buttons, toggles, switches, drop-down menus, etc. as by nature "should" look like a clickable item.

Look up the definition of hyperlink for more information.

Example: Google Drive

自我难过 2024-10-08 11:14:24

AFAIK 手被放弃了胖客户端应用程序,取而代之的是按钮和其他用户元素,它们会发出工具提示或具有“悬停”效果。

仅当您想模仿网络应用程序的外观和感觉时,才保留手形光标。

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.

¢好甜 2024-10-08 11:14:23

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

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

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

在桌面应用程序中,您可能不会更改树中每个项目上的光标,即使这会在树一侧的面板中显示不同的信息?或者对于可以在列表框中选择的每个项目?或者表单上的单选按钮或复选框?那么,为什么要对桌面应用程序中的表单按钮这样做呢?表单按钮在桌面应用程序中一直很容易识别并且本质上是可点击的。

我不会改变桌面应用程序中任何(一直被理解为)“本质上可点击”的光标形状。当以“类似网络”的方式显示信息时,我只会使用“类似网络”的光标形状。例如,网格中文本的可点击部分,其中文本通常不可点击。否则我会坚持使用标准光标形状。它还有助于降低用户界面中的“噪音”。


更新回应评论

@Camilo:我明白你的“命令”与“选择”的区别。我什至会在其中添加“导航”。但是,我仍然不认为需要更改命令 ui 元素上的光标形状。

如果您将导航和命令都简单地视为对用户操作的响应,那么它们之间的区别可能会变得有些模糊。对我来说,两者之间有明显的区别。导航是打开表单、选择项目等的所有操作。一般来说,只是翻查...命令是导致数据更改、导致发送通知(邮件、任何类型的消息)或启动操作的位置的所有操作可能需要超过一两秒的时间(建立连接、过滤大型数据集)。

宽松地说:如果您使用“POST”(或“DELETE”)在网络上提交表单,它可能是一个命令,而其他任何内容都将是导航。

不管怎样,我永远不会做的一件事是让一个 ui 元素自然更适合导航和选择(如树视图)执行命令。因此,单击树视图项目可能会更改用户界面其他部分的内容,在我的应用程序中,它永远不会启动付款......

因此,对我来说,可能连接到的服务器的树是仍然是一个选择元素。我希望实际的连接不是通过单击进行的,而是仅在双击项目时或在单击“连接”按钮时选择项目后进行。因此,在这种特殊情况下,我仍然不会在树上使用手形光标。

The reason why the cursor changes shape when over a hyperlink probably has to do with the following:

  • hyperlinks started in blocks of text and as such it wasn't obvious that you could click on them to open another page.
  • the change in display style for links in and of itself probably wasn't enough to communicate the "clickability" of a link. Possibly also because the changes in display style aren't exactly standardised, while the handshape cursor is.
  • buttons on web pages used to be "normally" clickable I think though I can't remember whether they caused the cursor to change shape. Nowadays "buttons" are often "faked" using css and you need some other way to tell the user they can click on it => handshape cursor has become the default for that.

All of the above however is geared towards communicating "clickablity" within the content of a webpage. Buttons, buttons on toolbars, menu items etc have always been clickable without changing the shape of the cursor. And you don't see browsers changing the shape of the cursor either when you are hovering over a menu item or toolbar button.

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文