三個步驟設計高效 Dashboard | 人人都是產(chǎn)品經(jīng)理

昵稱32028620 2019-07-19

展開全文

研究國外業(yè)內(nèi)前沿數(shù)據(jù)產(chǎn)品，了解當前實現(xiàn)數(shù)據(jù)價值的最新思路和實踐。

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

個人有幸經(jīng)歷過三個數(shù)據(jù)平臺的 Dashboard 設計，企業(yè)內(nèi)部和 ToB 型產(chǎn)品皆有涉獵。根據(jù)研究過的一些 Dashboard 設計案例和文章，最后將所有這些經(jīng)驗總結(jié)成以下的「123」：一個原則，兩個時期，三個細則。

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

因人而異，細分場景：根據(jù)用戶和場景設計產(chǎn)品
少勝于多，分清主次：展示最關鍵的指標，區(qū)分優(yōu)先級
深入分析，落地行動：支持深入分析，并落地為具體行動

這就像講一個用戶故事。經(jīng)過起承轉(zhuǎn)合慢慢鋪墊，最終進入正題，告訴用戶應該怎么去執(zhí)行，怎么去優(yōu)化產(chǎn)品和業(yè)務。

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

1. 因人而異，細分場景

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

1.1 劃分用戶

劃分用戶，一般會從業(yè)務線或崗位入手。不同業(yè)務線間，關注的核心指標自然不同，比如轉(zhuǎn)轉(zhuǎn)下面各種業(yè)務部門，即使大家都關注大盤數(shù)據(jù)，但每天更關心的，還是自己的業(yè)務細節(jié)指標。

崗位也是同理，管理層重在把握全局，而執(zhí)行層重在每個細節(jié)的執(zhí)行效果，關注的數(shù)據(jù)層級和指標也會有所差異。

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

同時，它也支持用戶對這些報表進行內(nèi)容的增刪改查，以及對整體布局進行調(diào)整。

所有設計儀表盤的第一件事情，就是明確自己的用戶，然后根據(jù)不同的用戶群體設計儀表盤，及確定開發(fā)的優(yōu)先級。

1.2 劃分場景

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

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

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

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

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

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

2. 少勝于多，分清主次

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

從用戶的需求出發(fā)
精準，精確反映當前業(yè)務情況
核心指標不超過7個
確定核心指標間的聯(lián)系及優(yōu)先級

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

同時，這幾個業(yè)務從幾個側(cè)面整體衡量了網(wǎng)站的用戶數(shù)量及質(zhì)量，既能監(jiān)測網(wǎng)站訪問用戶數(shù)的情況，同時通過跳出率等指標來分析訪問用戶的質(zhì)量，可監(jiān)測爬蟲或及時識別偽造用戶。

對于非通用性產(chǎn)品，如企業(yè)內(nèi)部的數(shù)據(jù)產(chǎn)品，這個環(huán)節(jié)的關鍵就落在了確定核心指標頭上。結(jié)合《精益數(shù)據(jù)分析》和個人經(jīng)驗，有個簡單的方案可供參考：

根據(jù)商業(yè)領域不同及企業(yè)發(fā)展時期的不同，要采取不同的指標驗證
建立第一性指標，目標要依據(jù)情況而變

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

以下是《精益數(shù)據(jù)分析》中關于各種商業(yè)模式和公司階段應該思考的問題，和采取的第一性指標，僅供參考：

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

（1）注意行業(yè)常識

比如社交產(chǎn)品，電商產(chǎn)品等應該關注什么類型的第一性指標

（2）選擇合適形式

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

（3）避免統(tǒng)計陷阱

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

（4）塑造指標易用性

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

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

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

3. 深入分析，落地行動

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

3.1 對比

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

時間維度：同比，環(huán)比
空間維度：地區(qū)對比，團隊對比，商品／服務/渠道對比
設計維度：目標值，業(yè)界值，極限值等與實際值的對比

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

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

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

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

3.2 細分

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

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

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

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

3.3 溯源

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

Amplitude 首先提供了不同主題，不同形式的數(shù)據(jù)的對比細分展示。而在某類具體業(yè)務和數(shù)據(jù)點上，我們可以選取某個時間點的用戶群體作為 Cohort 對象或者針對這批用戶的流向結(jié)合產(chǎn)品內(nèi)其他功能進行分析。它甚至能夠?qū)⒄麄€用戶id列表下載下來，做線下分析。

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

3.4 行動

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

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

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

4. Dashboard 設計原則

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

在設計細節(jié)上，不要刻意追求炫酷的效果，而是注重設計的內(nèi)在邏輯和傳遞消息的有效性。有一些設計原則可以參考：

在功能設計上

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

在可視化設計上

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

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

（1）總分式，先展示核心指標，再對核心指標進行拆分

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

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

（2）分散式，常見于 Customize 類型的數(shù)據(jù)產(chǎn)品，形式是若干個報表集中在一個頁面展示。

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

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

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

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

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

5. Report && Customize

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

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

另外一面，在 Looker 中，會采取這種分散的圖表的組織方式，每個圖表都可以再次編輯。整個分析頁面，不再是簡單的圖和表的堆砌，而是變成了一個畫布。用戶可以在這個畫布上放置他們?nèi)我庀胍膬?nèi)容。

這兩種方式各有利弊。

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

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

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

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

說起來，這有點像降維打擊，后者只要有完善的底層數(shù)據(jù)和交互規(guī)范，片刻就可完成多種類型的 Report 的設計。這已經(jīng)不是一個層次的戰(zhàn)爭。

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

當數(shù)據(jù)倉庫基礎已經(jīng)完善或業(yè)務需求非常多樣化的時候，就可以開始考慮這種架構(gòu)了。

6. 在數(shù)據(jù)產(chǎn)品門戶之外

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

運動類產(chǎn)品

理財類產(chǎn)品

工具型產(chǎn)品