基於眼動與滑鼠追蹤之互動式資料視覺化評估 - 政大學術集成

全文

(1)國立政治大學數位內容碩士學位學程 Master’s Program in Digital Content & Technologies National Chengchi University. 碩士論文 Master Thesis. 立. 政治大. ‧ 國. 學. 基於眼動與滑鼠追蹤之互動式資料視覺化評估. ‧. Evaluation of interactive data visualization tools Nat. n. al. er. io. sit. y. based on gaze and mouse tracking Ch. engchi. i n U. v. 研究生：彭久芳撰指導教授：廖文宏博士陳百齡博士. 中華民國一百零六年三月 March 2017.

(2)

(3) 致謝. 首先能完成這份研究必須感謝廖文宏老師，謝謝您的信任，放手讓我去闖，並在. 政治大. 迷路時提醒我，幫忙鎖定目標；也謝謝您的期許讓我力爭上游，去美國發表 IEEE 論文. 立. 是很寶貴與難得的經驗，雖然表現稱不上盡善盡美，但是全力以赴已無遺憾；謝謝您. ‧ 國. 學. 除了課業教導外，還有為人處事的分享。另外，造就這篇論文還有三位功臣：紀明德. ‧. 老師、浩翔學長、凱文學長，謝謝您們無私地提供研究心血，讓我能站在巨人的肩膀. sit. y. Nat. 上前進，而且不厭其煩地幫我解決問題。此外，謝謝陳百齡老師領進門，讓我發現資. io. n. al. er. 料視覺化的奧妙，才能有今天。. v. 能完成論文還必須非常感謝 VIP 的夥伴們，怡潔學姊不厭其煩地陪我討論與指引. Ch. engchi. i n U. 方向，崇銘、義瑋、依凡、佳霖、貞佑，謝謝你們總是毫不猶豫地幫我好多，給我滿滿的支持，很貼心地幫我考慮到很多事情，研究所的日子有你們可以一起努力和搞笑真的很幸福。此外，也謝謝八十多位受測者從大台北各地趕來幫我做實驗。謝謝研究所這兩年半來 DCT 6 同學們和 DCT 5 學長姐的照顧與激勵，有你們一起走過那些熬夜趕專案的日子，辦過大大小小的活動，來自不同背景的我們畢業後將再次分道揚鑣，很幸運能與你們相聚在此，激盪出精彩的火花。最後但是最重要的是謝謝我的爸媽與家人，讓我毫無後顧之憂，盡情地去學、去闖、去挑戰，謝謝您們滿滿的愛與支持。也謝謝身旁的好朋友們，總是一同分享我的喜悅，以及陪我度過那些煎熬的時刻。.

(4) 摘要. 政治大用、能否被理解、使用效率高低。互動式資料視覺化需要透過使用者的互動才能觀察立隨著互動式資料視覺化工具越來越多，設計者需要一個方法來衡量其作品是否好. ‧ 國. 學. 到資料的不同面向，再進一步產生洞見，然而現有的評估方式多僅聚焦於靜態資料圖表，設計者無法從中得知使用者的操作困難之處，並據此進行加強與改善，因此本研. ‧. 究提出一個整合量化分析與質化記錄的系統性評估方式，應用於互動式資料視覺化的. y. Nat. io. sit. 優使性 (usability) 分析。. n. al. er. 本研究的方法為追蹤使用者的眼動和滑鼠操作過程，先將其記錄成量化數據，透. Ch. i n U. v. 過興趣區域的標定與將轉換使用者行為成序列後，進行序列運算和統計分析；同時，. engchi. 從使用者經驗研究方法得到實驗過程的質化記錄，用來輔助解釋量化分析的結果。本論文藉由兩個互動式資料視覺化工具來驗證以眼動與滑鼠追蹤評估互動式資料視覺化是可行的，我們提出了具體的實驗流程、量化紀錄與分析方式，並建議以下評估指標：吸引力、易發現性、困難度、易識別性、易理解性、精準表達程度、細部困難度、使用效率。. 關鍵字：互動式資料視覺化、眼動追蹤、滑鼠追蹤、量化使用者評估. ii.

(5) Abstract. 政治大 As more and more interactive 立 data visualization tools emerge, designers need an organized. ‧ 國. 學. evaluation method to provide timely feedback and understand user behavior. In contrast to traditional graphical presentations, interactive data visualization tools call for user manipulation. ‧. to gain specific insights. It is therefore imperative to study the intermediate operation process,. y. Nat. rather than the final outcome, to provide a critical understanding of the developed tool. Toward. io. sit. this objective, we propose a systematic approach combining quantitative analysis and qualitative. n. al. er. assessment to gauge the usability of interactive data visualization tools in this research.. Ch. i n U. v. Firstly, quantitative data including gaze and mouse movements are collected. By combin-. engchi. ing the definition of area of interest, these trajectories can be converted into user sequences, which are conveniently accessible for further statistical analysis as well as path comparison. Secondly, qualitative information obtained by observing user operation is gathered to offer additional insight and complement/support conclusions obtained from quantitative analysis. Two interactive data visualization tools are employed to examine the feasibility and universality of our experimental and analytical procedure. To conclude, we come up with several key indicators to evaluate interactive data visualization, including attraction, discoverability, difficulty, identifiability, comprehensibility, precision of expression, difficulty(detailed) and efficiency. Keywords: interactive data visualization; gaze tracking; mouse tracking; quantitative usability evaluation iii.

(6) 目錄摘要.......................................................................................................................................... ii. Abstract ................................................................................................................................... iii. 政治大表目錄..................................................................................................................................... 立. 目錄......................................................................................................................................... iv vii. 圖目錄..................................................................................................................................... viii. ‧ 國. 學. 第一章緒論 ...................................................................................................................... 1 1. 1.2 研究問題........................................................................................................ 3. ‧. 1.1 研究背景與動機............................................................................................ Nat. y. 5. sit. 1.3 研究流程與方法............................................................................................ 5. er. io. 1.4 論文架構........................................................................................................ n. a 第二章文獻探討............................................................................................................. 6 iv 2.1. l C hengchi Un 資料視覺化評估方法.................................................................................... 6. 2.1.1、問卷、任務................................................................................. 6. 2.1.2、資料墨色比率............................................................................. 7. 2.2 電腦操作量化評估方法................................................................................ 9. 2.2.1、眼動追蹤分析............................................................................. 9. 2.2.2、滑鼠追蹤分析............................................................................ 11 2.2.3、眼動與滑鼠追蹤綜合分析........................................................ 13 2.3 小結............................................................................................................... 16. 第三章研究方法............................................................................................................. 18 3.1 任務設計方法............................................................................................... 18 3.2 資料蒐集方法............................................................................................... 19 3.2.1、眼動儀工具介紹........................................................................ 19 iv.

(7) 3.2.2、OGAMA 工具介紹 ................................................................... 23 3.2.3、放聲思考法................................................................................ 25 3.2.4、觀察法........................................................................................ 26 3.2.5、Card Sort .................................................................................... 27 3.3 資料分析方法............................................................................................... 28 3.3.1、眼動與滑鼠追蹤資料分析........................................................ 28 3.3.2、Area Of Interest.......................................................................... 29 3.3.3、使用者操作步驟序列................................................................ 31 3.3.4、Edit Distance.............................................................................. 31. 政治大. 3.3.5、Fitts’Law ................................................................................. 33 3.3.6、可容許序列................................................................................ 35. 立. 第四章實驗設計與前期研究..................................................................................... 37. ‧ 國. 學. 4.1 研究特性....................................................................................................... 37 4.2 實驗設計....................................................................................................... 37. ‧. 4.2.1、實驗方式與環境設定................................................................ 37. y. Nat. 4.2.2、實驗流程.................................................................................... 39. io. sit. 4.3 評估指標....................................................................................................... 42. n. al. er. 4.4 實驗資料....................................................................................................... 43. i n U. v. 4.4.1、ShareFlow .................................................................................. 43. Ch. engchi. 4.4.2、TopicWave ................................................................................. 45 4.5 任務設計與修正........................................................................................... 45 4.5.1、任務設計.................................................................................... 45 4.5.2、修正任務.................................................................................... 48 4.6 前期研究....................................................................................................... 48 4.6.1、實驗對象.................................................................................... 48 4.6.2、眼動與滑鼠位置的相關性........................................................ 49 4.6.3、評估指標測試............................................................................ 50 4.6.4、質化結果.................................................................................... 54 4.7 實驗方法修正............................................................................................... 56. 第五章實驗結果與討論 .............................................................................................. 60 5.1 實驗對象....................................................................................................... 60 v.

(8) 5.2 排除異常值................................................................................................... 61 5.3 評估指標驗證............................................................................................... 61 5.3.1、吸引力........................................................................................ 62 5.3.2、易發現性.................................................................................... 62 5.3.3、困難度........................................................................................ 64 5.3.4、易識別性.................................................................................... 65 5.3.5、易理解性.................................................................................... 68 5.3.6、精準表達程度............................................................................ 70 5.3.7、細部困難度................................................................................ 72. 政治大. 5.3.8、使用效率.................................................................................... 76 5.3.9、評估指標小結............................................................................ 79. 立. 5.4 研究限制....................................................................................................... 79. ‧ 國. 學. 5.4.1、實驗環境與時間限制................................................................ 79 5.4.2、實驗對象限制............................................................................ 80. ‧. 5.4.3、實驗資料限制............................................................................ 81. y. Nat. 第六章結論與未來展望 .............................................................................................. 82. io. sit. 參考文獻................................................................................................................................. 84. n. al. er. 附錄一實驗指示................................................................................................................. 90. i n U. v. 附錄二前期研究任務與實驗記錄..................................................................................... 92. Ch. engchi. 附錄三正式實驗任務與實驗記錄..................................................................................... 94. vi.

(9) 表目錄表 3.1. The Eye Tribe 硬體規格限制 . . . . . . . . . . . . . . . . . . . . . . . . .. 20. 表 3.2. The Eye Tribe 軟體規格 . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 20. 表 3.3. 學. ‧ 國. 表 3.4. 政治 .................. SMI RED 250 和 The Eye Tribe 規格比較大立 OGAMA 硬體限制 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 22 25. 表 4.2 任務設計舉例 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 表 4.3 前期研究受測者背景資料統計表 . . . . . . . . . . . . . . . . . . . . . .. 49. 表 4.4 答題正確率統計 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 50. 表 4.5 步驟正確性與作答對錯的關係與 S 圖實驗結果 . . . . . . . . . . . . . .. 52. n. al. er. io. sit. Nat. 47. y. 42. ‧. 表 4.1 互動式資料視覺化評估指標（初版） . . . . . . . . . . . . . . . . . . .. i n U. v. 表 4.6 情緒與實驗資料或實驗順序的關係 . . . . . . . . . . . . . . . . . . . . .. 55. 表 4.7 互動式資料視覺化評估指標（完整版） . . . . . . . . . . . . . . . . . .. engchi. 57. 表 5.1 正式實驗受測者背景資料統計表 . . . . . . . . . . . . . . . . . . . . . .. 60. 表 5.2 易理解性分析 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 69. 表 5.3 易理解性實驗結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 69. 表 5.4 精準表達程度分析 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 70. 表 5.5 精準表達程度實驗結果 . . . . . . . . . . . . . . . . . . . . . . . . . . .. 71. Ch. vii.

(10) 圖目錄圖 1.1 人與資料互動的三層架構 . . . . . . . . . . . . . . . . . . . . . . . . . .. 2. 圖 1.2 互動式資料視覺化量化評估流程圖 . . . . . . . . . . . . . . . . . . . . .. 5. 圖 2.1. 8. USA Today 新聞圖與經過資料墨色比率簡化的圖的比較 [20] . . . . . .. 8. Holmes 和簡單版本的長條圖的比較 [9] . . . . . . . . . . . . . . . . . .. 9. 圖 2.4 直方圖上眼睛凝視點的軌跡 [21] . . . . . . . . . . . . . . . . . . . . . . 圖 2.5 不同種樹狀圖的熱區圖結果 [22] . . . . . . . . . . . . . . . . . . . . . .. 10. 10. 圖 2.6 所有受測者回答每一題的平均時間 [23] . . . . . . . . . . . . . . . . . .. y. 11. 圖 2.7 受測者選擇相片類別的滑鼠軌跡 [29] . . . . . . . . . . . . . . . . . . . .. 12. n. al. er. io. sit. Nat. ‧. ‧ 國. 圖 2.3. 學. 圖 2.2. 政治大一般常見的長條圖和 Tufte 簡化的長條圖的比較 [19] . . . . . . . . . . . 立. i n U. v. 圖 2.8 在各個興趣區域中滑鼠點擊、滑鼠停駐、眼睛凝視的時間比 [32] . . . .. Ch. engchi. 14. 圖 2.9 眼睛凝視點與滑鼠停駐點在垂直、水平方向上的距離之出現次數，（原點在搜尋結果頁的左上角，往右為正，往下為正）[32] . . . . . . 圖 2.10. 14. Google 搜尋結果頁眼睛和滑鼠在最大的 y 值上的決定係數 [34] . . . .. 15. 圖 2.11 Google 搜尋結果頁的熱點圖分析 [34] . . . . . . . . . . . . . . . . . . .. 15. 圖 2.12. 環形圖的變形，左圖白色的鼠標點擊後，會展開成右圖 [35] . . . . . .. 16. 圖 2.13. KRONA 視覺化，顯示細菌的生物層級的關係 [36] . . . . . . . . . . .. 16. 圖 3.1 頭部固定器 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 21. 圖 3.2. The Eye Tribe 在螢幕上的誤差值 . . . . . . . . . . . . . . . . . . . . . .. 21. 圖 3.3 同時用 SMI RED 250、The Eye Tribe 蒐集實驗資料 [40] . . . . . . . . .. 22. 圖 3.4 紅色線為 SMI RED 250 實驗結果、藍色線為 The Eye Tribe 實驗結果 [40] 22. viii.

(11) 23. 圖 3.6 利用 Card sort 方法回答每一個答題當下的感受 . . . . . . . . . . . . . .. 27. 圖 3.7 背景 AOI 舉例 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 30. 圖 3.8 前景 AOI 舉例 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 30. 圖 3.9 一維 Fitts’law 取 W 的方式 . . . . . . . . . . . . . . . . . . . . . . . . .. 34. 圖 3.10. 二維 Fitts’law 取 W’的方式 . . . . . . . . . . . . . . . . . . . . . . .. 34. 圖 3.11 圓環之 D 的延長線與圓環四個邊線的交點情況 . . . . . . . . . . . . .. 34. 圖 4.1 實驗畫面截圖 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 38. 圖 4.2 實驗環境與器材 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 38. 圖 4.3. 39. 圖 4.4. 治政前期研究實驗記錄方式 . . . . . . . . . 大 . . . . . . . . . . . . . . . . . . 立實驗流程圖 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 圖 4.5. OGAMA 校正過程 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 41. 圖 4.6. OGAMA 校正結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 41. 圖 4.7. OGAMA 所有眼動校正結果 . . . . . . . . . . . . . . . . . . . . . . . . .. 學. OGAMA 工作流程以及可提供的分析模式 . . . . . . . . . . . . . . . . .. ‧. ‧ 國. 圖 3.5. Nat. y. 44. er. al. v i n Ch 平均眼動與滑鼠在水平、垂直點座標的決定係數 engchi U n. 圖 4.10. 42. S圖 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. io. 圖 4.9. 41. sit. 圖 4.8 各版本測試資料，藍線為滑鼠軌跡，綠線為眼動軌跡 . . . . . . . . . .. 40. T圖 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 45. . . . . . . . . . . . .. 50. 圖 4.12. 功能區域編碼 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 52. 圖 4.13. 易發現性實驗結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 53. 圖 4.14. 正式研究實踐紀錄方式 . . . . . . . . . . . . . . . . . . . . . . . . . . .. 58. 圖 4.15. 眼動練習 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 58. 圖 5.1 以熱區圖排除異常受測者 . . . . . . . . . . . . . . . . . . . . . . . . . .. 61. 圖 5.2 吸引力實驗結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 62. 圖 5.3 易發現性實驗結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 63. 圖 5.4 易發現性異常值說明圖 . . . . . . . . . . . . . . . . . . . . . . . . . . .. 63. 圖 5.5 困難度實驗結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 64. 圖 5.6 困難度異常值說明圖 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 65. 圖 4.11. ix.

(12) 圖 5.7 易識別性實驗結果一 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 66. 圖 5.8 易識別性指標一異常值說明圖 . . . . . . . . . . . . . . . . . . . . . . .. 67. 圖 5.9 易識別性實驗結果二 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 68. 圖 5.10. 易識別性指標二異常值說明圖 . . . . . . . . . . . . . . . . . . . . . . .. 68. 圖 5.11 面積太小的興趣區域舉例 . . . . . . . . . . . . . . . . . . . . . . . . . .. 71. 圖 5.12. 精準表達程度各題實驗結果 . . . . . . . . . . . . . . . . . . . . . . . .. 72. 圖 5.13. 細部困難度實驗結果一 . . . . . . . . . . . . . . . . . . . . . . . . . . .. 73. 圖 5.14. 細部困難度指標一異常值說明圖 . . . . . . . . . . . . . . . . . . . . .. 74. 圖 5.15. 細部困難度實驗結果二 . . . . . . . . . . . . . . . . . . . . . . . . . . .. 75. 圖 5.16. 細部困難度指標二異常值說明圖 . . . . . . . . . . . . . . . . . . . . .. 76. 圖 5.17. 受測者完成某任務時額外執行多少步驟實驗結果 . . . . . . . . . . . .. 77. 圖 5.18. 實際與理想步驟的操作時間差實驗結果 . . . . . . . . . . . . . . . . .. 78. 圖 5.19. 受測者眼睛情況對實驗結果的影響 . . . . . . . . . . . . . . . . . . . .. 81. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. x. i n U. v.

(13) 第一章. 1.1. 緒論. 研究背景與動機. 政治大. 隨著科技的普及，數據量暴增，然而人們不易在短時間內吸收大量訊息，所以需. 立. 要改由其他方式呈現資料，不論是日常生活的新聞閱讀，或是專業領域的資料，圖像. ‧ 國. 學. 解說漸漸取代了文字，以提升閱讀速度與效率，資料視覺化就此應運而生。視覺化的意義為「使某事、某物以可見的表現方式增強人類的感知」，是一個圖像化的過程，作. ‧. 法為將不可見物轉化成圖形、符號、顏色、紋理等，也就是將資訊對應到視覺元素的. sit. y. Nat. 過程，其結果讓只能維持幾分鐘的人類視覺搜索動作得以完成，意即在短時間內接收. io. 在此釐清一些容易混淆的概念：(余民寧, 2000). n. al. Ch. engchi. er. 完大量的資訊 [1] [2]。. i n U. v. 1. 資訊視覺化（Information Visualization，簡稱 InforVis）將抽象物可視化，包含數字、文字、地理資訊等，呈現方式不限 [3]； 2. 資訊圖表（Infographics）將資訊、資料或知識可視化，以圖或表的方式呈現 [4]； 3. 資料視覺化（Data Visualization）將數字或數據可視化，以統計圖、圖或資訊圖表的方式呈現 [5]。三者之間依被抽象物分為資訊、資料兩類，資料被包含於資訊，另外又可依呈現方式分為限定圖表或泛指所有可視化的呈現，所以三者有互相包含、獨立的部分。本研究的對象「互動式資料視覺化（Interactive Data Visualization）」與一般靜態資料視覺化的不同之處在於可互動性，非由設計者直接提供單一觀點，而是讓資料在不同使用者的互動操作下有各自的詮釋，依循的原則為 Ben Shneiderman 於 1996 年所提 1.

(14) 出之「視覺化資訊檢索真言（Visual Information-Seeking Mantra）：先有整體輪廓，再做放大檢視或過濾，接著是依個別需求提供細節。」換句話說，使用者對一個互動式資料視覺化工具的第一印象形成了最初步的了解，接著透過實際操作，一一獲得想知道的資訊。圖 1.1解釋了互動式資料視覺化的意義，灰色方塊的寬度表示需要花費多少力氣，康仕仲博士指出人與資料的互動是透過呈現與操作介面的設計，若善用資料的特性和使用條件，則可降低原始資料之複雜程度至人類視覺可理解範圍，意即讓使用者面對資料的障礙藉由介面的加入而降低 [6]，且能在資料中自由探索、得到洞見 [1]。簡言之，使用者需要透過互動，一步一步探索更深層的資料，才能從中得到洞見。. 立. 政治大. Nat. n. al. er. io. sit. y. ‧. ‧ 國. 學 (a) 原本使用者與資料的互動狀況. Ch. engchi. i n U. v. (b) 視覺化參與後使用者與資料的互動狀況. 圖 1.1 人與資料互動的三層架構任何互動設計都應該要有評估方法，倘若它不易使用，便會降低使用意願與次數，使得此設計的意義沒有辦法發揮。隨著適合資訊工程師的 D3.js [7] 和給非程式開發者的 tableau [8] 等工具的出現，讓人人都可以做互動式資料視覺化，它們因應新的需求與演算法被開發出來，或是舊有的呈現方式根據不同的資料產生變形，然而這些不被大家熟悉的設計卻很少被評估、驗證。目前尚未有互動式資料視覺化專門的評估方法，少數有嘗試評估者，方法單一，都是沿用靜態資料視覺化的評估方法，藉由任務設計. 2.

(15) 讓使用者回答問卷，再從答題正確率、花費時間了解可理解性與效率，運用問卷研究法的優點是能蒐集很多回饋，以及節省人力、時間、經費，但缺點是只能知道結果，無法客觀地得知使用者在操作和答題中的思考與決策過程，很難做更進一步的調查，也不確定受測者是否認真填答。而且圖表的設計還需考量表達精準度、吸引力、印象深刻性、美觀偏好、符號意義、反應時間、使用意圖、使用情境等 [9]。因此本研究希望能提出互動式資料視覺化的評估方法，包含實驗設計與資料分析方法，來衡量其設計的優使性。. 1.2. 研究問題. 政治大互動式資料視覺化需要透過「使用者的互動」才能得到訊息，使得評估的關鍵為立. ‧ 國. 學. 「操作的過程」，亦即使用者如何與介面互動、其理解為何、需要多久時間，而不能單獨從任務的完成與否來衡量，因為無法從這樣的結果得知沒有完成任務是因為哪一個. ‧. 環節沒有理解，或是完全被忽略；即使有完成，但可能過程不是那麼肯定，有一些反覆嘗試。這些操作細節都需要透過電腦紀錄與分析，因為若是透過訪問，受測者的主. y. Nat. io. sit. 觀形容較為概括，且經過濃縮與整合，而不是即時又細微的使用困難，甚至有些行為. n. al. er. 來自於習慣與過去的經驗，不算是很有意識的操作，所以使用者真正的操作過程需要用電腦蒐集每極短時間內的動作變化。. Ch. engchi. i n U. v. 互動式資料視覺化中，「互動」來自滑鼠操作（或平板上的觸控，兩者概念類似，本論文僅先討論滑鼠操作），並從眼睛得到回饋，因為滑鼠的操作會影響到頁面的呈現，所以眼動和滑鼠的行為紀錄兩者缺一不可。本研究結合任務問卷和滑鼠與眼動的追蹤資料分析，用來評估互動式資料視覺化，所有的眼動實驗都假設眼動與心智一致 [10]，亦即眼睛在看哪裡就代表在想什麼；部分分析是針對完全自由的探索，想了解使用者對一個視覺化的初步印象與直覺反應為何，另一部分的分析則是在有任務的情況下進行，可以針對視覺化的特定功能做測試。本研究之目的為提出一套有系統性且可被複製的量化實驗與分析方法，用來評估互動式資料視覺化的優使性，著重從量化分析結果客觀地得到使用者操作的困難點，進而回饋給設計者其作品需要加強與改進的地方。為了驗證此方法的可行性，以兩個不同的互動式資料視覺化工具來測試，確認此方法的通用性，不僅能應用在特例中。 3.

(16) 本論文研究貢獻如下： 1. 在我們所知的相關研究裡，本研究第一個評估互動式資料視覺化的使用者行為。 2. 因為互動式資料視覺化的特性為使用滑鼠操作與眼睛接收，所以應用眼動與滑鼠追蹤來蒐集使用者量化資料，並詳述具體實驗方法。 3. 分析方法包含改進興趣區域法，並提出將使用者行為轉成序列，進行序列運算。 4. 提出評估互動式資料視覺化的指標，包含：吸引力、易發現性、困難度、易識別性、易理解性、精準表達程度、使用效率。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 4. i n U. v.

(17) 1.3. 研究流程與方法. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 1.2 互動式資料視覺化量化評估流程圖. 1.4. 論文架構本論文共分為六個章節，其內容綱要如下：第二章探討資料視覺化的評估方式和. 電腦操作量化評估方法，第三章為研究方法，參考使用者經驗研究方法與量化資料分析方法，並依實驗流程分別介紹如何做實驗任務設計、資料蒐集、資料分析，第四章為初始以及經過前期研究後改進的實驗設計，第五章為實驗結果，驗證各評估指標與描述研究限制，第六章為結論與未來展望。. 5.

(18) 第二章. 文獻探討. 文獻探討分為二個部分，第一部分為資料視覺化現有的評估方法，大多是以問卷、任務為主，實驗者規劃任務讓受測者操作新設計的視覺化，並回答相關問題，用來了. 政治大後續學者發現這個衡量標準仍有待改善，且需要其他標準共同評估。第二部分因為互立. 解受測者的理解程度、完成效率，此外，Tufte 曾提出資料墨色比率的極簡化設計準則，. ‧ 國. 學. 動式資料視覺化的互動來源是眼動、滑鼠，所以我們想了解過去研究者如何量化分析使用者的電腦操作行為。. ‧. 資料視覺化評估方法. sit. y. Nat. 2.1. n. al. er. io. 目前常見的（靜態）資料視覺化評估方法可略分為兩大類，第一類是設計任務後，. i n U. v. 請受測者自行完成問卷，用來了解此作品的可理解性、操作效率；第二類是計算資料. Ch. engchi. 墨色比率，得知設計元素是否充分且恰當地被使用。. 2.1.1 問卷、任務以任務問卷進行評估時，過去研究經常自行製作大綱來發想問題，像是 Tennekes 討論樹狀圖，問卷中包含 A 和 B 的關係、C 在哪個階層、D 有多少子階層、對一些陳述句的同意程度、改變的排版或顏色是否漂亮、對某設計的普遍感覺等 [11]。又比如 Viegas 問受測者對此圖表的熟悉程度、情緒感受、是否能從圖表獲得資訊、使用圖表的動機與用途、對設計策略的解釋 [12]。再舉例 Lee 要求受測者找出 A、B 中某極值的趨勢、區間 C 內發生什麼事、整張圖表的某種極值 D [13]。抑或是 Rivadeneira 透過使用者的回饋調整設計，改變標籤雲的字體大小、排列位置、最大幾個字的距離，在有限的閱讀時間後，測驗受測者的記憶，發現字體大、排列在左上角讓人較有印象，此 6.

(19) 研究用多選題、等級、開放性問題瞭解使用者的感受 [14]。這類型的評估通常以網頁的方式呈現，上面是新設計的圖表，下面是任務與問題，任務的方向可統整如下：理解程度、讀圖效率、主觀感受、意義闡述、動機、用途，在出題時需要注意任務的難易度需要有鑑別度，因為經常有實驗結果是所有人都很快且答對，便無法得知使用者是否有操作或理解困難。雖然用問卷的方式容易快速蒐集很多資料，是省時省力的好方法，但是無法確知使用者是否認真填答，且無論主客觀的問題回答標準都是每位受測者自己定義的，非經統一，亦無從得知真正閱讀的過程與困難。前述的評估多是實驗者設計一些非真實的任務來測試使用者，然而這種方法並無法反應真實情況，因此 Plaisant 提出「案例分析法」，讓受測者描述和操作完整的使用. 政治大. 流程，可以觀察到一些情緒反應，例如在資料清理1 時的挫敗，還有第一次看到結果的. 立. 興奮；也可以透過長期的觀察了解這個視覺化的使用頻率、工作效率改善狀況、同事. ‧ 國. 學. 間的合作情形。這種方法的好處是可以得到真實的使用者資料，進而瞭解易用性，缺點是耗時，且結果無法重製、抑或與其他結果比較 [15]。. ‧. 任務與問卷遇到的挑戰是每個學科都想要各自發展一套標準，所以到目前仍沒有. sit. y. Nat. 夠成熟的標準可以用；實驗結果分析經常拿平均的結果，但是使用者研究應該探討. io. al. n. 受 [15]。. er. 個體差異，以得到更多發現；同一位受測者在不同時空背景下常有不同的想法與感. 2.1.2 資料墨色比率. Ch. engchi. i n U. v. 圖表分析大師 Edward Tufte 在 1983 年提出「資料墨色比率（Data-Ink-Ratio）」[16]，意思是圖表裡所有用的墨水之中有多少部分真正用來呈現資料：. 資料墨色比率 =. 資料墨色印製圖形時所使用的全部墨色. = 圖形中專門用以顯示資料之非冗餘內容的墨色的比例 =. 1.0 − 圖形中可以刪除而不致損失資料的部分. (2.1). 在此概念下，部分圖表元素可以移除，包含：花俏或無意義的背景、重複的標籤 1 資料清洗用意為糾正數據中可識別的錯誤，確保格式統一，過濾明顯的錯誤值、缺失值、不合理值. 7.

(20) （例如：X、Y 軸上的數值與長條圖上的資料標籤，或是圖例與資料類別）、邊框、顏色（例如：讓同類的資料用同種顏色，或是只突出重點，其他一律灰階）、不必要的 3D 或陰影效果、輔助線顏色變淡或是移除，以及調整適當的、可見的線條粗細 [17]。總結來說，資料墨色比率希望提供一個設計準則，讓圖表不要有太多冗餘 [18]。有一些學者試著透過使用者研究來驗證這個理論，Few 等學者發現適度的提升和減少資料墨色比率都有可能提升閱讀效率，所以可以推得不是極簡或極繁風格最好，而是應取一個適當區間的資料墨色比率 [18]。 Inbar 等人則是給予受測者一些任務，讓他們比較一般常見的和經過 Tufte 簡化的長條圖，如圖 2.1，發現受測者相對喜歡原本的圖，因為對新的圖不熟悉 [19]，但 Tufte. 政治大. 在一開始發表時便提過使用者可能因為不夠熟悉而還不習慣這種他認為比較好的設計。. 立. ‧. ‧ 國. 學 (b) Tufte 簡化的長條圖. sit. y. Nat. (a) 一般常見的長條圖. io. n. al. er. 圖 2.1 一般常見的長條圖和 Tufte 簡化的長條圖的比較 [19]. i n U. v. Kelly 則是要求受測者只花 5 分鐘，模擬人們讀報時間，讀 USA Today 的新聞圖. Ch. engchi. 表，以及經過資料墨色比率規則簡化後的版本，如圖 2.2，再讓他們回答問題，發現不論是高或低資料墨色比率的圖，答題錯誤率相同，由此可知此規則與精準度不一定有關 [20]。. (a) USA Today 新聞圖. (b) 經過資料墨色比率簡化的圖. 圖 2.2 USA Today 新聞圖與經過資料墨色比率簡化的圖的比較 [20]. 8.

(21) Bateman 等學者則是比較 Nigel Holmes 因應主題的資料視覺化和簡單的長條圖 [9]，如圖 2.3，分析受測者的理解程度，以及觀看完圖表經過短時間及長時間後的印象深刻程度，發現受測當下以及經過短時間後的理解程度和印象深刻程度差不多，但在過了一段時間後，受測者對 Holmes 的版本比較有印象，即使這個版本對 Tufte 來說有太多冗餘的東西了。從此篇研究中得知圖表設計並沒有一定的規範，而是使用者的意圖與操作情境決定了圖表的好壞，像是新聞圖表就較適合用 Holmes 的版本。. 政治大. 學. ‧ 國. 立 (a) Holmes 版本. 圖 2.3. (b) 簡單版本. Holmes 和簡單版本的長條圖的比較 [9]. ‧. sit. y. Nat. 綜上所述，資料墨色比率不應一味追求極大值，而是取適當區間，而且此方法並. io. er. 非衡量圖表的唯一方法，還有精準度、反應時間（與熟悉圖表類型有關）、美觀偏好、符號意義（與社會、文化有關）、吸引力、印象深刻程度、使用意圖、使用情境等都是. n. al. Ch. 評估圖表好壞可參考的指標 [9]。. 2.2. engchi. i n U. v. 電腦操作量化評估方法有別於以往資料視覺化的評估方法，都是從受測者的回答衡量好壞，本研究希望. 提出用科學、可量化的方式來觀察使用者實際操作互動式資料視覺化的狀況，其中互動來自滑鼠操作與眼睛接收，因此在本節中分別討論眼動追蹤分析、滑鼠追蹤分析，以及眼動與滑鼠追蹤的綜合分析。. 2.2.1 眼動追蹤分析眼動追蹤分析已被用來評估靜態資料視覺化，Kulla-Mader 的研究發現只要有墨水的地方（非空白區域）就會引起瞳孔放大的反應，圖 2.4黑線部分是受測者眼睛凝視點 9.

(22) 的軌跡 [21]；Burch 等學者則是針對三種不同型態的樹狀圖做眼睛追蹤測試，觀察到不論是哪一種圖都是根部的地方讓受測者停留最長的時間，以紅色標示於熱點圖 2.5 [22]。. 立. 圖 2.4. 政治大直方圖上眼睛凝視點的軌跡 [21]. ‧. ‧ 國. 學 sit. y. Nat. n. al. (b) 轉直角的樹狀圖. er. io. (a) 傳統樹狀圖. Ch. engchi. i n U. v. (c) 放射狀的樹狀圖. 圖 2.5 不同種樹狀圖的熱區圖結果 [22]. Toker [23] 同樣研究受測者對長條圖的理解能力與效率，總共任務有 80 個，當受測者作了 40 個之後開始熟悉圖表，每一題需要花的時間較先前減少，且較穩定，如圖 2.6所示。 10.

(23) 圖 2.6 所有受測者回答每一題的平均時間 [23]. 政治大眼動實驗都是建立在眼動與心智一致的假設上 [10]，意思是眼睛在看哪裡的同時人立. ‧ 國. 學. 類正在想什麼。關於眼動實驗設計，因其結果時常發生誤差，來自校正不準、視網膜中央凹的誤差、實驗時分心、眨眼或是轉頭（眼動儀與受者測眼睛相對位置偏移），如. ‧. 果有一段實驗數據沒有視線軌跡、凝視，便需要排除那段數據，實驗時應盡量排除一. y. Nat. 切干擾，包含不相關的聲音、突出的顏色。實驗環境保持微暗，螢幕避免太亮，都可. io. sit. 以讓瞳孔大一點，使眼動儀較容易獲得資料。實驗前讓受測者單獨閱讀一段文字可以. n. al. er. 知道他的感知與認知之間的延遲時間。因為眼動實驗需要長時間的關注，所以中間必. i n U. v. 須要有休息，而且每次開始之前都需要重新校正，同時，為了避免疲勞影響實驗結果，. Ch. engchi. 包含休息的總實驗時間必須在一小時內，如果有多個實驗就需要招募更多的受測者。因為每個人眼睛的狀況不同會影響受測結果，像是眼皮低的人不容易抓到瞳孔，而攜帶隱形眼鏡或眼鏡會造成光線反射，讓 The Eye Tribe、Tobii 等以紅外線掃描角膜反射的眼動儀受干擾，所以通常需多招募 10% 至 20% 的受測者 [24] [25] [26]。. 2.2.2 滑鼠追蹤分析 Navalpakkam [27] 對於廣告在網頁搜尋頁面上的位置感到好奇，他嘗試將廣告放在不同位置，觀察點擊數，以及位置應該要變動還是固定，若固定的話會不會讓使用者自動忽略該區域。Arroyo [28] 則是用滑鼠軌跡觀察網頁設計的好壞，他發現滑鼠的使用行為可以區分為五種：指著關注的地方不動、隨著閱讀行為移動、只用來滾動、停. 11.

(24) 在某個地方直到下一個點擊發生前才移動、以及隨機使用。在 105 位受測者中只有 37 位會移動滑鼠，而且只有其中一部分的人隨著閱讀行為移動，其實比例相當低（少於三分之一）。滑鼠停留的位置經常是網頁的 LOGO、描述或選單上，而互動主要發生在選單上，很多人會想要點擊 LOGO 卻發現沒有任何反饋。Hehman [29] 則是選擇了較特別的領域：心理學實驗，要求受測者為一次一張頭部照片選類別，像是性別、種族等，從受測者的滑鼠軌跡觀察使用者做決策的心理過程，是篤定，猶豫不絕 (圖 2.7A)，甚至反悔 (圖 2.7B)。. 立. 政治大. ‧. ‧ 國. 學. 圖 2.7 受測者選擇相片類別的滑鼠軌跡 [29]. y. Nat. al. er. io. sit. 市面上還有一個工具是 Hotjar 用來做滑鼠追蹤分析 [30]，其中提到幾種分析方法：. n. 1. 點擊分析：受測者會不會常常點不是按鈕的區域。. Ch. engchi. i n U. v. 2. 分心測試：如果受測者一直沒有看到關鍵訊息，而是任意地變換位置，代表他抓不到重點。 3. 資訊取得性：如果受測者有太頻繁的點擊，或是滑到網頁最下端，表示他可能找不到想要的資訊。 4. 深度測試：有太長的留白或是其他不必要的按鈕，讓使用者誤以為網頁結束了而離開，沒有完整接收到設計者欲傳達的資訊。 5. 頁首測試：是否在頁首的部分停留太久，不知道怎麼繼續。 Hotjar 提出的概念可以只從滑鼠的行為就推測使用者的想法，但是應用較限於一般網頁，若欲應用在互動式資料視覺化上，還需改進，因為不一樣的互動式資料視覺化會引起不同的眼動與滑鼠動作，使用者的行為不如操作網頁般容易預測。 12.

(25) 此外，Gerken [31] 特別提到只使用滑鼠追蹤分析是有危險的，因為實驗者無從得知受測者的情境，不容易理解為什麼會有這些動作，所以可能衍生出其他問題，像是哪些資料需被過濾掉，哪些動作代表的實際意義為何，這與 Plaisant [15] 提出的討論相同：實驗室實驗有一定的限制性，無法完全模擬真實情況，但真實案例分析有更多不可預期，且難以比較、重現。. 2.2.3 眼動與滑鼠追蹤綜合分析雖然滑鼠追蹤的發展已經很多年了，近年來隨著眼動儀價格降低，相關研究也逐漸變多，但是結合兩者的仍是少數，目前都是 Google 的團隊針對搜尋結果頁面上的觀. 政治大. 察與討論，從眼睛、滑鼠的停駐點（fixation）了解使用者關注何處，眼睛、滑鼠的移. 立. 動以及停駐行為是否一致，以及觀察使用者操作有無固定模式。. ‧ 國. 學. Rodden [32] 的研究發現如圖 2.8，他們將搜尋結果頁面分為 12 個區域：以橫向切成頂部、搜尋結果有字的部分定義為 1 至 10 號，以及剩下沒有被框到的區域，分析滑. ‧. 鼠點擊、眼睛凝視、滑鼠停駐落在哪一個區域，並算出各自在該區域停留時間相對總. sit. y. Nat. 共花費時間的比例，發現在頂部時，有最多的點擊，滑鼠停駐次之，最後是眼睛凝視；. er. io. 區域 1，也就是搜尋結果排序 1，則是點擊最高，眼睛凝視第二，緊接著滑鼠停駐；區. al. 域 2 到 10 的表現一致，三種動作的停留時間相近；最後，在其他區域的部分，滑鼠停. n. v i n C h 1、其他區域受到最多的關注，遠大於在駐最長的時間。整體趨勢以頂部、區域 2 到 10 engchi U. 的範圍。另外，圖 2.9分別計算眼睛凝視點與滑鼠停駐點在垂直、水平方向上的距離，發現受測者在搜尋結果頁面上眼睛、滑鼠於垂直方向的位置較一致，而少部分的使用者則是操作滑鼠指向眼睛要看的位置，一起移動。 Rodden 等學者 [33] 還作了後續研究，同樣針對 Google 搜尋結果頁面，有 25 個有效受測者，並給予 7 個任務，其中有 78/175（44.6%）個樣本積極使用滑鼠，56/175 （32%）在搜尋的時候，眼睛和滑鼠在垂直方向上互相跟隨，僅有 18/175（10.3%）有水平方向上的跟隨情況，另外有 28/175（16%）用滑鼠標示結果。雖然已知眼睛和滑鼠的表現在搜尋結果頁面裡不甚一致，Navalpakkam 等人 [34] 試圖用滑鼠軌跡去預測人正在看何處，因為紀錄滑鼠比較容易，僅需內嵌於網頁中，眼睛追蹤則是需要額外的儀器。這篇研究提出不同於 Rodden 的兩篇用距離計算，而是用. 13.

(26) 圖 2.8 在各個興趣區域中滑鼠點擊、滑鼠停駐、眼睛凝視的時間比 [32]. 立. 政治大. ‧. ‧ 國. 學 er. io. sit. y. Nat. 圖 2.9 眼睛凝視點與滑鼠停駐點在垂直、水平方向上的距離之出現次數，（原點在搜尋結果頁的左上角，往右為正，往下為正）[32]. n. al. 決定係數2. Ch. engchi. i n U. v. （coefficient of determination）（圖 2.10）計算眼睛、滑鼠的線性比例，結果. 發現 78% 的受測者第一個眼睛凝視點在頂部，在這個位置眼睛、滑鼠的相關性很低，但是換頁或是關掉網頁之前的最後一個興趣區域眼睛、滑鼠的位置有正相關。整體來說，眼睛、滑鼠在各個區域停留時間之趨勢是一致的，頂部 > 中間 >Google 知識圖3 > 底部、左邊，若用熱點圖（圖 2.11）呈現受測者最關注哪一個位置，可以看到兩個金三角，較大者（也是最受關注的區域）以整個頁面的頂部左側為三角形的底邊，呈倒三角形，較小者則是在 Google 知識圖上，同樣是倒三角形。結論，以滑鼠預測眼睛凝視位置仍然非常不準確，還是需要眼動儀輔助，因為每個人操作滑鼠的習慣差太多，而且 2 在依變項. Y 的總變異量中，能被自變項 X 所解釋到的變異量百分比。」決定係數越大表示依變項的總變異量能被自變項的變異量的解釋部分越多，預測結果越準。 3 Google 搜尋在 2012 年加入的新功能，顯示在搜尋結果的右方，透過語意學演算，直接提供結構化的搜尋結果總結及其連結，讓使用者不需自己彙整資訊，進而提升搜尋品質。. 14.

(27) 也會受到不同的滑鼠影響。. 立. Google 搜尋結果頁眼睛和滑鼠在最大的 y 值上的決定係數 [34]. 學 ‧. ‧ 國 io. sit. y. Nat. n. al. er. 圖 2.10. 政治大. Ch. engchi. i n U. v. 圖 2.11 Google 搜尋結果頁的熱點圖分析 [34]. 15.

(28) 2.3. 小結為什麼討論互動式資料視覺化的評估很重要，因為目前這類作品靈感經常是從工. 程師角度發想，而非從使用者的需求出發。例如圖 2.12就是個典型的例子，設計者自行發想環形圖有哪些瀏覽、互動操作的可能，像是環往外長、角度變大變小等，便直接設計了這種互動式資料視覺化工具，沒有考慮到使用者如何操作，成品也非經使用者評估，或是製作任何提示 [35]；又如 [36] 將總體基因體學視覺化，因當時的圖表不足以表達多數階層、第二項變數，所以該研究結合環形圖、樹狀圖提出一種新的表現方式 ──KRONA，如圖 2.13所示，再讓使用者比較三種圖的效率、正確率如何，因為. 政治大. KRONA 是針對特定目的而設計，所以使用者測試表現優於另外兩者可以被預期。. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. i n U. v. 圖 2.12 環形圖的變形，左圖白色的鼠標點擊後，會展開成右圖 [35]. Ch. engchi. 圖 2.13 KRONA 視覺化，顯示細菌的生物層級的關係 [36] 16.

(29) 若非工程師的努力，或許使用者很難自己想像到有什麼新的視覺化呈現設計，但是只有工程師自己的努力沒有納入使用者的需求與操作習慣，也是徒勞無功，兩者應為相輔相成。從上文兩個典型的例子都可以看到一個明顯的缺漏，也就是沒有做有效的使用者評估，從一般的問卷、任務僅能得知整體的操作效率與可理解性高低，而非確切知道操作過程中的問題點在哪裡。此外，從眼動與滑鼠追蹤分析的討論中，了解到其能提供量化的資料，改善過去問卷的自我陳述的可信度，並能用來觀察使用者的操作過程。因此本論文採用任務設計方法，提供不同受測者間一個比較標準，並同時用眼動和滑鼠追蹤互動式資料視覺化如何被使用。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 17. i n U. v.

(30) 第三章. 研究方法. 此章中將介紹本研究參考、引用了哪些方法，以及它們如何被使用，按照實驗流程，第一節為實驗前任務設計，第二節為實驗中資料蒐集方法，有取得量化資料的工. 政治大. 具介紹，還有質性使用者經驗資料記錄，第三節則是實驗後的資料分析方法，除了基. 立. 本的眼動與滑鼠追蹤資料的分析，還將處理過的結果進行演算，得到更直觀的結果。. ‧ 國. 學. 3.1. 任務設計方法. ‧. 為了瞭解受測者對特定功能的反應與理解，沿用過去評估資料視覺化的方法之一. y. Nat. sit. ── 任務設計，觀察他們在限定情況下的反應，本研究採用由 Amar [37] 提出的資訊視. n. al. er. io. 覺化低階分析任務設計法，因為它比其他的方法更加具體、有系統性，而且定義清楚有助於發想。任務分為十個類型：. Ch. engchi. i n U. v. 1. 取值：從多筆資料中找出某些屬性的值。 2. 過濾：找到符合某條件的資料。. 3. 簡單計算：根據題意做簡單的數數或是加減運算。 4. 找極值：找出資料中的極大或極小值。 5. 排序：做資料排序或得出排名。 6. 範圍區間：資料集中某屬性的範圍區間。 7. 資料分佈：與範圍區間類似，但可能是找類別（敘述而非數字）或分佈在哪些範圍。 18.

(31) 8. 找異常值：找出資料中超出預期或異常的值。 9. 群集：資料集中是否有相似特性的資料。 10. 相關性：資料集中的兩個屬性是否有相關性。當然這個分類方法僅能涵蓋大部分的任務，而非所有，其他任務方向還有比較、不確定的條件或是不只一種答案等。另外為了讓任務更擬真，可以根據受測的互動式資料視覺化的內容，訂定較符合真實目標使用族群的任務，例如此次研究採用的資料為臉書資料的視覺化，設計任務. 政治大. 時便需要以小編（臉書粉絲專頁經營者）的角度來思考這個工具應該如何被使用，想要從中獲得什麼資訊？. 立. 另外，為了避免受測者從選擇題的選項中推測出答案，所以本研究使用簡答題來. ‧ 國. 學. 進行，優點是當使用者答錯時，實驗者可以知道是被什麼誤導，或是那些功能的表達不甚明確造成答題困難，缺點是較為費力。. ‧ y. Nat. 資料蒐集方法. n. 3.2.1 眼動儀工具介紹 a l. er. io. sit. 3.2. Ch. engchi. i n U. v. 市面上的眼動儀以 Tobii EyeX、The Eye Tribe（Preliminary 版本）的價格較可負擔，約三千至四千台幣，其他動輒數十萬元以上，又因為此次研究想要同時分析眼動、滑鼠的使用紀錄，採用自由軟體 OGAMA，其僅支援 The Eye Tribe，因此選擇此眼動儀作為研究工具。 The Eye Tribe 的原理 [38] 是將近紅外線打在受測者的眼睛上，瞳孔對紅外線的反射率低，角膜則是幾乎全反射，所以可以知道瞳孔的大小，還可以經由計算得知瞳孔與角膜上反射光的中心位置，推得眼球轉動角度、視線方向。使用近紅外線是為了與可見光區隔，不干擾受測者觀看螢幕。實驗前的校正，螢幕上出現一些固定的凝視位置，眼動儀軟體計算眼球轉動的角度，以及螢幕上位置座標。越多的校正點讓結果越準確，但也需要越多時間。實驗時，從時間內取樣的眼球轉動角度回推出螢幕上的觀看位置。 19.

(32) 表 3.1、表 3.2為 The Eye Tribe 硬體限制與規格介紹 [39]：表 3.1 The Eye Tribe 硬體規格限制項目. 規格. Windows 版本. 7 以上 Odroid-XU 3 + Android eMMC. Android 版本. OS 4.4.4 Odroid-XU + E (legacy support) OS 4.4.2 Project Tango tablet. 連接孔. USB 3.0. 政治大. 表 3.2 The Eye Tribe 軟體規格. ‧ 國. 規格. 取樣頻率. 學. 項目. 立. 30 Hz 或 60 Hz. 精準度. 0.5◦ − 1◦. ‧. 視角. 瞳孔 0.5 mm. 校正點數. 9、12、16. er. n. al. 操作距離1. sit. y. Nat. < 20 ms，在 60 Hz 的時候. io. 延遲. Ch. i n U. v. 45 cm - 75 cm. engchi. 偵測範圍. 當操作距離為 65 cm 時，40 cm × 30 cm. 螢幕大小. 最大 24 吋. API / SDK. Java、C++、C#. 輸出數值. 螢幕上的 X、Y 值、瞳孔大小. 因為眼動儀是計算相對位置，所以只要受測者的頭有移動或轉動，都需要重新校正，即便是很貴很精密的眼動儀也有將受測者頭部固定的架子，以確保精準度，或是抓眼睛的位置運算補償，但仍不夠準確，所以本研究採用架子固定受測者與眼動儀的相對位置。如圖 3.1所示，紫色塑膠瓦楞板被割出臉孔大小，讓受測者可以盡可能向前靠，並與眼動儀保持固定距離，咖啡色為不織布包鐵絲，可以根據不同受測者的頭圍調整大小，黑色則是支撐架，用 Google sketch up 建模後用 3D 印表機印出來。 1 受測者與螢幕間的距離. 20.

(33) (a) 實品. (b) 3D 建模檔. 政治大. 圖 3.1 頭部固定器. 立. The Eye Tribe 測量的誤差值可用 s = r × θ 計算，此公式用於計算圓弧長度 s，r 是. ‧ 國. 學. 圓半徑，θ 是角度，當 θ 很小時，螢幕上的距離 L 趨近於 s。將眼動儀視為一個觀察點，人到眼動儀的距離是 55 cm，The Eye Tribe 的誤差值為. 0.5◦ 到 1◦ (也就是. π 360. 到. π 180. )，儀. ‧. 器造成的誤差即為圓弧長度 9.6 mm，換算成實驗用的電腦螢幕（Philips 220 VW）大小. sit. y. Nat. 及螢幕解析度後，為 34.6 pixel，亦即每一個 OGAMA 記錄下來的眼動的值，有誤差直. io. n. al. er. 徑為 34.6 pixel 的圓，如圖 3.2中的黃色圓形。. Ch. engchi. i n U. v. 圖 3.2 The Eye Tribe 在螢幕上的誤差值此外，Popelka 2016 年的論文 [40] 驗證了 The Eye Tribe 的資料可信度，他請來 14 位受測者做測試，同時用 SMI RED 250、The Eye Tribe 蒐集資料，兩台眼動儀的比較於表 3.3呈現，SMI RED 250 各項表現都較好（價格也較為昂貴）。實驗進行方式從 21.

(34) 圖 3.3可見，發現 The Eye Tribe 雖為相對便宜很多的眼動儀，但還是相當有精準度，如圖 3.4所示，唯獨螢幕底部中間的表現較差，底部兩側則是正常，若欲做為實驗器材，設計上需避免或略過測量此區域。表 3.3 SMI RED 250 和 The Eye Tribe 規格比較 SMI RED 250. The Eye Tribe. 取樣頻率. 500 Hz. 30 Hz 或 60 Hz. 精準度. 0.4◦. 0.5◦ − 1◦. 延遲. < 4 ms. < 20 ms，在 60 Hz 的時候. 校正點數. 2、5 或 9 ，以及孩童模式. 政治大 60 cm - 80 cm 立. 操作距離. 9、12 或 16 45 cm - 75 cm. 螢幕大小. 最大 60 吋顯示器，或 300 吋投影幕. 眼睛狀況. 大部分眼鏡、隱形眼鏡都支援. 支援大部分隱形眼鏡，但不支援眼鏡. 價格. 美金 1495 元. 美金 99 元. 當操作距離為 65 cm 時，40 cm × 30 cm. ‧. ‧ 國. 當操作距離 70 cm 時，40 cm × 20 cm. 學. 偵測範圍. Nat. n. al. er. io. sit. y. 最大 24 吋. Ch. engchi. i n U. v. 圖 3.3 同時用 SMI RED 250、The Eye Tribe 蒐集實驗資料 [40]. (a) 實驗一：按照數字順序閱讀. (b) 實驗二：用眼睛描繪地圖邊緣. 圖 3.4 紅色線為 SMI RED 250 實驗結果、藍色線為 The Eye Tribe 實驗結果 [40] 22.

(35) 3.2.2 OGAMA 工具介紹雖然市面有很多眼睛凝視、滑鼠追蹤分析的軟體或插件，但 OGAMA (Open Gaze And Mouse Analyzer) [41] 是唯一同時結合滑鼠和眼睛凝視分析的開源軟體，因此選擇以其作為此研究的工具。圖 3.5為 OGAMA 的工作流程，以下分別介紹此軟體提供的分析方式 [42]：. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 3.5 OGAMA 工作流程以及可提供的分析模式 1. 眼睛凝視點、滑鼠停駐點資訊，包含水平、垂直位置，開始、停留時間，可以選擇以點或圓圈的方式呈現，時間越長，圓圈半徑越大。 2. 熱區圖（Heat map or Attention map）：將所有的停駐點（fixation）取常態分布，公式 3.1 如下，凝視時間或是滑鼠停駐時間越長者為紅色，依序為黃色、綠色的漸層。可以自由選擇要取一至多位受測者一起算。 − f ( x, y) = e. x. 2 + y2 2σ 2. 2πσ , x, y ∈ [−s, s] 23. 2. (3.1).

(36) σ 為標準差，設定 σ = s ，依照停留時間決定每一個停駐點的權重。 5. 3. 重播：凝視、滑鼠可以選擇只呈現當下的位置，或是從過去到現在的軌跡。 4. 視線軌跡圖（Scanpath）：選擇多個受測者，或是將不同的受測者指定為群組，作受測者間或群組間停駐點的比較，一個受測者的資料是一個字串，最後算出每一個點有多少受測者停留，如果 100% 表示所有受測者都在此位置停留。 5. 視覺醒目性圖（Saliency map）：心理學中，某些刺激特別有吸引力，此特性被稱為醒目性（Saliency），視覺醒目性圖為透過運算估計使用者可能關注的位置。. 政治大. 6. 興趣區域：使用者自行定義興趣區域，OGAMA 回傳該區域內停駐點總數與時. 立. 間。. ‧ 國. 學. 7. 統計：如果發現某一段數據有明顯的偏移，可單獨排除那段。能從 OGAMA 得到的數值如下：. ‧. • 受測者參數：ID 是自動產生，其他可以由實驗者自己定義，包含年齡、性. y. Nat. sit. 別、職業、左右手慣用者等。. n. al. er. io. • 實驗參數：受測者類別、總實驗時間、遺失的資料（包含：眨眼、在螢幕範. i n U. v. 圍外的數值）、受測者的反應、答題正確率、是否需要排除此受測者。. Ch. engchi. • 眼睛凝視參數：凝視點數、每秒有多少凝視點、平均凝視時間、凝視/掃視比率、凝視軌跡、凝視長度（兩個凝視點之間的距離）；與滑鼠互動的情況：第一個滑鼠點擊前有多少凝視點數、凝視和滑鼠間的平均距離；在興趣區域的凝視情況：第一個凝視的興趣區域、總共停留在興趣區域的時間、每個興趣區域之間的時間，以及其他根據興趣區域算的眼睛凝視參數。 • 滑鼠參數：滑鼠停駐點數、每秒有多少停駐點、平均停駐時間、停駐與快速移動比率、移動軌跡、移動長度（兩停駐點之間的距離）、左或右鍵點擊次數、左或右鍵點擊頻率，以及在興趣區域內上述參數的狀況。. 24.

(37) 表 3.4為 OGAMA 硬體上的限制：表 3.4. OGAMA 硬體限制. 項目. 規格 The Eye Tribe, Smart Eye, Mirametrix S2, alea technologies IG-30 Pro, ASL series,. 眼動儀. Tobii Pro, EyeTech VT2, Gazepoint GP3, Gazegroup GazeTracker, Senso Motoric Instruments iViewX and Red-M System, Haytham. 作業系統. Windows. 記憶體. 12 GB2. 立. 3.2.3 放聲思考法. 政治大. ‧ 國. 學. 放聲思考法的英文名是 Think Aloud Protocol，用於產品設計或開發時進行使用者測試，希望受測者執行動作的同時可以說出內心的想法。此方法的優點為便宜，不需要. ‧. 特別的器材；彈性，適用任何對象或產品階段；有說服力，不只是得到使用率不佳的. Nat. sit. y. 結果而已，而是知道使用者真實的心聲。缺點是不自然，人們通常不會邊自言自語邊. er. io. 做事，所以即使一開始有要求，也有可能到實驗中就忘記要繼續說；經常是被過濾的. al. v i n Ch 似聰明一點，而講出思考後的句子，因而隱藏了最真實的想法 [43] [44]。 engchi U n. 陳述，放聲思考法需要的是第一個出現在腦海中的想法，但是受測者往往希望自己看. 關於上述缺點舉例：內心的想法為「這個背景與字的顏色太近讓我看不清楚字」，. 但是過濾後的句子是「我覺得這個背景應該改為黑色」，改進方式為透過獎勵或忽略來訓練受測者，與其說獎勵更像是循循善誘，當受測者講出一些可能的句子時，更進一步問他，使句子更完整，若正面回饋後未改進，受測者仍繼續說一些不需要的資訊時，適時地引導他前往下一個步驟以停止目前的話題 [44]。有鑑於放聲思考法可以得到即時的真實想法，但多數受測者並不習慣此方法，因此在實驗開始前開任意網頁，由實驗者示範一次放聲思考法如何被操作，若使用者在實驗過程中忘記一邊表達想法，可以適時的詢問：「你正在想什麼？」「可以一邊形容你的想法嗎？」等問題提醒他們。 2 此為實驗測試結果，當記憶體只有. 8GB 時，分析功能不能運作，12 GB 以上則可正常使用。. 25.

(38) 為了記錄放聲思考的內容，實驗過程中有錄音、錄影，但為了避免之後聽錄音花費太多時間，實驗過程中可以記錄大部分內容，遇到不清楚的地方才重播。另外，邊執行動作邊講話是一種習慣，即使經過訓練亦非短時間內就可以達成，因此在下一節將介紹觀察法，用來補足放聲思考法缺漏的部分。. 3.2.4 觀察法用於人類學者作田野研究工作時對人類與社會的描述，包含對話或訪談內容、觀察到的行為或現象、場景、聲音、情緒感受等，需以同理的態度作詳盡地記錄，目的在於發現被觀察者的觀念、價值、動機等，而使用者經驗研究採用觀察法為其中一種研究方法 [45] [46]。. 立. 政治大. 過去也曾有學者使用觀察法於資訊視覺化評估中，那是為期六周的個案研究，每. ‧ 國. 學. 周一小時，每位受測者被賦予不同的任務，提供不同面相的資料，且被詢問主觀感受，以及量化的資料蒐集，像是使用頻率、儲存時間與次數，每周成果整理成一份報. ‧. 告 [47]。. sit. y. Nat. 本研究中應用此方法於實驗過程中的答題記錄，實驗者在受測者一旁記錄動作、. er. io. 語助詞、思考過程、回答，這可以補足當受測者不習慣使用放聲思考法時的行為紀錄，. al. 例如有一段記錄是這樣子：「一直點不同的點，很認真地看右邊，滑鼠靜止，盯著右邊. n. v i n C』h」，受測者在回答的問題是「的 Bar，『咦！……』『放棄思考。〈請先點開左圖中的白色 engchi U. 環狀的點〉，請問右圖線條的粗細和顏色變化的意思？」其實在回答這題的時候只需要點開一個白色環狀的點，而後觀察右圖有何趨勢或變化，即可回答，但從受測者的反應「一直點不同的點」表示他其實沒有得到任何線索，所以不斷進行任何嘗試；「很認真地看右邊，滑鼠靜止」表示正在思考，現在的結果從何而來，因為太認真了，所以連手（滑鼠）都沒有動作；「咦！……」表示好像得到一點方向感，卻又一陣靜默，因為最終還是摸不著頭緒；最後的「放棄思考」是帶點感嘆的，作了很多努力卻沒有辦法回答出這題。. 26.

(39) 3.2.5 Card Sort Card Sort 是在使用者經驗測試常用的方法之一，用於讓使用者排序所有東西的重要性，將物品分群，測試前將寫有簡單字詞或是圖片的卡片準備好，隨機放置在桌上，也可以準備一些空白卡片供自由填寫，讓使用者排序重要性，或藉以帶出更深層問題討論，像是為什麼這樣排序？影響因素有哪些 [48]？此方法常被應用於網頁架構設計，讓使用者排序各種資訊的重要程度，用來決定它們在網頁中的位置 [49]。在本研究中，記錄下使用者講的話，方便受測者回想每一個答題的情況，請他們回答當下的感受，如圖 3.6右側，在此借用 Card sort 的概念，選取一張情緒卡，並描述. 政治大個瞬間有太多東西要想，而且好像有陷阱。」另一位對視覺設計熟悉的受測者說：「很立為何有此情緒，如圖 3.6左側，例如其中一位受測者選擇困惑，「因為看不太出來，一. ‧ 國. 學. 不耐煩，因為這個設計讓我一直看大面積的區域，可是就是找不到答案阿！害我要花很久的時間去找其他的地方。」選擇 Card sort 的方法是為了讓使用者更有作選擇的感. ‧. 覺，需要經過思考，並且可以看著該卡解釋，而不像問卷通常被很快填過；不僅如此，我們也不選用 Likert scale 直接給予一題困難到順暢之間的分數，而是更精確地得到情. y. Nat. n. al. Ch. engchi. er. io. 五點量表，但很可能會花上七倍的時間答題。. sit. 緒反應，若不考慮測驗時間太久的情況，最完整的作法是針對每一題每一種情緒都作. i n U. v. 圖 3.6 利用 Card sort 方法回答每一個答題當下的感受. 27.

(40) 資料分析方法. 3.3. 3.3.1 眼動與滑鼠追蹤資料分析因為互動式資料視覺化工具需要使用者的操作才能得到資訊，而非直接觀看即能獲得，又因為操作來自滑鼠動作改變畫面呈現，以及眼睛接收資訊，所以評估時需要同時使用眼動與滑鼠追蹤來獲得使用者操作資料。可以從眼動儀得到的數值有 [24] [25] [26]： 1.. 治政紀錄到的連續凝視資料個數 × 1000 大取樣頻率. 凝視時間（fixation duration) =. 立. (3.2). ‧ 國. 學. 舉例來說：眼動儀以 30 HZ 取樣，若得到連續 5 個在 20 pixels 以內的凝視資料，則凝視時間為 150 毫秒，這部分為 OGAMA 的預設值。凝視時間介於 100 到 500. ‧. 毫秒，通常在 200 至 250 毫秒間。. Nat. io. sit. y. 2. 凝視點數量（number of fixations）：在螢幕上的網頁的 (x, y) 位置有多少凝視點。. er. 3. 掃視（saccade）：通常發生在兩個凝視間，快速掃瞄物件，持續 20 至 40 毫秒。. al. n. v i n C h movement）：追蹤一個物體，與之等速。 4. 平滑追瞄移動（smooth pursuit engchi U 5. 視線軌跡（scanpath）：眼睛觀看位置走過的軌跡。 6. 回視（regression）：看過的地方又往回看。滑鼠與眼動可以得到的資料相同。以下為資料分析方法：. 1. 所有使用者第一個凝視點的平均數或中位數可得知使用者需多少時間抓到目標。 2. 如果某一個任務需要看到數個目標，第一次看到最後一個目標時表示完成，所有使用者的狀況可以取中位數或是平均數決定。 3. 如果某任務需特別的動作，其眼睛凝視到滑鼠點擊間的時間代表不確定、猶豫。 28.

(41) 4. 在同一個興趣區域有多少個眼睛凝視點，或是其占總凝視數的比例可以知道此區域受關注程度。 5. 一個任務或是被觀察物的掃視途徑越長，表示複雜度越高。 6. 如果一個任務或是被觀察物的掃描途徑間的角度越固定，表示不確定性較低。 7. 比較設計者和使用者觀看興趣區域的順序是否吻合，作為修正設計的參考。 8. 眼睛閱讀的寬度變短，也就是掃描距離減少；常常停下來，亦即掃視時間變短；凝視時間變長；眨眼的次數減少；以及瞳孔放大都是認知負荷量增加的反應。. 政治大. 9. 單獨考量瞳孔大小並不準，因為背景很亮的時候瞳孔縮收，反之會放大。動畫. 立. 圖、滾動、前後頁背景顏色反差很大，都會讓瞳孔的大小變化很快。. ‧ 國. 學. 取得原始資料和能夠分析出什麼結果的基本概念後，接下來的各個小節將介紹本. ‧. 論文如何應用這些資料來評估互動式資料視覺化。瞳孔大小不在視覺化實驗的考量範圍內，因為瞳孔會因為光線的強弱變化大小，光線強時縮小，反之放大，而互動的過. y. Nat. sit. 程中，若操作回饋與底圖的顏色變化過大時，會引起瞳孔大小變化，也就是總共有兩. n. al. er. io. 個變動因素一是認知負荷量，二是視覺化設計造成的螢幕光線強弱，難以區分是哪個原因在影響，所以不納入實驗結果分析。. Ch. engchi. i n U. v. 3.3.2 Area Of Interest 興趣區域是一種常見的眼動分析方法之一，可簡稱為 AOI，在螢幕上標示出感興趣區域的邊界，以取得該區域內的使用者行為總和或平均。如何設定 AOI？ [24] 1. 先定義哪一個特徵應該被包含在區域內。 2. 考量特徵外應該留多少邊緣時，可依據以下三點：凝視物件精準度的重要性、附近有多少空白、預期不同受測者的差異。 3. 每一個興趣區域的邊緣距離應該保持一致。 4. 所有興趣區域的加總不需要填滿整個頁面，而是選擇有興趣探討者即可。 29.

(42) 5. 如果興趣區域重疊，可分階層，抑或選擇包含最多或最少停駐點的區域。以上的分析方法都是針對靜態的圖，面對可以放大縮小、下拉式選單、彈出視窗等動態的頁面，興趣區域的認定和每個凝視點的意義就會比較困難、複雜。本研究中 AOI 的標定方式為將圖中有意義的區域先沿著邊緣畫出來，如圖 3.7(b)的深灰色部分，取出投影到 X、Y 軸的極大、極小值，連成矩形，被稱為邊界框（bounding box）；若圖本身是圓形則以圓形為邊框。此外又依靜態和動態區域分為前景和背景，背景是固定不動的底圖部分，只要打開頁面就會存在著，如圖 3.7所示；前景則是回答每一題時的作答區域，其中有一些是動態標定，需要滑鼠觸發才會產生，例如圖 3.8(a)，當滑鼠移上（mouse on）圓圈中的紅點時，會出現新的白底區域，而該題. 政治大. 只需要讀出一個數值，所以並非框起整個白色的地方，而是只框出數值部分，因此得. 立. 出圖 3.8(b)。. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. (a) 實驗資料 S 圖. Ch. i n U. v. (b) S 圖背景 AOI，深灰色為描繪原圖的結果，藍色是最小邊界框，也是滑鼠邊界，紅色則是眼動邊界，為藍色往四周 17 pixel，以因應 The Eye Tribe 誤差。. engchi. 圖 3.7 背景 AOI 舉例. (a) S 圖第 5 題答題過程. (b) S 圖第 5 題答案區域，需先滑鼠移上藍色區域才出現紅色眼動邊界。. 圖 3.8 前景 AOI 舉例 30.

(43) 定義完 AOI 之後，可以分析各區域內眼動或滑鼠停駐點的數量、時間點、停留時間，此外，還可以透過 AOI 將使用者的步驟轉換成序列，做序列運算，將於下一個小節詳述。. 3.3.3 使用者操作步驟序列本研究第二個重要的資料分析方法為序列分析，使用者操作步驟序列（user sequence，簡稱為 SEQuser ）來自紀錄使用者在不同時間點的凝視點與滑鼠停駐點之位置落在哪一個 AOI，也就是當某人的動作如果有進到 AOI 編號 1，則在序列中新增 1，眼動和滑鼠的動作分開計算，依此類推，若連續時間停留於同一個 AOI，視為一個步. 政治大. 驟；前景 AOI 先於背景 AOI，意即同一時間若記錄到前景與背景 AOI，只記錄下前. 立. 者；若連續時間發生眼動與滑鼠於同一個 AOI 振盪，或是眼動紀錄於鄰近 AOI 振盪. ‧ 國. 學. 時，（很有可能來自瞄到，或是眼動誤差），只留下第一組資料，例如：Mouse 1 、Gaze 1 、Mouse 1 、Gaze 1 、Mouse 1 、Gaze 1 ，只留下 Mouse 1 、Gaze 1。. ‧. 另外我們定義了最少步驟序列（optimal sequence，簡稱為 SEQoptimal ），意思是使. sit. y. Nat. 用者完成一個任務時為了得到足夠多的資訊所需的最少步驟，與使用者操作步驟序列. al. 答方式和順序，都被列為這個任務的最少步驟序列。. er. io. 用同樣的 AOI 編碼，這個序列可能有不只一種排列組合，假設某一個任務有很多種作. n. v i n Ch 透過序列比對來比較每一個任務的最少步驟序列與使用者操作步驟序列，可以得 engchi U. 知使用者在完成任務時有沒有得到足夠多的資訊，只要符合其中一種最少步驟序列，即算有按照順序完成一個任務，稱之為步驟正確性。如果步驟相符合者，某一個步驟被重複很多次，代表他們第一次使用的時候並不能在第一時間了解，而是需要花費更多心力；又若有步驟一直被忽略執行，讓多數使用者無法完成最少步驟，有可能是這個功能設計的太不明顯，或是不易理解。. 3.3.4 Edit Distance Edit distance 用於比較兩個序列的相似性，欲使兩個序列完全符合需要做多少插入、刪除或取代（先刪除後插入，算成兩步驟）的步驟，例如 youth、yogurt 兩個字串相似度為何？先將一樣的字對齊後，將多餘的字刪除，缺漏的字插入，總共需要 3 個 31.

(44) 步驟使兩個字串變成一樣 [50]。字串一： y o 字串二： y o 字串三：. u g. t. u. 刪除. r. h. t. 刪除. 刪除. 假設完成其中一題的最少步驟序列可能是 1、2、3，而使用者的操作轉換成編碼是 1、4、5、2、3、2，從字串中可以找到與最少步驟序列相符的數字與順序，表示這名受測者有得到足夠多的資訊來答題，但是多做了 3 步；如果另一名受測者的編碼是 1、 3、2，即使數字都有出現，但是順序不對，因為互動式資料視覺化的動態性，少執行. 政治大驟序列相差二個步驟。有無按照順序用以表示答題步驟過程的正確性，答對、答錯是立一個步驟看到的畫面其實不同，所以這名受測者算是沒有按照順序操作，且與最少步. ‧ 國. 學. 受測者提供的答案與該任務答案是否相符。 Edit distance 的計算方式如下：. a. 1. ‧. 設dmn 為a =. · · · an 和b = b · · · bm 間的 edit distance 1. n. al. er. io. sit. y. Nat     di −        . j −1. Ch. engchi.      di − j +  dij =     min  di j− +              di− j− + replace cost  1,. 1 1. 1,. ,. 1. 1,. i, forv a = b n j i U. , for a j ̸= bi. , for. 1 ≤ i ≤ m, 1 ≤ j ≤ n. (3.3). 1. 然而互動式資料視覺化還有一個問題，編碼把原本二維包含距離、目標物大小的資訊扁平化，看似只有同與不同的兩種關係，這樣的表達不夠精確，因此下一節將介紹 Fitts’law 讓距離、大小也被考慮進來。. 32.