【译文】10 种用户界面设计可用性启发式方法

OathKitchen
52 阅读7分钟

原文：10 Usability Heuristics for User Interface Design - Jakob Nielsen

雅各布-尼尔森（Jakob Nielsen）关于交互设计的 10 条一般原则。它们被称为 "启发式"，因为它们是广泛的经验法则，而不是具体的可用性指南。

1. 系统状态可见性

设计应始终在合理的时间内通过适当的反馈，让用户了解正在发生的事情。

当用户知道当前的系统状态时，他们就会了解之前互动的结果，并决定下一步的操作。可预测的交互会产生对产品和品牌的信任。

image.png

商场地图上的 "您在这里 "指示器可显示人们目前所处的位置，帮助他们了解下一步该往哪里走。

Tips

  • 明确告知用户系统的状态--在未告知用户的情况下，不得采取任何会对用户造成影响的行动;
  • 尽快（最好是立即）向用户提交反馈意见;
  • 通过开放和持续的沟通建立信任;

2. 系统与现实世界的匹配

设计应使用用户的语言。使用用户熟悉的单词、短语和概念，而不是内部术语。遵循现实世界的惯例，使信息以自然、合乎逻辑的顺序出现。

设计的方式在很大程度上取决于具体的用户。对你和你的同事来说非常清楚的术语、概念、图标和图像，对你的用户来说可能是陌生或令人困惑的。

当设计的控件遵循现实世界的惯例并与预期结果相对应（称为自然映射）时，用户就更容易学习和记住界面的工作方式。这有助于打造一种直观的体验。

image.png

如果炉灶控制器与加热元件的布局相匹配，用户就能快速了解哪个控制器对应哪个加热元件。

Tips

  • 确保用户无需查找单词定义即可理解其含义;
  • 切勿认为自己对词语或概念的理解与用户一致;
  • 用户调研将揭示用户熟悉的术语，以及他们围绕重要概念的心智模式；

3. 用户控制与自由

用户经常会错误地执行操作。他们需要一个有明确标记的 "紧急出口"，以便在不需要经过冗长流程的情况下离开不想要的操作。

当人们可以轻松退出流程或撤销操作时，就会产生一种自由和自信的感觉。退出可以让用户保持对系统的控制，避免陷入困境和感到沮丧。

image.png

数字空间需要快速紧急出口，就像物理空间一样。

Tips

  • 支持撤销和重做;
  • 显示退出当前交互的明确方法，如取消按钮;
  • 确保出口有清晰的标签且易于发现;

4. 一致性与标准

用户不必怀疑不同的词语、情况或动作是否意味着同一件事。要遵循平台和行业惯例。

雅各布定律指出，人们大部分时间都花在使用除您的产品之外的数字产品上。用户对其他产品的体验决定了他们的期望。未能保持一致性可能会迫使用户学习新东西，从而增加他们的认知负担。

image.png

办理入住手续的柜台通常位于酒店前台。这种一致性符合顾客的期望。

Tips

  • 通过保持内部和外部两种一致性来提高可学性;
  • 保持单一产品或产品系列的一致性（内部一致性）;
  • 遵循既定的行业惯例（外部一致性）;

5. 错误预防

好的错误信息固然重要，但最好的设计首先要防止问题的发生。要么消除容易出错的情况，要么对其进行校验，并在用户执行操作前让用户进行二次确认。

错误（errors）分为两种：失误(slips)和错误(mistakes)。失误(slips)是由于注意力不集中造成的无意识的错误(errors)。错误(mistakes)则是基于用户心智模型与设计不匹配而产生的有意识的错误(errors)。

image.png

弯弯曲曲的山路上的护栏可以防止司机掉下悬崖。

Tips

  • 分清工作的轻重缓急： 先预防高成本错误，再预防小错误；
  • 提供一定的限制和良好的默认设置，避免失误；
  • 通过消除记忆负担、支持撤销和警告用户来防止出错；

6. 识别而不是回忆

通过使元素、操作和选项可见，尽量减少用户的记忆负担。当用户从界面的一个部分路由到另一个部分时，不需要记住相关信息。设计所需的信息（如字段，标签或菜单项）应在需要时可见或易于检索。

人类的短期记忆是有限的。强调识别的界面可减少用户的记忆负担。

image.png

对大多数人来说，识别国家的首都比记住它们更容易。人们更容易正确回答“里斯本是葡萄牙的首都吗？”而不是 “葡萄牙的首都是什么？”

Tips

  • 让用户识别界面中的信息，而不是强迫他们记住（"回忆"）这些信息；
  • 根据上下文提供帮助，而不是让用户背诵冗长的教程；
  • 减少用户需要记住的信息；

7. 灵活与高效

对新手级用户隐藏的快捷方式，可以加快专家级用户的交互速度，从而使设计既能满足缺乏经验的用户，也能满足有经验的用户。允许用户为频繁的操作设置快捷方式。

灵活的流程可以采用不同的方式，因此人们可以选择适合自己的方式。

image.png

地图上列出了常规路线，但熟悉当地情况的人可以抄近路。

Tips

  • 提供键盘快捷键和触摸手势等加速器;
  • 为个人用户量身定制内容和功能，提供个性化服务;
  • 允许自定义，用户可以选择他们想要的工作方式;

8. 美学与简约设计

界面不应包含无关或很少需要的信息。界面中每一个额外的信息单位都会与相关的信息竞争，降低它们的相对可见度。

这种启发式设计并不意味着你必须使用扁平化设计，而是要确保内容和视觉设计都集中在要点上。确保界面的视觉元素服务于用户的主要目标。

image.png

华丽的茶壶可能会有过多的装饰元素，比如不舒服的把手或难以清洗的喷嘴，这些都会影响实用性。

Tips

9. 帮助用户识别、诊断和从错误中恢复

错误信息应以直白的语言表达（而不是错误代码），准确指出问题所在，并提出建设性的解决方案。

错误信息也应进行视觉处理，以帮助用户注意和识别它们。

image.png

道路上的 "逆行标志 "会提醒驾驶员他们走错了方向，并要求他们停下来。

Tips

  • 使用传统的错误信息视觉效果，如粗体，红色文本；
  • 用用户能理解的语言告诉他们出了什么问题，而不是使用技术术语；
  • 为用户提供解决方案，比如能够立即解决错误的快捷方式；

10. 帮助与文档

系统最好不需要任何额外的解释。如果有必要的话，也可以提供文档，帮助用户了解如何实现目标。

帮助和文档的内容应易于搜索，侧重于用户的目标。要简明扼要，列出需要执行的具体步骤。

image.png

机场的信息亭很容易辨认，并能根据实际情况立即解决客户的问题。

Tips

  • 确保帮助文档易于搜索；
  • 在可能的情况下，应在用户需要时立即提供相关文档；
  • 列出应采取的具体步骤；
avatar
文章
阅读
粉丝