-
如何設(shè)計(jì)內(nèi)容精確、體驗(yàn)友好的DASHBOARD?(上篇)
/2017-06-22 15:52:07/
-
在企業(yè)類應(yīng)用服務(wù)(SaaS)、檢測工具(手機(jī)安全助手)、量化自我工具(智能手環(huán))等后臺管理系統(tǒng)中,使用Dashboard可以幫助用戶監(jiān)控和分析數(shù)據(jù),快速獲取重要信息。但如果對Dashboard設(shè)計(jì)缺乏認(rèn)知,就很可能會造成Dashboard呈現(xiàn)的信息雜亂,充斥著無關(guān)緊要的指標(biāo)、文本信息及各種半成品的圖表等,讓用戶抓不到重點(diǎn)。
那么,設(shè)計(jì)師該如何設(shè)計(jì)內(nèi)容精確、體驗(yàn)友好的Dashboard以滿足用戶需求呢?文章將從以下幾個(gè)方面思考:
- Dashboard是什么?
- 主要場景是什么?能為用戶帶來什么價(jià)值?
- 目標(biāo)用戶分析
- 選定Dashboard內(nèi)容
- Dashboard內(nèi)容結(jié)構(gòu)
- 功能特性
- 信息設(shè)計(jì)
一. Dashboard是什么?
在了解Dashboard之前,可以先了解下汽車儀表盤和報(bào)表。
Dashboard的中文翻譯是“儀表盤”,與汽車的儀表盤相同——一種反映車輛各系統(tǒng)工作狀況的裝置,有車速里程表、轉(zhuǎn)速表、燃油表等。同時(shí),還會有各式各樣的指示燈或警報(bào)燈,例如冷卻液液面警報(bào)燈、燃油量指示燈、充電指示燈等。司機(jī)可以很方便地從汽車儀表盤中獲得汽車整體狀況。而對于報(bào)表,簡單的說就是用表格、圖表等格式來顯示匯總數(shù)據(jù)。同時(shí),因?yàn)槌S糜诙ㄆ趨R報(bào)場景(如每月賬本匯總),報(bào)表也要考慮紙質(zhì)打印的限制。
△ 汽車儀表盤(左)和報(bào)表(右)
而Dashboard沿襲了汽車儀表盤理念,在一個(gè)屏幕上有預(yù)設(shè)性地顯示對用戶關(guān)鍵的信息,并實(shí)時(shí)告知用戶正在發(fā)生的情況。同時(shí),Dashboard進(jìn)一步結(jié)合計(jì)算機(jī)互動的功能顯示和傳輸信息,突破了報(bào)表要考慮紙面打印輸出的限制。在Dashboard頁面中,用戶不僅可以直接對數(shù)據(jù)和圖表進(jìn)行分析,還可以通過控件來控制數(shù)據(jù)的顯示、計(jì)算、過濾和分組等等。
在Stephen Few的《Information Dashboard Design》一書中指出:Dashboard對重要信息做視覺呈現(xiàn),這些重要信息是為了達(dá)成一個(gè)或者多個(gè)目標(biāo)而被統(tǒng)一組織在一屏內(nèi),以便能夠一眼就得到監(jiān)控。
二. 主要場景是什么?能為用戶帶來什么價(jià)值?
Dashboard一般通過重要內(nèi)容和核心數(shù)據(jù)來告知用戶:“業(yè)務(wù)整體狀況如何?有哪些關(guān)鍵指標(biāo)?各指標(biāo)的運(yùn)行情況分別如何?哪些指標(biāo)出現(xiàn)異常?需要用戶做些什么?”。由此可知,Dashboard主要應(yīng)用于監(jiān)控、分析和概覽三大場景。
△ Dashboard三大主要使用場景
首先,在監(jiān)控場景中,Dashboard主要為用戶集中提供便捷的關(guān)鍵指標(biāo)實(shí)時(shí)監(jiān)測,及時(shí)告知異常狀態(tài),并引導(dǎo)用戶定位問題。
△ Dashboard監(jiān)控場景
其次,在分析場景中,Dashboard主要通過數(shù)據(jù)圖表,配合控件進(jìn)行不同維度的數(shù)據(jù)分析。例如,用戶可以通過時(shí)間篩選控件過濾圖表上的數(shù)據(jù)范圍等。
△ Dashboard分析場景
最后,在復(fù)雜業(yè)務(wù)中,Dashboard還用于概覽場景,集中呈現(xiàn)業(yè)務(wù)分散的重點(diǎn)信息,用戶還可以通過提供的入口快速跳轉(zhuǎn)至相關(guān)模塊。
△ Dashboard概覽場景
通常,Dashboard三大主要使用場景是相互配合使用的。例如,用戶通常先通過概覽Dashboard了解業(yè)務(wù)整體信息,觀察監(jiān)控?cái)?shù)據(jù)的情況,如需要進(jìn)一步分析,用戶可以對數(shù)據(jù)進(jìn)行多維度分析已獲取更多信息。
在監(jiān)控、分析和概覽主要場景中,總結(jié)提煉了Dashboard能為用戶帶來的直接價(jià)值主要如下幾點(diǎn):
- 監(jiān)控告警,并引導(dǎo)用戶定位問題
- 深入分析數(shù)據(jù),獲知細(xì)節(jié)信息
- 快速獲取業(yè)務(wù)整體重點(diǎn)信息,管理資源
三. 目標(biāo)用戶分析
在對Dashboard有基礎(chǔ)了解后并開始設(shè)計(jì)Dashboard,首先需要清楚:Dashboard的目標(biāo)用戶是誰?他們在什么環(huán)境中會使用到Dashboard?做什么事情等?考慮這些問題,有助于確定Dashboard的大致輪廓。例如,在分析用戶時(shí)獲知運(yùn)維人員在工作時(shí)間需要監(jiān)視機(jī)器健康狀況,設(shè)計(jì)時(shí)可考慮在Dashboard中呈現(xiàn)正常、異常機(jī)器數(shù),并引導(dǎo)用戶定位到出現(xiàn)異常的機(jī)器,排查問題。
在做目標(biāo)用戶分析時(shí),可以從用戶、場景和任務(wù)這三方面考慮,以了解用戶特點(diǎn)和目標(biāo)等相關(guān)信息。△ 用戶、場景和任務(wù)
如上圖,了解用戶對數(shù)據(jù)和行業(yè)的熟悉程度等,可以輔助判斷提供與用戶水平相匹配的數(shù)據(jù)分析能力。同時(shí),也可以從中判斷是否需要嵌入內(nèi)容注釋和輔助信息等,幫助用戶理解。而在場景和任務(wù)中,用戶行為本身就受場景影響,設(shè)計(jì)Dashboard時(shí)要考慮不同場景下具體任務(wù)的合理性和重要程度,在后續(xù)處理內(nèi)容時(shí)輔助判斷優(yōu)先級。
四. 選定Dashboard內(nèi)容
對目標(biāo)用戶、場景和任務(wù)進(jìn)行分析后,接著需要考慮在Dashboard中呈現(xiàn)什么內(nèi)容幫助用戶完成不同場景下的任務(wù)。在選定內(nèi)容前,首先需要明確Dashboard的主題是什么?然后,再圍繞主題,考慮該呈現(xiàn)哪些內(nèi)容?
1. 明確主題
Dashboard的主題是什么?即通過Dashboard,要幫助用戶完成什么事情。
明確Dashboard的主題時(shí),需要充分考慮目標(biāo)用戶的需求。例如,運(yùn)維人員需要Dashboard能夠幫助他“高效、精確地發(fā)現(xiàn)、定位問題,確保業(yè)務(wù)正常運(yùn)行”,而財(cái)務(wù)人員則需要在Dashboard了解到“賬戶各個(gè)季度收支情況”等。明確主題后,選定內(nèi)容時(shí)就可以緊緊圍繞主題,考慮呈現(xiàn)能夠幫助用戶的信息,規(guī)避雜亂、無效的數(shù)據(jù)。
△ 電腦管家Dashboard小浮窗
如上圖所示,騰訊電腦管家Dashboard小浮窗的主題——幫助用戶實(shí)時(shí)監(jiān)控機(jī)器使用情況。為此,在小浮窗中呈現(xiàn)CPU、內(nèi)存和流量關(guān)鍵指標(biāo)實(shí)時(shí)數(shù)據(jù)。同時(shí),也提供了各指標(biāo)資源占用較高應(yīng)用的實(shí)時(shí)數(shù)值監(jiān)測,讓用戶獲知更多詳細(xì)數(shù)據(jù)。
2. 選定和編輯內(nèi)容
- 選定內(nèi)容
內(nèi)容選定時(shí)需要很好地區(qū)分真實(shí)、可付諸行動的信息和無效信息,這可以從以下三個(gè)方面進(jìn)行考慮:
- 緊扣主題
內(nèi)容緊扣主題,要很清楚Dashboard呈現(xiàn)的內(nèi)容能幫助用戶完成什么事情。避免呈現(xiàn)的內(nèi)容太多太雜,反而讓用戶不容易理解。當(dāng)然,無可避免會呈現(xiàn)一些輔助內(nèi)容,一種有效的處理方法就是將這些內(nèi)容放在頁面底部,確保關(guān)鍵、有用的信息放在首屏。
- 引導(dǎo)行動
在考慮所呈現(xiàn)的內(nèi)容時(shí),不應(yīng)該只片面考慮“用戶想要知道什么?”,而應(yīng)該進(jìn)一步考慮“如果用戶知道了這個(gè)信息,會用它來做什么?”。這能讓呈現(xiàn)的內(nèi)容更為聚焦、實(shí)用,讓用戶抓住重點(diǎn)并采取行動。例如,在Dashboard實(shí)時(shí)監(jiān)控資源健康狀態(tài),用標(biāo)紅的數(shù)字表示發(fā)生異常資源數(shù),強(qiáng)烈引起用戶注意,并通過該數(shù)字跳轉(zhuǎn)至資源列表,篩選出異常機(jī)器。
- 統(tǒng)一認(rèn)知
內(nèi)容應(yīng)符合用戶認(rèn)知,易獲取且真實(shí)可信。如指標(biāo)命名、數(shù)據(jù)統(tǒng)計(jì)規(guī)則等,要與行業(yè)標(biāo)準(zhǔn)保持一致。避免使用不易理解的標(biāo)簽、定義或內(nèi)容。
△ 選定內(nèi)容判斷條件
需要注意的是,選定Dashboard內(nèi)容時(shí),不一定需要全部滿足上述提到的三個(gè)方面。但精確、符合用戶需求的內(nèi)容,應(yīng)該都是緊扣主題,又能引導(dǎo)用戶行動和符合用戶認(rèn)知。
- 編輯內(nèi)容
選定內(nèi)容后,還需要從用戶角度做恰當(dāng)?shù)木庉嬏幚恚庇^、精確地呈現(xiàn)符合用戶需求的內(nèi)容。例如,財(cái)務(wù)人員制作每季度的報(bào)表,那么提供按“季度”呈現(xiàn)內(nèi)容會更符合用戶需求,方便且高效。
在編輯內(nèi)容時(shí),可以從內(nèi)容的覆蓋范圍、時(shí)間跨度、粒度和個(gè)性定制等這些方面考慮,讓Dashboard的內(nèi)容更為符合用戶需求。△ 內(nèi)容編輯思考細(xì)則
五. Dashboard內(nèi)容結(jié)構(gòu)
在《Information Dashboard Design》一書中指出:“Dashboard內(nèi)容必須合理組織,從而反映信息的本質(zhì)和支持有效且有意義的監(jiān)控;信息不能隨便放置,也不能只是根據(jù)剩余空間來設(shè)定大小;相互關(guān)聯(lián)的項(xiàng)目應(yīng)該放置在臨近的位置;重要的項(xiàng)目版面要大一些,這樣才能比相對次要的信息更加突出;有特定順序的項(xiàng)目,要以一種視覺上被關(guān)注的順序排列。”
合理的信息結(jié)構(gòu)能夠幫助用戶高效閱讀,理解內(nèi)容。所以,當(dāng)Dashboard的內(nèi)容選定后,就需要考慮如何將信息碎片有邏輯地組合在一起,合理呈現(xiàn)和布局,引導(dǎo)用戶理解全局。從更實(shí)用的角度來說,內(nèi)容結(jié)構(gòu)能夠成為用戶的導(dǎo)航機(jī)制,用戶知道該從哪里開始,接著該看什么。
選擇使用什么結(jié)構(gòu)視內(nèi)容而定。依據(jù)經(jīng)驗(yàn),Dashboard內(nèi)容結(jié)構(gòu)主要有三種類型:分類型、關(guān)聯(lián)型和流程型。
分類型
即將有相關(guān)聯(lián)的內(nèi)容進(jìn)行分組呈現(xiàn),讓Dashboard內(nèi)容歸類而不雜亂無章。如 Google Cloud Platform 的Dashboard頁面,將內(nèi)容按卡片分為Project info、Billing、Documentation等。同時(shí),卡片與卡片之間也進(jìn)行了分組,左邊是資源信息,中間是指標(biāo)監(jiān)控,右邊是文檔幫助。
△ Google Platform Dashboard
關(guān)聯(lián)型
內(nèi)容相互之間具有一定的邏輯關(guān)系,如地理位置關(guān)系、數(shù)字包含關(guān)系、對象父子關(guān)系等,這種結(jié)構(gòu)可以讓對象之間的邏輯關(guān)系十分直觀。如騰訊云VPC網(wǎng)絡(luò)拓?fù)洌瑢①Y源對象的位置和關(guān)系抽象表示,很直觀的呈現(xiàn)了資源對象之間的相互關(guān)系。
△ 騰訊云VPC網(wǎng)絡(luò)拓?fù)?/span>
流程型
流程型結(jié)構(gòu)的內(nèi)容一般會出現(xiàn)多個(gè)環(huán)節(jié),每個(gè)環(huán)節(jié)之間都會有相應(yīng)的內(nèi)容,按照一定的流程逐步細(xì)化,深入引導(dǎo)用戶閱讀。符合這種結(jié)構(gòu),如市場銷售各環(huán)節(jié)流程,像這種垂直的流程型內(nèi)容結(jié)構(gòu),很容易讓用戶清楚每個(gè)環(huán)節(jié)的數(shù)據(jù)變動,定位哪個(gè)環(huán)節(jié)出了問題。這種結(jié)構(gòu)有個(gè)較為典型的統(tǒng)計(jì)模型是:漏斗。
△ UV轉(zhuǎn)化率分析(圖片來源:Echarts)
六. 功能特性
適當(dāng)考慮為Dashboard提供一些常用功能特性,能夠讓整個(gè)頁面擁有較為出色的用戶控制和友好的體驗(yàn)。
鉆取
鉆取是改變維的層次,變換分析粒度,提供用戶駕馭Dashboard內(nèi)不同層次的內(nèi)容。它包括向上鉆取(roll up)和向下鉆取(drill down)。roll up是在某一維上將低層次的細(xì)節(jié)數(shù)據(jù)概括到高層次的匯總數(shù)據(jù),或者減少維數(shù)。而drill down則相反,它從匯總數(shù)據(jù)深入到細(xì)節(jié)數(shù)據(jù)進(jìn)行觀察或增加新維。
篩選
允講用戶根據(jù)需要篩選Dashboard數(shù)據(jù)的范圍,可以是全局性的 (在整個(gè)概覽頁范圍內(nèi)選擇),也可以是局部的(在特定圖表或是規(guī)定范圍內(nèi)選擇)。特別涉及到時(shí)間的篩選,可以從記錄歷史(回溯過往數(shù)據(jù)趨勢)、快照(顯示單點(diǎn)數(shù)據(jù))、實(shí)時(shí)(監(jiān)控新進(jìn)活動)和預(yù)測(預(yù)估未來走向)等這些更細(xì)粒度角度考慮數(shù)值呈現(xiàn),讓用戶獲取精確數(shù)據(jù)。
比較
指標(biāo)數(shù)值的對比,能夠并列比較兩個(gè)或多個(gè)數(shù)據(jù)集。例如折線圖、面積圖等能提供數(shù)據(jù)集對比功能。
警報(bào)
根據(jù)預(yù)設(shè)的條件高亮顯示,當(dāng)指標(biāo)超出特定界限時(shí)就觸發(fā)報(bào)警。
可定制
允許用戶根據(jù)需求定制不同的內(nèi)容。
導(dǎo)出
為用戶提供Dashboard中導(dǎo)出數(shù)據(jù)的功能。
保存
當(dāng)用戶定制的情況越來越多時(shí), 提供保存定制的功能就越發(fā)顯得重要。
總結(jié)
本文開篇先陳述什么是Dashboard,其主要應(yīng)用場景和用戶價(jià)值是什么。然后,再從用戶分析、內(nèi)容、結(jié)構(gòu)和功能等闡述設(shè)計(jì)Dashboard過程中需要著重考慮的。在《Dashboard設(shè)計(jì)思考》的下一篇,將分析如何設(shè)計(jì)清晰、簡潔的頁面,將前期分析整理的內(nèi)容和功能更好的呈現(xiàn)給用戶。控。即Dashboard集中呈現(xiàn)重要信息,便于用戶快速瀏覽獲知全局。
貴陽網(wǎng)站建設(shè),貴陽APP開發(fā),宏思銳達(dá)
- 開發(fā)平臺
- 微信公眾號開發(fā)
- IOS 開發(fā)
- 安卓開發(fā)
- 網(wǎng)站建設(shè)
- 熱門文章
- 1.如何讓 Xcode 在讀寫上提速100倍?
- 2.AIRBNB 用這個(gè)流程,大幅提高了開發(fā)和設(shè)計(jì)的協(xié)作效率
- 3.如何設(shè)計(jì)內(nèi)容精確、體驗(yàn)友好的DASHBOARD?(上篇)
- 4.餐飲革命:星廚餐幫與宏思銳達(dá)達(dá)成數(shù)字化產(chǎn)品開發(fā)戰(zhàn)略合作
- 5.拼必達(dá)-貴州第一個(gè)智慧同城配送平臺(宏思銳達(dá)研發(fā))
- 推薦文章
- 1.可能是最全面的組件化開發(fā)與設(shè)計(jì)指南
- 2.一個(gè)APP界面設(shè)計(jì)完整流程詳解
- 3.設(shè)計(jì)思考:當(dāng)項(xiàng)目中遇到技術(shù)限制,設(shè)計(jì)該如何彌補(bǔ)?
- 4.設(shè)計(jì)師如何打造雙11網(wǎng)紅爆款?揭秘天貓精靈的全鏈路營銷設(shè)
- 5.深度剖析APP開發(fā)價(jià)格為什么這么貴?
- 最新標(biāo)簽
- APP開發(fā)