三個步驟設計高效 Dashboard

16 評論 176508 瀏覽 467 收藏 29 分鐘

研究國外業內前沿數據產品,了解當前實現數據價值的最新思路和實踐。

無論哪一種數據產品,儀表盤(Dashboard)都是最核心的功能。它作為用戶接觸數據的第一個頁面,相當于數據產品的門戶,擔負著提綱挈領,引導分析的重要職能,幫助用戶能夠快速判斷業務情況,支持他們做出決策并行動。

個人有幸經歷過三個數據平臺的 Dashboard 設計,企業內部和 ToB 型產品皆有涉獵。根據研究過的一些 Dashboard 設計案例和文章,最后將所有這些經驗總結成以下的「123」:一個原則,兩個時期,三個細則。

一個原則即「提綱挈領,引導分析」,在一個頁面里明確告訴用戶當前業務狀況好壞,并支持能夠針對某個問題進行下鉆分析,從而串聯起整個數據平臺。由此原則從而可推出以下三個細則:

  1. 因人而異,細分場景:根據用戶和場景設計產品
  2. 少勝于多,分清主次:展示最關鍵的指標,區分優先級
  3. 深入分析,落地行動:支持深入分析,并落地為具體行動

這就像講一個用戶故事。經過起承轉合慢慢鋪墊,最終進入正題,告訴用戶應該怎么去執行,怎么去優化產品和業務。

各類數據產品在實現前面提到的不同原則時,又可以分為兩個時期:Report(定制化)和 Customize(個性化)。前者是早期形態,如 GA 和 Mixpanel 等,特點是根據指定的分析思路,嚴謹地從匯總到細分,層層下鉆。它們為實現「因人而異」,往往會設定多個 Dashboard 頁面,或者本身就只針對某一類用戶群體。后者更常見于一些比較新型的分析產品,如 Domo 和 Looker,特點是報表自定義程度較高,通過自由選擇單圖的方式來組建 Dashboard。隨著時間的發展,這兩者的界限在慢慢模糊,但主要的特點依舊鮮明。

1. 因人而異,細分場景

產品的核心就是解決問題,解決某些用戶在某些場景下的某個問題。對于不同行業,不同業務,不同職位的人們來講,關注的內容自然不一樣。在設計一個數據產品或頁面時,我們需要圍繞著用戶和場景來做設計。

1.1 劃分用戶

劃分用戶,一般會從業務線或崗位入手。不同業務線間,關注的核心指標自然不同,比如轉轉下面各種業務部門,即使大家都關注大盤數據,但每天更關心的,還是自己的業務細節指標。

崗位也是同理,管理層重在把握全局,而執行層重在每個細節的執行效果,關注的數據層級和指標也會有所差異。

以 Domo 為例,它為每個職位的人單獨設一個 tab 來顯示,每一個崗位都有自己預設的 Dashboard 頁面。

同時,它也支持用戶對這些報表進行內容的增刪改查,以及對整體布局進行調整。

所有設計儀表盤的第一件事情,就是明確自己的用戶,然后根據不同的用戶群體設計儀表盤,及確定開發的優先級。

1.2 劃分場景

劃分場景,主要的場景有包括但不局限以下情況:實時監控場景,指定主題分析場景,移動查詢場景,周日會匯報場景和大屏顯示場景等。

從實時監控場景來講,Dashboard 會被分為實時和歷史兩種,兩種略有差異。實時側重于監控,歷史側重于了解和分析。這兩種沒有明顯的分界,實時需要歷史的信息作為對比,來判斷當前的數據是否正常。而歷史也需要準實時的信息來更快地了解當前的情況。這兩種形態的Dashboard 對于數據產品來講都必不可少。

以下是較好的實時 Dashboard 設計方案,核心在于細分維度的多維監控,并確定合適的閾值點。

從特定主題分析場景來講,Domo 為每一個數據源設定相應的 Dashboard,如 Facebook 廣告,Google ADs 等等。因為每個數據源就代表著一種場景。

移動場景考慮到屏幕等硬件條件的限制,則側重于通知和展示,不深入到分析部分。到具體產品設計上,則是通過 M 頁或者 APP 等方式實現,提供最核心的數據查看和智能挖掘,不做過多的查詢功能和復雜的交互。同時,基于現有大部分人通過手機進行溝通,那么頁面或數據的分析也變得重要。

同樣以 Domo 為例,它在移動端也有相應的場景劃分,支持消息的移動推送和展示:

2. 少勝于多,分清主次

根據「提綱挈領,引導分析」的原則,儀表盤的界面上優先展示的指標應該是用戶最關心的,且因為每個用戶時間精力有限,在數量上要極度精簡。在挑選指標時,要遵循一下原則:

  1. 從用戶的需求出發
  2. 精準,精確反映當前業務情況
  3. 核心指標不超過7個
  4. 確定核心指標間的聯系及優先級

Webtrend 創立于 1993 年,是目前公認市場占有率第一的商業網站分析方案,為接近 2000 個公司提供服務。作為一款通用的商業分析產品,它在 Dashboard 頁面提供了網站用戶最關心的 7 個指標,包括最近 30 天的匯總PV,訪問量,訪問深度,新訪問用戶,日均訪問用戶數,平均訪問時間,跳出率。同時通過與上個30天的環比的增減,跌漲與紅綠對應,能夠使用戶一眼就了解到當前業務情況。

同時,這幾個業務從幾個側面整體衡量了網站的用戶數量及質量,既能監測網站訪問用戶數的情況,同時通過跳出率等指標來分析訪問用戶的質量,可監測爬蟲或及時識別偽造用戶。

對于非通用性產品,如企業內部的數據產品,這個環節的關鍵就落在了確定核心指標頭上。結合《精益數據分析》和個人經驗,有個簡單的方案可供參考:

  1. 根據商業領域不同及企業發展時期的不同,要采取不同的指標驗證
  2. 建立第一性指標,目標要依據情況而變

比如在美團外賣最開始的時候,關注的重點的是訂單數,后續發展成訂單額,新客數和資金使用率等等。在不同戰場,在戰場的不同時期,需要觀測的指標都不一樣。

以下是《精益數據分析》中關于各種商業模式和公司階段應該思考的問題,和采取的第一性指標,僅供參考:


在具體設計第一性指標及衍生指標時,需要注意:

(1)注意行業常識

比如社交產品,電商產品等應該關注什么類型的第一性指標

(2)選擇合適形式

  • 采取簡單易懂的指標:復雜的指標發生異常時,并不能明確告訴你問題的原因,簡單成本中
  • 采取比率指標:相對于資金使用量,資金使用率,如訂單金額/活動金額能防止資金濫用,產生更大的經濟效益。
  • 采取伴生指標:在關注某個指標時,需要有個另一個指標對它進行制衡,避免「跑偏」。如關注新客數時,也必須關心獲客成本,避免市場部門為了完成新客指標而花費了過高的成本

(3)避免統計陷阱

  • 平均值的一項巨大能力就是阻礙決策的制定。因此在使用平均值時,要注意通過使用分布數據來防止這種偏差。只說全國人民平均收入時,會給大家造成理解偏差。但如果加上省份間的分布數據的話,情況就一目了然了。
  • 百分比/比率,要注意顯示絕對值。當一個業務部門說自己增長 100% 時,可能只是因為他上一個周期的絕對值低而已。

(4)塑造指標易用性

  • 幫助用戶理解和相信他們看到的數據:提供數據的來源,算法以及異常的原因。異常的數據需要提供可驗證的途徑
  • 提供上下文信息:提供數據清晰的標題,標簽和解釋,提供易于理解的指標名稱,以及標記數據異變的原因。

對于第四點,通常需要通過鼠標懸浮的方式展示每個核心指標的定義,在有條件的情況下,還需要對每個數據異動提供注釋。在 Mixpanel 中,它支持在某個指標的某個時間點上添加備注,來說明數據變化的原因。

至于「精準,精確反映業務情況」,精準講的是指標要設計合理,精確講的是一定要保證數據準確性。一個老板天天看的頁面,數據出錯了能發現還好,如果依賴錯誤的數據作出了決策,后果你能想象…

3. 深入分析,落地行動

分析無非「對比,細分,溯源」,從這個角度講,儀表盤的設計需要讓用戶能夠在「提綱挈領」之余,也要能提供給用戶分析思路。當發現數據異常時,能夠沿著思路自主得到答案,或者分析方向。

3.1 對比

沒有對比就沒有分析,從各種指標的對比中才能看出指標的偏離。對比可分為三大維度:

  1. 時間維度:同比,環比
  2. 空間維度:地區對比,團隊對比,商品/服務/渠道對比
  3. 設計維度:目標值,業界值,極限值等與實際值的對比

Qlik 作為一個老牌的可視化廠商,它旗下的產品 QlikView 將對比的概念發揮的淋漓盡致,基本涉及了以上各種對比類別。

在 Sales 圖表中,提供了各個月份間的時間維度對比。在 Sales/Margin/Customer 上和左側的列表中,則提供了地區,渠道,品類等各空間維度的對比。而在 KPI Scorecard(計分卡)圖表中,是設計維度的對比:「當前銷售額」和「某個時間段內的最高值和最低值」,「利潤率」和「目標利潤率」&&「利潤率區間」,從而使所有地區的銷售情況一目了然。

而且從上面的例子可以看出,對比對于顯示關鍵信息來講非常重要。在設計相關的對比模塊時,一要在合適的維度上進行對比,這個維度應該對當前指標的變動起主導作用。二要突出對比的結果,方式有顏色變化,內容閃爍或數據報警等。

這里順便提下對于紅綠色含義的認知差別。有些國內的數據產品會以為在中國股市中,紅漲綠跌,并且在中國傳統文化中紅色代表喜慶,所以在數據產品中紅色應該也代表數據變好。其實數據可視化的原則是,高效地向用戶傳遞數據信息。而用戶天然對紅色的內容會比較敏感,紅色應該用來傳遞更重要的信息。數據下跌比數據上漲要重要得多,因此數據產品在指標的顯示上,應該仍遵循紅壞綠好的原則。

3.2 細分

細分是對核心指標進行多維度的劃分,分為單維度細分,多維度細分,流程細分及TonN細分等等。

以 Ptengine 為例,它提供了對不同核心指標的細分,包括訪問來源,訪問地區,訪問設備及頁面。同時,用戶可以在頁面對不同指標進行切換。當你對某些數據有疑問時,你可以通過點擊相應的維度跳轉進入各個子頁面,起到了「引領分析」的作用。

流程細分一般是指的從漏斗的角度去拆解指標的上下游。舉例來說,當我們關注的指標是支付訂單數時,我們就需要去拆分從列表頁,詳情頁,下單頁到支付頁的每個流程的數據及轉化。

TopN 細分則是注重看中某個維度下占比前列的維度值的變化,來直接反映某些指標值的變化。

3.3 溯源

其實,溯源作為一個對于數據異變根本原因的追查過程,很難融合在以簡潔為原則的 Dashboard 中,不過 Amplitude 通過隱藏選項并且通過和內在其他功能的融合,很好地解決了這個問題。

Amplitude 首先提供了不同主題,不同形式的數據的對比細分展示。而在某類具體業務和數據點上,我們可以選取某個時間點的用戶群體作為 Cohort 對象或者針對這批用戶的流向結合產品內其他功能進行分析。它甚至能夠將整個用戶id列表下載下來,做線下分析。

事實上,對比,細分和溯源不是嚴格區分出來的三個流程,而是互相融合在一起的。在不斷地在異常的維度上進行對比和細分時,才能得到可以付諸行動的結果。

3.4 行動

在設計儀表盤時,要反復地問自己“So What”。從設定用戶場景,到確定指標和優先級,再經歷對比細分溯源三個分析流程,最后要做的,就提供給用戶決策和行動的建議和方向。

這里有點個人的技巧:先假定幾個異常的場景,然后通過設計出來的儀表盤,演練拆解場景中出現的問題。如果能夠在若干個場景中都順利走通,那就證明你整個設計能夠支持用戶做出決策和行動,已經馬克森斯了。

再往上一層,就是能夠直接給出業務建議的層次了。這個一方面需要對業務的極度熟悉,另一方面可能還需要數據挖掘和機器學習的內容。舉個 Google Analytics 的移動版為例,在這個版本的 Dashboard 里,已經有這種智能化的提醒了。

4. Dashboard 設計原則

剛開始做 Dashboard 設計時,不要一上來就畫原型圖,而是先劃分用戶和場景,然后用思維腦圖確認核心指標和衍生維度。再根據思維腦圖畫出草圖,演練幾遍在 3.4 提到的「用戶故事」。在整個流程都走順之后,再開始儀表盤的設計。

在設計細節上,不要刻意追求炫酷的效果,而是注重設計的內在邏輯和傳遞消息的有效性。有一些設計原則可以參考:

在功能設計上

  • 突出核心指標:不能讓復雜的設計掩蓋了指標的呈現
  • 突出對比:時間對比,空間對比,設計對比等等
  • 提供細分及下鉆:方便用戶在有疑問時能夠快速得到方向
  • 減少用戶選擇:提供默認的同環比和時間選擇,提供最常見的維度切分

在可視化設計上

  • 簡潔為上:減少Tab、按鈕、單選框、復選框,在1-2個頁面里完成展示
  • 避免過多的顏色和點綴:太多的顏色會讓人眼花繚亂,失去重點
  • 選擇正確的可視化形式,可參見華爾街是怎么做可視化的

匯總以上提到的各種類型的 Dashboard ,可供參考的設計框架有以下兩種,均可從本文中提到的各個大廠設計的 Web Dashboard 的樣式作為佐證。

(1)總分式,先展示核心指標,再對核心指標進行拆分

在實際操作過程中,因為指標往往比較多,通常會通過加上指標篩選框或者 Tab 的方式來進行區分。

在實際使用過程中,模塊間可以任意組合。如 GA 和 Ptengine 就是上趨勢下數字搭配若干個細分維度,而 Webtrends 則是上數字下趨勢再搭配細分維度,Mixpanel 和 Amplitude 則干脆就是趨勢+細分維度。

(2)分散式,常見于 Customize 類型的數據產品,形式是若干個報表集中在一個頁面展示。

這是因為此類產品一般沒有等級明確的金字塔結構來承接分析思路。此類形式勝在自由,但缺陷在于信息量太大,讓用戶一下子不知道該關系哪個指標。所以建議此類產品必須可以定制每個單圖的大小,從而起到「少勝于多,分清主次」的作用。

為了追求視覺效果,在大屏展示場景下,也會經常采取這種布局方式,比如天貓的雙十一大屏和一些公司內部的大電視上。

在《Information Dashboard Design》一書中,作者給出了他眼中最完美的 Dashboard 設計范例,堪稱簡潔典范:

在實際設計過程中,以上幾個方法可能會互相沖突,比如 Amplitude 產品中,我們說盡量減少 Tab 切換,可它就在頁面中提供了若干個切換的入口。這時候就得在業務需求,產品簡潔和信息量上做好取舍。

設計完成和產品上線后,都必須持續聽取用戶的意見,對指標和交互進行修正。隨著企業階段的演變,Dashboard 也會處在不斷變化當中。

5. Report && Customize

我們先用 Google Analytics 和 Looker 來舉例說明這兩者的差別。

Google Analytics 中根據分析主題劃分出受眾群體,流量獲取,行為,轉化四個子菜單,每個菜單會再按照菜單層次依次往下拆分,就像一層層金字塔一樣。

另外一面,在 Looker 中,會采取這種分散的圖表的組織方式,每個圖表都可以再次編輯。整個分析頁面,不再是簡單的圖和表的堆砌,而是變成了一個畫布。用戶可以在這個畫布上放置他們任意想要的內容。

這兩種方式各有利弊。

Report Dashboard 適用于整個市場的數據利用意識處于早期階段,分析思路匱乏,對指標的需求比較單一,只能由設計者提供一個抽象普適的分析思路,供用戶日常使用。

而隨著數據運營的方法論越來成熟,整個數據采集和分析工具越來越先進時,原先的方案已經不能滿足人們的需求。不同的人,同一個人不同時期關注的內容都不一樣。因此對個性化的要求便能越來越高。

不過,Customize Dashboard 會面臨幾個問題:1,對底層數據的規范要求較高;2,對使用者要求較高,這需要用戶有十分明確的分析思路及定義指標的概念。為了解決這個問題,很多產品便提出了兩者相融合的方式:在 Customize Dashboard 的基礎上,提供一些默認的報表,方便用戶使用。允許用戶修改,從而具備更大的自由性,適用于跨業務跨部門的情況。同時帶來的問題就是分析思路不明確,可能沒有重點和框架,用戶在分析使用的過程中容易困惑。這種情況下,預定義的多主題的 Dashboard 和分析思路就顯得非常重要,否則整個產品的上手難度會比較高。

在 Kilometer.io 的設計中,它會給用戶預設幾個常見的模板,同時允許用戶對模板進行自定義的編輯。這是很多 TOB 數據產品都具備的功能,而 kilometer.io 比其他產品更進一步的做法時,在自主添加報表時,它同樣提供了默認的指標和形式供你選擇,避免了用戶在自定義報表時無所適從的問題。

說起來,這有點像降維打擊,后者只要有完善的底層數據和交互規范,片刻就可完成多種類型的 Report 的設計。這已經不是一個層次的戰爭。

這個趨勢不但是 ToB 類數據產品出現,在企業內部數據產品上亦是如此。很多公司如美團,轉轉都開啟了這種以自定義 BI 為基礎,以「個性化看板」的方式組織所有定制化和自定義的報表的模式。這種 BI2.0 的結構能夠為不同的業務線,不同的場景提供不同的 Dashboard。私以為,這將是大幅提高企業內數據使用,分析和分享的效率。

當數據倉庫基礎已經完善或業務需求非常多樣化的時候,就可以開始考慮這種架構了。

6. 在數據產品門戶之外

在數據產品之外,在管理后臺產品,用戶端產品,也有這種集中展示數據,幫助用戶快速了解情況的場景,大多數集中在運動類產品,理財類產品和工具型產品上。類型雖然不同,理念大同小異。大家可以借此驗證文中理念,拓寬思路。

運動類產品

理財類產品

工具型產品

參考文章

  1. Designing Data-Driven Interfaces
  2. Ten key elements for effective dashboard design
  3. APP的數據圖表設計,你以為簡單?
  4. Online Dashboards: Eight Helpful Tips You Should Hear From Visualization Experts
  5. 《精益數據分析》
  6. 《精通 Web Analytics 2.0》
  7. 《Information Dashboard design》

 

作者:陳新濤,現任轉轉數據負責人,曾任美團外賣首任數據PM。微信公眾號三生石,小密圈數據人修煉之路。

本文由 @陳新濤 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 厲害了,老師!

    來自江蘇 回復
  2. 很棒

    回復
  3. 需求文檔

    回復
  4. 大家期待已久的《數據產品經理實戰訓練營》終于上線啦!

    本課程非常適合新手數據產品經理,或者想要轉崗的產品經理、數據分析師、研發、產品運營等人群。

    課程會從基礎概念,到核心技能,再通過典型數據分析平臺的實戰,幫助大家構建完整的知識體系,掌握數據產品經理的基本功。

    學完后你會掌握怎么建指標體系、指標字典,如何設計數據埋點、保證數據質量,規劃大數據分析平臺等實際工作技能~

    現在就添加空空老師(微信id:anne012520),咨詢課程詳情并領取福利優惠吧!

    來自廣東 回復
  5. 干貨啊

    來自河南 回復
  6. 真的醍醐灌頂

    來自廣東 回復
  7. 好文,收藏一記

    來自上海 回復
  8. 好帖,收藏走一波

    來自山西 回復
  9. 贊一個

    來自廣東 回復
  10. 圖美,喜歡~

    來自廣東 回復
  11. 好貼 收藏

    來自上海 回復
  12. 1.1 劃分用戶-配圖的地址方便分享一下么

    來自廣東 回復
    1. 你搜索下domo就可以了解

      回復
  13. @陳新濤 請問一下,可轉載作為公司內部學習資料嗎?

    來自廣東 回復
    1. 可以的,注明出處就行

      回復