前言：

寫這篇文章的原因是最近在做一個(gè)數(shù)據(jù)產(chǎn)品的項(xiàng)目，為此查閱了很多資料，探索了很多方法，所以打算把數(shù)據(jù)設(shè)計(jì)的整個(gè)過(guò)程總結(jié)起來(lái)，形成一個(gè)完整的方法體系。

內(nèi)容導(dǎo)讀

一、儀表板的作用

二、設(shè)計(jì)前：需求分析

三、設(shè)計(jì)中：視覺(jué)與交互

四、設(shè)計(jì)后：可視化測(cè)試

數(shù)據(jù)可視化設(shè)計(jì)就是以數(shù)據(jù)表現(xiàn)的方式來(lái)幫助用戶規(guī)避風(fēng)險(xiǎn)并做出良好的業(yè)務(wù)決策。儀表盤則利用數(shù)據(jù)可視化的方式，將高度復(fù)雜的數(shù)據(jù)轉(zhuǎn)化為有助于解決用戶業(yè)務(wù)問(wèn)題的關(guān)鍵要素。

儀表盤需要滿足兩點(diǎn)要求：

1. 數(shù)據(jù)應(yīng)以最直觀的形式展示，用戶可以馬上采取行動(dòng)。

2. 用戶可以靈活操作，根據(jù)數(shù)據(jù)能夠預(yù)判接下來(lái)可能發(fā)生的事情。

因此不管用戶花費(fèi)時(shí)間是長(zhǎng)是短，都能在儀表板查看到客觀有效的信息。

01 儀表板的作用

1、儀表盤能促使用戶注意危險(xiǎn)信息并采取相應(yīng)的措施

2、儀表盤可以顯示數(shù)據(jù)類型、趨勢(shì)和異常數(shù)據(jù)。

3、儀表盤可以使用戶預(yù)測(cè)可能發(fā)生的事情。

4、儀表板可以把兩個(gè)不同的圖表連接在一起。

5、儀表盤可以分析數(shù)據(jù)的結(jié)構(gòu)和重要信息。

6、儀表盤可以追逐信息路徑、預(yù)測(cè)信息軌跡。

02 設(shè)計(jì)前：需求分析

 1. 確定目標(biāo)用戶 

不論什么設(shè)計(jì)，第一步都應(yīng)確定目標(biāo)用戶。在儀表板設(shè)計(jì)中，了解用戶最好的方法是映射用戶的查詢路徑，即用戶實(shí)現(xiàn)其目標(biāo)的所有需求的結(jié)構(gòu)化路徑?？梢酝ㄟ^(guò)確定用戶目標(biāo)和業(yè)務(wù)問(wèn)題來(lái)進(jìn)行規(guī)劃。

1）確定目標(biāo)：首先列出主要業(yè)務(wù)目標(biāo)。

如，查詢銷售業(yè)績(jī)等。

2）列出問(wèn)題：列出用戶可能會(huì)回答的所有問(wèn)題。

如：“本季度還有多少銷售業(yè)績(jī)未完成？”、“是否有足夠的渠道來(lái)達(dá)到業(yè)績(jī)？”。列出問(wèn)題后，將問(wèn)題按照不同的屬性進(jìn)行分類，如可以分為業(yè)績(jī)預(yù)測(cè)、團(tuán)隊(duì)績(jī)效、考核基準(zhǔn)等。

3）匯總信息：信息并不是越詳細(xì)越好。

詳細(xì)信息越多，儀表盤顯示就越亂。所以無(wú)需一次將全部信息顯示在儀表盤上。這里需要仔細(xì)考慮用戶真正重要的內(nèi)容，確保儀表板有效且易于使用。

4）定義指標(biāo)：選擇正確的指標(biāo)來(lái)確定用戶的業(yè)務(wù)狀況。

如，負(fù)責(zé)跟蹤團(tuán)隊(duì)業(yè)績(jī)的銷售經(jīng)理希望能夠跟蹤每個(gè)銷售的指標(biāo)，如銷售配額，贏利能力，交易規(guī)模等等。一旦發(fā)現(xiàn)數(shù)值異常，他們可以采取措施分配新的機(jī)會(huì)給代表，或者指導(dǎo)他們提升指標(biāo)。

5）優(yōu)先排序：最后確定這些指標(biāo)的優(yōu)先級(jí)。

優(yōu)先級(jí)排序可以幫助用戶建立數(shù)據(jù)的結(jié)構(gòu)框架和層次關(guān)系，從而避免過(guò)多的信息干擾用戶。

了解目標(biāo)用戶和用戶使用儀表盤的方式是一個(gè)好的開(kāi)始。通過(guò)了解什么對(duì)用戶重要、各項(xiàng)數(shù)據(jù)對(duì)用戶意味著什么以及數(shù)據(jù)如何影響用戶的決策可以獲得重要的背景信息。

在設(shè)計(jì)前，不妨先嘗試提出幾個(gè)關(guān)鍵問(wèn)題：

• 用戶需要顯示哪些信息？

• 用戶對(duì)什么感興趣？

• 用戶的痛點(diǎn)是什么？

• 用戶的目標(biāo)是什么？

這些問(wèn)題可以反映用戶的需求及目標(biāo)，從而帶來(lái)更好的儀表板體驗(yàn)。

 2. 定義儀表盤的用途 

儀表盤主要有兩種類型：操作儀表盤和分析儀表盤。選擇要構(gòu)建哪種儀表盤取決于需要解決的問(wèn)題類型，以及是否應(yīng)該幫助用戶理解和管理既定指標(biāo)、探索新的行動(dòng)方案。

操作儀表盤的目的是提供當(dāng)天信息的全面快照，可以對(duì)團(tuán)隊(duì)的預(yù)定目標(biāo)進(jìn)行跟蹤。

分析儀表盤是一種工具，可以幫助用戶分析多個(gè)變量中的大量歷史數(shù)據(jù)，從而研究趨勢(shì)、預(yù)測(cè)結(jié)果、洞察細(xì)節(jié)，幫助決策者了解公司關(guān)鍵指標(biāo)，以更好地制定未來(lái)的決策。

 3. 梳理信息層級(jí) 

對(duì)于一個(gè)完整的應(yīng)用系統(tǒng)，了解儀表板在系統(tǒng)視圖中的作用很重要，我們需要知道用戶在儀表板上可能做什么，常見(jiàn)的儀表盤組件有以下幾個(gè)：

• 導(dǎo)航或常用功能/頁(yè)面的快捷按鈕。

• 對(duì)于正在發(fā)生的事情的信息可視化（如指標(biāo)數(shù)據(jù)）。

• 所有需要用戶立即關(guān)注的內(nèi)容（如警報(bào)、系統(tǒng)更新、警告）。

設(shè)計(jì)專家 Lisa Battle在2016年的UXPA國(guó)際會(huì)議上發(fā)表了題為“為SaaS和企業(yè)應(yīng)用設(shè)計(jì)卓越的儀表盤”的演講，其中儀表盤可以包含10個(gè)元素：警報(bào)、待辦事項(xiàng)、統(tǒng)計(jì)信息、當(dāng)前狀態(tài)、搜索篩選器、任務(wù)操作、社交組件、活動(dòng)、公告和推送內(nèi)容。

記錄了儀表盤組件列表之后，需要與產(chǎn)品經(jīng)理等相關(guān)人員一起創(chuàng)建不同信息的層次關(guān)系。層級(jí)層級(jí)可以基于以下問(wèn)題構(gòu)建：

• 用戶最關(guān)心什么信息？

• 用戶希望執(zhí)行哪些操作？

• 假如有不同類型的用戶，他們的需求又如何呢？他們希望看到什么？

下面的圖表是信息層次結(jié)構(gòu)圖的一個(gè)例子，可以為后面繪制低保真線框圖奠定基礎(chǔ)。

03 設(shè)計(jì)中：視覺(jué)與交互

1. 交互設(shè)計(jì) 

1.1 線框、布局及數(shù)據(jù)可視化

當(dāng)充分理解了關(guān)鍵內(nèi)容之后，下一步就是處理布局，并開(kāi)始繪制線框圖。最具挑戰(zhàn)性的步驟莫過(guò)于從零開(kāi)始搭建框架了。

1）布局

儀表盤的布局可以像報(bào)紙或文章一樣，具有概要、內(nèi)容和結(jié)論。

概要：界面頂部顯示標(biāo)題，概要顯示最重要的信息并匯總儀表盤的主要內(nèi)容。

內(nèi)容：儀表板主體，通過(guò)可視化形式提供有關(guān)概要的更多詳細(xì)信息。

結(jié)論：頁(yè)面的最后部分是詳細(xì)信息和用于查找詳細(xì)信息的操作列表。

根據(jù)瀏覽順序儀表盤通常分為F布局、Z布局和并列布局。這些形式可以先讓用戶注意到摘要看板，然后再注意可視化數(shù)據(jù)，最后關(guān)注詳細(xì)的操作列表。

• F布局將概要放在左側(cè)中。隨后的詳情可視化數(shù)據(jù)位于右側(cè)，用于提供更多詳細(xì)信息。

• Z布局遵循自上而下的閱讀模式。概要信息位于界面頂部。相關(guān)的可視化數(shù)據(jù)位于概要下方，并占據(jù)了內(nèi)容區(qū)域的整個(gè)寬度。

• 并排布局用于比較兩項(xiàng)指標(biāo)。這種模式允許用戶從左到右掃描，反之亦然，方便比較信息。

版面形式多種多樣，有時(shí)很難說(shuō)清哪種版面更好。曾經(jīng)有學(xué)者提到過(guò)設(shè)計(jì)儀表盤的原則：只要瀏覽儀表盤一秒鐘，用戶就能很快地了解到一個(gè)正在發(fā)生的故事，用戶可以大致明白他們關(guān)注的事情?！鞍l(fā)生了什么事？自從最后一次登錄后有什么變化？我需要馬上處理一些事情嗎？要采取什么行動(dòng)嗎？”理論上，用戶不需要向下滾動(dòng)頁(yè)面就能得到這些問(wèn)題的答案。也就是說(shuō)，我們需要把最重要的信息放在儀表板的頂部。

當(dāng)用戶對(duì)系統(tǒng)有了良好的理解之后，他們可能會(huì)想要更深入地研究數(shù)據(jù)或者導(dǎo)航到產(chǎn)品的其他部分。這時(shí)候可以考慮一下提供給用戶其他更深層次的數(shù)據(jù)。

2）數(shù)據(jù)可視化

在回答“你的故事是什么？”之后，就需要找出如何講述故事了。這需要用到儀表盤的重要組成部分——圖表。下圖的圖表選擇器可以幫助決定哪個(gè)圖表更適合目前的數(shù)據(jù)。具體的圖表設(shè)計(jì)將在視覺(jué)設(shè)計(jì)部分說(shuō)明。

克利夫蘭的圖形感知級(jí)別可以幫助調(diào)整并選擇合適的圖形屬性，確保有效的傳達(dá)信息。

儀表盤設(shè)計(jì)的一個(gè)挑戰(zhàn)是信息超載。信息超載有兩種類型：數(shù)據(jù)超載和非數(shù)據(jù)超載。信息超載通常是由于缺乏重點(diǎn)和優(yōu)先次序所致。通常需求方想把大量數(shù)據(jù)集、功能或快捷操作放到儀表盤上，過(guò)量信息會(huì)使儀表盤變的很長(zhǎng)，這時(shí)候就需要設(shè)計(jì)師做好決策。假如發(fā)現(xiàn)信息太多可以重新回到上一步，重新梳理信息層次。

1.2 交互路徑與交互模式

1）交互路徑

高效的儀表盤結(jié)構(gòu)主要基于兩個(gè)因素：其一是良好的可視化能力；其二是在兩個(gè)故事之間導(dǎo)航的方式，即，交互路徑。

有的用戶旅程是線性的。

有的是分層的，其結(jié)構(gòu)更復(fù)雜，有許多分支和導(dǎo)航路徑。

通常儀表盤需要經(jīng)歷多個(gè)分支交互路徑和圖表交互。為了將信息分解為更易于管理的模塊，復(fù)雜的儀表板還會(huì)有過(guò)濾、縮放、突出顯示、導(dǎo)出值等交互。

2）交互模式

常見(jiàn)的交互模式有關(guān)鍵指標(biāo)下鉆模式、詳情說(shuō)明模式、多圖表構(gòu)成模式。

• 關(guān)鍵指標(biāo)下鉆模式：該模式通常為可單擊的圖形，如條形圖和環(huán)形圖。使用數(shù)據(jù)圖來(lái)驅(qū)動(dòng)關(guān)鍵指標(biāo)面板。單擊某個(gè)細(xì)分?jǐn)?shù)據(jù)可以顯示指標(biāo)的數(shù)據(jù)詳情。

• 說(shuō)明模式：此模式使用關(guān)鍵指標(biāo)面板來(lái)驅(qū)動(dòng)儀表盤，并通過(guò)數(shù)據(jù)圖表為關(guān)鍵指標(biāo)提供解釋說(shuō)明。常見(jiàn)說(shuō)明形式有指標(biāo)趨勢(shì)和指標(biāo)細(xì)分。

• 多圖表模式：此模式為一個(gè)圖表驅(qū)動(dòng)另一個(gè)圖表。用戶可以單擊某個(gè)細(xì)分?jǐn)?shù)據(jù)以查看另一個(gè)關(guān)聯(lián)數(shù)據(jù)圖。例如，點(diǎn)擊某個(gè)用戶群體（細(xì)分）查看用戶群體的瀏覽量（趨勢(shì)） 。

2. 視覺(jué)設(shè)計(jì) 

2.1 信息標(biāo)識(shí)

信息標(biāo)識(shí)是一種視覺(jué)提示，通過(guò)改變或新增界面中的某個(gè)元素，來(lái)引起用戶注意，告訴用戶該元素所代表的項(xiàng)目已經(jīng)發(fā)生了變化。用戶能根據(jù)標(biāo)識(shí)判斷某個(gè)指標(biāo)是好是壞，激發(fā)好奇心以查看詳細(xì)內(nèi)容。

信息標(biāo)識(shí)通常以圖標(biāo)的形式呈現(xiàn)，易于識(shí)別的圖標(biāo)是非常有效的反饋方式。字體樣式的變化也可以用作指示標(biāo)識(shí)，如改變字體的粗細(xì)、顏色等。動(dòng)效或其他功能（如，振動(dòng)）也可以吸引用戶，充當(dāng)指示標(biāo)識(shí)。

標(biāo)識(shí)一般有如下特征：與界面環(huán)境相關(guān)，它們總是與某個(gè)元素或內(nèi)容相關(guān)聯(lián)，并且顯示在相關(guān)元素附近；有條件的，它們并不總是存在，而是根據(jù)某種情況發(fā)生而變化；被動(dòng)的，它們一般不需要用戶操作，而是作為系統(tǒng)與用戶溝通的工具，提示用戶注意事項(xiàng)。

頻繁使用信息標(biāo)識(shí)會(huì)造成界面的混亂，并使用戶分心，因此，在界面中添加標(biāo)識(shí)需謹(jǐn)慎。決定是否適合時(shí)可以考慮以下問(wèn)題：這些信息用戶多久使用一次？用戶希望看到該信息嗎？如果沒(méi)有提供，用戶會(huì)錯(cuò)過(guò)什么嗎？用戶發(fā)現(xiàn)這些信息對(duì)系統(tǒng)很重要嗎？

2.2 圖表

要想講好故事，設(shè)計(jì)出能反應(yīng)重要信息的圖表是關(guān)鍵。用錯(cuò)了則會(huì)導(dǎo)致混淆，甚至導(dǎo)致基本數(shù)據(jù)表達(dá)錯(cuò)誤。

如果您曾經(jīng)設(shè)計(jì)過(guò)儀表板或從事過(guò)任何其他需要數(shù)據(jù)的項(xiàng)目，那么您就會(huì)知道這是一項(xiàng)特別復(fù)雜的任務(wù)。下面將會(huì)列出一些選擇正確的圖表類型的簡(jiǎn)單方法，以及常見(jiàn)的圖表設(shè)計(jì)的最佳實(shí)踐。

1）如何選擇正確的圖表類型

選擇正確的圖表類型取決于顯示的數(shù)據(jù)類型。圖表通常分為四種類型：構(gòu)成、對(duì)比、關(guān)系或分布。選擇哪種類型取決于：是否要顯示某件事的組成部分？是否要比較值或顯示一段時(shí)間內(nèi)的差異？是否想更好地理解兩個(gè)或多個(gè)變量之間的關(guān)系？是否要顯示數(shù)據(jù)的分布？

根據(jù)顯示的內(nèi)容，可以分為以下類型：

2）餅圖和環(huán)形圖

餅圖或環(huán)形圖是常用的圖表之一。它們用來(lái)顯示整體的某一部分，并且用百分比表示，所有部分之和等于100%。使用餅圖最好的一種情況就是，用戶必須回答“是”或“否”時(shí)。

餅圖設(shè)計(jì)應(yīng)遵循的原則：

• 如果類別太多，切勿使用餅形圖，切片太薄將無(wú)法經(jīng)行比較。將標(biāo)簽控制在8個(gè)之內(nèi)比較合適。

• 類別的值太相似時(shí)不要使用餅圖。在這種情況下，條形圖是更好的選擇。

• 如果值的總和不等于100％，不要使用餅圖。餅圖細(xì)分的總和必須等于100％。

• 切片應(yīng)由大到小順時(shí)針展示，方便比較。

3）柱狀圖和條形圖

柱狀圖和條形圖是比較不同數(shù)值、顯示數(shù)值隨時(shí)間變化的最簡(jiǎn)單直接的方法。柱狀圖為垂直條形，條形圖為水平條形。

柱狀圖有三種類型：基礎(chǔ)柱狀圖、分組柱狀圖和堆疊柱狀圖。如果要了解圖表中每個(gè)類別的數(shù)量、比率和頻率，應(yīng)選擇基礎(chǔ)柱狀圖；要比較各個(gè)類別的數(shù)據(jù)，應(yīng)選擇分組柱狀圖；如果要顯示每個(gè)類別之間的部分與整體的關(guān)系，應(yīng)選擇堆疊柱狀圖。

柱狀圖設(shè)計(jì)應(yīng)遵循的原則：

• y軸應(yīng)從0開(kāi)始，客觀反映圖表中的值。

• 標(biāo)簽較長(zhǎng)時(shí)，請(qǐng)使用條形圖。

• 除了日期外，其他類別最好由多到少按順序排序。

• 在使用堆疊柱狀圖時(shí)，應(yīng)使用不同色調(diào)的顏色，以提高閱讀的清晰度。

4）折線圖

折線圖顯示了一段時(shí)間內(nèi)數(shù)據(jù)變化趨勢(shì)。圖形的y軸代表一個(gè)變量值，x軸通常為時(shí)間軸。

折線圖設(shè)計(jì)應(yīng)遵循的原則：

• 避免比較過(guò)多數(shù)據(jù)，超過(guò)8個(gè)時(shí)，其他數(shù)據(jù)可默認(rèn)置灰，通過(guò)圖例交互進(jìn)行查看。

• 不要使用色調(diào)相近的顏色，應(yīng)使用對(duì)比度強(qiáng)的顏色。

• 如果不是對(duì)比時(shí)間的話，不要使用折線圖。在這種情況下請(qǐng)選擇柱狀圖。

5）面積圖

面積圖與折線圖相似，但存在細(xì)微差異。它們都可以顯示時(shí)間變化的總體趨勢(shì)以及整個(gè)數(shù)據(jù)集的連續(xù)性。雖然面積圖與折線圖的功能相同，但是線和軸之間的空隙可以用來(lái)表示面積。

面積圖共有三種類型：基礎(chǔ)面積圖，重疊面積圖和堆積面積圖。比較各組之間的值時(shí)，可以使用重疊面積圖。跟蹤合計(jì)值并且想要了解按組劃分的合計(jì)明細(xì)時(shí)使用堆積面積圖。面積圖能對(duì)比每一段線的高度，可以讓我們對(duì)每個(gè)子集與其它子集的總貢獻(xiàn)有一個(gè)大概的了解。

面積圖設(shè)計(jì)應(yīng)遵循的原則：

• 使用重疊的面積圖時(shí)，請(qǐng)使用帶透明度的顏色，否則信息會(huì)含糊不清。

• 類別過(guò)多時(shí)，避免使用面積圖。在這種情況下，請(qǐng)使用折線圖。

6）小結(jié)

使用餅圖、堆疊柱狀圖或堆積面積圖來(lái)呈現(xiàn)整體與部分的關(guān)系。

使用基礎(chǔ)柱狀圖或分組柱狀圖來(lái)比較不同值的變化差異。

使用折線圖可以顯示一段時(shí)間內(nèi)數(shù)據(jù)的變化趨勢(shì)或數(shù)據(jù)的連續(xù)性。

需要表示體積時(shí)，請(qǐng)使用面積圖而不是折線圖。

2.3 顏色

顏色是一種信息的表現(xiàn)方式。由于儀表板通常需要大量數(shù)據(jù)，因此會(huì)需要多種顏色。在儀表盤中使用適當(dāng)?shù)念伾兄谟脩糇⒁獾骄瘓?bào)并采取所需的措施。但是，使用過(guò)多顏色會(huì)破壞數(shù)據(jù)與顏色之間的關(guān)系。5個(gè)以內(nèi)的顏色最合適，最多不要超過(guò)8個(gè)。不同顏色有不同顏色的特定含義，紅色表示危險(xiǎn)，綠色表示良好，等等。在定義圖表的調(diào)色板時(shí)，必須考慮到這一點(diǎn)。

設(shè)計(jì)顏色信息時(shí)，可以考慮以下幾點(diǎn):

• 信息的價(jià)值是否與用戶對(duì)顏色的理解相符？

• 哪些信息最需要用戶關(guān)注？信息的顏色是否傳達(dá)了這種緊迫性？

• 在設(shè)計(jì)時(shí)是否使用了適當(dāng)?shù)纳嗷蝾伾珡?qiáng)度？

• 信息涉及正面信息還是**？與用戶對(duì)顏色的理解是否相符？

• 顏色是否能幫助用戶有效經(jīng)行數(shù)據(jù)比較？

04 設(shè)計(jì)后：可視化測(cè)試

在測(cè)試可視化時(shí)，需要檢查以下內(nèi)容：

• 能理解：可視化傳達(dá)了我們想要傳達(dá)的功能

• 可解釋：用戶可以將可視化與正在測(cè)試的潛在現(xiàn)象相關(guān)聯(lián)

• 能影響：用戶可以得出結(jié)論，并且可以感受到它帶來(lái)的情感傾向。

• 可操作：用戶可以根據(jù)需求進(jìn)行合理操作。

向用戶提問(wèn)以下五個(gè)問(wèn)題，能有效驗(yàn)證儀表盤的可用性：

 1. 您在這里看到了什么？

要想使某件東西易用，就要進(jìn)行優(yōu)化以減少認(rèn)知負(fù)擔(dān)。將復(fù)雜的數(shù)據(jù)簡(jiǎn)單呈現(xiàn)是數(shù)據(jù)可視化的基礎(chǔ)。

可以從 “您在這里看到了什么？”之類的開(kāi)放性問(wèn)題開(kāi)始詢問(wèn)，不要給用戶任何提示，看用戶如何回應(yīng)。這可以說(shuō)明吸引用戶注意的是什么，以及他們是否能自己得出的結(jié)論。

• 好的情況：他們迅速按優(yōu)先順序說(shuō)出預(yù)期的結(jié)論。

• 壞的情況：他們分心于細(xì)節(jié)，說(shuō)出假想、矛盾的答案（如“瀏覽量是200，是今天還是本周？它是綠色的，所以這個(gè)數(shù)據(jù)是好的嗎？”）

提示：如果測(cè)試者只是復(fù)述他們?cè)诮缑嫔峡吹降膬?nèi)容，例如“我看到一張藍(lán)色圖表，上面寫著今天的瀏覽量，然后是綠色圖表，上面寫著訪客數(shù)，顏色挺好看的”。那么我們需要換一種方式提問(wèn)，例如“此界面試圖告訴您什么？”

2. 最好的值是什么？最差的值是什么？

可視化的重點(diǎn)是利用可視化比較數(shù)值。所以需要向測(cè)試者詢問(wèn)有關(guān)數(shù)據(jù)的問(wèn)題。較可靠的一種方式是請(qǐng)他們確定極端情況。（例如“什么時(shí)候銷售額最高？什么時(shí)候最低？”）

您也可以考慮根據(jù)價(jià)值判斷（例如“最佳，最差”，而不是“最大，最小”）來(lái)表述，以確保他們能夠區(qū)分?jǐn)?shù)量并得出適當(dāng)?shù)慕Y(jié)論。需要注意的是，“好”不一定是所呈現(xiàn)的最高值（例如血糖數(shù)）。

• 好的情況：他們應(yīng)該能夠迅速回答這些問(wèn)題。可以允許有歧義的數(shù)據(jù)，但將測(cè)試者必須能將數(shù)量與標(biāo)簽相關(guān)聯(lián)。

• 壞的情況：歪頭看、用手指追蹤數(shù)據(jù)。

 3. 是什么導(dǎo)致數(shù)據(jù)變成這樣？現(xiàn)實(shí)生活中發(fā)生了什么，影響了您看到的數(shù)字？

數(shù)據(jù)可視化本質(zhì)上是抽象的。所以會(huì)面臨過(guò)于抽象的風(fēng)險(xiǎn)。這使用戶很難將數(shù)據(jù)與現(xiàn)實(shí)生活中可能遇到的事情聯(lián)系起來(lái)，最終限制了數(shù)據(jù)的含義。

通過(guò)要求人們對(duì)潛在現(xiàn)象進(jìn)行解釋，可以確定他們將數(shù)據(jù)與自己的生活聯(lián)系起來(lái)的難易程度。這可以表明是否需要通過(guò)添加上下文來(lái)簡(jiǎn)化、分解或補(bǔ)充可視化內(nèi)容。

• 好的情況：測(cè)試將數(shù)據(jù)與個(gè)人經(jīng)歷聯(lián)系起來(lái)，可以提供合理的解釋（例如“本周可能對(duì)T恤的銷售不利，因?yàn)楝F(xiàn)在是12月”），至少測(cè)試者應(yīng)通過(guò)其他數(shù)據(jù)來(lái)解釋信息（例如，點(diǎn)擊餅圖的某個(gè)切片來(lái)分解數(shù)據(jù)）。

• 壞的情況：無(wú)答案，答案模棱兩可，沒(méi)有試著四處尋找上下文線索。

 4. 總體而言，這是好事還是壞事？

好的儀表盤，不僅要在理性上說(shuō)服用戶，還應(yīng)在情感上得到用戶的共鳴。所以，可視化不僅要強(qiáng)調(diào)“這是現(xiàn)在的狀況”還應(yīng)表現(xiàn)出“現(xiàn)在的狀況很好還是很糟”。

要驗(yàn)證這一點(diǎn)，只需讓測(cè)試者自己判斷即可。（例如“您認(rèn)為這是好事還是壞事？”）

• 好的情況：至少測(cè)試者應(yīng)該能夠識(shí)別“正負(fù)情感傾向”，并說(shuō)出數(shù)據(jù)呈現(xiàn)的是好是壞。理想情況下，他們可以說(shuō)出數(shù)值差異的大小。

• 壞的情況：猶豫、差錯(cuò)、冷漠。

 5. 下一周/月/年，您有什么不同的方法來(lái)改變這些數(shù)據(jù)？這些信息將如何影響您？

測(cè)試“可操作性”的原因有兩個(gè)：

1. 要確?？梢暬梢詭椭脩舫浞掷斫鈹?shù)據(jù)，并知其將來(lái)的操作。這是用戶采取行動(dòng)的前提。

2. 還要確保數(shù)據(jù)不是無(wú)用的。如果數(shù)據(jù)無(wú)法告知某些決策或行為，則可能無(wú)需可視化。

首先，確定幾種情況，在給定A、B和C的情況下，有足夠知識(shí)的人會(huì)告訴你做X、Y、Z。（例如“溫度計(jì)顯示0度需要穿外套”；“體溫計(jì)40度要去醫(yī)院）。

其次，請(qǐng)確保測(cè)試者具有一定的專業(yè)知識(shí)，這一點(diǎn)很重要。即使是客觀有效的可視化，對(duì)于那些在專業(yè)領(lǐng)域沒(méi)有經(jīng)驗(yàn)的用戶來(lái)說(shuō)也是行不通的（例如，交易圖對(duì)我來(lái)說(shuō)毫無(wú)意義，但這并不意味著它們對(duì)交易者無(wú)用）。因此，請(qǐng)確保您正在與知道如何處理信息的人員進(jìn)行測(cè)試。

一旦有了場(chǎng)景并合理地通知了測(cè)試者，就可以按照可視化表示的方式逐步引導(dǎo)測(cè)試人員完成每個(gè)場(chǎng)景，并詢問(wèn)他們將要做什么。他們的回答可能有所不同，但是每個(gè)回答都應(yīng)表明測(cè)試者是否想要采取行動(dòng)。

• 好的情況：測(cè)試者可以將想要呈現(xiàn)的場(chǎng)景轉(zhuǎn)換為特定的操作過(guò)程。

• 壞的情況：“我不知道” 。這可能表明 ：a）此人不是專家；b）所提供的數(shù)據(jù)不足以使他采取行動(dòng)；c）數(shù)據(jù)對(duì)下一步行動(dòng)產(chǎn)生不了任何影響。c是需要提防的情況。

設(shè)計(jì)是迭代的，數(shù)據(jù)設(shè)計(jì)也不例外。向幾個(gè)測(cè)試用戶詢問(wèn)這五個(gè)問(wèn)題，不斷改善可視化效果，打造真正有效的儀表板設(shè)計(jì)。

參考文章

https://uxplanet.org/data-heavy-applications-how-to-design-perfect-charts-c0c893fef6de

https://uxdesign.cc/https-medium-com-yifei-liu-lets-talk-about-dashboard-design-c63cd1a45b3f

https://medium.com/nightingale/ux-in-interactive-dashboard-design-73af3d6dbaae

https://uxdesign.cc/crucial-questions-for-user-testing-data-visualizations-297413f7d6ab

https://uxdesign.cc/how-to-make-sure-your-audience-understands-your-visualization-90293bd0d1a9

https://medium.com/salesforce-ux/transforming-data-to-insights-773d25acd53f

https://medium.com/salesforce-ux/designing-for-efficient-b2b-data-visualization-b08548495443

感謝閱讀

-END-