人工智能(AI)如今在许多行业都在努力工作. 它帮助零售商管理库存和预测需求, 使医生更容易在肺部扫描中识别癌症, 并使汽车能够自动驾驶.

但人工智能驱动的自动化仍在不断发展，仍然需要人为干预. 在这个仪表板设计案例研究中, 我详细介绍了我如何开发帮助人类操作员改进人工智能识别过程的用户界面.

客户端

客户是一家美国初创公司，帮助客户实时解决多个行业的人工智能图像识别错误. 它提供的解决方案改进了自动化系统，使地形测绘成为可能, 植物分类, 零售产品标识, 条码扫描, 和更多的.

人工智能图像识别系统经过训练，可以识别和解释视觉输入，并根据它们“看到”的内容做出决策.“但有时这些系统会遇到异常情况——它们无法处理图像，因为物体具有意想不到的外观. 异常可能导致AI系统无法识别关键信息或错误识别所看到的内容. 例如, 食品杂货扫描仪可能无法识别一盒橙汁，因为容器已经更换，或者自动驾驶的农场机器人可能被障碍物弄混了. 像这样的问题可能会导致企业运营的延迟或中断.

为了解决这些问题, 客户的软件与客户的人工智能系统集成, 使人工操作员能够实时审查和解决识别问题. 但操作员所做的不仅仅是解决异常:他们还教会人工智能系统下次遇到类似情况时该怎么做. 这使得人工智能系统能够更好地识别更广泛的图像.

短暂的

在两个月的时间里, 我与客户合作，为操作员仪表板和客户仪表板提供设计. 我还准备了一个组件库和风格指南，随这些交付物一起发布.

我的方法是 设计思考 过程, 这涉及到研究, 头脑风暴, 低保真原型, 高保真原型, 用户测试. 我总是根据时间、资金和人员的可用性来调整这个过程.

项目期间, 我与客户的创始团队和前端开发人员密切合作, 分享每日更新，帮助大家了解我的进展. 我还与两位操作员合作，他们为他们的日常工作提供了宝贵的见解.

改进操作员仪表盘

客户产品的核心是操作员仪表盘，即人工智能专家用来解决图像识别问题的界面. 当人工智能系统无法识别图像时，该图像就会被发送到操作员的仪表板上. 操作者通过对每个物体进行标记，并根据预先确定的标签对其进行分类，从而对图像进行手动标记, 比如“人类”,”“树,或“大障碍”.”

当我采访客户的接线员时, 他们向我展示了他们正在使用的软件的当前状态，并允许我观察他们的工作. 从最初的研究来看, 我收集了一些见解, 痛点, 以及改进的机会，这些都将影响我的设计.

我发现重要的功能缺失了，某些任务变得不必要地复杂, 是什么让界面难以使用. 例如, 为了标记一个图像, 操作者每次选择时都需要在工具栏和图像之间来回切换, label, 审查, 并提交. 同样的, 撤销或重做操作的功能也缺失了, 这意味着操作人员在出错时必须重复任务或采取额外措施.

另一个问题是界面没有统一的外观和感觉，因为它主要依赖于现成组件的混合. 这些不一致使得某些元素和功能难以找到或使用.

考虑到这些改进的机会, 我头脑风暴了最初的概念，并创建了线框图, 我和两个算子共享的. 每一天, 在一周的时间里, 我向操作人员展示了线框图，并通过虚拟反馈会议讨论了他们的初步印象. 会议是高度协作的，并帮助我收集改进仪表板的想法.

在反馈过程中出现了一个有趣的问题，即右侧工具栏上显示的信息量, 运营商在哪里选择他们的行动. 我最初的设计建议了一个非常简约的解决方案——一个工具栏，可以折叠成一个只显示图标的窄面板. 我相信，这样可以使焦点集中在中心图像上.

然而, 操作人员不喜欢这个想法，因为很难一眼理解图标的含义和主要操作是什么. 有了这个重要的见解，我意识到简单并不总是更好. 在这种情况下，留下更多可见的信息有助于操作人员更有效地工作.

在改进和完善最初的线框图之后, 我创建了一个交互式的, Figma的低保真原型，并将其发送给运营商和利益相关者，以便他们进行测试. 一旦我收到他们的反馈，我就会迭代设计，直到每个人都满意为止.

正如我提到的, 最初的仪表板是使用现成的UI组件混合创建的, 而且产品内部的体验也不一致.

然而, 为了时间和预算, 涉众希望尽可能保留现成的组件. So, 与前端开发人员一起工作, 我定制了现有的组件, 包括按钮, 表单和字段, 和其他UI元素, 以匹配新的仪表板的外观和感觉. 这些调整影响了颜色、字体、间距和其他细节. 在无法更新现有组件的情况下, 比如实时观看进度动画, 我们创造了新的. 大多数操作员仪表板都是这样从头开始构建的.

然后我制作了一个可导航的, 高保真原型，结合了色彩和操作人员通常在软件中看到的照片类型. 我还包括了矩形等选择工具, 铅笔, 和多边形, 并在屏幕底部增加了一个面板，操作员可以在那里进行图像增强. 最后，我发送了原型，以及规格说明 microinteractions 动画，给前端开发人员，这样他们就可以构建仪表板.

从头开始设计客户仪表板

该项目的第二阶段是一个客户仪表板，允许人工智能系统的所有者观察他们的问题被解决的进度. 客户希望在向更多客户推出产品之前改善这种体验.

最初，客户的客户必须通过电子邮件请求进度报告. 每个报告都是一个PDF或CSV文件，指示哪些异常已解决或仍在进行中. 客户需要一种方法，让客户可以一目了然地检查每个异常的状态.

用我设计的仪表盘, 客户可以登录并实时监控每个异常的处理进度. 他们可以看到进来的图像, 那些正在被审查的, 以及已经解决的例外情况. 他们还可以查看每个解决方案的详细信息，以便更好地了解问题是如何解决的.

仪表板具有图形和 可视化 帮助客户更好地理解汇总数据，如总参与和总解决方案. 客户还可以轻松访问和管理其帐户的业务方面, 包括付款方式和登录信息.

对于客户仪表板原型, 我在After Effects中创建了动画来演示某些UI元素的行为. 例如, 我创建了一个进度动画来显示审查中的异常, 当异常被解决时，哪个会成为一个复选标记. 我还设计了一个脉冲点，当一个项目是实时显示.

在Figma中构建一个组件库

设计可伸缩且易于维护的产品的一个重要方面是创建组件库和样式指南. 拥有标准化和可重用的设计组件可以确保在扩展和向数字产品添加功能时的一致性和速度.

我选择在Figma中存放客户端的库，因为它可以很容易地修改组件并在设计中出现的任何地方更新它们. 所有组件和样式都使用 8点网格. 该库包括菜单等核心组件, 侧边栏, 选项卡, 输入图标, 和按钮, 而样式指南涵盖了排版等元素, 颜色, 图标, 间距, 和网格.

将来，组件库可以发展成为一个成熟的 设计系统. 但是现在, 它可以作为产品发展的基础，也可以作为未来设计师的参考, 他们是内部员工吗?, 自由职业者, 或机构专业人士.

用户研究事宜

这个项目是有益的，因为它为我提供了完善数字产品的机会，该产品正在增强多个行业的自动化系统，并塑造人工智能解释世界的方式. 它还强调了用户研究和 直接观察. 能够观察操作人员的工作并提出问题对于提供仪表板至关重要，从而使他们能够更高效地工作. 设计师无法改善人们的工作方式，除非他们首先了解自己的体验.