儀表板設計 - 注意事項和最佳實踐

收聽本文的音頻版本

儀表板是一種獨特而強大的方式來呈現基於數據的智能，使用數據可視化技術顯示相關的、可操作的數據以及跟踪統計數據和關鍵績效指標 (KPI)。 儀表板應以快速、易於掃描的格式呈現這些數據，其中最相關的信息一目了然。

該術語起源於傳統的汽車儀表板，並且它們已經演變為在數字世界中提供相同的功能。 Stephen Few 在他的書中說得最好：

儀表板是實現一個或多個目標所需的最重要信息的直觀顯示； 整合併安排在一個屏幕上，使信息一目了然。

在本文中，我們概述了戰略性、分析性、操作性和信息性示例，以及每個成功的儀表板設計的核心基本原則，無論其類型如何。

擁有正確的數據可視化方法是為成功的儀表板奠定基礎的關鍵特徵。 數據可視化是通過圖形和圖片呈現數據——其主要目標是幫助決策者識別模式或理解在基於文本的應用程序中可能未被發現的困難概念。

Noah Iliinsky 和 ​​Julie Steele 在他們的《數據可視化》一書中指出：

設計者設計數據可視化的目的是創建一個易於被讀者接受和理解的可交付成果。 所有的設計選擇和特定的實現都必須服務於這個目的。

大儀表板的主要特徵

有效的儀表板一目了然地顯示可操作和有用的信息。 它簡化了複雜數據的可視化表示，並幫助利益相關者理解、分析和呈現關鍵見解。

出色的儀表板清晰、直觀且可自定義。

• 他們迅速傳達信息。
• 它們清晰有效地顯示信息。
• 它們顯示了數據隨時間的趨勢和變化。
• 它們很容易定制。
• 最重要的小部件和數據組件有效地呈現在有限的空間中。

根據關鍵用戶需求對視覺數據和信息進行初始定制將有助於提高可用性並消除對不同用戶角色的需求。

出色的儀表板一鍵即可提供一切。

• 所有重要信息都可以立即訪問。
• 數據優先。
• 信息以視覺層次清晰地顯示在一個屏幕上。
• 該設計提供了一個連貫的概述，其中包括稀疏、清晰的初始數據，並有額外的機會深入了解更多信息。
• 元素（圖表、表格、表單）顯示在最小化視圖中，能夠在模式窗口中顯示更多詳細信息或轉到具有更多詳細信息的頁面。
• 該設計通過過濾器提高了可用性，允許用戶自定義數據的顯示方式，並使用標籤、類別和 KPI 過濾內容。

降低複雜性提供清晰

在一個被數據淹沒的世界中，提供清晰的信息是最難完成的事情之一。 在儀表板上只顯示最相關的數據是必不可少的——我們顯示的信息越多，用戶就越難找到他們需要的東西。

當面臨太多可供選擇的數據時，設計人員應該只顯示最相關的子集。 我們需要優先考慮並仔細刪除誤導性和不明確的指標。

有效的儀表板設計決策應遵循以下原則：

• 項目目標
• 數據的性質
• 用戶的需求

在閱讀可視化（或任何其他類型的交流）時，你的讀者只有有限的腦力來解決這個問題。 其中一些腦力將專門用於解碼可視化； 剩下的任何腦力都可以用來理解信息（如果讀者還沒有沮喪地放棄的話）。 Noah Iliinsky 和 ​​Julie Steele（數據可視化）

儀表板的核心目標是使復雜的信息易於訪問和消化。 因此，呈現數據的界面應該簡潔明了，以盡量減少用戶的認知負荷和搜索時間。

信息架構應首先呈現基本數據，同時允許訪問支持或次要指標。 應該設計一個漸進式向下鑽取系統，從總體概述開始，然後進入更多細節——它有助於數據優先級排序，並創建清晰。

確定儀表板目標並顯示適當的數據

在設計儀表板時，成功的儀表板設計師從一組明確定義的目標開始，重點關注要解決的問題以及人們需要從數據中獲取的關鍵、可操作的見解。

良好的設計目標促進高效和精確的執行。 使用 SMART 框架進行目標設定將重點放在具體、可衡量、可操作、現實和基於時間的目標上。

確定儀表板設計目標時要問的幾個關鍵問題：

• 用戶需要採取多少步驟才能實現特定目標？
• 界面是否足夠直觀，用戶可以自行實現目標？
• 用戶需要哪些信息才能成功實現其目標？

要確定特定儀表板設計的目標可能是什麼，請通過詢問“該設計將為用戶解決什麼具體問題？”來定義它。 答案將提供有關哪些指標、屬性、價值、視覺效果和數據具有重要意義的見解。

以目標為中心的設計專注於解決實際問題，是所有出色儀表板設計的基礎。 從清楚了解業務目標開始，考慮用戶目標，然後傳達需要傳達的關鍵信息。

儀表板設計中的上下文

儀表板設計的最大挑戰之一是服務於多個角色。 一旦定義了每個用戶角色，了解他們的需求在哪裡重疊和在哪里分歧就變得至關重要。

有效的溝通是每一個成功的儀表板設計的基本原則。 預見用戶可能會發現自己的潛在場景將有助於更好地了解用戶的情況。

在設計時始終牢記用戶的上下文——確定他們的技術知識、他們對整個系統的熟悉程度、他們的目標等等。

在嘗試確定用戶行為和上下文時，請務必提出以下問題：

• 設計是否考慮了訪問者習慣閱讀的方向？
• 與儀表板的交互是否需要技術知識？
• 用戶只需點擊幾下就能完成大部分操作嗎？
• 設計是否通過創建向下鑽取菜單與用戶上下文保持一致； 它使用暗示性的圖像和調色板嗎？

儀表板設計中使用的調色板也應被視為上下文。 許多企業對企業 SaaS 產品儀表板都是在深色主題 UI 中設計的，因為它們會連續使用幾個小時。

深色主題的 UI 可以幫助減輕眼睛疲勞並支持界面內的視覺清晰度。 但是，採用這種方法需要對設計方向進行仔細評估——如之前的設計博客文章中所述的優點、缺點和潛在缺陷：Dark UI Dos and Don'ts。

更好的儀表板設計與用戶研究

用戶研究有助於創建一個環境，​​在該環境中，用戶可以看到相關、清晰和簡潔的數據。 這有助於他們思考他們正在尋找的內容和數據，而不是如何使用和訪問它。

一些儀表板必須工作，或者可以輕鬆地為查看相同基本儀表板的不同角色的用戶定制。 用戶研究很重要，因為它有助於確定用戶的目標、心理模型、環境背景和痛點。 這些因素極大地影響了最終的儀表板設計。

用戶體驗設計師、研究員和作家 Mike Kuniavsky 指出，這是“理解設計對受眾影響的過程”。

設計師必須定義不同的用戶類型，並了解他們的目標在哪里相同，在哪裡不同。 對於一種用戶類型與另一種用戶類型，哪些信息最可操作？ 他們必須考慮是否需要從一種用戶類型到另一種用戶類型的不同佈局，或者是否有針對更一般用例的解決方案。

考慮到這一點，最好從基本的線框圖開始，然後轉向可以在用戶研究階段與實際用戶一起測試的原型。 真正有價值的洞察力可以來自只有五個用戶的短暫用戶研究階段——這將節省大量時間。

儀表板設計中的漸進式披露

漸進式披露是一種通過減少混亂來保持用戶注意力的技術。 創建漸進式披露系統有助於創建以用戶為中心的環境，這有助於優先考慮用戶的注意力、避免錯誤並節省時間。 它還允許用戶專注於對他們重要的關鍵功能，而不是被迫瀏覽所有功能——包括他們不需要或不感興趣的功能。

漸進式披露是儀表板設計的最佳實踐，也將大大降低錯誤率； 當系統基於功能優先級時，它將提高效率並幫助用戶提高對儀表板的理解。

漸進式披露將高級或很少使用的功能推遲到輔助屏幕，使應用程序更易於學習且不易出錯。 ——雅各布·尼爾森

動畫是滿足各種用戶需求同時還實現多種功能的好方法。 它是在加載數據和視覺效果時使用的絕佳選擇，是一種先進的漸進式披露解決方案。

動畫是創造運動錯覺的過程； 它是一種動態，可以創造一種進步感和不斷的反饋，從而減少用戶的不確定性並提高感知性能。

在儀表板中使用漸進式披露的優點：

• 減少用戶的不確定性和焦慮（通過顯示進展跡象，用戶確信一切都按預期工作）
• 為用戶提供可查看的內容（部分顯示數據）而不是讓他們等待
• 為用戶提供對即將到來的步驟的明確期望，並了解信息的分層呈現方式

漸進式披露和數據加載的潛在問題包括：

• 以不恰當的方式使用指標和披露。 較短的加載時間和無用的步驟會讓人分心並違背可用性原則。
• 在沒有明確的進度指標的情況下檢索數據的滯後可能會導致用戶不確定性和更高的跳出率。
• 使用靜態進度指示器是一種意義不大的解決方案，並且不能提供足夠的進度信息，這也可能導致用戶不確定性和更高的跳出率。

概括

儀表板是一種傳遞數據和其他信息的強大方式，特別是對於遵循儀表板設計最佳實踐和適當數據可視化的以用戶為中心、以目標為中心的設計。 儘管每個儀表板都不同，並且有自己的目標、要求和限制，但遵循這些基本原則將有助於創建出色的設計，而不管具體情況如何：

• 首先，理解您的用戶類型並了解他們的目標。
• 通過使用暗示性視覺效果、標籤、漸進式披露技術和動畫向用戶傳達清晰的故事。
• 通過應用用戶研究技術使復雜的事情變得簡單。
• 在向下鑽取系統中適時顯示數據和信息。
• 使用數據可視化以有意義的方式表達信息。

• • •

進一步閱讀 Toptal 設計博客：

• 電子商務用戶體驗——最佳實踐概述（附信息圖）
• 以人為本的設計在產品設計中的重要性
• 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
• 移動界面的啟發式原則
• 預期設計：如何創造神奇的用戶體驗