在更新我们的课程时网络设计中的新兴图案,我注意到突出的网站(如Facebook和Google AdWords)采用类似的方法来呈现帮助内容。

该趋势有两个主要组成部分:

  1. 在文档中显示帮助内容小覆盖窗口,类似于弹出窗口(除了这些覆盖层之外用户这使得它们对用户的干扰和烦扰远小于系统-启动弹出窗口)。
Facebook帮助覆盖
Facebook.com:选择救命从下拉箭头打开右上角的帮助窗口。

Google AdWords帮助覆盖
Google AdWords:选择后救命从“设置”菜单(左),出现“帮助”窗口(右)。

  1. 提供上下文适当,自适应帮助,根据用户的情况(通常是用户在应用程序中的当前位置)建议帮助主题。
Facebook自适应帮助
脸谱:自适应帮助系统从事件页面预测大多数用户都有与事件相关的问题,因此它提供了四个与管理事件相关的主题。


这些组件不是新的。自20世纪80年代后期以来,人机互动研究人员研究了自适应帮助系统。多年来,Microsoft Office产品为他们的帮助系统使用了小型弹出窗。什么新的是网络上的高影响力领导者已采用它们。正如我们所看到的那样放大镜图标平面设计,当着名的网站和应用程序开始实现类似的交互模式时,其他网站不可避免地开始复制它们。在我们看到其他网站探索此方法提供帮助内容的方法可能只是时间问题。(当然,设计师应该未经检查不得复制其他图案无论是为自己的上下文都为之工作 - 还是它对此工作是什么工作原因。

黄金规则良好的帮助

在潜入这些方法的详细信息之前,让我们记住提供帮助是其中之一10可用性启发式. 帮助系统应具备3个基本素质:

  1. 没有干扰的可用。在每个应用程序或网站中应提供某种类型的帮助,但在用户需要它之前,它应该保持不变。当他们这样做时,应该很容易找到。
  2. 简洁而描述性,用简单的语言。帮助消息应仅使用适用于所必需的单词的单词。(这是惊人的,有多少无益的帮助系统只是对系统自己的语言反动:“检查Foobar复选框激活Foobar功能。”)
  3. 不咄咄逼人。在寻求帮助后,用户应该很容易将注意力转移到原来的任务上。

在本文中,我们将介绍小叠加和上下文敏感的帮助,并为是否以及如何实现它们提供建议。

小叠加帮助窗口

当需要比可以在工具提示中适用的信息时,小叠加窗口很有用,但不足以保证将用户关注完整页面。

没有弹出窗口那么烦人

此处呈现的帮助叠加是非透明度弹出窗口。它们在浏览器窗口中打开,并允许用户在打开时与主屏幕交互。这些叠加和传统弹出的最大区别是这些都是用户启动了。因为用户寻求帮助,外观窗户不会引起同样的惊喜感和烦恼那个主动弹出窗口去吧。

让用户在同一个地方

One advantage to presenting help information on the same page with the main content is that people don’t have to leave their current location to go look at help This supports rule #3 above, because it requires minimal context switching and makes it easy for people to continue where they left off (Compare this to the real world: it’s easier if someone from tech support comes to your desk to help you fix a problem, than if you have to leave your office and walk over to the IT department to find help.)

并排指导

对于与接口的特定部分相关的逐步说明或指导,用户更容易从帮助窗口将他们的凝视切换到主区域,而不是在页面之间切换。帮助信息在单独的页面追捧用户短期记忆,因为他们必须回忆他们读到了什么,以便在返回工作区域时应用该信息。

阻止屏幕的重要区域

与打开新页面或占用屏幕3/4的弹出窗口相比,这些小叠加将留下大量屏幕空间可见。但是,根据接口,可能有用户需要访问的元素,但是窗口隐藏。

覆盖物挡住了部分屏幕
脸谱:帮助窗口中的说明将用户引导到页面右上角覆盖的元素。用户必须关闭窗口才能找到下面的按钮,如果需要更多帮助,则必须打开“帮助”并重新开始。
  • 推荐:通过让用户最小化、关闭或移动窗口,使用户能够更好地控制窗口显示。此功能对于应用程序和仪表板尤其重要,因为这些应用程序和仪表板更有可能在整个屏幕上分布工具。
可移动的帮助叠加
Google Play:用户可以重新定位页面内的叠加窗口,从而暴露接口的其他隐藏部分。

最小化帮助覆盖
TurboTax:覆盖窗口有一个清晰的方式来最小化窗口(顶部)。这允许用户在屏幕(底部)上释放空间。最大化窗口会将帮助返回到以前的状态。

练习解释

小覆盖窗口的大小限制可以有效地确保帮助文档简洁明了(遵循上面的规则2)。对于简单的问题和答案,例如查找电话号码,只需要一个小窗口。然而,对于更复杂的问题,有些用户需要更多的上下文和更详细的内容,而不是简明的摘要。高级用户通常更喜欢整页的帮助知识库,在那里可以更全面地解释某个特性。

  • 推荐:包括链接可在帮助页面上查看更多信息。
链接到完整帮助文章
googleadwords:提供一个链接来查看文章(可能还有更多的细节和相关主题)是一种有效的方式,可以支持那些想要更多上下文和深入信息的用户。

自适应帮助

自适应或上下文帮助系统根据应用程序内的最新操作或位置提供对用户的建议。还称为智能帮助系统,它们存在上下文敏感信息。上下文帮助的最简单示例是工具提示。

微软Clippy
微软的动画纸夹Clippy是最着名的智能帮助系统之一。如果系统检测到用户键入“亲爱的JAKOB”,则会在角落出现,提供帮助和格式化字母。(图像来源:wikipedia.org)。

预期用户问题可以更快地找到答案

微软的Clippy收视率很低,部分原因是它在没有用户直接请求的情况下出现。与弹出窗口一样,动画也让不需要帮助的用户感到惊讶和恼火(违反了本文顶部的规则1)。但目的是好的:预测用户的需求并提供相关信息的快捷方式。工具提示做得很好,因为当用户悬停、单击或轻触某个特定的UI元素时,它们会解释该元素。

帮助系统,如Google AdWords和Facebook提供的链接到更深入的帮助内容,这些内容与用户当前情况有关。这些链接,当他们正确预测用户的需求时,可以快捷方式快捷方式到信息的路径,类似于导航中的Mega菜单的方式。

Google AdWords上下文帮助
谷歌adwords:虽然在竞选活动部分,选择“Ad Groups”选项卡,Adaptive Help菜单表明与广告系列和广告组相关的流行主题。

系统无法预测一切,用户知道

如果系统建议用户对用户不感兴趣的话题,他们将迅速学会忽视这些建议。(Clippy失败的其他原因是因为它在预测用户的问题时坏了)。甚至在他们的预测中设法高度准确的系统也面临着艰巨的战斗。他们必须与他们过去使用的其他帮助系统中学到的人员反对,这就是系统不知道人们想要的东西。因此,许多用户不打扰通过建议的主题来观看,因为他们认为建议不会回答他们的问题。

  • 推荐:只有当智能帮助系统在预测用户目标方面有很高的准确性时,才能使用它。(对于希望复制这一趋势的设计师,请记住,使用这些系统的公司通常比大多数公司有更大的预算来开发和维护它们)。
  • 推荐:建议的帮助主题应该是可扫描的,并使用关键字进行扫描和前置。用户将更加倾向于给出任何建议的主题,如果他们很容易撇去。
帮助句子和片段
trubotax.com(左)在答案的片段中呈现出完整句子的最佳问题,这需要更长的时间来扫描而不是Facebook.com的简短主题(右)。
  • 推荐:在帮助窗口中保留搜索字段,作为用户查找所需内容的替代方法。此外,还提供了一个指向完整帮助中心的链接,因为高级用户可能会发现完全跳过建议会更快,而且可能更喜欢浏览答案。

结论

在不仔细考虑时间和预算的情况下,不应完成本文中描述的两个帮助相关趋势。如果接口需要更多的帮助,而不是适合工具提示或内联文本,考虑小帮助叠加作为补充一个完整的知识库。通过这种方式,大多数用户可以得到他们简单而频繁的问题的答案,而不需要脱离上下文并转到一个单独的帮助页面。对于大多数公司来说开发智能自适应帮助系统的成本远远超过了好处给用户。大多数情况下,预算可以更好地花在可用性测试和对界面本身的改进上。