界面【可用性】设计10大法则&启发案例 (附赠84页 “京东APP交互设计规范”)

     分类 [产品经理]
2023/10/17 10:11:18 浏览量  970 喜欢  69
导读:Jakob Nielsen 的交互设计 10 原则,被称为“启发式”的广泛的经验法则

界面【可用性】设计10大法则&启发案例  (附赠84页 “京东APP交互设计规范”)

界面【可用性】设计10大法则&启发案例  (附赠84页 “京东APP交互设计规范”)

#1:系统状态的可见性
?启发示例:
商场地图上的 “您在这里” 指示器向人们显示他们当前所在的位置,以帮助他们了解下一步该去哪里。
界面【可用性】设计10大法则&启发案例  (附赠84页 “京东APP交互设计规范”)
系统状态的可见性”设计应始终通过在合理的时间内提供适当的反馈,让用户了解正在发生的事情。
 
当用户知道当前的系统状态时,他们会了解之前交互的结果并确定后续步骤。可预测的互动可以建立对产品和品牌的信任。
 
Tips
  • 向用户清楚地传达系统的状态——在未通知用户的情况下,不应采取任何会对用户造成后果的操作。
  • 尽快(最好是立即)向用户提供反馈。
  • 通过开放和持续的沟通建立信任。
 

#2:系统与现实世界的匹配

?启发示例:
当炉灶控件与加热元件的布局相匹配时,用户可以快速了解哪个控件映射到哪个加热元件。
界面【可用性】设计10大法则&启发案例  (附赠84页 “京东APP交互设计规范”)

“系统与现实世界的匹配”原则告诉我们,设计应该讲用户的语言。使用用户熟悉的单词、短语和概念,而不是内部术语。遵循现实世界的惯例,使信息以自然且符合逻辑的顺序出现。

您的设计方式在很大程度上取决于您的特定用户。您和您的同事看似非常清楚的术语、概念、图标和图像可能对您的用户来说不熟悉或令人困惑。
当设计的控件遵循现实世界的惯例并对应于期望的结果(称为自然映射)时,用户就更容易学习和记住界面的工作原理。这有助于打造直观的体验。
Tips:
  • 确保用户无需查找单词的定义即可理解含义。
  • 永远不要假设您对单词或概念的理解与您的用户的理解相匹配。
  • 用户研究将揭示用户熟悉的术语,以及他们围绕重要概念的心理模型。
#3:用户控制和自由
?启发示例:
数字空间需要快速紧急出口,就像物理空间一样。
界面【可用性】设计10大法则&启发案例  (附赠84页 “京东APP交互设计规范”)
“用户控制和自由”,源于用户经常会错误地执行操作。他们需要一个明确标记的“紧急出口”来离开不需要的行动,而不必经历一个漫长的过程。
当人们很容易退出某个过程或撤消某个操作时,就会培养一种自由感和自信。退出允许用户保持对系统的控制,避免陷入困境和感到沮丧。
Tips:
  • 支持撤消重做
  • 显示退出当前交互的清晰方法,例如“取消”按钮。
  • 确保出口有清晰的标签且易于发现。
 

#4:一致性和标准

?启发示例:
登记柜台通常位于酒店前面。这种一致性满足了客户的期望。
界面【可用性】设计10大法则&启发案例  (附赠84页 “京东APP交互设计规范”)
一致性和标准”原则用户不必怀疑不同的词语、情况或动作是否意味着同一件事。遵循平台和行业惯例。

 

雅各布定律指出,人们大部分时间都花在使用除您的产品之外的数字产品上。用户对其他产品的体验决定了他们的期望。未能保持一致性可能会 迫使用户学习新东西,从而增加用户的认知负担。
Tips:
  • 通过保持内部和外部两种一致性来提高可学习性。
  • 保持 单个产品或产品系列内的一致性(内部一致性)。
  • 遵循既定的行业惯例(外部一致性)。

#5:错误预防

?启发示例:
弯曲山路上的护栏
界面【可用性】设计10大法则&启发案例  (附赠84页 “京东APP交互设计规范”)
良好的错误消息很重要,但最好的设计首先会仔细防止问题的发生。要么消除容易出错的情况,要么检查它们并在用户承诺操作之前向用户提供确认选项。
错误有两种类型:失误和失误。失误是由于注意力不集中而导致的无意识错误。错误是基于用户心理模型与设计之间不匹配的有意识的错误。
Tips:
  • 优先考虑你的努力:首先防止高成本的错误,然后再防止小挫折。
  • 通过提供有用的约束和良好的默认值来避免失误。
  • 通过消除内存负担、支持撤消和警告用户来防止错误。

#6:识别而不是回忆

?启发示例:
大多数人更容易识别国家的首都,而不必记住它们。人们更有可能正确回答这个问题:里斯本是葡萄牙的首都吗?而不是葡萄牙的首都是什么?
界面【可用性】设计10大法则&启发案例  (附赠84页 “京东APP交互设计规范”)
通过使元素、操作和选项可见来最小化用户的内存负载。用户不必记住从界面的一个部分到另一部分的信息。使用该设计所需的信息(例如字段标签或菜单项)应该是可见的或在需要时易于检索。
人类的短期记忆是有限的。促进识别的界面减少了用户所需的认知工作量。
Tips:
  • 让人们识别界面中的信息,而不是强迫他们记住(“回忆”)它。
  • 在上下文中提供 帮助,而不是给用户提供冗长的教程来记忆。
  • 减少用户必须记住的信息。
 

#7:使用的灵活性和效率

?启发示例:
地图上列出了常规路线,但了解该地区的当地人可以走捷径。 
界面【可用性】设计10大法则&启发案例  (附赠84页 “京东APP交互设计规范”)
对新手用户隐藏的快捷方式可以加快专家用户的交互速度,从而使设计能够满足缺乏经验和有经验的用户的需求。允许用户定制频繁的操作。
灵活的流程可以通过不同的方式进行,以便人们可以选择适合自己的方法。
Tips:
  • 提供键盘快捷键和触摸手势等加速器。
  • 通过为个人用户定制内容和功能来提供个性化。
  • 允许定制,因此用户可以选择他们希望产品如何工作。

 

#8:美观和简约的设计

?启发示例:
华丽的 茶壶
界面【可用性】设计10大法则&启发案例  (附赠84页 “京东APP交互设计规范”)
界面不应包含不相关或很少需要的信息。界面中每一个额外的信息单元都会与相关的信息单元竞争,并降低它们的相对可见性。
这种启发式并不意味着您必须使用扁平化设计- 它是为了确保您将内容和视觉设计集中在要点上。确保界面的视觉元素支持用户的主要目标。
Tips:
  • 让 UI 的内容和视觉设计集中在要点上。
  • 不要让不必要的元素分散用户对他们真正需要的信息的注意力。
  • 优先考虑支持主要目标的内容和功能。
 

#9:帮助用户识别、诊断错误并从错误中恢复

?启发示例:
道路上的错误方向指示。
界面【可用性】设计10大法则&启发案例  (附赠84页 “京东APP交互设计规范”)
错误消息应该用简单的语言(没有错误代码)表达,准确地指出问题,并建设性地提出解决方案。
这些错误消息还应该通过视觉处理来呈现,以帮助用户注意到和识别它们。
Tips:
  • 使用传统的错误消息视觉效果,例如粗体、红色文本。
  • 用他们能理解的语言告诉用户出了什么问题——避免使用技术术语。
  • 为用户提供一个解决方案,就像一个可以立即解决错误的捷径。

 

#10:帮助和文档

?启发示例:
机场的信息亭易于识别,可以根据上下文立即解决客户的问题。
界面【可用性】设计10大法则&启发案例  (附赠84页 “京东APP交互设计规范”)
最好系统不需要任何额外的解释。但是,可能有必要提供文档来帮助用户了解如何完成其任务。
帮助和文档内容应该易于搜索并关注用户的任务。保持简洁,并列出需要执行的具体步骤。
Tips:
  • 确保帮助文档易于搜索。
  • 只要有可能,就在用户需要时在上下文中呈现文档。
  • 列出要执行的具体步骤。

 

总结:
  • 实用的定义=它是否提供了您需要的功能。

  • 可用的定义=这些功能使用起来有多容易和愉快。

  • 有用的定义=可用性 + 实用性。

在 Web 上,可用性是生存的必要条件。
如果一个网站难以使用,人们就会离开。如果主页没有明确说明公司提供什么以及用户可以在网站上做什么,人们就会离开。如果用户在网站上迷路了,他们就会离开。如果网站的信息难以阅读或无法回答用户的关键问题,他们就会离开。
没有用户阅读网站手册或花费大量时间试图找出界面这样的事情,当用户遇到困难时,离开是第一选择。提升可用性是减少离开的第一道防线。

 

标签

微信扫一扫,分享到朋友圈

微信公众号

相关推荐