Dashboard設計思考(上篇)

文刀

前言

在企業類應用服務(SaaS)、檢測工具(手機安全助手)、量化自我工具(智能手環)等後台管理系統中,使用Dashboard可以幫助用戶監控和分析數據,快速獲取重要信息。但如果對Dashboard設計缺乏認知,就很可能會造成Dashboard呈現的信息雜亂,充斥着無關緊要的指標、文本信息及各種半成品的圖表等,讓用戶抓不到重點。
那麼,設計師該如何設計內容精確、體驗友好的Dashboard以滿足用戶需求呢?文章將從以下幾個方面思考:
1、Dashboard是什麼?
2、主要場景是什麼?能為用戶帶來什麼價值?
3、目標用戶分析
4、選定Dashboard內容
5、Dashboard內容結構
6、功能特性
7、信息設計

 

一、Dashboard是什麼?

在了解Dashboard之前,可以先了解下汽車儀錶盤和報表。
Dashboard的中文翻譯是“儀錶盤”,與汽車的儀錶盤相同——一種反映車輛各系統工作狀況的裝置,有車速里程錶、轉速表、燃油表等。同時,還會有各式各樣的指示燈或警報燈,例如冷卻液液面警報燈、燃油量指示燈、充電指示燈等。司機可以很方便地從汽車儀錶盤中獲得汽車整體狀況。而對於報表,簡單的說就是用表格、圖表等格式來顯示匯總數據。同時,因為常用於定期彙報場景(如每月賬本匯總),報表也要考慮紙質打印的限制。

圖1 汽車儀錶盤(左)和報表(右)(圖片來源:Google圖片)
而Dashboard沿襲了汽車儀錶盤理念,在一個屏幕上有預設性地顯示對用戶關鍵的信息,並實時告知用戶正在發生的情況。同時,Dashboard進一步結合計算機互動的功能顯示和傳輸信息,突破了報表要考慮紙面打印輸出的限制。在Dashboard頁面中,用戶不僅可以直接對數據和圖表進行分析,還可以通過控件來控制數據的顯示、計算、過濾和分組等等。
在Stephen Few的《Information Dashboard Design》一書中指出:Dashboard對重要信息做視覺呈現,這些重要信息是為了達成一個或者多個目標而被統一組織在一屏內,以便能夠一眼就得到監控。即Dashboard集中呈現重要信息,便於用戶快速瀏覽獲知全局。

 

二、主要場景是什麼?能為用戶帶來什麼價值?

Dashboard一般通過重要內容和核心數據來告知用戶:“業務整體狀況如何?有哪些關鍵指標?各指標的運行情況分別如何?哪些指標出現異常?需要用戶做些什麼?”。由此可知,Dashboard主要應用於監控、分析和概覽三大場景。

圖2 Dashboard三大主要使用場景
首先,在監控場景中,Dashboard主要為用戶集中提供便捷的關鍵指標實時監測,及時告知異常狀態,並引導用戶定位問題。

圖3 Dashboard監控場景(圖片來源:Dribbble)
其次,在分析場景中,Dashboard主要通過數據圖表,配合控件進行不同維度的數據分析。例如,用戶可以通過時間篩選控件過濾圖表上的數據範圍等。

圖4 Dashboard分析場景(圖片來源:Tableau)
最後,在複雜業務中,Dashboard還用於概覽場景,集中呈現業務分散的重點信息,用戶還可以通過提供的入口快速跳轉至相關模塊。

圖5 Dashboard概覽場景(圖片來源:AWS)
通常,Dashboard三大主要使用場景是相互配合使用的。例如,用戶通常先通過概覽Dashboard了解業務整體信息,觀察監控數據的情況,如需要進一步分析,用戶可以對數據進行多維度分析已獲取更多信息。
在監控、分析和概覽主要場景中,總結提煉了Dashboard能為用戶帶來的直接價值主要如下幾點:
  • 監控告警,並引導用戶定位問題;
  • 深入分析數據,獲知細節信息;
  • 快速獲取業務整體重點信息,管理資源;

 

三、目標用戶分析

在對Dashboard有基礎了解後並開始設計Dashboard,首先需要清楚:Dashboard的目標用戶是誰?他們在什麼環境中會使用到Dashboard?做什麼事情等?考慮這些問題,有助於確定Dashboard的大致輪廓。例如,在分析用戶時獲知運維人員在工作時間需要監視機器健康狀況,設計時可考慮在Dashboard中呈現正常、異常機器數,並引導用戶定位到出現異常的機器,排查問題。
在做目標用戶分析時,可以從用戶、場景和任務這三方面考慮,以了解用戶特點和目標等相關信息。

圖6 用戶、場景和任務
如上圖,了解用戶對數據和行業的熟悉程度等,可以輔助判斷提供與用戶水平相匹配的數據分析能力。同時,也可以從中判斷是否需要嵌入內容注釋和輔助信息等,幫助用戶理解。而在場景和任務中,用戶行為本身就受場景影響,設計Dashboard時要考慮不同場景下具體任務的合理性和重要程度,在後續處理內容時輔助判斷優先級。

 

四、選定Dashboard內容

對目標用戶、場景和任務進行分析後,接着需要考慮在Dashboard中呈現什麼內容幫助用戶完成不同場景下的任務。在選定內容前,首先需要明確Dashboard的主題是什麼?然後,再圍繞主題,考慮該呈現哪些內容?

1. 明確主題

Dashboard的主題是什麼?即通過Dashboard,要幫助用戶完成什麼事情。
明確Dashboard的主題時,需要充分考慮目標用戶的需求。例如,運維人員需要Dashboard能夠幫助他“高效、精確地發現、定位問題,確保業務正常運行”,而財務人員則需要在Dashboard了解到“賬戶各個季度收支情況”等。明確主題後,選定內容時就可以緊緊圍繞主題,考慮呈現能夠幫助用戶的信息,規避雜亂、無效的數據。

圖7 電腦管家Dashboard小浮窗(圖片來源:騰訊電腦管家Mac版)
如上圖所示,騰訊電腦管家Dashboard小浮窗的主題——幫助用戶實時監控機器使用情況。為此,在小浮窗中呈現CPU、內存和流量關鍵指標實時數據。同時,也提供了各指標資源佔用較高應用的實時數值監測,讓用戶獲知更多詳細數據。

2. 選定和編輯內容

2.1 選定內容
內容選定時需要很好地區分真實、可付諸行動的信息和無效信息,這可以從以下三個方面進行考慮:
  • 緊扣主題
內容緊扣主題,要很清楚Dashboard呈現的內容能幫助用戶完成什麼事情。避免呈現的內容太多太雜,反而讓用戶不容易理解。當然,無可避免會呈現一些輔助內容,一種有效的處理方法就是將這些內容放在頁面底部,確保關鍵、有用的信息放在首屏。
  • 引導行動
在考慮所呈現的內容時,不應該只片面考慮“用戶想要知道什麼?”,而應該進一步考慮“如果用戶知道了這個信息,會用它來做什麼?”。這能讓呈現的內容更為聚焦、實用,讓用戶抓住重點並採取行動。例如,在Dashboard實時監控資源健康狀態,用標紅的數字表示發生異常資源數,強烈引起用戶注意,並通過該數字跳轉至資源列表,篩選出異常機器。
  • 統一認知
內容應符合用戶認知,易獲取且真實可信。如指標命名、數據統計規則等,要與行業標準保持一致。避免使用不易理解的標籤、定義或內容。

圖8 選定內容判斷條件
需要注意的是,選定Dashboard內容時,不一定需要全部滿足上述提到的三個方面。但精確、符合用戶需求的內容,應該都是緊扣主題,又能引導用戶行動和符合用戶認知。
2.2 編輯內容
選定內容後,還需要從用戶角度做恰當的編輯處理,更直觀、精確地呈現符合用戶需求的內容。例如,財務人員製作每季度的報表,那麼提供按“季度”呈現內容會更符合用戶需求,方便且高效。
在編輯內容時,可以從內容的覆蓋範圍、時間跨度、粒度和個性定製等這些方面考慮,讓Dashboard的內容更為符合用戶需求。

圖9 內容編輯思考細則

 

五、Dashboard內容結構

在《Information Dashboard Design》一書中指出:“Dashboard內容必須合理組織,從而反映信息的本質和支持有效且有意義的監控;信息不能隨便放置,也不能只是根據剩餘空間來設定大小;相互關聯的項目應該放置在臨近的位置;重要的項目版面要大一些,這樣才能比相對次要的信息更加突出;有特定順序的項目,要以一種視覺上被關注的順序排列。”
合理的信息結構能夠幫助用戶高效閱讀,理解內容。所以,當Dashboard的內容選定後,就需要考慮如何將信息碎片有邏輯地組合在一起,合理呈現和布局,引導用戶理解全局。從更實用的角度來說,內容結構能夠成為用戶的導航機制,用戶知道該從哪裡開始,接着該看什麼。
選擇使用什麼結構視內容而定。依據經驗,Dashboard內容結構主要有三種類型:分類型、關聯型和流程型。

分類型

即將有相關聯的內容進行分組呈現,讓Dashboard內容歸類而不雜亂無章。如 Google Cloud Platform 的Dashboard頁面,將內容按卡片分為Project info、Billing、Documentation等。同時,卡片與卡片之間也進行了分組,左邊是資源信息,中間是指標監控,右邊是文檔幫助。

圖10 Google Platform Dashboard(圖片來源:Google Cloud Platform)

關聯型

內容相互之間具有一定的邏輯關係,如地理位置關係、數字包含關係、對象父子關係等,這種結構可以讓對象之間的邏輯關係十分直觀。如騰訊雲VPC網絡拓撲,將資源對象的位置和關係抽象表示,很直觀的呈現了資源對象之間的相互關係。

圖11 騰訊雲VPC網絡拓撲(圖片來源:騰訊雲管理中心)

流程型

流程型結構的內容一般會出現多個環節,每個環節之間都會有相應的內容,按照一定的流程逐步細化,深入引導用戶閱讀。符合這種結構,如市場銷售各環節流程,像這種垂直的流程型內容結構,很容易讓用戶清楚每個環節的數據變動,定位哪個環節出了問題。這種結構有個較為典型的統計模型是:漏斗。

圖12 UV轉化率分析(圖片來源:Echarts)

 

六、功能特性

適當考慮為Dashboard提供一些常用功能特性,能夠讓整個頁面擁有較為出色的用戶控制和友好的體驗。

鑽取

鑽取是改變維的層次,變換分析粒度,提供用戶駕馭Dashboard內不同層次的內容。它包括向上鑽取(roll up)和向下鑽取(drill down)。roll up是在某一維上將低層次的細節數據概括到高層次的匯總數據,或者減少維數。而drill down則相反,它從匯總數據深入到細節數據進行觀察或增加新維。

篩選

允講用戶根據需要篩選Dashboard數據的範圍,可以是全局性的 (在整個概覽頁範圍內選擇),也可以是局部的(在特定圖表或是規定範圍內選擇)。特別涉及到時間的篩選,可以從記錄歷史(回溯過往數據趨勢)、快照(顯示單點數據)、實時(監控新進活動)和預測(預估未來走向)等這些更細粒度角度考慮數值呈現,讓用戶獲取精確數據。

比較

指標數值的對比,能夠並列比較兩個或多個數據集。例如折線圖、面積圖等能提供數據集對比功能。

警報

根據預設的條件高亮顯示,當指標超出特定界限時就觸發報警。

可定製

允許用戶根據需求定製不同的內容。

導出

為用戶提供Dashboard中導出數據的功能。

保存

當用戶定製的情況越來越多時, 提供保存定製的功能就越發顯得重要。

 

總結

本文開篇先陳述什麼是Dashboard,其主要應用場景和用戶價值是什麼。然後,再從用戶分析、內容、結構和功能等闡述設計Dashboard過程中需要着重考慮的。在《Dashboard設計思考》的下一篇,將分析如何設計清晰、簡潔的頁面,將前期分析整理的內容和功能更好的呈現給用戶。

 

參考資料

高效儀錶盤設計
儀錶盤的設計:如何讓數據有效發揮作用
設計報表和視覺對象的最佳做法
交互設計:從物理邏輯到行為邏輯,辛向陽
GOOGLE必修的圖表簡報術
什麼是Dashboard?
Dashboard information design
人人都愛儀錶盤

文刀
教你愛的正確姿勢
上一遍
交互微動效設計指南
下一遍
16,103
QQ空間 新浪微博 Facebook Google+

相關推薦

留下你的想法吧