Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

设计师要懂的10个启发式可用性原则-尼尔森十大可用性原则

25 年前,Jakob Nielsen 尼尔森 提出了交互设计的 10 条原则。这些原则是基于多年在可用性工程领域的经验而开发的,它们已成为人机交互的经验法则

25 年前,Jakob Nielsen 尼尔森 提出了交互设计的 10 条原则。这些原则是基于多年在可用性工程领域的经验而开发的,它们已成为人机交互的经验法则。

今天,这10项原则对现在产品指导同样重要。它们可以帮助产品团队在早期可用性测试期间节省大量时间,以便他们可以将注意力集中在更复杂的设计挑战上。此外,在设计新产品或功能时,将它们用作清单也是值得的。

1、状态可见性

系统应当始终为用户传递当前的状态信息,适时提供反馈;不要让用户猜测,将信息直接显示给用户。

人们喜欢事情在控制范围之内,只有这样他们才能感到安全。从进化的角度来看,对安全和生理需求(如食物、睡眠和性)的需求帮助我们生存。通过在每次交互后提供有关系统状态和反馈的信息,可以唤起控制感。

看看你的智能手机。屏幕亮起后,它会立即通知您其电池、wifi 连接、收到的消息、未接来电等信息。想象一下,如果缺少这些信息,您会感到多么不安全。通过使用标志、图标和指示器,系统可以传达其状态并帮助用户做出更好、更明智的决策。

当人们与任何系统交互时,它应该始终提供有关交互的即时反馈。我们每个人都被过去的糟糕产品使用体验所伤害,这让我们在使用其它产品时会先验地猜测和怀疑。按钮颜色的变化、加载进度条或图标动画等视觉标志可以帮助用户了解正在发生的事情并防止他们进行其他不必要的交互。

2、贴近使用者环境

为你的目标用户而设计,用通俗的用户语言替代晦涩难懂的系统术语;应当考虑到目标用户自身因素(学历、年龄、特殊文化背景、数字化水平等)对其行为操作的影响。

人们在接近每一个新系统时都会考虑到一个心理模型。换句话说,人们根据他们对其他类似系统的经验来推测该系统如何工作。通过使用他们熟悉的语言,您可以帮助用户克服最初的尴尬。

一个极端的例子是拟物化设计,它将现实世界对象的所有细节都转移到软件中。在智能手机普及之初,它帮助人们通过他们之前熟悉的美学和流程来学习如何使用他们的新伙伴。

即使在当今极简主义的世界里,属于那个时代的设计线索仍然保留着:指南针或计算器等应用程序,或文件夹、切换或锁定图标等设计组件。此外,来自现实世界的语言和概念有助于用户轻松理解系统。这就是为什么存储卡片的应用程序被称为“钱包”,我们使用“书签”来保存我们最喜欢的网站,我们使用“垃圾桶”来删除旧文件,或者在网上购物时使用“购物车”。

3、用户控制和可撤销

用户经常性进行“探索性操作”,而撤销和重做的提供能够减缓他们的焦虑,进一步促使他们进一步操作。

人们经常匆忙地与系统交互,而且很多时候,他们甚至没有完全集中注意力。这会导致诸如误点击或其他可能令人沮丧的事故。想象这样一种情况,例如意外删除重要文件或在公司的社交媒体上发布语法错误;每个系统都应该有一个明确标记的“紧急出口”机制,为用户在发现自己想撤回/反悔状态后提供一个简单的方法。

“每个系统都应该有一个明确的返回或撤销操作。”

一个适当的返回或撤销可以是简单的箭头返回(例如在浏览器中)、一个垃圾箱,它可以保护我们不被意外删除,或者“撤消”按钮,它可以让用户恢复上一个操作。所有这些示例都展示了在用户犯错时不会让用户失望,而是允许用户修复错误。

4、一致性原则(Consistency)

应用能够贯彻相同的标准,使用统一风格的元素、相同功能按钮的位置和样式保持一致、优先级相同的元素也应保持一致性。

你有没有注意到,无论你使用什么应用程序,复制粘贴功能的工作原理都是一样的?只需从底部边缘向上滑动即可进入主屏幕这一事实又如何呢?这只是 Apple 用来使他们的系统对用户保持一致和可预测的两种可用性模式。一个可理解的系统不应该通过对相同的概念使用不同的文字、视觉或动作来混淆用户。

“不要忘记,人们将 90% 的时间花在与其他应用程序交互上。”

Apple 的 Human Interface GuidelinesGoogle 的 Material Design Guidelines是您的移动应用程序设计系统一致的一个很好的起点。它们提供了一个坚实的基础,通过许多示例描述了重要的设计组件。在设计您的新应用程序时,永远不要忘记人们花费 90% 的时间与其他应用程序进行交互,因此使用最佳实践和通用模式最终会带来更好的整体体验。一致性是可用性的最强贡献者之一。

5、防犯错误

用户讨厌错误,甚至更讨厌他们自己做错了的感觉。要么消除容易出错的条件,要么检查它们并在提交操作之前通知用户。

根据诺曼 的书《日常用品的设计》,与用户界面交互会产生两种错误:失误和错误。

当用户倾向于做一个动作,但由于注意力不集中而执行另一个动作时(例如,当执行众所周知的任务时),就会出现误操作。防止用户误操作的策略是通过引导他们,仅通过安全区域来最大程度地减少误操作发生的可能。使用不允许用户设置错误值的约束(例如,当您输出一个数字字段时,可以限制字母的出现),建议体现出最常见的选项使用户更容易选择(例如,在搜索时),或者在失误或错误的操作之前使用确认对话框。

错误通常是由用户对系统工作方式的错误心理模型引起的。在这种情况下用户误解了通信,并有意识地执行导致与他们预期不同的结果的动作。这类错误通常不容易修复,应该在用户测试阶段发现。使用清晰的沟通和一致的设计系统来防止错误。

如何做:

1、错误发生前,禁止操作继续。

2、操作时,预示错误信息。

3、操作后,允许撤销回滚。

6、减轻用户记忆负担

人们识别某物相比记忆更容易。

iOS 10规范文档中关于手势操作的说明,也遵循此原则。

手势操作应当为基于界面导航和操作提供补充性的快捷手势,而不是取而代之。

在一些情况下,提供简单明显的方式显示导航或者执行操作,即使这可能意味着额外的点击。

记忆检索有两种类型:识别和回忆。当你与遇到熟悉的人或物体时,就会清晰快速辨别。这是一种从记忆中检索的非常浅薄的形式,不需要任何工作。当您必须在记忆中找到很少使用的信息(姓名、年份、详细信息等)时,就会发生回忆。为了回忆信息,人们必须激活更多的记忆块。因此,召回过程是更深层次的检索,需要更多的时间。(这就是为什么测试中的多项选择题比开放式答案更容易回答的原因。)

一个好的用户界面不需要用户频繁地回忆。相反,它提供了做出选择所需的所有选项和信息。快速浏览图标或文本菜单并选择令人垂涎的功能,比试图从记忆中召回它然后将其写入一些类似终端的文本界面要容易得多。为用户提供记忆信息的线索,并在功能名称旁边提供图标或为相关功能使用特定颜色。精心设计的信息架构也有助于寻找信息。

不熟悉终端命令语法的用户无法进行像打开或删除文件那样简单的操作。

如何做:

  1. 简化应用层级结构。
  2. 遵循“二八法则”突出重点,减少干扰元素。
  3. 提供视觉辅助以及文本提示(例:步骤繁多的进程应提供进度指示器、邮政编码的输入框就不要和用户名的一样长啦、控制输入框中的占位符标签在未录入文本时保持可见)。

7、使用灵活性和效率

功能与易用性之间通常存在一个平衡,对于软件中的每个特性、功能,都必须提供一种途径让使用者调用或控制。如果用户的目标是可预测而且常用的,使用者不应该为了实现这个目标而必须做很多工作。

每个用户都是独一无二的;每个人都有自己不同的需求和期望。同样,每项任务都是独一无二的,需要不同的控制器。

应用程序应始终仅显示相关的 UI 元素和功能。查看 Apple Pages 或 G-Drive 应用等应用;在编写文档时,您只会看到一些与文本编辑相关的控制器。但是,当您决定添加一个额外的图表时,会出现一个专门为帮助您完成此任务而精心策划的针对性功能。

不要忘记一般的专业人士和高级用户!进入学习曲线的新用户与每天使用几个小时的专业人员的需求总是不同的。高级用户可能会喜欢高级选项、快捷方式,甚至是应用程序界面的可扩展性和自定义。高级用户需要节省时间并快速执行任务,但也要准确可靠。一个好的用户界面应该为没有经验的用户和有经验的用户提供适当的功能。

如何做:

  1. 提供快捷方式以及快捷手势(例:右滑返回)。
  2. 允许用户进行“个性设置”(例:ALTO中的手势自定义)。
  3. 对用户行动进行预测(例:pinterest自动补全搜索、搜索历史)。
  4. 简化流程或者将长流程分解成多个步骤。
  5. 聪明的默认值

8、美学和极简设计

极简主义并不意味着有限。所有信息都应该是有价值的、彼此相关的。

iOS规范的三大原则-清晰(Clarity)、遵从(Deference)、深度(Depth)

极简主义不仅是过去几年的一种时尚,而且肯定是一种持久的趋势,其目的是将主题的描述减少到其必要元素。它在艺术、音乐和文学中有许多应用。极简主义帮助用户快速访问重要信息并快速得出结果。

为了让重要的内容脱颖而出,我们可能使用留白。它有助于提高内容的易读性,突出号召性用语,并营造出平衡且令人愉悦的外观 。细微的设计使用必要的颜色来突出视觉层次。想想每种颜色的用途和意义。始终如一地使用它。

如何做:

  1. 留白、颜色、字体、图形以及其它界面元素能够巧妙地突出重点内容并且表达可交互性。
  2. 减少使用边框、渐变和阴影让界面尽可能轻量化。
  3. 厘清信息的优先级,按需分配。

9、容错原则

错误消息应以简明的语言表达(不要使用系统语言来描述系统正在做什么),准确地指出问题,并建设性地提出解决方案帮助用户从错误中恢复,将损失降到最低。

任何类型的错误和问题都会让用户感到沮丧。尤其是产品错误体验设计和沟通不佳时。无论我们是否愿意,用户总是倾向于让自己陷入需要寻找出路的境地。为了最大程度地减少挫败感,我们在设计错误体验上,投入的精力应该与投入到系统其余部分一样多的精力。

错误消息的错误示例,对用户来说既不清晰也不有用。

每个错误消息都应该尽可能明确和准确。没有人愿意阅读诸如“出现问题”之类的模糊信息。用可读的人类语言陈述发生了什么。像“ErrorDomain error 20”这样的消息同样荒谬。给用户一些关于下一步做什么的建设性建议。提出解决方案或将用户引导至可以处理这种情况的帮助。好的错误信息的最后一条规则是礼貌。永远不要责怪用户或暗示他们很愚蠢。

立即建议下一步的错误消息的一个很好的例子。

如何做:

  1. 告知用户当前的错误发生的具体原因,确保信息清晰无误(例:密码位数少于8位)。
  2. 为用户提供解决方案,引导用户朝正确方向前进(例:网络连接不给力,请检查网络设置)

10、帮助和说明文件

即使最好的应用也需要一份帮助和说明文档。

每个应用程序都应该努力在没有任何文档的情况下完美使用,但正如我们之前提到的,每个用户都有不同的技能和不同的知识水平,对 90% 的用户来说容易的事情可能对剩下的 10% 的用户来说很难。编写良好的文档、常见问题解答和教程可能对于留住目瞪口呆的用户至关重要。

文档应该结构良好,用人类语言编写,并且极简。有时用户不需要大量文档;显示新功能如何工作的简单指导标记或解释基础知识的简短入门指南就足够了。Trello、Slack 和 Duolingo 等应用在引导用户方面做得很好。

如何做:

  1. 无需提示。
  2. 一次性提示。
  3. 常驻提示。
  4. 帮助文档。

结论:

在交互、视觉层面的设计不管如何变化,都应以满足底层商业目标和用户基本需求为主要。另一方面尼尔森十大原则之所以被称为“启发式”,是因为它是适用广泛的经验原则,而不是具体的可用性指南,一切都应根据具体需要而定。


Fatal error: Uncaught TypeError: implode(): Argument #2 ($array) must be of type ?array, string given in /www/wwwroot/coool_ink/wp-content/plugins/wp-rocket/vendor/matthiasmullie/minify/src/CSS.php:528 Stack trace: #0 /www/wwwroot/coool_ink/wp-content/plugins/wp-rocket/vendor/matthiasmullie/minify/src/CSS.php(528): implode() #1 /www/wwwroot/coool_ink/wp-content/plugins/wp-rocket/vendor/matthiasmullie/minify/src/CSS.php(314): MatthiasMullie\Minify\CSS->shortenColors() #2 /www/wwwroot/coool_ink/wp-content/plugins/wp-rocket/vendor/matthiasmullie/minify/src/Minify.php(111): MatthiasMullie\Minify\CSS->execute() #3 /www/wwwroot/coool_ink/wp-content/plugins/wp-rocket/inc/classes/subscriber/Optimization/class-minify-html-subscriber.php(90): MatthiasMullie\Minify\Minify->minify() #4 /www/wwwroot/coool_ink/wp-content/plugins/wp-rocket/inc/vendors/classes/class-minify-html.php(227): WP_Rocket\Subscriber\Optimization\Minify_HTML_Subscriber->minify_inline_css() #5 [internal function]: Minify_HTML->_removeStyleCB() #6 /www/wwwroot/coool_ink/wp-content/plugins/wp-rocket/inc/vendors/classes/class-minify-html.php(118): preg_replace_callback() #7 /www/wwwroot/coool_ink/wp-content/plugins/wp-rocket/inc/vendors/classes/class-minify-html.php(48): Minify_HTML->process() #8 /www/wwwroot/coool_ink/wp-content/plugins/wp-rocket/inc/classes/subscriber/Optimization/class-minify-html-subscriber.php(77): Minify_HTML::minify() #9 /www/wwwroot/coool_ink/wp-includes/class-wp-hook.php(324): WP_Rocket\Subscriber\Optimization\Minify_HTML_Subscriber->process() #10 /www/wwwroot/coool_ink/wp-includes/plugin.php(205): WP_Hook->apply_filters() #11 /www/wwwroot/coool_ink/wp-content/plugins/wp-rocket/inc/classes/Buffer/class-optimization.php(94): apply_filters() #12 [internal function]: WP_Rocket\Buffer\Optimization->maybe_process_buffer() #13 /www/wwwroot/coool_ink/wp-includes/functions.php(5464): ob_end_flush() #14 /www/wwwroot/coool_ink/wp-includes/class-wp-hook.php(324): wp_ob_end_flush_all() #15 /www/wwwroot/coool_ink/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters() #16 /www/wwwroot/coool_ink/wp-includes/plugin.php(517): WP_Hook->do_action() #17 /www/wwwroot/coool_ink/wp-includes/load.php(1279): do_action() #18 [internal function]: shutdown_action_hook() #19 {main} thrown in /www/wwwroot/coool_ink/wp-content/plugins/wp-rocket/vendor/matthiasmullie/minify/src/CSS.php on line 528