基于组件的框架的 A/B 测试 UX

熟悉编码对设计师大有裨益。 因此，许多人潜入并学习了如何使用代码（或至少在某种程度上说它的语言）作为与工程师合作时更有效的一种方式。 JavaScript 可以说是 Web 最受欢迎的脚本语言，它拥有一个强大的社区，该社区正在通过它正在制作的框架塑造 Web 的未来。

由于它们的结构和技术限制，像 Vue.js、React.js 和 Material UI 这样的框架对于设计师来说很重要，因为它们充当了健壮设计系统的构建块。 此外，在 A/B 测试等开发环境中促进数据驱动的设计技术时，了解代码的工作原理也很方便。

在最近为一家初创公司创建患者管理平台以将个人与心理健康专业人员联系起来的项目中，我们发现尽可能少地建立和管理患者账户对于我们的许多临床顾问来说是关键。 专注于为患者资料创建直观的浏览体验至关重要，设置最佳用户流程以创建、编辑和分配健康活动给患者也很重要。

与技术负责人讨论该项目后，确定从根本上说，该应用程序非常简单：临床医生需要能够创建和编辑患者资料、查看健康活动库以及为患者分配课程。

团队决定将项目的设计与 Material UI 框架保持一致，利用弹出模式、显示卡、活动/非活动按钮、手风琴列表以及一系列成功和警告通知等基本元素。 一旦定义了构成基本元素的组件，产品团队就对应用程序的布局提出了不同的意见。

在讨论项目的 UI 设计时，开发人员解释了功能组件和显示组件之间的区别，以及功能组件如何控制应用程序的数据流，而显示组件与 UI 和布局相关。

简而言之，显示组件定义了应用程序的视觉语言，而功能组件有助于将它们变为现实。

这种结构为设计人员提供了独特的可能性，因为通常情况下，与管理应用程序逻辑相关的代码被隔离到一个与控制 UI 布局的文件分开的文件中。 如果做得正确，这种软件设计方法可确保模块化且健壮的代码库，从而实现测试驱动的流程。

是否可以以最少的工程工作量测试替代布局中的相同功能？ 答案是“是的”，如果在流程早期使用 A/B 方法完成，它将融入精益产品开发生命周期。 （精益产品开发是从日本的 kaizen 概念衍生而来，这是一种对工作流程、实践、技术以及（在这种情况下）产品进行渐进式改进的经营理念。）

连续创业者和作家 Eric Ries 在他的《精益创业》一书中讨论了精益产品开发生命周期的实用指南。 该方法遵循以下工作流程：构建具有明确假设的产品、测试构建的内容并根据所学内容进行迭代。

精益创业方法

定义 A/B 测试方法

A/B 测试是任何经验丰富的 UX 专业人员工具包的核心组件。 它在软件开发生命周期中的作用是帮助提高应用程序的可用性。 结合热图数据，团队可以深入了解用户行为，尤其是在涉及应用程序流程中的摩擦点时。

在开始 A/B 测试之前，这里有一些问题可以重点关注该过程：

• 在 UX 中如何使用 A/B 测试？
• 有哪些 A/B 分析方法可用？
• 为什么在设计线框图时设计 A/B 测试？
• 我们在测试什么？

最常见的大规模 A/B 测试方法是拆分测试，它为实际用户提供稍微不同版本的应用程序或网站。 拆分测试通常超出初创公司或小型企业的范围和/或预算。 但是，除了大规模拆分测试之外，还有一些更易于访问的替代方法，包括：面对面访谈、焦点小组和在线服务，将您连接到测试用户网络。

A/B 测试驱动设计

在线框图制作过程中，从布局和导航的角度考虑 A/B 测试的可能性非常重要。 显示组件的简单变化可以很容易地改变信息的呈现方式。 基于组件的框架让您可以自由地试验内容的组织方式，而无需重新设计产品的核心功能。

与任何设计工作一样，有效的 A/B 测试应遵循明确定义的方法。 首先，确定要测试的变量。 接下来，定义什么是成功。 最后评估数据并确定下一步应该是什么。

例如，在一种情况下，测试了布局层次结构。 布局 A 由两列网格组成，其中患者列表组件位于屏幕左侧，患者资料组件位于屏幕右侧。 布局 B 有一个单列患者列表，可以单击进入患者的个人资料组件。

我们的第一个测试是为了清晰。 我们在采访中询问了临床顾问，这两种设计中哪一种感觉最有条理。 与内部假设相反，强烈表明单列网格是更直观的设计解决方案。 我们的顾问认为，患者名单和个人资料在同一个显示中的组合让人感觉“忙碌”和“混乱”。 相比之下，用于描述单列网格布局的词语清晰而“干净”。

“组件盒模型”

对于这个 Web 应用程序，我们使用了 React，这是一个基于状态管理和模块化组件概念的框架。 React 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。 它使您可以从称为“组件”的小而孤立的代码组成复杂的 UI。 在开发涉及开发人员和设计人员的产品时，这种模块化转化为灵活性。

我是在 HTML+CSS 盒子模型的启发下理解这个框架的。 组件盒模型提供了一种组织方式，用于为应用程序创建构建块。 它特别适合为快速发展的项目开发设计系统。

为了保持设计思维敏捷，可以遵循一套特别适合精益产品开发生命周期的设计原则。

• 第一个原则：将相似的上下文和动作分组。
• 第二个原则：让信息架构协助简化组件之间的“状态”流。
• 第三条原则：设计可扩展的视觉系统，以简化开发人员理解和实现设计的方式。

对相似上下文进行分组

考虑用户的心理模型——根据他们的“使用环境”对相似的结果和行为进行分组。 考虑用户是否需要在每个上下文中创建、读取、更新和删除项目，以及您是否需要为他们的操作提供任何反馈。 在为特定使用场景定义 A/B 测试时，请考虑布局、如何访问输入和导航方法。

简化“状态”的交互流程

在 React 中，“状态”流是指信息如何在整个应用程序中移动，组件如何帮助组织数据以及数据如何显示。 通常，状态从充当容器的功能组件流入显示组件。 设计人员可以通过改变显示组件的评估方式，预先概述功能组件如何改变应用程序的布局，从而为 A/B 测试做准备。

开发稳健的设计系统

使用显示组件为排版、按钮、输入、模式和卡片等视觉元素开发标准有助于为标准化设计语言提供构建块。 强大的视觉系统可以灵活地让 UX 设计人员和开发人员就线框图中引用的组件保持一致。

概括

A/B 测试驱动设计的成功与产品和技术团队之间的协同作用息息相关。 希望采用这种方法的设计人员应该准确了解测试的地点和方式。 花时间发展一个假设并确定你希望找到什么。 不要分心。 坚持下去——很容易偏离你的方法。

这个过程永远不会真正完成，并随着产品的增长而发展。 采用测试驱动产品开发策略的设计人员应该利用在产品开发生命周期中出现的学习机会。

组件，就像设计系统一样，是关于模块化和模式的可重用性，而不是布局或样式。 从设计师的角度来看，通过 A/B 测试灵活地测试、改进和改进产品有助于开发更以用户为中心的产品，从而最终取得更大的成功。

•••

进一步阅读 Toptal 设计博客：

• 在 UX 设计中利用心智模型
• 面向大众的 UX 测试：保持简单且具有成本效益
• 移动可用性基本指南
• 用户研究的价值
• 了解设计系统和模式