• 如何設計內容精確、體驗友好的DASHBOARD?(上篇)

    /2017-06-22 15:52:07/

  • \


    在企業類應用服務(SaaS)、檢測工具(手機安全助手)、量化自我工具(智能手環)等后臺管理系統中,使用Dashboard可以幫助用戶監控和分析數據,快速獲取重要信息。但如果對Dashboard設計缺乏認知,就很可能會造成Dashboard呈現的信息雜亂,充斥著無關緊要的指標、文本信息及各種半成品的圖表等,讓用戶抓不到重點。

    那么,設計師該如何設計內容精確、體驗友好的Dashboard以滿足用戶需求呢?文章將從以下幾個方面思考:

    • Dashboard是什么?
    • 主要場景是什么?能為用戶帶來什么價值?
    • 目標用戶分析
    • 選定Dashboard內容
    • Dashboard內容結構
    • 功能特性
    • 信息設計

    一. Dashboard是什么?

    在了解Dashboard之前,可以先了解下汽車儀表盤和報表。

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

    \

    △  汽車儀表盤(左)和報表(右)

    而Dashboard沿襲了汽車儀表盤理念,在一個屏幕上有預設性地顯示對用戶關鍵的信息,并實時告知用戶正在發生的情況。同時,Dashboard進一步結合計算機互動的功能顯示和傳輸信息,突破了報表要考慮紙面打印輸出的限制。在Dashboard頁面中,用戶不僅可以直接對數據和圖表進行分析,還可以通過控件來控制數據的顯示、計算、過濾和分組等等。

    在Stephen Few的《Information Dashboard Design》一書中指出:Dashboard對重要信息做視覺呈現,這些重要信息是為了達成一個或者多個目標而被統一組織在一屏內,以便能夠一眼就得到監控。

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

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

    \

    △  Dashboard三大主要使用場景

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

    \

    △  Dashboard監控場景

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

    \

    △  Dashboard分析場景

    最后,在復雜業務中,Dashboard還用于概覽場景,集中呈現業務分散的重點信息,用戶還可以通過提供的入口快速跳轉至相關???。

    \

    △  Dashboard概覽場景

    通常,Dashboard三大主要使用場景是相互配合使用的。例如,用戶通常先通過概覽Dashboard了解業務整體信息,觀察監控數據的情況,如需要進一步分析,用戶可以對數據進行多維度分析已獲取更多信息。

    在監控、分析和概覽主要場景中,總結提煉了Dashboard能為用戶帶來的直接價值主要如下幾點:

    • 監控告警,并引導用戶定位問題
    • 深入分析數據,獲知細節信息
    • 快速獲取業務整體重點信息,管理資源

    三. 目標用戶分析

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

    \

    △   用戶、場景和任務

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

    四. 選定Dashboard內容

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

    1. 明確主題

    Dashboard的主題是什么?即通過Dashboard,要幫助用戶完成什么事情。

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

    \

    △  電腦管家Dashboard小浮窗

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

    2. 選定和編輯內容

    • 選定內容

    內容選定時需要很好地區分真實、可付諸行動的信息和無效信息,這可以從以下三個方面進行考慮:

    • 緊扣主題

    內容緊扣主題,要很清楚Dashboard呈現的內容能幫助用戶完成什么事情。避免呈現的內容太多太雜,反而讓用戶不容易理解。當然,無可避免會呈現一些輔助內容,一種有效的處理方法就是將這些內容放在頁面底部,確保關鍵、有用的信息放在首屏。

    • 引導行動

    在考慮所呈現的內容時,不應該只片面考慮“用戶想要知道什么?”,而應該進一步考慮“如果用戶知道了這個信息,會用它來做什么?”。這能讓呈現的內容更為聚焦、實用,讓用戶抓住重點并采取行動。例如,在Dashboard實時監控資源健康狀態,用標紅的數字表示發生異常資源數,強烈引起用戶注意,并通過該數字跳轉至資源列表,篩選出異?;?。

    • 統一認知

    內容應符合用戶認知,易獲取且真實可信。如指標命名、數據統計規則等,要與行業標準保持一致。避免使用不易理解的標簽、定義或內容。

    \

    △  選定內容判斷條件

    需要注意的是,選定Dashboard內容時,不一定需要全部滿足上述提到的三個方面。但精確、符合用戶需求的內容,應該都是緊扣主題,又能引導用戶行動和符合用戶認知。

    • 編輯內容

    選定內容后,還需要從用戶角度做恰當的編輯處理,更直觀、精確地呈現符合用戶需求的內容。例如,財務人員制作每季度的報表,那么提供按“季度”呈現內容會更符合用戶需求,方便且高效。
    在編輯內容時,可以從內容的覆蓋范圍、時間跨度、粒度和個性定制等這些方面考慮,讓Dashboard的內容更為符合用戶需求。

    \

    △  內容編輯思考細則

    五. Dashboard內容結構

    在《Information Dashboard Design》一書中指出:“Dashboard內容必須合理組織,從而反映信息的本質和支持有效且有意義的監控;信息不能隨便放置,也不能只是根據剩余空間來設定大??;相互關聯的項目應該放置在臨近的位置;重要的項目版面要大一些,這樣才能比相對次要的信息更加突出;有特定順序的項目,要以一種視覺上被關注的順序排列?!?/span>

    合理的信息結構能夠幫助用戶高效閱讀,理解內容。所以,當Dashboard的內容選定后,就需要考慮如何將信息碎片有邏輯地組合在一起,合理呈現和布局,引導用戶理解全局。從更實用的角度來說,內容結構能夠成為用戶的導航機制,用戶知道該從哪里開始,接著該看什么。

    選擇使用什么結構視內容而定。依據經驗,Dashboard內容結構主要有三種類型:分類型、關聯型和流程型。

    分類型

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

    \

    △ Google Platform Dashboard

    關聯型

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

    \

    △ 騰訊云VPC網絡拓撲

    流程型

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

    \

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

    六. 功能特性

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

    鉆取

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

    篩選

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

    比較

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

    警報

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

    可定制

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

    導出

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

    保存

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

    總結

    本文開篇先陳述什么是Dashboard,其主要應用場景和用戶價值是什么。然后,再從用戶分析、內容、結構和功能等闡述設計Dashboard過程中需要著重考慮的。在《Dashboard設計思考》的下一篇,將分析如何設計清晰、簡潔的頁面,將前期分析整理的內容和功能更好的呈現給用戶???。即Dashboard集中呈現重要信息,便于用戶快速瀏覽獲知全局。

    甘肃11选5前三直选基本走势,甘肃11选5前三直选基本走势,宏思銳達


<
上一篇: 用超多案例,幫你避免交互設計中的「刻板印象 」 下一篇: iOS和Android規范解析——按鈕

聯系我們

一個新的需求,從這里開始?;隊钚幢碭窕蚍⑺禿獻饔始粒? [email protected] [email protected] 加微信: 13765801787

13765801787
在線留言