如何設計一個客制化的數據儀表板?

由左到右為:儀表板、情感地圖、Instagram照片

去年暑假在Philips Lighting(以做電燈泡聞名的老牌企業,目前專注在物聯網領域)的北美研究部門擔任可視化設計實習生,自己獨自接手設計了一個設計數據儀表板,從調研到製作原型(prototype)大約花了三週的時間,雖然最後沒有落地實現,但在這過程中學到了不少。在這個過程中了解到,對於許多企業都會需要的儀表板,在設計上有許多信息設計師(information designer)可以發揮的空間。如何針對特定的需求、特定的數據,設計客制化的儀表板,需要設計師對不同的可視化圖表與數據有較深的理解。

被用來實時觀測數據的儀表板,幾乎是每個企業都會使用的重要工具之一。在數據維度不斷擴增的大數據時代裡,如何更有效的利用儀表板來傳達有價值的數據洞見,傳統的儀表板已無法勝任這項任務,並具有進一步改善的空間。這篇文章試著針對特定行業、特定數據,設計客制化的儀表板,並提供一些可視化設計思路。

在這三週當中,從調研到設計原型,每一階段的過程都較為倉促,加上自己第一次設計儀表板(也是第一次設計使用者介面),體認到了近年火熱的UX(體驗設計)對於數據產品的重要性,唯有好的前期調研、交互邏輯梳理、到後續的可用性測試等階段,以良善紮實的設計為基底,才是一個好的、使用者友善、並符合需求的數據產品的前提。

當然,如何針對業務需求、與客戶溝通等進行設計,也是很重要的部分。這一些實戰經驗的不足,希望我之後在德勤諮詢的大數據部門(Deloitte Insight Studio,波士頓分部)擔任可視化設計師時,能夠有更深入的體會與學習。一想到可以跟有著麥肯錫、摩立特等工作背景的上級們學習客戶經驗、還有一群數據工程師、數據科學家、UX設計師等不同背景的同事一起緊密的合作,想到就有點小激動😄。

這個儀表板是用來幹什麼的?

Philips Lighting的部分客戶為購買大型裝置藝術燈具的地方政府或是企業,他們將這些顏色繽紛的燈具裝飾在橋樑、公共建築之類的大型建築上面,以吸引遊客前來。然而如何衡量購買這些燈具所造成的效益呢? Philips Lighting提出了用一個可以觀察社交媒體數據的儀表板作為解決方案。

基於業務機密的關係,這個儀表板已經適當脫敏並簡化。使用場景為衡量美國最熱門的前50大景點在社交媒體上的討論熱度。當人們去熱門景點旅行的時候,他們都在談論些什麼、拍些什麼照片?如何使用客制化的數據可視化去展示這些數據?基於此儀表板是分析社交媒體的照片與文字數據,社交媒體鎖定在Instagram,因為它是一個以照片分享為主的平台,與Facebook、Twitter、Snapchat有明顯的不同。

設計思路

此部分提供了我如何設計這個儀表板的思路,分成兩部分:使用者界面、數據可視化。

使用者界面:顏色漸層、卡片式佈局

因為此儀表板使用了Instagram的照片並提供情感分析,使用顏色漸層作為界面主基調表達了現實生活中的原始顏色,任何現實生活中的顏色,受到光反射的影響基本上都是漸層色。微軟在去年提出了Fluent Design System的概念,強調了光照、深淺、動態、材質、比例在設計中的運用,個人感覺是把近年的設計流行趨勢做了統整,並讓設計更貼近與現實環境(若想看專業的介紹,知乎有篇解讀)。

微軟Fluent Design System,當初看了這介紹短片莫名感動,前前後後看了一百多遍,但本身設計功底不足無法在這個儀表板實現所有的這些設計概念

取色的靈感來自於某天下地鐵的時候,看到波士頓的餘暉,而取用藍與紅。

波士頓的餘暉,相機太爛拍不出真實效果,實際比這好看好幾倍

至於卡片式佈局,則是儀表板常用的排版方式,可以幫助使用者辨別、操作表中的可視化。

數據可視化

針對Instagram的數據,設計了幾個可視化,一般在儀表板中比較少被用到。靈感來源於數據可視化書籍與之前可視化課堂中老師展示的範例。

“每小時上傳量”

“每小時上傳量”展示了每日的照片上傳數量,並用圓形展現(像個時鐘)。不用折線圖、餅圖、長條圖的原因為,用圓形來展示數據可以幫助使用者了解可視化是以每日的格式展現,另外可視化的形狀像個時鐘也可以幫助使用者解讀數據的pattern 。

“情感表現流動趨勢圖”

“情感表現流動趨勢圖”展示了透過分析Instagram發文(文字部分)而得的情感指數,用流動圖的方式來展示。流動圖(streamgraph)算是比較常見的可視化基礎圖表,但我不知道為什麼在儀表板中比較少被使用。此儀表板使用流動圖的原因為,數據為連續數據,用流動圖來展示情感指數的時間變化,在視覺上可以清楚比較正向、中立、負向指數之間的大小與趨勢。

“相片格子”

“相片格子”是我覺得比較有趣的可視化。當初看到這個可視化是在Nathan Yau的書的一個範例,用格子去代表一張照片,並取出照片的主顏色作為格子的顏色。當初看到這例子時,挺懷疑如何運用到實際的商業分析中。但在此,我個人認為,是一個很合適的運用時機。有別於直條圖來展示相片的上傳量,“相片格子”提供了數據的另外一個維度:相片顏色。在這個項目中,分析照片的顏色可以讓使用者大致了解照片上傳者的相片是著重在那一塊。例如,紅色可能是當時的球場有比賽,照片的主角是比賽的球員,因為隊服是紅色的。

調研過程

簡單做了競品分析、需求分析、信息架構,放在簡報裡跟上級報告。

草稿、低質量原型

這一系列的設計過程,在學校裡並沒有教,大多都是我在大神同學身上學到的。之前跟班裡的Antonio Solano大神合作了網頁設計,跟他學著如何做使用者經驗的調研(需求分析、信息架構等等),沒想到在實習的時候有機會可以派上用場。但我並沒有學到完整的研究過程、在使用上也還不夠深入,這是我後續需要繼續加強的部分(之一😂)。

其他資源

這裡提供一些在設計儀表板時,“可能”會有幫助的學習資源。

Stephen Few的書
提到儀表板,代表人物大概就是Stephen Few了。當初在實習接到設計儀表板的任務時,馬上就上網買了他的兩本書,但到貨後看到滿滿的文字,又厚又重,知道自己看不下去,果斷退貨。所以我對這些書並沒有深入的了解。但應該還是有閱讀價值。有位在業界挺有知名度的數據可視化工程師曾在Data Stories(數據可視化的播客)上面稱讚過他的書。

Tableau的文章:創建高效儀表板的 6 種最佳做法
Tableau本身是做儀表板的公司(基本上應該可以這麼說),他們也有一些教學文章,這邊只列出其中一篇

論文:Interactive Dynamics for Visual Analysis
這篇論文是我在研二修了計算機博士班的課的時後,老師要求閱讀的其中一篇論文(論文偏向學術,IEEE Vis很難讀的那種 😂),關於如何設計提供分析的數據可視化(可以說就是儀表板),並提出了一個分類,幫助設計師、工程師了解有哪些交互功能可以讓儀表板更為有用。這門課是在我結束實習的時候才上的,所以當初在設計儀表板時沒有參考這篇。

若有任何建議或是反饋,歡迎底下留言,以上。