演講筆記:資料視覺化的實現

來聽這場演講 醫院、菜價、Youbike 資料視覺化的實現–如何在 5MB 的瀏覽器上呈現 5GB 的資料? ,老樣子,即時筆記。

講者:Muyueh(李慕約)
網站:http://muyueh.com/42/

比起一連串表格數值,資料視覺化能加快訊息傳達、降低使用者取得目標資訊的成本,更突顯所有數值不合理的地方。

媒介

已不僅在是紙上,可以有更多互動技巧。

資料視覺化的實現

資料 + 假設 + 計算=結論

數據來源會被質疑,「假設」更容易被受到挑戰。
讓使用者相信、不用質疑或懷疑。當「假設」不同,使用者就會挑戰你。
挑戰你的方式可以用「使用者自由操控」來讓他使用你提供的資料,增加使用者對資料的信賴感。

彈性大的介面

傳統紙本表格資料呈現,當改變欲呈現的資料主體時,整份表格就要重做。使用前端技術只要從新排列即可。
(可利用過場動畫等,讓使用者了解資料結構。)

重複利用圖表

現在是前端的時代,有沒有可能產出現成的樣板、模組,像 Word 裡的直方圖、圓餅圖等是通用型的,未來遇到相似結構的資料可以立刻馬上套用。

使用者操作自由度

低操控自由度:畫面清楚簡單但無互動,使用者停留時間短。
高操控自由度:操作難度高、資訊量龐大、可能需要教學,但使用者對資料較信賴。

中場課題

試著將 顏色列表 資料視覺化
http://zh.wikipedia.org/wiki/%E9%A2%9C%E8%89%B2%E5%88%97%E8%A1%A8

(我懂耶我懂~~舉手!)
「先分 RGB、CMYK,再用色相環計算顏色數值,可以再分層下去。有很多種作法。」
(這問題根本衝著設計師來的。)

講者的作法:http://muyueh.com/greenhoney/
該站包含中文色彩命名的分類、英文色彩名稱分類,另有水果;花卉;明、暗、亮;地理區域等各種命名方式。

怎麼做資料視覺化

描述、研究你手上的資料,將新發現的東西用圖表呈現。

不是把資料扔給前端或美工就會有美美的結果跑出來!

沒有在資料裡附加更多新價值的話,閱者也不會得到什麼。開發者如果沒有認真研究手上要資料視覺化的資料,是無法做資料視覺化的。

要知道用什麼方式去切換圖表的資料模式,只能靠平時多看多學累積的經驗,以及自己的好奇心了。

好的資料視覺化圖表會告訴你更多

如何讓使用者能夠非常簡單就查覺到:「什麼情況下菜價會是這麼完美穩定、而其他地區的菜價波動這麼大?」開發者對手上資料的認知和研究不夠深刻,就無法完整發揮手上資料的力量,更難傳達新資訊給使用者。

數字會說話

數字能突顯問題。

簡單易懂的圖表讓資訊更容易被閱讀,有問題的數字會非常容易被看到,資料視覺化就是方便使用者抓出問題的利器。使用者能透過好的資料視覺化圖表發現更多他原本沒注意到的部份。

技術面

(開始準備進入 RD 才聽得懂的領域了,我努力點,看能聽懂多少就寫多少。)

要怎麼把資料濃縮?

瀏覽器傳輸上限是 5 MB,要怎麼把幾 G 的資料濃縮到 5 MB裡是重要課題。

  • 分類切割,依最可能被操作的分類方式切割資料、拆成幾個檔。
  • 重覆的資訊,如日期、地區等中文字,中文字很吃空間,重覆有規則的比較像標籤。標籤可以用數字,資料量就會大幅減少。
  • 用不到的欄位就刪掉了。

以上都是假設,如果一開始就擺明「這個欄位是我不需要看的所以就砍掉」,萬一砍錯就麻煩了。

連續數字怎麼簡化?

  • 標籤法:18歲以下一個標籤,18~30一個標籤,減少資料量。
  • 假設小數點之後的位數都不重要,全刪掉。(小心假設錯誤。)

關心的重點

和顯示層面連動,使用者關心哪個維度,就呈現那個維度的資料就好。分類的方式可以連動圖表項目分類,根據使用者操作去撈不同分類或標籤的檔案。

預想各種可能的輸出,做不同的組合,不要什麼都靠 Server 運算硬上。資料量就會減少。

時間成本

80% 在前期資料研究,20% 才在實作上。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close