在设计过程中,产品中的某些缺陷不易被发现。

这些小事情(有时候可能是大事情)会极大地损害用户使用产品时的体验。本文汇总了23条要点,供你在设计批准前进行自我检验。

(请注意:并非所有检查项目都适用于所有类型的产品,但通常它们是最相关的。)

交互设计(Interaction Design)

1. 对重复的动作或频繁的活动感到轻松自在。

为什么重要:这很重要,因为对同一输出的重复操作(例如,用相同的信息填写不同的表单)是一项艰巨的任务,无法帮助用户更快或更好地实现其目标。用户可能还会尝试找到另外一种方法来解决它:例如,寻找可以帮助Ta更快、更好地做到这一点的竞争对手。

如何测试:你应该首先分析所有产品的流程并观察用户的行为。如果存在重复性操作,你要确保有一种方法可以简化这些操作:例如,可以使用先前输入的信息。

2. 用户可以轻松地从错误中进行恢复。

为什么重要:用户通常会执行意外的操作或未达到预期效果的动作,如果允许他们返回重试,就不会让他们感到沮丧、内疚,并且会轻松的恢复到正常流程中继续前进。

如何测试:首先,请确保你的导航系统允许返回,并且可以执行撤消操作。然后,在进行可用性测试时,创建用户最有可能执行错误操作并检查其是否可以轻松恢复的方案。

3. 根据用户的专业水平为他们提供充分的产品使用支持。

为什么重要:请务必确保你产品中的新手用户拥有流畅的学习体验。但是,一旦他们已经熟悉了产品,就应该放置一些工具来帮助Ta在流程中更快地移动。这两种方案都提高了可用性和保留率。例如,专家用户的快捷方式、新手用户的工具提示等。

如何测试:首先,检查你是否同时拥有针对两个受众群体的工具。然后,与新手和专家用户进行可用性测试,以查看这些工具是否正确使用。

4. 访问帮助不会妨碍用户进度。

为什么重要:每当用户卡在产品的某个部分时,他们都会寻求帮助。在线或脱机帮助是额外的,重要的是允许用户在中断的地方可以继续工作。

如何测试:创建测试方案,用户将在其中寻求帮助,并查看其工作流程和进度是否中断。

视觉设计(Visual Design)

5. 不超过三种原色。

为什么重要:这不是固定的规则,有时,在特定情况下,可以使用三种以上的原色。但是请记住,将三种颜色组合起来已经很困难,因此在大多数情况下,应避免超过此范围。

如何测试:确保设计产品时使用的调色板最多包含三种原色。

6. 颜色本身不用于传达层次结构、内容或功能。

为什么重要:拥有可访问的产品不是锦上添花,而是必须的。对于视力障碍者(例如色盲)来说,仅依靠颜色来传达层次结构、内容或功能,就意味着他们将无法使用你的产品,因此将被排除在受众人群之外。

如何测试colorfilter.wickline.org 允许你在网页上方放置一个滤色器,并测试其是否存在各种色盲区域。你还可以对产品进行屏幕捕获,然后在图像编辑器上将其转换为灰度,以查看是否可以轻松区分颜色。

7. 可视化层次结构将用户定向到所需的操作。

为什么重要:用户依靠产品的层次结构和线索来知道该做什么和去向哪里,必须了解这一点并正确地指导他们使用该层次结构。

如何测试:了解产品内部的流程是如何工作的,以及视觉层次结构是否正在激励其关键行为。

8. 视觉层次结构顶部的项目是最重要的。

为什么重要:视觉层次结构使用户可以快速扫描信息,并根据其当前需求对内容进行优先级排序。视觉层次结构顶部附近的项目对业务至关重要,并且与用户最相关。

如何测试:用屏幕捕获你的数字产品,然后将屏幕截图高斯模糊化为大约5px的半径。查看结果时,你将立即看到层次结构并注意到哪些元素是突出的。对于企业和用户来说,这些元素是最重要吗?

9. 主操作在视觉上不同于辅助操作。

为什么重要:具有不同的主操作和辅助操作意味着用户在与产品交互时不会感到困惑,也不容易出错。例如,”提交”和”取消”必须明确区分开来。

如何测试:进行可用性测试时,请注意常见的错误,这些错误不是由用户的意图引起的,而是由主要和次要操作相异而引起的。另外,在检查设计时,请确保颜色、大小、位置和其他元素区分操作。

10. 交互式元素不是抽象的。

为什么重要:在使用新产品时,用户会根据以前使用其他数字产品的经验而产生一系列期望,例如,按钮的外观以及操作方式。满足这些期望意味着你不会制造不必要的摩擦。

如何测试:首先,检查你的产品以查找不使用常见模式的区域。例如,看起来不像链接的链接。

11. 表单提交以视觉上截然不同的方式得到确认。

为什么重要:必须向用户确认操作是否成功执行。例如,提交表单后,彩色横幅形式显示的明确的确认消息将意味着用户可以继续执行下一个任务。

如何测试:检查用户输入信息的产品的所有区域。用户输入完成后,触发有关该操作是否成功的确认。确保有关结束状态的反馈清晰明了。

12. 警示消息是一致的。

这是什么意思:警示消息具有相同的视觉样式,并以相同的方式出现在相同的位置。

为什么重要:具有一致的警示消息意味着用户将始终了解哪些内容立即值得关注。与警示不一致将意味着每次弹出新警示时都会增加精神负担。

如何测试:确保警示消息具有相同的视觉样式,并且其位置相似或相同。

13. 警示消息在视觉上区别于其他元素。

为什么重要:通过确保将警示消息与其他屏幕元素明显区分开,用户实际上可以注意到它们和/或对它们执行操作。

如何测试:自行检查视觉差异后,请查看用户在可用性测试中对警示消息的反应。

信息架构(Information Architecture)

14. 导航是一致的。

为什么重要:用户定位和浏览产品的方式直接影响他们能否完成T其目标,而不管其当前所在的页面如何。

如何测试:请查看你的信息架构文档,并确保每个页面上的导航都可以访问,并且导航不会更改或消失。在进入视觉设计之前,请尝试进行卡片排序或树状测试,以确保你的信息架构路径尽可能直观。

15. 增长空间

为什么重要:每当出现新功能或新内容时,你都无法重新设计产品的导航和信息系统。导航菜单和整体布局需要支持更多类别/主题,而又不会中断。具有增长空间的设计意味着主要的设计和开发工作可以轻松扩展到整个界面。

如何测试:向所有涉众询问有关产品中内容随时间增长的情况。会支持更多静态内容吗?架构需要支持视频吗?

字体版式(Typography)

16. 最多使用两个不同的字体系列。

为什么重要:这不是一条固定的规则:有时候有可能超过两个。但是总的来说,匹配两个以上并非易事。出于可用性和视觉目的,坚持两个可以简化排版层次结构,从而提高理解力。

如何测试:只需确保你的设计不会混合两个以上的字体系列即可。你还应该确保选择的字体家族正确匹配。

17. 用于文本内容的字体大小至少为12px。

为什么重要:同样,这不是固定的规则。从理论上讲,你可以将较小的尺寸用于非常特定的目的,但通常来说,大小低于12像素的可读性会大大降低。

如何测试:检查所有内容,并确保用于它们的字体的大小至少为12像素。

18. 为标签、标题或首字母缩略词保留大写单词。

为什么重要:限制使用大写单词有助于简化理解,它在视觉上不那么沉重,并且用户易于消化。它应专门用于强调或限制非常严格的情况,例如首字母缩写词。

如何测试:运行全面的内容检查,并确保大写单词仅限于标题、标签或首字母缩略词。

19. 使用不同的字体样式或系列来将内容与控件分开。

为什么重要:需要明确内容和控件的指标,即用户可以与哪些内容进行交互。这些指标可以是大小、颜色、位置、字体等。字体是一个重要的指标:使用不同的样式或系列意味着用户不会感到困惑,并且可以轻松识别可以进行交互的内容。

如何测试:识别产品中的所有控件,并确保它们从内容中脱颖而出。运行可用性测试时,请注意用户在与控件交互时是否遇到困难。

20. 字体大小/粗细区分内容类型。

为什么重要:它严重影响可读性和理解力。明确区分标题、副标题和段落可减少消化内容时的精神负担。它还具有视觉上的好处,让外观和感觉都更好。

如何测试:查看产品中的内容时,请确保标题、副标题和段落使用不同的字体大小和粗细。

用户界面(User Interface)

21. 邻近和对齐。

为什么重要:用户倾向于在功能上或上下文上对彼此接近的项目进行分组。导航栏就是一个很好的例子。遵循此模式并对连接的项目进行分组意味着用户可以立即理解你的界面。

如何测试:查找功能相似的项目,并检查(如果可能)它们是否组合在一起。

22. 多步骤工作流程的进度指示。

为什么重要:特别针对多步骤工作流,用户很容易感到不知所措,或者想知道要多久才能完成。进度指示可以帮助Ta找到自己的位置,但更重要的是,它可以产生成就感并降低掉落率。

如何测试:检查产品内所有有不同步骤的流程以完成某些任务,然后确保通过指示器指示进度。

23. 前景元素(如内容和控件)很容易与背景区分开。

为什么重要:对视力障碍人士很重要。它还可以改善用户的学习曲线和理解力。清晰的区分有助于导航,使更多的注意力集中在按钮上,并总体上提高了可用性。

如何测试:屏幕捕获产品并进行高斯模糊处理,使屏幕截图的半径约为3px至5px。查看结果时,你能否轻松分辨出前景是什么?背景是什么?

24. 恭喜你完成了清单!

……但是,这还没有结束。

你的产品现在更加坚固,你可能已经在几个方面进行了改进(例如,现在可能更易于使用),但是请记住始终保持测试,收集用户反馈并不断进行迭代。