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

本文概述

定义A/B测试方法
“ 零件箱模型”
分组相似上下文
简化” 状态” 的交互流程
开发强大的设计系统
摘要

熟悉编码可以为设计人员带来极大的好处。因此, 许多人开始潜水并学习了如何使用代码(或至少在某种程度上讲其语言)作为与工程师合作时更有效的方式。 JavaScript可以说是Web上最喜欢的脚本语言, 它拥有一个强大的社区, 可以通过其精心设计的框架来塑造Web的未来。
由于其结构和技术限制, 诸如Vue.js, React.js和Material UI之类的框架对于设计人员来说非常重要, 因为它们充当了稳健设计系统的基础。此外, 在开发环境(例如A/B测试)中促进数据驱动的设计技术时, 了解代码的工作原理也很方便。
在一家新创公司的项目中, 该公司创建了一个将个人与心理健康专家联系起来的患者管理平台, 我们发现以尽可能少的摩擦来建立和管理患者账户是许多临床顾问的关键。专注于为患者档案创建直观的浏览体验至关重要, 建立最佳用户流程以创建, 编辑患者健康活动并将其分配给患者至关重要。

文章图片
核心应用程序功能图。
在与技术负责人讨论该项目时, 从根本上确定了该应用程序非常简单：临床医生需要具有创建和编辑患者资料, 查看健康活动库以及为患者分配课程的能力。
团队决定利用弹出式模态, 显示卡, 活动/非活动按钮, 手风琴列表以及一系列成功和警告通知等基本元素, 使项目的设计与Material UI框架保持一致。一旦定义了构成基本元素的组件, 产品团队就会对应用程序的布局提出不同的意见。

文章图片
Material UI文档
在讨论项目的UI设计时, 开发人员解释了功能和显示组件之间的区别以及功能组件如何控制应用程序数据流, 而显示组件与UI和布局相关。
简而言之, 显示组件定义了应用程序的可视语言, 而功能组件则使它们栩栩如生。
这种结构为设计人员提供了独特的可能性, 因为通常, 与管理应用程序逻辑有关的代码被隔离到与控制UI布局的文件不同的文件中。如果做得正确, 这种软件设计方法可以确保模块化和强大的代码库, 从而实现测试驱动的过程。

文章图片
以模块化方式使用的显示组件使用户体验UI的测试更加轻松。
是否可以以最小的工程工作量测试替代布局中的相同功能？答案是” 是” , 如果在流程的早期采用A/B方法, 它将被烘焙到精益产品开发生命周期中。 (精益产品开发是从日本的kaizen概念中衍生出来的, 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测试UX】像任何设计工作一样, 有效的A/B测试应遵循明确定义的方法。首先, 确定要测试的变量。接下来, 定义什么构成成功。通过评估数据完成并确定下一步应该是什么。
例如, 在一种情况下, 对布局层次结构进行了测试。布局A由两列网格组成, 在屏幕的左侧具有” 患者列表” 组件, 在右侧具有” 患者概况” 组件。布局B有一个单栏的患者列表, 可单击该列表以进入患者的个人资料组件。

文章图片
A/B测试原型
我们的第一个测试是为了清楚起见。我们在面试环节中询问了临床顾问, 这两种设计中哪一种感觉最有条理。与内部假设相反, 强烈建议将单列网格作为更直观的设计解决方案。我们的顾问认为, 同一显示中患者名单和个人资料的组合让人感到” 忙碌” 和” 混乱” 。相比之下, 用于描述单列网格布局的词语则清晰且” 干净” 。
“ 零件箱模型” 对于此Web应用程序, 我们使用了React, 这是一个基于状态管理和模块化组件概念的框架。 React是用于构建用户界面的声明性, 高效且灵活的JavaScript库。它使你可以从孤立的小代码段(称为” 组件” )组成复杂的UI。在涉及开发人员和设计人员的产品上使用时, 这种模块化转化为灵活性。
我从HTML + CSS框模型的启发中了解了此框架。组件盒模型提供了一种组织形式, 可用来为应用程序创建构件。它特别适合为快速发展的项目开发设计系统。

文章图片
为了保持设计思维的敏捷性, 可以遵循一组特别适合精益产品开发生命周期的设计原则。

第一原则：将相似的环境和动作归为一组。
第二个原则：让信息体系结构协助简化组件之间的” 状态” 流程。
第三原则：设计可扩展的可视系统, 以简化开发人员如何理解和实施设计。

分组相似上下文考虑用户的思维模式-根据用户的” 使用环境” 将相似的结果和操作分组。考虑用户是否需要在每个上下文中创建, 读取, 更新和删除项目, 以及是否需要为其操作提供任何反馈。在为特定使用场景定义A/B测试时, 请考虑布局, 如何访问输入和导航方法。
简化” 状态” 的交互流程在React中, “ 状态” 流是指信息如何在整个应用程序中移动, 组件如何帮助组织数据以及如何显示数据。通常, 状态从充当容器的功能组件流入显示组件。设计师可以抢先概述功能组件如何通过改变显示组件的评估方式来改变应用程序的布局, 从而为A/B测试做好准备。
开发强大的设计系统使用显示组件来开发视觉元素(如印刷术, 按钮, 输入, 模态和卡片)的标准有助于提供标准化设计语言的基础。强大的视觉系统具有灵活性, 可以使UX设计人员和开发人员就线框内引用的组件保持同一页面。

文章图片
材料基金会的材料研究和UX模式
摘要 A/B测试驱动设计的成功与产品和技术团队之间的协同作用息息相关。希望采用这种方法的设计人员应精确地进行测试。花时间建立假设并确定你希望找出的结果。不要分心。坚持下去, 非常容易偏离你的方法。

文章图片
这个过程永远不会真正完成, 并且会随着产品的增长而发展。采用测试驱动的产品开发策略的设计人员应利用在产品开发生命周期中出现的学习机会。
组件与设计系统非常相似, 它与模块化和模式的可重用性有关, 而与布局或样式无关。从设计师的角度来看, 通过A/B测试来灵活地测试, 改进和改进产品可以帮助开发以用户为中心的产品, 从而最终带来更大的成功。
???
在srcmini设计博客上进一步阅读：