模板屬性對瀏覽行為的影響－以線上遊戲為例 - 政大學術集成

全文

(1)國立政治大學資訊管理學系. 碩士學位論文指導教授:傅豐玲博士. 立. 政治大. ‧ 國. 學. 模板屬性對瀏覽行為的影響－以線上遊戲為例. ‧. sit. y. Nat. The Impact of Template Attributes to User’s. n. al. er. io. Behavior－Take Online Game as an Example. Ch. engchi. i n U. v. 研究生：陳妍樺中華民國 103 年 07 月.

(2) 誌. 謝. 仍記得當初考上研究所時內心的悸動，以及即將邁向研究所生涯的興奮情緒，這感覺在腦海裡始終是那樣地清晰。時間總是沒有為人停下腳步，但自己也沒有停留在原地等待，而是有了不同的生活經歷和體驗。不負所有愛我的人對我的期待，也感謝這一路來協助過我的人，自己到底還是撐了過來，在今天總算能夠順利地歡慶收成。本篇論文得以順利完成付梓完稿，首先要感謝我的指導教授傅豐玲博士，. 政治大循循善誘，使我在這段求學的過程獲益良多，在此深表感激之意。立. 總是在學業上給予悉心的指導，提供相當多的寶貴意見與建議，在待人處事上. ‧ 國. 學. 非常感謝口試委員黃淑麗博士和蘇秋紅博士的細心審查，並撥冗提供寶貴的意見，在此深表感謝之意。同時要感謝研究所同學(黃曉菁)、心理系學姐(陳. ‧. 佳君)對我的協助與幫忙，在此一併表達謝意。. y. Nat. sit. 另外，感謝我的家人及我最敬愛的雙親陳信宇先生級林欣儒女士，感謝這. n. al. er. io. 一路來在我遇到挫折停滯不前時，對我的關心、包容、信賴和愛，給予了我能. i n U. v. 夠一次次突破困境的信心與力量。感謝我的家人們從小到大無時無刻對我的付. Ch. engchi. 出，讓我在求學生涯中能夠毫無後顧之憂地專注在學業上。. 謹以本文獻給所有愛我及我所愛的人，並願與您分享這份喜悅與榮耀。.

(3) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 摘. 要. 面對大量習慣用嘗試錯誤方式去學習使用複雜線上遊戲功能的使用者，如果沒有一個好的網頁佈局設計，會妨礙讓使用者易於上手。本研究試圖綜合以往在電腦學習認知方面的模板比對理論、CoLiDeS Model、及資訊氣味等相關研究，增強對線上遊戲介面設計的了解。本研究設計一個線上遊戲介面認知的實驗，用「仙劍 Online」多人線上遊戲的介面為實驗工具，運用眼動儀去觀察受試者的瀏覽行為。「功能的群組位置」(Location)與圖像(Icon)皆為介面設計的重. 立. 政治大. ‧ 國. 學. ‧. 要因素；這兩項因素可能會影響受試者對任務難易的知覺判斷與瀏覽行為的 Pattern。這些差異會顯示在任務的「間隔多久時間看到正確區域位置」、「凝視次數」、「凝視正確區域佔全部的比例」、任務的「完成率」與任務的「使用時間」等資料上。經過本研究驗證可以明確的知道「功能的群組位置」 (Location)與圖像(Icon)何者為設計者首要考量之因素，在學術上能加強對 CoLiDeS Model 的了解，提出兩階段修正的認知模式；在實務上幫助介面設計師. n. er. io. sit. y. Nat. al. Ch. 進行更有效的頁面設計和實用的建議。. engchi. i n U. v. 關鍵詞：模板比對、資訊氣味、搜尋理解連結模型、使用者經驗、線上遊戲介面設計.

(4) The Impact of Template Attributes to User’s Behavior－ Take Online Game as an Example. Abstract. A large amount of users practice the trial and error approach to learn to use complicated online games. This leads to low user perception of "easy to use" when the. 政治大 game lacks good webpage layout design. This study attempts to integrate previous 立 studies on cognitive learning through computer including Template Matching,. ‧ 國. 學. Information Scent, and Comprehension-based Linked model of Deliberate Search Model ( CoLiDes Model), to enhance the understanding on online game interface. ‧. design. A cognitive experiment of online game interface was designed utilizing the multiplayer simulation game "Chinese Paladin Online" in an attempt to observe and record user’s browsing behaviors through the eye tracker. "Location of functional group " and "Icon" are important factor of interface design and affect user’s browse behavior pattern . These differences will appear in "Time spent", "Accuracy", "Frequency of fixation ", “ and "Time spent before first fixation on the correct position". n. er. io. sit. y. Nat. al. Ch. i n U. v. of the tasks. We expect the results extended the CoLiDeS Model, enhanced understanding of the interface layout user cognition, and provided fruitful suggestions in how to further design on effective WebPages.. engchi. Keywords: Template matching, Information scent, CoLiDes Model, User’s previous knowledge, Interface design of online-game.

(5) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 目錄. 目錄第一章、. 緒論........................................................................................................ 1. 第一節、. 研究背景與動機 ............................................................................................ 1. 第二節、. 研究目的與問題 ............................................................................................ 3. 第三節、. 研究架構與流程說明 .................................................................................... 6. 第四節、. 研究範圍與限制 ............................................................................................ 8. 第二章、第一節、. 文獻探討.............................................................................................. 10 瀏覽網頁的認知過程 .................................................................................. 10. 一、瀏覽網頁被視為理解的過程............................................................................... 11. 治政三、「模板比對」理論（ Template Matching Theory 大） ....................................... 12 立第二節、搜尋網頁認知模型 ...................................................................................... 14 二、資訊搜尋－利用資訊氣味 .................................................................................. 11. ‧ 國. 學. 一、 CoLiDeS Model...................................................................................................... 15 二、模型的價值與限制 .............................................................................................. 19. ‧. 三、網頁的易用性 ...................................................................................................... 20 綜和討論 ...................................................................................................... 21. sit. y. Nat. 第三節、. io. al. er. 一、小結 ...................................................................................................................... 21 二、綜和 ...................................................................................................................... 23. 第二節、. 變數操作型定義 .......................................................................................... 26. n. 第一節、. v i n Ch 研究方法.............................................................................................. 24 U i e h n gc 研究架構 ...................................................................................................... 24. 第三章、. 一、自變數 .................................................................................................................. 26 二、中介變數:遊戲任務的類型 ................................................................................. 34 三、因變數:受試者的瀏覽行為 ................................................................................. 36 四、干擾變數:受試者的類型 ..................................................................................... 37 第三節、. 研究假設 ...................................................................................................... 38. 一、假設一:模板屬性「位置」對瀏覽行為的表現 .................................................. 39 二、假設二:模板屬性「圖像」對瀏覽行為的表現 .................................................. 39 I 國立政治大學資訊管理系. 陳妍樺.

(6) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 目錄. 三、假設三:任務類型對瀏覽行為.............................................................................. 39 四、假設四:主觀困難度認知 ..................................................................................... 40 五、假設五:受試者類型對瀏覽行為 Pattern ............................................................. 41 第四節、. 實驗工具 ...................................................................................................... 41. 一、遊戲介紹 .............................................................................................................. 42 二、任務操作程序 ...................................................................................................... 43 第五節、. 受試者 .......................................................................................................... 53. 第六節、. 實驗流程 ...................................................................................................... 54. 第七節、. 分析方法 ...................................................................................................... 54. 治政二、假設二:模板屬性「圖像」對瀏覽行為的表現 .................................................. 55 大立三、假設三:任務類型對瀏覽行為.............................................................................. 55 一、假設一:模板屬性「位置」對瀏覽行為的表現 .................................................. 54. ‧ 國. 學. 四、假設四:主觀困難度認知 ..................................................................................... 55 五、假設五:受試者類型對瀏覽行為 Pattern ............................................................. 56. 第一階段資料分析.............................................................................. 57 假設一:模板屬性「位置」對瀏覽行為績效的影響: 任務「位置」相似績. y. Nat. 第一節、. ‧. 第四章、. io. sit. 效表現會優於「位置」不相似的任務............................................................................. 57. n. al. er. 一、任務使用時間: 「位置」不相似>「位置」相似 .............................................. 58. i n U. v. 二、任務完成率: 「位置」相似>「位置」不相似 .................................................. 60. Ch. engchi. 三、總 fixation 次數: 「位置｣不相似>「位置｣相似 ................................................ 62 四、總 mouse click 次數: 「位置」不相似>「位置」相似 ..................................... 63 五、間隔多久才看到正確位置: 「位置」不相似>「位置」相似 .......................... 65 六、凝視正確區域佔全部凝視次數的比例: 「位置」相似>「位置」不相似 ....... 67 七、小結 ...................................................................................................................... 69 第二節、. 假設二:模板屬性「圖像」對瀏覽行為績效的影響: 任務「圖像」相似績. 效表現會優於「圖像」不相似的任務............................................................................. 70 一、任務使用時間：「圖像」不相似>「圖像」相似 ............................................. 71 二、任務完成率:「圖像」相似>「圖像」不相似 .................................................... 72 II 國立政治大學資訊管理系. 陳妍樺.

(7) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 目錄. 三、總 fixation 次數: 「圖像」不相似>「圖像」相似 ............................................ 74 四、總 mouse click 次數: 「圖像」不相似 > 「圖像」相似 ................................. 75 五、間隔多久才看到正確位置:「圖像」相似 = 「圖像」不相似......................... 77 六、凝視正確區域佔全部凝視次數的比例: 「圖像」相似 =「圖像」不相似 ..... 79 七、小結 ...................................................................................................................... 81 第三節、. 假設三:任務類型對瀏覽行為:圖像位置皆相似(N) >只有圖像不相似(I) >只. 有位置不相似(L) >圖像位置皆不相似(LI)......................................................................... 82 一、任務使用時間: LI > L > I > N ................................................................................. 83 二、任務完成率: N > I > L > LI ..................................................................................... 86 三、總 fixation 次數: LI > L > I > N ............................................................................... 88. 政治大. 四、總 mouse click 次數: LI > L > I > N ........................................................................ 90. 立. 五、間隔多久時間看到正確區域位置: LI > L > I =N ................................................... 92. ‧ 國. 學. 六、凝視正確區域的比例: N = I > L > LI ..................................................................... 95 七、小結 ...................................................................................................................... 97. ‧. 第四節、. 假設四:主觀困難度認知:圖像位置皆不相似(LI) >只有位置不相似(L) >只. y. Nat. 有圖像不相似(I) >圖像位置皆相似(N) ............................................................................. 98. io. 假設五:受試者類型對瀏覽行為 Pattern :A 與 B 類型使用者瀏覽模式為. n. al. er. 第五節、. sit. 一、小結 .................................................................................................................... 101. i n U. v. Top-Down，C 與 D 類型使用者為 Bottom-Up ............................................................... 102. Ch. engchi. 一、任務類型分析(困難 vs. 簡易) .......................................................................... 102 二、任務一:「讓你所控制的角色原地跳個舞(L)」 ................................................ 104 三、任務四:「你現在所處的地方只是冰山一角，這遊戲世界有著更多的地方值得去探險，請打開世界地圖(I)找到河京川北的雷澤之濱(L)這塊地方」。 ............ 111 四、任務五:「請查看此遊戲的 PING 值為多少(L)」。 .......................................... 117 五、小結 .................................................................................................................... 123. 第五章、. 第二階段資料分析............................................................................ 125. 第一節、. 控制任務難度 ............................................................................................ 125. 第二節、. 瀏覽統計值 ................................................................................................ 127. III 國立政治大學資訊管理系. 陳妍樺.

(8) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 目錄. 一、假設一:模板屬性「位置」對瀏覽行為績效的影響: 對「B 類型受試者」存在影響，「C 類型受試者」不存在影響........................................................................ 127 二、假設二:模板屬性「圖像」對瀏覽行為績效的影響: 對「B 類型受試者」存在影響，「C 類型受試者」不存在影響........................................................................ 133 第三節、. 假設三凝視軌跡分析:受同一種遊戲經驗產生的「模板」影響的凝視軌. 跡會較相似 138 一、 I 類型－任務八 .................................................................................................. 140 二、 L 類型－任務一.................................................................................................. 141 三、 LI 類型－任務四................................................................................................. 143. 第六章、. 結論.................................................................................................... 145. 政治大一、假設一: 模板屬性「位置」對瀏覽行為績效的影響: ..................................... 145 立二、假設二:模板屬性「圖像」對瀏覽行為績效的影響: ....................................... 147 結果發現與彙整 ........................................................................................ 145. 學. ‧ 國. 第一節、. 三、假設三:任務類型對瀏覽行為............................................................................ 149 四、假設四:主觀困難度認知: .................................................................................. 151. ‧. 五、假設五: 受試者類型對瀏覽行為 Pattern ......................................................... 152. Nat. sit. al. er. 第二階段資料分析結果發現與彙整 ......................................................... 155. io. 第二節、. y. 六、彙整 .................................................................................................................... 154. n. v i n Ch C 類受試者不存在影響 ............................................................................................... 155 engchi U 二、假設二:模板屬性「圖像」對瀏覽行為績效的影響:對 B 類受試者存在影響，C 一、假設一: 模板屬性「位置」對瀏覽行為績效的影響:對 B 類受試者存在影響，. 類受試者不存在影響 .................................................................................................. 157 三、假設三:凝視軌跡分析:受同一種遊戲經驗產生的「模板」影響的凝視軌跡會較相似 .......................................................................................................................... 158 四、彙整 .................................................................................................................... 161 第三節、. 結論與推論 ................................................................................................ 162. 第四節、. 研究貢獻與建議 ........................................................................................ 164. 第五節、. 研究限制與未來研究方向 ........................................................................ 165. 參考文獻.................................................................................................................... 167 附錄............................................................................................................................ 170 IV 國立政治大學資訊管理系. 陳妍樺.

(9) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 目錄. 表目錄表 1. 研究理論整理表 ............................................................................................... 23 表 2. 任務類型表 ....................................................................................................... 35 表 3. 任務內容表 ....................................................................................................... 35 表 4. 表 5. 表 6. 表 7. 表 8. 表 9.. 「位置」對瀏覽行為績效表現 T 檢定............................................................ 57 使用時間 vs. 兩類受試者 T 檢定 ................................................................... 59 完成率 vs. 兩類型受試者 T 檢定 .................................................................... 61 總 fixation 次數 vs. 兩類型受試者 T 檢定 ...................................................... 63 總 mouse click 次數 vs. 兩類受試者 T 檢定 ................................................... 64 間隔多久看到正確位置 vs. 兩類受試者 T 檢定 ............................................ 66. 表 10. 表 11. 表 12. 表 13. 表 14. 表 15. 表 16.. 凝視正確區域的比例 vs. 兩類型受試者 T 檢定 ......................................... 68 「圖像」對瀏覽行為表現 T 檢定 ................................................................. 70 使用時間 vs. 兩類型受試者 T 檢定 .............................................................. 72 完成率 vs. 兩類型受試者 T 檢定 .................................................................. 73 總 fixation 次數 vs. 2 類型受試者 ................................................................. 75 總 mouse click 次數 vs. 兩類型受試者 T 檢定 ............................................. 76 間隔多久看到正確位置 vs. 兩類型受試者 T 檢定 ...................................... 78. 表 17. 表 18. 表 19. 表 20. 表 21. 表 22.. 凝視正確區域的比例 vs. 兩類型受試者 T 檢定 ......................................... 80 任務類型對瀏覽行為 ANOVA 檢定表............................................................ 82 四類型受試者 vs. 四種任務類型使用時間 ANOVA 分析表 ....................... 84 四類型受試者 vs. 四種任務類型完成率 ANOVA 分析表 ........................... 87 四類型受試者 vs. 四種任務類型總 fixation 次數 ANOVA 分析表 ............. 89 四類型受試者 vs.四種任務類型總 mouse click 次數 ANOVA 分析表 ......... 91. 立. 政治大. ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat. 表 23. 表 24. 表 25. 表 26.. Ch. i n U. v. 四類受試者 vs.四種任務類型間隔多久看到正確位置 ANOVA 分析表 ...... 93 四類型受試者 vs.四種任務類型凝視正確區域的比例 ANOVA 分析表 ...... 96 四種任務類型主觀難易度認知 ANOVA 分析表............................................ 98 四類型受試者 vs. 四種任務類型主觀難易度認知 ANOVA 分析表 ........... 99 表 27. 任務完成度 vs. 簡易表 ............................................................................... 102 表 28. 難易度分類任務表 ....................................................................................... 103 表 29. 表 30. 表 31. 表 32. 表 33. 表 34. 表 35.. engchi. 任務一的完成率與 Fixation 在正確位置比例表 ......................................... 105 任務一各類型受試者瀏覽行為特徵 ........................................................... 107 任務一問卷困難原因表 ............................................................................... 110 任務四的完成率與 Fixation 在正確位置比例表 ......................................... 112 任務四問卷困難原因表 ............................................................................... 114 任務四問卷困難原因表 ............................................................................... 117 任務五的完成率與 Fixation 在正確位置比例表 ......................................... 118. 表 36. 任務五各類型受試者瀏覽行為特徵 ........................................................... 119 V 國立政治大學資訊管理系. 陳妍樺.

(10) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 目錄. 表 37. 任務五的困難原因認知 ............................................................................... 122 表 38. C 類型受試者任務完成表 ............................................................................. 126 表 39. 使用時間 vs. 兩類受試者 T 檢定 ............................................................... 127 表 40. 完成率 vs. 兩類受試者 T 檢定 ................................................................... 128 表 41. 總 fixation 次數 vs. 兩類受試者 T 檢定 ..................................................... 129 表 42. 總 mouse click 次數 vs. 兩類受試者 T 檢定 .............................................. 129 表 43. 間隔多久看到此位置 vs. 兩類受試者 T 檢定 ........................................... 130 表 44. 凝視正確位置的比例 vs. 兩類受試者 T 檢定 ........................................... 131 表 45. 使用時間 vs. 兩類型受試者 T 檢定 ............................................................ 133 表 46. 完成率 vs. 兩類型受試者 T 檢定 ................................................................ 134 表 47. 總 Fixation 次數 vs. 兩類型受試者 T 檢定 ................................................. 134 表 48. 表 49. 表 50. 表 51. 表 52. 表 53. 表 54.. 總 mouse click 次數 vs. 兩類型受試者 T 檢定 ........................................... 135 間隔多久看到正確位置 vs. 兩類型受試者 T 檢定 .................................... 135 凝視正確區域的比例 vs. 兩類型受試者 T 檢定 ........................................ 137 模板屬性「位置」相似與否對瀏覽行為績效比較 ................................... 145 模板屬性「圖像」相似與否對瀏覽行為績效比較 ................................... 147 四種任務類型對瀏覽行為績效比較 ........................................................... 149 受試者主觀困難度認知比較 ....................................................................... 151. 表 55. 表 56. 表 57. 表 58.. 受試者凝視軌跡比較 ................................................................................... 152 模板屬性「位置」相似與否對瀏覽行為績效比較 ................................... 155 模板屬性「圖像」相似與否對瀏覽行為績效比較 ................................... 157 受試者凝視軌跡比較 ................................................................................... 160. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. VI 國立政治大學資訊管理系. 陳妍樺.

(11) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第一章緒論. 圖目錄圖 1. 圖 2. 圖 3.. YAHOO 奇摩購物中心首頁 ................................................................... 1 仙劍 ONLINE 線上遊戲介面 ................................................................. 2 研究流程圖............................................................................................ 6. 圖 3. 圖 4. 圖 5. 圖 6. 圖 7. 圖 8.. 研究流程圖(續) ..................................................................................... 7 購物中心資訊結構比較圖.................................................................. 13 CoLiDeS Model 認知程序(本研究整理).............................................. 16 CoLiDeS 示意圖(Karanam, van Oostendorp, & Indurkhya, 2012) ....... 18 研究架構圖.......................................................................................... 25 模板「位置」相似對照圖.................................................................. 27. 圖 9. 圖 10. 圖 11. 圖 12. 圖 13. 圖 14. 圖 15.. 模板「位置」不相似對照圖.............................................................. 27 仙劍 ONLINE 遊戲 LookZone 位置對照圖 ......................................... 28 新仙劍 ONLINE 遊戲 LookZone 位置對照圖 ..................................... 30 魔獸世界遊戲 LookZone 位置對照圖 ................................................ 31 模板「圖像」相似對照圖.................................................................. 33 模板「圖像」不相似對照圖.............................................................. 34 任務一操作程序圖.............................................................................. 43. 圖 16. 圖 17. 圖 18. 圖 19. 圖 20. 圖 21.. 任務二操作程序圖.............................................................................. 44 任務三操作程序圖.............................................................................. 45 任務四操作程序圖.............................................................................. 46 任務四操作程序圖(續) ....................................................................... 46 任務五操作程序圖.............................................................................. 47 任務六操作程序圖.............................................................................. 48. 圖 22. 圖 23. 圖 24. 圖 25. 圖 26. 圖 27.. 任務七操作程序圖.............................................................................. 49 任務八操作程序圖.............................................................................. 50 任務九操作程序圖.............................................................................. 51 任務十操作程序圖.............................................................................. 52 任務十一操作程序圖.......................................................................... 53 任務類型「位置｣ vs. 使用時間 ....................................................... 58. 圖 28. 圖 29. 圖 30. 圖 31. 圖 32. 圖 39. 圖 40.. 任務類型「位置｣ vs. 完成率 ........................................................... 60 任務類型「位置｣ vs. 總 fixation 次數 ............................................. 62 任務類型「位置｣ vs. 總 mouse click 次數 ...................................... 63 任務類型「位置｣ vs. 間隔多久看到正確位置 ............................... 65 任務類型「位置｣ vs. 凝視正確區域佔全部的比例 ....................... 67 任務使用時間 vs. 四種不同任務類型 ............................................. 83 任務完成率 vs. 四種不同任務類型 ................................................. 86. 圖 41.. 總 fixation 次數 vs. 四種不同任務類型 ........................................... 88. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. VIII 國立政治大學資訊管理系. 陳妍樺.

(12) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第一章緒論. 圖 42. 圖 43. 圖 44. 圖 45. 圖 46.. 總 mouse click 次數 vs. 四種不同任務類型 ..................................... 90 間隔多久看到正確位置 vs. 四種不同任務類型 ............................. 92 凝視正確區域的比例 vs. 四種不同任務類型 ................................. 95 任務一– A 類受試者 2D 完成任務路徑圖 ...................................... 105 任務一 – 4 類型受試者 2D 軌跡圖 ................................................ 108. 圖 47.. 任務四– A 類受試者 2D 軌跡圖 ....................................................... 112. 圖 48. 圖 49. 圖 50. 圖 51. 圖 52.. 任務四– 4 類型受試者 2D 軌跡圖 .................................................. 115 任務五 – A 類型受試者 2D 軌跡圖 ................................................. 118 任務五– 4 類型受試者 2D 軌跡圖 .................................................. 121 C 類型受試者任務完成度 ................................................................ 125 任務八– 3 類型比對 2D 軌跡圖 ....................................................... 140. 圖 53. 圖 54. 圖 55. 圖 56.. 任務一– 3 類型比對 2D 軌跡圖 ....................................................... 141 任務四– 3 類型比對 2D 軌跡圖 ....................................................... 143 修正後 CoLiDeS Model Top-Down..................................................... 163 修正後 CoLiDeS Model Bottom-Up ................................................... 164. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. IX 國立政治大學資訊管理系. 陳妍樺.

(13) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第一章緒論. 第一章、緒論第一節、研究背景與動機網際網路日漸普及，在資訊爆炸的時代，大量的資訊在網頁上流竄，不斷進步的資訊科技使得網頁的資訊內容豐富，但是否就真的能達到吸引使用者的目光與停留?或者是反而增加了使用者資訊瀏覽的困難度呢?使用者是否總是能在豐富的網頁資訊中，進行瀏覽且自動過濾找到他們所需要的資訊(Habuchi,. 政治大. Kitajima, & Takeuchi, 2008)?如果我們以奇摩購物中心的首頁為例(圖1)，可以發. 立. 現有大量的資訊同時存在一個網頁上，當然頁面中的每個區域都有特定的功. ‧ 國. 學. 能，但使用者不一定都「看得見」。根據過去的研究知道大腦對資訊的處理是有極限與限制的(Norman & Bobrow, 1975)，所以網頁上複雜的資訊與豐富的內. ‧. 容對於使用者而言，最後真正進入大腦是有其種類與數量的限制(Abernethy,. y. Nat. sit. 1988; Norman & Bobrow, 1975)，所以要如何讓使用者能真正有效率來瀏覽網. n. al. er. io. 頁，輕鬆的過濾出他想要的資訊，是一項重要與熱門的議題。. 圖1.. Ch. engchi. i n U. v. YAHOO 奇摩購物中心首頁 1. 國立政治大學資訊管理系. 陳妍樺.

(14) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第一章緒論. Reed(2006)指出大部分使用者瀏覽網頁會依靠憑藉先前的使用經驗，進行資訊的過濾與選擇，在大腦中產生模板比對的過程，例如:使用者瀏覽過往的購物網頁，它的搜尋商品全站的分類通常是在首頁中的左方(如圖1)，但是當使用者瀏覽一個新的購物網頁時，要找商品全站分類的時候，就會直接搜索頁面中左方的區塊，來跟自己大腦中的模板比較是否為一致的。現在為了吸引更多的使用者，網頁的資訊量與複雜度一直的在增加，所以如果當缺乏經驗的使用者遇上複雜的網頁介面(例如:線上遊戲，圖2)，或瀏覽網頁的介面與大腦中的模板相差甚遠的時候，對使用者而言是提升了瀏覽網頁的. 政治大網頁是困難的，可能會猶豫是否要去瀏覽這個頁面，或者甚至直接放棄瀏覽行立難度，同時也提高了瀏覽的障礙與門檻。他同時也會查覺到對他來說使用這個. ‧ 國. 學. 為，未來也可能會排斥。例如:使用者剛開始接觸線上遊戲的時候，可能因為初次使用複雜的網頁介面，他完全不知道頁面中功能的區域位置，也無法在短時. ‧. 間之內找到想要功能的話，會影響到他進行遊戲，使用者很快就會對這個遊戲. sit. n. al. er. io 圖2.. y. Nat. 感到很無趣，所以就不會再玩此款線上遊戲。. Ch. engchi. i n U. v. 仙劍 ONLINE 線上遊戲介面. 現今事實上網頁設計師對使用者其實並沒有那麼了解，是目前的管理困 2 國立政治大學資訊管理系. 陳妍樺.

(15) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第一章緒論. 境，按照設計師的知識而建構的網頁，使用者可能無法對網頁去充分的了解而使用，所以研究者想要探討如何去架構網頁模板(Template)，如何來設計出與使用者大腦中所期待的模板為一致的。過去的網頁建構模板研究多以線上購物為例，是比較被大家熟知的應用(Fu & Su, 2011)。相較於線上購物，線上遊戲也因為介面的複雜度及使用者容易學習的必要性，而存在著必須更了解網頁佈局設計(layout)的需求。而且面對大量習慣用嘗試錯誤(try error)方式學習複雜線上遊戲功能的使用者而言，如果沒有一個好的網頁佈局設計，會妨礙使用者易於上手。緣此，本研究設計進行一個. 政治大. 線上遊戲介面認知的實驗，以「仙劍Online」與「魔獸世界」遊戲作為實驗的. 立. 工具。. ‧ 國. 學. 幫助網頁的設計師了解使用者大腦中的模板與模板中何屬性較重要，判斷是否為會影響使用者瀏覽網頁認知的重要因素，設計出的頁面是否讓使用者覺. ‧. 得好用，是所面對的管理問題。本研究試圖綜合以往在認知方面的模板比對理. y. Nat. io. sit. 論(Reed, Stone, Grubb, & McGoldrick, 2006; 鄭昭明, 1994)、CoLiDeS. n. al. er. Model(Kitajima, Blackmon, & Polson, 2000; Kitajima, Blackmon, & Polson, 2005). i n U. v. 及資訊氣味(Chi, Pirolli, Chen, & Pitkow, 2001; Kitajima, Blackmon, & Polson,. Ch. engchi. 2003; Kitajima et al., 2005; Pirolli & Fu, 2003)等相關研究，增強線上遊戲介面設計的了解。. 第二節、研究目的與問題網際網路現在已經是獲取知識一個很重要的管道，在成千上萬的網頁中，找到有用的資訊是很重要的(Cutrell & Guan, 2007)。而在瀏覽網頁的過程中，由於複雜的網頁，是如何被使用者所認知，是否有效改善網頁的呈現方式，也將會有助於使用者於網頁的停留時間(Karanam, Oostendorp, Puerta Melguizo, & Indurkhya, 2009)。線上遊戲也因為遊戲介面的複雜度，存在著必須更了解網頁 3 國立政治大學資訊管理系. 陳妍樺.

(16) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第一章緒論. 佈局設計(layout)，進而吸引更多的使用者佇足。隨著快速成長的線上角色扮演遊戲，我們認為更了解使用者的瀏覽行為和認知，將有助於專業人員的設計與實踐。一個線上遊戲，如果使用者不熟悉這個網頁介面的結構，他內心的認知過程會是甚麼呢?他可能會猶豫著用嘗試錯誤 (Try and Error)的方式去學習；更甚者，如果他也察覺到這個介面是非常複雜的，他甚至可能直接放棄。這方面的研究在既有的文獻中缺乏相關的研究成果，因此綜合上述的背景與研究動機的說明，本研究的目的如下所述: 本研究的研究目的是為要去了解使用者的瀏覽行為，可以設計更符合使用. 政治大. 者容易找到他所需要的資訊的介面，相信對網頁佈局(Layout)的設計有很大的幫. 立. 助，也是介面設計研究者一直努力的方向。本研究設計一個線上遊戲介面認知. ‧ 國. 學. 的實驗，運用眼動儀去觀察受試者的瀏覽行為。期望本研究可加強與修正 CoLiDes Model，增加對使用者認知網頁結構，助於未來更有效的頁面設計。. ‧ sit. y. Nat. 根據以往文獻，本研究選擇「位置⌋(Location)及「圖像⌋(Icon)兩個模板建構. al. er. io. 的特質(attribute)當作研究變數，要研究的問題為「頁面的模板架構中，位置的. v. n. 重要性是否大於圖像｣?例如:在一個頁面中如果同一種功能，在兩款遊戲中所放. Ch. engchi. i n U. 置的區域位置不一樣；或者是在兩款遊戲中，同一種功能擺放的區域位置相同，但只有圖像的不一樣，此兩種方式哪一種比較會影響到使用者的操作?或使用者會不會因此就找不到這項功能? 若充分考量「位置」與「圖像⌋，我們可以藉由觀測受試者在本研究實驗中的表現，推測所設計出的頁面與使用者所期待是否為一致。在使用者的瀏覽行為表現中，我們將可以發現使用者對這個頁面是否理解，與判斷出對使用者來說困難在哪裡，進而探討使用者的認知過程。對使用者而言，會希望搜尋的頁面是與大腦中模板較為相近的，這樣的網 4 國立政治大學資訊管理系. 陳妍樺.

(17) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第一章緒論. 頁結構會讓使用者覺得是容易上手的，也幫助使用者可以更輕鬆直觀來認知網頁，進而精緻化他的搜尋，來完成他的目的。相信站在設計者或公司的角度，都希望可以留住使用者，增加使用者在網頁中的停留時間，也希望使用者對網頁結構是覺得簡單容易的，進而吸引使用者使用來衝高線上遊戲、搜尋引擎的市占率或提升線上購物網站的瀏覽人數及獲利。因為使用人數就相當於人潮及錢潮，會影響到廣告收益，若是使用者抗拒使用這個網頁，這是相當不被樂見的，所以藉由模板比對(Template matching) 理論，讓設計者可以來了解使用者大腦中的模板，設計出讓使用者覺得直觀、. 政治大. 容易及易上手，也可以讓使用者操作上與大腦期待符合較為一致的頁面(J. 立. Nielsen, 2006)。. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 5 國立政治大學資訊管理系. 陳妍樺.

(18) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第一章緒論. 第三節、研究架構與流程說明研究方向與目的. 第一章緒論. 研究背景與動機研究目的與問題. 文獻探討瀏覽網頁內在認知產生的過程. 第二章文獻探討. 立. 政治大資訊氣味模板理論. ‧. ‧ 國. 學. CoLiDeS Model. 研究的方法與步驟. y. Nat. sit. 研究架構與假設變數操作行定義模板實驗. n. al. er. io. 第三章研究方法. Ch. engchi. i n U. v. 實驗工具介紹實驗任務與程序受試者介紹. 研究實施任務類型分析統計資料分析影片觀察分析問卷分析凝視軌跡分析. 第四章第一階段資料分析. (接下頁) 圖3.. 研究流程圖 6. 國立政治大學資訊管理系. 陳妍樺.

(19) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第一章緒論. (承上頁). 研究實施. 第五章第二階段資料分析. 控制任務難度統計資料分析凝視軌跡分析. 結果與建議. 政治結果與發現大限制與建議. 第六章結論. 立. ‧ 國. 學 ‧. 參考文獻. 研究流程圖(續). er. io. sit. y. Nat. 圖3.. 第一章主要描述本研究的動機與目的、界定研究範圍與研究限制，提出研. n. al. Ch. 究問題與研究架構流程說明。. engchi. i n U. v. 第二章文獻探討主要分為兩個部份，一為搜尋網頁的認知過程，二為搜尋網頁相關的模型。主要有三個理論與模型為本研究所著重的，模板比對 (Template Matching)、精緻搜尋理解連結模型(Comprehension-based Linked model of Deliberate Search Model，簡稱 CoLiDeS Model)與資訊氣味(Information Scent)，探討瀏覽網頁與內在認知產生的過程中，會引起瀏覽者注意的資訊氣味。第三章為研究方法，包含研究架構與研究假設的說明、變數操作型的定義、實驗工具與研究對象的介紹、實驗進行的說明、問卷設計與實驗方法的闡 7 國立政治大學資訊管理系. 陳妍樺.

(20) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第一章緒論. 述。第四章第一階段資料分析為根據第三章研究方法中所描述的研究方式，蒐集資料來進行分析，蒐集的資料包括統計資料、影片觀察與問卷，進行任務類型分析、瀏覽行為分析與推論。第五章第二階段資料分析為針對第四章第一階段資料分析，進行更深入的分析與探討，進行控制任務難度、統計資料分析與凝視軌跡分析。第六章為結果與建議，並且依照第四章與第五章資料分析的結果，提出本. 政治大. 研究的結論。. 立第四節、研究範圍與限制. ‧ 國. 學. 本研究之文獻分析探討瀏覽網頁的認知過程相關文獻為主。本研究選擇兩. ‧. 款遊戲做為實驗工具，為擁有廣大玩家的「仙劍online」為實驗工具，與「魔獸. y. Nat. 世界」當做對照工具；因為「仙劍online」和多人線上遊戲中最紅、擁有非常大. er. io. sit. 量的玩家的「魔獸世界」同屬線上角色扮演遊戲，而且有些介面設計相同，但也有很多的地方因故事性不同而介面不同。例如，玩家需要創建自己的角色，. al. n. v i n 作為在這個虛擬世界的化身，與其角色職業的選擇。然後玩家們再藉由虛擬角 Ch engchi U 色來互相交流，協同合作完成任務。所以本研究假設玩家熟悉這些任務和介. 面，將會應用這些經驗與知識在未來玩其他新遊戲中(Kuhlthau, 1999)。本研究因為經費及時間限制，只能使用有限的的受試，為徵求24位受試者進行十一項遊戲任務，任務難易度受限於受試者知覺認為難易、性別、年齡與過往遊戲的經驗，不同遊戲經驗的使用者，在受測的表現上必會表現有所不同(Blackmon, Mandalia, Polson, & Kitajima, 2007)。受試者為專注不受打擾，並在規定的時間內，依序完成十一項遊戲任務，使用眼動儀記錄受試者的眼睛所注視的區域位置、使用多久時間看到正確區 8 國立政治大學資訊管理系. 陳妍樺.

(21) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第一章緒論. 域、凝視次數與凝視正確區域佔全部的比例，並在最後請受試者填寫問卷[附錄]。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 9 國立政治大學資訊管理系. 陳妍樺.

(22) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第二章文獻探討. 第二章、文獻探討本章主要探討與本研究相關的理論與文獻，作為本研究所提出的研究架構理論的基礎。以往研究在搜尋網頁與內在認知產生過程的研究，有三項理論與模型是本研究著重的:模板比對(Template Matching)、CoLiDeS Model(Comprehension-based Linked model of Deliberate Search Model)與資訊氣味 (Information Scent)。使用者瀏覽網頁時，會依靠過去的使用經驗，依其對網頁. 政治大去做不同方式的驅動解析網頁，在大腦中尋找比較相似的模板，簡化複雜性與立知識豐富程度的多寡，而進行不同的內在感知過程，有由上而下或由下而上，. 標準化，進行模板的比對，再藉由頁面的模板屬性，使用視覺搜尋濾除他不需. ‧ 國. 學. 要的資訊，選擇性的在大腦記錄感興趣的內容。因此，文獻探討主要分為兩個. ‧. 部份，一為瀏覽網頁的認知過程，二為瀏覽網頁的相關模型。. Nat. er. io. sit. y. 第一節、瀏覽網頁的認知過程. 瀏覽網頁在認知方面的特性，最相關的理論貢獻來自於三個方面:語言理解. al. n. v i n foraging)與模板理論(Template (language comprehension)、資訊搜尋(information Ch engchi U. Matshing)。以下將會依序介紹這三個相關領域，假設瀏覽網頁是被視為一種複雜的行為，其中包括基本的認知過程(Juvina, 2006)，例如: . 感知(Perception) - 從外在環境中輸入的資訊，並進一步去解釋它。. . 理解(Comprehension) - 理解各種與資訊相關的元素。. . 推理(Reasoning) - 缺少重要的資訊兒所進行的推理。. . 決策(Decision making) - 在不同選項之間進行選擇。. . 解決問題(Problem solving) - 搜索目前的問題，運用搜尋手段切換到接 10. 國立政治大學資訊管理系. 陳妍樺.

(23) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第二章文獻探討. 近搜尋目標的狀態。 . 執行（策略）控制(Executive (strategic) control) - 分配認知的資源、監視進度與搜尋任務。. 根據上面的分析，我們可以了解使用者在進行瀏覽網頁時，會有不同階段的認知過程，這些不同階段的過程都有其涵意與目的，可以幫助使用者的理解與思考，讓他能夠逐步的完成任務目標。. 一、瀏覽網頁被視為理解的過程. 政治大. 瀏覽網頁的閱讀理解過程中是一個反覆的行為。對每一個被感知新的資訊. 立. 會開啟一個新的循環，進而會更新改變搜尋行為(Van den Broek, Young, Tzeng,. ‧ 國. 學. & Linderholm, 1999)。. ‧. Construction – Integration(C-I)理論(Kintsch, 1998)提出對網頁內容文字理解. y. Nat. 的假設，其中一個階段是透過文字的輸入，Construction是輸入本地端網頁的上. er. io. sit. 下文內容，而Integration是網際網路中所有的相關上下文內容，再加上使用者欲搜尋的目標與先備知識，通過內在擴散機制，進而達到整合的階段的理論。. n. al. Ch. engchi. i n U. v. 在搜尋網頁的領域中「理解(comprehension)｣這個概念相當重要。先備知識 (Prior knowledge)為使用者過去的使用經驗，已經被成功證明是提升搜尋網頁的效率中的一個重要因素(MacGregor, 1999)，所以不同使用者會因為不同過去的使用經驗，而在網頁搜尋目標時有不同的表現。. 二、資訊搜尋－利用資訊氣味搜尋網頁已經成為了現今人們解決日常問題所需訊息的常用方法。 Information Foraging理論(Pirolli & Card, 1999)描述人類渴求資訊。Information Foraging理論假設使用者會使用策略，提升他們想要找到資訊內容的效率。使 11 國立政治大學資訊管理系. 陳妍樺.

(24) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第二章文獻探討. 用者直觀地採取特定的行動，並根據Information Foraging理論，最相關的路徑給予是最高的資訊氣味(Information Scent)，最後再去做為選擇(點擊)。Pirolli & Fu(2003)指出在這種想法下，當人們瀏覽網頁資訊時，他們是基於資訊氣味去做決策的選擇。一般來說，瀏覽網頁的相關模型僅考慮的僅是一個網頁要連結到另一個網頁的線索，這些線索包括一些文字與圖形的連結。根據這些模型，使用者必須使用呈現在網頁中的線索，找到感興趣的資訊氣味，在瀏覽網頁時進行選擇(點擊)。資訊氣味(Information Scent)提供了預測使用者評估網頁上的項目，並去選擇作為結果。. 治Matching Theory ）三、「模板比對」理論（政 Template 大. 立. 「模板比對」理論(Template Matching Theory)認為只要曾經接觸過的外界. ‧ 國. 學. 事物，都會在大腦中形成它們的烙印或模板(template)。因此，我們的大腦中充. ‧. 滿這類模板。當外界的感覺刺激與人腦中的模板匹配時，就可以進行識別。當. y. Nat. 外界有一個圖形呈現，它的形狀會與腦中儲存的模板一一比對，當其中的一個. 冊，來比對說看到的鳥是屬於哪一種(鄭昭明, 1994)。. n. al. Ch. engchi. er. io. sit. 模板與圖形吻合時，就產生辨識的效果。例如:鳥類的觀察員拿著一本百鳥手. i n U. v. 一個瀏覽者的大腦會如何在工作記憶區產生規則，來過濾網頁中的複雜資訊?研究指出，在處理任務過程中，眼睛搜尋並不是永遠都是從網頁頂部向下移動；相反的，模板比對理論指出，使用者會根據他們先前的使用經驗，以及所知覺到的「訊息⌋(重要特徵)，在他們腦海中形成模板，再依先前的理解，去做解釋意義(Fu & Su, 2011)。在現實生活中，為了可以快速的來比對物件，大腦經常簡易的產生一個對任務相似的模板，因為他不可能有非常足夠的經驗熟悉所有的任務。因此，如何去結構化相關訊息，使用者通常用在大腦中尋找比較相似的模板(Reed et al., 12 國立政治大學資訊管理系. 陳妍樺.

(25) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第二章文獻探討. 2006)。有兩項會在模板比對之前預做的程序，來簡化模板的「複雜性」;一個是消除不必要的雜訊，另一個是將過大、過小或細長的圖片標準化(J Nielsen, 2006)。. (一) 模板理論結構模式模板產生的因素通常不是根據所看到資訊的詳細內容，而是根據資訊的結構或重要提示文字或圖形，瀏覽者因此認知到Pattern(Reed et al., 2006)。以圖4 為例，圖4是兩個購物中心的網站首頁，左邊是奇摩購物中心，右邊是樂天購物. 政治大者看到的可能都是三個區塊: 上方都包含了該購物中心的LOGO名稱與搜尋欄，立. 中心。由瀏覽者的認知來看，這兩個網站是相似Pattern，為什麼呢? 因為瀏覽. 左方為全站的分類，中間下方有圖形促銷廣告的內容。所以雖然兩個首頁的內. ‧ 國. 學. 容資訊不一樣，但是網頁結構是類似的。這是因為瀏覽者會根據以往對購物中. ‧. 心的網頁設計結構，去認知新的網頁，這些結構也會繼續在瀏覽者的大腦中形. y. Nat. 成模板，所以瀏覽者也是會根據網頁資訊的結構來找尋Pattern。我們也可以從. er. io. sit. 這兩個購物中心的比較圖中發現，雖然兩個網站左方區塊中的全站分類內容不相同，但因為區塊「位置」相同的關係，瀏覽者會很容易將這兩個區塊中的內. al. n. v i n 容視為相同的，因為瀏覽者實際上是掃視(Scan)一個網頁而不是一行行的逐一 Ch engchi U. 去閱讀(Song, 2007)，所以我們知道頁面中的「位置」在視覺搜尋上也是非常重要的一個因素。. 圖4.. 購物中心資訊結構比較圖 13. 國立政治大學資訊管理系. 陳妍樺.

(26) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第二章文獻探討. (二) 任務與認知模板的建立按照欲搜尋的目標及工作任務的目的，大腦在認知的過程中會做一個資訊過濾的行為，也就是說大腦可能會忽略許多不必要的資訊，進而建立一個快速有效的資訊搜尋策略，並對所認知的網頁根據過往使用過經驗建立出模板以及此模板的相關屬性(attributes)，去認知網頁中的資訊內容。因此，使用者所認知到的資訊與網頁所展示呈現的資訊間可能有很大的差距，因為瀏覽者可能只會注意到他有興趣的資訊內容而已(Reed et al., 2006)。. 政治大. 第二節、搜尋網頁認知模型. 立. 以往研究試圖去建立在人機互動(Human Computer Interaction, HCI)中的人. ‧ 國. 學. 類認知績效的模型(Kieras & Meyer, 1997)。例如:Kieras和Meyer (1997)認為發展一個「認知結構」(Cognition Architecture)就像是我們去綜合一些理論性的觀念. ‧. 與機制一般，這個架構裡面的引伸性意涵(practical implications)是可以漸漸被剝. y. Nat. er. io. sit. 開及驗證的。認知結構包括了人類的各種行為，有其全面性與多樣性。目前「認知結構」方面的研究，已經根據Construction-Integration(C-I)理論. al. n. v i n (見本章第一節一)，延伸發展出一系列的模型架構。例如: Kintsch在1998年已經 Ch engchi U 加入人機介面互動的許多因素，去說明使用者為何會逐漸熟練圖形化應用程式的介面 (Kitajima & Polson, 1995)，再藉由探索(exploration)執行新的任務 (Kitajima & Polson, 1997)，得到瀏覽網站尋找與使用者目標最相關的資訊 (Kitajima et al., 2000)。在接下來的段落中，會對於瀏覽網頁的認知模型進行說明。Kitajima, Blackmon & Polson (2000)發展對於網頁中的文字與圖像的理解為核心認知流程的CoLiDeS Model。該模型假設瀏覽網頁的關鍵，是對文字與圖像的理解，進而對理解流程制訂，詳述與比較頁面中的物件，確定哪些是超連結或圖像，再 14 國立政治大學資訊管理系. 陳妍樺.

(27) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第二章文獻探討. 進一步去選擇(select)與點擊(click)。. 一、 CoLiDeS Model 這項模型發展是為了了解使用者網頁搜尋的認知，簡稱為 CoLiDeS (Comprehension-based Linked model of Deliberate Search)，CoLiDeS 延伸一系列較早的模型發展(Kitajima & Polson 1995; 1997)，整個模型基礎建構於 Kintsch 的Construction-Integration 理論 (Kintsch, 1998)。此一系列模型較早用於模擬與學習探索，目前也熟練的運用在複雜的圖形化使用者介面。. 政治大行動的規劃進程(planning立 process)。例如:瀏覽一個網頁時，CoLiDeS的程序如. CoLiDeS的程序假設了底層的認知結構(cognitive architecture、理解流程與. ‧ 國. 學. 下:認知結構提供四項核心的認知過程，會從中會去做理解，然後再與欲搜尋的目標項目進行比較，最後再進行選擇(即click 點選行動)，會去點擊網頁中的哪. ‧. 一個項目的行動的規劃進程。CoLiDeS重視專注的機制，這些機制提供了一個. sit. y. Nat. 原則性的說明使用者如何專注於畫面的一個項目，進而在Web頁面上選擇一個. n. al. er. io. 網頁中的的對象（例如圖像）(Kitajima & Polson, 1995)。. i n U. v. CoLiDeS為應用熟練的技巧與專注力搜索網頁。相較於其他的認知模型，. Ch. engchi. CoLiDeS採用更加完善的理解機制，這些機制提出了使用者在一個網頁的許多物件(例如:超連結或下拉式選單)中，如何去做選擇與闡述。. (一) CoLiDeS的認知流程 CoLiDeS模型包含四項核心的認知過程，為(1)解析(parsing)、(2) 專注 (focusing on)、(3) 理解(comprehension)、與(4) 選擇(selection)，可以說明大腦如何在內部解析網頁；描繪大腦如何選擇下一步的行動，取決於一組頁面物件項目的理解；專注於畫面項目的一個區域，在網頁上引導理解和點擊選擇的過程；最後檢查整個選擇過程的點擊流(圖5)(Kitajima et al., 2000)。 15 國立政治大學資訊管理系. 陳妍樺.

(28) 模板屬性對瀏覽行為的影響－以線上遊戲為例. Focusing On. • 解析網頁結構. • 選擇一個區域專注. Parsing. 第二章文獻探討. Selection. • 凝視功能圖像(理解). • 點擊(選擇). Comprehesion. 政治大. CoLiDeS Model 認知程序(本研究整理). 圖5.. 立. Kitajima et al,(2000)指出CoLiDeS假設使用者會搜尋網頁在螢幕中的每一個. ‧ 國. 學. 項目－圖像、超連結、選單欄或文章段落。一個網頁中可能包含100到200項目. ‧. 吸引使用者的注意。使用者可以透過掃描(scan)網頁中的物件，理解這個網頁的. sit. y. Nat. 複雜性，這樣稱之為－「解析頁面⌋(parsing)。「解析頁面⌋在網頁瀏覽中，對於. io. n. al. er. 瀏覽者避免迷失方向是很重要的。. i n U. v. 依照識別的過程，可以將「解析頁面⌋的過程分為兩大類：(1) 自上而下的. Ch. engchi. 過程(top-down)：識別若是先經由對整體網頁的識別後，再進一步對各組成區域部分的識別。通常是憑藉過去的使用經驗，自上而下的過程被視為對整體的結構是比較清楚與了解的，為較高階的理解層次；而(2) 自下而上的過程(bottomup)：識別是經由頁面各區域物件(例如:圖像)的組成部分識別，經過概括之後，才完成對整個頁面的識別，指導使用者如何解析網頁，找到欲搜尋目標的區域。而自下而上的過程，其意義被視為對該頁面不熟悉，為較低層次的思考 (Kitajima et al., 2000)。. 16 國立政治大學資訊管理系. 陳妍樺.

(29) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第二章文獻探討. (二) CoLiDeS的運作機制 CoLiDeS提供了一個基本的感知器官，包括:眼睛、耳朵或手來相對應視覺、嗅覺和策略性知覺，如何將資訊從外部環境輸入感知處理器，依照生產規則，在工作區收集資訊，然後將其存入工作區來記憶與解釋的認知流程(Kieras & Meyer, 1997)。當訊息第一次被人的眼睛所掃描，其幾十萬的視覺神經在大腦中註冊大量的數據。然而，大腦的工作記憶區容量有限，所以無法完全處理一切有意義和有用的資訊(Norman & Bobrow, 1975)。為了處理這種無法匹配的處理能力與輸入量，大腦中存在一種過濾機制來排序輸入，它通過選擇性的處理. 政治大. 只理解重要或有趣的資訊，而自動忽略與手頭任務無關的訊息。換句話說，當. 立. 一個使用者看到許多複雜的資訊，他的眼睛會看到所有物件，但是他的大腦不. ‧ 國. 學. 會留下所有印象，也不會去使用所有細節(Abernethy, 1988; Norman & Bobrow, 1975)。當利用CoLiDeS認知架構在視覺搜尋時，在大腦工作記憶區中形成什麼. ‧. 和如何生產的規則，是研究者非常有興趣的。例如:Halverson和Hornof假設眼球. y. Nat. n. al. Ch. engchi. er. io. 會譯成視覺資訊(Halverson & Hornof, 2011)。. sit. 活動的生產規則，目標是否有出現在眼睛掃視的範圍內，一旦在範圍內時，即. i n U. v. 17 國立政治大學資訊管理系. 陳妍樺.

(30) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第二章文獻探討. (1) (2). (3). 立. ‧ 國. 學. (4). ‧. CoLiDeS 示意圖(Karanam, van Oostendorp, & Indurkhya, 2012). sit. y. Nat. 圖6.. 政治大. io. er. CoLiDeS模型比較使用者要搜尋的目標與網頁上連結的文字，會去選擇跟使用者目標最相近的連結。接下來點擊所選擇的連結，再來使用資訊氣味判斷. al. n. v i n Ch 連結之間的相關性，直到完成使用者的搜尋目標。以圖6為例，右方是認知流程 engchi U. 圖，左方是說明使用者如何認知一個網頁的實例。首先，(1) 使用者的搜尋目. 標為「淋巴(lymph)在人體中至少有哪三個區域」(圖7右上方Goal，是指使用者的搜尋目標)。 (2) 此時，使用者在網頁中看到了一個有人全身圖像，還有其他元素也在同一個頁面中，然後網頁首先會被解析成不同的大的區域(例如:LOGO 標誌、選單、圖片與主要內容)，然後 (3) 使用者會聚焦在選單上。然後選單有五個超連結，使用者會對於這些超連結進行理解與闡述，根據他們的過去的使用經驗與知識，確定與其目標的關連程度。(4) 最後，使用者會選擇資訊氣味最高(最相關)的超連結。所以想要找到跟淋巴(Lymph)相關資訊的話，要首先先 18 國立政治大學資訊管理系. 陳妍樺.

(31) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第二章文獻探討. 區隔出網頁，解析出這些區域(找到選單)，在選單中有看到人身體的四種不同系統，進行理解判斷淋巴是屬於人的身體部位中哪一個系統，然後在選單中要先選擇循環系統(Circulatory System)，然後就可以找到目標淋巴系統(Lymph System)的連結。網頁中的物件(例如:超連結)與使用者搜尋目標相關性的衡量因素為「語意相似性」(semantic similarity)。語意相似性使用Latent Semantic Analysis (LSA)的數學方法(Landauer, Foltz, & Laham, 1998)，以字元為單位估計與目標間的語意相關性。LSA提供了使用者的目標與網頁上的超連結之間相似性的衡量，作為. 政治大. 預測使用者選擇這些超連結的可能性。. 立. 二、模型的價值與限制. ‧ 國. 學. 研究者認為CoLiDeS模型可以改進的地方為:假設瀏覽者試用資訊氣味來判. ‧. 別網頁被專注的位置及資訊。而資訊氣味是相對上較狹窄的概念與操作方式，. sit. y. Nat. 因為資訊氣味概念忽略了使用者當前位置的特定頁面或同時開了多個頁面，又. al. er. io. 或是先前搜尋過的資訊和搜尋方式的順序與頻率，這些都是資訊氣味沒有考慮. v. n. 進去的元素。而且資訊氣味也能夠誤導使用者，例如:當使用者被引導到高的資. Ch. engchi. i n U. 訊氣味頁面，但是卻不是在真正目標的頁面，這個時候就可能會產生回溯的行為，要回到前一個頁面，找到與目標最相關正確的連結。 Bhavnani et al.(2003)認為先備知識可以幫助使用者不被誤導，因此誤導性的資訊氣味是可以避免的。有研究表明，使用者的決策不僅僅只參考當前頁面中的內容進行相關性評估，同時也會對再之前所搜尋過頁面中的物件跟目標比較相關性(Howes, Payne, & Richardson, 2002)，就如前面所提到的的回溯行為可能是很頻繁的(Cockburn & McKenzie, 2001)，就會影響判斷資訊氣味相關性的過程(Wen, 2003)。. 19 國立政治大學資訊管理系. 陳妍樺.

(32) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第二章文獻探討. CoLiDeS模型並沒有解決回溯行為，他們都是模擬皆為向前正確搜尋的情況。在CoLiDeS中回溯的步驟被認為是不穩定的行動，如果當前的頁面中沒有充分符合使用者目標，就會陷入了僵局，而僵局的解決方案無法透過模型，只能用說明的方式(Kitajima et al., 2000)。. 三、網頁的易用性搜尋網頁的認知模型起源於人機互動介面與網頁設計領域的實際需求，被期望不能僅是理論上的形式。所展開的搜尋網頁的相關研究，是期望提升對搜. 政治大其實建立一個網站來進行搜尋網頁的研究，控制其中的每一個因素，是相立. 尋資訊的效率是有意義與幫助的。. ‧ 國. 學. 當簡單的，但是研究人員還是會選擇面對真實網頁的複雜性，想要使用的為現實生活中的Web任務。研究人員會持續收集數據、分析與操作等技術設施的使. ‧. 用，以測試理論和模型在現實生活中，這才是真實的應用。. y. Nat. er. io. al. sit. (一) 網頁人為因素與可用性. v. n. 搜尋網頁往往是相關於網頁人為因素(Web Human Factors)與網頁可用性. Ch. engchi. i n U. (Web Usability)。網頁的可用性可以擴展到網頁的搜尋面積，它解決了一些網站的具體問題，例如:資訊超載(information overload)、網路迷失方向 (disorientation)、可訪問性(accessibility)、隱私(privacy)與信任(trust)等(Juvina, 2006)。除了資訊技術方面，還有一個方面特別注重使用者與任務－網頁人為因素(Byrne, John, Wehrle, & Crow, 1999)。在此方面，搜尋網頁為網頁人為因素的主要應用領域(Jakob Nielsen, 1989)。例如:CoLiDeS模型(Kitajima et al., 2000)為搜尋網頁的認知模型，被應用在識別與修復網頁可用性的問題(Kitajima et al., 2003)。. 20 國立政治大學資訊管理系. 陳妍樺.

(33) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第二章文獻探討. (二) 搜尋網頁的個人化大量的網頁應用程序是設計給一般大眾有不同目標的使用者。因為是很難滿足所有類型的使用者，所以這些應用程序發展了個人化的內容與連結的結構，例如:推薦系統是基於使用者平常上網行為的模型(Kim & Chan, 2003)。個人化的應用程序需要一些使用者的相關特性，包括一些靜態(穩定)的例如:性別、年齡、教育程度和動態(變化)的例如:興趣、目標等。過去傳統技術上用在個人的網頁應用程序，包括:登入身分角色的不同，會將一些連結隱藏 (Brusilovsky, 2001)。未來的網頁佈局設計，搜尋網頁的個人化也是可以提升網. 政治大. 頁的易用性，幫助使用者完成網頁上的工作任務，也是在網頁中搜尋資訊目標. 立. 學. ‧ 國. 時不可或缺的。. 第三節、綜和討論. ‧. 總而言之，在本章的文獻探討中，網頁中搜尋資訊是非常普遍與被視為複. y. Nat. sit. 雜的行為，而其中包含了基本的認知過程，使用者需要同時處理網頁中的結構. n. al. er. io. 與內容，善用模型與理論可以有效的設計出好的網頁佈局，幫助網頁對於使用. i n U. v. 者的易用性。在文獻中也有描述關於使用者搜尋行為與過去使用經驗的關係，. Ch. engchi. 嘗試描繪認知網頁搜尋行為的過程也有被提出。. 一、小結當使用者搜尋網頁時，模板的屬性(attribute)可能是甚麼?以一個線上書店為例，基於CoLiDeS Model在搜尋網頁時，有四個循環認知產生過程，首先解析這個頁面的結構，其次決定哪一個區域位置為重點需要被理解，然後使用理解力的閱讀，最後決定選擇「點擊(Click)」(Kitajima et al., 2000)。如果使用者熟悉網頁結構，他們將會採取很短的時間來解析網頁，並將重點放在正確區域位置，並迅速解釋目標訊息，這是正向動作的搜尋。但如果錯誤發生時，即會產 21 國立政治大學資訊管理系. 陳妍樺.

(34) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第二章文獻探討. 生反向的動作，這是自上而下網頁搜尋的搜尋類型。如果使用者不熟悉網頁或任務的結構，他們很難決定要把重點放在哪個區域位置，他們的視覺搜尋將會是緩慢的，因為他們對這個結構是不熟悉的，他們可能需要逐一的搜尋這個網頁上每一個項目(圖像，icon)，這種搜尋被稱為自下而上的搜尋方式。也有研究指出使用者的搜尋行為並不總是屬於深思熟慮的CoLiDeS Model，反而不是深入思考，他可能會嘗試錯誤與模仿其他行為。研究人員使用資訊氣味或模板屬性來說明在搜尋網頁的認知過程(Chi et al., 2001; Fu & Su, 2011)。我們的大腦選擇性注意不同的屬性，想要從不重要的地方區別出有趣的. 政治大學、人工智能和神經科學等的領域中，答案即是模板比對理論。該理論指出，立部分。所以重要的問題是，大腦要如何判定哪些是有趣或是他想要的?在心理. ‧ 國. 學. 人類嘗試新的任務，對每個任務的經驗都將形成重要的印象，在模板和相關屬性上，為他們自己的環境，創建一個期望或認定的模板屬性。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 22 國立政治大學資訊管理系. 陳妍樺.

(35) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第二章文獻探討. 二、綜和表1. 研究理論整理表理論. 意義. 元素. 程序. 使用者對網頁先前的使用經驗，會影響他對新網頁的認知. 模板的屬性. 使用者會根據他們先前的使用經驗，在他們腦海中形成模板，再依先前的. (Theory). (Template Matching). 立. 理解，去做解釋意義. 行為的內在認知的一些假設. 網頁中的物件 ( 例如:圖像、. 解析(parsing)、專注(focusing on)、理解力. 與其驗證該模型解釋了使用. 連結). (comprehension) 與選擇 (selection). 一個人如何處理網頁的搜尋. 學. CoLiDeS 模型. (attributes). 政治大. ‧. ‧ 國. 模板比對理論. 者如何去解析(parse)與理解. y. Nat. sit. 這個網頁中的內容，然後選. n. al. er. io. 擇要執行下一個甚麼樣的行動。資訊氣味 (Informati on Scent). Ch. engchi. 人們如何在網頁中去找到有興趣的資訊，是根據所謂的「氣味」. i n U. 特徵值. v. 沒有特別提到. 不論是模板理論中的「模板屬性」(attribute)、CoLiDeS Model中提到的認知元素或是資訊氣味假說中提到的氣味特徵值，都顯示使用者在認知一個新網頁時都會將整個頁面先做某些快速的「分類」，以增加搜尋資訊的效果。因此，本研究試圖去綜合模板比對、CoLiDeS Model、及資訊氣味三項假說，找出對複雜的線上遊戲玩家而言，介面設計中影響易用的因素屬性到底是哪些。 23 國立政治大學資訊管理系. 陳妍樺.

(36) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第三章研究方法. 第三章、研究方法本研究旨在探討網頁模板結構中不同的因素對使用者的搜尋效果的差異，故選擇實驗法（experimental method）做研究方法，為欲了解使用者在瀏覽頁面時的認知行為與提升易用性，探討模板結構中重要的因素之研究。本研究是建立於傅豐玲老師國科會計畫「「易用」: 模板比對對網路使用的影響」(計畫編號：NSC 99-2410-H-004-155-)之基礎上，採用計畫中所蒐集之. 政治大結果，比較不同組受試者在同一類型任務的表現數據與推論分析。觀測受試者立樣本資料數據，加入對各個任務類型詳盡的分析與受試者瀏覽行為的統計資料. ‧ 國. 學. 進行任務行為的影片，推斷認知理解的過程，進行質性分析的研究。再從受試者的問卷結果得知不同受試者組內主觀認知任務的難度，進行推論與探討，來. ‧. 了解受試者為什麼覺得困難與使用上的障礙在哪裡，幫助設計者對於介面設計. sit. y. Nat. 的改善。當時傅豐玲老師因公與時間上的關係，沒有完整詳細的做深入探討性. al. er. io. 的研究，感到非常可惜。傅老師覺得這份計畫非常有後續的發展研究性，所以. v. n. 本學生引用計畫資料數據進行各個面向詳盡的分析與探討，但當時計畫所蒐集. Ch. engchi. i n U. 樣本數為14筆，尚嫌不足，因此本研究有補足當時計畫不足的樣本數，將樣本數增加到24筆；而線上遊戲會因時間而汰換，實驗第一階段採集到部份樣本，但之後原來遊戲的版本已經無法再玩，故第二階段蒐集實驗樣本時，是使用同一遊戲新版本的介面進行實驗，而遊戲內容與任務主線都是相同，只有在介面上有些許的不同。. 第一節、研究架構本研究設計一個線上遊戲介面認知的實驗，運用眼動儀去觀察受試者的瀏覽行為。本研究的架構是由研究目的來了解使用者的瀏覽行為與提升易用性的 24 國立政治大學資訊管理系. 陳妍樺.

(37) 模板屬性對瀏覽行為的影響－以線上遊戲為例. 第三章研究方法. 認知。一方面是使用者如何認知(cognition)的呢?探討大腦如何透過模板過濾出自己感興趣的資訊，另一方面是幫助設計者對網頁佈局設計改善。使用者在瀏覽網頁資訊使用大腦中的模板，而瀏覽行為受過去使用經驗模板的的影響，產生模板比對的過程。模板的組成有包括「功能的群組位置」(Location)與「圖像」(Icon)，而「功能的群組位置」(Location)的影響力是否大於「圖像」(Icon) 呢?藉由本研究判斷哪一項因素對資訊搜尋與認知過程的影響較大。因此提出本研究之架構圖如圖7所示。. 立. 任務的類型  N  I  L  LI. 統計值:多久看到正確 LookZone、凝視次數、凝視正確 LookZone 比例、完成率、使用時間. . 困難度認知. ‧. . Nat. y. 瀏覽行為 Pattern. io. n. al. Ch. 過去不同的使用經驗  A 類型  B 類型  C 類型  D 類型. engchi. sit. 圖像. . er. . 瀏覽行為與認知. 學. 位置. ‧ 國. 模板屬性 . 政治大. i n U. v. 圖7. 研究架構圖本研究的架構為操作兩項模板屬性為自變數－「位置」(Location)與「圖像」(Icon)，藉由中介變數四項不同任務的類型來觀察對因變數的影響關係，此四項不同任務類型為「位置」與「圖像」都相似(N)、「位置」相似而「圖像」不相似(I)、「位置」不相似而「圖像」相似(L)與「位置」與「圖像」都不相似 (LI)，進而來探討對「受試者瀏覽行為與認知」關係的影響，因變數包括五項客觀的統計值與主觀認知的困難度認知及受試者瀏覽行為Pattern，統計值包括 25 國立政治大學資訊管理系. 陳妍樺.