哪个更好地在网页上显示额外信息? 单击时弹出还是悬停时弹出?
我喜欢在网页中显示有关某些关键字的更多信息。 我不想将访问者发送到另一个页面,我更喜欢在当前页面顶部显示额外信息。
关键字位于 html 列表中。 它基本上是一个功能列表,我想提供有关这些功能的更多信息。 所以我有两个基于“更多信息”或“?”的想法 超链接。
- 用户将鼠标悬停在链接上,会出现一个包含信息的弹出窗口,当用户将鼠标悬停在链接上时,弹出窗口就会消失。
- 他们单击链接,会显示一个带有“X”的弹出窗口,然后单击 X 关闭。
哪一个提供更好、更友好的用户体验?
我喜欢#1,因为它们不必单击打开并单击关闭,但缺点是当鼠标悬停在页面上时,窗口可能会无意中打开。
I like to display more info on certain keywords in a web page. I don't want to send the visitor to another page and I prefer to show the extra info on top of the current page.
The keywords are in an html list. It's basically a list of features and I want to offer more info about the features. So I have two ideas based on having 'More Info' or '?' hyperlinks.
- The user hovers on the link and a popup window shows up with the info and goes away when they hover away.
- They click on the link, a popup window with an 'X' shows up and they click on the X to close.
Which one offers a better friendlier user experience?
I like #1 because they don't have to click to open and click to close but the disadvantage is that windows might open inadvertently while they are mousing over the page.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
添加到其他人所说的内容中,我也更喜欢点击选项。
我对悬停选项的问题是,也许这只是我的问题,如果可悬停区域较小,我很难保持鼠标足够静止以保持悬停。 在阅读过程中,光标往往会从链接上移开,我的帮助文本也会消失。
Adding to what the others have said, I would also prefer the click option.
The problem I have with the hover option is that, and maybe this is just me, if the hoverable area is on the small side, I have a hard time keeping my mouse still enough to keep hovering. The cursor tends to move off the link in the middle of reading and my nice help text disappears.
人们不会期望鼠标悬停时会弹出窗口 - 我肯定会点击。
编辑/添加:想想您每天访问的网站 - 文本和图片(通常)是静态的,悬停最多会更改颜色或为链接添加下划线,或显示一个小菜单可点击的链接。
单击链接时,您期望发生一些事情 - 重定向到另一个页面、弹出信息框、提交表单等。
我并不是说这是最好的方法,但它<这是 99% 的网络工作方式,要求用户处理悬停时的弹出框等是拒绝他们的好方法。 我知道我个人不会阅读任何带有双下划线链接的页面; 这是一个很好的迹象,表明滚动阅读内容时的意外中断可能会导致我的鼠标悬停在带有广告的链接上。
在可点击文本旁边有一个小图形,或者以其他方式表示点击将带来更多信息,是提供上下文信息而又不会让人们感到沮丧的好方法。 对于世界上大多数人来说,无需点击的弹出窗口仍然==广告或间谍软件。
编辑/澄清:我并不是指新窗口意义上的弹出窗口,只是一个灯箱式的 JavaScript 弹出窗口。 不要让用户离开页面,而是给他们一个非常明显的按钮,单击即可关闭弹出窗口。 我想我想说的是,人们不会期望在不点击的情况下会发生一些事情,尤其是当它会占用更多屏幕空间时。
People don't expect a pop-up on hover - I'd definitely go with the click.
Edit / addition: think about the website you visit every day - text and pictures are (generally) static, and hovering, at most, changes the colour or add underline to a link, or displays a small menu of clickable links.
When clicking on a link, you expect something to happen - a redirect to another page, a pop-up box with information, a form being submitted, etc.
I'm not saying this is the best way to do things, but it is the way 99% of the web works, and asking users to deal with pop-up boxes on hovers or the like is a good way to turn them away. I know I personally don't read any pages with double-underlined links; it's a good indication that an accidental break in scrolling to read the content might end up with my mouse over a link with an advertisement tied to it.
Having a little graphic beside clickable text, or otherwise denoting that clicking will lead to more information is a great way of providing contextual information without frustrating people. For most of the world, pop-ups without clicking still == advertisements or spyware.
Edit / clarification: I don't mean a pop-up in the new window sense, just a lightbox-style javascript pop-up. Don't take the user away from the page, and give them a very visible button to click to close the pop-up. I guess what I'm saying is that people don't expect something to happen without clicking, especially not if it's going to take up more space on the screen.
作为需要考虑的几个其他先例,您可能需要考虑首字母缩略词 和 abbr HTML 标记。 两者都允许您提供有关页面中特定文本的额外信息,并且都遵循“悬停”原则。
As a couple of additional precedents to consider, you might want to consider the functionality of the acronym and abbr HTML tags. Both allow you to provide extra information on a particular piece of text in the page, and both work on the "hover" principle.
需要思考的要点:
最终,从用户的角度来看,这才是适合您的应用程序的。
Points to ponder:
In the end it's what works for your app, from your users' point of view.
两者都很烦人,但如果我必须在两害相权取其轻,我会选择正确完成的鼠标悬停。
您可以在页面上设置 Javascript 来处理意外的鼠标悬停,并在显示弹出窗口之前等待几秒钟。
Both are pretty annoying, but if I had to pick the lesser of two evils, I'd go with properly done mouseovers.
You can setup Javascript on the page to handle the accidental mouse over, and instead wait for a few seconds before displaying the popup window.
您的用户期望什么? 尽量不要打破这些期望。
也许可以尝试进行走廊可用性研究,当一些用户走过办公室时抓住他们,然后让他们告诉你他们的期望。 :)
询问 Stack Overflow 也是一个好主意,但你不会获得上下文的优势,这对于可用性测试非常重要。
作为一名用户,当我移动鼠标并且意外弹出一些内容时,我觉得很烦人。 即使有 JavaScript 延迟(更好),我仍然认为当我没有明确点击它时会弹出一些东西是出乎意料的。
但是,这可能会根据您的应用程序的上下文而有所不同。
What would your users expect? Try not to break those expectations.
Maybe try a hallway usability study, grabbing a handful of users as they walk past the office, and just ask them to tell you what they would expect. :)
Asking Stack Overflow is a good idea too, but you won't get the advantage of context, which is very important with usability testing.
As a user myself, I find it annoying when I move a mouse and something pops up unexpectedly. Even with a javascript delay (which is better), I still think it's unexpected that something would pop up when I didn't explicitly click on it.
But, that might vary depending on the context of your application.
就我个人而言,我会选择点击选项。 网络上有一个标准的工作方式,它说悬停是为了获取有关链接本身的信息以及单击它会执行的操作(“查看更多评论”、“单击以获取帮助”等),而单击实际上是执行该操作。
如果您确实决定使用悬停选项,请确保对其进行编码,以便用户可以选择弹出窗口中的文本。 当您只想将一些有用的信息复制到某个地方而 GUI 在您到达之前将其隐藏起来时,这真的很烦人。
Personally, I'd go with the click option. There's a standard Way Things Work on the web which says that hovers are for information about the link itself and what action clicking on it will do ("See more comments", "Click for help", etc.), whereas clicking is what actually performs the action.
If you do decide to go with the hover option, make sure that you code it such that users can select the text in the popup. It's really annoying when you just want to copy some useful information somewhere and the GUI hides it before you can reach it.