AdStage最新发明背后的故事:计算参数生成器

社媒营销

我最喜欢的设计任务之一，特别是用户体验设计，就是把看似复杂的想法组织起来，用直观有效的用户体验取代这种复杂性。AdStage UX/UI团队的任务通常是克服这些问题，这意味着有时现有的工具和方法并不适合我们。营销世界是基于指标运行的。数字、百分比和预测是任何营销团队的命脉。在AdStage，我们为数字营销人员提供了丰富的数据，让她能够对自己的数据进行分析，并在必要时根据这些数据采取行动。我们的指标服务通过我们支持的各种集成（如Facebook广告、谷歌AdWords和必应广告数据）提供大量有价值的统计数据，然后我们将这些数据作为操作触发器显示在我们的自动化产品中，并帮助营销人员使用定制的表格和图表在我们的报表产品中可视化。这对我们的大部分客户都有效，但一些营销巨头已经将这些数据整合为定制指标，更直接地反映他们独特的成功指标。为了了解谁可能使用这个AdStage特性，以及用于什么，让我们创建一个人物角色。吉尔是为客户制作报告的数字营销人员。她想让她的客户知道他们的社交媒体活动表现得有多好，但这在某种程度上比CTR更有意义。她想把Facebook的“社交点击”和“点赞”与LinkedIn的“病毒式点击”和“点赞”结合起来。在AdStage计算指标公式构建器出现之前，这意味着在谷歌Sheets或Excel中浪费冗长的时间，提取报表并在事后组合指标，然后将它们反馈到Report中。现在，它就像使用computed Metrics Builder UI来构造定制公式一样简单。凭借所有可用的网络指标在她的指尖，吉尔在几秒钟内完成了她过去每个月浪费几个小时的事情。一旦指标被创建，她就可以在她所有的AdStage产品套件中使用它——用它来简化她的活动管理和AdStage自动化，或者用AdStage报告创建漂亮的自定义数据丰富的pdf。

  

简化复杂的

为了允许企业将他们需要的确切数据输送到我们的生态系统中，我们有动力为客户创建一个接口，让客户输入他们用来推导自定义度量值的公式。在抽样了其他产品如何处理这项任务后，我们感到不满意。我们所遇到的界面基本上都是不直观且丑陋的，前者是我们的主要抱怨。为了解决这个问题，我们想要在我们的解决方案中加入一些额外的细节，并测试UX复杂性连续体上的不同点会让人感觉像是在使用。

当我们觉得我们有了一个相当可靠的第一次迭代时，我们做了一些用户测试。事实证明，我们看似聪明的设计在翻译过程中失去了一些东西。对于我们的第一个原型，我们考虑了一种将下拉菜单作为主要交互点的方法——用户不必进行任何输入，这将减少错误和意想不到的结果。因为这个原型非常简单，所以我们使用InVision进行模拟。当我们觉得自己的第一次迭代非常可靠时，我们便进行了一些用户测试。事实证明，我们看似聪明的设计在翻译过程中失去了一些东西。尽管这并不是什么灾难，但测试明确地表明，我们尝试的一些惯例，如“在此添加新度量”按钮（由按钮内的+图标表示），它会在任何现有下拉菜单的悬停时显示，最初被误认为是算术运算符。这是有道理的，因为一个计算度量公式显然是由大量的数学符号组成的。我们所遇到的界面基本上都是不直观且丑陋的，前者是我们的主要抱怨。为了解决这个问题，我们想要在我们的解决方案中加入一些额外的细节，并测试UX复杂性连续体上的不同点会让人感觉像是在使用。对于第二个原型，我们想要完全转向另一个方向，即测试一个所有操作都可以通过键盘完成的界面。这比基于鼠标的界面更容易访问。然而，在原型制作阶段的早期，我们意识到我们进入了一个死胡同，因为InVision不允许基于按键的画板转换。如果我们想要测试我们的想法，我们需要放弃InVision而选择更适合键盘的东西。为了方便，我们还在AdStage的设计部门进行了一项努力，以集中和统一我们的设计语言和资产。一个缺失的拼图是静态InVision模型和成熟的最终UI之间的桥梁。对于AdStage的我们来说，这似乎是一个真正的UI套件，除了最小的样式之外，没有任何其他东西。UI套件继续发展，直到我们能够证明我们对这个项目的想法。那时，我们进行了进一步的用户体验测试，以检查我们的UI设计和用户体验流程。从我们的测试来看，我们似乎走在正确的轨道上。是时候将线框图流转换为高保真的工作组件了。在AdStage，我们有一个内部统一组件库，称为“Gooey”（“GUI”的双关语）。它具有您所期望的所有基本组件——输入字段、按钮、选择下拉列表等等。我们将使用这些控件来构造新的自定义度量公式生成器。

  



最初，公式构建器开始是一个大的可编辑div样式，看起来像一个文本区域，但根据我们的研究，我们决定使用一些基于按钮的控件，以帮助人们开始使用这个强大的新工具。我们在顶部放置了一个“按钮栏”，其中有用于各种算术符号的按钮，以及用于显示可用指标列表（可搜索）的按钮。对这些改进的测试表明，大多数人实际上更喜欢使用按钮来创建公式，至少在第一次开始使用该工具时是这样。当一个看似不必要的改进实际上在一定程度上提高了可发现性和可用性时，这总是件好事。这里要提到的一点是，可内容编辑的div并不是真正基于普遍实现的规范，而且在内置功能方面也不是很丰富。它们都有自己的一套特性，一些科技界的大佬此刻正试图解决这些特性。因此，毫无疑问，将这个发育不良的组件调整为符合我们的宏伟愿景的交互式和直观的组件是一项不小的任务。

很多时间都花在熟悉Web api上，试图调整烦人的内容可编辑光标的行为，使其不像一个吃下一整块糖果的5岁小孩，而更像禧年庆典上的女王:礼貌且可预测。在项目的开始，我们用一些样例度量填充度量下拉菜单，只是为了了解流程的运行情况。一旦我们审查了这个流程，我们就进行下一步，将大量的指标列表拉到下拉列表中。事实证明，这对体验是毁灭性的。我们使用我们的Gooey UI kit下拉组件来支持指标选择。它基于基本下拉菜单背后非常简单的逻辑。然而，我们发现有时候，带有所有可用指标的下拉菜单的初始绘制需要7秒，这对于任何可用的界面来说都是完全不可接受的。所以我们开始寻找优化组件渲染的方法。一种选择是只加载第一个fEw指标，这是可行的，因为我们的下拉组件还包括一个过滤功能，允许用户搜索他们想要的指标。因此，我们可以加载部分指标列表，并允许用户在他们所寻找的指标在结果的第一页中不可用时搜索整个列表。   





另一个意料之外的挑战是，可能令人惊讶的是，确保光标总是以可预测的方式移动和行为。在传统的文本区域中，这一切都由浏览器处理。在包含其他文本和div（符号和度量）的div（公式输入容器）中就不是这样了。我们发现，在某些情况下，光标会在选择一个度量后随机消失。其他时候，它会移到输入的末尾，即使您刚刚在公式中间执行了编辑。我们花了很多时间来熟悉Web api，试图调整烦人的内容编辑光标的行为，使其不像一个吃下一整块糖果的5岁小孩，而更像禧年庆典上的女王:礼貌且可预测。经过大量的汗水和眼泪，我们终于实现了我们的目标，一个易于使用的组件，同时也极大地提高了生产效率，从而使我们的客户感到快乐。计算指标公式构建者只是我喜欢在AdStage工作的另一个例子。这是一个看起来相当简单的功能，但由于网络和网络标准的性质，结果却完全不是这样。有时，这可能会令人沮丧，但最终，我们总是会学到比我们想象的多得多的东西，并从项目的另一边获得新的知识和新的省时设备，以奖励我们忠实的客户。—



计算度量构建器目前处于beta测试阶段。注册开始吧。AdStage团队相关帖子:如何与客户分享数据，因为你的机构规模为什么预算节奏只是等式的一半