帮助系统案例与赏析
1. 前言
网站设计师应将每一位访问我们网站的用户视为潜在的新用户，为他们提供足够的指导和指南，以完成他们的任务并熟悉网站。几乎所有类型的网站都必须帮助用户，但方式不同。网站的类型将决定您应该提供的帮助系统的类型。
此外，帮助系统的有效性直接关系到网站设计的质量。一个设计不好的帮助系统——无论其内容多么好——都会带来劣质的用户体验。在本文中，我们将通过示例研究设计有效帮助页面的一些方法，这些方法可能会启发您的工作。
2. 什么是帮助系统
我们在网站设计中看到许多术语和类型的帮助系统：“Help”、“Support”、“FAQ”、“Docs”、“Knowledge Base”等。所有这些网页都旨在为用户提供帮助。
帮助系统是一个当用户有疑问或寻求帮助的时候能够方便访问的位置,例如，当他们开始使用网站时，以及当他们可以从有用信息中受益时。它们是至关重要的，因为它们是网站访问者在决定放弃并搜索另一个满足他们要求的网站之前最不希望看到的地方之一。因此，帮助系统对于留住网站访问者至关重要。
虽然帮助系统很重要，而且往往是不可或缺的，但许多网站设计忽略了它们的有用性和重要性。原因通常是网站所有者对帮助内容的需求或将其整合到网站内容中的益处缺乏认识。例如，在网上商店的情况下，您可以将购买说明放在主页或用户可以轻松找到的地方，而不是创建单独的帮助部分。这也将增加可查找性.
3. 帮助系统案例
为了帮助后面的讨论，让我们来看几个帮助系统的示例。正如你在下面看到的，Marie Catrib’s网站将其联系信息和营业时间放在主页的页脚。这巧妙地将有时完全独立的页面的内容嵌入页脚中。此信息可被视为网站帮助系统的一部分。
FAQ（常见问题）是回答许多用户反复询问或思考的问题的地方。换句话说，它可能是顶级类别中的一个大型站点帮助或支持系统的子集。
在大多数情况下，“帮助”是帮助系统的更好名称。“支持”通常用于提供某种技术服务的商业网站。有些部分被命名为“帮助/支持中心”。下面，您可以看到Josh Lockhart’s website的网站使用“帮助”链接作为其帮助页面的入口点。
帮助页面进一步细分为“如何安装”、“如何购买”、“常见问题解答”等部分。
下面是帮助系统的另一个示例。鉴于其内容（包括各种类别），“帮助中心”是谷歌网站帮助系统的正确名称。
因为他们有很多产品，所以他们的系统非常全面，必须组织得很好，才能有效和可用。
California Courts有一个合适的帮助中心，有明确的分类。图标用于促进帮助系统不同部分的视觉认知。
Survey Monkey的帮助中心也有有精心设计的分类。
Ten Little Monkeys在页脚的“帮助和信息”标题下列出了一些帮助页面。
BrightKite和Ten Little Monkeys一样，使用页脚上的“帮助”标题，然后列出一些有用的帮助页面，这些页面是他们帮助系统的一部分。
作为一个反例，Fine Point只将他们的联系信息放在其帮助中心，这是一个错误命名和设计不完整的帮助系统的教训。作为一个很好的惯例，“联系”或“联系我们”应该是这个网页的最好的标题而不是帮助中心。
4. 帮助页面的功能
所有帮助页面，无论其各自的特性如何，都有一些共同的特性。
- 页面必须清晰且具有说明性。
- 应该对每个主题有一个简短、描述性的解释，以便快速阅读。来帮助页面的用户通常已经感到困惑，因此他们不倾向于阅读长文本块。
- 遵循良好的扫描辅助工具（如加粗关键字）可以提高可读性。
在下面的示例中，您可以看到，Maverick Label加粗了文本的重要部分，从而帮助用户。
尽管设计简单，但System 7 today上的链接仍能很好地突出重要主题。
除了这些特性之外，还有一些其他特性值得考虑。
让我们回顾一下。
4.1. 无障碍
任何页面最重要的一个方面是无障碍，但对于帮助页面来说更为重要。帮助页面应简单且快速访问。在页眉和页脚中链接到它们，特别是在长页面和主页上。
用户不必深入挖掘隐藏很深的页面。经验应该是直截了当的。例如，Traffik将清晰的链接放在普通背景上，以提高可读性。
ProWorkflow将其支持页面的直接链接放置在其主导航栏中。
Invoice Machine遵循我们在上面看到的模式, 在其主导航上显示了帮助标签,和描述性文本。
Constant Contact为其资源使用适当的措辞（“Learning Center”），并在视觉上与其他链接区分开来。
AAFP的面包屑导航显示了通往帮助中心的超长路径。由于隐藏得太深，帮助部分可能不会被用户的注意注意到。
从主页上找到谷歌的帮助中心相当困难。
事实上，谷歌搜索速度更快。
4.2. 良好的分类
为了防止混淆，包含大量内容的帮助系统应按主题仔细组织。要使帮助系统有效，您必须在信息体系结构上花费时间。有少量的主要类别，每个类别都可以有子类别。
有不同的分类方法，但一般来说，将更重要的主题和常见问题放在结构的更高位置。此外，考虑使用图标来增加类别的视觉提示，并为页面添加生命。在下面的例子中，苹果的帮助中心非常出色，就像它的产品一样！
这些主题分类良好，涵盖了用户可能需要帮助的所有领域。
ProWorkflow将其帮助内容组织为多个类别，每个类别包含子类别。
Campaign Monitor使用图标支持其分类，将所有内容放在正确的位置。
为了防止杂乱无章，谷歌将不太重要的项目放在另一个页面上，可以通过链接访问。
Hostway是另一个带有图标但有自己风格的分类示例。
HWG的FAQ页面分类非常简单，没有任何多余的内容。
Apache Ant的帮助系统是另一个纯HTML页面。这很简单，但能完成任务。
4.3. 搜索功能
对于广泛的帮助系统，能够搜索可能非常有用。搜索结果应该一眼就能显示有关主题的所有信息。但要真正有用，它应该只显示帮助部分的页面，而不是网站的其他部分，这样所显示的结果就不会让人感到不知所措或困惑。
谷歌的帮助中心有一个部分特定的搜索，适当地标记为“搜索帮助”，以表明您只搜索帮助中心。
Storenvy的搜索功能定位良好，标记良好（即“搜索支持”）。
TiVo还显示了良好的定位，并为搜索框创建了独特的空间。
还为search框添加了颜色进行美化。
ProWorkflow尽管分类良好，但缺少搜索，这可能会导致使用不方便。
4.4. 链接到其他资源
有时，用户会被导航到错误的地方，或者找不到他们想要的东西。通过相关超链接为他们提供其他有用的选项，如其他帮助主题、论坛等。
ThinkGeek列出了用户可能想去的几乎所有其他地方，他们把它们放在正确的位置，并有一个好的标题。
Notable链接到最新论坛帖子链接，这是引入新资源和提高可发现性的好主意。
像ThinkGeek一样，雅虎将链接组织在信息标题下，这很有帮助。
4.5. 联系信息
将联系人信息放在正确的位置是帮助用户的另一种方式。当用户找不到他们要找的东西时，他们会问，所以你应该可以通过某种方式访问：电话、电子邮件、在线聊天等。虽然联系信息通常出现在主页上，当然也出现在联系页面上，但如果用户找不出他们要找什么，将其放在帮助页面上是一个好主意。
Crazy Egg的联系信息呈现得很好，位置也很好。
iPersonalAssistant提供简单的联系信息，没有任何不必要的修饰。像Crazy Egg一样，它也欢迎电子邮件。
TiVo提供实时聊天，这是网站的一个非常宝贵的功能。
ThinkGeek提供全面的联系信息。并且其定位良好。
help.com邀请用户提交一张帮助单，这很方便，但可能不如实时聊天。当然，这两种方法都需要足够的人手来满足需求。
4.6. 获得用户反馈
为了改进帮助材料，评估其效率和衡量用户满意度，反馈非常重要。这个过程不应该很耗时，否则用户不会参与；星级或数字评级比表格更有效。微软的一项非常简单的调查询问帮助资源是否有用。
help.com要求用户写下他们的建议、投诉和其他反馈。虽然反馈可能更详细，但分析它是一项令人厌烦的工作。考虑到参与所需的时间，用户可能会拒绝。
雅虎复杂的形式对用户来说似乎过于累赘。
NASA的宇宙调查！显示平均评级和评级数量是明智的。
他们甚至提供帮助（见问号）。
4.7. 整合
我们已经回顾了帮助页面的一些基本元素。许多帮助页面都没有这些功能，而一些帮助页面同时显示这些功能。几乎完美的帮助部分很少见，而那些部分往往属于网络上最成功的公司。
Campaign Monitor展示了完美帮助部分的所有特征。
与其他功能一样，网络巨头雅虎在这方面也有非常好的帮助功能。
5. 相关阅读
- 20 Websites to Help You Master User Interface Design
- How Cognitive Biases Shape User Experience
- Making User Interface Elements Difficult to Use By Intent
三十个优秀帮助系统供参考
Slack：Slack的帮助中心组织良好，易于导航。它包括一个搜索栏，一个目录和一个热门文章列表。
Asana：Asana的帮助中心也组织良好，包括一个搜索栏，一个目录和一个热门文章列表。它还包括一个常见问题解答部分。
Trello：Trello的帮助中心简单易用。它包括一个搜索栏和一个热门文章列表。
GitHub：GitHub的文档非常全面，组织良好。它包括一个搜索栏，一个目录和一个热门文章列表。
Shopify：Shopify的帮助中心组织良好，包括一个搜索栏，一个目录和一个热门文章列表。它还包括一个常见问题解答部分。
Zendesk：Zendesk的帮助中心设计精美，易于导航。它包括一个搜索栏，一个目录和一个热门文章列表。
Atlassian：Atlassian的帮助中心组织良好，包括一个搜索栏，一个目录和一个热门文章列表。它还包括一个常见问题解答部分。
Salesforce：Salesforce的帮助中心设计精美，易于导航。它包括一个搜索栏，一个目录和一个热门文章列表。
Zoom：Zoom的帮助中心简单易用。它包括一个搜索栏和一个热门文章列表。
Microsoft：Microsoft的帮助中心非常全面，组织良好。它包括一个搜索栏，一个目录和一个热门文章列表。
Google Workspace: Google Workspace的帮助中心组织有序，包括搜索栏、目录和热门文章列表。
Dropbox: Dropbox的帮助中心简单易用，包括搜索栏和热门文章列表。
Atlassian Community: Atlassian Community是一个用户可以在其中提问和回答有关Atlassian产品的论坛。它包括搜索栏和热门主题列表。
Slack Community: Slack Community是一个用户可以在其中提问和回答有关Slack的论坛。它包括搜索栏和热门主题列表。
Microsoft Tech Community: Microsoft Tech Community是一个用户可以在其中提问和回答有关Microsoft产品的论坛。它包括搜索栏和热门主题列表。
Asana Community: Asana Community是一个用户可以在其中提问和回答有关Asana的论坛。它包括搜索栏和热门主题列表。
GitHub Community: GitHub Community是一个用户可以在其中提问和回答有关GitHub的论坛。它包括搜索栏和热门主题列表。
Shopify Community: Shopify Community是一个用户可以在其中提问和回答有关Shopify的论坛。它包括搜索栏和热门主题列表。
Zoom Community: Zoom Community是一个用户可以在其中提问和回答有关Zoom的论坛。它包括搜索栏和热门主题列表。
Salesforce Trailblazer Community: Salesforce Trailblazer Community是一个用户可以在其中提问和回答有关Salesforce的论坛。它包括搜索栏和热门主题列表。
Google Cloud Community: Google Cloud Community是一个用户可以在其中提问和回答有关Google Cloud的论坛。它包括搜索栏和热门主题列表。
Microsoft Q&A: Microsoft Q&A是一个用户可以在其中提问和回答有关Microsoft产品的论坛。它包括搜索栏和热门主题列表。
Atlassian Marketplace: Atlassian Marketplace是Atlassian产品的应用和插件目录。它包括搜索栏和热门类别列表。
Slack App Directory: Slack App Directory是Slack的应用和集成目录。它包括搜索栏和热门类别列表。
GitHub Marketplace: GitHub Marketplace是GitHub的应用和集成目录。它包括搜索栏和热门类别列表。
Shopify App Store: Shopify App Store是Shopify的应用和插件目录。它包括搜索栏和热门类别列表。
Google Workspace Marketplace: Google Workspace Marketplace是Google Workspace的应用和插件目录。它包括搜索栏和热门类别列表。
Microsoft AppSource: Microsoft AppSource是Microsoft产品的应用和插件目录。它包括搜索栏和热门类别列表。
Zoom App Marketplace: Zoom App Marketplace是Zoom的应用和集成目录。它包括搜索栏和热门类别列表。
Salesforce AppExchange: Salesforce AppExchange是Salesforce的应用和插件目录。它包括搜索栏和热门类别列表。
6. 总结
本指南介绍了一些设计有效帮助页面的基本技巧和最佳实践。我希望你能够遵守适用于你的规则，不要为绕过其他规则而付出太大的代价。所以，开始尝试，同时记住基本知识。本文原文发布在鹏叔的技术博客 - 帮助系统案例与赏析