網頁圖文數量與位置配置對於成年人與青少年的偏好與眼球運動之影響 - 以購物網站為例

全文

(1)

(2) 謝. 誌. 我終於畢業了，有點不可思議！在寫論文的這一段日子裡我變得不像我自己，沒日沒夜地做自己最不拿手的事情，即使身體生病了還是努力完成，結果雖然不足以驚為天人，但過程卻是感人肺腑的！本論文得以順利完成，首先要感謝伊彬教授給予的一切；您耐心地細心教導，使我更了解研究的方法，讓我在未來能克服更多的難題。老師的親切率真使我也在研究所中感到溫暖，在心靈上獲得不少幫助。並感謝口試委員徐秀菊教授與周賢彬所長寶貴的建議與指導，讓我的論文更完整。特別感謝國科研究案的贊助讓我有機會為相關研究領域新增一塊拼圖；此外，感激石牌國中馮金葉老師與其他師生的協助，以及在研究過程中幫助過我的人，是你們讓本研究能順利進行，謝謝你們。此外，謝謝陪我度過研究所的好朋友王晢茗、施智仁、演慶學長、吳慧芳、妳與其他同學們，你們帶給我的幫助與歡笑讓我永遠記得此刻，我愛你們！最後感謝我的父母與家人在生活上的照顧，讓我能無憂無慮的專心於學業，希望未來能夠學以致用，成為你們的驕傲。. 謹製中華民國九十七年八月國立台灣師範大學設計研究所. I.

(3) 摘. 要. 本研究針對 35～ 55 歲成年人與 12～15 歲青少年之間對購物網頁上偏好與眼球運動之差異，控制「圖文數量」、「圖文位置」配置與「文字敘述邏輯」的變項。透過問卷、訪談以及眼動儀實驗三種方式取得量化平均值與質性資料，並歸納世代間的主要差異成因，最後整理研究結果與綜合討論，進行總結，最後提出網頁版面設計與後續研究之建議。研究結果顯示：（1）偏好項目下，世代與圖文位置產生顯著交互作用，成年人偏好圖像置於右邊文字在左邊之網頁；青少年偏好圖像置左文置右之網頁。（2）在眼球運動方面，成年人在「平均注視時間」之平均值比青少年高，且達顯著。。（3）「平均掃視幅度」方面，世代、圖文數量與位置產生三因子顯著效果，青少年在平均掃視幅度比成年人大，當圖像置右之網頁有較高的掃視幅度。（4）「瞳孔平均值」方面，世代與圖文位置產生顯著效果，成年人與青少年皆在圖像數量較多之網頁下瞳孔值平均值較大。（5）圖像數量多於文字的網頁中，「平均注視時間」與「瞳孔平均值」平均值較高，而「注視次數」、「持續時間」與「掃視次數」的平均值較低，以上五項皆達顯著效果。（6）當圖像置左文字置右的網頁中，「平均注視時間」與「瞳孔平均值」之平均值較高，但「平均掃視幅度」「注視次數」「持續時間」與「掃視次數」之平均值卻較低，以上六項。皆達到顯著效果。. 關鍵字：世代、偏好、眼球運動、圖文配置、網頁設計。. II.

(4) Abstract This paper aimed at researching the difference between adults from age thirty-five to fifty-five and teenagers from age twelve to fifteen, discussing their preference when using shopping website and their eye movements. The manipulations of this research is ―amount of image-text‖、―image-text location‖ and ―description logic‖. Questionnaire, interview, and eye-tracking experiments were the three research methods adopted in this research to collect qualitative and quantitative data. This paper attempts to find out the main factor that influencing the behaviour between generation and generation. Finally, proposing a recommendation for website designing and future research based on the result of the study. The result of this research shows that: (1) As to the preference, there are significant relationship between generation and image-text location. Adults prefer the web page that with images on the right side and texts on the left side, while teenagers prefer the web page that with images on the left side and texts on the right side. (2) In terms of eye movements, the means of adults’ ―average fixation duration‖ were significantly longer than teenagers. (3) As to ―average saccade amplitude‖, there were significant effects between generation, the amount of images and the display. The average saccade amplitude of teenagers was significantly greater than adults. Additionally, the saccade amplitude was higher when the images were on the right side of the web page than that on the left side. (4) The finding s of ―pupil size mean‖ presented a significant effect between generation, the amount of images and the display. Both the means of adults and teenagers were greater when browsing the website with more images than fewer. (5) When the images in a web page were more than texts, ―average fixation duration‖ and ―pupil size mean‖ is significantly greater than ―fixation count‖、 ―duration‖ and ―saccade count‖. (6) When respondents browsing the web pages with images on the left side and texts on the right side , ―average fixation duration‖ and ―pupil size mean‖ were significantly greater than ―average saccade amplitude‖、 ―fixation count‖、 ―duration‖ and ―saccade count‖.. Keywords: generation、preference、eye movement、image-text layout、web design.. III.

(5) 目. 錄. 謝誌 ............................................................................................................................... I 摘要 .............................................................................................................................. II Abstract ........................................................................................................................... III 目錄 ............................................................................................................................ IV 圖目錄 ........................................................................................................................ IX 表目錄 ....................................................................................................................... XII 第一章、緒論 .................................................................................................................. 1 1-1 研究背景與動機 ............................................................................................... 1 1-2 研究目的 ........................................................................................................... 1 1-3 研究問題 ........................................................................................................... 2 1-5 研究範圍限制 ................................................................................................... 2 1-4 研究流程 ........................................................................................................... 3 第二章、文獻探討 .......................................................................................................... 4 2-1 網際網路與媒體世代 ....................................................................................... 4 2-1.1 世代 .......................................................................................................... 4 2-1.2 世代偏好 .................................................................................................. 5 2-1.3 數位傳播媒體的演進 .............................................................................. 7 2-2.4 網路使用年齡 .........................................................................................11 2-1.5 網路使用類型 ........................................................................................ 12 2-1.6 小結 ........................................................................................................ 13 2-2 網頁配置之相關研究 ..................................................................................... 13 2-2.1 網頁介面構成元素 ................................................................................ 13 2-2.2 網頁介面可用性 .................................................................................... 15 2-2.3 小結 ........................................................................................................ 19 2-3 網頁與圖文的閱讀方式 ................................................................................. 19 2-3.1 世代閱讀方式 ........................................................................................ 19. IV.

(6) 2-3.2 圖文閱讀特性 ........................................................................................ 21 2-3.4 小結 ........................................................................................................ 22 2-4 世代認知模式 ................................................................................................. 23 2-4.1 知覺組織 ................................................................................................ 23 2-4.2 世代認知模式 ........................................................................................ 23 2-4.3 心智模式 ................................................................................................ 24 2-4.4 小結 ........................................................................................................ 26 2-5 注意力的運作 .................................................................................................. 27 2-5.1 視覺傳達 ................................................................................................ 27 2-5.2 視覺辨識力 ............................................................................................ 28 2-5.3 注意力的選擇 ........................................................................................ 30 2-5.4 注意力的區域 ........................................................................................ 31 2-5.5 吸引注意力的因素 ................................................................................ 31 2-5.6 小結 ........................................................................................................ 32 2-6 眼球運動模式 .................................................................................................. 32 2-6.1 視覺資訊處理 ......................................................................................... 33 2-6.2 眼球運動的概述 .................................................................................... 33 2-6.3 眼球動運動與注意力 ............................................................................ 34 2-6.4 眼球運動與閱讀之關係 ........................................................................ 35 2-6.5 視覺的反應力 ........................................................................................ 36 2-6.6 小結 ........................................................................................................ 36 第三章、研究方法 ........................................................................................................ 37 3-1 研究設計 ......................................................................................................... 37 3-2 實驗對象 ......................................................................................................... 37 3-3 視覺刺激物 ..................................................................................................... 37 3.3.1 刺激物之篩選與設計 ............................................................................ 37 3-3.2 圖文數量比例 ........................................................................................ 38 3-3.3 圖文位置配置 ........................................................................................ 39 V.

(7) 3-4 研究變項與定義 ............................................................................................. 39 3-5 實驗設備 ......................................................................................................... 41 3-6 實驗設計與流程 ............................................................................................. 42 3-6.1 實驗設計 ................................................................................................ 42 3-6.2 實驗流程 ................................................................................................ 43 第四章、研究結果分析 ................................................................................................ 45 4-1 圖文數量與位置的偏好程度之差異 ............................................................. 45 4-2 文字敘述邏輯在圖文數量與位置的偏好程度之差異 ................................. 50 4-2.1 抽象文字敘述的偏好程度之差異 ........................................................ 50 4-2.2 相異文字敘述的偏好程度之差異 ........................................................ 53 4-2.3 一般文字敘述的偏好程度之差異 ........................................................ 63 4-2.4 偏好程度小結 ........................................................................................ 65 4-3 圖文數量與位置的平均注視時間之差異 ..................................................... 66 4-4 文字敘述邏輯圖文數量與位置的平均注視時間之差異 ............................. 69 4-4.1 抽象文字敘述的平均注視時間之差異 ................................................ 69 4-4.2 相異文字敘述的平均注視時間之差異 ................................................ 71 4-4.3 一般文字敘述的平均注視時間之差異 ................................................ 75 4-5 圖文數量與位置的平均掃視幅度之差異 ...................................................... 80 4-6 文字敘述邏輯圖文數量與位置的平均掃視幅度之差異 ............................. 91 4-6.1 抽象文字敘述的平均掃視幅度之差異 ................................................ 91 4-6.2 相異文字敘述的平均掃視幅度之差異 ................................................ 96 4-6.3 一般文字敘述的平均掃視幅度之差異 .............................................. 101 4-7 圖文數量與位置的注視次數之差異 ............................................................112 4-8 文字敘述邏輯圖文數量與位置的注視次數之差異 ....................................115 4-8.1 抽象文字敘述的注視次數之差異 .........................................................115 4-8.2 相異文字敘述的注視次數之差異 .........................................................118 4-8.3 一般文字敘述的注視次數之差異 ........................................................ 123 4-9 圖文數量與位置的持續時間之差異 ........................................................... 126 VI.

(8) 4-10 文字敘述邏輯圖文數量與位置的持續時間之差異 ................................. 129 4-10.1 抽象文字敘述的持續時間之差異 .................................................... 129 4-10.2 相異文字敘述的持續時間之差異 .................................................... 132 4-10.3 一般文字敘述的持續時間之差異 .................................................... 137 4-11 圖文數量與位置的掃視次數之差異 ......................................................... 140 4-12 文字敘述邏輯圖文數量與位置的掃視次數之差異 ................................. 143 4-12.1 抽象文字敘述的掃視次數之差異 .................................................... 143 4-12.2 相異文字敘述的掃視次數之差異 .................................................... 146 4-12.3 一般文字敘述的掃視次數之差異 .................................................... 151 4-13 圖文數量與位置的瞳孔平均值之差異 ..................................................... 154 4-14 文字敘述邏輯圖文數量與位置的瞳孔平均值之差異 ............................. 159 4-14.1 抽象文字敘述的瞳孔平均值之差異 ................................................ 159 4-14.2 相異文字敘述的瞳孔平均值之差異 ................................................ 164 4-14.3 一般文字敘述的瞳孔平均值之差異 ................................................ 167 4-15 上網時間與年齡之眼球運動相關程度 ..................................................... 171 4-15.1 在年齡下之眼球運動之相關程度 .................................................... 171 4-15.2 上網時間下之眼球運動之相關程度 ................................................ 172 4-16 眼球運動小結 ............................................................................................. 173 4-16.1 平均注視時間 .................................................................................... 173 4-16.2 平均掃視幅度 .................................................................................... 173 4-16.3 注視次數 ............................................................................................ 174 4-16.4 持續時間 ............................................................................................ 174 4-16.5 掃視次數 ............................................................................................ 174 4-16.6 瞳孔平均值 ......................................................................................... 175 4-16.7 年齡與眼球運動積差相關程度 ........................................................ 175 4-16.8 上網時間與眼球運動積差相關程度 ................................................ 175 4-17 綜合偏好、眼球運動與文字敘述邏輯表格 ............................................. 176 4-18 訪談分析 ..................................................................................................... 178 VII.

(9) 第五章、綜合討論 ...................................................................................................... 183 5-1 購物網頁偏好 ............................................................................................... 183 5-2 圖文數量偏好 ............................................................................................... 183 5-3 圖文位置偏好 ............................................................................................... 184 5-4 文字敘述邏輯偏好 ....................................................................................... 184 5-5 上網時間與眼球運動 ................................................................................... 185 5-6 世代與網路瀏覽之效率 ............................................................................... 185 5-7 眼動與圖文數量之關係 ............................................................................... 186 5-8 眼動與圖文位置之關係 ............................................................................... 186 5-9 瞳孔的平均值與網頁之關係 ....................................................................... 187 5-10 文字敘述邏輯與世代眼球運動 ................................................................. 188 5-11 平均注視時間與文字邏輯 ......................................................................... 189 5-12 平均掃視幅度、掃視次數與文字邏輯 ..................................................... 189 5-13 使用者瀏覽網頁遭遇的問題 ..................................................................... 190 5-14 購物網頁設計建議 ..................................................................................... 190 第六章、結論與後續研究建議 .................................................................................. 192 6-1 世代購物網頁偏好 ....................................................................................... 192 6-2 購物網頁下世代間的眼球運動差異 ........................................................... 193 6-3 圖文數量與眼球運動 ................................................................................... 194 6-4 圖文位置與眼球運動 ................................................................................... 195 6-5 文字敘述與眼球運動之關係 ....................................................................... 195 6-6 購物網站設計建議 ....................................................................................... 196 6-7 後續研究建議 ............................................................................................... 197 參考文獻 ...................................................................................................................... 198 附錄一偏好問卷 ........................................................................................................ 208 附錄二視覺刺激物 .................................................................................................... 210. VIII.

(10) 圖目錄圖 1- 1 研究流程圖 ........................................................................................................ 3 圖 2- 1 台灣地區上網人口比較 ...................................................................................11 圖 2- 2 歷次個人使用寬頻上網之網站類型 .............................................................. 12 圖 2- 3 訊息處理模式的階段 ...................................................................................... 23 圖 3- 1 刺激物示意圖 ................................................................................................. 39 圖 3- 2 實驗環境設置圖 ............................................................................................. 41 圖 3- 3 眼動追蹤儀 ..................................................................................................... 42 圖 3- 4 實驗流程圖 ...................................................................................................... 44 圖 4- 1 青少年與成年人對「圖文位置」購物網頁偏好程度平均數圖 ................. 48 圖 4- 2 圖置左與圖置右對「世代」購物網頁偏好程度平均數圖 ......................... 48 圖 4- 3 青少年與成年人對「圖多」購物網頁偏好程度平均數圖 ......................... 59 圖 4- 4 青少年與成年人對「圖少」購物網頁偏好程度平均數圖 ......................... 60 圖 4- 5 青少年與成年人對「圖置左」購物網頁偏好程度平均數圖 ..................... 60 圖 4- 6 青少年與成年人對「圖置右」購物網頁偏好程度平均數圖 ..................... 61 圖 4- 7 成年人對「圖文數量」與「圖文位置」購物網頁偏好程度平均數圖 ..... 61 圖 4- 8 青少年對「圖文數量」與「圖文位置」購物網頁偏好程度平均數圖 ..... 62 圖 4- 9 青少年與成年人對「圖文數量」一般文字敘述購物網頁之注視時間平均數圖 ........................................................................................................................... 78 圖 4- 10 圖多與圖少對「世代」一般文字敘述購物網頁之注視時間平均數圖 ... 78 圖 4- 11 青少年與成年人對「圖多」購物網頁掃視幅度平均數圖........................ 86 圖 4- 12 青少年與成年人對「圖少」購物網頁掃視幅度平均數圖 ....................... 87 圖 4- 13 青少年與成年人對「圖置左」購物網頁掃視幅度平均數圖 ................... 87 圖 4- 14 青少年與成年人對「圖置右」購物網頁掃視幅度平均數圖 ................... 88 圖 4- 15 成年人對「圖文數量」與「圖文位置」購物網頁掃視幅度平均數 ....... 88 圖 4- 16 青少年對「圖文數量」與「圖文位置」購物網頁掃視幅度平均數 ....... 89 圖 4- 17 圖多與圖少對「世代」抽像文字敘述購物網頁之掃視幅度平均數圖 ... 94 IX.

(11) 圖 4- 18 圖置左與圖置右對「世代」抽像文字敘述購物網頁之掃視幅度平均數圖 ............................................................................................................................... 94 圖 4- 19 青少年與成年人對「圖文位置」相異文字敘述購物網頁之掃視幅度平均數圖 ....................................................................................................................... 99 圖 4- 20 圖置左與圖置右對「世代」相異文字敘述購物網頁之掃視幅度平均數圖 ............................................................................................................................... 99 圖 4- 21 青少年與成年人對「圖多」一般文字敘述購物網頁之平均掃視幅度平均數圖 ..................................................................................................................... 107 圖 4- 22 青少年與成年人對「圖少」一般文字敘述購物網頁之平均掃視幅度平均數圖 ..................................................................................................................... 108 圖 4- 23 青少年與成年人對「圖置左」一般文字敘述購物網頁之平均掃視幅度平均數圖 ................................................................................................................. 108 圖 4- 24 青少年與成年人對「圖置右」一般文字敘述購物網頁之平均掃視幅度平均數圖 ................................................................................................................. 109 圖 4- 25 成年人對「圖文數量」與「圖文位置」一般文字敘述購物網頁之平均掃視幅度平均數圖 ................................................................................................. 109 圖 4- 26 青少年對「圖文數量」與「圖文位置」一般文字敘述購物網頁之平均掃視幅度平均數圖 ..................................................................................................110 圖 4- 27 圖置左與圖置右對「世代」相異文字敘述購物網頁之注視次數平均數圖 ............................................................................................................................. 121 圖 4- 28 青少年與成年人對「圖文位置」相異文字敘述購物網頁之注視次數平均數圖 ..................................................................................................................... 121 圖 4- 29 青少年與成年人對「圖文位置」相異文字敘述購物網頁之持續時間平均數圖 ..................................................................................................................... 135 圖 4- 30 圖置左與圖置右對「世代」相異文字敘述購物網頁之持續時間平均數圖 ............................................................................................................................. 135 圖 4- 31 圖置左與圖置右對「世代」相異文字敘述購物網頁之掃視次數平均數圖 ............................................................................................................................. 149. X.

(12) 圖 4- 32 成年人與青少年對「世代」相異文字敘述購物網頁之掃視次數平均數圖 ............................................................................................................................. 149 圖 4- 33 圖多與圖少對「世代」購物網頁瞳孔平均值數圖 ................................. 157 圖 4- 34 成年人與青少年對「圖文數量」購物網頁瞳孔平均值數圖 ................. 157 圖 4- 35 圖多與圖少對「圖文數量」抽像文字敘述購物網頁之瞳孔平均數圖 . 162 圖 4- 36 圖置左與圖置右對「圖文位置」抽像文字敘述購物網頁之瞳孔平均數圖 ............................................................................................................................. 162 圖 4- 37 圖多與圖少對「世代」一般文字敘述購物網頁之瞳孔平均數圖 ......... 170 圖 4- 38 成年人與青少年對「圖文數量」一般文字敘述購物網頁之瞳孔平均數圖 ............................................................................................................................. 170. XI.

(13) 表目錄表 2- 1 各研究中世代名稱、出生年比較表 ............................................................... 5 表 2- 2 世代與數位科技的發展時間對照表 ............................................................... 9 表 2- 3 網頁視覺介面設計規範 ................................................................................. 17 表 2- 4 介面可用性設計規範 ..................................................................................... 18 表 2- 5 注意力刺激因素 ............................................................................................. 32 表 4- 1 不同世代在不同的圖文數量與位置的購物網頁之偏好程度平均值與標準差 ........................................................................................................................... 46 表 4- 2 「圖文數量」、「圖文位置」、「世代」對偏好程度之三因子變異數分析摘要表 ........................................................................................................................... 47 表 4- 3 在偏好程度程度上之單純主要效果 t test 分析摘要表 ................................ 49 表 4- 4 不同世代在不同的抽象文字敘述圖文數量與位置的購物網頁之偏好程度平均值與 ............................................................................................................... 51 表 4- 5 「圖文數量」、「圖文位置」、「世代」對抽象文字敘述偏好程度之三因子變異數分 ................................................................................................................... 52 表 4- 6 不同世代在不同的相異文字敘述圖文數量與位置的購物網頁之偏好程度平均值與 ............................................................................................................... 54 表 4- 7 「圖文數量」、「圖文位置」、「世代」對相異文字敘述偏好程度之三因子變異數分 ................................................................................................................... 55 表 4- 8 「圖多」水準下，「位置」、「世代」對相異文字敘述偏好程度二因子變異數分析 ................................................................................................................... 56 表 4- 9 「圖少」水準下，「位置」、「世代」對相異文字敘述偏好程度二因子變異數分析摘 ............................................................................................................... 56 表 4- 10 「圖左」水準下，「數量」、「世代」對相異文字敘述偏好程度二因子變異數分析 ................................................................................................................... 57 表 4- 11 「圖右」水準下，「數量」、「世代」對相異文字敘述偏好程度二因子變異數分析 ................................................................................................................... 57. XII.

(14) 表 4- 12 「成年人」水準下，「圖文數量」、「圖文位置」對相異文字敘述偏好程度二因子 ................................................................................................................... 58 表 4- 13 「青少年」水準下，「數量」、「位置」對相異文字敘述偏好程度二因子變異數分 ................................................................................................................... 58 表 4- 14 在相異文字敘述上偏好程度之單純主要效果 t test 分析摘要表 .............. 62 表 4- 15 不同世代在不同的一般文字敘述圖文數量與位置的購物網頁之偏好程度平均值 ................................................................................................................... 64 表 4- 16 「圖文數量」、「圖文位置」、「世代」對一般文字敘述偏好程度之三因子變異數分 ............................................................................................................... 65 表 4- 17 不同世代在不圖文數量與位置的購物網頁之平均注視時間平均值與標準差 ........................................................................................................................... 67 表 4- 18 「圖文數量」、「圖文位置」、「世代」對平均注視時間之三因子變異數分析摘要表 ............................................................................................................... 68 表 4- 19 不同世代在不同的抽象文字敘述圖文數量與位置的購物網頁之平均注視時間平 ................................................................................................................... 70 表 4- 20 「圖文數量」、「圖文位置」、「世代」對抽象文字敘數平均注視時間之三因子變異 ............................................................................................................... 71 表 4- 21 不同世代在不同的相異文字敘述圖文數量與位置的購物網頁之平均注視時間平 ................................................................................................................... 73 表 4- 22 「圖文數量」、「圖文位置」、「世代」對相異文字敘述平均注視時間之三因子變異 ............................................................................................................... 74 表 4- 23 不同世代在不同的一般文字敘述圖文數量與位置的購物網頁之平均注視時間平 ................................................................................................................... 76 表 4- 24 「圖文數量」、「圖文位置」、「世代」對一般文字敘述平均注視時間之三因子變異數分析摘要表 ....................................................................................... 77 表 4- 25 在一般文字敘述平均注視時間上之單純主要效果 t test 分析摘要表 ...... 79 表 4- 26 不同世代在不同的圖文數量與位置的購物網頁之平均掃視幅度平均值與標準差 ................................................................................................................... 81 XIII.

(15) 表 4- 27 「圖文數量」、「圖文位置」、「世代」對平均掃視幅度之三因子變異數分析摘要表 ............................................................................................................... 82 表 4- 28 「圖多於文」水準下，「圖文位置」、「世代」對平均掃視幅度之二因子變異數分 ................................................................................................................... 83 表 4- 29 「圖少於文」水準下，「圖文位置」、「世代」對平均掃視幅度之二因子變異數分析 ............................................................................................................... 83 表 4- 30 「圖置左」水準下，「圖文數量」、「世代」對平均掃視幅度之二因子變異數分析摘 ............................................................................................................... 84 表 4- 31 「圖置右」水準下，「圖文數量」、「世代」對平均掃視幅度之二因子變異數分析摘 ............................................................................................................... 84 表 4- 32 「成年人」水準下，「圖文數量」、「圖文位置」對平均掃視幅度之二因子變異數分 ............................................................................................................... 85 表 4- 33 「青少年」水準下，「圖文數量」、「圖文位置」對平均掃視幅度之二因子變異數分析摘要表 ............................................................................................... 85 表 4- 34 在平均掃視幅度上之單純主要效果 t test 分析摘要表 .............................. 89 表 4- 35 不同世代在不同的抽象文字敘述圖文數量與位置的購物網頁之平均掃視幅度平 ................................................................................................................... 92 表 4- 36 「圖文數量」、「圖文位置」、「世代」對抽象文字敘述平均掃視幅度之三因子變異 ............................................................................................................... 93 表 4- 37 在抽象文字敘述平均掃視幅度上之單純主要效果 t test 分析摘要表 ...... 95 表 4- 38 不同世代在不同的相異文字敘述圖文數量與位置的購物網頁之平均掃視幅度平 ................................................................................................................... 97 表 4- 39 「圖文數量」、「圖文位置」、「世代」對相異文字敘述平均掃視幅度之三因子變異 ............................................................................................................... 98 表 4- 40 在相異文字敘述平均掃視幅度上之單純主要效果 t test 分析摘要表 .... 100 表 4- 41 不同世代在不同的一般文字敘述圖文數量與位置的購物網頁之平均掃視幅度平 ................................................................................................................. 102 表 4- 42 「圖文數量」、「圖文位置」、「世代」對一般文字敘述平均掃視幅度之三 XIV.

(16) 因子變異 ............................................................................................................. 103 表 4- 43 「圖多於文」水準下，「圖文位置」、「世代」對一般文字敘述平均掃視時間之二 ................................................................................................................. 104 表 4- 44 「圖少於文」水準下，「圖文位置」、「世代」對一般文字敘述平均掃視時間之二因 ............................................................................................................. 104 表 4- 45 「圖置左」水準下，「圖文數量」、「世代」對一般文字敘述平均掃視時間之二因子 ............................................................................................................. 104 表 4- 46 「圖置右」水準下，「圖文數量」、「世代」對一般文字敘述平均掃視時間之二因子 ............................................................................................................. 105 表 4- 47 「成年人」水準下，「圖文數量」、「圖文位置」對一般文字敘述平均掃視時間之二 ............................................................................................................. 105 表 4- 48 「青少年」水準下，「圖文數量」、「圖文位置」對一般文字敘述平均掃視時間之二 ............................................................................................................. 106 表 4- 49 在一般文字敘述平均掃視幅度上之單純主要效果 t test 分析摘要表 .....110 表 4- 50 不同世代在不同的圖文數量與位置的購物網頁之注視次數平均值與標準差 ..........................................................................................................................113 表 4- 51 「圖文數量」、「圖文位置」、「世代」對注視次數之三因子變異數分析摘要表 ......................................................................................................................114 表 4- 52 不同世代在不同的抽象文字敘述圖文數量與位置的購物網頁之注視次數平均值 ..................................................................................................................116 表 4- 53「圖文數量」、「圖文位置」、「世代」對抽像文字敘述注視次數之三因子變異數分 ..................................................................................................................117 表 4- 54 不同世代在不同的相異文字敘述圖文數量與位置的購物網頁之注視次數平均值 ..................................................................................................................119 表 4- 55「圖文數量」、「圖文位置」、「世代」對相異文字敘述注視次數之三因子變異數分 ................................................................................................................. 120 表 4- 56 在相異文字敘述平均注視次數上之單純主要效果 t test 分析摘要表 .... 122 表 4- 57 不同世代在不同的一般文字敘述圖文數量與位置的購物網頁之注視次數 XV.

(17) 平均值 ................................................................................................................. 124 表 4- 58 「圖文數量」、「圖文位置」、「世代」對一般文字敘述注視次數之三因子變異數分 ............................................................................................................. 125 表 4- 59 不同世代在不同的圖文數量與位置的購物網頁之持續時間平均值與標準差 ......................................................................................................................... 127 表 4- 60 「圖文數量」、「圖文位置」、「世代」對持續時間之三因子變異數分析摘要表 ..................................................................................................................... 128 表 4- 61 不同世代在不同的抽象文字敘述圖文數量與位置的購物網頁之持續時間平均值 ................................................................................................................. 130 表 4- 62 「圖文數量」、「圖文位置」、「世代」對抽象文字敘述持續時間之三因子變異數分 ............................................................................................................. 131 表 4- 63 不同世代在不同的相異文字敘述圖文數量與位置的購物網頁之持續時間平均值 ................................................................................................................. 133 表 4- 64 「圖文數量」、「圖文位置」、「世代」對相異文字敘述持續時間之三因子變異數分 ............................................................................................................. 134 表 4- 65 在相異文字敘述持續時間上之單純主要效果 t test 分析摘要表 ............. 136 表 4- 66 不同世代在不同的一般文字敘述圖文數量與位置的購物網頁之持續時間平均值 ................................................................................................................. 138 表 4- 67 「圖文數量」、「圖文位置」、「世代」對一般文字敘述持續時間之三因子變異數分 ............................................................................................................. 139 表 4- 68 不同世代在不同的圖文數量與位置的購物網頁之掃視次數平均值與標準差 ......................................................................................................................... 141 表 4- 69 「圖文數量」、「圖文位置」、「世代」對掃視次數之三因子變異數分析摘要表 ..................................................................................................................... 142 表 4- 70 不同世代在不同的抽象文字敘述圖文數量與位置的購物網頁之掃視次數平均值 ................................................................................................................. 144 表 4- 71「圖文數量」、「圖文位置」、「世代」對抽像文字敘述掃視次數之三因子變異數分 ................................................................................................................. 145 XVI.

(18) 表 4- 72 不同世代在不同的相異文字敘述圖文數量與位置的購物網頁之掃視次數平均值 ................................................................................................................. 147 表 4- 73 「圖文數量」、「圖文位置」、「世代」對相異文字敘述掃視次數之三因子變異數分 ............................................................................................................. 148 表 4- 74 在相異文字敘述掃視次數上之單純主要效果 t test 分析摘要表 ............ 150 表 4- 75 不同世代在不同的一般文字敘述圖文數量與位置的購物網頁之掃視次數平均值與 ............................................................................................................. 152 表 4- 76 「圖文數量」、「圖文位置」、「世代」對一般文字敘述掃視次數之三因子變異數分 ............................................................................................................. 153 表 4- 77 不同世代在不同的圖文數量與位置的購物網頁之瞳孔平均值值與標準差 ............................................................................................................................. 155 表 4- 78 「圖文數量」、「圖文位置」、「世代」對瞳孔平均值之三因子變異數分析摘要表 ................................................................................................................. 156 表 4- 79 在瞳孔平均值上之單純主要效果 t test 分析摘要表 ................................ 158 表 4- 80 不同世代在不同的抽象文字敘述圖文數量與位置的購物網頁之瞳孔平均值值與 ................................................................................................................. 160 表 4- 81 「圖文數量」、「圖文位置」、「世代」對抽像文字敘述瞳孔平均值之三因子變異數 ............................................................................................................. 161 表 4- 82 在抽像文字敘述瞳孔平均值上之單純主要效果 t test 分析摘要表 ........ 163 表 4- 83 不同世代在不同的相異文字敘述圖文數量與位置的購物網頁之瞳孔平均值值與 ................................................................................................................. 165 表 4- 84 「圖文數量」、「圖文位置」、「世代」對相異文字敘述瞳孔平均值之三因子變異數 ............................................................................................................. 166 表 4- 85 不同世代在不同的一般文字敘述圖文數量與位置的購物網頁之瞳孔平均值值與 ................................................................................................................. 168 表 4- 86 「圖文數量」、「圖文位置」、「世代」對一般文字敘述瞳孔平均值之三因子變異數 ............................................................................................................. 169 表 4- 87 在一般文字敘述瞳孔平均值上之單純主要效果 t test 分析摘要表 ........ 171 XVII.

(19) 表 4- 88 整體受測者在「年齡」下對眼球運動之 pearson 積差相關係數檢測結果摘要表 ..................................................................................................................... 172 表 4- 89 整體受測者在「上網時間」下對眼球運動之 pearson 積差相關係數檢測結果摘要表 ............................................................................................................. 172 表 4- 90 成年人在「上網時間」下對眼球運動之 pearson 積差相關係數檢測結果摘要表 ..................................................................................................................... 172 表 4- 91 青少年在「上網時間」下對眼球運動之 pearson 積差相關係數檢測結果摘要表 ..................................................................................................................... 173 表 4- 92 整體偏好與眼動顯著情形表 ..................................................................... 176 表 4- 93 「抽象」偏好與眼動顯著情形表 ............................................................. 177 表 4- 94 「相異」偏好與眼動顯著情形表 ............................................................. 177 表 4- 95 「相異」偏好與眼動顯著情形表 ............................................................. 178 表 4- 96 世代網頁偏好原因 ..................................................................................... 180 表 4- 97 網路使用情形 ............................................................................................. 181 表 4- 98 網路使用狀況 ............................................................................................. 182 表 5- 1. 購物網頁設計方針 ..................................................................................... 191. XVIII.

(20) 第一章緒論. 第一章、緒論 1-1 研究背景與動機人類隨著時代推動著科技文明，媒體形式日新月異，從原本傳統紙本形式的訊息發展到數位媒體，透過網路、收音機、電視等媒界進行傳遞。1980 到 1990 年代區域網路、TCP/IP 協定系統、World Wide Web 超媒體平台與桌上型電腦的發展，使得電腦快速的普及化，網路媒體從發展至今已經與現代人的生活緊密結合。網際網路是現今社會普遍使用的媒體之一，台灣地區上網人口已突破一千五百萬（財團法人台灣網路資訊中心，2008）。網路媒體的特性使原本的閱讀形式有了多樣化的改變與互動性，透過超媒體 WWW 平台，各式各樣的資訊與媒體交織成大網絡。數位網路能迅速地提供大量快速、便利與即時的資訊（尤克強，2000），這將衝擊到其他傳統媒體的商業發展。資訊爆發與氾濫的時代，在忙碌的生活中能夠接受的資訊有限，因此能夠選擇性接收資訊的網路媒體快速竄紅，與傳統媒體相較之下，閱讀模式也有了很大的變化。網頁的形式由文字為主的模式轉變到圖文並重或圖像為主的模式，多樣的資訊在網頁上同時呈現，形成錯綜複雜的畫面。為了傳播大量的視覺資訊，便產生了網路、電視、電影、雜誌、MTV、電玩、展示空間等許多不同的傳播媒體，多樣的資訊內容必須在有限的時間內廣泛的傳達給大眾，因此在動態影像上的特徵是快速的、破碎的、片段的、跳躍的等；在靜態圖像上則是組合的、複合的、複雜的、強烈的等，所以在以視覺為主的社會中，青少年是如何在複雜的資訊中快速地擷取資訊，並且以較快的時間適應新的媒體平台是值得去觀察與研究的。. 1-2 研究目的網際網路與生活密不可分，對社會的影響力自然不小。不同世代接觸網際網路的時間點不同，面對充斥大量訊息的網頁內容將產生許多閱讀與操作上的問題，雖然有許多網頁與相關研究指出適合人閱讀著網頁編排方法，但是大多以問卷調查進行，鮮少且對於世代間的觀察方式與差異並未做詳解，而國內並沒有對 1.

(21) 第一章緒論. 於世代間觀察網路差異相關的眼動研究，因此，在觀察方式上青少年與成人的差異是值得研究的，且對於未來網頁的設計規劃也能有所貢獻。對於不同使用經驗與社會背景的使用者在瀏覽網頁上是否會有差異，以及對網頁編排形式對於偏好為何。本研究之目的歸納為以下三點： 1.. 了解成年人與青少年對於購物網站的偏好之差異。. 2.. 了解成年人與青少年對於購物網站的眼球運動之差異。. 3.. 了解成年人與青少年對於網頁設計的需求。. 1-3 研究問題社會研究者提出青少年對於圖像與網路媒體有高度的接收力與熟悉度，而成年人對於文字閱讀熟悉度高於青少年，兩世代面對網路媒體時，是否因個人的出生背景、年齡、使用經驗、閱讀方式等，而呈現不同的偏好程度與視覺動態呢？因此本研究提出下列問題： 1.. 不同程度的圖文數量對成年人與青少年在偏好程度上是否有差異？. 2.. 不同程度的圖文數量對成年人與青少年在眼球運動上是否有差異？. 3.. 不同圖文位置配置對成年人與青少年在偏好程度上是否有差異？. 4.. 不同圖文位置配置對成年人與青少年在眼球運動上是否有差異？. 5.. 成年人與青少年對於不同的圖文配置之網頁是否有不同的需求？. 1-5 研究範圍限制礙於時間、金錢、人力與物力等因素，本研究的實驗受測樣本、刺激物網頁與實驗範圍將有所限制，其界定範圍如下： 1. 本研究為方便取得較多的受測樣本，因此，以台北地區石牌國中的 12～15 歲青少年與台北市中心 35～55 歲成年人為樣本母體群。 2. 網頁元素種類繁多且難以控制，因此，將對照知名拍賣網站 Yahoo 之版型作為刺激物設計，並且排除動態元素、Logo 以及捲動頁面。最後保持單不捲動的一 2.

(22) 第一章緒論. 頁版型、圖像、文字與基本框架。 3. 本研究僅針網頁元素中圖為數量與圖文位置最為最後實驗對象，因此，在其他各項網頁介面元素將不深入探討對世代影響程度。 4. 由於在視線軌跡之圖像結果數量太大，礙於人力與時間將不進行探討。. 1-4 研究流程界定研究主題與目的 ▼ 相關文獻探討 ▼ 視覺刺激物設計 ▼ 設計問卷與訪談問題設計 ▼ 實驗試測 ▼ 實驗進行 ▼ 資料統計與分析 ▼ 結果綜合討論 ▼ 結論與建議圖 1- 1 研究流程. 3.

(23) 第二章文獻探討. 第二章、文獻探討 2-1 網際網路與媒體世代本章節將藉由文獻探討「世代」、「世代偏好」、「數位傳播媒體的演進」與「網頁使用者概況」。以了解數位媒體的演進與世代之間的關係，以及網路的媒體與使用者之間的成長。. 2-1.1 世代世代間的劃分眾說紛紜，世代的開始與結束並沒有肯定的界線也非絕對，以台灣和美國相比，台灣在嬰兒潮時期相當困苦，而美國的戰後嬰兒潮生活則顯得優渥（王之杰，1999），所以在世代的分界上以成長經驗、文化與社會環境的分界較為合理。研究者們將世代分為傳統世代、嬰兒潮世代（Baby Boomers）、X 世代（Generation X）、Y 世代（Generation Y）、Z 世代（New silent generation）等。各研究者對於世代定義彙整如表 2-1 所示。出生年齡分布區分雖然不一致，但有某些相似程度。傳統世代約為 1945 年以前；嬰兒潮世大約指 1946～1964 年間；X 世代約指 1965～1979 年間；Y 世代約指 1980～1994；Z 世代大約指的是 1995 年後。從傳統世代到 Y 世代的新新人類經歷權力下放，開始解嚴、髮禁解除、報禁解除等，學歷高的比例也較上一代高，價值觀已逐漸轉向自我；自信、、反傳統、重消費與享受當下成為此世代特色（王之杰，1999；楊瑪利，2002）。Y 世代與 N 世代的部分重疊，N 世代大約為 1977 年至 1997 年，N 也代表 Net，此世代與網際網路之間有緊密的關聯，也可以稱作網路世代（Tapscott，1998）。Y 世代的生活中圍繞著數位媒體，而且普遍接觸電腦中圖形介面，（王之杰，1999），學習的方式也因媒體的發展而多元化，不再拘泥於傳統形式（Tapscott，1998），這也使得學習不再只能待在教室裡，在家中也能透過網路學習。. 4.

(24) 第二章文獻探討. 表 2- 1 各研究中世代名稱、出生年比較表來源. ~1940. 1950. 1960. 1970. 蕭新煌. 1980. 1990. 2000~. 新人類. （1995）出生年. 1965-. Smith & Clurman （1997）出生年. 嬰兒潮世代. X 世代. 1946-1964. 1965-1979. Tapscott （1998）. Y、N 世代. 出生年. 1977-1997. 王之杰（1999）出生年陳金貴. 傳統. （1999）. 世代. 出生年. ~1945. 黃識銘（1999）出生年湯瑪利（2002）出生年 Surmanek （2005）. 嬰兒潮世代. X 世代. Y 世代. 1946-1964. 1965-1979. 1980-1990. 嬰兒潮世代. 新人類. 新新人類. 1946-1964. 1965-1974. 1975-. B 世代（嬰兒潮. X 世代. Y 世代. 1965-1979. 1980-. 世代） 1950-1964. Y 世代、6 5 年級生. 年級生、新新人類. 1961-1970. 1971-1980 X 世代. Y 世代. Z 世代. 1965-1979. 1980-1994. 1995-. 資料來源：蕭新煌（1995）；Smith & Clurman（1997）；Tapscott（1998）；王之杰（1999）；陳金貴（1999）；黃識銘（1999）；湯瑪利（2002）；Surmanek（2005）；伊彬（2008），本研究整理。. 2-1.2 世代偏好生活中充滿著大量的影像，而快速的影像傳達影響了知覺系統，也改變了人類認知、閱讀模式與思考的方式(McLuhan，1964；洪蘭，2004)，視覺影像影響人 5.

(25) 第二章文獻探討. 們的認知判斷，產生不同世代文化的認知差異（Monaco，1983；張婉琪，2007；李曜安，2003）。現今社會科技的發達使得資訊傳播更為便利，形成快速咀嚼的速食文化，Y 世代青少年以瀏覽取代閱讀，只在乎目的取得而非過程（王之杰，1999）；而圖像能夠在短時間內快速的傳達多樣的訊息（Powell，2000，p.11-26），因此，成為此世代取得資訊的習慣；以圖像為主的社會環境與媒體發展，使青少年對於圖像的空間與符號解讀能力較佳，但是，圖像資訊為知識卻顯得缺乏深度，且在文字上的解讀也略遜於成年人(王之杰，1999；楊仁烽，2007；伊彬、林演慶、張琬琪，2006)；1946 年嬰兒潮世代的成年人主要接觸媒體仍以書本、報紙為主，電腦的發展也尚未普及化。而從上述可知媒體內容在世代間的視覺經驗與解讀有所差異。劉鴻世、郭輝明、黃斐慧（2003）的研究指出，上網的經驗長短會影響對於圖示與文字判別偏好。圖像思考顯然為青少年視覺溝通的語言，且發展出屬於青少年的風格和符號，例如火星文、塗鴉、混搭服裝等，這些次文化由於商業與市場需求，形成流行文化；流行文化中的電視、音樂、電影、網路、漫畫、電玩也是青少年的主要娛樂。而此時的青少年大腦處於發展階段，富有活動力且喜愛求新求變（Strauch，2005，p.47；王之杰，1999），這也代表此階段的青少年人亦受到外在影響；哈頓洛克發現負責執行行動、判斷、推理等能力的前額葉皮質（prefrontal cortex）會持續發育到二十歲才會發展成熟，此時的大腦有較大的可塑性，容易接受新事物（Strauch，2005，p.44-51）。青少年受到流行文化影響，習慣了繽紛、碎裂、跳躍、複合風格的視覺環境，快速的影像節奏也反映在媒體中，網頁資訊、短篇廣告、節奏快速的音樂、MTV 的片段式剪輯等，而這些影像使美感價值的改變。在伊彬、林演慶、張琬琪（2005）在「台灣青少年與成人對流行影像的觀察、解讀、與美感認同差異─美感判斷與偏好」研究中，以最常閱讀的流行雜誌，針對 17-18 歲和 35-50 歲的成年人與青少年，結果在不同的主題與形式下，發現青少年與成人世代間有不同的美感判斷與偏好。相同世代的族群會有類似的想法、價值觀、態度及問題，主要因素為經歷相同的社會背景、經濟、教育、歷史、政治、消費與流行文化，而不同世代則會有不同的價值觀與行為上的差異（Solomon，1999；Smith & Clurman，1997；黃識銘 6.

(26) 第二章文獻探討. 1999），但楊舜仁（2002）認為同世代的特質雖然類似，但並非概括全部的樣本，因為個人的專業技能、興趣偏好會出現跨世代的認同現象。世代的偏好與許多因素互相糾結著，大眾傳播媒體、社會型態與文化模式之間就像相鄰的齒輪，彼此牽連變動（翟本瑞，2001，p.258），青少年與成年人之間形成自我特色的文化堡壘。. 2-1.3 數位傳播媒體的演進數位化的訊號是以 0 與 1 的二位元數字組成，這些符號透過解碼轉換成我們在數位產品上得到的影像與聲音。大眾傳播不斷地在革命與變化，在發展的過程中訊息傳遞更為方便，且逐漸地縮短時間與空間。1455 年「古騰堡聖經」問世，代表著便宜又大量的印刷品來臨，新的宣傳媒體逐一浮現，報紙、雜誌、宣傳單、包裝等；1923 年發明了映像管，之後在 1935 年的美國有了第一個電視網（Straubhaar，1996，p. 221-302），電視的發明影響了傳播與生活。從印刷術到電視傳播，使閱讀的模式已從主動轉為被動的吸收，不花力氣的方式使電視成為娛樂的重心（Castells，1998 ，p.337）。電腦現在已成為大部分人的必需品，從巨大的機器且僅能進行簡單功能，透過不斷的研發形成今日便利的電腦。早期的電腦功能以計算與資料儲存為主。1939 年 Atanasoff 發明電子化電腦；1946 年第一步由賓州大學製作的電子器算機；1970 年代因為科技的進步，使超大型的積體電路能夠縮小至一片小晶片上，這是 1971 年由 Intel 所生產的 4004 型晶片，而 1975 年 Altair 所製造最早的個人電腦便使用此晶片（Straubhaar，1996，p.417）；1972 年至 1974 年之 Xerox PARC 發展出 Alto 系列電腦，此階段的電腦已步上軌道，具備該有的配備與系統；1976 蘋果公司的第一代電腦上市，隔一年蘋果二代上市，並增加了磁碟機的功能，之後也推出具有圖形介面的「麥金塔」電腦產品（Ed Tracy，2007，引述自伊彬，2008；Straubhaar， 1996，p.220-221；陳豐偉，2000，p.109），先進的多媒體功能奠定日後科技生活化的方向。電腦內部軟體發展使電腦功能如虎添翼，1980 年代桌上型出版，利用 Page 7.

(27) 第二章文獻探討. Maker、Quark Xpress 排版軟體並配合硬體設備，使桌上型電腦也能夠印製平面媒體（Straubhaar，1996，p.220-221）；1981 年 IBM 個人電腦搭載 DOS 系統；1990 年代微軟公司發展介面更容易使用的 Windows operating system（Straubhaar，1996， p.413），這也深深影響今日電腦所使用的作業系統與介面設計。網際網路將許多溝通的線路融合在一起，在這之間融合了人文、科技、歷史等素材，這對各地方的社會產生許多可能。1964 年「章魚網路」區域網路是首先被應用的（Straubhaar，1996，p.426）；1969 年因美國軍事上連絡的需求發展了 ARPANET 網路，之後便使用在科學研究上（Castells，1998 ，p.361）；1973 年發明 UNIX，使用 TCP/IP 協定讓電腦能使不同網域、系統與軟體互相通行；同年發展出 telnet 遠程終端機模擬、FTP 檔案傳輸、email 電子郵件三種網路協定（陳豐偉，2000，p.120）；1974 年 Internet 的 TCP/IP 使其功能更加完整；1976 年 BBS（Bulletin board systems）電子佈告欄系統使資訊交流多了一個平台，內容大部分由使用者提供；1984 年 FidoNet 網路電子布告欄的出現，讓使用之間能互相連結；1991 年 World Wide Web（WWW）創造了一個超文字空間，可瀏覽圖形、文字、影音的平台，介面中可以方便的取得資訊、工作與進行社群活動等，Internet 結合 WWW 與 TCP/IP 兩者，讓使用者能自由的傳遞資訊與位置（陳豐偉，2000，p.98-99）；1992 年台灣中山大學網路組推出本國的第一個 BBS 站，是個可收發信件、張貼佈告欄、聊天與組社群的純文字網路系統；1993 年，美國國家超級計算及應用中心（NCSA）發表了 Mosaic 瀏覽器，它可結合超文件（hypertext）、多媒體（Multimedia）以及超文件網路傳輸協定（http）（T.Berners-Lee，1994。引述自楊智元，2001）；1990 年代的網路發展突飛猛進，這項媒介使得書本、報紙、電視的生態產生變化，閱讀的方式隨著科技產生多元的方式。表 2-2 為青少年世代與科技媒體的演進研究整理。. 8.

(28) 第二章文獻探討. 表 2- 2 世代與數位科技的發展時間對照表來源. 1960. 1970. 1980. 1990. Y 世代. 研究整理出生年代 1960. 2000 Z 世代. X 世代. Millennial I pod generation. New silent generation. 1965-1980. 1980-1994. 1995-. 1970. 2010. 1980. 1990. 2000. 2010. 1964 年的「章魚網路」區域網路 1969 年發展 ARPANET 網路 1971 Intel 的 4004 型微處理器 1973 年發明 UNIX 使用 TCP/IP 協定 1973 年發展 telnet 遠程終端機模擬、FTP 檔案傳輸、email 電子郵件三種網路協定 1974 年 BBS 電子布告欄開始 1975 年 BASIC 程式轉譯器 1975 年 Altair 公司首次推出個人電腦 1976 年 Apple I 電腦誕生 1977 年著重娛樂生活 Apple II 上市 1980 年 Quantel 生產 Paintbox 繪圖軟體發展事件. 1981 年 IBM 搭配 MS-DOS 的首部個人電腦問世 1985 年 Aldus 推出 Page Maker 排版軟體 1987 年 Adobe 推出 Illustrator 向量繪圖軟體 1987 年 Quark 推出 Quark Xpress 排版軟體 1988 年 Softimage 發展出 Creative Environment 3D 動畫軟體 1989 年研發出全球資訊網（WWW）伺服器軟體 1990 年 Adobe 發展出 Photoshop 影像處理軟體 1991 年 WWW 伺服器軟體登場 1991 年 Adobe 發展出 Premiere 非線性剪輯軟體 1992 年台灣中山大學網路組推出本國的第一個 BBS 站 1993 年首次發展出個人電腦撰寫的圖像式網路瀏覽器 Mosaic 1995 年 Mini DVD 數位錄影帶 9.

(29) 第二章文獻探討. 1997 年 PHILIPS 與 SONY 聯合製造出 DVD 2005 年 Microsoft 推出 Xbox 360 2006 年 Nintendo 發展出 Wii 高互動性電玩. 資料來源：Straubhaar （1996）；Castells（1998）；陳豐偉（2000）；楊智元（2001）；伊彬（2008）研究與本研究整理。. 大量的圖像式操作介面與新興閱讀媒體在 1990 年後出現，WWW 使多媒體與資料庫在網際網路上展現。1990 年出生的青少年為現今的 18 歲的 7 年級生，以台灣網路使用的普及程度，此世代將受其影響。科技的進步使閱讀媒體電子化，但是，新媒介並不是完全取代傳統媒介，而是功能重組（羅文輝，2001）。數位電子閱讀介面帶擁有許多特性，被動的單向的閱讀環境轉變為雙向，使用者不只可以閱讀還可以發言，現在部落格（Blog）便是以這樣的形式誕生（陳銘真，2006）。新媒介使訊息有效率、多元、方便地傳遞。資訊社會的發展使媒體生態產生變化，創市際市場市場研究顧問公司於 2005 年調查顯示，民眾接觸的媒體使用率以電視（74.3%）最高，其次是網路（44.9%）、報紙（28.5%）、雜誌（34.5%）、廣播（21.2%），由此可知網路媒體的使用率超過傳統印刷媒體，網路與生活結合也已成為交友、購物、理財等資訊需求重要來源（陳銘真，2006）。網路不只有多樣的功能能取代其他媒體，而且由於時間是有限的，因此，在時間的運用上方便快速的新媒體會取代舊媒體（羅文輝，2001）。當前的社會已習慣圖像的傳播形式，以圖像為主的相關知識與認知教育也顯得重要許多（汪曼穎、王林宇，2006）。這樣的社會文化下可能會脅迫到其他媒體的生存，而改變人們的閱讀習慣。. 10.

(30) 第二章文獻探討. 2-2.4 網路使用年齡使用網路的族群不斷地蔓延，無論工作、休閒皆可透過電腦達成，使網路與生活緊密連結。民國 91 年九月到明國 96 年一月的上網人口，可發現 91 年到 92 年的成長幅度最大。目前台灣上網人數已超過台灣人口半數以上，且近乎每年上網人口都有提升。圖 2-為歷年使用網路人口成長。. 圖 2- 1 台灣地區上網人口比較. 2008 年「財團法人台灣網路資訊中心網路使用調查」顯示，台灣地區民眾使用網路人數推估有 15,547,878 人曾上網；在各地區中以「台北市」使用率較高，有 83.11%，其次為高雄市 80.00%，使用率最低的為東部地區 60.44%；以鄉鎮別劃分，非偏遠地區的使用率較高，有 70.87%，偏遠地區為 52.86%。從年齡劃分，12 歲以上之上網比例以「16 歲～20 歲」最高，有 96.95%；其次為「12 歲～15 歲」94.86%；「21 歲～25 歲」94.65%；「26 歲～35 歲」90.79%；「36 歲～45 歲」74.62%；「46 歲～55 歲」51.97%；而以「56 歲以上」之上網比例最低 17.89%。個人平日上網時數以「1 小時以上～未滿 2 小時」最多，有 20.74%；其次為「2 小時以上～未滿 3 小時」14.74%、「半小時以上～未滿 1 小時」10.18、「3 小時 11.

(31) 第二章文獻探討. 以上～未滿 4 小時」9.89%。大部分的人上網地點以「家中」最多，有 93.57%；其次為「工作地點」33.89%、「學校」20.47%、「網咖」13.7%。由上述可知 2008 年的上網年齡遍佈 12～56 歲以上， X 世代、Y 世代與 Z 世代的上網比例均達 90%以上，以上網時間與上網地點來說，網路有相當的普及程度。. 2-1.5 網路使用類型根據 2007 年「財團法人台灣網路資訊中心網路使用調查」顯示，台灣民眾上網類型之網站以入口網站（61.67）為主，每 100 人即有 60 人使用；其次為搜尋引擎（23.79）；新聞媒體（13.14）；遊戲網站（9.87）；購物網站（9.74）；生活休閒網站（7.64.）。推論入口網站為多數人的起始網站，藉由入口網站之搜尋引擎尋找其他類型網站。. 圖 2- 2 歷次個人使用寬頻上網之網站類型資料來源：財團法人台灣網路資訊中心網路使用調查（2007）. 依照前五大常使網站之類型以及研究需要，觀察以下各年齡層的使用率：「16 歲～20 歲」使用率為入口網站（63.30）；搜尋引擎（15.81）；新聞媒體（5.47）；. 12.

(32) 第二章文獻探討. 遊戲網站（17.42）；購物網站（7.44）；生活休閒網站（4.63）。「36 歲～45 歲」使用率為入口網站（63.30）；搜尋引擎（30.38）；新聞媒體（20.46）；遊戲網站（4.20）；購物網站（13.58）；生活休閒網站（12.30）。「46 歲～55 歲」使用率為入口網站（63.02）；搜尋引擎（25.21）；新聞媒體（15.62）；遊戲網站（3. 09）；購物網站（6.97）；生活休閒網站（9.33）。. 2-1.6 小結影響世代之間差異的因素繁多，涉及環境、社會、文化、科技、成長背景、認知等。相同的世代族群在相似的社會文化下生長，會有較為類似的價值觀，因此，在新舊世代之間有了溝通上的問題，舊世代如何適應新媒體語言與認同新的文化，新世代又如何向舊世代的人們傳的有用的訊息呢？以網路媒體來說，大量的文字、圖片與影音等訊息呈現，以及破碎、閃爍的畫面，與過去的傳統媒體相較之下複雜許多；網路媒體帶有傳統媒體缺乏的優勢，促成網路的普及化，即便是成年人也必須因應時代變化而學習使用。成年人與青少年是在不同的成長階段接觸數位媒體，在訊息的處理上會因個人過去經驗而有所不同，世代對於圖像與文字的偏好因素是本研究欲探討。. 2-2 網頁配置之相關研究本節所探討的內容為網頁版面構成之影響要素，包括視覺傳達設計、網頁介面元構成元素以及網頁版面配置。網站的成立需要明確的目的與利益，必然會設計一套有助於與使用者溝通的方法，而網站的介面設計不僅只有美麗的外觀，還需要協助使用者在瀏覽上的效率。. 2-2.1 網頁介面構成元素介面（Interface）廣義來說是人與機器之間的溝通管道；狹義是指機器與使用者的介面，但僅在於機器與機器之間，例如：鍵盤與電腦（李宜珍，1993）。目 13.

(33) 第二章文獻探討. 前的網路設計以圖像使用介面（Graphic User Interface，或 GUI）為主，透過滑鼠的點選可在視窗與選項之間選擇所需的資訊與功能（李義正、李淙柏，2006）。介面是由所多元素組成，在編排設計上包含版型、文字、色彩、圖像、線條等元素（賴如珊，2001）；Kristof & Satran（1995）提出網頁介面元素由背景、視窗及方塊欄、控制按鈕、圖片、文字、影像、聲音、動畫；Powell（2000）提到網頁設計元素有顏色、影像、背景、視窗、表單、密碼欄、文字、按鈕、聲音、圖示和圖形。這些元素構成使用者介面（User Interface，或 UI）。以下為上述各研究者所提介面元素之歸納與規範（Kristof & Satran，1995；Powell，2000）： 1.. 文字（text）. 文字包括字體大小、粗細、顏色、字型、字距與行距等。文字為設計主體，須考量易讀性，長度控制在 50 到 70 字元之間，避免過長。 2.. 圖像（Images）. 圖像包含純圖片（照片、插圖等）、標示、地圖。圖片的大小須與版面配合，以及可慮解度和檔案大小。 3.. 色彩（Color）. 以 RGB 組成之色調、明度、彩度，運用在字體、表格、前景、背景等。色彩可引導關聯意義；在對比上須適當調整。 4.. 影像（Video）. 影像為流動視覺圖像，具有時間性與畫面長寬比例，格式以 Web 可執行撥放為主，包含動畫與各種影片。影像使用需考慮時間長度、畫面解析度、壓縮格式與視窗大小，這關係影像的大小與品質；以及如何與介面之間產生整體感。 5.. 聲音（Sound）. 聲音包含音效、音樂的大小聲、頻率、時間等。聲音須配合網頁主題，需要精確的控制時間播放以及混音技巧，可使整體更完美。 6.. 背景（Background）. 背景可使用色彩或圖片，透過重複分割、無接縫組成背景。背景可使畫面穩定，但是，避免過於複雜與其他元件混淆。 7.. 視窗（Windows） 14.

(34) 第二章文獻探討. 為我們看見網頁的窗口，並且可使用頁框分割頁面區域，可做為提示重點、放置不同媒體與內容以方便導覽。 8.. 按鈕（Buttons）. 按鈕的形式上有圖形與文字，在外觀上要讓人容易辨認，為功能性介面元素。 9.. 表單（Chart）. 其形式為文字欄位、多項按鈕之選單、捲動列表、下拉選單、使用者登入等互動式功能元素。. 網頁中的元素需要適當的排列才能有助於瀏覽，外觀視覺要素須具整體性，且利用各種元件的安排，以增強使用者記憶與解讀，使網頁瀏覽與資訊閱讀過程減低視覺疲勞，更能建立使用者對網站的形象（王欽泉，2007；曾惠民，2003；林价興、王年燦，2006；賴如珊，2001）。. 2-2.2 網頁介面可用性不同的圖文編排與網頁元素不僅會產生不同的視覺肌理（Visual Texture）（林价興、王年燦，2006），也會影響觀者的閱讀方式與認知態度 (林彥呈等人，2000；莊宜昌，1996；Nielsen，2000)。許多研究者指出該如何設計網頁，並認為使用者介面會影響搜尋的效率，這關係到可用性；ISO 將可用性的定義為：能增加指定使用者的效果（effective）、效率（efficient），並且滿足目標。在此 Powell（2000）對網站的可用性提出幾項規則： 1.. 可用性並無標準答案，這將取決於使用者。. 2.. 可用性的影響在於媒體的類型。. 3.. 可用性的高低來自於網站類型以及熟悉程度。. 4.. 可用性與使用者滿意度有關係。. 楊欣哲、王超弘（1999）認為依循介面設計原則可使網頁介面的效果得到彰顯；Park & Noh (2002)指出使用者介面的設計元素會影響搜尋的績效與主觀上的感. 15.