巨匠電腦分享設計資料視覺化要點 展示數據分析結果
說出數據的故事
「儀表板（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」您就可以很快有個概念了。）
對我而言，圖表的選擇可分為「萬用」與「最適用」兩種。表格、折線和長條圖對於很多種類型的資料來說都很好用，但他們是比較通用的。身為一個專業的設計師，我會希望自己的作品同時兼具實用性以及獨特的美感。
舉例來說，《紐約時報》的客製化互動圖表充實了他們的文章內容。你可以在這邊看到他們的作品。我們來看看一些無可挑剔的客製化視覺作品：
▲ 大聯盟各隊平均一場比賽的三振數。（來源）
這個例子是將折線圖稍微改造了一番，折線圖代表的是大聯盟平均每一隊在一場比賽裡的三振數，藍色線圖背後的灰點則是每一隊的平均值。（編案：可選擇不同隊伍，比較單一球隊的數值與聯盟平均。）
▲ 各年份對於未來 30 年的殖利率預測變化 3D 圖。（來源）
上面這張 3D 圖表看起來相當驚人，但同時也能讓讀者明白數據間的關聯性。（編案：可連回原連結操作一下，搭配圖表的說明讀起來相當清晰。）
上圖是利用真實內容（自拍照）來做資料視覺化。
最後，是我們為 CNN 做的一個專案，我們利用 color-coding 秀出政黨喜好，以及 3D 的視覺化人口統計資訊。
作為一種經驗法則，當數據和技術上有需要的時候，我們就會嘗試做客製化的資料視覺，但我們總是有備案，以便萬一客製化進行得不順利，或是顧客偏好野心不是那麼大的方案。
所以呢？
或許有人會問：為何要把資料都放到頁面上？
答案：這樣一來人們才能運用那些數據——做決定、調查、預測等等。重點是，使用者不會因為你的用色而感到驚嘆，他們有自己的工作要做。
我的意見是，當你安排好頁面的佈局了，所有的東西都打磨得恰到好處。這時你要問自己：然後呢？審視每一個圖形、每個小工具、圖表、表格，去思索使用者會從中得到什麼。往往你會得到一個結論：這不重要。這時就等於是豎起了紅旗，你必須減去一些東西，或是重新思考。
我自己曾經遇過幾次這樣的狀況。我做了一個很美觀、很複雜的儀表板，上面有一堆趨勢圖、圓餅圖和地圖，上面有成千上萬的資料點。結果客戶問：「我只想知道產品到底行不行，我該怎麼看？」或「我只需要知道三件事：X、Y 和 Z，我要怎麼找到他們？」
唉，這時候你才會明白自己已經在草叢裡迷失，而看不見整個局面。
所以我會利用一種技巧去應付這樣的狀況：嘗試利用文字去溝通：「到底對方想知道什麼？」
▲ 透過高階（high-level）的、文字化的結論會比圖表更有用。
上面的兩張圖表來自我們最近的專案。他們都只是簡單地用文字告訴使用者他們需要知道的東西，而非透過圖表或圖像來解釋。
我們的客戶很認同這樣的做法，特別是在處理高階的資訊時。但正如同我前面提到的，永遠有不同的人物誌要考量，所以請選擇最合適的方案。
如同所有形式的設計，資料視覺化講究的也是平衡。
努力用獨特方式去展示你的資料，但要避免過度設計，以及不必要、使人分心的東西。
為你的數據選擇正確的圖表，同時不要忘了按照層級去安排你的頁面佈局。
無論再怎麼令人沮喪、令人感到煩瑣，都要為了小細節而煩惱，而且別忘了問自己：「所以呢？」
巨匠電腦設計了程式/資料庫課程，教你程式設計、大數據分析與應用等等，快來巨匠電腦輕鬆學！
文章與圖片出處: http://goo.gl/IFpHIQ
想要學: 程式/資料庫課程
「我在巨匠電腦學到很多東西」、「巨匠電腦評價—讓我重拾了自信心」
「3D多媒體評價巨匠電腦觀察站」、「評價好！超厲害UI 巨匠電腦分享5個iPhone UI設計教學！」
\
