疫情資訊平台概覽:資訊 x 設計 = 解決問題的力量!

Merlin Liao
UXI Insight
Published in
14 min readJun 11, 2020

文:圖形介面設計師 廖子翔 Merlin、品牌行銷企劃 蔣欣純 Coca

在討論各疫情資訊平台之前,先來聊聊資訊視覺化

資訊視覺化(Information Visualization)是將抽象、難以迅速理解的數據資料(包括數值及非數值資料,例如文本、地理資訊等),用具體且可互動的視覺化呈現來增加觀看者的視覺感受,加速資訊的理解與吸收。呈現方式有許多種,常見的有柱狀圖、趨勢圖、流程圖等。使用者可藉由資訊的視覺化呈現,去解讀資訊所提供的價值與意義。

為什麼要討論資訊視覺化?

看到這裡你一定會想:圓餅圖、直方圖等等的圖表,不是一直都有在使用嗎?為何近年來突然被大量提及與應用呢?

這個問題,可以嘗試從「科技成長帶來的影響」方向去思考。當人類開始廣泛運用各種技術,不同領域的資訊量呈指數成長,我們需要吸收的資料也愈來愈龐大了,且這些資料大多還是以文字形式呈現,光是閱讀就需要花費大量時間。對人腦來說,比起單文字描述,圖像更容易被記憶及理解,所以透過資訊視覺化能協助人們加速吸收並過濾在科技生活中接觸的龐大資料,也是為什麼資訊視覺化會顯得更加重要,並一再被提及。

像是複雜的氣象數據也能透過圖表及圖像等視覺化呈現來輔助理解與吸收資訊(圖片來源|氣象圖資視覺化網站:氣象隨選平台

然而,資訊視覺化與過去我們認知的資訊圖表,目的都是為了用更簡單快速的方式吸收資訊。從形式上的變化來看,以下整理出四個差異:

1. 更多元的呈現方式:資訊呈現方式除了折線圖、圓餅圖、泡泡圖之外,還可以有更多選擇。尤其當使用情境從一般平面轉移到數位平台上之後,更可以透過 Motion graphic、簡易動畫、影片等不同方式與使用者互動,使資訊內容更快被理解及吸收。

2. 資訊豐富度不同:呈現方式增加更多變化與彈性之後,便可以思索不同維度資訊能否進一步整合,以簡單的視覺互動準確傳達資訊。而資訊視覺化的內容除了呈現數據之外,甚至可以用來敘述某些抽象的故事或事件。

3. 雙向且提供趣味性互動:在圖像應用與呈現方式越來越多元的情況下,資訊已不再只能單向的靜態圖像呈現,而是可以讓使用者以更多型態雙向互動,增加觀看或操作時的趣味性。

4. 美學展現方式不同:當然身為設計師除了將數據轉化成圖表之外,一定會注重美感上的呈現,但無論是轉化主觀描述或是客觀綜整,準確表達資訊內容還是最主要的目的,美觀與否則是次要輔助。千萬別因為要炫技而迷失了,資訊視覺化最重要的本質,還是協助資訊的詮釋與傳遞。

今天最主要還是聚焦在疫情資訊平台上,其他關於資訊視覺化的內容,就留給大家探索!(文末也有附上參考文章)。

首先,疫情資訊在數位平台上的呈現需要包含哪些條件?

我們將以上四個資訊視覺化的要素,對應到疫情資訊平台上的應用,重新整理出以下五個要素:

  1. 即時性:資訊應即時更新,反映實際情況,過於老舊的資訊會導致使用者不信任。以防疫平台來說,需要提供由全球或特定區域當地政府單位統計而來的最新疫情數據(每日確診人數、累積確診人數、死亡人數等),且資訊內容能夠反應在相對應的時間軸線上。
  2. 正確性:資訊來源應確保正確且完整,避免提供錯誤訊息造成誤導。尤其是防疫平台若傳遞不正確的資訊,有可能造成大量傷亡,需特別注意。
  3. 泛用/豐富性:考量到使用者包括一般民眾和專業人士,資訊內容應兼具廣度及深度。從防疫平台的角度來看,除了疫情確診人數等必要資訊外,同時能提供疫情周邊相關資料彙整,如各地最新新聞資訊、防疫醫療知識、口罩購買地圖等,增加平台對於疫情資訊提供的廣度及深度。
  4. 易用性:透過視覺引導及輔助,使用者能夠快速學習,並吸收目前頁面所呈現的圖像,以及理解當下狀況。設計良好的平台讓使用者能便利操作且感受不到任何障礙,同時也需思考平台能否支援不同尺寸的裝置。
  5. 美觀性:透過視覺化與互動能有效呈現資訊內容,提供美觀且簡潔的視覺介面,協助使用者快速抓到資訊閱讀的節奏與方式,甚至增加操作時的愉悅度。

實際來分析目前疫情資訊平台呈現的內容吧!

我們將提供這次新冠肺炎相關資訊收集到的十三個數位平台,分為四個類別逐一介紹:

  1. 國際型疫情資訊平台
  2. 區域型疫情資訊平台
  3. 國際型下拉式疫情資訊網站
  4. 一般下拉式疫情資訊網站

一、國際型疫情資訊平台

此類型主要透過各種視覺化方式,讓使用者了解世界疫情趨勢,並不侷限在特定國家或區域。

1. HealthMap

HealthMap 疫情資訊平台

Healthmap 平台在要呈現的資訊選擇上比較單純,以「各國確診數量」為主,透過不同顏色的泡泡來代表數量,可從左側直接選擇國家,或是從地圖縮放、旋轉來觀看,而下方時間軸可透過播放來觀看疫情從過去到現在擴散的狀況。

但在實際使用過後,發現當確診案例數量逐漸增加,泡泡圖的呈現並未是最好區別數量的呈現方式,以全球地圖來看的時候,國家與國家間的不同顏色的泡泡圖相互交疊,有得甚至變成一大團,無法快速判斷各國之間確診人數的情況。

2. 約翰霍普金斯大學

約翰霍普金斯大學防疫平台(以下簡稱 JHU 防疫平台),在介面上從左到右可分為四個板塊來看:1. 各國確診人數統計 2. 跟 Healthmap 一樣以泡泡大小來呈現人數多寡且具互動性的視覺地圖 3. 各國感染與康復人數,以及 4. 疫情時間軸。

與 Healthmap 相比,JHU 防疫平台在疫情時間軸上則運用折線圖的概念,雖然缺少了動態變化的視覺張力,但能夠更能快速對照時間及確診人數的資訊。

3. 微軟Bing防疫平台

開啟微軟 Bing 平台時,有種將 Google maps 轉換成疫情資訊平台使用的熟悉感。左側一樣是選擇國家地點,但看到的詳情頁面從店家資訊轉而變為該區域目前疫情的時間人數分布概況、相關新聞資訊及影音。

而微軟 Bing 平台與前兩個平台在世界地圖上呈現案例數量上,也是運用泡泡圖作為資訊呈現方式。(還記得本團隊在看過各平台之後,也普遍給予微軟Bing平台好評,大家不妨試著使用看看!)。

4. 衛福部疫情地圖

衛福部疫情地圖所揭露的項目與 Healthmap 相似,都以確診人數及死亡人數做為主要呈現項目,但與前面三個平台的差異在於:確診數地圖的呈現方式。比起泡泡圖,此平台選擇將區域直接用不同顏色填滿,讓顏色搭配對照圖例,能了解目前該區域的疫情分佈狀況。

除了提供全球資訊,平台右上角的 Tab 也能點擊進入觀看台灣當前疫情檢驗及案例新增數量,下方則以時間、通報數量及發病日的直條圖來呈現疫情的整體趨勢,並運用不同顏色來區分類別,當游標移動至所選時間相對應的直條圖上便會出現案例數量。

二、區域型疫情資訊平台

比起國際型,區域型平台較專注在揭露單一國家或區域的疫情資訊、內容細節、新聞情報等等。

  1. 香港政府疫情平台

在不同類型資訊的呈現方式上,透過左右切換,讓頁面能夠保持只專注在一個類型的項目上,資訊找尋十分便利。但相對來說,想在香港疫情平台上交叉比對不同資訊,則會顯得比較困難。

2. 台灣民間工程師自製疫情地圖

廣蒐各平台的過程中,多少會遇到「平台試圖透過視覺傳遞給觀者某些資訊,但是看了很久依然無法理解內容」的狀況。這時候我們會試著不要大力批評這個平台,而是反思、提醒自己,我們是否也曾犯過類似錯誤?

將這個平台上的元素拆解來看,進入平台,馬上就能看到台灣及其他地區的地圖,雖有標示不同顏色,卻沒有明確地告訴使用者各顏色所代表的意義。

此外點擊地區時,右邊工具列會展開相關資訊,可惜目前所提供的資訊並未經過轉化,而是直接以文字條列,使用者在資訊理解及吸收時會較為吃力。

3. 台灣工程師自製疫情追蹤平台

這個平台主要針對台灣人會接觸到的資訊去做資訊版位的設計及訊息揭露,如右下角的資訊就包含了近期的宣導事項、衛福部最新資訊、口罩地圖等。平台上雖然也有部分國際資訊,但台灣資訊比重還是比較高。

三、國際型下拉式網站疫情資訊平台

同樣都是透過網站來呈現資訊,此類別與上面提到的第一、二類不同的地方在於,使用者在操作時,網站移動區塊為上下區分,每一個區塊呈現的資訊也較為單純,並非將一個視窗切換為不同區塊。

  1. Google疫情地圖

Google 的疫情資訊平台,上半部區塊與其他平台相同,透過全球地圖縮放及大小不同的泡泡,來表示全球及各國確診人數狀況。網站下方則是所選國家與各國人數比對的列表、焦點新聞、以及時間區段的趨勢變化圖表。

2. 新加坡UPCode平台

這個平台比較特別,是由新加坡 UpCode Academy 發起的 COVID-19 Project,主要透過向各國募資來解鎖並取得該國更詳細的疫情資訊,因此涵蓋的國家數量較少(有些還在募資中國家尚未解鎖),但只要選擇解鎖的國家,就會像是開啟了該國家專屬的疫情資訊網站。(這是我們目前的理解但不太肯定是否正確,如果有知道詳情的人可以在下方留言跟我們分享!)

平台運用 Tab 來區分不同的疫情項目,各項目底下所揭露的資訊與圖表,比起其他平台更加詳細,例如內容包含了年齡與男女比例、本土及國外案例、各案例的基本資訊,並繪製案例間的關係圖表,不過並無各國即時新聞資訊,而是專門聚焦在分析各國疫情數據。

3. 世界實時資訊統計網站做的疫情追蹤平台

這個網站跟維基百科較為相似,只是單純將全部資料、數字放在網站中。在網站內可以找得到各國的疫情資訊,但較少將資料分類並透過圖表來輔助呈現,造成使用者在找尋目標資訊時容易眼花,難以搜尋。加上其下拉式網站的操作方式,更增加了使用者找尋資料的不耐感,而放棄使用網站。

另外平台上有許多廣告,也會讓使用者分散注意力,而無法專心聚焦在閱覽平台所提供的詳細資訊。

四、一般疫情資訊網站

此類型基本上以網頁文章形式呈現,各資訊大致以上下排列呈現。其中幾個網站提供按鈕讓使用者快速跳轉至想關心的資訊,但基本上皆採用滑動瀏覽。

  1. 民視疫情網站
民視疫情網站

民視運用媒體自身專長,將蒐集到的資訊彙整,並運用網站及圖文互動操作的方式,呈現台灣疫情的詳細資訊。不僅運用大量圖像輔助吸收資訊,同時也會在圖像旁透過文字輔助,增加資訊豐富度及完整性。

網站同時提供快速跳轉 menu 在左側輔助引導,在閱讀下滑時上方亦有進度條提示,都是很貼心的設計。使用者在操作這類網站時常遇到的困擾是:「目前閱讀到了整體網頁的哪個部分?」「還有多少資訊沒閱讀完?」「剛剛看的資訊想看一遍但在哪裡?」等等接續閱讀資訊時的不確定性。有了主題跳轉與進度引導,使用者更方便了解網站想提供的訊息。此外,網站還提供許多疫情相關知識提供學習,也很值得讚許。

2. 報導者疫情網站

報導者疫情網站

報導者疫情網頁與民視疫情網站相同,均設計為下拉式網頁,雖然沒有閱讀進度條,但在右側有提供 Menu 提示使用者目前閱讀的主題及項目。兩者在視覺資訊上的互動雖有些許差異,民視在圖像資訊揭露上,是游標移入後提供詳細資訊;而報導者在圖像上的互動形式較多,像是全球地圖縮放的互動、向下滑閱讀文字資訊時左方還會有圖片變化,像是動畫一樣的輔助說明,讓使用者可來回對照圖文,更容易吸收網站想傳達的資訊內容。

3. UDN疫情傳播資訊網站

跟民視及報導者網站相同,UDN 疫情網站也使用下拉互動形式來提供資訊,但在操作上卻明顯忽略了前兩者都有提供的「快速跳轉」指引項目,當網頁只能不斷往下滑,首次使用時會覺得網站將整個疫情資訊的故事脈落解釋得非常清楚,但了解整個網站脈絡,第二次使用時想直接跳轉到自己最想觀看的資訊,卻還是要從頭下拉⋯⋯,就會開始產生不耐與煩躁感,產生對操作體驗過程的負面感受。

簡單針對以上十三個疫情資訊平台進行分享,不過平台其實沒有絕對優劣,主要還是必須回到使用者的需求。假如今天想單純專注在一兩項主要資訊呈現,那麼約翰霍普金斯大學微軟Bing平台衛福部疫情地圖,以及台灣工程師自製疫情追蹤平台 或許很適合作為關注的平台。但如果使用者是沒有徹底了解不罷休的資訊收集狂人,相信 報導者 所提供的疫情資訊網站比起其他平台來說會是不錯的選擇。

當然我們平時就能輕易接觸到的社群平台(Social Media)上也有許多揭露疫情資訊的地方,是前面沒有提到的,例如透過 Facebook 追蹤疾病管制署粉絲專頁,或是 Line 新聞提供的相關資訊,也都可以是關心疫情的一種數位渠道。

關於疫情資訊平台,不知道有沒有我們沒有發現卻很好用的平台?或是與我們相同、不同的看法呢? 在下方留言與我們分享吧!

最後,不妨給自己來個小挑戰:疫情資訊平台,你會怎麼做?

資訊視覺化在疫情資訊平台中扮演著重要的角色,而在看完這麼多平台之後,想想看今天換成自己要進行一個提供疫情資訊平台的專案,你會如何去規劃呢?
從思考平台的目的、定位,接著平台會呈現哪些資訊?又要用什麼樣的方式呈現?為什麼這個方式你覺得能夠讓使用者理解資訊?⋯⋯

這個問題就留給大家思考囉!(我們團隊也有簡單發想及交流,有興趣的話可以來交換腦洞大開後的想法!)

非常謝謝大家願意耐心看完這次的長文!這次疫情造成了經濟以及產業間很大的變動與影響,但也因為這樣,各行各業在數位科技上的轉型與可能性也讓人耳目一新。從五月上旬開始,台灣疫情的狀況也慢慢被控制下來,雖然還無法馬上回到疫情前的情景,但終於能夠稍微喘口氣,迎接炎夏的陽光。不過在這邊還是要提醒各位,疫苗的研發還需要一些時間,大家要多注意,別太鬆懈啊!

***喜歡本篇設計經驗分享,請盡情使用文章的 Claps 功能給予鼓勵!你覺得這文章...
還行→ 1~10 個 Claps
不錯→ 11~20 個 Claps
很好→ 21~30 個 Claps
超棒→ 31~40 個 Claps
太神了→ 41~50 個 Claps
這篇文章也會同步在 UX Insight 發布,UX Insight 會不定時分享團隊在執行專案上的經驗,歡迎大家 Follow,有任何想法也可以到 Facebook粉絲專頁 私訊討論!

--

--