网络可用性：警报/通知 - 如何吸引注意？
我正在构建一个 Web 应用程序，其中一项功能会导致用户在发生与用户相关的警报时收到实时通知，类似于 Stack Overflow 中的大橙色条。
我有几个选择，我想知道是否有关于最佳方法的可用性指南。一种选择是在屏幕上设置一个小通知框，当出现警报时，该通知框会闪烁颜色，但我担心简单、重复的颜色变化不足以吸引用户的注意力。
另一种选择是让一个窗口浮动在屏幕上，要求用户注意，但我总是发现这些很唐突。也许另一种形式的动画可能不那么烦人，但同样有可能吸引用户的注意力？
我并不是真的在寻找意见，而是在寻找可能涵盖此类决定的可用性讨论/资源。
I'm building a web application where one of the features causes users to be notified in real-time when an alert pertaining to them occurs, similar to the big orange bar in Stack Overflow.
I have a few options, and I was wondering if there was a usability guideline on the best way to go about this. One option is to have a small notifications box on the screen that flashes colors when an alert appears, but I'm worried that a simple, repeated change in color won't be sufficient to attract the user's attention.
Another option is to have a window come floating across the screen, demanding the user's attention, but I've always found those to be obtrusive. Maybe another form of animation could be less annoying yet equally likely to attract the user's attention?
I'm not really looking for an opinion as much as I'm looking for a usability discussion/resource that might cover this kind of decision.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
答案在某种程度上取决于用户关注的重要性以及他们采取某些行动的重要性？例如，是“您的服务器刚刚崩溃”类型的警报还是“您有来自塞尔达阿姨的新电子邮件”类型的警报？
对于第一种，最好是一些引人注目的东西 - 要么你选择浮动窗口，要么将页面背景更改为华丽的颜色（并闪烁？？？请不要打我！）。我看到的另一种吸引注意力的好方法是将页面（以及浏览器窗口）标题更改为一组闪烁的“* * * * * *” - 这有时足以吸引注意力。
对于不那么突兀、不那么重要的事情，从可用性的角度来看，SO 的顶部通知栏是最好的解决方案之一（如果不是最好的），根据主要指标（用户需要做多少工作）来处理这个问题并观察它，以及它的行为是多么直观）：
用户的眼睛比其他地方更频繁、更有可能地移动到屏幕顶部
一旦你注意到它，就很容易摆脱它 - 栏很宽（很容易用鼠标点击，不需要水平调整）并且位于最顶部（没有太多精细的鼠标） 一旦你注意到
The answer somewhat depends on how important it is that the user pay attention and how important it is that they take some action? E.g. is the alert of the "your server just crashed" kind or "you have new e-mail from aunt Zelda" kind?
For the first kind, something obtrusive is the best - either your option of floating a window, or may be change the page background to flashy color (and blink??? Don't hit me please!). One other nice way of grabbing attention I saw was to change the page (and thus a browser window) title to a flashing set of "* * * * * *" - that is un-usual enough to attract attention sometimes.
For something less obtrusive for less critical-too-notice-quickly, SO's top notification bar is one of the very best solutions from usability standpoint (if not the best), going by the main metrics (how much work does the user need to do to deal with this and to look at it, and how intuitive its behavior is):
The user's eyes travel to top of the screen more often and more likely than elsewhere
It is very easy to get rid of once you notice it - the bar is wide (easy to hit with mouse, no horisontal adjustments needed) and at the very top (not too much fine mouse work to get the pointer there).
恕我直言，烦恼级别应该反映错误级别......
对于错误，带有错误消息的层，防止用户执行任何其他操作应该更好。
对于通知，页面顶部出现一个框（就像浏览器要求您保存密码）是不错的选择。
所以我认为没有更好的解决方案...这仅取决于警报的类型...:)
IMHO, the annoyance level should reflect the error level...
For an error, a layer with the error message, preventing the user to do anything else should be better.
For a notification, a box that appears on the top of the page (like a browser asking you to save a password) is nice.
So I don't think there is a better solution... It just depends on the type of the alert... : )
查看 JGrowl，它是一个很好的不引人注目的通知框架，您可以找到一些示例屏幕截图此处。
Check out JGrowl, it's a nice framework for unobtrusive notifications, you can find some sample screenshots here.
如果您正在寻找资源，我建议您阅读 Steve Krug 的Don't Make Me Think。他的网站高级常识也是一个很好的来源。
另一个提供可用性提示和指南的好网站是 Jakob Nielsen 的 useit.com
前几天我在一个网站上有一个产品下载按钮。我点击了一下，好像什么也没发生。我再次单击它，第一个按钮创建的下载链接让我有点震惊。非常有效，引起了大家的笑声：
http://haanstra.eu/putty/
If you are looking for resources, I suggest Don't Make Me Think by Steve Krug. His site, Advanced Common Sense, is also a great source.
Another great site for Usability tips and guidelines is Jakob Nielsen's useit.com
I was at a site the other day that had a product download button. I clicked on it, it seemed nothing had happened. I clicked it again, and the download link that the first button created did a little shake at me. Very effective and it got a laugh:
http://haanstra.eu/putty/
我的系统有三种类型的通知。每种类型的通知都具有边框和背景颜色的样式：
警报，例如“您没有正确填写该字段！”都是内联处理的，因此不会有弹出窗口刺激用户。
我将系统设计为在几秒钟内淡出通知 - 这意味着用户习惯于看到绿框在几秒钟后消失。但是，当发生错误或警告时，该框会保留在用户面前的屏幕上，需要引起注意。
我认为只有在绝对必要时才应使用警告和错误 - 这样，当使用它们时，它们会保持显着的影响。在我的系统中，警告和错误不会消失 - 它们会留在那里提醒您有些事情不太对劲。
根据我的经验，如果您要与用户交互，请将其放大并在他们的面前，但不要做得太大，以免遮挡页面的其余部分。所以没有提示，也没有灯箱样式的覆盖（在我看来）。
My system has three types of notifications. Each type of notification is styled with a border and background color:
Alerts, like "You didn't fill that field in properly!" are handled inline, so no popups to irritate the user.
I've designed my system to fade out notifications a few seconds - this means that users are accustomed to seeing the green box that fades away after a few seconds. However, when an error or warning occurs the box stays on the screen right in front of the user, demanding attention.
I believe warnings and errors should be used only when absolutely necessary - that way when they are used, they maintain a significant level of impact. In my system, warnings and errors don't fade out - they stay there to remind you SOMETHING IS NOT QUITE RIGHT.
In my experience, if you're going to interact with a user, make it large and in their face, but don't make it so much so that it obstructs the rest of the page. So no prompts, or lightbox style overlays (in my opinion).
我发现 jQuery UIhighlight() 效果函数非常适合不引人注目地提醒用户某些内容已发生变化；然而，正如其他人所说，这取决于消息的重要性 - 有时你只需要表现得引人注目！
I find the jQuery UI highlight() effect function is good for unobtrusively alerting users that something has changed; however as others have said, it depends on the importance of the message - sometimes you just need to be obtrusive!