我们正在推出一个管道为中心的仪表板,改善作业的详细信息页面,方便调试更新的配置视图的新UI。选择在尝试新的UI现在,它在春天2020正式上线所有用户面前!


在过去的一年,我们的团队已经彻底改革我们的前端与大量的用户反馈的帮助。今年春天,我们计划让所有用户对我们的新UI。

当我们建立了新的用户界面,我们一直问自己,“什么是工作要做这里?”或者说,什么是我们的用户的目标,以及我们如何能够帮助他们实现这些目标?

在追求答案,我们进行了近100个访谈,阅读12174应用程序内调查答复(还在增加),拥有一批从事CircleCI讨论帖子和微博,并把我们的MVP,另一种方法,WAFL-良好架构的,功能有限,到测试。

接下来是在新的UI变化的主要领域的概况及其背后的思维过程的解释。

为什么我们正在重建的UI?

旧的UI设计用于CircleCI 1.0的基础工作世界和基于容器的使用模式。各级运行层次之间的导航混淆了许多用户。

但也许更重要的是,我们的代码库已通过开发商和框架这么多代了,它是在一个较高的速度变得难以进行迭代。118金宝博娱乐城制作过程,甚至细微的变化所需的时间丰厚量。

因此,我们组建了团队,开始了我们的用户体验和代码库架构同时新鲜。

什么是用户界面的重大变化?

做了CircleCI用户的主要工作是找到和他们的应用程序修复错误,请与相关的工作要做,以使每一个良好的,有效的改变被运到用户的无缝连接。这是一个大的,广泛的目标,而我们只能通过破坏每个分解成具体功能的工作(的道路上的主要工作的实际要求)解决这些问题,都同时我们的后端和API的限制范围内工作。

为了更好地支持我们的应用程序提供用户最共同的目标,我们已经做出了UI三大改进。



1.创建一个管道为中心的仪表板

对于用户来说,与仪表板CircleCI相互作用,最常见的三个目标是:

1.导航从特定CircleCI工作向同一作业的最近运行。

2.导航从一个失败的运行到最近通过管道运行。

3.获取手头的项目是健康的还是不是一个快速的肠道检查的认识。

我们以前的工作为中心的仪表板创建不必要的问题,当用户试图实现这三个目标。

举例来说,如果你有在工作流程中20个职位,并在组织中的其他用户进行不断磨合自己的本职工作,运行会得到迅速传播出去,它会变得难以找到确切的工作(具体运行中),您正在寻找对于。

这也是很难扫描的项目是否是健康的。说,例如,该9/10工作在每次运行均及格。在旧的UI,它可能看起来像一个主要的健康项目,如果你瞥了一眼仪表盘,而事实上,每一个管道(围绕这些工作的信封)可能已经失败。

我们的新的用户界面包含了一个管道为中心仪表板代替。一种管道代表当你在一个项目上,其中可能包括包含在多个工作流程的多个作业触发工作时运行的整个配置。

在一个流水线中的所有作业打包在一起,它更容易浏览到您最近的跑步或最近的传球运行。它也更容易扫描多数奔跑是否通过或项目中的失败。


VivekNewUI.gif

2.设计更高效的作业详细信息页面

几乎所有我们的用户的一个核心目标是找出为什么特定作业失败,并修复它。要做到这一点,用户通常直接导航到作业详细信息页面找出什么地方出了错。

当我们设计了新的用户界面,我们希望让用户更容易读取步骤输出或测试总结工作,以更好地识别错误的来源。下面是一些我们已经取得了更容易找到并从作业详细信息页面修复错误的方法:

  • 移动标准输出或测试输出进一步上涨的页面。我们已经在页面的标准输出,这通常是用户需要查看,确定错误来源的信息仅仅前顶部减少了屏幕房地产。
  • 删除较不相关和很少使用的信息。这包括排队时间,参数选项卡,定时选项卡,页面顶部的横幅,和更多。虽然用户数量有限发现重要信息,绝大多数没有。
  • 作出标准输出框跳转到输出的底部。在大多数情况下,用户需要的信息在标准输出的结束或接近结束。这有助于他们得到更快。
  • 包括在屏幕高度长STDOUT箱的限制。以前,我们注意到,在所观察的用户会议上,一些用户会去如此之深成一个STDOUT,他们会忘记他们工作在哪一步。限制STDOUT的高度加载页面速度更快,有助于保持页面更易于管理。
  • 突出显示的击命令和错误代码。Bash的命令和错误代码现在可以在一个小灰框,以帮助用户快速区分被发现。
  • 增加了一个弹出式标签,查看STDOUT全屏。这可以帮助用户扫描心无杂念,轻松地与他人共享时,链接到了失败的步骤。
  • 加入重新运行 - 从 - 没有作业详细信息页面。而在此之前用户只能重新运行从工作页面的整个工作流程,他们现在可以重新从失败的作业的工作流。
  • 设置选择工具默认只显示失败的并行运行。用户很少看着传递的并行运行,所以我们决定把选择工具只默认显示失败平行运行,帮助用户找到他们正在寻找更快的信息。
  • 从文件夹中嵌套的假象。我们看了很多用户通过点击多个文件夹才能到一个单一的神器,有时会忘记哪一个神器,他们需要通过他们全部通过点击它的时候。118金宝博娱乐城开发人员喜欢CNTL + F,并通过unnesting的文物,我们使他们能够直接使用它。


VivekNewJobsPage.gif

3.重建用于调试的结构图

我们确定了在旧UI配置选项卡上的两个主要用户目标:

  1. 配置选项卡上的主要用户目标是到最近的传球运行比较最近一次失败的运行,以确定变化和调试错误。这通常是从流水线列表来完成。
  2. 次要用户的目标是创建的配置和输出之间的心理地图,并与实际结果相比预期成果来调试错误。这是最好的从工作详细信息页面完成。

由于用户依赖于两个不同的位置,以实现这些目标,我们从作业详细信息页面上的标签更改配置,以全屏幕,模块式视图,可以从全新的UI任何级别被打开。在未来,我们会还像一个“比较CONFIGS”功能跳转到更直接地修复这些错误。

另外值得注意的是:用户几乎都是通过源配置(你写的),很少编译配置(后处理)进行调试。

然而,作业详细信息页面以前表明编译配置第一和源的配置下,为灰色。我们在新的UI完全改变了这件事。现在,在弹出的配置页面,有两个按钮往上顶改变你从源代码编译后视图,源设置为默认。这有助于用户轻松查看最相关的信息,并查看其来源和编制配置而无需滚动。



准备选择吗?

在接下来的几个月中,我们将逐步推出新的用户界面,所有的用户。

我们建议您选择在测试新的用户界面,并与我们在此过程中分享您的反馈。

您可以通过导航到任何支持管线处理项目的作业详细信息页面,点击这面旗帜在页面顶部选择加入新的用户界面:


OpeIn.gif

-

伸手给我们您的反馈意见,为您探索新的用户界面!你就可以开始CircleCI讨论后,鸣叫我, 要么注册一个小时的用户会话和我们。