具視覺化工具輔助的新聞瀏覽系統設計

全文

(1)國立臺灣師範大學圖書資訊學研究所碩士學位論文. 指導教授：謝吉隆博士. 具視覺化工具輔助的新聞瀏覽系統設計 Designing a network-based concept visualizer to navigate news searching and browsing. 研究生：沈柏辰撰中華民國一 ○ 一年六月. i.

(2) ii.

(3) 謝辭於師大圖資所二年以來的求學歷程，終將在此畫下句點，無論是研究的進行或是鑽寫論文上遇到的任何困難，受惠於我者，實在太多。由衷感謝指導教授吉隆老師的指點，對於「研究」懵懵懂懂的初學者來說，真的是受益良多，而從老師身上學到的不僅僅是如何「如何作研究」這件事，如何思考、正確的人生觀與態度，也是從老師的指導下學到的畢生受用之事。也感謝口試委員柯皓仁與黃明居老師，在計劃書與論文上的指教，清楚的指點出論文的利弊所在，讓研究能夠更為完整。感謝研究所求學歷程中給予指教的各位圖資所的老師、學長姐與同學們，在研究進行中給予相關的建議；論文內容的訂正與修改；感謝苑菁、奕翔兩位助教，在求學與研究各方面的協助。謝謝學姊林芳伶、楊偲傑與學長吳佳典，在論文鑽寫上給予的寶貴建議。感謝同學倪瑋鴻、李威毅、王文杰與林文傑，在求學與研究過程中給予支持與幫助，最重的是在我遇到困難與迷惘時給予我動力。想要感謝的人實在太多，對於不善言辭的我來說，無法依依表達心中的感恩。感謝所有在這兩年幫助過我、支持體諒我的各位。沈柏辰. 謹致. 2012 年，6 月. iii.

(4) 摘要網路新聞的蓬勃發展，使得民眾得以輕易且迅速的取得新聞資訊，但卻因資訊量過於龐大、難以消化，進而衍生資訊的可搜尋性問題。過去的研究指出當使用者不了解其所欲尋找的資訊時，搜尋引擎無法幫助使用者找到正確的資訊，例如下關鍵字的問題。故過去亦有研究者嘗試利用自動化摘要、相關性回饋、資訊視覺化等方法試圖幫助使用者能夠獲取有效且受用的資訊。著眼於此，本研究利用動態網絡視覺化方法自行開發一套新聞互動導覽系統，系統包含利用網絡圖進行關鍵字推薦、瀏覽歷程紀錄與控制、繪圖原則切換、資訊過濾與資訊分群等功能，以引導使用者搜尋與瀏覽新聞資訊。在系統評估方面，本研究透過問卷、訪談、歷程序列分析等方法可發現本系統獲得以下正面回饋：1) 本系統利用網絡圖進行關鍵字推薦與群集幫助使用者有效挖掘相關資訊；2) 網絡繪圖規則切換能夠幫助使用者以更多不同的角度瀏覽資訊；3) 關鍵字共現強度濾器，能夠幫助使用者過濾複雜的資訊，以助於進行下一步驟之瀏覽；4) 歷程紀錄與控制功能，能夠導航使用者的瀏覽過程，並自我定位瀏覽路徑。然而，亦有使用者表示在操作性或認知上的負面回饋，例如，有使用者提及雖然系統提供相當多元的功能幫助進行新聞瀏覽，但使用門檻高，使用時不易理解種多功能所能帶來之助益。關鍵字：概念圖、資訊視覺化、新聞導覽. iv.

(5) Abstract The raising of online news allows people to obtain and access the news information easily, however, also increases the difficulty to search browse, and digest daily news. To assist users in news browsing and searching, this study built up a dynamic network visualization tool composed of visualized concept maps, trends of keywords, and interactive browsing paths, and related news contents. Users can drag and click on terms to expand related ones, traverse or alter the browsing path, and explore the concept network from different points of view. Three layout methods of visualizing concept maps were implemented to list and cluster concepts for different purposes. A user study was conducted to evaluate the usefulness and usability of our tool. The results of the user study showed both positive and negative opinions from our participants. They agreed that network-based visualizer provides related terms for the next browsing, and the interactive browsing path can help them control the set of related news. However, some of the participants indicated that the visualized features were too complex and even confusing for use. Keywords: concept map, information visualization, news navigation. v.

(6) 目錄第一章緒論 ............................................................................................................... 1 第一節研究背景動機........................................................................................ 1 第二節研究目的................................................................................................ 5 第三節研究範圍與限制.................................................................................... 6 第二章文獻探討 ....................................................................................................... 7 第一節使用者的資訊搜尋、瀏覽策略與視覺化輔助之導覽系統................ 7 第二節資訊視覺化簡介與新聞應用實例...................................................... 14 第三節網絡視覺化演算法.............................................................................. 28 第四節視覺化系統的使用者評估方法與研究案例...................................... 30 第五節小結...................................................................................................... 33 第三章研究方法 ..................................................................................................... 35 第一節系統流程與架構.................................................................................. 36 第二節繪圖演算法.......................................................................................... 43 第三節新聞資料蒐集與格式範例.................................................................. 48 第四節使用者評估方法.................................................................................. 48 第四章系統展示與使用者評估結果 ..................................................................... 55 第一節系統建構與元件.................................................................................. 55 第二節系統功能與展示.................................................................................. 58 第三節使用者評估.......................................................................................... 63 第五章結論、研究貢獻與未來發展 ..................................................................... 75 第一節結論...................................................................................................... 75 第二節研究貢獻.............................................................................................. 79 第三節未來發展.............................................................................................. 80 參考文獻 ..................................................................................................................... 83 中文部份.............................................................................................................. 83 英文部份.............................................................................................................. 84 附錄 ............................................................................................................................. 91 附件 1 使用者滿意度問卷.............................................................................. 91 附件 2 新聞主題搜尋任務說明...................................................................... 92 附件 3 循序樣式探勘結果一覽表 ................................................................. 93 附件 4. 訪談逐字稿.......................................................................................... 95. vi.

(7) 表次表表表表表表表表. 1 2 3 4 5 6 7 8. 相關視覺化介面特色整理.......................................................................... 17 過去視覺化研究所使用的研究案例與資料來源...................................... 31 關鍵字萃取範例.......................................................................................... 40 本研究使用的新聞資料格式範例，一篇來自聯合新聞網的新聞文章.. 48 訪談大綱...................................................................................................... 50 新聞主題任務中使用者情形之編碼一覽表 ............................................. 53 依據介面元件歸納使用者正面與負面回饋.............................................. 64 受試者序列樣式 ......................................................................................... 69. vii.

(8) 圖次圖圖圖圖圖圖圖圖圖. 1 2 3 4 5 6 7 8 9. 自由時報電子報將中央社的新聞轉載於其網站中.................................... 2 採莓模式........................................................................................................ 8 Google 搜索羅盤 ......................................................................................... 11 Navigator 視覺化導覽系統......................................................................... 12 Knowledge Search Portal 視覺化輔助搜尋系統 ........................................ 13 視覺化技術的分類...................................................................................... 15 NewsMap 新聞視覺化介面 ........................................................................ 18 NewsMap 以中文資料為主的新聞視覺化介面 ........................................ 19 Viszter 探勘社交網絡的視覺化介面 ......................................................... 21. 圖圖圖圖圖圖圖圖圖圖. 10 11 12 13 14 15 16 17 18 19. Blog Keyword Visualizer，監控式視覺化介面 ....................................... 22 動態網絡分析視覺化系統 ........................................................................ 23 Newdle 新文藝提視覺化系統 .................................................................. 24 ThemeRiver 新聞視覺化系統................................................................... 25 利用新聞資料自動繪製的概念圖............................................................ 27 系統流程圖................................................................................................ 36 系統架構圖 ............................................................................................... 37 以星狀圖與網路圖呈現關鍵字的差異.................................................... 41 使用者評估架構與流程............................................................................ 49 AprioriAll 演算法 ....................................................................................... 52. 圖圖圖圖圖圖圖. 20 21 22 23 24 25 26. 系統部屬圖................................................................................................ 55 系統介面概觀............................................................................................ 58 三種繪圖演算法的網絡圖........................................................................ 60 關係強度門檻值的設定。........................................................................ 60 歷程記錄與歷程控制 ............................................................................... 62 時間區間設定 ........................................................................................... 63 使用滿意度................................................................................................ 73. viii.

(9) 第一章. 緒論. 第一節研究背景動機隨著網際網路的普及與儲存技術的發達，傳統於紙本上紀錄與傳遞資訊之方式，得以透過網路以數位化的方式傳遞，大部份的民眾皆能夠利用網路快速的獲取或是儲存資訊，而網路新聞也在這樣的環境之下蓬勃發展。以台灣的新聞業為例，新聞報社除了經營傳統的紙本新聞外，也各自發展新聞網站，讓民眾能夠即時、全天候於網路上接收新聞資訊。World Association of Newspapers (WAN) 於 2008 年針對全世界 232 個國家進行網路新聞閱讀的調查，其報告指出每日經由網路散播的新聞大約多達 573,235,00 篇，有 1.75 億的人口閱讀這些網路新聞，而目前已有將近 4,500 個新聞網站提供網路新聞（引自 Oliver, 2008）。然而，網路新聞亦因網路的開放環境、媒介的多樣性、發佈的方便性等因素產生了如 David Shenk（1997）所提及的資料煙霾（Data Smog）。提供網路新聞的網站大致上有兩種，第一種是實體報社所建置的新聞網站，主要提供該報社記者所發的新聞稿（紙本與網路同步刊登），例如：中央通訊社（CNA）的即時新聞網1、中國時報（Chinatimes）的中時電子報2、聯合報（UDN）的聯合新聞網3、台視新聞（TTV）4等等；另一種則是為了整合這些報社提供的網路新聞而出現的整合式新聞網站，讓使用者能夠同時跨越多個新聞網站閱讀新聞，例如，Google. 1. http://www2.cna.com.tw/. 2. http://news.chinatimes.com/. 3. http://udn.com/NEWS/mainpage.shtml. 4. http://www.ttv.com.tw/news/ 1.

(10) 新聞5、Yahoo 新聞6、PCHome 新聞7等等。值得注意的是，除了整合式的新聞網站會將報社新聞網站中的新聞轉載於其網站之中外，報社新聞網站也會轉載其他報社新聞網站中的新聞，例如，圖 1 中自由時報將中央社一篇關於「塑化劑」的新聞，連同原標題轉載於其網站中。雖然中央通訊社之背景屬較特殊的報社，其販賣新聞稿或是消息來源予以其他報社，其同時發展新聞網站發布網路新聞稿，對於一般大眾來說，這樣的環境導致內容相同的新聞重複的被刊登在不同的新聞網站中，使用者必須自我過濾這些重複的新聞資訊。除此之外，由於 Web2.0 消費端生產（Peer-produced）的概念，使得新聞網站也會有許多自由記者、網路記者，或者一般網民進行投稿，和統一經過報社編輯發佈的紙本新聞相較之下，專業性與可信度接受到質疑。. 圖 1 自由時報電子報將中央社的新聞轉載於其網站中資料來源：http://www.libertytimes.com.tw/index.htm. 因應網路環境所帶來的資訊量龐大、重複、尋獲不易、以及可信度有待商榷等問題，搜尋引擎、人工或自動化分類、視覺化介面等許多的人工智慧或網路技. 5. http://news.google.com/nwshp?hl=zh-TW&tab=wn. 6. http://tw.news.yahoo.com/. 7. http://news.pchome.com.tw/ 2.

(11) 術不斷地被開發協助使用者消化這些網路資訊。搜尋引擎在今日往往能夠協助使用者解決資訊量過於龐大的問題，然而，利用搜尋引擎獲取資訊的前提是使用者確切的知道自己正在尋找目標，但是一般使用者不見得總是能夠清楚定義究竟想要尋找什麼，也因此，使用者無法確切的組織關鍵字，獲得正確的資訊（Delphi Group, 2004; Pu, Chuang & Yang, 2002 ）。亦有研究者利用自動化摘要（Auto-summarizer）方法彙整歸納必要資訊予以使用者閱讀。自動化摘要的主要作法為萃取多份與事件相關的新聞文章，進行彙整摘要後，產生描述事件重要人事時地物的彙報使用者（劉政璋、葉鎮源、柯皓仁與楊維邦，2005；McKeown, & Radev, 1995；Barzilay, Mckeown, & Elhadad, 1999；Bloedorn, 1999）。其可結合相似性回饋（Relevance Feedback）、詞彙擴展（Query Expansion）、及術語推薦（Term Suggestion）的方法於使用者的搜尋結果中更進一步地取出相關的特徵與更多相關的結果予以使用者作選擇。在資訊視覺化的技術方面，利用資訊視覺化的技術能夠幫助使用者以更多的角度來瀏覽資料。加州大學軟體研究機構中的資訊視覺化團隊在其網站上便提及：「資料以視覺化的方式呈現，是將資訊摘錄成視覺形式，讓使用者更輕易的理解與辨識資訊中重要的特徵、快速的找到資料中的規則與挖掘資料中更深層的含意。互動的資訊視覺化更能夠讓使用者經由呈現的改變以更不同的視角檢視資訊」（Institute for Software Research at University of California, n.d.）。在新聞視覺化的應用上，國內則有 Tseng、Chang、Rundgren 與 Rundgren 於 2010 年利用資訊擷取方法取出新聞文件中的關鍵字並建立詞彙貢獻關係，再將其繪製為網絡狀的概念圖（Concept Map）來引導使用者閱讀相關新聞。上述的網絡視覺化方法主要是以網絡圖來呈現辭彙、主題、概念與其間的關係，目前已被應用在教育學習或資訊科學等數個領域中。其被認為能夠達到以下功能：. 3.

(12) 1.. 外化概念結構：概念圖能夠外化概念的關係網絡幫助人們將學習到的知識概念化（Novak & Gowin, 1984）。. 2.. 資訊監控：例如 So-Net（n.d.）的 Blog Keywords Visualizer 提供網絡化的部落格熱門關鍵字，即時呈現熱門詞彙的脈絡。. 3.. 導覽搜尋：輔助使用者進行資訊搜尋，例如，Tseng (n.d.)所開發的知識入口系統平台(Knowledge Search Portal, KSP)，以網絡圖幫助使用者搜尋或瀏覽新聞。而網絡圖並不僅侷限於辭彙關係的表現，更重要的是關係的連結使得兩辭彙更加的受到注視，且相互增強了兩辭彙在文字內容中的背景知識。例如，「日本」與「地震」兩個關鍵字，若兩者單獨出現，使用者可能會忽略此二關鍵字，但是當兩者存在關係連線時，使用者可能會因此而產生興趣，想要進一步了解此二關鍵字究竟是在怎樣的背景之下產生關聯的（Tseng, Chang, Rundgren, & Rundgren, 2010）。藉著呈現關鍵字間的關係脈絡，有效地提供使用者相關關鍵字的推薦，使用者不必憑空聯想與重新定義關鍵字。. 綜以上所述，無論是透過資訊擷取或視覺化方法，過去發展的系統都在嘗試導覽（Navigate）使用者，提供某資料群（Data Set）的概觀或者資訊給使用者。導覽的目的也就是提供不同的觀察角度，讓使用者在瀏覽資訊時能夠自我定位而減少迷失方向的情況（Tufte, 1990），而得以在龐大的資料中順利獲取所需的資訊。因應使用者經常需要以時而宏觀，時而微觀的多重視角來掌握資訊的脈絡，因此，本研究將設計一個動態視覺化互動新聞瀏覽輔助工具，導覽使用者以獲取更好的網路新聞閱讀經驗。在實際執行項目上，本研究將文字處理的技術與視覺化技術作結合，發展一套利用網路圖幫助使用者搜尋或瀏覽新聞的導覽視覺化系統，其中納入更多視覺化繪圖的技術與互動功能的開發，希望能夠發展一套除了在瀏覽或搜尋時能夠呈現關鍵字的網絡圖導覽使用者，同時還能夠讓使用者更加彈性的切換觀察角度、記錄使用者的瀏覽過程，直接的與資料進行互動，引導使 4.

(13) 用者利用這些功能尋找正確的資訊。. 第二節研究目的本研究的目的在於利用網絡圖對新聞資訊進行視覺化，給予使用者一個整體資訊的綜覽圖。並在使用者搜尋或瀏覽資訊時，利用互動功能幫助使用者紀錄或是進一步控制瀏覽歷程，亦或提供多元繪圖規則與過濾資訊，幫助使用者能夠以更多不同角度進行瀏覽，可以有效導覽使用者，讓使用者不會迷失於龐大資訊當中。為了達到這些目的，本研究歸納了過去研究中資訊瀏覽之輔助工具的優缺點，以作為開發本新聞導覽工具的基礎，依據上述目的，本研究的工具可包含網絡關鍵字推薦與外化、歷程紀錄與控制、網絡繪圖規則切換與關鍵字共現強度過濾等四項主要功能。本研究在完成系統開發後，以問卷調查、訪談與歷程序列分析進行使用者評估，以了解本系統的實際使用狀況與優缺點。預期目標點列如下：一、提供視覺化資訊推薦、歷程紀錄與控制、過濾資訊與資訊分群導覽使用者的新聞瀏覽或搜尋的視覺化新聞導覽系統本研究所開發之系統，利用網絡圖達成關鍵字推薦，利用網絡圖的呈現引導使用者進行瀏覽活動，同時設計視覺化的互動功能幫助使用者紀錄與控制瀏覽歷程，能夠自我定位。另一方面，當使用者面對過於大量的關鍵字時，能夠利用資訊過濾減少呈現的關鍵字，同時本研究所開發的系統中能夠讓使用者切換網絡圖的呈現方式，其中包含能夠呈現關鍵字分群的繪圖規則，給予使用者一個關鍵字子群的概觀，幫助使用者分類關鍵字，以更多不同的角度瀏覽資訊。二、透過使用者評估了解使用者實際的新聞瀏覽情形本研究除了結合資訊推薦、歷程記錄與控制、過濾資訊與資訊分群導覽 5.

(14) 使用者進行新聞瀏覽或搜尋外，同時希望透過使用者的實際使用來了解使用者究竟如何使用這些功能，是否使用者於使用過程中，產生類似或相同的瀏覽策略與行為，並藉由訪談了解使用者於使用過後的個人觀感。. 第三節研究範圍與限制本研究於資料的使用方面有下列之限制：一、資料來源：由於網路新聞的來源相當多，故本研究僅以聯合新聞網與中時電子報於 2011 年 1 月 1 日至 12 月 31 日共一年的網路新聞為主要探討的資料。二、語言限制：因使用的資料為中文新聞，所以視覺化的資料以中文為主，雖有對英文做索引，但因為資料量太少，所以通常不會出現在相關詞彙中。三、新聞資料格式限制：由於本研究設計的新聞資料爬蟲，以及研究所採用的資料分析方法，主要以處裡文字資料為主，因此僅探討文字格式的網路新聞資料，不包含其他多媒體影音格式的新聞。四、關鍵字萃取品質：概念網絡的視覺化介面需要資料處理的技術為基礎，然而本研究目前著重導覽視覺化介面的開發與互動功能的展現上，因此，關鍵字萃取的品質目前顯有不足之處，雖然其中納入詞性過濾的機制，但是仍然無法完全地將某些特殊的無異議連字去除（例如，「但因」或是「人大」等等）。. 6.

(15) 第二章. 文獻探討. 本章第一節所探討的是使用者的搜尋行為、瀏覽策略與視覺化輔助之導覽系統，主要整理過去探討使用者於搜尋與瀏覽時會產生何種行為的相關研究；第二節探討相關的資訊視覺化研究，主要探討過去資訊視覺化技術的概念與特色；第三節探討網絡圖演算法，主要討論過去繪製網絡圖演算法的利弊；第四節探討相關研究中所採用的使用者評估方法與研究案例；第五節將針對前四小節所整理與探討的內容作小結。. 第一節. 使用者的資訊搜尋、瀏覽策略與視覺化輔助之導覽系統. 導覽系統的設計應與使用者日常慣用的資訊搜尋或者瀏覽行為一致，因此本小節先回顧資訊搜尋與資訊瀏覽的相關研究，再接著探討過去或現有的視覺化導覽系統。. 一、. 資訊搜尋（Information Searching）. 使用者有目的的尋找資訊時，並不是一個永遠以單一方向進行的流程。雖然大多數的搜尋系統在使用流程上，是以關鍵字輸入、匹配結果、輸出結果來進行一次性的處理，但是對於使用者來說，為了找到正確的目標資訊，使用者會不斷的反覆進行搜尋，而在每次的搜尋都可能會提升搜尋結果的品質。 Bates（1989）的「採莓模式」便是在描述如此一連串的活動。如圖 2 所示，對於使用者來說，若搜尋活動的單位是從產生問題到利用搜尋系統解決問題，那麼使用者通常並不會只做一次的搜尋，而是多次的搜尋，使用者會因為每次找到的搜尋結果，而不斷地重新定義問題或是產生問題，然後接著再次進行搜尋。另一方面，Bates 也同時提到，使用者在瀏覽搜尋結果時，有著不同的行為，有些使用者會先總覽所有排在最前面的結果，而有些使用者則逐一的檢視搜尋結果。. 7.

(16) 圖 2 採莓模式資料來源：Bates, M., J. (1989). The design of browsing and berrypicking techniques for the online search interface. Online Information Review, 13(5), 407–424.. 事實上，每個人在進行搜尋時會採用的搜尋方式不盡相同。卜小蝶與陳思穎（2007）嘗試利用兩種不同的搜尋系統來比較搜尋時的使用差異，其一為具自動分群目錄為輔的搜尋引擎；其二為一般的搜尋引擎。研究結果顯示，大部份的使用者對於分群目錄的接受度高；分群目錄的功能，能夠幫助使用者過濾大量的資訊；分群也的確能夠幫助使用者縮小搜尋範圍。有趣的是，此研究發現使用者的注意力是使用分群目錄的成效關鍵，因為使用者的注意力有限，有的時候會因為將注意力集中於分群目錄中的結果，而導致遺忘搜尋任務；而有的時候，使用者會因為分群目錄將搜尋範圍縮小而感到焦慮，擔心會因此遺漏重要的資訊。以一般的搜尋引擎來說，因為搜尋引擎通常不會根據上一次使用者進行的搜尋做為參考來匹配相關的搜尋結果，搜尋引擎都是一次性的輸入與輸出，而使用者的短期記憶又是有限的，通常會因為多次的搜尋而遺忘了前幾次搜尋得到的重要資訊。但是值得思考的是，若使用者會因為搜尋結果的範圍縮小，而產生遺失主要搜尋目標的焦慮（卜小蝶、陳思穎，2007），是否使用者還需要利用其他的輔助資訊來幫助搜尋活動的進行？再者，究竟該以什麼樣子的方式來引導使用者，讓使用者能夠不會因為輔助的資訊，而遺失原來的搜尋目標？ 8.

(17) 二、. 使用者瀏覽策略（Browsing Strategy）. 使用者經常藉由「瀏覽（Browsing）」檢閱資訊。根據 Delphi Group（2004）針對知識工作者的調查，知識工作者花費超過 20%的時間進行資訊的搜尋；其中約 70%的時間花費在瀏覽資訊。於 Yahoo!的市場調查中指出，75%的使用者偏好瀏覽資訊，而非搜尋資訊。相較於搜尋，瀏覽則更注重「發現（Discovery）」資訊，使用者之所以花費大多的時間瀏覽資訊，而非直接利用關鍵字進行搜尋，是因為使用者希望透過瀏覽來發現真正能夠找到相關資訊的關鍵字（Delphi Group, 2004）。在行為科學的領域中，搜尋與瀏覽一直都是難以區分的兩個名詞。Bates （1989）認為在資訊科學的領域中，通常著重於使用者如何搜尋資訊的行為，而較少關注使用者如何進行資訊的瀏覽。由於本研究的目的在於開發一套能夠導覽使用者瀏覽或尋找資訊的工具，不探討此二名詞在定義上有何不同，但是有必要了解，究竟使用者在於瀏覽資訊時，會產生怎麼樣的瀏覽行為。依據 Cove 與 Walsh 在 1988 年的研究對於瀏覽策略的分類，大致上可分為三種： 1.. 搜尋瀏覽：封閉的且結構化的瀏覽活動，具有目的性的尋找資訊。. 2.. 一般瀏覽：對資訊是有需求的，但很可能對大部份的資訊產生興趣。. 3.. 偶然瀏覽：完全開放且無結構的瀏覽活動。. 根據這樣的分類可以發現，瀏覽在某種程度上與搜尋是類似的，因為瀏覽並不全然是毫無目的，只是很可能因為目標的模糊，而產生較無結構化的行為。也因此目前的瀏覽器（例如 Google Chrome），都會提供「上一頁」與「下一頁」的功能，這兩項功能使得人們在探索無以邊際的網路世界時不至於迷失方向。 Catledge 與 Pitkow（1995）嘗試瞭解究竟使用者通常都使用瀏覽器的哪些功能，. 9.

(18) 此研究分析了使用者使用瀏覽器 Masaiz8的紀錄檔（log files）。在分析瀏覽器功能的使用頻率發現，使用者在瀏覽資訊時，最常使用的功能為「超連結」（52%），其次為「上一頁」（41%）。而其他功能被使用的比率則遠低於二者，依序為開放式定位址（2%）、我的最愛（2%）、下一頁（2%）等。該研究指出，最常使用的探索策略有二，其一為「回歸原路（Leave as You’ve Entered）」，也就是使用者探索中經常到回上一頁，顯示出使用者常以小範圍的在某一個網站中瀏覽；其二為「回歸原位（Looping Back）」，指的是使用者經常利用瀏覽歷程清單或是「回首頁（home）」來重新進行瀏覽。前者是指所有使用者都經常使用倒退鍵回溯原路，小範圍內進行搜索；而後者則是使用者在經過一段時間的探索後，利用歷程清單或首頁圖示回到起始點再重新出發。瀏覽行為的類型依使用者異動紀錄的頻率及瀏覽網頁的模式又可分為三種層級：善於發現意外的使用者、一般目的的使用者及檢索者。對於網站設計者而言，考慮到使用者可能於網站中產生的各種瀏覽行為，進而設計出相對應的功能是必須的。因為瀏覽是相當動態的，必須建置適切的導覽功能，引導使用者獲取正確的相關資訊（Delphi Group, 2004）。Peter 與 Jeffery （2010）針對網站設計提出建議，認為一個設計完善的網站，應該要同時能夠具備搜尋與瀏覽的功能，否則使用者永遠都無法取得正確的資訊，而通常網站設計者無法得知使用者是否取得了正確的資訊。. 三、. 視覺化輔助之導覽系統. 視覺化輔助之導覽系統能夠幫助使用者在搜尋或是瀏覽的過程中，利用視覺化的輔助，來提升搜尋與瀏覽的效益。除了能夠幫助使用者將結果分類的自動分群目錄外（卜小蝶、陳思穎，2007），當今已有許多嘗試引導使用者進行資訊搜尋與瀏覽的視覺化工具如下。. 8. http://www.ncsa.illinois.edu/Projects/mosaic.html 10.

(19) （一） Google 搜索羅盤資訊視覺化事實上能夠輔助使用者尋找資訊。Google 搜索羅盤（Google Wonder Wheel）是一個利用搜尋引擎的技術加上關鍵字視覺化的導覽系統。當使用者輸入關鍵字後，會出現更多相關的關鍵字，便如「羅盤」的意思一般，這樣的呈現方式主要目的在於「導航」使用者進行下一步的搜尋與瀏覽。如圖 3 所示，當使用者輸入「Apple」於搜索羅盤中，會顯示出此關鍵字與「apple iphone」、「apple hk」、「apple news」等等有關，接著點擊「apple iphone」，在介面中便會出現與「apple iphone」關鍵字相關的關鍵字，簡單的來說，使用者同時能夠經由點擊介面上的關鍵字，直接進行相關關鍵字的搜尋，而不必再次輸入關鍵字。. 圖 3. Google 搜索羅盤. 資料來源：http://www.googlewonderwheel.com/.. 這樣的互動方式，有助於解決 Pu、Chuang 與 Yang（2002）所提到的問題，使用者通常無法定義準確的關鍵字，且無法預測文件中可能會使用的詞彙。再者，使用者藉由這樣的輔助，當結果並不符合需求時，能夠不必重新定義關鍵字。因為一般的搜尋引擎，通常僅找出符合關鍵字的結果，並不會同時在找到的結果中標示可能重要的關鍵字，這樣的一問一答的方式在某些搜尋的情境下並不是適用的。例如，「日本強震」這個關鍵字進入搜尋引擎後，搜尋引擎並不會告訴使用 11.

(20) 者，事實上「日本強震」與「輻射」、「核電廠」相關，對於一般的搜尋引擎使用者來說，要得到「日本強震導致核電廠爆炸，輻射外洩」這樣的資訊可能需要將大部份符合「日本強震」的搜尋結果瀏覽一遍才能得到。像是搜索羅盤的視覺化輔助搜尋，對使用者最重要的幫助是能夠立即的讓使用者看見那些未知的關鍵字，讓使用者能夠藉由一次的關鍵字輸入，前往更多不只侷限於該關鍵字的搜尋結果。（二） Navigator Navigator 為一個利用視覺化輔助的導覽系統，由 TouchGraph9所開發。與搜索羅盤相同的是，二者皆使用搜尋引擎的技術，但是 Navigator 著重在於利用星狀圖來呈現關鍵字與網域（Doman Name）的關係。如圖 4 所示，首先輸入「earthquake」再輸入「japan earthquake」，在介面中便能看見兩個關鍵字於「Youtube」與「earthquake.usgs.gov」兩個網域中共同出現較多的結果。. 圖 4. Navigator 視覺化導覽系統. 資料來源：http://www.touchgraph.com. 9. http://www.touchgraph.com/navigator 12.

(21) （三） Knowledge Search Portal Tseng (n.d.)所開發的知識入口系統平台(Knowledge Search Portal, KSP)，為國立臺灣師範大學圖書館10所提供的一個利用視覺化輔助新聞搜尋的網站。如圖 5 所示，此網站不僅提供搜尋引擎的功能，在右方同時呈現關鍵字的星狀圖與長條圖來導覽使用者，告訴使用者目前輸入的關鍵字與哪些關鍵字相關；此關鍵字在各時間點上的新聞量。使用者能夠藉由點擊星狀圖中的相關關鍵字直接進行搜尋，同時找出此關鍵字的相關關鍵字並以延展的方式視覺化於原本的星狀圖中。利用這種視覺化方法，使用者不需要自行聯想關鍵字，也不需要自行去探究關鍵字的熱門時間點。這種以視覺化進行互動的方式，似乎能夠紀錄使用者一連串的關鍵字搜尋，而使用者不必瀏覽搜尋結果來自行定義關鍵字。. 圖 5. Knowledge Search Portal 視覺化輔助搜尋系統. 資料來源：http://ir.itc.ntnu.edu.tw/udn/search.aspx#. 綜上所述，以視覺化為輔的互動式系統，在視覺化的方法上大多採用星狀圖來呈現主要關鍵字與相關關鍵字，但是研究者認為這樣的呈現方式其實與簡單的 10. http://ir.itc.ntnu.edu.tw/udn/search.aspx# 13.

(22) 文字標籤是相同的，若利用網絡圖來呈現，能夠給予使用者更多的資訊，例如，「塑化劑」與「起雲劑」、「飲料」等等關鍵字相關，若以星狀圖表示「起雲劑」與「飲料」之間並不會有連線，這樣使用者可能會認為，「起雲劑會不會是塑化劑的其中一種成份？」，但是若將兩者之間連線，使用者可能就會聯想到，「塑化劑」與「起雲劑」都可能會被加在「飲料」中。. 第二節. 資訊視覺化簡介與新聞應用實例. 一、資訊視覺化的定義與分類資訊視覺化能夠幫助人們以更全面性的解析資料，甚至直接地與資訊進行互動。Gershon、Eick與Card（1998）將資訊視覺化定義為「一個能夠使人類以視覺能力將資料、資訊與知識轉化成視覺型態的過程」，Chittaro（2001）指出，資訊視覺化是一種經由完好設計且適切地呈現資料的科技，它能夠幫助人們降低理解與檢測資訊時產生的複雜度。而資訊視覺化的技術有很多，在進行視覺化技術的開發之前，必須先理解視覺化技術的類型，以便對於不同資料設計出合適的視覺化技術。Keim在2002年的「Information Visualization and Visual Data Mining」一文中以一個三維圖分類了六種不同的視覺化資料、五種資訊視覺化技術與六種資訊互動方式，圖 6為該研究中對於視覺化資料、技術與互動模式的分類。. 14.

(23) 圖 6 視覺化技術的分類資料來源：Keim, D., A., (2002). Information Visualization and Visual Data Mining. IEEE Transactions on Visualization and Computer Graphic, 8(1), 1-8.. 除了經由技術類型與資料類型作為設計視覺化技術的參考外，還必須考慮到使用者經驗與使用的適切性。Shneiderman（1996）認為視覺化的設計應該要符合使用者利用視覺觀察圖像的數個步驟，首先是觀察介面的整體概貌、縮放與過濾最後是細節的需求。當使用者看見一個視覺介面，首先會先以最大的焦距觀察整體的介面，接著進一步的縮放視角或是排除使用者認為不重要的物件，最後使用者可能會需要對某個物件其包含的細節做更深入的了解。. 二、視覺化維度與特色過去有許多的資訊視覺化系統，其目的不盡相同，相對的，視覺化的維度也不同，如同Keim（2002）依據資料類型、視覺化技術與互動模式所做的視覺化分類便分出許多不同的種類。而資料分析大致上能夠區分為兩種，第一種是著重在資料的結構呈現，例如階層式的結構或是網絡結構；第二種則著重時間相關維度的呈現（Silva & Catarci, 2000）。設計一個介面能同時呈現網絡結構和時間相關維度通常很困難，因為時間本身是一種循序或是序列的維度，其目的通常是在 15.

(24) 於表達一份資料的頻率、形式或是趨勢等；而網絡結構屬於一種「拓樸結構」，目的是利用節點與線來表達多個物件的關係，節點與節點之間並無循序性或是序列性。此外，在視覺化介面中加入「互動」的機制，能夠降低呈現資料的複雜度使介面不僅僅是「將資料圖像化」的呈現，同時也能夠讓使用者直接的去與資料作對話；使用者不僅能有視覺上的觀察，還能夠擁有「觸覺」的感官，例如呈現網絡關係時，不免會因為節點過多而導致呈現的網絡圖變得相當複雜，設計互動機制也許便能夠讓使用者藉由「拖曳」節點或是「刪除」節點，觀察想要觀察的某些節點。. 三、相關的視覺化介面為了瞭解過去相關的新聞視覺化介面的特色，與其如何幫助使用者尋找或是瀏覽新聞資訊，除了探討相關介面的技術外，同時藉由資訊推薦、瀏覽歷程、過濾資訊與分群或分類四項特色探討相關介面的呈現方式與互動功能，表 1 為依據此四項特色將過去相關的視覺化介面所做的整理，透過這樣的整理釐清過去的視覺化介面能夠如何幫助使用者進行新聞的瀏覽。. 16.

(25) 表 1 相關視覺化介面特色整理新聞視覺化研究. 資訊推薦. NewsMap（Weskamp, 2006）. ◎. NewsMap （ Ong, Chen, Sung, & Zhu,. ◎. 瀏覽歷程. 過濾資訊. 分群或分類. ◎. ◎. ◎. ◎. 2005） ◎. Viszter（Heer & Boyd, 2005）. ◎. Blog Keyword Visualizer（SoNet, n.d.）. ◎. Newdle（Yang, Luo, & Liu, 2010）. ◎. ◎. ThemeRiver. ◎. ◎. （ Havre, Hetzler, Whitney, & Nowell, 2002）動態網絡分析視覺化系統. ◎. ◎. ◎. （Chung, Liu, Li, & Chen, 2010）資料來源：研究者整理. . 資訊推薦：給予使用者相關的新聞議題或是關鍵字推薦。. . 瀏覽歷程：呈現使用者的瀏覽歷程或是提供互動功能幫助控制歷程。. . 過濾資訊：提供互動功能幫助使用者過濾資訊，降低介面的複雜度。. . 分群或分類：將資訊進行分群或是分類。. （一） NewsMap 呈現資料的階層式結構，更能夠幫助使用者快速的發現相關的資訊。 NewsMap （ Weskamp, 2006 ）是一個網路新聞視覺化介面，採用 TreeMap （Shneiderman, 1992 ）的技術呈現新聞主題的新聞量，並且利用群集分析（Clustering）的技術將所有新聞的議題以顏色做分類。而TreeMap是一個將傳統帶有節點重量的階層式樹狀圖以區塊的方式呈現的視覺化技術。Keim（2002）將TreeMap 分類為「堆疊檢視（Stacked display）」，並說明這項技術的重點在於呈現資料堆疊與階層式關係。如圖 7所示，NewsMap不僅即時的取得當前時間的新聞資料將資料進行群集分析，並以TreeMap的技術視覺化。使用者能夠藉由 NewsMap看出目前哪些議題是較熱門的，提供了以不同角度閱讀新聞的方式， 17.

(26) 不同於一般的新聞網站，通常提供使用者最新的新聞資訊，NewsMap則是呈現新聞媒體的焦點與以使用者選擇感興趣的新聞，而一個新聞議題的文章可能很多，其利用過濾的方式篩選出該議題的其中一篇點閱率最高的新聞予以使用者閱讀。同時NewsMap也提供互動的功能，使用者能夠勾選下方的國家區塊過濾新聞出處，利用這樣的呈現方式給予使用者一個新聞議題的概觀，如表 1所做的整理，其能夠達到新聞議題推薦的效果，同時幫助使用者過濾與分類新聞資訊。但是使用者無法以NewsMap瞭解新聞議題的時序性，雖然提供議題累積的數量作為參考，卻不支援使用者追朔歷史的新聞資訊（Krstajić, Bertini, Mansmann, & Keim, 2010）。. 圖 7. NewsMap 新聞視覺化介面. 資料來源：http://www.newsmap.jp. 此外，除了呈現新聞分類的廣度（Breadth），類別的深度（Depth）也能夠幫助使用者瀏覽新聞。Ong、Chen、Sung 與 Zhu （2005）認為除了類別寬度的階層式結構能夠幫助使用者瀏覽新聞之外，支援切換母類別與子類別的階層式結構視覺化，能夠更貼近人類的知識地圖（Knowledge map），有助於引導使用者找到感興趣的新聞。因此提出了一套以中文新聞資料為主的視覺化的系統，其中視覺化的方法同樣採用TreeMap的技術，如圖 8所示，使用者能夠經由多層次的資料分類來取得資料，例如，屬於科技新聞之下的新聞，也許又能夠分為硬體相關的新聞與軟體相關的新聞，當使用者進入科技類的新聞後，也許還能夠依據軟 18.

(27) 硬體子分類的選擇來縮小瀏覽範圍，當使用者於此階層的分類中發現無法取得相關的資訊時，能夠藉由階層列的紀錄返回上一階層。Ong、Chen、Sung 與 Zhu （2005）的NewsMap與Weskamp（2006）的NewsMap不同的地方在於，其藉由分類目錄幫助紀錄瀏覽歷程，但卻無法將可能重複的文件做過濾，例如使用者進入了某一個最小的分類後，所看見的是所有此分類中的文件，其不提供文件的摘要或是篩選機制予以使用者瀏覽。. 圖 8. NewsMap 以中文資料為主的新聞視覺化介面. 資料來源：Ong, T.-H., H. Chen, et al. (2005). Newsmap: a knowledge map for online news. Decision Support Systems, 39(4): 583-597.. 19.

(28) （二） Viszter 由於目的的不同，階層式的視覺化技術無法完整的呈現網絡關係。一般來說，呈現網絡的資料都是使用無向圖（Undirected Graph），使用者的目的通常是從中觀察節點與節點之間的關係、連結數或是尋找一個節點到另一個節點的最短與最長路徑等等（Freeman, 1979）。近年來，許多網絡分析系統，像是 GUESS、JUNG、 UVINET 等提供分析者進行複雜的網絡分析工作，這些系統基於不同的目的擁有不同的特色。Viszter（Heer & Boyd, 2005），則有別於一般的網絡分析系統，使用 Friendster11的社群資料作為研究案例，如圖 9 所示，其目的在於提供終端使用者（End-Users）一個能夠增進社交關係的網絡探勘服務。事實上，此介面的重點除了呈現網絡關係外，Viszter 希望利用能夠與資料互動的功能，提供使用者一個帶有遊玩性質（Playful）的介面。當使用者點擊介面中的一個人物頭像時，介面會將與該人物相關的其他人物放大，並將其他不相關的人物頭像全部變為灰色；使用者能夠藉由滑鼠的點擊同時放大多個人物頭像；當網絡過於複雜時，使用者也能夠調整某些人物頭像的方格大小。如表 1 所做的整理，其注重互動功能的展現，因此能夠幫助使用者聚焦資訊，並於網絡圖中呈現節點的分群狀態。呈現網絡圖能夠給予使用者一個關係脈絡的概觀，同時提供互動的功能幫助使用者聚焦於其感興趣的物件上，能夠幫助使用者縮放視野。但是值得考慮的是，當網絡關係過於複雜時，使用者可能會因此而花費更多時間於尋找感興趣的焦點，該如何界定給予使用者概觀的廣度，是呈現網絡圖的重點之一。. 11. http://www.friendster.com/ 20.

(29) 圖 9. Viszter 探勘社交網絡的視覺化介面. 資料來源：Heer, J., & Boyd, d. (2005). Vizster: Visualizing Online Social Networks. Proceedings of the 2005 IEEE Symposium on Information Visualization, Washington,. DC.. （三） Blog Keyword Visualizer Blog Keyword Visualizer 是 So-net（日本索尼公司經營的 ISP 網路服務公司， So-net Entertainment Corporation）所開發的一套能夠監控部落格關鍵字的視覺化系統。這套系統主要目的是監控與即時視覺化，主要的特色有二，其一是資料處理的部份，由於目的是監控式的視覺化，此系統必須對部落格中目前的所有文章作關鍵字的運算，其中可能包含關鍵字萃取與熱門程度的探勘；第二是動態的呈現關鍵字網絡的部份，只要部落格中出現新的關鍵字，此介面便即時的將此關鍵字與其他相關的關鍵字作網絡關係圖的呈現。如圖 10 所示，關鍵字的顏色也會因為時間當下的熱門程度而改變，使用者能夠觀察關鍵字的顏色轉變來了解關鍵字目前在部落格中的熱門程度與關鍵字之間關連的熱門程度。. 21.

(30) 圖 10. Blog Keyword Visualizer，監控式視覺化介面. 資料來源：http://www.so-net.ne.jp/web2/bkv/. （四）動態網絡分析視覺化系統新聞事件或是議題中總是存在幾個關鍵的人物，從關鍵人物的角度將資料視覺化能夠以重要人物的角度來瞭解新聞事件的脈絡。Chung、Liu、Li 與 Chen（2010）提出的「動態網絡分析視覺化系統」便以人物作為主要觀察對象，利用動態的方式來觀察事件中各人物的「人脈關係」於時間軸上的變化。如圖 11 所示，此系統以節點的大小表示該人物在事件中的重要性，節點的顏色代表包含事件發生的與否。此外，為了降低介面呈現資料的複雜度，使用者能夠利用右方的「濾器（Filter）」對介面呈現的資料做過濾，其中包括連結強度與事件數量兩種過濾方式。在研究案例中，使用者表示此系統能夠以時間的順序來呈現資料，並且能夠以顏色發現事件中重要的人物。有別於一套幫助使用者瀏覽與閱讀新聞的工具，「動態網絡分析視覺化系統」以人物之間的關鍵脈絡幫助使用者觀察新聞事件。. 22.

(31) 圖 11. 動態網絡分析視覺化系統. 資料來源：Chung, H., Liu, K., Li, T., & Chen, P. (2010). Exploring dynamic social network through interactive visualization. Proceedings of IEEE Pacific Visualization, Taipei, Taiwan.. （五） Newdle Newdle（Yang, Luo, & Liu, 2010）是一個以視覺化新聞議題為主的視覺化介面，為了視覺化議題與議題之間的關係，Yang、Luo 與 Liu（2010）認為能夠由文章中相關的關鍵字尋找到議題的關聯性。Newdle 採用 Wordle12作為呈現關鍵字的技術核心，Wordle 是網路上一個能夠快速製作標籤雲的工具，使用者能夠規範標籤雲中標籤的大小與顏色。除了使用類似標籤雲的方式，此介面還能夠設定文章之間相關度的門檻值（Threshold），且當使用者能夠點選標籤時，畫面中相關的標籤會以黃色做標記。圖 12 為 Newdle 視覺化介面在設定門檻值為 3，且設定「海地大地震」為主要觀察議題時呈現的畫面，此圖中，一個獨立框格代表一個議題，框格中包含的關鍵字的標籤皆與該議題相關；各標籤的大小代表關鍵字在文章中的量；相同顏色的標籤代表關鍵字屬於同一類型；而方框的順序以該議題的重要程度作排序。Newdle 不僅使用標籤雲來呈現新聞資料中的關鍵字，於各框格中還使用了折線圖來呈現該議題在一段時間內的新聞量作為輔助資訊。. 12. http://www.wordle.net/ 23.

(32) 使用者在使用 Newdle 時，能同時觀察多個議題趨勢圖的走勢，且還能看出在議題內相關關鍵字的熱門程度。 Newdle 以標籤雲來呈現關鍵字的新聞量大小，也同時也提供使用者時間與趨勢的維度作為輔助資訊，給予使用者一個資訊的概觀（Overview），與搜尋引擎最大的不同是 Newdle 以議題的熱門程度將議題排序。但是這種呈現方式，似乎給予使用者過多的資訊，容易造成資訊負荷過高，因為使用者必須將數個方框瀏覽過一遍過後，才能決定究竟接下來要進入哪個方框中瀏覽該議題。. 圖 12. Newdle 新文藝提視覺化系統. 資料來源：Yang, J., Luo, D., & Liu, Y. (2010). Newdle: Interactive Visual Exploration of Large Online News Collections. IEEE Computer Graphics and Applications, 30(5), 32-41. Retrieved 2011/12/03 from http://ieeexplore.ieee.org/search/srchabstract.jsp?arnumber=5556732.. 24.

(33) （六） ThemeRiver ThemeRiver（Havre, Hetzler,Whitney, & Nowell, 2002）是另一個以呈現新聞議題趨勢為主的視覺化介面，如圖 13 是 ThemeRiver 以 Associated Press（AP）13 新聞資料作為演示介面的範例。ThemeRiver 將議題在時間軸上的變化隱喻為「河流」，每個條河道的大小代表一個議題的趨勢變化，河道的顏色屬於同一色系表示相互關聯。使用者能夠同時觀察每段時期或是某個特定時間點上的議題量，議題與議題之間的關係，更重要的是，使用者能夠看見在大略在某段時間區間內或是時間點上，某個議題新聞所占整體新聞的量。. 圖 13. ThemeRiver 新聞視覺化系統. 資料來源：Havre, S., Hetzler, E., Whitney, P., & Nowell, L. (2002). Themeriver: Visualizing thematic changes in large document collections. IEEE Transactions on Visualization and Computer Graphics, 8(1), 9-20.. 另一方面，Krstajić、Bertini、Mansmann 與 Keim（2010）的研究指出 ThemeRiver 無法輕易的呈現資料流的比例，使用者也無法得知究竟何時那些新的議題出現，那些舊的議題又消失。但是本研究者認為 ThemeRiver 屬於一個概念式的視覺化. 13. http://www.ap.org/ 25.

(34) 技術，它提出的重點在於以「河流」的隱喻來讓使用者觀察資料，運用這樣的隱喻同時在介面中觀察新聞議題的時序性。再者，ThemeRiver 能夠利用一些互動式的功能來填補這樣的不足，例如，Keim（2002）的研究中所分類的「過濾（Filter）」或是「縮放（Zoom）」，當使用者的滑鼠在河道上游移時，能夠以數字來表示該河道的比例或是其他更細節的資訊，也如同 Aigner, Miksch, M’uller, Schumann 與 Tominski（2008）所建議的，ThemeRiver 加入互動的機制後便能補足介面的缺漏。在 Aigner, Miksch, M’uller, Schumann 與 Tominski 於 2008 年的研究中另外提到一個重要的觀點，那便是 ThemeRiver 似乎無法呈現多視角的時間維度，時間軸可能存在於多變量上，例如，除了議題的量有時間性之外，相關性也存在時間性，也許在某個時間點上兩個量不高的議題但是關係卻相當密切，而使用者卻無從得知。. 四、. 概念圖（Concept Map）. 一個詞彙（Term）有的時候能夠代表一個概念，而將這些概念以網絡視覺化的方式呈現，便成為概念圖。事實上，若從資訊檢索的角度來看，詞彙是建置索引（Index）的基本單位，常言「一本書若是沒有了索引目錄，就如同一個城市沒有了地圖」。概念圖的目的與其使用上的意義多半就是希望透過這些概念，以視覺化的方式呈現其中複雜的關係。概念圖於教育與商業中被廣泛的使用，能夠幫助腦力激盪（Brain-Storming）或是表達複雜的概念。最早在 1990 年，Novak 便使用概念圖於科學教育中來幫助學生理解複雜的學科問題，其他使用網絡視覺化來呈現主題或是知識等研究，像是知識地圖（O’Donnell, Dansereau, & Hall, 2002）、主題地圖（Pepper, 2000），都是類似的概念。雖然這些研究使用不同的技術取出主題詞或是知識元素（Knowledge Element），但是實質上與概念圖的目的類似，在於給予使用者一個概觀與引導使用者。 26.

(35) 一般來說，概念圖的使用通常都是讓使用者自行從文章中尋找詞彙，並將其繪製成概念圖，但是這樣的方式使得概念圖過於個人化。Oliveira、Pereira 與 Cardoso（2001）提出一套系統，利用 WordNet14自動化的從句子中找出兩兩詞彙的關係並繪製概念圖。Tseng、Chang、Rundgren 與 Rundgren（2010）則採用關鍵字抽取的技術配合語料庫，從大量的新聞資料中建構概念圖。雖然此研究使用新聞資料作為主要的資料來源，但其研究者認為若將資料換成教科書也同時能夠達到同樣的效果，圖 14 為此研究於新聞資料中萃取關鍵字後，利用視覺化的技術，所呈現出的概念圖，其中不同的顏色代表不同的學科領域。. 圖 14. 利用新聞資料自動繪製的概念圖. 資料來源：Tseng, Y., H., Chang, C., Y., Rundgren, S., N., C., & Rundgren, C., J. (2010). Mining concept maps from news stories for measuring civic scientific literacy in media. Computers & Education, 55(1), 165-177. doi: 10.1016/j.compedu.2010.01.002.. 14. http://wordnet.princeton.edu/ 27.

(36) 第三節. 網絡視覺化演算法. 網絡圖在繪圖的領域中通常稱之為無向圖（undirected graph），如何計算無向圖的佈局（Layout）演算法在過去被廣泛的應用與討論，而鮮為人知的是一個名為 Force-directed 的演算法。此演算法能夠繪製出較美觀、節點分布對稱且均勻的無向圖，其演算法的核心概念是利用虎克定律（Hook’s Law）將無向圖中的節點位置做調整。 Force-Directed 最早在 1984 年由 Peter 提出，演算法 1 為 Peter（1984）提出的 Force-Directed 演算法。此演算法首先以隨機的方式給予每個節點一個位置，無互相連線的節點以反向量分開；互相連線的節點以正向量靠近。但是他認為虎克定律的互斥力道公式所求出的值過大，在兩節點分開時，此值會造成過量的調整，將此值作對數運算（取 log）後較合適。但利用此演算法所繪製的無向圖依然有兩個缺點，其一是節點與節點之間的距離差距過大；其二是在視覺上節點分布的位置無法達到對稱。演算法 1. Force-Directed 繪圖演算法. Algorithm SPRING(G:graph); place vertices of G in random locations; repeat M times calculate the force on each vertex; move the vertex c4* (force on vertex) draw graph on CRT or plotter. 資料來源：Peter E. (1984). A heuristic for graph drawing. Congressus Numerantium, 42(149), 160-163.. Fruchterman 與 Reingold 在 1991 年的 Force-Directed 演算法類似於 Peter （1984），但是其中不同的有三個概念，其一是各節點的距離必須保持在某個平均值；其二是節點之間的移動雖然採用類似虎克定律的互引或互斥規則做調整，但是加入了「粒子碰撞（Particle collisions）」的概念；其三是演算法中納入一個降低繪圖運算效率的機制。其中有趣的是上述「降低運算效率」的概念，此演算法如 Peter 的演算法一樣，必須不斷的遞迴來重複計算互斥與互引的位置調整，那麼究竟該重複幾次才能算是計算完畢？Fruchterman 與 Reingold 使用一個參數 28.

(37) 稱為「溫度」，這個溫度的參數在演算法開始進行時可依據畫布的大小與節點數來設定起始值，溫度會隨著每次的互斥與互引最大的調整值而改變，因此溫度這個參數在一個完整的繪圖過程會是一個遞減的線性函數。此概念類似於「煉鐵爐」，煉鐵爐內的溫度會隨著鐵的鍊成而逐漸降溫。. 演算法 2. 結合粒子碰撞的 Force-Directed 繪圖演算法. area:= W _ L; {W and L are the width and length of the frame} G := (V;E); {the vertices are assigned random initial positions} k := parea=|V|; function fa(x) := begin return x2=k end; function fr(x) := begin return k2=x end; for i := 1 to iterations do begin {calculate repulsive forces} for v in V do begin {each vertex has two vectors: :pos and :disp} v:disp := 0; for u in V do if (u != v) then begin {₰ is the di_erence vector between the positions of the two vertices} ₰ := v:pos - u:pos; v:disp := v:disp + (₰ / | ₰ |)* fr (| ₰ |) end end {calculate attractive forces} for e in E do begin {each edges is an ordered pair of vertices .vand.u} ₰ := e.v.pos – e.u.pos; e.v.disp := e.v.disp - ( ₰ = | ₰ |) * fa (| ₰ |); e.u.disp := e.u.disp + ( ₰ = | ₰ |) * fa (| ₰ |) end {limit max displacement to temperature t and prevent from displacement outside frame} for v in V do begin v.pos := v.pos + (v.disp / | v.disp|) *min(v.disp, t); v.pos.x := min(W/2, max(-W/2, v.pos.x)); v.pos.y := min(L/2. max(-L/2, v.pos.y)) end {reduce the temperature as the layout approaches a better con_guration} t := cool(t) end 資料來源：Fruchterman, T., & Reingold, E. (1991). Graph drawing by force-directed placement. Software - Practice and Experience, 21(11), 1129–1164.. 雖然 Force-Directed 演算法，能夠有效的繪製無向圖，但是其中也存在幾個問題。Force-Directed 無法應付過多的節點；當連線過於複雜時，則會出現過多「跨線（Cross Line）」的情況且難以利用斥力與引力來呈現節點的「群集 29.

(38) （Cluster）」。會產生這些問題，是因為在起始運作時，節點以隨機分派的方式給予位置，接著才運行斥力與引力的運算，研究者認為要呈現一個「群」的的網絡圖，事實上能夠取用過去的群集分析的概念。 Chameleon 群集分析架構（Framework）是 Karypis、Han 與 Kumary 在 1999 提出的一套群集分析的架構，此架構是為了解決群集分析演算法在進行群集時僅考慮各個獨立節點的關係，而忽略在群集之後可能發生的問題，例如，在一個存在複雜關係的資料群中，經由分群後可能會產生僅有「一群」的結果。在本研究所開發的介面中，除了採用 Force-Directed 的繪圖佈局，但也同採用另一種方式來繪圖，也就是利用 Chameleon 中分群的概念，預先計算好每個節點應該屬於的區塊，藉由這樣的方式來補足無法良好呈現群集節點的缺陷。. 第四節. 視覺化系統的使用者評估方法與研究案例. 視覺化介面的研究中，除了介面的設計與實作外，最後通常需要進行使用者評估或是案例分析。表 2 為過去相關研究中，使用資料來源與研究案例的整理，本小節將針對表格中提到的相關研究，所採用的使用者評估方法、資料來源與研究案例作整理與探討。. 30.

(39) 表 2 過去視覺化研究所使用的研究案例與資料來源資訊視覺化研究. 研究案例或資料來源. 網路評價視覺化系統（黃婷穎，2011）. . 部落格、論壇與線上新聞資料. 動態網絡分析視覺化系統（Chung, Liu, Li, & Chen, 2010）黃嬿（2009）.  . 《台灣日日新報》 - 日治時期臺灣總督府在北部地區發行的官方報紙八八風災. 蘇蘅（1995）. . 徐歷農退黨效應. Newdle（Yang, Luo, & Liu, 2010）.   . 海地大地震底特律聖誕衝突台灣七家報社新聞資料.      . 「石油」議題中東國家路透社（Reuters）美聯社（Associated Press） 2001 年美國炭疽攻擊事件阿富汗戰爭. NewsMap（Ong, Chen, Sung, & Zhu, 2005） ThemeRiver （Havre, Hetzler, Whitney, & Nowell, 2002） McKeown, & Radev. （1995） Ou, Khoo, & Goh （2006）. 資料來源：研究者整理. 過去的視覺化研究中所使用的評估方式大致上能夠分為兩類，採用任務式的評估與採用問題式的評估。任務式的評估方式較偏向請使用者利用視覺化介面尋找或是了解某議題，主要是為了瞭解使用者的使用過程，與實際的使用感受。例如，Havre、Hetzler、Whitney 與 Nowell（2002）的 ThemeRiver 則是請使用者嘗試於介面中標示自我認為較重要或是感興趣的部份；問題式的評估方式則偏向於設計較封閉問題，請使用者利用介面尋找正確答案，例如，Ong、Chen、Sung 與 Zhu（2005）以中文資料為主的 NewsMap 便是以時間來衡量使用者找到答案的時間。另一方面，不論是傳統的內容分析、自動摘要技術或是視覺化介面，不僅其主要目的會影響分析方法的使用，原始資料的特性、新聞事件也會直接影響分析方法的設計。除了任務式或是問題式的使用者評估之外，使用案例分析來進行自我衡量也是資訊視覺化研究時常使用的方式。而 Keith 與 Melanie（2009）認為視覺化工具的使用評估若以量化的方式進行分析，其應該包含功能性（Functionality）、效益（Effectiveness）、效率（Efficiency）、易用性（Usability）與實用性（Usefulness）等五大評估項目。功能性主要評估的 31.

(40) 內容包含視覺化系統是否提供足夠的功能滿足使用者的需求；效益主要評估系統是否能夠呈現資料之特色，給予使用者有意義的資訊；效率主要評估系統是否能夠增加使用者尋找相關資訊的表現；易用性主要評估系統功能是否容易學習如何使用，功能的設計是否淺顯易懂；實用性則主要評估系統如何能夠為使用者帶來實質上的幫助，如何帶給使用者助益。新聞事件中的「人物」是新聞分析經常探討的分析對象，所探究的會是，新聞媒體究竟如何報導這些主要人物？而新聞媒體在報導某些人物時的立場為何？例如，翁秀琪（1997）的研究中探討的就是一個以人物為中心點的政治議題，其中包括主要人物宋楚瑜還有李登輝，新聞媒體究竟是以什麼樣的角度批判這樣這兩位人物？通常以什麼角度來報導兩人的對話？蘇蘅（1995）的研究焦點也是政治人物，主要探究新聞媒體究竟如何報導這樣的政治議題。因為人物時常會成為新聞事件或是議題的焦點，Chung、Liu、Li 與 Chen（2010）的視覺化系統便是以人物作為分析資料的主要對象，此研究中以日治時期臺灣的新聞報紙作為案例，使用者能夠利用此系統觀察到在那個時期的人物重要性還有人物與人物之間的關係。以地域性的角度來說，事件通常是發生在某國家的某地區，而議題則可能會是一個大區域關注的議題。例如流感議題會在全世界的國家中被討論，而流感死亡事件則通常只會在某個地區被關注。黃嬿（2009）的研究主要關注的是台灣媒體如何報導「科學新聞」，雖然此研究以台灣的「八八風災」為研究案例，但事實上整體的大框架則是探討「環境議題」，「八八風災」的新聞事件是屬於這個議題之下的一個地方性事件。由此可知，一個議題本身可能包含多個子事件，但是實際上一個議題的討論可能會是因為某事件的發生。Yang、Luo 與 Liu 的 Newdle（2010）便是以這樣 32.

(41) 的角度來幫助使用者分析事件，此研究以「海地大地震」這個震驚世界的事件作為其中一個介面使用案例，使用者能夠經由介面來挖掘相關的議題，其中最相關的議題是「人道救援」。除此之外，議題與議題之間存在結構性與時間性，Havre、 Hetzler、Whitney 與 Nowell（2002）提出的 ThemeRiver 便是能夠關查出「石油」與中東國家之間的結構性與時間性關係，其研究發現新聞開始大量討論中東國家之前，「石油」是新聞討論的主要焦點。另一方面，新聞自動化摘要技術的目的，通常在於處理原始資料，是一套能夠應付所有資料來源的方法，並無直接的針對議題或是事件，其原始資料通常是一整個資料庫，例如 McKeown 與 Radev（1995）的研究便是使用一個收錄路透社與美聯社新聞的資料庫。但是也因為如此，Ou、Khoo 與 Goh（2006）認為這樣僅能算是淺層的資料分析，為了發展更深層的分析技術，其研究中就以「2011 年美國炭疽攻擊事件」與「阿富汗戰爭」兩個事件作為分析案例。本研究所採用之使用者評估分為兩個部分，其一為任務式的評估，利用研究者自行設計之資訊探勘任務請受試者挖掘其感興趣或是認為有意義之相關資訊，主要藉此瞭解使用者的實際使用情形；其二為滿意度問卷調查，採用 Keith 與 Melanie（2009）所以提出的功能性、效益、效率、易用性與實用性等五大評估項目，進行使用滿意度的評估。. 第五節. 小結. 搜尋與瀏覽是兩個獨立的單詞，各自代表不同的意義。但是以使用者檢閱或是尋找資訊的角度來說，搜尋與瀏覽事實上是獲取資訊的過程中兩種不可或缺的工具，二者並不存在優劣的差異（Delphi Group, 2004）。使用者於瀏覽時，有絕大部份的動作皆是在「開啟超連結」與「返回上一頁」， 33.

(42) 最常使用的探索策略是「回歸原路」與「回歸原位」（Carledge & Pitkow, 1995），顯示出使用者於瀏覽時，輔助工具的使用是必要的。此外，一般瀏覽器中提供的瀏覽紀錄，同時也是為了避免使用者在超連結之間跳轉，而遺失重要資訊，但是當使用者開啟了過多的超連結，瀏覽紀錄變得相當龐大，難以從中辨識究竟哪些是有用的資訊，這也是使用者的探索策略大多為「回歸原位」的原因，使用者可能跳轉於過多的超連結，因而迷失於自我的瀏覽路徑上，以至於乾脆回到原點，重新開始。另一方面，資訊視覺化能夠幫助使用者挖掘隱藏於大量資料中有意義的資訊。過去的新聞資料視覺化的研究，通常注重在給予使用者一個資訊的概觀，例如， Newdle（Yang, Luo, & Liu, 2010）；或是給予使用者另一種瀏覽資訊的角度，例如，NewsMap（Weskamp, 2006）與「動態網絡分析視覺化系統」（Chung, Liu, Li, & Chen, 2010）。雖然這些研究的目的不在於導覽使用者的新聞閱讀，但是值得思考的事，如何運用資訊視覺化的方法，來引導使用者順利的獲取有意義且正確的資訊，以不至於迷失在巨大的資料當中（Tufte, 1990）。因此，研究者認為有必要發展一套能夠導覽使用者瀏覽新聞資料的視覺化系統，利用網絡圖的關鍵字推薦引導使用者進行下一步的瀏覽；提供使用者一個能夠導航或控制歷程的工具，幫助使用者在瀏覽的同時能夠快速地回復瀏覽步驟；同時能夠過濾資訊，降低呈現資訊的複雜度；利用資訊分群，幫助挖掘關鍵字的相關背景。. 34.

(43) 第三章. 研究方法. 本研究提出一套以視覺化為主的新聞導覽系統，以整體的系統架構來說，主要分成兩大部份：第一部份為此系統的資料處理，結合過去資料處理的技術，將技術核心的機制整合成為適用於本系統的一套即時的資料處理流程；第二部份為本研究自行開發的視覺化新聞導覽介面。第一節說明本系統的架構與流程；第二節說明本系統使用的繪圖演算法；第三節介紹本研究所使用的新聞資料。本系統的設計，為了有效導引使用者能夠於動態的瀏覽過程中自我定位，著重於資訊視覺化與互動功能的展現，主要因應「即時資料處理」與「即時呈現」兩大方向進行系統的設計。因為資訊瀏覽相較於資訊搜尋，是一種較無結構化的行為（Cove & Walsh, 1988），且瀏覽的過程是相當個人化的，因此，導覽系統必須能夠即時對應使用者的任何瀏覽動作。而系統採即時處理的設計，優點在於系統不需要一次性地將所有資料進行處理並視覺化，過去類似的設計如 Blog Keyword Visualizer（SoNet, n.d.），其為了達成「監控資訊」的目的，採用即時處理的設計，而本研究所強調的重點在於使用者的瀏覽過程，是為了達成「監控瀏覽」與「導引瀏覽」的效益，因此採用即時處理的設計再適合不過。. 35.

(44) 第一節. 系統流程與架構. 圖 15. 系統流程圖. 本系統的設計分為「資料處理」與「資料視覺化」兩個部份，圖 15 為本系統從資料處理至視覺化的整體運作流程圖。系統背後有一個經過斷詞（Term Segmentation）與索引建置的索引庫（Index DB）；當關鍵字輸入後，將符合關鍵字所有文章取出（Document Match）；接著在從文章中取出相關的關鍵字（Term Extraction）並做過濾（Term Filtering）；再來將所有關鍵字進行文章數量探勘（Term Sequences Analysis ）與共現分析（Co-occurrence Analysis）主要取出關鍵字出現於新聞的文章數與兩關鍵字共同出現於新聞的文章數；緊接著將資料格式化（Data Formatting）並將其調整成視覺化能夠使用的數值（Data Scaling）;最後進入網絡視覺化（Network Visualization）。此外，本系統的視覺化設計，著重在互動功能的表現，在介面中使用者能夠隨意的輸入關鍵字或是點擊相關關鍵字，而當此事件觸發後，系統會將被點擊的相關關鍵字視作輸入關鍵字，重複執行上述相關文章萃取、關鍵擷取、過濾、共現分析、資料格式化等步驟並重繪網絡視覺化介面。. 36.

(45) 圖 16 系統架構圖. 圖 16 為本系統之系統架構圖，分別以資料庫層級（Database Layer）、功能層級（Functional Layer）、平台層級（Platform Layer）與應用層級（Application Layer）等四個部分作說明。 . 資料庫層級：本系統的資料存取主要來自於兩個資料庫，其一為存放新聞原文的資料庫，資料庫欄位包含不重複之新聞編號、新聞標題、新聞內容、新聞來源網站、新聞分類（例如，財經、政治、生活天氣等等）與新聞發稿時間等；其二為新聞文章經斷詞過後的索引庫，資料欄位包含詞彙與其出現的新聞文章編號，這是為了快速取得符合輸入關鍵字之新聞文章。. . 功能層級：而功能層級主要對應即時資料處理與使用者互動事件監控的特色進行功能設計，其中 Keywords Extractor 為取得相關關鍵字之功能模組； Dimensions Extractor 事實上包含流程圖中之數量探勘（Term Sequences Analysis ）與共現分析（Co-occurrence Analysis）兩個步驟，主要是取出視覺化中的資料維度；Articles Searcher 是為了能夠快速取得新聞原文，因為本系統除了以網絡圖進行相關關鍵字推薦外，希望提供使用者能夠追朔新聞原文；而 Interaction Monitor 則是為了監控使用者之互動事件的發生與否， 37.

(46) 而於視覺化介面中進行相對應的反應。 . 平台層級：本系統透過網際網路作為提供系統服務的平台，以整體的系統服務來說，所有視覺化呈現與資訊處理的存取皆利用網際網路進行資料傳輸，主要是為了能夠達成使用上的方便性，因為新聞瀏覽並不屬於專業性的分析活動，使用者只須開啟瀏覽器，即可使用本系統所提供的新聞導覽服務。. . 應用層級：本系統於應用層級中主要提供的是資訊視覺化與視覺化互動，而視覺化的部分主要提供關鍵字網絡（Network Visualizer）幫助使用者瀏覽新聞，另外提供關鍵字於各時間點之新聞量的趨勢圖（Trend Visualizer）供使用者作參考，同時使用者能夠利用 Dates Controller，設定新聞資料的時間區間；網絡圖中使用者能夠利用滑鼠與節點進行互動（ Visualization Interactions），例如點擊節點、拖曳節點與縮放視角等；使用者能夠利用 Browsing Path Controller 來控制自我的瀏覽路徑，例如使用者能夠清除已點擊過的節點；為了讓使用者能夠以不同的角度觀察關鍵字網絡，使用者能夠利用 Layout Controller 即時的切換網絡圖的繪圖規則，本系統應用環狀、 Force-Directed 與 Chameleon 三種不同的網絡繪圖供使用者作切換，將於本章第二節針對此三種繪圖演算法與特色詳細介紹之。. 一、資料處理本系統為了提高提取兩個主要維度（關鍵字的新聞文章數量與倆倆共同出現的新聞文章數）與符合關鍵字的所有新聞文章的效率，預先將新聞資料庫中的每篇文章以「詞」為單位建置索引庫，而詞的長度設定為一至十個中文字元，索引庫中儲存各獨立不重複的詞、出現的新聞編號與出現次數，並且於建置詞索引的過程中將內容完全相同的新聞文章作過濾。這樣的作法是為了在資料處理的模組中迅速的取得一個或是多個關鍵字出現的文章原文與文章數量，同時也能夠依據關鍵字出現於文章中的次數將新聞作排序。 38.

(47) 當系統的前端接收到使用者輸入的關鍵字 Q1 後，依照以下步驟進行： 1) 進入索引庫找出符合關鍵字的新聞文章編號，由於考慮到即時運作的效率，僅取符合關鍵字且字頻（Term Frequencies）最高的前一百篇文章編號，取得編號後則進入新聞原文資料庫中取出編號所對應的新聞原文； 2) 進行相關關鍵字萃取（Term Extraction），從第一個步驟中所取得的新聞文章中取出相關的關鍵字｛R1, R2…Rn｝，在這個步驟中同時利用中研院平衡語料庫15對於詞性的分類標準來濾掉不要的詞性（例如，動詞、副詞、介係詞等等），實際的過濾方法，主要是將所有從文章中取得的關鍵字逐一輸入平衡語料庫中進行詞性比對，符合過濾詞性之辭彙即捨棄； 3) 第三步驟是將所有關鍵字｛Q1, R1, R2…Rn｝逐一的進入新聞資料的索引庫中，取出各關鍵字出現在整個新聞資料庫中的文章數量，主要目的是取得「新聞量」的維度，於網絡圖中以節點的大小表示，而實際的作法與第一步驟類似，不同的地方在於此步驟中取出的是所有符合關鍵字的新聞文章數量，而非前一百篇的新聞編號；最後的步驟是將這些關鍵字倆倆進行共現分析（Co-occurrence Analysis），取出倆倆關鍵字共同出現的新聞文章數，目的是取得「共現量」，於網絡圖中以兩關鍵字連線的線條粗細表示，實際的作法是將兩關鍵字以「&（and）」邏輯運算聯結，接著進入索引庫中進行查詢，取得共現的文章數量，若文章數量為「0」則表示此二關鍵字於新聞資料庫中並無相關。表 3 為一篇以「流感」作為輸入的關鍵字 Q1 取出的新聞文章，並利用此文章取出相關關鍵字（R1、 R2）的範例。. 15. http://db1x.sinica.edu.tw/kiwi/mkiwi/ 39.