用户体验设计清单

在设计过程中，您的产品中的一些缺陷会被忽视。 这些小（或有时是大）的事情会对用户在使用您的软件时的体验造成很大影响。 我们整理了一份要点清单，供您在设计签署之前检查。

请注意，并非所有这些要点都适用于所有产品，但通常，这些是最相关的。

交互设计

01 – 重复动作或频繁活动感觉轻松

重要性：针对相同输出的重复操作（例如，用相同的信息填写不同的表单）是一项艰巨的任务，无助于用户更快或更好地实现目标。 用户也可能会尝试找到解决方法：例如，寻找可以帮助他们更快/更好地做到这一点的竞争对手。

如何测试它：您应该从分析所有产品的流程并观察用户的行为开始。 您要确保，如果存在重复操作，有一种方法可以促进它们：使用以前输入的信息的选项。

02 – 用户可以轻松地从错误中恢复

重要性：通常情况下，用户会执行非预期的操作或未带来预期结果的操作——允许他们返回并重试意味着他们不会感到沮丧，并且会轻松恢复并继续前进。

如何测试它：首先，确保您的导航系统允许返回，并且可以撤消操作。 然后，在进行可用性测试时，创建用户最有可能执行错误操作的场景，并检查他/她是否可以轻松恢复。

03 – 用户根据他们的专业水平得到充分支持

重要性：确保产品中的新手用户拥有流畅的学习体验非常重要。 但是，一旦他们已经熟悉了产品，就应该让工具来帮助他们更快地通过流程。 这两种情况都提高了可用性和保留率。 例如，专家用户的快捷方式，新手用户的工具提示等。

如何测试它：首先，检查你是否有适合这两种受众的工具。 然后，对新手和专家用户进行可用性测试，看看这些工具是否被正确使用。

04 – 访问帮助不会妨碍用户进步

为什么重要：用户在遇到产品的某个部分时会寻求帮助。 重要的是在线或离线帮助是额外的，并允许用户从他们离开的地方继续工作。

如何测试它：创建测试场景，用户会在其中寻求帮助并查看他们的工作流程和进度是否被中断。

视觉设计

05 – 不超过三基色

为什么重要：这不是一个固定的规则——有时，对于特定情况，可以使用三种以上的原色。 但是，请记住，组合三种颜色已经很困难，因此在大多数情况下，应该避免更多。

如何测试：确保您在设计产品时使用的调色板不超过三基色。

06 – 仅颜色不用于传达层次结构、内容或功能

为什么重要：拥有可访问的产品并不是一个优点——这是必须的。 色盲等视觉障碍人士仅依靠颜色来传达层次结构、内容或功能。 这意味着他们将无法使用您的产品，并且将被排除在外。

如何测试： colorfilter.wickline.org 将让您在网页顶部放置一个颜色过滤器，并针对不同类型的色盲进行测试。 您还可以截屏您的产品并将其转换为图像编辑器上的灰度，看看您是否可以轻松区分颜色。

07 – 视觉层次结构将用户引导至所需的操作

重要性：用户依靠产品的层次结构和线索来知道该做什么和去哪里——理解这一点并正确引导他们使用该层次结构至关重要。

如何测试它：了解产品内部的流程是如何工作的，以及它的关键操作是否受到视觉层次结构的激励。

08 – 视觉层次结构顶部的项目是最重要的

为什么重要：视觉层次结构允许用户快速浏览信息，根据他们的即时需求对内容进行优先级排序。 靠近视觉层次结构顶部的项目必须对业务最重要并且与用户最相关。

如何测试它：截屏您的数字产品，然后将该屏幕截图高斯模糊到大约 5px 的半径。 查看结果时，您会立即看到层次结构并注意到哪些元素脱颖而出。 这些对企业和用户来说是最重要的吗？

09 – 主要动作在视觉上与次要动作不同

重要性：拥有不同的主要和次要操作意味着用户在与您的产品交互时不会感到困惑，并且不太容易出错。 例如，“提交”和“取消”必须明确区分。

如何测试它：在进行可用性测试时，观察常见的错误，这些错误不是由用户的意图引起的，而是由于主要和次要操作的区别不大。 此外，在审查设计时，请确保颜色、大小、位置和其他元素能够区分操作。

10 – 交互元素不是抽象的

重要性：在使用新产品时，用户会根据之前使用其他数字产品的经验产生一系列期望——例如，按钮应该是什么样子以及它们应该如何工作。 满足这些期望意味着您不会制造不必要的摩擦。

如何测试它：首先，检查您的产品，寻找不使用常见模式的区域。 例如，看起来不像链接的链接。

11 – 以视觉上不同的方式确认表单提交

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

如何测试：检查产品中用户输入信息的所有区域。 用户输入完成后，触发有关该操作是否成功的确认。 确保关于最终状态的反馈非常清楚。

12 – 警报消息一致

它是什么：警报消息具有相同的视觉风格，并以相同的方式出现在相同的位置。

为什么重要：拥有一致的警报消息意味着用户将始终了解立即值得关注的内容。 与警报不一致意味着每次弹出新警报时都会产生额外的心理负担。

如何测试：确保警报消息具有相同的视觉风格，并且它们的位置相似或相同。

13 – 警报消息在视觉上是不同的

为什么重要：通过确保警报消息与其他屏幕元素明显区分开来，用户实际上可以注意到它们并/或对其采取行动。

如何测试它：在自己检查视觉差异之后，看看用户如何对可用性测试中的警报消息做出反应。

信息架构

14 – 导航是一致的

重要性：用户定位和浏览您的产品的方式直接影响他们是否能够完成他们的目标，而不管他们当前的页面如何。

如何测试它：检查您的信息架构文档并确保导航在每个页面上都可以访问，并且它不会更改或消失。 在深入了解视觉设计之前，请尝试卡片分类或树测试，以确保您的信息架构路径尽可能直观。

15 – 成长空间

为什么重要：每次出现新功能或内容时，您都无法重新设计产品的导航和信息系统。 导航菜单和整体布局需要在不中断的情况下支持更多类别/主题。 具有增长空间的设计意味着主要的设计和开发工作可以轻松地跨界面扩展。

如何测试它：向所有利益相关者询问内容如何随着时间的推移在产品中增长。 你会支持更多的静态内容吗？ 该架构是否需要支持视频？

排版

16 – 使用的不同类型族不超过两个

为什么重要：这不是一个固定的规则：有时可以完成两个以上。 但一般来说，匹配两个以上并不是一件容易的事。 出于可用性和视觉目的，坚持两个可以简化您的排版层次结构，从而提高理解力。

如何测试它：确保您的设计没有混合两个以上的类型系列。 如果您还确保您选择的家庭是正确匹配的，这将有所帮助（在此处了解更多信息）。

17 – 用于文本内容的字体大小至少为 12 像素

为什么重要：同样，这不是一个固定的规则——理论上，你可以为特定目的使用较小的尺寸——但一般来说，12 像素以下的尺寸会严重降低可读性。

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

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

重要性：众所周知，限制大写单词的使用有助于理解——它在视觉上不那么繁重，更容易让用户消化。 它应该专门用于强调或非常有限的情况——例如首字母缩略词。

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

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

为什么重要：需要有明确的指标来说明什么是内容和什么是控件——即用户可以与之交互的内容。 这些指标可以是大小、颜色、定位、字体等。字体是一个重要的指标：使用不同的样式或系列意味着用户不会感到困惑，并且很容易识别可以与之交互的内容。

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

20 – 字体大小/重量区分内容类型

为什么重要：它严重影响可读性和理解力。 明确区分标题、副标题和段落可以减少消化该内容时的心理负担。 它还具有视觉上的好处——它看起来和感觉更好。

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

用户界面

21 – 接近和对齐

重要性：用户倾向于对彼此靠近的项目进行分组（功能或上下文）。 导航栏就是一个很好的例子。 遵循这种模式并对连接的项目进行分组意味着用户可以立即理解您的界面。

如何测试它：寻找功能相似的项目并检查它们是否（如果可能）组合在一起。

22 – 多步骤工作流程的进度指示器

重要性：特别是对于多步骤工作流程，用户很容易感到不知所措或想知道要多久才能最终完成。 进度指示器可以帮助他们定位自己，但更重要的是，它可以创造成就感并降低掉率。

如何测试它：检查产品内部的所有流程，其中有不同的步骤来完成某事，然后确保通过指示器指示进度。

23 - 前景元素（如内容和控件）很容易与背景区分开来

为什么重要：对视力障碍者很重要。 它还改善了用户的学习曲线和理解力。 清晰的区别有助于导航，增加对按钮的关注，并总体上提高可用性。

如何测试它：截屏您的产品并将该屏幕截图的高斯模糊到大约 3px 到 5px 的半径。 查看结果时，您能否轻松分辨前景中的内容和背景中的内容？

恭喜您通过列表！ 然而，这还不是结束。

您的产品现在更加稳固，并且您可能在几个方面有所改进——例如，它现在更易于访问——但请记住始终保持测试、收集用户反馈并继续迭代。