巨匠電腦分享設計資料視覺化要點展示數據分析結果、評價

巨匠電腦分享設計資料視覺化要點展示數據分析結果

說出數據的故事

「儀表板（Dashboard）」、「大數據」、「資料視覺化」、「分析」——有太多太多人和企業想拿數據來玩花樣。而我很幸運地在自己的生涯中，從事過許多數據扮演吃重角色的介面設計工作。今天我想跟大家分享，到底該怎麼做才能完成與眾不同、有意義的產品。

許多人已經談過這個議題，所以本文會嘗試聚焦於我們流程中影響力最的的那些部份。

1. 不同的使用者，不同的數據

當你在設計一個複雜的系統時，無可避免地會需要針對多名使用者或是多種「人物誌（persona）」去設計。執行長、經理人和分析師都是常見的、擁有自己工作流程和數據需求的人物誌。

定義出好的人物誌、產生好的洞察，本身就是一門藝術，這並非我要在本文細談的東西，如果你對這些議題感興趣，可以參考 Cooper 這篇文章。

重要的是，請記得人物誌是要能夠區分的，而且要讓你能夠為繞這些人物誌去組織資訊結構的任務和框架。

下面是一些我們去年曾用於一個醫療報告 app 的東西。這個系統裡面不同的使用者會需要他們自己的數據工作流程，每當我們建立了一個關鍵的人物誌，就會加入下一次 app 開發的審查會議。

在滿桌的客戶面前簡報設計畫面是一件很困難的任務。不管你是在解釋框架、流程圖還是辯論視覺上的設計，你很難讓大家跟著你的腳步走。

把你設計好的畫面按照人物誌來組織，對你（還有客戶）在討論過程中會很有幫助。

2. 頁面佈局（shaping page）

過去幾年我學到一項技巧，就是頁面佈局的概念。這東西的核心很簡單：

先向使用者展示他們需要看見的東西，然後再根據 user story 和資訊層次結構去安排頁面剩餘的部分。

頁面佈局的概念是諸如撰寫散文（和其他許多溝通形式）的核心原則，我在寫了一本書之後對這個概念也有更深一層的認識。過去一年我花了不少時間在讀這本書《Style: The Basics of Clarity and Grace（中譯本書名為《英文寫作的魅力》）》，它除了是一本關於寫作很好的參考書，更是精彩地表現出頁面佈局的概念：

When you start with distractions, your audience has a hard time seeing not just what each element is about, but the focus of the entire passage.

當你的焦點開始分散，你的觀眾不僅很難看見每個元素是什麼，也會看不清整個段落的焦點。

對於設計 UX 來說，這是一個很好用的原則。下方是兩個我們常用來安排頁面佈局：

▲ 給你的儀表板一些結構吧。問問你自己，到底要告訴使用者什麼樣的資訊。

許多我在 behance 和 dribbble 上看過的儀表板和資料視覺化專案設計，在視覺上都很美，但常常會在看完之後出現壓倒性地，令人毫無印象的感覺。他們要不是： A）仿照 Pinterest 風格去安排無數個圖像、線圖，毫無層次；或是 B）在視覺上對數據做了不合適的過度設計。

▲ 左邊的塞入太多東西，右邊則是讓人難以聚焦在資料上。

上方左側的圖採用中控台的設計去呈現資訊，那樣的作法塞入太多東西了，讓人受不了。為了避免這樣的情況，我們會嘗試用「策展」的方式去安排這些資訊，讓你在看這些資料像是在讀一篇雜誌文章。

更不用說我們通常沒時間去弄一個任務控制中心般的介面。我個人蠻樂意去設計一些像那樣的東西，但是大多數情況下，一次就要看到所有的東西是沒有必要的。

你需要考量的重點是：避免做出東拼西湊的瑣碎視覺。好好安排頁面上的資訊，讓使用者容易在一開始就掌握住關鍵資訊，然後才是承接的相關內容。

3. 選擇「正確」的視覺化

有太多因為美學觀點而選擇錯誤設計的圖表在你我周遭流竄著。

最糟糕的是，這些壞習慣似乎會有與日漸增的現象。我常常會看到該用圓餅圖的卻用區域圖（area chart），該用長條圖的卻用折線圖。讓我們一起停止這樣的現象吧，請嘗試用以下的方法還你的數據一個公道：

從資料著手

雖說原始資料一點也不性感，然而，卻是我們最好著手的地方。這可以協助你開始思考，資料裡含有哪些變數，以及各種數據所代表的東西有何關聯。

除了呆呆的盯著一排排數據，希望一些點子可以溜進你的腦海之外，你其實可以主動一點，以下幾個資源是你可以利用的：

Charted：由 Medium 團隊開發的資料視覺化自動工具。
用 Google Sheets、Illustrator 或 Sketch 設計出更棒的圖表。
Tableau：市面上最棒的工具之一，但非常昂貴。

這部分的流程沒有萬靈丹，但也別怕去碰那些數據，試著混合、搭配那些變數，從一些基本的圖表著手。這很花時間，不過很值得你去做。我最棒的幾個想法就是透過這樣的方法就是從這些原始數據開始思考而得來的。

不連續資料 vs. 連續資料

我花了一些時間才領悟到這件事：有的圖表類型就比另一種更能表達出你的數據。如果只是挑一種看起來不錯的圖表套上去，然後希望你的數據因此變得有用，那當然很簡單，我以前就做過幾次（我超愛自己做過的一張 scatter plot）。

請認清一件事：根據數據類型的不同，有些類型的視覺化就是會比其他的好。找出最佳的視覺化，方法之一就是先分辨你的數據屬於哪一類。數據主要可以分為兩類（編按：Well，數據分類方式不同，例如統計學上會將數據分成 interval data、nominal data 跟 ordinal data，本文以作者的為主）：

不連續資料：你可以計算個別的數值。例如：比賽的得分或是 Facebook 按讚數。

▲ 長條圖很適合用來表現不連續資料

連續資料：在一個區間內的任何數值。例如一季的雨量或是一個人的身高、體重。

▲ 折線圖很適合用來表現連續資料

這個部分有一個非常棒的參考資料：Dona Wong 寫的《The Wall Street Journal: Guide to information Graphics》，真希望多年前我就能有這本書可看。這本書對於選擇合適的圖表類型、在表達資訊時什麼該做/不該做，是極有價值的參考。

4. 基本款 vs. 客製的資料視覺化

最後，身為一名設計師，你必須不斷地自問：「我該放棄那些有前例可循的路走向客製化嗎？還是我該選擇那些經過驗證的圖表去傳遞數據背後的訊息？」

我最近讀到這篇 37Signals（編按：已改名為「Basecamp」）的部落格文章〈 Three charts are all I need〉。作者對於資料視覺化的「問題解決」特性是如何取代掉了視覺上的美感提出了強力的論點。我完全同意這篇文章的說法。然而，我想他的意見屬於非常功利的角度，我相信客製的資料視覺話總是能強化資料的可用性，而且又能看起來相當獨特、引人注目。（編按：光看該文第二點「Your job is to solve a problem, not make a picture」和第三點「Safe doesn’t mean boring」您就可以很快有個概念了。）

對我而言，圖表的選擇可分為「萬用」與「最適用」兩種。表格、折線和長條圖對於很多種類型的資料來說都很好用，但他們是比較通用的。身為一個專業的設計師，我會希望自己的作品同時兼具實用性以及獨特的美感。