B端設計復盤:支持度量、追蹤和分析的生產監控設計

3 評論 6475 瀏覽 51 收藏 33 分鐘

編輯導語:從0到1側重生產流程監控的系統設計思考,本篇文章側重點在于實現監控的線上化,并通過自動預警設計解決人力投入成本高、追蹤操作耗時久和發現異常不及時3個顯著問題。希望對你有幫助。

隨著業務規模的不斷擴張,業務的應用場景也在不斷的發生變化,不同場景下的各類問題可能會隨時發生,如果不能及時發現處理,會對業務或客戶造成損失,為此監控能力會變得越來越重要。

一、了解功能

監控是中后臺的基礎能力,從字面意思拆開理解,就是“監視”和“控制”。

“監視”平臺運行的關鍵數據,在檢測到異常時采取對應的“控制”措施,如發出預警通知管理員進行解決或執行預設的自愈措施。

“監視”是手段,“控制”是目的,中后臺搭建監控能力其實就是在不斷豐富“監視”的手段,以便于更快更準的“控制”業務進展,保障平臺業務健康運轉。

我們可以通過下面1張圖來理解監控能力如何幫助業務運轉:

B端設計復盤:支持度量、追蹤和分析的生產監控設計

當數據發生異常時,監控平臺及時感知并預警通知到相應人員進行解決,也可以通過預設的策略判斷是否可以進行自動處理,這些都屬于及時止損的控制手段。

事后相應人員需要通過數據分析進行問題定位,并徹底根治該問題。最后進行問題的復盤,制定相應的預防措施,避免相同問題再次發生,在有條件的情況下還可以根據新的問題以及場景,訓練出新的AI處理策略來自動采取處理措施。

1. 監控設計的價值

通過設計幫助用戶一目了然的明確數據或流程的當前狀態,為用戶提供準確的數據,幫助快速定位異常問題;

通過配置設計允許用戶通過對異常采取控制策略,保障服務的可靠性和安全性,輔助業務持續穩定運行;

在B端場景中,通過監控的頁面設計可以實現對業務數據的異常預警和分析定位,幫助管理員及時采取控制措施,將業務損失降至最低,影響范圍降至最小。

?2. 監控的可應用場景

  • 硬件監控
  • 系統監控
  • 應用監控
  • 網絡監控
  • 流量分析
  • 日志監控
  • 安全監控
  • API監控
  • 性能監控
  • 業務監控

二、設計功能

1. 基于業務梳理關鍵信息

今天主要講的是如何對一個生產線的數據進行監控設計,可以理解為“業務監控”,如何設計需要依賴業務需求,為此我們需要先了解業務的目標用戶。

1.1 了解目標用戶的問題

通過溝通得知,我們的目標用戶主要以產品和運營為主,這部分用戶在平臺內通常會被分配生產管理員的角色,主要負責進行日常的產線投放、數據追蹤和人員績效管理等工作。

在日常的管理工作中,他們總是需要關注產能、質量和人效相關的問題,比如:
投遞到產線的訂單會給各環節帶來多少任務?

每天的任務投放和完成情況是否符合預期?

每個環節的質量情況是否符合預期?在某個時間段內有哪些任務完成了?

是否有高優任務被卡住了?

用戶群組/供應商在各任務的表現如何?…

以上的這些問題,都是目標用戶期望通過監控功能來解決的。

1.2 梳理操作流程

為了更好的服務業務,在開始設計前,我們進一步了解了目標用戶目前的人工操作流程:

B端設計復盤:支持度量、追蹤和分析的生產監控設計

首先,生產管理員在與業務完成對接后會開始制定生產計劃

根據生產線在未來一段時間內的交付數量要求,對任務進行統籌,具體擬定生產的品種、數量、質量和進度的計劃;根據歷史同類任務的任務流轉情況,確定生產線下各任務的預估產量和人員安排。

制定完成計劃后,基于目標設定度量依據

  • 產能追蹤:投放數、完成數、進行數等;
  • 質量追蹤:通過數、通過率、踩雷率等;
  • 人效追蹤:提交人數、提交時長等。

進行下一步投產,并在投產后定期調取數據追蹤生產進展

  • 產能追蹤:將完成數與計劃數做比較,及時發現產能差距并補救;
  • 質量追蹤:通過通過率和踩雷率來確認質量情況;
  • 人效追蹤:基于提交人數和提交時長評估供應商或個人的效率狀況。

當發現異常時,基于多維度數據表格拆解分析關鍵問題

  • 如按職責維度分析,可以判斷是哪個生產職能出了問題;
  • 如按資源維度分析,可以判斷是哪類資源出了問題;
  • 如按時間維度分析,可以判斷是哪天或哪個小時的進度出了問題;

定位到關鍵問題后,結合實際情況采取相應措施。

  • 產能問題:增加生產投入,或重新調整供應商分工;
  • 質量問題:回收錯誤任務、投放地雷、追加抽檢等;
  • 人效問題:采取獎懲措施,如績效扣減、禁用違規賬號等。

通過以上人工流程我們可以發現監控的3個關鍵動作:度量、追蹤和分析,新的監控能力設計必須支持這3個關鍵動作才能滿足目標用戶的需求。

但通過以上流程我們同樣也發現了人力投入成本高、追蹤操作耗時久和發現異常不及時3個顯著問題,這些問題會導致業務流程一旦發生異常,生產管理員沒有辦法及時的跟進解決,從而給業務造成一些不必要的損失。

那么為了支持3個關鍵動作并解決以上3個問題,我們在原流程基礎上時,增加了自動監控的環節,通過自動預警降低人力投入、減少追蹤耗時和提升定位效率。

原流程

B端設計復盤:支持度量、追蹤和分析的生產監控設計

新流程

B端設計復盤:支持度量、追蹤和分析的生產監控設計

基于新流程,我們可以開展下一步的信息層級梳理工作。

1.3 梳理信息層級

確認新流程后,需要與產品經理、目標用戶等相關人員一起梳理監控信息的層級關系。層級可以基于以下問題構建:

在該環節內用戶最關心什么信息?

在該環節內用戶希望執行哪些操作?

以下是通過討論后梳理出的信息層級關系:

2. 基于流程和層級開展設計

為了便于大家理解,我們以故事的形式來描述設計,便于大家代入真實的使用場景中。

今天的主人公是生產管理員小明,他剛剛完成了某業務生產計劃的制定,并將一批資源投放至生產線,下一步就需要針對該生產線設置度量依據,便于后續在線上監控生產進展是否正常。

2.1 設定度量依據

這里的度量依據指的是業務的核心指標,即業務關心的具體關鍵數值,如某個任務的通過率。業務需要衡量進展或成果是否達到預期時,通常會使用核心指標。

回到我們的業務場景里,從2.1的流程中我們也可以看到,生產管理員小明會使用不同的指標進行對比來確認產能、質量和人效是否達到了預期。

  • 產能追蹤:將完成數與計劃數做比較,及時發現產能差距并補救;
  • 質量追蹤:通過通過率和踩雷率來確認質量情況;
  • 人效追蹤:基于提交人數和提交時長評估供應商或個人的效率狀況。

因此,為了提升生產管理員查看核心指標的效率,我們需要在監控界面上新增一個核心指標的顯示模塊,支持生產管理員小明添加指標、刪除指標和查看指標變化。如下是相應的交互路徑,藍框為該環節內的主要操作:

B端設計復盤:支持度量、追蹤和分析的生產監控設計

生產管理員小明來到了下圖的產線監控頁,但因為該生產線未添加過任何核心指標,所以監控模塊內會顯示為空態樣式。

不同的業務需求通常會對應一條不同的生產線,不同的生產線又會對應不同的衡量指標,因此在上圖的界面設計中,我們遵循從左至右的視覺路徑,優先在左上角顯示生產線的Select框,引導用戶選擇對應的生產線后再設置指標;當前生產線未添加過任何核心指標時,在模塊內顯示“請先點擊右上角設置指標”的空態提示,引導用戶點擊右上角的“設置指標”Button進行指標添加。

小明點擊添加指標按鈕后,在按鈕下方彈出如下圖所示的TreeSelect選擇框。

我們提前按用戶關心的維度將指標做了分類,通過采用TreeSelect控件,用戶可以便捷選擇整個大類指標,也可以通過點擊二級指標前的Checkboxes來僅選擇某幾項指標;隨著業務指標的不斷增多,用戶查找單個指標的成本也會變高,因此我們在樹選擇控件的上方增加了支持實時匹配關鍵字的SearchBar,便于快速定位選擇某項指標。

2.2 通過指標卡片追蹤進展

小明完成并確認選擇后,在模塊內會顯示相應的指標卡片。

B端設計復盤:支持度量、追蹤和分析的生產監控設計

小明也可以通過多個核心指標進行對比,來進行相應的產能、質量、人效追蹤。

  • 產能追蹤:將完成數與計劃數做比較,及時發現產能差距并補救;
  • 質量追蹤:通過通過率和踩雷率來確認質量情況;
  • 人效追蹤:基于提交人數和提交時長評估供應商或個人的效率狀況。

指標的顯示統一采用了的卡片的交互樣式,支持用戶長按拖拽更改指標的顯示順序,為了便于用戶與生產計劃進行對比,我們默認顯示了指標環比的變化情況,這樣小明就可以快速定位到今日的指標相對昨日的變化是怎樣的。

環比的比率變化顏色統一使用了灰色,原因是不同數值的增減對業務而言對應的含義不同,如當日已完成資源數的指標環比下降代表異常;而當日未完成資源數則相反,指標環比上升代表異常。如果要在該模塊內精細化定義不同指標變化是否異常,則會帶來較大的研發定義成本,不滿足從0到1快速上線的訴求,因此我們選擇暫時通過指標自動預警功能來實現對異常情況的追蹤。

2.3 設置預警規則

生產管理員小明完成核心指標的設置后,通過觀察指標卡片上的環比指數發現“指標C”的變化有些接近異常,但想到自己不可能24小時不間斷的人工監控這項指標,于是決定設置一個自動預警規則,當“指標C”的數值達到異常值時將自動觸發預警,預警通知會發送到目前正在值班的生產管理員處,便于其能夠快速對該異常進行處理。如下是相應的交互路徑,藍框為該環節內的主要操作:

那么首先,我們需要一個預警管理頁,在這個頁面可以基于指標進行預警規則的增刪改查操作。

小明發現針對該產線的“指標C”并沒有相應的預警規則,那么他也可以選擇點擊表格右上角的“新增”按鈕,創建新的指標預警規則。

B端設計復盤:支持度量、追蹤和分析的生產監控設計

創建規則采用了抽屜式表單的交互形式,采用Drawer控件來承載表單操作可以減少用戶的頁面跳出感,也避免了表單項較少時造成頁面利用率低的體驗問題。

在規則明細的表單項排布中,因為考慮到指標與監控對象(如生產線)有聯動關系,因此在設計時會由上至下優先引導用戶選擇預警類型和預警對象,完成以上2個表單項后才會出現預警指標表單項,避免用戶誤操作;為了幫助業務更加精細化定義指標場景,我們增加了篩選條件和維度兩個非必填項,可以幫助業務對指定維度指定條件下的指標進行監控。

在觸發設置的表單項目設計中,針對觸發條件采用了“參數+運算規則+閾值”的混合表單項,提供了豐富的指標條件定義范圍:

當左側參數選中“數值”時,中間運算規則包含“大于、小于、大于或小于”3個選項,右側閾值輸入框受運算規則選項影響展示如下:

B端設計復盤:支持度量、追蹤和分析的生產監控設計

當左側參數選中“環比”或“周同比”時,中間運算規則包含“向上波動、向下波動、向上或向下波動”3個選項,右側閾值輸入框受運算規則選項影響展示如下:

B端設計復盤:支持度量、追蹤和分析的生產監控設計

巡警周期也同樣采用了混合表單項,提供了“分鐘”或“天”的周期自定義設置:

當左側選中“按分鐘”時,右側顯示僅支持單選的Select組件,包含“5分鐘、10分鐘、30分鐘、60分鐘和90分鐘”5個選項,默認選中5分鐘;

當左側選中“按天”時,右側顯示支持選擇時分的TimePikcer組件,默認為空。

B端設計復盤:支持度量、追蹤和分析的生產監控設計

最后的通知方式表單項,提供了“人”和“群”兩種通知維度,便于用戶按照實際情況選擇所需的通知方式。

2.4 進展異常出發報警通知

小明完成了預警規則的設置后,就可以安心的先去做其他工作,系統將按照規則對相應指標進行自動監控追蹤。

B端設計復盤:支持度量、追蹤和分析的生產監控設計

當該指標到達了預警值時,小明的工作通訊軟件便會收到下圖的一條預警記錄消息。

B端設計復盤:支持度量、追蹤和分析的生產監控設計

小明點擊消息卡片上的“查看預警分析”按鈕,便會啟動瀏覽器跳轉至相應的預警分析頁。

如果小明的工作通訊軟件消息較多,導致該報警消息被錯過,我們同樣提供了相應的預警記錄頁,小明可以在該頁面內查看近期觸發過的預警記錄信息。

頁面頂部提供了兩張統計信息卡片:

左側卡片展示近7天的預警趨勢,且支持鼠標Hover顯示對應數值;

右側近7天預警規則TOP5卡片展示最近7天內觸發預警次數最多的前5個規則及對應觸發預警次數,鼠標Hover規則名稱時變藍,點擊后跳轉對應預警分析頁。

B端設計復盤:支持度量、追蹤和分析的生產監控設計

頁面底部的表格默認按最近觸發預警的時間降序排列,確保用戶優先看到最新的預警記錄,點擊對應記錄表格項內的查看按鈕后,跳轉至對應預警分析頁。

2.5 分析關鍵問題

小明可以通過觀察指標卡片或預警通知獲知異常后,需要快速分析定位導致異常的原因在哪里,為此他需要借助圖表和數據進行下一步的分析。

2.6 通過預警分析確認異常

前面提到過,當監測到指標異常時,會自動向設置的用戶發送預警通知消息,同時也會在相應的預警記錄頁內生產一條預警記錄,用戶可以通過這兩個渠道進一步查看相應的圖表數據。

B端設計復盤:支持度量、追蹤和分析的生產監控設計

小明通過預警記錄進入對應的分析頁,在該頁可以查看規則相關的明細信息,以及被預警指標的趨勢變化。

頁面頂部展示規則明細,便于用戶明確預警規則的相關信息;底部展示規則相關的指標趨勢,我們可以看到該項規則內要監控的是“學科維度下的語文當日累計未完成資源數”和“學科維度下的英語當日累計未完成資源數”2項指標,因此趨勢圖和詳情表格內會默認展示相應的2條數據:

趨勢圖內默認根據時間單位展示最近20條節點記錄,橫軸時間按巡警周期展示對應的時間單位(天或XX分鐘),趨勢線默認顯示節點圓圈,超出預警值警戒線的節點圓圈高亮顯示為紅色,鼠標Hover節點時顯示對應明細卡片;

詳情表格左側的豎軸展示指標維度,右側依次展示最近20條節點(對應趨勢橫軸)記錄的數值信息,超出預警值的節點數值變為警示的紅色。

小明發現了觸發預警的節點后,需要做進一步的歷史數據對比,分析本期與過去的數據差異情況,剔除周期因素從而判斷指標是否真的為異常。

小明可以選擇點擊趨勢圖表右上角的對比選擇器,選擇查看“環比”或“周同比”數據。

環比:本期與上期的對比,如今天和昨天; 周同比:本期與上周同期的對比,如本周三和上周三。

右上角的對比選擇器在切換選中“周同比”或“環比”后,在趨勢圖內除顯示指標在本期的變化趨勢外,會額外顯示上期或上周同期的趨勢線,線條色值采用飽和度降低的相同色系,目前是為了表現兩條線的關聯性但又不至于將二者進行混淆,當鼠標Hover節點時,在詳情卡片上也會新增顯示上期或上周同期的數值信息,并增加百分比率的增減信息露出,便于用戶快速對比二者的數值差異;詳情表格內展示的數值也會跟隨“周同比”或“環比”的選擇顯示對應的數值比率變化信息,鼠標Hover表格項時顯示對應的對比明細Tooltips提示。

2.7 多維度下鉆分析挖掘原因

小明通過指標卡片或預警分析確認“指標C”發生異常,如果有過往的沉淀處理措施,小明可以直接對異常采取控制措施進行及時止損,但如果沒有過往的處理經驗,且無法定位導致指標異常的原因,這時候小明就可以通過假設驗證法來挖掘導致異常的真正原因。

B端設計復盤:支持度量、追蹤和分析的生產監控設計

例如,小明根據經驗假設是因為某供應商在生產線內的支持不力導致了指標異常,那么為了驗證假設,小明就需要采用多維度下鉆分析來驗證假設是否成立。

解釋下什么是多維度下鉆分析:一般中臺需要對接多個不同業務,不同業務的關注點不同,所以大家對數據的維度、粒度要求也不盡相同。通過多維度數據鉆取的功能,可以幫助用戶更易發現問題所在,進而做出正確的決策:如按職責維度分析,可以判斷是哪個生產職能出了問題;如按資源維度分析,可以判斷是哪類資源出了問題;如按時間維度分析,可以判斷是哪天或哪個小時的進度出了問題;…

那么我們就需要回到產線監控頁,并在核心數據模塊下方新增一個多維分析模塊:

多維分析模塊的頂部提供了對應維度的篩選區,方便用戶定位到單個維度內的某個值,如供應商A和供應商B曾經有過支持不力的先例,那么我們就可以著重篩選這兩個供應商,來查看與他們相關的指標是否存在異常。

篩選區下方展示了預覽流程兩個Tab:

預覽Tab內提供維度和指標的顯示篩選,在這里篩選的維度和指標信息將實時同步顯示在下圖的圖表內,便于用戶在不同圖表視圖內隨時控制和變更維度/指標的顯示,如下圖通過趨勢和對比清晰展現出關聯A、B兩個供應商維度的“指標C”數據;

B端設計復盤:支持度量、追蹤和分析的生產監控設計

B端設計復盤:支持度量、追蹤和分析的生產監控設計

流程Tab內按流程節點展示整個生產線的流程圖,且在每個節點卡片內平鋪展示出所有指標數值的明細,用戶可以通過流程圖發現定位某項指標的數值異常發生在具體哪一個生產線環節。

點擊任意環節卡片后,可以觸發該環節相關的下鉆數據篩選,支持用戶繼續針對該節點數據進行多維度分析,以進一步驗證在該節點內是哪個維度導致了異常數據的發生。

基于以上分析能力,小明可以不停嘗試更換維度進行下鉆分析來驗證自己的假設,直到最終挖掘出導致“指標C”異常的原因,并采取相應措施進行及時止損。

  • 產能問題:增加生產投入,或重新調整供應商分工;
  • 質量問題:回收錯誤任務、投放地雷、追加抽檢等;
  • 人效問題:采取獎懲措施,如績效扣減、禁用違規賬號等。

3. 提取通用圖表設計點

在進行監控設計時,為了便于目標用戶更加直觀清晰的查看和定位數據,我們需要借用多類可視化圖表來進行表現。

那么首先,我們需要明確該如何選用可視化圖表:

選擇正確的圖表類型取決于顯示的數據類型。通常,圖表分為構成、對比、關系和分布4大類。

選擇哪種類型取決于:

是否要顯示某件事的組成部分?是否要比較值或顯示一段時間內的差異?是否想更好地理解兩個或多個變量之間的關系?是否要顯示數據的分布?

以上圖片來自互聯網設計幫,作者XC

基于上述圖片指引,在本次設計案例中,我們采用折線圖(Line Chart)來表現數據趨勢,采用條形圖(Line Chart)表現數據對比,又基于生產線的業務特點自行設計了流程圖來表現環節數據的流轉變化。

其中關于折線圖的設計使用,需注意:

折線圖的橫軸必須為時間維度,否則請勿使用折線圖;

盡量避免同時展示的折線超過 5-7 條,否則將影響對比效率,如果一定要超過則需要增加手動隱藏功能;

代表不同類型的折線需要采用對比鮮明的色值,代表同類的折線可以用飽和度控制來表現數據關系(如同一數據的同環比)。

其中關于條形圖的設計使用,需注意:

想展示每個類別的數量、比例和頻率,應選擇單個條形圖;

想跨類別比較項目,應選擇集群條形圖;想顯示每個類別之間的部分到整體的關系,應使用堆疊條形圖;

底部標簽文案較長時,應使用水平條形圖; 在堆疊條形圖中表現不同類別信息時,應盡量使用清晰明顯的對比色。

三、總結

以上是一款從0到1側重生產流程監控的系統設計思考,本期的側重點在于實現監控的線上化,并通過自動預警設計解決人力投入成本高、追蹤操作耗時久和發現異常不及時3個顯著問題。

后續的規劃可以基于更多業務場景呈現更豐富的可視化數據分析能力,并提供圖表自定義能力,將更多業務核心指標以多類圖表的形式呈現在監控頁面內,便于產品運營打造所需的儀表盤視圖,制定相應的自動化報表推送,實現業務效率和用戶體驗的進一步提升。

文獻參考:

  • https://zhuanlan.zhihu.com/p/360376342″>數據可視化:如何打造高效的儀表盤
  • https://uxplanet.org/data-heavy-applications-how-to-design-perfect-charts-c0c893fef6de”>Data-heavy applications: How to design perfect charts

#專欄作家#

愚者秦,微信公眾號:feather-wit,人人都是產品經理專欄作家。先后任職于愛奇藝、字節跳動的一枚體驗設計師,同時是兼職寫小說的斜杠青年,善于總結和抽象設計方法,熱衷于探索不同用戶場景下的產品策略。

本文原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 確實非常優秀,文章中的解題思路和方案適用于很多需要監控預警能力的場景

    來自上海 回復
  2. 寫的很好,優秀!

    來自廣東 回復
  3. 哇這個想法真的很不錯,一下解決了不少難題,這就去推給同事看看

    回復