帮助 AI 看清：仪表板设计案例研究

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

但人工智能驱动的自动化继续发展，仍然需要人工干预。 在这个仪表板设计案例研究中，我详细介绍了我如何开发帮助人类操作员改进 AI 识别过程的 UI。

客户端

该客户是一家美国初创公司，帮助其客户实时解决多个行业的 AI 图像识别错误。 它提供的解决方案改进了支持地形测绘、植物分类、零售产品识别、条形码扫描等的自动化系统。

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

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

简要

在两个月的时间里，我与客户一起为操作员仪表板和客户仪表板提供设计。 我还准备了伴随这些交付物的组件库和样式指南。

我的方法遵循设计思维过程，包括研究、头脑风暴、低保真原型设计、高保真原型设计和用户测试。 我总是根据时间、资金和人员的可用性来调整这个过程。

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

改进操作员仪表板

客户产品的核心是操作员仪表板——其人工智能专家用来解决图像识别问题的界面。 当人工智能系统无法识别图像时，该图像会被发送到操作员的仪表板。 操作员通过标记每个对象并根据预定标签（例如“人”、“树”或“大障碍物”）对其进行分类来手动标记图像。

当我采访客户的操作员时，他们向我展示了他们正在使用的软件的当前状态，并允许我观察他们的工作。 从这项初步研究中，我收集了见解、痛点和改进机会，这些信息将为我的设计提供信息。

我发现缺少重要的功能，并且某些任务过于复杂，这使得界面难以使用。 例如，为了给一张图片加标签，操作者每次都需要在工具栏和图片之间来回切换，进行选择、标签、审核和提交。 同样，也缺少撤消或重做操作的能力，这意味着操作员在犯错时必须重复任务或采取额外步骤。

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

考虑到这些改进机会，我集思广益初步概念并创建了线框，并与两位操作员分享。 在一周的时间里，我每天都会向操作员展示线框图，并通过虚拟反馈会议讨论他们的初步印象。 这些会议是高度协作的，并帮助我汇编了改进仪表板的想法。

反馈会议期间出现的一个有趣点涉及右侧工具栏上显示的信息量，操作员在其中选择了他们的操作。 我最初的设计提出了一个非常简约的解决方案——一个可以折叠成只显示图标的窄面板的工具栏。 我相信，这将使焦点集中在中央图像上。

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

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

正如我所提到的，最初的仪表板是使用现成的 UI 组件混合创建的，产品内体验始终不一致。

但是，出于时间和预算的考虑，利益相关者希望尽可能保留现成的组件。 因此，与前端开发人员合作，我定制了现有组件，包括按钮、表单和字段以及其他 UI 元素，以匹配新仪表板的外观和感觉。 这些调整影响了颜色、字体、间距和其他细节。 在无法更新现有组件的情况下，例如实时查看进度动画，我们创建了新组件。 大多数操作员仪表板都是以这种方式从头开始构建的。

然后，我制作了一个可导航的高保真原型，其中包含颜色和操作员通常会在软件中看到的照片类型。 我还添加了矩形、铅笔和多边形等选择工具，并在屏幕底部添加了一个面板，操作员可以在其中进行图像增强。 最后，我将原型连同在 After Effects 中动画化的微交互规范一起发送给前端开发人员，以便他们构建仪表板。

从头开始设计客户仪表板

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

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

通过我设计的仪表板，客户可以登录并实时监控每个异常的进度。 他们可以看到传入的图像、正在审查的图像以及已经解决的异常。 他们还可以查看每个解决方案的详细信息，以更好地了解问题是如何解决的。

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

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

在 Figma 中构建组件库

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

我选择将客户的库放在 Figma 中，因为它可以轻松修改组件并在设计中出现的任何位置更新它们。 所有组件和样式都使用八点网格记录。 该库包括菜单、侧边栏、选项卡、输入图标和按钮等核心组件，而样式指南涵盖了排版、颜色、图标、间距和网格等元素。

未来，组件库可以演变成一个成熟的设计系统。 但就目前而言，它是发展产品的基础，也是未来设计师的参考，无论他们是内部员工、自由职业者还是代理专业人士。

用户研究很重要

这个项目很有意义，因为它为我提供了改进数字产品的机会，该产品增强了多个行业的自动化系统并塑造了人工智能解释世界的方式。 它还强调了用户研究和直接观察的重要性。 能够看到操作员完成工作并提出问题对于交付使他们能够更有效地工作的仪表板至关重要。 设计师必须首先了解他们的经验，才能改善某人的工作方式。

Toptal 博客的进一步阅读：

• 仪表板设计——注意事项和最佳实践
• 一致性是关键——如何构建 Figma 设计系统
• 用户体验研究技术及其应用
• 用户研究的价值
• UX 的真正投资回报率：说服行政套房