幫助 AI 看清：儀表板設計案例研究

人工智能 (AI) 在當今許多行業都在努力工作。 它可以幫助零售商管理庫存和預測需求，使醫生更容易在肺部掃描中識別癌症，並使汽車能夠自動駕駛。

但人工智能驅動的自動化繼續發展，仍然需要人工干預。 在這個儀表板設計案例研究中，我詳細介紹了我如何開發幫助人類操作員改進 AI 識別過程的 UI。

客戶端

該客戶是一家美國初創公司，幫助其客戶實時解決多個行業的 AI 圖像識別錯誤。 它提供的解決方案改進了支持地形測繪、植物分類、零售產品識別、條形碼掃描等的自動化系統。

AI 圖像識別系統經過訓練可以識別和解釋視覺輸入，並根據他們“看到”的內容做出決策。 但有時這些系統會遇到異常——由於對象具有意想不到的外觀，它們無法處理圖像。 異常可能導致人工智能係統無法識別關鍵信息或錯誤識別它所看到的內容。 例如，雜貨產品掃描儀可能無法識別一盒橙汁，因為容器已更換，或者自動駕駛農場機器人可能會被障礙物弄糊塗。 此類問題可能會導致企業運營延遲或中斷。

為了解決這些問題，客戶的軟件與客戶的人工智能係統集成，使人工操作員能夠實時審查和解決識別問題。 但運營商所做的不僅僅是解決異常問題：他們還教 AI 系統下次遇到類似情況時該怎麼做。 這使得人工智能係統能夠更好地識別更廣泛的圖像。

簡要

在兩個月的時間裡，我與客戶一起為操作員儀表板和客戶儀表板提供設計。 我還準備了伴隨這些交付物的組件庫和样式指南。

我的方法遵循設計思維過程，包括研究、頭腦風暴、低保真原型設計、高保真原型設計和用戶測試。 我總是根據時間、資金和人員的可用性來調整這個過程。

在項目期間，我與客戶的創始團隊和前端開發人員密切合作，每天分享更新，幫助每個人隨時了解我的進度。 我還與兩位操作員合作，他們為他們的日常工作提供了寶貴的見解。

改進操作員儀表板

客戶產品的核心是操作員儀表板——其人工智能專家用來解決圖像識別問題的界面。 當人工智能係統無法識別圖像時，該圖像會被發送到操作員的儀表板。 操作員通過標記每個對象並根據預定標籤（例如“人”、“樹”或“大障礙物”）對其進行分類來手動標記圖像。

當我採訪客戶的操作員時，他們向我展示了他們正在使用的軟件的當前狀態，並允許我觀察他們的工作。 從這項初步研究中，我收集了見解、痛點和改進機會，這些信息將為我的設計提供信息。

我發現缺少重要的功能，並且某些任務過於復雜，這使得界面難以使用。 例如，為了給一張圖片加標籤，操作者每次都需要在工具欄和圖片之間來回切換，進行選擇、標籤、審核和提交。 同樣，也缺少撤消或重做操作的能力，這意味著操作員在犯錯時必須重複任務或採取額外步驟。

另一個問題是界面沒有統一的外觀和感覺，因為它主要依賴於現成組件的混合。 這些不一致使某些元素和功能難以找到或使用。

考慮到這些改進機會，我集思廣益初步概念並創建了線框，並與兩位操作員分享。 在一周的時間裡，我每天都會向操作員展示線框圖，並通過虛擬反饋會議討論他們的初步印象。 這些會議是高度協作的，並幫助我彙編了改進儀表板的想法。

反饋會議期間出現的一個有趣點涉及右側工具欄上顯示的信息量，操作員在其中選擇了他們的操作。 我最初的設計提出了一個非常簡約的解決方案——一個可以折疊成只顯示圖標的窄面板的工具欄。 我相信，這將使焦點集中在中央圖像上。

然而，運營商並不喜歡這個想法，因為一眼就很難理解圖標的含義和主要操作是什麼。 有了這個重要的見解，我意識到更簡單並不總是更好。 在這種情況下，讓更多信息可見有助於操作員更有效地工作。

在改進和完善了初始線框之後，我在 Figma 中創建了一個交互式的低保真原型，並將其發送給運營商和利益相關者，以便他們進行測試。 收到他們的反饋後，我會迭代設計，直到每個人都滿意為止。

正如我所提到的，最初的儀表板是使用現成的 UI 組件混合創建的，產品內體驗始終不一致。

但是，出於時間和預算的考慮，利益相關者希望盡可能保留現成的組件。 因此，與前端開發人員合作，我定制了現有組件，包括按鈕、表單和字段以及其他 UI 元素，以匹配新儀表板的外觀和感覺。 這些調整影響了顏色、字體、間距和其他細節。 在無法更新現有組件的情況下，例如實時查看進度動畫，我們創建了新組件。 大多數操作員儀表板都是以這種方式從頭開始構建的。

然後，我製作了一個可導航的高保真原型，其中包含顏色和操作員通常會在軟件中看到的照片類型。 我還添加了矩形、鉛筆和多邊形等選擇工具，並在屏幕底部添加了一個面板，操作員可以在其中進行圖像增強。 最後，我將原型連同在 After Effects 中動畫化的微交互規範一起發送給前端開發人員，以便他們構建儀表板。

從頭開始設計客戶儀表板

該項目的第二階段是一個客戶儀表板，它允許人工智能係統的所有者觀察他們的問題得到解決的進度。 客戶希望在向更多客戶推出產品之前改善這種體驗。

最初，客戶的客戶必須通過電子郵件請求進度報告。 每個報告都是 PDF 或 CSV 文件，表明哪些異常已解決或仍在進行中。 客戶需要一種讓客戶一目了然地檢查每個異常狀態的方法。

通過我設計的儀表板，客戶可以登錄並實時監控每個異常的進度。 他們可以看到傳入的圖像、正在審查的圖像以及已經解決的異常。 他們還可以查看每個解決方案的詳細信息，以更好地了解問題是如何解決的。

儀表板具有圖表和可視化功能，可幫助客戶更好地理解匯總數據，例如總參與度和總解決率。 客戶還可以輕鬆訪問和管理其帳戶的業務方面，包括支付方式和登錄信息。

對於客戶儀表板原型，我在 After Effects 中創建了動畫來演示某些 UI 元素的行為方式。 例如，我創建了一個進度動畫來顯示審查中的異常，當異常被解決時，它變成一個複選標記。 我還設計了一個脈衝點來顯示項目何時上線。

在 Figma 中構建組件庫

設計可擴展且易於維護的產品的一個重要方面是創建組件庫和样式指南。 擁有標準化和可重複使用的設計組件可確保在擴展和向數字產品添加功能時的一致性和速度。

我選擇將客戶的庫放在 Figma 中，因為它可以輕鬆修改組件並在設計中出現的任何位置更新它們。 所有組件和样式都使用八點網格記錄。 該庫包括菜單、側邊欄、選項卡、輸入圖標和按鈕等核心組件，而樣式指南涵蓋了排版、顏色、圖標、間距和網格等元素。

未來，組件庫可以演變成一個成熟的設計系統。 但就目前而言，它是發展產品的基礎，也是未來設計師的參考，無論他們是內部員工、自由職業者還是代理專業人士。

用戶研究很重要

這個項目很有價值，因為它為我提供了改進數字產品的機會，該產品增強了多個行業的自動化系統並塑造了人工智能解釋世界的方式。 它還強調了用戶研究和直接觀察的重要性。 能夠看到操作員完成工作並提出問題對於交付使他們能夠更有效地工作的儀表板至關重要。 設計師必須首先了解他們的經驗，才能改善某人的工作方式。

Toptal 博客的進一步閱讀：

• 儀表板設計——注意事項和最佳實踐
• 一致性是關鍵——如何構建 Figma 設計系統
• 用戶體驗研究技術及其應用
• 用戶研究的價值
• UX 的真正投資回報率：說服行政套房