貼文散佈圖的互動操作

國

立 政 治 大 學

‧

N a tio na

l C h engchi U ni ve rs it y

24

的互動設計分成兩個部分，其中一個設計是由貼文散佈圖開始進行探索，另一個 設計則是由時間區塊作為探索起點。

3.5.1 貼文散佈圖的互動操作

Brushing-Linking 行為是一種在視覺化的互動設計上常見的一個行為，在電 腦螢幕上透過鼠標在目標的空間中圈選出一個空間，針對使用者圈選出來的空間 上所涵蓋的每一筆資料進行相對應的視覺化的呈現或是互動。

貼文散佈圖為主的互動設計中，針對五個情緒，大心、哈哈、哇、傷心以及 生氣，我們設計了五個貼圖按鈕來去對應到五個情緒，如圖3.13，右邊的色彩條 可以輔助使用者在觀察貼文中情緒百分比時能夠呼應到相對應的顏色。最後，使 用者可以透過點擊按鈕改變貼文散佈圖中貼文結點的顏色，顏色越紅代表該情緒 百分比的數值越高，越藍則是該情緒百分比的數值越低，如圖3.14，我們可以觀 察到圖 3.14 中傷心的顏色漸層情況發現傷心百分比較高的貼文聚集在整張貼文 散佈圖的上半部…等。

圖3.13 五個情緒貼圖按鈕

圖3.14 不同情緒的貼文節點顏色漸層

‧ 國

立 政 治 大 學

‧

N a tio na

l C h engchi U ni ve rs it y

25

另外，使用者可以透過Brushing-Linking 行為在貼文散佈圖中圈選出一個區 域，系統會計算出該區域中所有貼文各個屬性的平均值，分別有該區域的總貼文 數、平均按讚數、平均分享數、平均留言數以及五種情緒的平均數值，以上的數 值若有高於整體貼文的平均數值，紅色區域會以紅色字體呈現，藍色區域則以藍 色字體呈現；使用者透過觀察數值升降能夠了解貼文在散佈圖中所在位置的意義，

例如：集中散佈圖中右上角的貼文具有較高的留言數、按讚數…等等的特性，並 且能夠同時圈選出兩個區域比較兩塊貼文群集的差異性。系統同時針對圈選出來 的兩個區域涵蓋的貼文內容進行關鍵字的統計，若是中文的粉絲專頁，系統會透 過結巴(Jieba)[21]進行中文斷詞斷句來收集關鍵字；如果是英文的粉絲專頁，系 統則是透過空格去進行單字的擷取，藉此收集關鍵字；並且將關鍵字在兩個區域 中整體出現的次數，挑選出現次數最高的前 15 名，並且由大到小進行排序；由 上述的互動設計令使用者了解了貼文散佈圖中貼文關注度高低的分布情況，再透 過關鍵字的統計觀察出出現次數高的關鍵字屬於貼文散佈圖中哪一個區域的貼 文，了解到Facebook 使用者是否對此關鍵字具有高度的關注度，如圖 3.15。

圖3.15 貼文散佈圖中透過Brushing-Linking 行為判斷貼文分布的意義

‧ 國

立 政 治 大 學

‧

N a tio na

l C h engchi U ni ve rs it y

26

另外，Brushing-Linking 行為同時可以與時間區塊（Time Block）產生互動，

系統會根據鼠標圈選的區域所涵蓋的貼文同步地在時間區塊對應的位置進行 Highlight 的呈現。透過上述的互動設計，使用者可以在觀察貼文散佈圖中貼文分 布意義之外，同時的了解到同一群貼文分別是在哪一個時間點發佈的，例如：在 時間區塊中被 Highlight 的貼文中，是否有多篇貼文是具有連續的性質，透過上 述的觀察推斷是否有事件的發生；接著，我們可以選擇在時間區塊被Highlight 的 貼文中的其中一篇貼文，系統會在貼文散佈圖中找出該篇貼文的上一篇貼文以及 下一篇貼文，並且在貼文散佈圖中繪製出三篇貼文的依序連接時間曲線，此視覺 化方法可以令使用者了解到在發佈時間相近的貼文受到 Facebook 使用者關注程 度的差別，如圖3.16。此外，在了解關注程度差異外，系統會將此三篇貼文的細 部資料進行呈現，提供使用者閱讀三篇貼文的文字訊息，藉此使用者可以透過文 字訊息可以了解到造成連續的三篇貼文受到關注程度一致或是不一致的原因，圖 3.17。

圖3.16 貼文散佈圖與時間區間的Brushing-linking 互動

‧ 國

立 政 治 大 學

‧

N a tio na

l C h engchi U ni ve rs it y

27

圖3.17 連續貼文的細節比較以及散佈圖上的時間曲線