國 立 交 通 大 學
傳 播 研 究 所
碩 士 論 文
前注意感知在資訊介面設計與認知風格上
對資訊搜尋成效之研究
A Study of The Preattentive Perception for the Effects of
Interface Design and Cognitive Style on Information
Retrieval
指導教授：李峻德 博士
研究生：李孟潔
前注意感知在資訊介面設計與認知風格上
對資訊搜尋成效之研究
A Study of The Preattentive Perception for the Effects of
Interface Design and Cognitive Style on Information
Retrieval
學生：李孟潔 Student：Mong-Chieh Lee
指導教授：李峻德 博士 Advisor：Jim Jiunde Lee, Ph. D.
國立交通大學
傳播研究所碩士論文
A Thesis
Submitted Institution pf Communication Studies
National Chiao Tung University
In Partial Fulfillment of the Requirements
Fot the Degree of Master of Arts
in Communication Studies
July 2009
Hsinchu, Taiwan, Republic of China
前注意感知在資訊介面設計與認知風格上
對資訊搜尋成效之研究
學生：李孟潔 指導教授：李峻德 博士
國立交通大學傳播研究所碩士班
中文摘要
類目選單為Web1.0 世代中一種慣用的資訊搜尋心智模式，而本研究在前注 意感知的概念下，嘗試探索另一種可用於Web2.0 世代的新資訊搜尋模式-色彩區 塊選單，並檢視是否適用於不同認知風格的使用者。本研究採用Newsmap 網站 中的樹狀地圖視覺化技術，並將之應用於實驗環境設計中。除此之外，也檢驗可 能影響資訊處理的內在因素-認知風格的主要效果。本研究採用2（文字式介面/ 地圖式介面）x2（文字導向/視覺導向）的實驗設計，共有 60 位在學生完成實驗， 並觀察其心智模式完整性、認知負荷量、系統使用性以檢驗本研究假設。 研究結果發現，雖然慣用的類目選單心智模式仍為影響使用者資訊搜尋表現 的主要因素，但色彩區塊選單心智模式確實在某些部分有較優異的表現。而介面 型態與認知風格會對使用性滿意度產生交互作用影響。有趣的是，文字導向雖偏 好使用文字式介面，但他們的實際表現確未優於使用地圖式介面的文字導向者。 因此，地圖式介面設計應能修補使用者產生的負面情緒。相反地，地圖式介面不 僅讓視覺導向者產生正面情緒，更使其有效地搜尋資訊。最後，根據雙任務測試 結果顯示，使用者需要較多心智資源處理地圖式介面，但在前注意作用下，使用 地圖式介面的辨認記憶表現不遜於使用文字式介面。 關鍵詞：心智模式、介面設計、前注意、認知風格A Study of The Preattentive Perception for the Effects
of Interface Design and Cognitive Style on
Information Retrieval
Student：Meng-Chieh Lee Advisor：Jim-Jiunde Lee, Ph. D.
Institute of Communication Studies
National Chiao Tung University
Abstract
Category menu is a common mental model of information retrieval in the Web 1.0 era . Based on preattentive perception, this study tried to explore a new way of the information retrieval model for operating in Web 2.0, the color & square menu, and examed whether it might be suitable for different types of cognitive style users. The treemap visulization technique from Newsmap website was adopted and was applied to design the interface of the experimental environment. In addition, the interior factor such as cognitive styles (visual- and verble-oriented styles) which might strongly impact information processing were discussed and examed for its main effect. This study conducted a 2 (textual interface / information map interface) by 2(visual- / verbal-oriented) experiment. A total of 60 undergraduate students participated in this study whose performances such as the accuracy of operating mental model, cognitive load, and subjective satisfaction degree were collected to testify the research hypotheses
From the study results, overall, although the conventional mental model - category menu model may still be a dominated role to impact the user’s information retrieval performance, the color & square model can significantly outperform it in certain perspectives. A interaction effect was found between information interface and cognitive style especially for the user’s subjective satisfaction. Interestingly, although verbal-oriented users subjectively felt more satisfied of appling textual interface, their actual performances were not any better than the same style users who operate the information map interface. That is, the effect of information map interface might be able to make up the negative effect caused by the user’s subjective feeling. In contrast, visual-oriented user not only showed a positive emotion toward the usage of information map interface but also did apply well of such type of interface to searching information effectively. Finally, from the dual-task result, even though users using information map interface need to bear more mental loads, with preattentive attributes, this type of interface is no less effective than textual interface on the user’s recognition memory performance.
誌謝
至今仍覺得能考上交大傳播所有如作夢般，筆試當天差點遲到，氣喘呼呼在 門外待不到 3 分鐘就進考場的畫面仍歷歷在目。感謝幸運之神眷顧，讓我得以繼 續享受學生生活，踏入新竹這個科技都市。一開始的課業壓力曾讓我失去信心， 甚至懷疑自己，幸好在同學們陪伴努力之下已逐漸適應。 由於自己被動懶散的個性，歷經三年才終於將論文完成，首先心中最要感謝 的是指導教授-李峻德老師，老師帶領我進入人機互動的領域，讓我找到感興趣 又可結合過去所學的一條路，在論文進行過程中，老師亦適時指引我方向，讓我 不致走偏，也常鼓勵我善用所學把握實習機會。感謝傳科系的陶振超老師，因緣 際會下成為陶老師的研究助理，讓我接觸了眼動儀，學習摸索研究相關軟體，無 論是生活上或撰寫論文期間皆時常打擾老師，老師均不辭辛勞盡可能給予協助， 讓我萬分感激。感謝同是口委的許峻誠老師，老師在口試期間提供相當多的寶貴 意見，讓我的論文觀點能夠更深入而完善。感謝喜愛我裙子的林姐，給予我所上 事務的相關意見。謝謝所有幫我填寫問卷的通識課同學及受測者，有了你們協助 我的研究才得以順利進行。 此外，進入研究所讓我獲益最大的並非學術知識，而是與眾人互動帶給我的 成長和啟發。鐵三角成員之一的智先，這屆人機互動領域上的唯一戰友，讓我完 全打破對台大人的刻板印象，渾身充滿表演細胞，起酒疹、彩帶舞、模仿秀、傳 播拳是你的拿手好戲，都有一一記錄在我相機裡；鐵三角成員之二的恩綺，碩一 時期莫名擔任我的司機，在溫馨接送情下培養出堅毅的友情，讓我有機會嘗盡台 中、台南的美食，感激有你陪我戰到最後一刻；秋萍，號稱本屆最正的台妹，雖 然喜歡吃重覆的東西，但作事效率超高又體貼，也是一起尋找幸福的夥伴；雅婷， 電力百分百的竹塹公主，總有聊不完的話題，熱心善良地給我支持鼓勵，貼在浴 室的日不落歌詞讓我見識到妳的努力；小貴，我進入傳播所認識的第一位同學， 雖然妳半年後才加入我們且無時無刻處於忙碌狀態，但妳的高音頻、亂入技巧、 寬廣的人脈與色褲，我想應該很難忘記；依穎，大學同窗&傳播所學妹，感謝你 和我一同分享喜怒哀樂，希望妳一直幸福下去。此外，感謝昭鈺曾在高雄時收留 我一夜，讓我得以輕鬆平靜地準備隔天的研討會。 另外，感謝相如學姐讓我有機會至Yahoo 工讀，QQ 學姐不時的關心論文進 度，帥氣的舜安學姐(?)給予論文、就業方面的建議，小雞學姐的論文亦給我相 當幫助。感謝活潑搞笑的機幫學弟妹們-老大、小鹿、鬱晴、科科，讓機幫的氣 氛熱鬧非凡，也替我的實驗幫了不少忙。感謝陶幫的眾學弟妹們參與實驗，尤其 聽著碩二四人組-淳矞、婉雲、志華、易鴻笑鬧鬥嘴著實讓緊張的心情減緩不少， 一起揮汗爬完飛鳳山後享用美食的經驗太難忘。感謝口試當天來電加油打氣的國中&高中摯友-靜鈴，可愛傻氣的鮪魚學妹當我的飯友，以及在碩三這年的可愛室 友-Grace 及茹雲，讓宿舍時常充滿歡樂的氣氛，令住遍學校各宿舍的我在十一 舍找到依靠。 回顧和大家相處的時光，的確為枯燥煩悶的寫作日子增添不少樂趣。無數個 KTV 歡唱、聚餐、MSN 群組、慶生活動、分享聯誼趣事、窩在研究室聊天、往 返於所上及二餐的日子，衝動之下執行的竹塹公主企劃，叨唸許久終於成行的六 天五夜東京遊，二月份卻有如夏天的花蓮行，無數次的台中美食行等，都為研究 所生涯增加更多美麗的色彩，甚至比我的大學生活更精采許多，感謝有你們陪我 一起瘋一起衝，令我眼界大開。雖然隨著時間大家逐一搬離新竹，這些回憶卻是 我這三年最珍貴的資產。 最後，我要跟一直在背後默默支持我的爸媽和家人說，我終於畢業了!!!雖 然你們不太表現自己的情緒，兄姐們老記不得我唸到幾年級，但我相信你們是高 興的。謝謝老爸老媽常抽空幫我搬家，兄姐們供我就讀期間的生活支出。 再見了!人社二館。再見了!交通大學。 孟潔 2009.07.07
目錄
中文摘要 ...I Abstract ...II 目錄...V 表目錄 ...VII 圖目錄 ...IX 第一章 緒論 ...1 第一節 研究背景 ...1 第二節 研究動機 ...1 第三節 研究目的 ...5 第四節 研究架構與流程 ...6 第五節 研究貢獻 ...7 第六節 名詞解釋 ...8 第二章 文獻探討 ...9 第一節 介面設計 ...9 第二節 資訊處理與認知負荷 ...19 第三節 前注意與資訊視覺化 ...28 第四節 認知風格 ...39 第三章 研究方法 ...45 第一節 研究假設 ...45 第二節 變項的操作型定義 ...46 第三節 實驗環境設計 ...49 第四節 實驗對象 ...56 第五節 實驗步驟 ...58 第四章 研究結果與分析 ...61 第一節 樣本描述統計 ...61 第二節 量表信效度檢定 ...61 第三節 各組描述統計分析 ...64 第四節 假設檢驗 ...66 第五章 結論 ...89 第一節 研究發現與討論 ...90 第二節 研究限制與未來建議 ...97 參考文獻 ...100 中文書目 ...100 英文書目 ...102 附件一 文字式介面 ...109 附件二 地圖式介面 ...111附件三 SOP認知風格量表 ...113
附件四 實驗說明 ...115
附件五 新聞記憶測試 ...123
附件六 網站心智模式測量 ...124
表目錄
表 2-1 Web2.0 的創新網站瀏覽模式 ... 16 表 2-2 控制與自動化歷程 ... 20 表 2-3 認知負荷測量方法分類 ... 26 表 2-4 前注意特徵 ... 31 表 2-5 資訊視覺化可強化的認知效果 ... 34 表 2-6 資料類型與工具對應 ... 35 表 3-1 新聞類別與色彩標示對應 ... 52 表 3-2 實驗任務說明 ... 53 表 3-3 心智模式完整度的評分標準 ... 55 表 3-4 認知風格分組情形 ... 57 表 4-1 樣本結構表 ... 61 表 4-2 認知風格量表的KMO與Bartlett檢定 ... 62 表 4-3 修正SOP得出九個題項的因素分析與信度檢驗... 62 表 4-4 使用時滿意度量表的KMO與Bartlett檢定... 63 表 4-5 使用性滿意度量表之因素分析與信度檢驗... 63 表 4-6 各組心智模式完整性比例平均數與標準差... 64 表 4-7 各組完成全部任務之時間平均數與標準差... 64 表 4-8 各組任務錯誤率平均數與標準差 ... 65 表 4-9 各組使用性滿意度平均數與標準差 ... 65 表 4-10 各組雙任務的反應時間干擾平均值與標準差... 66 表 4-11 各組辨識測試正確比例平均數與標準差... 66 表 4-12 介面型態vs.心智模式完整性的單因數變異數分析... 67 表 4-13 介面型態vs.任務完成時間的單因數變異數分析... 68 表 4-14 介面型態vs.任務 4 完成時間的單因數變異數分析... 68 表 4-15 介面型態vs.任務錯誤率單因數變異數分析... 69 表 4-16 介面型態vs.使用性滿意度單因數變異數分析... 69 表 4-17 介面型態vs.效率與有效性評估的單因數變異數分析... 70 表 4-18 介面型態vs.情感性評估的單因數變異數分析... 70 表 4-19 介面型態vs.雙任務反應時間單因數變異數分析... 70 表 4-20 介面型態vs.辨認記憶單因數變異數分析... 71 表 4-21 認知風格vs.心智模式完整性的單因數變異數分析... 72 表 4-22 認知風格vs.任務完成時間的單因數變異數分析... 72 表 4-23 認知風格vs.任務 4 完成時間的單因數變異數分析... 72 表 4-24 認知風格vs.任務錯誤率的單因數變異數分析... 73 表 4-25 認知風格vs.使用性滿意度的單因數變異數分析... 74 表 4-26 認知風格vs.效率與有效性滿意度的單因數變異數分析... 74表 4-27 認知風格vs.情感性滿意度的單因數變異數分析... 74 表 4-28 認知風格vs.雙任務反應時間的單因數變異數分析... 75 表 4-29 認知風格vs.辨認記憶的單因數變異數分析... 75 表 4-30 心智模式完整性迴歸分析結果 ... 76 表 4-31 任務完成時間二因數變異數分析 ... 77 表 4-32 任務 4 完成時間的二因數變異數分析... 77 表 4-33 文字導向者的任務 4 完成時間單因數變異數分析... 78 表 4-34 視覺導向者的任務 4 完成時間單因數變異數分析... 78 表 4-35 任務錯誤率二因數變異數分析 ... 79 表 4-36 使用性滿意度的二因數變異數分析 ... 80 表 4-37 文字導向者的使用性滿意度單因數變異數分析... 81 表 4-38 視覺導向者的使用性滿意度單因數變異數分析... 81 表 4-39 效率與有效性評估的二因數變異數分析... 82 表 4-40 文字導向者的效率與有效性評估單因數變異數分析... 82 表 4-41 視覺導向者的效率與有效性評估單因數變異數分析... 83 表 4-42 情感性評估的二因數變異數分析 ... 84 表 4-43 文字導向者的情感性評估單因數變異數分析... 84 表 4-44 視覺導向者的情感性評估單因數變異數分析... 85 表 4-45 雙任務反應時間二因數變異數分析 ... 86 表 4-46 辨認記憶二因數變異數分析 ... 87 表 4-47 介面型態vs.移至正確類別時間的單因數變異數分析... 87 表 4-48 移至正確類別時間的二因數變異數分析... 88 表 4-49 文字導向者的移至正確類別時間單因數變異數分析... 88 表 4-50 視覺導向者的移至正確類別時間單因數變異數分析... 88 表 5-1 研究分析結果整理 ... 89
圖目錄
圖 1-1 研究流程圖 ... 6 圖 2-1 心智模式、概念模式與系統形像關係... 9 圖 2-2 博客來網路書店 ... 12 圖 2-3 聯合新聞網 ... 12 圖 2-4 史萊姆的第一個家 ... 13 圖 2-5 拿坡里炸雞 ... 13 圖 2-6 Google搜尋引擎 ... 14 圖 2-7 樹狀節點架構 vs. Treemap技術 ... 36 圖 2-8 舊版的Newsmap新聞網站介面 ... 37 圖 2-9 Newsmap中的色彩意義說明 ... 37 圖 2-10 加入前注意特徵與認知風格的心理模式... 39 圖 2-11 本研究架構圖 ... 44 圖 3-1 使用性滿意度問卷範例 ... 49 圖 3-2 實驗網站架構圖 ... 50 圖 3-3 文字式介面類別呈現方式 ... 50 圖 3-4 文字式介面發佈時間與觀看人數呈現方式... 51 圖 3-5 新聞類別與色彩聯想問卷選項 ... 52 圖 3-6 地圖式介面類別的色彩標示 ... 52 圖 3-7 色彩明暗表示時間順序&區塊大小表示觀看人數多寡... 53 圖 3-8 Tholos介面 ... 56 圖 3-9 實驗流程圖 ... 58 圖 4-1 介面型態X心智模式剖面圖 ... 67 圖 4-2 介面型態X任務 4 完成時間剖面圖 ... 68 圖 4-3 介面型態X雙任務反應時間剖面圖 ... 71 圖 4-4 認知風格X任務 4 完成時間剖面圖 ... 73 圖 4-6 介面型態X認知風格的使用性滿意度剖面圖... 80 圖 4-7 文字導向者之介面型態X效率與有效性評估剖面圖... 83 圖 4-8 介面型態X認知風格的情感性評估剖面圖... 84 圖 4-9 視覺導向者的介面型態X情感性評估剖面圖... 85第一章 緒論
第一節 研究背景
國內學術網路自1990 年引進 Internet，近年無論網站傳輸與製作技術皆已迅 速發展，網站使用亦愈趨普及化，此時期被稱之為「Web1.0」時代，其特色為由 業者建置「靜態網頁」，個人只能透過輸入網址的方式找到各類網站，使用者亦 無權更改服務內容，僅能執行瀏覽搜尋的任務；隨後2000 年左右出現「Web1.5」 的過渡時期，加入動態網頁及電子商務概念，企業主可藉電子郵件與橫幅廣告達 大量宣傳效果。而O’Reilly Media 創辦人暨執行長 O’Reilly（2004）率先提出「Web2.0」的
新概念更震撼了全球，為2004 年網路泡沫化的市場蕭條帶來一絲契機，創造另 一種網站運作模式，其賦予Web2.0 以下定義： Web2.0 對電腦工業而言為一種商業革命，起因於網際網路被轉為 交易平臺，並試圖找出一種成功的運作模式。其中成功的模式乃是利用 網絡效應去吸引更多使用者，亦即「集體智慧」。 孫傳雄（2008）認為過去對Web2.0 的討論太過著重於功能、商業策略面的應 用，卻甚少關注網際網路本質的轉變，認為造成兩個世代間差異的關鍵因素為「即 時搜尋」（Real Time Search）。例如目前盛行的「微網誌」1（micro blogging）， 網友不僅能自行提供內容，更能產出比內容更新、快速而細微的訊息，當這些微 網誌累計的資料庫達到一定規模時，將對既有搜尋引擎市場、網路發展產生重大 影響。因此進行資訊搜尋時，除了搜尋明確的內容關鍵字，使用者更關心資訊發 展趨勢，如最新發表、最多人參與的議題等。
第二節 研究動機
張姵瑩（2008）明確地指出兩個時代的差異：Web1.0 到 Web2.0 為從是非題 和選擇題的參與模式進階到申論題的參與模式。Web1.0 只能讓個人單向接收訊 息，而Web2.0 進一步地達到雙向溝通的理想，人人皆有權透過網路向世界發聲。 Cuene（2005）則以 2003 年作為兩個世代的分水嶺，1993 至 2003 年歸屬於 1 微網誌乃一種供使用者即時更新簡短字句並公開發佈的網誌形態，訊息內容可透過電子郵件、 網頁、簡訊或即時通訊軟體傳送。微網誌比一般網誌微小且匯集多媒體內容，Twitter 為微網誌 的代表性網站之一，甚至已成為微網誌的代名詞。Web1.0，使用者的互動模式為閱讀靜態網頁，內容由專家或網站業者創建，目 的在提供用戶服務；2003 年後則進入 Web2.0 世代，使用者可大量地讀、寫動態 網頁，內容改由眾多業餘人士創建，系統目的在提供網路服務。 因此，Web2.0 時代來臨導致「資訊型態」的轉變，由於眾人可不斷創製內 容，致使管理者無法掌控品質，個人也難以在無際的資訊堆中找到富價值的內 容，如何幫助個人管理、儲存共用及轉換這些大量內容將成為有效利用資訊的前 提（Zhang & Tang, 2008）。此外，傳統的網站內容封閉無法更改，而 Web2.0 中 的資訊可供個人重新排組、整合再利用，由於資訊處於可讀亦可寫入的狀態，資 訊的流動方向為雙向且變動的，相較於個人被動接收資訊，被迫接收相同的搜尋 結果，Web2.0 時代應發展更貼合個人需求的介面提取技術。
呈上所述，由於在Web2.0 世代下，業者除著重於發展各類相關技術外，如： AJAX2（Asynchronous JavaScript and XML），亦需依使用者的需求轉移而重新構 思符合Web2.0 概念的系統介面。在Web1.0 時期，所販售的商品即為「資訊」， 技術發展皆圍繞在解決資訊爆炸的問題，業者努力強化搜尋引擎的技術，尤以入 口網站與新聞網站為主；而Web2.0 強調的是人與人間的「關係」，主要任務在於 處理關係不足與關係爆炸（黃紹麟，2007）。Web2.0 世代下的使用者除滿足基本 資訊需求，更希望被發現和接納，進而與他人建立關係。例如部落格提供的誰來 我家功能，讓使用者可藉回訪的方式建立關係；或者，使用者可對資訊內容設定 標籤（Tag），利用資料探勘技術，讓性質相同/相異者有機會接觸。 而無論網站系統發展至何種階段，個人在初次造訪網站時皆無法立即察覺網 站架構的全貌，使用者會依賴網站選單所提供的連結路徑進行導覽，以形塑一套 瀏覽的認知結構（Schwartz & Norman, 1986）。隨著線上傳輸技術快速成長，單 一網站多負載複雜、大量文字影音資訊內容，使用者進行資訊搜尋相關任務時， 已無法單靠簡單「瀏覽」（browsing）的方式迅速、正確地找尋資訊，而開始依 賴技術性的搜尋功能。Katz 與 Byrne（2003）指出兩種線上資訊的搜尋方式：「搜 尋」指涉的是利用網站自身的搜尋功能，需輸入關鍵字，非一般入口網站的搜尋 引擎；「瀏覽」則意謂一種藉資訊分類穿梭於網頁節點間的搜尋型式，並非不具 目標導向，而是將之視為一種搜尋的替代方案。 使用者透過瀏覽的方式找尋資訊時，會在內心設立特定需求，逐一篩選所觀
2 AJAX 由 Jesse James Garrett 提出，其類似於 DHTML 或 LAMP 的概念，有效地整合一系列相
關科技。AJAX 優點在於即時更新網頁資訊卻不需重新載入網頁，瀏覽器自伺服器接收文件與數 據後，由客戶端根據使用者的操作行為進行邏輯運作，並執行一些較簡易的程式，相對減少與伺 服器連線往返的次數。
看的網頁內容，相對而言，使用關鍵字搜尋方式可快速地從搜尋結果篩選資訊， 因此亦有另一半使用者為「連結優先者」（Link-dominant） ，而導致約一半的網 站使用者為「搜尋優先者」（Search-dominant）；前者會先盡可能地藉由點選連結 找尋資訊，直至遭遇挫折後才會選擇搜尋引擎（Nielsen, 2004）。因此，網頁瀏覽 依舊是個人在網站中進行資訊搜尋的慣用手法，設置站內搜尋引擎不可作為不良 介面設計之補償藉口，網頁介面設計仍應朝向協助個人擷取資訊方向努力。 過去Web1.0 時代使用者的網路行為為隨意觀看資訊，目的在於「取得」或 「看」，因此產生強烈的搜尋需求；Web2.0 的網路行為則另外再加上「上傳」與 「分享」，不再單純瀏覽他人建置的網站，自己亦能參與網站內容的編輯，換言 之，系統服務者將從提供使用者良好內容轉為提供自由開放的創作平臺（黃彥 達，2006）。Web1.0 技術將所有媒體形式視作「文字」處理，形成「超文字網」 （Hypertext web）；Web2.0 則運用「後資料」3 （Metadata）把相同語意的內容聯 結起來，藉由語意的標示即可跨越不同文字與形式的障礙，本身為「語意網」 （semantics web）的形態（李東昇，2008）。 因此，搜尋引擎僅單純搜尋有相同關鍵字的網頁資訊，使用者仍需逐一點選 及篩選資訊，以得知彼此的關聯性強弱，然而Web2.0 強調含有集體智慧以及可 引發眾人共鳴的內容，使用者注重自我展演並尋求與他人的關係連結，個人可製 定語意標籤作為搜尋的錨點，讓搜尋結果更貼近使用者的需求。 事實上，良好的「導覽」（navigation）機制一直位居網站「使用性」（usability） 的重要面向之一，導覽機制可協助個人得知目前所處的位置，以及確信將前往何 處，而有效的導覽機制需倚賴兩個因素配合：適當的「內容組織」與「視覺呈現」 （McCracken & Wolfe, 2004）。設計優良的視覺呈現可讓使用者熟悉內容間的關 係，並找到欲前往的網頁之連結，所以有效的版面設計可強化內容組織的完整 性，進而降低導覽的困難度，兩者可謂相輔相成。
由此可知，從使用者的觀點來看，視覺呈現有助於探勘內容。而人類本身具 快速利用視覺處理將資料做評估與分類的能力，例如依據檔的形式或版面作快速 分類，其好處在於可作為搜尋或瀏覽的錨點（Deller, Ebert, Bender, Agne & Barthel, 2007）。根據 Teevan, Alvarado, Ackerman 與 Karger（2004）對於個人搜尋信件與 檔案的行為調查發現，個人很少直接使用搜尋引擎，實際上個人會依其目的與既 有的「脈絡知識」（context knoweldge）作局部的瀏覽，這種搜尋手法被稱作「定 位」（Orienteering），此意謂一種態度，代表個人藉由簡易的步驟即可滿足其資訊
需求。 僅管利用站內關鍵字搜尋有簡便快速、以及縮小資訊範圍的優點，然而使用 者心中若沒有明確的關鍵字，將無法下達正確的指令，而使用者需再次對所列出 的搜尋結果進行篩選。透過瀏覽搜尋則具有三種好處：（1）降低認知負荷：個人 有時無法訂出具體的目標；（2）對於環境有較強烈的感受：個人可以隨時得知身 處何處，可讓個人在搜尋的過程中較具掌控力的感受；（3）較瞭解搜尋結果：使 用者可以知道此檔的來源與情境脈絡，更有助於瞭解此結果（Teevan et al., 2004）。 在Web2.0 的環境下，使用者除了獲取基本的資訊內容外，亦對於其他使用 者的行為與特質感到好奇，在上傳資訊的同時進行其他互動，換言之，單純的關 鍵字搜尋方式恐無法完全滿足 Web2.0 使用者。Kroski（2007）便指出日前因應 Web2.0 的互動模式，使用者期盼與訊息有更多的互動，且反應至目前的網站設 計中，著重利用「直覺」（intuitive）且「可用」（usable）的視覺介面，並不斷地 對使用者的需求產生回饋，網站設計者因此追求一種「簡易」（simplicity）且具 關係脈絡的資訊設計，進而產生不同以往的瀏覽形式。 然而，當今針對此類創新的網站設計之研究仍過於貧乏，現存由設計者提供 內容之網站類型的介面與瀏覽模式，是否依舊適用於Web2.0 環境令人質疑。由 於「簡易」（simplicity）設計乃運用「資訊視覺化」（Information Visualization） 與使用性的概念，目前資訊視覺化已常見於一些龐大的線上資料庫系統以及資料 探勘領域，在單一畫面中呈現多種訊息，藉由直覺、形象化的視覺刺激讓人快速 釐清系統概況，讓使用者得以在短時間內獲得部分資訊，進而快速地標定出某些 區塊，以作後續地搜尋處理，對於提取資訊有很大的幫助。 綜上所述，即便網站時代從 Web1.0 邁向 Web2.0 系統，設計者仍應追求使 用性的提升，並吸引個人持續造訪與參與。因此，面對使用者的需求轉移，介面 設 計 者 應 朝 向 尋 求 適 用 Web2.0 且可被大眾廣為接受的「系統概念模式」 （conceptual model）而努力，所以本研究嘗試依循簡易設計原則，探討資訊視覺 化對於Web2.0 資訊呈現的助益，藉此尋求更富直覺性的網頁版面，以與傳統的 選單式瀏覽的系統概念模式區隔。
第三節 研究目的
Krug（2006）指出網站使用者通常不仔細閱讀內容，而採取掃視（Scan）的 原因在於，一般人使用網站的動機在節省時間，行動有如鯊魚持續移動搜索獵 物，且不想花費時間閱讀不必要的資訊。如同現實生活中閱讀報章雜誌般，個人 擅於藉掃視的方式快速找到感興趣部分。因此，使用者勢必需要可產生立即回饋 的網站系統，在節省時間的同時，個人更無耐心學習、操作繁複的語法指令，唯 有提供簡易的點選動作才滿足使用者。Spink, Bateman 與 Jansen（1999）調查個人網站行為，亦發現有 70%的受訪 者表示可在不依賴搜尋引擎的情況下，明顯地找到目標資訊；使用者經常無法成
功地使用搜尋引擎，而產生無法良好的使用經驗，甚至有30%的搜尋結果不符合
需求（Wang, Hawk & Tenopir, 2000）。Jasen（2000）則歸結在一般資訊網站中， 簡易搜尋即可滿足個人，使用者缺乏耐心逐一瀏覽搜尋結果，甚少瀏覽超過十筆 資料，因此進階的搜尋技術所能增加的附加價值有限。 由此可知，個人在使用資訊類網站時仍需倚賴大量的瀏覽動作，而「資訊視 覺化」（Information visualization）所強調的圖像化指引標定，有助於使用者快速 地瞭解整個資料架構，依據資料庫或呈現資料類型不同，目前已發展出各式視覺 化技術。而有效的視覺化工具可讓使用者迅速得知資料間的組織情形、資料屬性 與個人可控制的部分為何，讓使用者得以在進行點選動作前，即可迅速篩選過濾 掉不必要的資訊，減少搜尋的時間。 此外，認知心理學的「前注意」（Preattentive）理論觀點可賦予資訊視覺化 的成效合理解釋，此理論指出個人會受到某些特定物理表徵吸引且無意識地處 理，在面對資訊量過多的網頁時，若能在第一時間便過濾不必要的內容，亦可減 輕認知負荷的壓力。因此相較於單純的文字敘述選單，使用者應能夠更直覺式地 操作網頁，不需耗費多餘力氣閱讀標籤內容。 因此本研究之目的在探索改進資訊類網站可能的系統操作概念模式，利用資 訊視覺化的概念設計版面，並採用色相、彩度與區塊大小等物理特徵，觀察是否 有助於使用性、個人搜尋資訊、以及減低過量的認知負荷的效果，為設計者提供 一套符合Web2.0 環境下的系統概念模式。
確立 研究方向 提出 研究目的 回顧 相關文獻 確立 研究假設 決定研究方法 與實驗設計 執行實驗與 蒐集資料 資料分析 結論與 後續研究建議
第四節 研究架構與流程
本研究主要在提出傳統網站設計與視覺化網站設計間的差異，研究架構共分 為五章說明。首先在第一章陳述此研究的動機與目的，並提出簡要的分析理論與 研究問題、研究架構、研究貢獻與特殊名詞釋義。第二章則根據研究目的，依序 探討相關文獻與理論發展，從介面設計、Web2.0 介面發展、資訊處理、認知負 荷、前注意、資訊視覺化與認知風格等，進而推演出研究問題。第三章則以研究 問題研擬研究假設，並詳細說明實驗設計與分析方法。第四章將分析蒐集的資 料，以檢驗研究假設。最後，第五章依研究結果提出研究發現與結論，除說明研 研究限制外，亦給予後續研究建議。整體研究流程圖如圖1-1 所示： 圖1-1 研究流程圖第五節 研究貢獻
本研究期待提供以下研究貢獻： 一、本研究檢視並比較 Web1.0 與 Web2.0 使用者的需求差異，嘗試探索未 來Web2.0 情境下，可能之系統概念模式。 二、本研究將認知處理中的前注意（preattentive）概念應用在實際網頁設計 中。過去前注意所引發的「跳出」（Pop-out）效果多應用在廣告研究，探討廣告 應運用何種特質以吸引消費者注意，甚至讓個人不自覺地進行認知處理，進而影 響對廣告的態度。本研究則利用前注意可引發個人無意識自動化處理的特質，將 其運用在網站的介面互動提示中，讓使用者快速地察覺、篩選部分資訊，建立良 好的互動方式，並擴展前注意可應用的領域。 三、本研究從認知處理領域提供資訊視覺化理論支援，嘗試驗證經視覺化處 理呈現的網站可提升使用性的可能成效。第六節 名詞解釋
一、使用性（Usability）
為人機互動領域（Human-computer interaction，HCI）進行介面設計時欲達 成的目標，其意謂在熟悉使用者需求下，設計出易於學習使用，並給予使用者愉 悅認知經驗的介面系統。使用性的品質高低可藉一些準則進行評估，舉凡有效性 （effectiveness）、易學習性（learnability）、有效率（efficiency）、實用性（utility）、 易記憶性（memorability）等（Preece, Rogers & Sharp, 2002）。
二、認知負荷（Cognitive load）
來自於人類資訊處理中「資源有限論」（Limited capacity theory），為心理學 家、教育者及設計者所關注的議題，意指當個人執行某項任務過程中，因任務本 身所需花費的認知空間（capacities）或認知資源（resources）所產生認知系統負 載的狀態，特別是工作記憶（working memory）的部分（宋曜廷，2000）。 三、系統概念模式（Conceptual model）
概念模式為有關系統建議的功能、操作方式與外觀等多重概念，並藉由特定 方式讓使用者瞭解（Preece, Rogers & Sharp, 2002），又可稱為「設計模式」。Norman （1998）指出進行介面設計時，系統概念模式需與「系統形像」（System image） 與「心智模式」（Mental model）兩者進行比對與磨合，當三者所呈現的概念愈趨 於一致時，使用者愈能有效地操作此介面。 四、資訊視覺化（Information visualization） 為一種電腦輔助技術，可將抽象事物的重要概念以視覺化的方式呈現，其目 的在擅用個人的感知與視覺思考能力以處理抽象事物。資訊視覺化研究具有跨學 科的特質，舉凡科學、資訊提取與地理資訊系統皆與其密切相關。資訊視覺化主 要尋求將不具空間、數據特性的資訊以富意義、直覺式的方式呈現，其相關研究 自 1995 年後開始受到重視。 五、前注意（Preattentive） 前注意為注意力處理中個人缺乏對刺激物的意識（awareness），以及無特定 處理目標的部分，為無法自行控制且不需注意力資源的過程。當個人專注於主要 任務，且前意識地（preconsciously）接觸到位於周圍視野內的刺激物時，前注意 處理則會發生。個人會前意識地掃視與分析所有環境中的感官資訊，再決定於積 極處理主要任務的當下是否要將注意力轉移至別處。藉由前注意力的認知處理， 個人可直接透過「平行」（parallel）處理資訊而非「序列」（serial）處理，平行 處理的優點為可不受刺激物的多寡影響，仍快速地察覺主要目標物。
第二章 文獻探討
本研究主要提出一個以資訊視覺化技術為基礎的網站系統介面，並探討使用 者是否能建立相關心智模式，在不增加認知負荷的情形下，達到符合使用性原則 並滿足個人需求。因此本章首先由人機互動領域對介面設計的原理出發，並且提 出目前Web2.0 網站的創新概念模式，其次，由心理學中認知負荷取徑探討個人 進行網頁瀏覽時介面設計引發的問題及解決方式，以作為設計網站的建議；之後 提出認知處理中的前注意概念，以協助個人在大量資訊中快速地聚焦目標，以及 由此所衍生的資訊視覺化技術發展。最後，加入個人差異因素-認知風格說明可 能的影響。第一節 介面設計
一、 心理模式
Norman（1998）指出介面設計乃在進行三者心理模式間的磨合與比對，分 別為「概念模式」（Conceptual model）、「系統形像」（System image）與「心智模 式」（Mental model），其三者間的互動情形如圖 2-1 所示。圖2-1 心智模式、概念模式與系統形像關係 資料來源：Norman（1998）
「概念模式」（Conceptual model）乃基於設計者內心對於產品的整體概念， 即對系統運作方式的看法，又可稱為「設計模式」（Design model）。Norman（1983） 亦指稱概念模式即為設計者的心智模式。Preece、Rogers 與 Sharp（2002）給予 「概念模式」的定義為：關於建議系統的功能、操作方式與外觀等多重概念，並 心智模式 (Mental model) 系統形像 (System image) 設計者 使用者 系統 概念模式 (Mental model)
藉由特定方式讓使用者瞭解。設計者在建構系統時需圍繞著此概念模式，以呈現 精確、具一致性且完整的架構，並以趨近使用者的心智模式作為目標（方裕民， 2003）。 而發想概念模式的過程要從使用者需求想像系統藍圖，並從基本的任務行動 決定適當的互動模式，一旦鎖定系統中可行的互動方式，則要依據具體解決行為 來思考概念模式的設計，因此導出介面可執行的動作、互動風格以及外觀，在此 發想的過程中需逐一檢視設計的優缺點。 另一種設計概念模式的方式為利用「介面隱喻」（Interface metaphor），好處 在於提供一個使用者熟悉的基本知識架構，許多既有的互動範例可作為概念隱喻 的參考。而將概念模式具體實踐的手法包含：概念速寫、腳本製作、情境式描繪 與製作雛型等（Preece, et al., 2002）。
其次，「心智模式」（Mental model）為 Craik 於 1943 年率先提出的概念，指 稱人透過心智模式賦予外在世界解釋，代表個人心中真實或想像的情況，藉由與 外在事件互動的過程轉換至內心認知，再由內部轉換至外在環境中，為一種可不 斷建構的循環過程。心智模式乃儲存於長期記憶之中，並依據短期記憶中的內容 與外界資訊交流更新。Johnson-Laird（1983）則認為心智模式乃由個人遭遇的事 件或接收之訊息的知識所建構，是對系統或任務背景知識之暫存的短期記憶，目 的在解決特定時期的問題，為易於記憶但未必最為正確的記憶模型。 胡祖武（1997）從認知模式運作說明，認為個人在遭遇陌生環境與事物時， 內心會產生一套模型化的概念，用以解釋說明此現象或執行方式，則稱作心智模 式。Farooq 與 Dominick（1988）則改以「認知模式」（Cognitive model）描述個 人完成任務的心智過程。在人機互動領域中，心智模式則指稱為使用者與周遭事 物產生互動，並透過觀察、導引與推理的過程，在內心逐步形成的觀念，此種心 智模式不需精確，但必須可以實際操作，以作為使用者預測和解釋互動行為的基 礎，亦即使用者學習如何使用系統與瞭解系統運作的知識（方裕民，2003;Preece, et al., 2002）。簡單來說，心智模式會受到個人的直覺、經驗與理解能力等特質影 響，以產生獨特的個人操作守則，為經過簡化而模糊的概念。 Norman（1983）指出心智模式具有六種特性：「不完整性」（Incomplete）、「局 限性」（Limited）、「不穩定」（Unstable）、「沒有明確的邊界」（Boundaries）、「不 科學」（Unscientific）、「簡約」（Parsimonious）。由此可知人們有時會採取迷信、 刻板的心智模式，即使他們知道這些模式並非必要或最正確的，且使用者會藉由 心智規劃而省略其餘不必要的歷程。整體而言，心智模式屬於一種認知機制，讓
個人能以一種概論的方式陳述系統樣貌並理解其功能狀態，並預測未來的系統反 應。 「系統形像」（System image）則處於中央溝通的橋樑角色，而設計者將藉 由系統形像建立使用者的「心智模式」，其包含與系統間的互動方式、介面外觀、 系統反應與說明文件等，Norman（1998）則簡單地將系統的可見構造稱之為系 統形像。系統形像需將設計者的概念模式清楚呈現，並達到「透明化」、「一致化」 與「支援化」（方裕民，2003），良善的系統印象除對載入的資訊產生有效的回饋 與反應外，同時還要提供易瞭解、直覺式的互動方式，否則將會導致錯誤的心智 模式。 綜上所述，此三者形成緊密連結的關係，系統概念模式會決定系統的架構與 運作，設計者必需依據概念模式設計易使用、易學習且可順暢運作的系統，而系 統必須傳達適切的系統形像給使用者，協助形成正確的系統概念模式，個人心智 模式則於互動過程中亦同時對系統整體作出詮釋，並採取後續的行動，顯見系統 形像對個人形塑系統知識的重要性。
二、網站導覽設計
呈上所述，網站設計者在進行系統概念模式發想前，首先應得知使用者的既 有知識、執行任務內容與其組織網站內容的慣有方式，也就是其心智模式。再考 量網站需要使用何種有效的互動式導覽手法，良好的網站導覽系統可適當地反應 內容組織架構，整理傳統網站導覽設計約可分六類（Krug, 2006; McCracken & Wolfe, 2004; Szeto, 1997）： （一）導覽列（Navigation Bars） 導覽列將所有連結群組集合呈現在網頁中，導覽列有兩種形式：文字與圖 像，圖像式導覽列顯然具有較強的視覺吸引力，並依然可清楚傳達資訊，然而圖 像式導覽列的傳輸速度較慢、不易更新與維持。其運用書籍慣用的標籤（tab） 概念，供使用者快速跳至某特定類型資訊網頁下。有時設計者會使用圖示（icon） 輔助說明，並會搭配現實生活中的視覺線索隱喻：讓目前正在閱讀的標籤區塊顏 色特別突出，使用者不致於迷失方向，此外，導覽列設計需具一致性且位於固定 的 版 面 位 置 上 。 常 見 使 用 導 覽 列 的 網 站 如 「 博 客 來 網 路 書 店 」 （http://www.books.com.tw）。圖2-2 博客來網路書店 （二）選單（Menus） 此類網站提供各類下拉式子選單以引出資訊內容，選單可用文字或圖像呈 現，其目的在協助使用者「定位」（orientation）、熟悉整體網站架構，藉由呈現 網站資訊的分類選擇，個人可建立對網站規模的初步認知。藉由點選選單的方 式，使用者可快速地跳至第三階層的網頁介面，並逐漸形塑心智地圖（mental map）以協助創造有效的互動導覽方式。 選單式的導覽手法可大幅減低點選次數與下載頁面時間，但有時並非全部選 項可被一次呈現，而且使用者必需將滑鼠移至選單上方，才可看見更次級的選 單，部分使用者可能不擅此操作方式。目前此類以選單為主的導覽形式最適用於 具時間性的資訊網站，舉凡新聞、廣播或常公告事件或條列事項的網站。常見使 用選單工具的網站如「聯合新聞網」（http://udn.com/NEWS/main.html） 圖2-3 聯合新聞網 （三）框架（Frame） 框架技術則是將具有連結、導覽工具的網頁與欲連結的網頁以框架區隔，操 控瀏覽的框架頁不變，此種將導覽與內容分開的作法，可讓設計者不需逐一設定 每一頁的連結程式碼。但由於框架會遮蔽內容頁面的真實大小，致使在列印網頁 時產生困難，或是無法同時列印出來，甚至無法明確地記憶特定網頁的內容，系 統只會記錄主要框架頁的連結，因此，目前商業網站類型己甚少使用此方式。國 內較具代表性的網站為「史萊姆的第一個家」（http://www.slime.com.tw/）。
圖 2-4 史萊姆的第一個家 （四）空間模擬（Tactile Simulation） 此手法乃運用實體空間概念代表整個網站，如房間、建築物或3D 環境，並 可將真實環境的特徵加以延伸發展，此導覽方式則適用於各類資訊類型，亦有助 於使用者釐清物件、資料間的交互關係。雖然使用3D 環境會令傳輸速度變慢， 卻使人更容易操控，使用者得以用視覺化區隔、辨認資訊差異，不需依賴抽象的 點選與指令以到達某處，使用者依據空間概念使其路徑合理化並記憶。國內較具 代表性的網站為「拿坡里披薩」（http://www.0800076666.com.tw/）。 圖2-5 拿坡里炸雞 （五）網站地圖（Site map） 網站地圖直接將網站資訊架構以圖像呈現，部分為互動式影像地圖，使用者 可藉直接點選區塊以瀏覽網站，此種導覽系統需考量圖像處理可能造成下載速度 減慢的問題，而較傾向使用文字式的表格以達相同目的。 （六）搜尋（Searching） 最不受限制的導覽方式即為搜尋引擎，其為以資料庫為主的導覽系統，提供 使用者最直接、已分類組織化的資訊，一般網站甚少單獨使用搜尋引擎此導覽系 統，多半作為輔助的工具，即便在搜尋引擎資料庫網站，亦會提供額外的主題或 階層式連結，常見的搜尋網站為Google（http://www.google.com.tw）。
圖2-6 Google 搜尋引擎 由此可知，網站設計之良莠與導覽系統形態密切相關。框架導覽對於設計者 較方便上手，但因使用者不容易追蹤目前所觀看的子網頁，畫面易顯得雜亂不一 致，所以逐漸被市場淘汰，僅剩部分個人網站會採用此種手法。目前多數的網站 以導覽列搭配選單的組合方式，較複雜的資訊類網站如購物網站、新聞網站，會 於第一層藉由導覽列初步分類，次級連結選項則以選單呈現，如此網頁才不會雜 亂無章，其缺點在於個人需能覺察網站資訊架構（information architecture）有些 微理解才能快速地找到適當連結，而搜尋引擎則提供個人最直接的目標資料，但 個人亦需從多筆資料中逐一篩選，且較無法熟知資源的來源路徑為何，目前為搭 配使用的導覽工具。 Newman 與 Landay（2000）表示網站設計包含三個部分：視覺（visual）設 計、導覽（navigation）與資訊（information）。視覺設計利用色彩、文字、圖像 及符號提升網站的吸引力，導覽設計則旨在建立完整的資訊階層，讓使用者得以 迅速找到目標資訊，資訊設計乃清楚傳達資訊內容，並提升其內容豐富度。整體 而言，三者若設計得當可為此網站增色不少。 綜合上述並整理現今針對網站或網設計之相關研究，可發現三類研究取徑 （Éthier, Hadaya, Talbot, & Cadieux, 2008）：第一類為網站專家根據其專業的知識 所提出的相關設計建議，其相關文獻散見於期刊、專書甚至是專家的個人網站， 所談論的議題包羅萬象，舉凡圖像設計、導覽模式、內容、一致性與架構、效率 性測量與設計策略等。 第二類的網站設計原則來自於傳統的使用者介面設計理論，此類文獻著重於 降 低 個 人 任 務 與 認 知 負 載 ， 並 試 圖 解 決 許 多 使 用 者 會 產 生 的 「 迷 失 」 （disorientation）問題。此取徑的學者傾向使用一些介面模式進行討論，如「選 單排版模式」（Menu Lay-Out Model）、「超連結模式」（the Hypertext Model）、「超 媒體模式」（the Hypermedia Model）與「物件-行動模式」（the Object-Action Interaction Model）等。
最 後 ， 第 三 個 類 別 是 以 使 用 者 經 驗 出 發 探 討 網 站 是 否 符 合 「 使 用 性 」 （usability）原則。Nielsen（2004）以使用性原則的五項基本概念：易學性 （learnability）、效能性（efficiency）、易記性（memorability）、滿意程度（satisfaction） 與從錯誤回復的容易程度（how easy it is to recover from errors），觀察不適當的設 計錯誤。Hassan 與 Li（2005）將 57 個關鍵使用性原則分為七個群組：頁面外觀 （screen appearance）、內容（content）、近用性（accessibility）、導覽（navigation）、 媒體運用（media use）、互動性（interactivity）與一致性（consistency）。Matera, Rizzo 與 Carughi（2006）則將之簡化為兩個取徑探討網站設計原則：內容組織方式， 以及如何利用有效的導覽、指向工具協助個人獲得資訊。
三、Web2.0 設計趨勢
Web2.0 世代基於使用者任務及活動性質變異，在介面設計上已陸續衍生許 多創新呈現技術與版面。Hunt（2006）指出目前 Web2.0 網站設計的發展趨勢如 下： 1.設計者將更針對網站目標進行設計，透過少量且適當的視覺元素指引使用 者的注意力。 2.系統使用少量的字彙即可傳達大量訊息，並且善用比喻以營造特定感受。 3.推翻了設計者無法推測使用者需求的想法。綜上所述，Web2.0 設計所著重的概念即為「聚焦」（focused）、「乾淨」（clean） 與「簡易」（simple）。此外，亦有學者認為在 Web2.0 環境下，新型態網站的資 訊設計應朝向更「簡易」（simplicity）、更「社交性」（social）發展，進而帶動另 一種新的瀏覽模式（Kroski, 2007）。 （一）簡易化設計 此種網站簡易化的趨勢已反應至現今的網頁設計與風格上，過去設計者習慣 將所有的資訊儘可能地放進網頁版面中，然而目前的網站設計則力圖減少不必要 的內容，以呈現清楚與簡單的介面給使用者，並將個人的目光停留在重要資訊 上，而非把所有資訊一次攤在陽光下展示。簡易化設計的原則為在不影響執行效 率下，移除不必要的物件，以及考慮其他更簡易的解決方案（Hunt, 2006）。 符合簡易化設計的相關應用眾多，舉凡中心化設計（Centered Design）、加 大字體（Large Fonts）、強烈色彩（Strong Colors）、互補色（Complementary Colors）、簡易圖示（Simple Icons）、留白（Whitespace）、星芒設計（Starbursts） 等，皆屬於此類範疇內。
（二）社交性設計 網站開始將照片、影片、新聞等原先不具社交性質的東西社會化，此傾向衍 生出協同式專業管理軟體與檔案共用軟體的應用，在此情況下，使用者能夠直接 與網站中的資訊互動，導致網站介面設計均需考量社交性的功能。而針對本身具 社交性的網站而言，因為此類社群網站即圍繞在使用者的瀏覽與活動記錄上，在 進行設計時亦需要加入社交性的功能。 而社交性設計所衍生的應用包含：評論（Commenting）、評分與審閱（Rating & Reviewing）、轉寄（Send to a Friend）、共用（Share）、加入最愛（Subscribe）、 儲存（Save）等。藉由這些相關技術，使用者可更快速地與外界進行串連、彼此 交流與互動。 （三）瀏覽方式改變 過去使用者只能依照設計者所規劃的方式瀏覽網站，如今網站提供更自然合 理的瀏覽方式，而大部分的方式為提供搜尋工具，運用視覺化元素強調重要資訊 等，讓講求效率與需同時執行多種任務的使用者可立即獲得資訊。Kroski（2007） 便整理出目前常見的幾類創新網站瀏覽模式如下： 表2-1 Web2.0 的創新網站瀏覽模式 瀏覽方式 說明 範例 依使用者 （By users） 使 用 者 不 僅 單 純 搜 尋資訊，亦關心與自 己 有 共 通 點 的 其 他 使用者。 依標籤 （The tag cloud）
提 供 目 前 熱 門 的 關 鍵字標籤連結。 依排行 （The top） 依 據 某 特 定 性 質 的 排行將資訊分類，以 便 使 用 者 依 需 求 點 選瀏覽。 提供相關資訊連結 （Related Information） 提 供 內 文 中 某 些 特 定 關 鍵 字 額 外 的 相 關連結。
熱感地圖 （Heat maps） 利 用 溫 度 差 異 的 視 覺 方 式 標 定 網 站 的 區塊，以協助使用者 汲取重要資訊。 關係地圖 （Relationship maps） 利 用 視 覺 化 呈 現 手 法 表 達 站 內 資 訊 間 的關係。 時間工具 （Time tools） 網 站 依 時 間 順 序 呈 現資訊，並適時透過 視 覺 化 讓 人 直 覺 地 操作。 地圖 （Maps） 利 用 像 地 圖 般 形 態 將資訊重疊呈現，為 新 瀏 覽 模 式 的 常 見 概念，但較不適用於 電子商務類的網站。 小工具 （Widgets） 使 用 者 可 以 選 擇 多 種 慣 用 的 小 工 具 嵌 入網頁中，網站內容 不 僅 是 單 純 的 文 字，而是多種服務的 集合。 跨界合作 （Mashups） 此 類 網 站 提 供 者 讓 使 用 者 自 行 混 合 重 組各類服務，以創造 個 人 專 屬 的 瀏 覽 模 式。 資料來源：Kroski（2007）
上述提出的幾種瀏覽方式多運用視覺元素強調重要資訊，讓使用者的注意力 受到牽引，因而快速得知資訊內容的排行、關聯性，藉由直覺化的比較方式搜尋 資訊，可省去閱讀文字說明的時間。
四、小結
以 Norman（1998）所提倡的心理模式為基礎，無論一般軟、硬體介面或網 站設計，良善的介面皆以「使用者」為中心，將個人的目標與需求列為第一考量， 進而藉系統形像做為概念模式與心智模式的溝通橋樑，一旦三者達到某種合諧一 致的程度，此系統將可運作無誤。 完整的系統概念模式可令使用者清楚明瞭整體系統架構，而網站的導覽系統 更是指引個人資訊所在的重要工具。現今網站導覽系統的設計如上述所示，本研 究將之重新歸納為「導覽列」、「選單」「框架」、「空間模擬」、「網站地圖」、「搜 尋」六類，在實用性與編修便利性的考量下，逐漸產生不適用及汰換的情形，目 前框架及網站地圖模式甚少出現在一般商業網站中，空間模擬的導覽系統則受限 於網站形象與資訊類型而選擇性使用，目前仍以導覽列、選單配合搜尋引擎的呈 現方式居多，換言之，使用者對其導覽模式已非常熟悉，本研究將此統稱為「類 目選單」，其特色在將資訊分類以文字呈現。 部分學者觀察到Web2.0 發展下網站設計趨勢的改變，但這些創新瀏覽模式 目前除少有相關文獻支持驗證，也未被業界廣泛應用，多數僅以輔助性的方式搭 配傳統導覽模式呈現。根據過往網站設計研究取徑可知，大部分的研究仍侷限於 選單類型、內容排版、互動性多寡等議題，並尋求使用性原則的正面支援。 而當 Web2.0 時代來臨，使用者操作網站的目的與需求已和以往 Web1.0 時 期大不相同，簡單直覺性的介面設計強調立即突顯重要資訊，以及隱藏複雜網路 技術與提升可接近性，讓使用者可輕鬆操作與學習。Web2.0 的設計取徑試圖運 用視覺元素吸引個人注意力，減少頁面中的文字量，採取隱喻或配對的手法傳達 相關訊息，換言之，即使網站中承載的資訊量很高，使用者較不需逐一搜索重要 資訊所在位置亦能迅速聚焦，此大量運用「前注意」（Preattentive）特徵。 王開立（2000）肯定視覺設計對使用者瀏覽資訊的助益，認為人類無時無刻 接收外界大量資訊，唯有能引發個人注意力的資訊才具意義，而圖像設計或視覺 標記（Visual Marker）則可達成此效果（謝宜娟，2006）。因此，本研究嘗試提 出一種新型的操作模式，且根據上述說明發現視覺元素可協助個人理解資訊，型 塑心智模式，因此本研究從前注意特徵的角度提出另一種「色彩區塊選單」，檢 視不同選單的系統形像與使用者心智模式的互動情形。第二節 資訊處理與認知負荷
由此可知，目前網站設計研究趨勢和現今技術發展產生落差，一再於傳統系 統概念模式中尋求有效策略，恐無法滿足Web2.0 趨勢下的使用者需求，亦讓網 站設計研究的發展空間受限。此節將回歸認知取徑的資訊處理文獻，探究使用者 在處理資訊時會遭遇的困境-認知負荷，以尋求適當的具體解決方案以提出可行 的網站介面設計。一、資訊處理與資源有限論
過 去 30 年 間 學 者 已 針 對 不 同 媒 體 內 容 發 展 各 種 「 資 訊 處 理 模 式 」 （Information-Processing Models），以探討個人接收、處理訊息的歷程（Eysenck, 1993; Lachman, Lachman, & Butterfield, 1979）。其理論皆植基於兩項前提，第一， 個人為資訊處理者。其首要任務為接收刺激物，並將其轉換為「心智表徵」（Mental representation）以進行心智處理，最後將其重製以改變形式或保留原樣。第二， 個人處理資源的能力有限。處理資訊需要耗費「心智資源」（Mental resource）， 但是個人擁有有限、甚至是固定的心智資源容量，即使個人可在同時處理一個以 上的資訊，但當所有資源皆被用於處理內容時，則必需釋放出部分空間才得以吸 收其餘資訊（Lang, 2000）。 而資訊處理過程包含各種同時進行的次級處理過程，針對刺激物的次級處理 部分為「自動化歷程」（Automatic processes），以及「控制歷程」（Controlled processes） （Shiffrin & Schneider, 1977）。Sternberg（2003）指出自動化歷程不 涉及意識控制、需要很少或不需費力與意圖、可平行的處理且快速。相對之下， 控制歷程不僅可有意識的取得，還需要意識控制，運作方式為序列式的且較費 時。Posner 與 Snyder（1975）亦表示自動化歷程為不被意識的、沒有意圖的且消 耗很少注意力資源。 因此，可整理兩者的處理歷程差異如下。一般個人在執行陌生、困難的任務 時會採取控制歷程，而藉由反覆練習可產生自動化（Automatization）的效果， 改以自動化歷程處理相同動作（LaBerge, 1990）。由此可見，完全的自動化與完 全的控制歷程間可能為連續的變化。表2-2 控制與自動化歷程 特性 控制歷程 自動化歷程 努力程度 需刻意努力 需要很少或不需刻意的努力 有意識覺知程度 需完全的意識覺知 通常發生在有意識覺知之外， 但有些自動化歷程可以為意識 所取得 注意力資源 花費很多注意力資源 花費的注意力資源極低 處理方式 以序列方式逐一處理 以平行方式，可同時處理多個 處理速度 相對較慢 相對較快 處理層次 相對高層次的認知處理 相對低層次的認知處理 資料來源：Sternberg（2003） 資 訊 處 理 模 式 指 出 個 人 會 不 斷 地 執 行 三 種 資 訊 處 理 過 程 ：（1 ） 編 碼 （encoding）、（2）儲存（storage）與（3）提取（retrieval）。僅管在文獻上此三 種呈線性的方式運作，但實際上人類大腦通常可在同時不斷、重覆地進行此三者 動作（Lang, 2000）。 （一）編碼（Encoding） 將環境中的訊息（如網頁內容）進行編碼並輸入個人腦中。而從環境刺激物 轉換至個人的心智表徵需經歷三個階段，首先，訊息刺激要經由眼、耳、鼻等「感 官受器」（sensory receptor）接收，稱為「感知」（perception）；之後感官受器所 蒐集的資訊會進入不同的「感官儲存器」（sensory store）中，且針對不同的感官 訊息有不同的儲存器配合，儲存器數量通常不受限制但僅有短暫的時效，視覺記 憶約300 毫秒，而聽覺記憶約可達 4 至 5 秒，當資訊沒有被進一步地處理時，則 舊資訊會被新資訊覆蓋且遺失。 當個人接觸到媒體訊息時，這些刺激則會自動地進入感官儲存器，其所承載 的資訊會遠超出個人有意識注意的資訊量，卻只有片段的資訊會進入短期記憶或 工作記憶中。換言之，編碼包含兩個階段，先從感官儲存器中的資訊選取部分片 段資訊，再將其轉換成工作記憶中活化的心智表徵。而這些心智表徵並非對於資 訊的真實、正確的表徵，而是受個人目的、既有知識，甚至環境影響，導致個人 選取某特定資訊元素以形塑心智表徵。 而在選擇將何種資訊片段轉為心智表徵的過程乃同時由自動化歷程與控制 歷程所趨動。控制歷程乃反應個人的目的，當個人決定注意環境中穿著特定顏色 衣服的其他人時，則此顏色會不斷地被篩選並進入短期記憶中。相較之下，自動 化歷程可被刺激物單純觸發而不具意圖與意識。而與個人目的或需求密切相關的
資訊，以及突發性的訊息改變皆可引發自動化歷程處理（Graham, 1997; Ohman, 1997）。
（二）儲存（Storage）
關聯式網絡模式（Associative network model）認為個人的記憶會依相關性與 其他部分記憶連結，當正在使用某個記憶時，記憶網絡即被活化，此時個人會將 新舊的心智表徵間建立關聯，這個連結的過程即稱之為儲存，當兩者間的聯結性 愈強，新的資訊可被儲存地愈完整。 （三）提取（Retrieval） 提取乃於關聯式記憶網絡中搜尋某特定資訊，並再次於工作記憶中活化處 理，提取階段不僅被視作一種結果，更是個持續運作的過程，因為個人在接收訊 息時，為求理解與儲存，會於長期記憶中活化、提取相關的既存知識。 上述三個處理階段可被粗略或完善地執行，而某階段執行完善的程度會連帶 影響同時進行與下個階段的執行完整性，最終，個人的記憶即為此三個階段結果 的合成物。 個人是否能完整地處理訊息，取決於此訊息被編碼、儲存與提取的程度，其 中一項重要因素為個人是否分配足夠的資源於此內容上。Lang 與 Basil（1998） 基於「資源有限論」（Limited capacity theory）將心智資源細分為四種類型加以解 釋，分別為（1）任務所需資源（Resources required）、（2）已分配資源（Resources allocated）、（3）剩餘資源（Resources remaining）、（4）可再利用資源（Available resources）。
此四種心智資源間的關係可用購物行為予以解釋。消費者所擁有金額可視為 全部的資源量（Total resource pool），個人欲購買的商品價格即為任務所需資源 （Resources required），最後支付給店家的金額為分配至任務的資源（Resource allocated），此時，錢包中所剩餘的金額即為剩餘可用資源（Resource remaining）， 而支付金額與商品價格間的落差即為可再利用資源（Available resources）。此四 者之間的關係可由下列公式表示（Lang, Bradley, Park, Shin, & Chung, 2006）：
剩餘資源（Resources remaining） = 總資源量
-
已分配資源 可再利用資源（Available resources） = 已分配資源-
任務所需資源Lang（2000）指出在兩種狀況下個人無法完整地處理資訊，第一，個人可能 選擇花費少於任務本身所需的資源量處理；或者，處理訊息所需要資源量遠超過 個人能力所及，因此導致兩者間產生強烈落差，而無法完整地處理訊息。換言之， 即當可再利用資源（Available resources）達到負值時，將會讓個人產生「認知負 荷」（Cognitive load），導致無法分配足夠的資源處理主要任務，使得執行任務的 成效降低，若主要任務為進行編碼時，其編碼成效-「辨認」4（Recognition）記 憶績效則會明顯降低。
二、認知負荷的定義
國內外學者對認知負荷之定義亦多有方討論，本研究將較重要的定義整理如 下：Paas（1992）將認知負荷視作一個多向度的構念，又可包含「心智負荷」（mental load）與「心智努力」（mentalk effort）兩項影響因素。若個人覺得任務或學習項 目的困難度很高，或是體認在心智上越需要努力時，則會導致愈大的認知負荷。 Sweller（1988）則指出認知負荷為：「將特定工作加諸在個人認知系統上時，所 產生的負荷量」。此外，認知負荷和短期記憶中的記憶單位數密切相關，若個人 存放大量的資訊於短期記憶中，將易造成「過度」的認知負荷。 國內黃克文（1996）則以資訊處理的角度說明，指出「認知負荷」是個人於 接收、處理與運用的過程中，因訊息內容、學習環境、傳輸環境與互動方式等因 素，超越個人所能應付的認知能力，在當下的「生理」與「心理」皆產生負擔、 壓力、苦惱與不適的狀態。而宋曜廷（2000）認為「認知負荷」是當執行某項任 務過程中，因任務本身所需花費的認知空間（capacities）或認知資源（resources） 所產生認知系統負載的狀態，特別是「工作記憶」（Working memory）的部分。 陳密桃（2003）亦指出，「認知負荷」即為個人在執行某些任務、作業及工作時， 個人所感知的心智負荷與心智努力之負載狀態，換言之，「認知負荷」即指工作 記憶的負荷（Working memory load）。因此，誠如上述討論所示，認知負荷來自於人類資訊處理中「資源有限論」 （Limited capacity theory），一旦花費過多心力在理解文字內容，將會降低可分派 至理解（comprehension）活動的資源（Navon & Gopher, 1979; Schneider, Dumais, & Shiffrin, 1984）。「認知負荷」即為個人在面對需學習的項目或執行的任務時， 對其困難度的感知，以及評估需花費的心智努力間的交互影響，若超出個人所可 承受的短期記憶運作量，則會在生理與心理層面造成負面效應（楊培渝，2006）。 4 「辨認」為常用的一種記憶測量方法，是搜尋長期記憶以找出與呈現資訊一致或近似知識的過 程。實際執行時先給予受測者觀看部分資訊，過一段時間後，再提供資訊列表，其中有一部分項 目是之前曾出現的，並請受測者將正確的內容指認出來，形式多以選擇題或是非題呈現。
三、資訊搜尋與認知負荷
（一）資訊搜尋歷程 針對資訊搜尋的認知歷程，Rouet 與 Tricot（1996）提出的「認知模式」 （Cognitive model）考量到複雜認知活動中的各面向，例如目標的完整程度（模 糊或精確），汲取資訊的來源為單一或多種，以及個人的使用經驗程度。此認知 模 式 表 示 資 訊 搜 尋 為 一 個 不 斷 循 環 的 過 程 ， 且 類 似 文 字 理 解 （text comprehension）、問題解決（problem-solving）與政策決定（decision-making）活 動。整體而言，此認知模式包含三個階段： 1.評估（Evaluation） 此階段即為確認所接收的資訊是否與目標相關。個人通常會面臨三種情 形：第一，資訊完全符合個人的目標，因此搜尋活動就此結束；第二，資訊 部分符合目標，此時個人必需評斷所選資訊與目標間的落差，必要時修正標 準重新來過；最後，資訊也可能與目標完全不相關，個人勢必要修正評估搜 尋任務，重新執行一次搜尋過程。 2.選擇（Selection） 此階段個人會同時保有之前選擇的資訊與目前工作記憶正處理的資 訊，並選擇認為最正確的資訊組合。 3.處理（Processing） 此階段個人試圖從資訊組合中的特殊性（如文字、圖像、動畫或聲音） 理解資訊內容。 綜上所述，資訊搜尋可謂一種耗費大量認知資源的認知活動。而認知活動可 藉由訊息被記憶的品質與執行任務時耗費的認知處理量進行評估。此外，任務中 的「資訊特質」及「個人差異」對認知活動產生很大影響（Chevalier & Kicka, 2006）。 以下將探討資訊特質與認知負荷間的關連性。 （二）認知負荷類型 認知負荷理論強調基模（Schema）5 建構與自動化處理，進而促進解決問題 5 基模(schema)為知識表徵(knowledge representation)的一種。為個人用以認識世界的基本模式， 由經驗、意識與多種概念組合而成並不斷改變，並儲存於個人記憶系統之中，當面臨外在刺激時， 個人會運用基模對應、理解環境。之效率。形成認知負荷的來源相當多，經文獻整理後可將認知負荷類型分為三種 （Sweller, Van Merrienboer, & Paas, 1998）：
1.內在認知負荷（Intrinsic cognitive load）
內在認知負荷會受訊息本身困難程度與個人既有的先備知識（Prior knowledge）6 交互影響，此部分較無法由訊息設計者所改變與控制。當個人 不需參照其他資訊即可瞭解內容時，則可降低工作記憶的負荷量，相反的， 若個人的長期記憶中缺少相關的基模結構時，必需於工作記憶中各自處理這 些資訊，導致較不易理解訊息內容，使內在認知負荷提高。
2.外在認知負荷（Extraneous cognitive load）
當訊息設計與呈現方式忽略了工作記憶量的限制時，會使訊息接收者產
生認知層面的負擔，即為「外在認知負荷」。由於此類認知負荷為外在附加
的，不同於內在負荷為不可改變，外在認知負荷可靠設計者修正其多媒體內 容進行改善。
3.關聯認知負荷（Germane cognitive load）
此部分為基模建構的過程相關，可透過資訊內容的設計使人專注於學習 以建立基模，為一種輔助的效果，亦可視作外在認知負荷的一部分。當內在 認知負荷、外在認知負荷的負荷量不超出工作記憶的限制時，適當加入關聯 認知負荷可有助於學習。 綜上所述，個人在面對陌生的環境與介面時，也必需運用過去的先備知識進 行理解，若無法提取相關的基模時，則需佔用工作記憶容量進行各別處理，並重 新將新資訊整合至舊有基模之中，以提升其完整性。因此，個人在使用一項新的 系統介面時，亦可視為另一種學習的過程。依據上述三種認知負荷類型可知，當 引起的內在認知負荷較高時，必需藉由介面設計降低外在認知負荷，適時運用關 聯認知負荷輔助建立系統操作基模。 以網站設計而言，目前資訊類網站普遍包含相當龐大的文字與圖片資料，與 傳統平面印刷品不同之處在於，資訊類網站除能提供文字、圖片外，還可讓讀者 瀏覽影片並進行線上討論，並且利用搜尋與超連結的方式快速選擇欲觀看的內 容。亦即，使用者在首次進入一個資訊類網站時需處理眾多資訊，若面臨架構設 計與過去使用習慣相異時，當長期記憶中缺乏對此類介面的認知基模，會不斷於 工作記憶中搜索相關的知識，以協助個人流暢地操作，卻又因認知負荷增加而阻 礙學習的過程。 6 為已內化至個人心中的既有知識。
