數(shù)據(jù)可視化的驅(qū)動(dòng)與使能

2 評(píng)論 6349 瀏覽 17 收藏 11 分鐘

編輯導(dǎo)讀:在開車的時(shí)候,輕輕轉(zhuǎn)動(dòng)方向盤就能讓汽車走向正確的道路。這種“指哪打哪”是人對(duì)車的輸入控制以及車對(duì)人的輸出反饋,是一個(gè)互相修正的過程。在數(shù)據(jù)可視化設(shè)計(jì)中,操作“聽從驅(qū)使”的可視化作品又是一種什么樣的體驗(yàn)?zāi)兀恳黄饋砜匆幌掳伞?/p>

一、老司機(jī)開車

開車的同學(xué)知道,一般我們用“指哪打哪”來形容汽車轉(zhuǎn)向精準(zhǔn)、沒有虛位?!爸改拇蚰摹笔侵钙嚨牟倏伢w驗(yàn),更是駕駛樂趣的一部分。駕駛員輕撥動(dòng)方向盤,輪胎轉(zhuǎn)向帶來的阻力以及路面反饋傳至車身,動(dòng)力的線性輸入與制動(dòng)的時(shí)實(shí)響應(yīng)讓駕駛員能控制自如。

“指哪打哪”形容車聽從驅(qū)使,是人對(duì)車的輸入控制以及車對(duì)人的輸出反饋,是一個(gè)互相修正的過程。在數(shù)據(jù)可視化設(shè)計(jì)中,操作“聽從驅(qū)使”的可視化作品又是一種什么樣的體驗(yàn)?zāi)兀?/p>

二、聽從驅(qū)使示例

示例一

某公司運(yùn)營同學(xué)需要找出品類銷量下滑的原因。在圖表上,運(yùn)營同學(xué)的思路是找出癥結(jié)、定位問題、關(guān)聯(lián)分析、驗(yàn)證設(shè)想、得出結(jié)論并給出運(yùn)營策略調(diào)整方案。

示例二

某同學(xué)向公安報(bào)案稱賬戶被盜大額資金,公安案件科分析專員從受害人的資金流向追溯至相關(guān)木馬團(tuán)伙,通過關(guān)系擴(kuò)散查驗(yàn)可疑人員,順藤摸瓜最終找到嫌疑人并抓捕。

上面兩個(gè)示例提供足夠便捷的過濾篩選組件,配合鼠標(biāo)懸停、點(diǎn)擊、框選等操作,方便用戶查看更多視圖空間,快速定位感興趣的數(shù)據(jù)空間,這種操作體驗(yàn)?zāi)軒椭脩羰掳牍Ρ丁?/p>

三、何謂聽從驅(qū)使

聽從驅(qū)使本質(zhì)上是用戶對(duì)可視化的控制能力,是一種主觀感知與信念。聽從驅(qū)使包括兩部分,“驅(qū)動(dòng) Drive”與“使能 Enable”,這兩步正向不斷迭代,引導(dǎo)用戶一步步剝開數(shù)據(jù)的面紗。

1. 驅(qū)動(dòng) Drive

數(shù)據(jù)可視化聽從差遣,用戶可根據(jù)前饋信息預(yù)示、驅(qū)動(dòng)可視化,用戶對(duì)可視化作品享有控制權(quán),數(shù)據(jù)可視化符合用戶的顯性需求。

2. 使能 Enable

數(shù)據(jù)可視化遂用戶心愿,用戶根據(jù)反饋引導(dǎo)進(jìn)行下一步操作,幫助探索數(shù)據(jù)規(guī)律或者發(fā)現(xiàn)更多數(shù)據(jù)奧秘,數(shù)據(jù)可視化符合用戶的隱性需求。

四、為什么要聽從驅(qū)使

1. 增加探索意愿

用戶處在海量、無序、異構(gòu)數(shù)據(jù)的海洋中時(shí),需要隨時(shí)面對(duì)有限屏幕空間與無限數(shù)據(jù)空間帶來的沖突。可視化應(yīng)當(dāng)給予用戶適當(dāng)?shù)倪x擇權(quán),讓其可對(duì)信息進(jìn)行控制,具備信息聚焦、下探的能力。這些可視化能力能提升用戶的參與度和探索意愿,不讓其迷失在數(shù)據(jù)的海洋中。

不聽從驅(qū)使:數(shù)據(jù)過載時(shí)不給用戶數(shù)據(jù)聚焦的能力(如下圖)

聽從驅(qū)使:用戶通過篩選器可以選擇感興趣的數(shù)據(jù)序列(如下圖)

2. 減少焦慮感

移動(dòng)端長按滑動(dòng)(Touch & Hold)更新激活點(diǎn)數(shù)據(jù)、左右輕掃(Swipe)平移視圖是用戶的既定認(rèn)知。左圖長按滑動(dòng)后的反饋為平移視圖,此時(shí)用戶心里咯噔一下,又繼續(xù)操作了一遍,操作的預(yù)期與結(jié)果確實(shí)不一致,有些“不聽使喚”。右圖符合用戶心智模型,預(yù)期與輸出結(jié)果一致。

不聽從驅(qū)使:視圖平移,不符合預(yù)期-長按滑動(dòng)時(shí)數(shù)據(jù)點(diǎn)不更新(如下圖)

聽從驅(qū)使:視圖不動(dòng),符合預(yù)期:長按滑動(dòng)時(shí)數(shù)據(jù)點(diǎn)更新(如下圖)

由此可以看出,如果可視化作品操作時(shí)不符合用戶的既定認(rèn)知,可視化則變得不受控,用戶心里會(huì)緊張、導(dǎo)致重復(fù)范錯(cuò),甚至責(zé)怪自己。

如果賦予用戶較高的驅(qū)使感且得到正向的反饋指引,引導(dǎo)用戶操作下一步,那么用戶心態(tài)會(huì)更積極,更愿意接受挫折及試錯(cuò),這種聽從驅(qū)使可以消除未知、不確定性所帶來的緊張與焦慮。

五、怎么做到聽從驅(qū)使

前面講過,可視化聽從用戶驅(qū)使需具備兩點(diǎn)能力:

  • 驅(qū)動(dòng) Drive:通過前饋預(yù)示讓用戶知道可視化能做何互動(dòng);
  • 使能 Enable:通過反饋引導(dǎo)用戶進(jìn)一步讓用戶與可視化互動(dòng);

可視化交互時(shí),驅(qū)動(dòng)用戶完成一期探索,探索后反饋引導(dǎo)發(fā)出的信號(hào)成為下一步操作的前饋提示,再次驅(qū)動(dòng)用戶操作可視化后,如此反反復(fù)復(fù)直到幫助用戶找到數(shù)據(jù)的潛在規(guī)律或者找出數(shù)據(jù)真相。

從心理學(xué)的四個(gè)概念進(jìn)一步解釋:

  • 示能:可視化特性與預(yù)設(shè)交互的關(guān)系,是否可被操作;
  • 意符:即信號(hào),告訴用戶可采取什么操作,如何行動(dòng);
  • 映射:事物之間的關(guān)連關(guān)系,是怎么聯(lián)系的;
  • 反饋:操作之后的回應(yīng),是否及時(shí)、有效;

1. 示能

示能 Affordance 指可視化作品可能的潛在行動(dòng),只有當(dāng)它們都是可以被感知的用戶才容易地發(fā)現(xiàn)它們,它揭示了用戶與可視化互動(dòng)的可能性。

例如我們默認(rèn)認(rèn)為屏幕上的可視化都可以進(jìn)行交互,PC 可視化作品可以 Hover 交互,移動(dòng)端可以點(diǎn)點(diǎn)按按。示能存在但可能不可見,可視化設(shè)計(jì)師的一部分職責(zé)就是實(shí)現(xiàn)示能的可見性。

2. 意符

意符 Signifiers 是可視化作品傳遞的信號(hào),暗示可能的潛在行動(dòng),讓用戶該知道該如何去控制可視化。無論是示能還是交互方式,都應(yīng)照顧用戶已有習(xí)慣,需符合用戶心智模型。

在 PC 可視化上,可視化設(shè)計(jì)師很容易忽略鼠標(biāo)指針樣式設(shè)計(jì),經(jīng)常默認(rèn)一個(gè)鼠標(biāo)樣式進(jìn)行到底,可視化如何驅(qū)動(dòng)用戶以及如何讓用戶具備可視化的能力全靠猜。

3. 映射

映射 mapping 表示可視化元素間關(guān)系,應(yīng)用于控制-反饋模式的設(shè)計(jì)或布局;比如方向盤可控制汽車轉(zhuǎn)向,下拉篩選器出來的選擇框。以空間布局對(duì)應(yīng)關(guān)系的自然映射為例(如下圖)

4. 反饋

反饋 feedback 是用戶操作之后的回應(yīng),反饋應(yīng)當(dāng)是即時(shí)、有效的。在可視化設(shè)計(jì)時(shí),如果需要,我們建議給出用戶深層次的反饋以便指引其進(jìn)行下一步的操作。

六、小結(jié)

要做到聽從驅(qū)使,需給用戶控制感,讓用戶享有對(duì)可視化的控制能力。例如提供足夠便捷的過濾篩選組件,配合鼠標(biāo)懸停、點(diǎn)擊、框選等操作,方便用戶查看更多視圖空間,快速定位感興趣的數(shù)據(jù)空間,亦或根據(jù)特定變量對(duì)數(shù)據(jù)進(jìn)行排序、突出、降維處理等。當(dāng)我們將這些組件與交互動(dòng)作進(jìn)行結(jié)合,用一些習(xí)以為常的交互去操縱可視化時(shí),用戶將會(huì)很清晰、并且有信心控制好當(dāng)前視圖。

數(shù)據(jù)可視化不僅僅只是一張好看的圖,它構(gòu)建的是一個(gè)系統(tǒng),這個(gè)系統(tǒng)隨時(shí)在解決有限屏幕空間與無限數(shù)據(jù)空間帶來的沖突。這個(gè)系統(tǒng)可以驅(qū)動(dòng)用戶完成一系列操作后引導(dǎo)用戶有能力進(jìn)一步拿到結(jié)果,如此反復(fù)交替迭代,幫助用戶完成一些平時(shí)看來不可思議的任務(wù)。只有這樣,用戶才能操縱聽從驅(qū)使的可視化,就像文章開頭所述,如老司機(jī)開車一樣絲般潤滑。

 

作者:完白,螞蟻集團(tuán)設(shè)計(jì)師

本文由 @Ant Design 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 動(dòng)圖是什么軟件做的?

    來自上海 回復(fù)
    1. 同問!

      回復(fù)