購物網站瀏覽對使用者體驗影響之探討－以產品選單與介面複雜度為實驗因子

全文

(1)國立臺灣師範大學管理學院管理研究所碩士論文 Graduate Institute of Management College of Management. National Taiwan Normal University Master’s Thesis. 購物網站瀏覽對使用者體驗影響之探討－以產品選單與介面複雜度為實驗因子. Exploring the Impact of Shopping Website Browsing on User Experience: Using Product Menu and Interface Complexity as Experimental Factors. 呂佳臻 Lu, Chia-Chen 指導教授：董澤平博士. 中華民國一○九年 8 月 August, 2020.

(2) 摘要現代人的消費型態越來越多樣化，隨著網路購物科技的興起，消費者與網路購物的第一溝通橋梁便是購物網頁平台的介面。本研究將結合網購網站介面與使用者體驗，探討現今充斥大量資訊的購物網站介面對使用者取向的影響，本研究以目前網路常見之購物網站架構，作為此次實驗基礎。本研究首先了解購物網站首頁介面不同的產品分類方式選單，再以兩階段 2⨯2 實驗設計，針對不同使用者訪問模式進行探討：(1)目的性瀏覽與(2)無目的性瀏覽。前者以 Cogulator 建模工具衡量受測目的性使用之步驟時間、工作記憶負荷；後者以使用者體驗問卷量化受測者實驗操作結果。分別以圖標 Icons、文標 Labels 與不同高低複雜度作為實驗因子，模擬四種線上購物網站介面原型。分析結果發現產品選單確實能夠影響使用者體驗，但發現台灣人普遍對於文標 Labels 的產品選單給予較高的評價，這可能與台灣常見的線上購物網站環境有關。使用者體驗與網站的後續使用性也呈現正向相關，使用者的感受與網站的回訪有正向的關聯性，但產品選單並不會因為整個體驗而促進網站的使用性，而是局部性的。而網頁介面的複雜度也確實會影響使用者對於網站介面環境的認知、理解產生影響。本研究認為儘管文標 Labels 的產品選單有較高的平均數，但圖標 Icons 產品選單平均數並沒有差太多，還是具有網站的導覽功能，就算未來購物網站形式轉換，使用者對於圖標的選單還是能夠快速學習，能夠成功引導消費者進入到所需的產品頁。. 關鍵字：使用者介面、使用者體驗、購物網站、圖標、網頁複雜度、選單. I.

(3) Abstract The consumption patterns of modern people are becoming more and more diverse. With the rise of online shopping technology, the first communication bridge between consumers and online shopping is the interface of the shopping website. This research will combine the online shopping platform interface and user experience to explore the impact of the current shopping website interface that is full of information on user orientation. This research uses the current online shopping website architecture as the basis of this experiment. In this research, we first understand the different product classification menus on the homepage interface of the shopping website, and then uses a two-stage 2⨯2 experimental design to explore different user access patterns: (1) purposeful browsing and (2) purposeless browsing. The former uses the Cogulator modeling tool to measure the step time and working memory load of the tested purposeful use; the latter uses the user experience questionnaire to quantify the experimental operation results of the subjects. Using icons, labels and different levels of complexity as experimental factors, respectively, four online shopping website interface prototypes are simulated. The analysis results found that the product menu can indeed affect the user experience, but it is found that Taiwanese generally give a higher evaluation to the product menu of the label, which may be related to the environment of common online shopping websites in Taiwan. The user experience and the subsequent usability of the website are also positively correlated. The user’s feelings are positively related to the return visits of the website, but the product menu does not promote the usability of the website because of the entire experience, but is local of. The complexity of the web interface will indeed affect users' cognition and understanding of the environment of the web interface. This study believes that although the labels menu has a high average number, the average number of icon product menus is not much different, and it still has a website navigation function. Even if the form of the shopping website changes in the future, the user can quickly learn the menu of icons, and can successfully guide consumers to the desired product page. Keywords: User Interface, User Experience, Shopping Website, Icons, Webpage Complexity, Menu II.

(4) 目錄摘要................................................................................................................................ I Abstract ......................................................................................................................... II 目錄.............................................................................................................................. III 表目錄........................................................................................................................... V 圖目錄........................................................................................................................ VII 第一章. 緒論............................................................................................................ 1. 第一節. 研究背景............................................................................................ 1. 第二節. 研究動機與目的................................................................................ 2. 第三節. 研究目的............................................................................................ 2. 第四節. 研究範圍............................................................................................ 3. 第二章. 文獻探討.................................................................................................... 4. 第一節. 使用者體驗與使用者介面................................................................ 4. 第二節. 圖標與文字標示................................................................................ 7. 第三節. 人機互動與網頁複雜度.................................................................... 9. 第三章. 研究方法.................................................................................................. 15. 第一節. 研究架構.......................................................................................... 15. 第二節. 研究流程.......................................................................................... 18. 第三節. 研究變數.......................................................................................... 19. 第四節. 實驗任務設計.................................................................................. 24. 第五節. 實驗樣本.......................................................................................... 26. 第六節. 實驗流程.......................................................................................... 26. 第四章. 實證分析.................................................................................................. 27. 第一節. 第一階段實驗結果.......................................................................... 27. 第二節. 第二階段實驗結果.......................................................................... 28. 第三節. 研究發現與討論.............................................................................. 39. 第五章. 結論與建議.............................................................................................. 43. 第一節. 研究結論.......................................................................................... 43. 第二節. 管理意涵.......................................................................................... 46 III.

(5) 第三節. 研究限制與建議.............................................................................. 47. 第四節. 研究貢獻.......................................................................................... 47. 文獻參考...................................................................................................................... 49 附錄一. 問卷設計.................................................................................................. 53. 附錄二. 購物網站原型.......................................................................................... 56. 附錄三. Cogulator 模擬指令與結果..................................................................... 58. IV.

(6) 表目錄表 1-1 五大購物平台網站流量比較 ........................................................................... 1 表 2-1 使用者體驗量表尺度與內容 ........................................................................... 5 表 2-2 HCI 的三種研究問題 ..................................................................................... 10 表 2-3 GOMS 模型 ..................................................................................................... 13 表 3-1 低複雜度與高複雜度介面 ............................................................................ 21 表 3-2 四種實驗購物網站 Prototype ........................................................................ 24 表 3-3 一階實驗任務 ................................................................................................ 25 表 4-1 Cogulator 模擬結果 ........................................................................................ 27 表 4-2 第一階段實驗假說結果 ................................................................................ 28 表 4-3 受測者使用網路購物平台頻率 ..................................................................... 28 表 4-4 受測者使用網路購物平台經驗比率 ............................................................. 29 表 4-5 描述性統計 .................................................................................................... 29 表 4-6 多變量檢定 .................................................................................................... 30 表 4-7 Two-way MANOVA 分析摘要 ...................................................................... 31 表 4-8 產品分類選單之邊緣平均數 ........................................................................ 32 表 4-9 網頁複雜度之邊緣平均數 ............................................................................ 32 表 4-10 產品分類選單與網頁複雜度假說檢定結果 .............................................. 33 表 4-11 使用者體驗與使用性假說檢定結果 ........................................................... 34 表 4-12 Pearson 相關係數矩陣.................................................................................. 35 表 4-13 Bootstrap 間接效果結果(含干擾變數) ....................................................... 36 表 4-14 Bootstrap 直接效果結果(含干擾變數) ....................................................... 36 表 4-15 Bootstrap 間接效果結果(不含干擾變數) ................................................... 37 表 4-16 Bootstrap 直接效果結果(不含干擾變數) ................................................... 37 表 4-17 Bootstrap 總效果結果(不含干擾變數) ....................................................... 37 表 4-18 中介效果假說檢定結果 .............................................................................. 38 表 4-19 產品分類選單為文標 Labels 下之平均數比較.......................................... 40 表 5-1 PChome 線上購物首頁與次頁 ...................................................................... 44 表 5-2 圖標 Icons 實驗線稿 Wireframes .................................................................. 45 V.

(7) 表 5-3 選單廣告之結合 ............................................................................................ 46. VI.

(8) 圖目錄圖 2-1 使用者經驗的三個面向 ................................................................................... 4 圖 2-2 UEQ 尺度結構 .................................................................................................. 6 圖 2-3 UX 與 UI 之間的從屬關係 .............................................................................. 7 圖 2-4 圖標的分類呈現 ............................................................................................... 8 圖 2-5 HCI 研究概念 ................................................................................................... 9 圖 2-6 HCI 研究問題架構 ........................................................................................... 9 圖 2-7 首頁的複雜度與溝通效率的預測關係 ......................................................... 11 圖 2-8 GOMS 模型結構 ............................................................................................. 13 圖 2-9 Cogulator 甘特圖 ............................................................................................ 14 圖 3-1 第一階段研究架構 ......................................................................................... 15 圖 3-2 第二階段研究架構 ......................................................................................... 16 圖 3-3 研究流程 ......................................................................................................... 18 圖 3-4 eBay 產品分類選單 ........................................................................................ 19 圖 3-5 蝦皮產品分類選單 ........................................................................................ 19 圖 3-6 momo 購物網產品分類選單 .......................................................................... 20 圖 3-7 yahoo 購物中心產品分類選單 ...................................................................... 20 圖 3-8 購物網站首頁複雜度分類象限 .................................................................... 21 圖 3-9 二階實驗新增頁面與任務互動 .................................................................... 26 圖 3-10 受測者實驗流程 .......................................................................................... 26 圖 4-1 Labels ⨯ LC 模擬結果 ................................................................................... 27 圖 4-2 Labels ⨯ HC 模擬結果 .................................................................................. 27 圖 5-1 eBay 目前之產品分類選單形式 .................................................................... 47. VII.

(9) 第一章緒論第一節. 研究背景. 隨著網路購物的興起，電商市場開始變的競爭起來，消費者之於網路購物平台的選擇也越來越多，下表利用 SimilarWeb 競品網站分析工具，可以發現網路購物平台之月造訪量可達到 30 億不等，平均瀏覽時間大約 5 至 8 分鐘，平均瀏覽頁數可從 7 至 10 頁。現今的消費者幾乎可以在不受時空的限制下盡情享受購物的歡樂，對於網路購物平台的選擇更是形形色色，為了吸引更多的消費族群，這些平台開始在網頁上增加其魅力與整體印象，為消費者塑造一個良好的購物體驗，而在消費者大量的造訪與瀏覽這些網頁之下，逐漸使網頁易讀性成為一個重要的課題。表 1-1 五大購物平台網站流量比較. 台灣五大購物平台 M:million 蝦皮 Pchome 購物平台*1 露天拍賣 momo 購物平台*2 Yahoo 奇摩購物平台*3 註:. 1. 2. 3. 4. 5.. 總訪問流量 116.20M 94.50M 93.18M 88.34M 82.16M. 月訪問流量 38.73M 31.50M 31.06M 29.45M 27.39M. 平均瀏覽時間 08:44 06:22 07:01 05:21 06:16. 平均瀏覽頁數 10.47 6.43 8.39 6.17 7.45. 總訪問流量排名 1 2 3 4 5. PChome 購物平台流量為總和 PChome24H 購物、PChome 線上購物、PChome 商店街和 Pchome 購物中心之所有流量，平均瀏覽時間與瀏覽頁數則參考最大數值。 momo 購物平台之流量為總和 momo 購物網與 momo 摩天商城之所有流量，平均瀏覽時間與瀏覽頁數則參考最大數值。 Yahoo 奇摩購物平台流量為總和 Yahoo 奇摩拍賣、Yahoo 奇摩購物中心、Yahoo 奇摩超級商城之所有流量，平均瀏覽時間與瀏覽頁數則參考最大數值。統計時間:2019/8-10 資料來源:本研究自行整理. 科技的日新月異使網頁的呈現與以往開始產生變化，傳統網站大多重視內容大於操作介面，當使用者面對這樣的介面時通常會對過多的資訊感到挫折。如今社會與企業開始逐漸重視使用者經驗，網路服務開始從使用者的角度去著想，去補足傳統網路服務規劃上的不足。以大型網站來說，輕微的使用者經驗，會影響使用者對於網站的觀感，問題積少成多，甚至可能使客戶轉向競爭對手(彭其捷, 2016)。 1.

(10) 而台灣目前最常見的線上購物網站如，PChome、yahoo 拍賣、露天拍賣等等，網頁介面的資訊量都相當的繁雜，廣告量也相當的豐富。對於現在的世代來說，線上購物對每個人來說都是茶餘飯後、尋常不已，使用的頻率相當高。當這些購物網站充斥在每個人的生活周遭，購物網站更應該以消費者的角度去思考其使用性，繁複的介面、功能性不高的指標都會在造成使用者困擾，但現今台灣的線上購物網站注意到這一塊的卻不多，線上購物網站以台灣來可以算是遍地開花的，但不斷與時俱進的卻很少，若是能進一步以消費者為考量，不僅能提供消費者購物的方便，也能為自身品牌創造更多附加價值。. 第二節. 研究動機與目的. 各家網路購物平台的風格各有不同，在網頁上的資訊豐富度與流程的設計上也相去甚遠。藉由如 PChome 等傳統型網頁設計購物平台及蝦皮等新興電商以 mobile first 為網頁設計的購物平台兩者之間的差異作為比較，探討不同的分類方式是否能夠提供消費者更高的使用者體驗。前者以文字作為分類模式，後者則以圖標作為分類模式，Cheng and Patterson (2007)指出正確在介面上使用圖標可降低系統複雜性，並幫助用戶更輕鬆地與系統互動，但由於研究不足以及網站歷史相對較短，也建議未來研究可以從主觀評估和經驗對識別圖標使用情況著手。而現代人幾乎都有網購的經驗，本研究希望透過從使用購物網站的過程切入探討介面識別與體驗。當台灣的消費者進入到購物網站時，往往看到的都是資訊複雜的頁面，而通常消費者進到網站都具有目的性，想要尋找或購買某件商品，繁複雜亂的介面通常導致消費者在購物過程中直接使用搜尋欄進行搜索，這樣不僅整個介面沒有起到刺激消費者的效果，或是引起消費者的注意。過度複雜的介面導致使用性降低與如何提升介面的操作體驗和使用性滿意度，是本研究所要探討的。. 第三節. 研究目的. 本研究目的在於將產品分類選單結合使用者體驗，賦予產品分類選單更多意義，重新發揮介面的核心價值。同時探討，產品選單能否更進一步幫助使用者在瀏覽操作其介面，以及其可改善與提升的功能性，並衡量使用者在使用的過程所 2.

(11) 產生的感受。在諸多研究表明，雜亂的介面會影響消費者使用上的心情與購買行為(Deng & Poole, 2010; Geissler, Zinkhan, & Watson, 2006; King, Lazard, & White, 2019; Menon & Kahn, 2002)。研究以使用者為中心切入探討介面之影響，結合 Cogulator 運用在介面的建模工具，測試介面流暢，以及實際模擬操作實驗，評估體驗與使用性之間的關聯性，希望介面能更貼近使用者的操作方式與人性化。研究中也了解台灣購物網站平台的基礎架構，將網站架構去除品牌認知，重新包裝，設計網站原型(Prototype)，以實驗設計為研究方法，研究使用者體驗與網站後續使用性，推測出目前購物網站對消費者在使用介面時可能會造成的影響。. 第四節. 研究範圍. 研究範圍局限於目前常見線上購物網站介面，並以電腦網頁介面顯示為主，顯示範圍不包含手機介面顯示或是平板介面顯示。而研究變數針對產品分類選單和整體介面複雜度為主要研究目標，不包含線上購物網站上之廣告、行銷活動或是網頁導覽選單帶來的影響，介面內容皆參考至現行常見購物網上的廣告促銷為類似結構，購物網站也以台灣常見線上購物網站與國外購物網站為基礎。本研究之實驗僅探討使用者對於線上購物網站的操作、瀏覽，並不包含消費者是否會有購物行為或是購買意圖，僅針對使用者對於網站的後續使用性與回訪。本研究僅就介面、產品分類選單以及使用者的體驗感受進行深入探討，並不針對其他過多的意涵所提出數據證明。實驗產品種類侷限一種，其目的在於產品可能會導致受測者瀏覽習慣，而產生誤差。樣本受測範圍也僅限於台灣人，樣本不同可能出現與其他類似研究結果不同。研究僅探討購物網站產品選單的形式對於在使用網頁時的會帶來的影響與感受，與介面複雜度也就是介面整體的複雜結構程度對體驗的影響構面，並進一步去看體驗能否促進網頁的使用性。. 3.

(12) 第二章文獻探討第一節一、. 使用者體驗與使用者介面使用者體驗(User Experience). Hassenzahl and Tractinsky (2006)認為使用者體驗(UX)包含了使用者主觀情境，甚至是複雜與動態的過程，而事實上它是不止於技術上需求的。使用者經驗是用戶內部的一連串狀態(偏好、期待、需求、動機、心情等)，設計系統的特徵 (諸如複雜性、目的性、使用性與功能性等)與環境之間互動的發生(例如組織/社會環境、活動的意義以及使用的自願性等)。以下為三個面向概括對使用者經驗的基礎樣貌：. 圖 2-1 使用者經驗的三個面向資料來源: Hassenzahl and Tractinsky (2006). 國際標準化組織(ISO)更清楚的將其定義為使用者對系統、產品或服務使用或預期使用所產生的感受和反應(ISO-9241-210, 2019)。整理兩者可以發現，與使用者經驗有最大關聯性的是｢人｣，而人的個性與背景都會影響到操作過程的感受，因此使用者經驗與心理學有相當大的關聯性。再進一步解釋將使用者體驗彰顯在日常生活中，我們會在咖啡廳需要消費一杯需要$200 元咖啡，但事實上，一杯咖啡在家裡沖泡的成本只需要$10 元，但消費者們還是仍然會去咖啡廳消費，對此我們看出顧客購買的不僅僅只是咖啡還包括咖啡廳提供的環境與服務，更重要的是整體的消費體驗(彭其捷, 2016)。 4.

(13) 針對使用者體驗的衡量，使用者體驗問卷(User Experience Questionnaire, UEQ)最初的版本為 2005 年發展於德國。時至今日，Schrepp (2019)與他的團隊為確保建構的量表具有實質意義，透過數據分析方法，將每一個刻度貼合於交互式產品的獨有特性，將使用者體驗精準於 6 個指標。表 2-1 使用者體驗量表尺度與內容. 尺度. 內容. 吸引力(Attractiveness). 使用者對於產品的整體印象。使用者對於產品的喜好程度。. 簡潔明瞭(Perspicuity). 產品之於使用者能否容易上手以及操作上是否容易學習。. 效率(Efficiency). 使用者是否無需多花力氣解決問題。. 可靠性(Dependability). 使用者在互動上具有控制權。. 刺激(Stimulation). 使用者能否對使用此產品產生興致與動機。. 新奇(Novelty). 產品是否具備創新性，能否引起使用者的興趣。. 資料來源: Schrepp (2019). Schrepp (2019)再進一步解釋尺度的結構，表示吸引力為單一維度效價 (valence)，效價在心理學上即對經驗狀態主觀評價等，則可能形成為正效價或負效價。而簡潔明瞭、效率與可靠性等尺度為實務性質面向，亦即目標導向；反之，非目標導向之尺度，刺激與新奇則為享樂性質面向。. 5.

(14) 圖 2-2 UEQ 尺度結構資料來源: Schrepp, Hinderks, and Thomaschewski (2014). 二、. 使用者介面(User Interface). 使用者介面(UI)通常是使用者和網頁或電腦機器發生互動的地方。更嚴格的說，使用者介面是使用者能接觸到電腦系統的所有的地方，無論是硬體或軟體，包括顯示設備、鍵盤等皆是。介面需要給予用戶一個好的引導，並使其完成任務。設計使用者介面的意義在於，介面要適合使用者並讓他易於使用，而不是設計使用者們去適應介面(Bennett, 1986; Moran, 1981)。另外，Satzinger and Olfman (1998)對於設計使用者介面涉及到的兩種語言做了更詳細的解釋，分別為顯示語言 (presentation language) 與動作語言 (action language)。電腦系統藉由顯示語言來詢問需要操作的物件或步驟，接著再提供訊息結果。而動作語言為使用者的表達，用於告訴電腦系統裡的程序中的物件該執行哪些操作。簡單來說，顯示語言就像介面上的文句，我們解讀文字的寓意，並透過執行指令操作介面，得到想要的結果，與電腦之間產生互動和回應，這便是動作語言(Bennett, 1986)。在這裡可以做出一個小整理，UX 與 UI 之間的關係，像是 UX 包裹住了 UI。 UX 為人與機器之間互動的感覺，而 UI 則為人與機器互動的方法(彭其捷, 2016)。. 6.

(15) UX. 人與機器之間互動的感覺. UI. 人與機器之間互動的方法. 圖 2-3 UX 與 UI 之間的從屬關係資料來源: 彭其捷 (2016). 第二節一、. 圖標與文字標示圖標與文字標示的視覺辨認. 圖標(icon)在當今電腦系統是基本的要素之一，過去不乏文獻探討圖標與人機互動(Human-Computer interaction, HCI)之間的理論。圖標能用更少的物理顯示空間來乘載更多描述性信息，即便使用者並不熟悉所觸及的圖標，它同樣具備傳遞訊息的能力。這樣能力則是將聚集的隱喻放置進一個統一化的圖標，介面中的圖標與使用者熟悉的現實世界中的實際對象有相對應的形式，運用已建立的屬性和現實世界的物件做關聯，將隱喻帶入到電腦系統中呈現給使用者(Gittins, 1986)。舉個例子，如電腦介面上的垃圾桶圖標傳遞的訊息和現實社會中的垃圾桶相互呼應。 Paivio, Rogers, and Smythe (1968)在研究中發現我們能夠將身邊熟悉物件的圖片，輕易地以言語的形式編碼並儲存在記憶裡，而編碼會具關連性的喚起所代表事物的記憶圖像。當圖標在屬於清楚可判別的情況下，我們對於圖像標示的意義能夠比文字理解的更快(Cheng & Patterson, 2007)。另外， Egido and Patterson (1988)比較文字標示、圖像標示以及圖加文等標示用於產品分類上，發現在圖加上文的標示下使用者做出選擇所花的時間最少，表示在產品分類加上圖片確實是可以促進訊息關聯的，但此研究並未一併考慮使用者體驗，以及結合任何網站形式與環境，僅對產品分類的選單做探究。. 7.

(16) 二、. 圖標的分類. 針對圖標的分類，在早期利用符號學來進行分類。根據皮爾斯符號三元論，當一個符號要存在必須符合三個要素，標物(objects)、依據(representamen)、詮釋 (interpretant)。並將符號分成三類：圖像記號(icon)、指示記號(index)、象徵記號 (symbol)(Gatsou, Politis, & Zevgolis, 2012; Peirce, 1902)。 . 圖像記號(Icon)：圖像標記為三類中最為簡單的代表，它與它所代表的含意形象是極為相似的。以簡單的線條呈現，圖像表現出的功能與事實相符。. . 指示記號(Index)：指示標記之意涵與事實呈現因果關係，其概念間接關連到指示對象。. . 象徵記號(Symbol)：象徵記號與其代表意涵能夠用常見或任意的符號做關聯，因事實過於常見，能夠使人產生觀念上的聯想。. 圖 2-4 圖標的分類呈現資料來源: Gatsou et al. (2012); Nadin (1988). Nadin (1988)描繪出圖 2-4 解釋不同類型的圖標以及利用從具體到抽象的對圖片的呈現做不同的解釋。當圖標的呈現變得越來越扼要，就越容易去詮釋；而隨著抽象程度越高，複雜性降低，符號也會變得越來越通用(Gatsou et al., 2012)。. 8.

(17) 第三節一、. 人機互動與網頁複雜度人機互動(Human-computer interaction, HCI). 人機互動(HCI)是用於研究人們如何與電腦技術進行互動。該領域的主要研究集中在電腦系統的設計上，目標是製造實用且美觀的軟硬體，並緊密結合評估系統的使用性。而這與設計有相當大的關連性，因為要知道設計的可用性與使用性需要觀察其使用的情況(Olson & Olson, 2003)。. 圖 2-5 HCI 研究概念資料來源: Oulasvirta and Hornbæ k (2016). Oulasvirta and Hornbæ k (2016)探討 HCI 做為解決方法的概念(圖 2-5)，HCI 在人類使用電腦上，解決問題能力具有顯著的提高，並具有持續提升潛力，其研究問題包括經驗性、概念性和建設性問題。. 圖 2-6 HCI 研究問題架構資料來源: Oulasvirta and Hornbæ k (2016). 9.

(18) 上圖為 HCI 研究問題的架構，定義則整理至下表進行解釋：表 2-2 HCI 的三種研究問題. 研究問題經驗性問題 Empirical Problems. 定義經驗性問題透過實證研究旨在創造或詳細描述人類使用電腦的在真實世界的現象。例子：人們使用滑鼠懸停研究等。. 概念性問題 Conceptual Problems. 概念性問題的研究意義在於解釋交互作用中以前發生的無關連現象。例子：通常為統計模型，研究對於目標的移動性能如速度與準確性等，可能為按鈕選擇區域的距離與寬度。旨在目標的移動如何與 UI 的任務產生關聯。. 建設性問題 Constructive Problems. 旨在建構關於人們對於人造品的理解，並是出自於人類使用電腦的某種目的。此類問題強調的不是結構本身，而是它所體現的思想或原則。重要的是問題類型跨越設計和工程。. 好的 HCI 研究則需要具備解決問題的能力，一般而言，解決問題能力的標準為四項，而 Oulasvirta and Hornbæ k (2016)針對 HCI 的效度與信度，將其添加至五項： . 顯著性(Significance) 顯著性表示解決方案可解決對研究利益的相關者(研究人員、從業人員或最終用戶)之重要問題。. . 效能(Effectiveness) 效能意味解決方法能夠處理問題的基本面向。. . 效率(Efficiency) 效率為運用解決方法所獲得的利益之相對成本。. . 轉換(Transfer) 解決方案轉移到相鄰問題的情形或轉移到其他問題的距離。. . 信心程度(Confidence) 信心程度為提出解決方法的機率。. 10.

(19) 總而言之，HCI 確實是具備幫助人們解決問題的能力，HCI 的研究問題建立在人們缺乏對於使用電腦上某些現象的理解，或是沒有能力建構一個互動技術去完成所預期的目的(Oulasvirta & Hornbæ k, 2016)。. 二、. 網頁複雜度(Webpage Complexity). 網頁的複雜度和使用者體驗息息相關。就購物網站而言，黎佩芬與賴建都 (2011)利用眼動儀發現，針對網頁充斥許多圖片時，會使頁面訊息太過複雜，造成使用者無法順利地處理訊息，形成負擔，並在搜尋的過程中有延遲的現象；而當頁面較為簡潔時，使用者在使用上較不容易迷失，且同時操作上也是容易的。大部分的網路消費者在進入瀏覽頁面時，大多都是有搜索目的的，藉此強調視覺複雜度的重要性，網頁的介面應人性化且單純易於搜尋瀏覽。 Berlyne (1960)認為複雜度(Complexity)是非常不容易衡量的概念，但複雜度大致可以定義為｢刺激性樣板中的多樣、變化之多寡｣(the amount of variety or diversity in a stimulus pattern)。並將刺激性複雜分別成下列幾種屬性： . 在其他條件相同下，複雜度會隨著可區別的元素的數量而增加。. . 如果元素的數量保持不變，複雜度會隨著元素之間的差異而增加。. . 複雜度和多個元素的變化程度呈反比，並反映在一個整體上。. 圖 2-7 首頁的複雜度與溝通效率的預測關係資料來源: Geissler et al. (2006). 在 Berlyne (1960)的理論中，首頁的複雜度和溝通效率呈現倒 U 的關係。意味，首頁必須有一定的最低複雜度，但不能太複雜，才具有最佳效果。因此，首頁複雜度會影響人們對廣告和廣告公司的態度、感覺以及購買意願 (Geissler et al., 2006) 。 11.

(20) 在近代的理論中，視覺複雜度被分為特徵複雜度(Feature Complexity)和設計複雜度(Design Complexity)。特徵複雜度為在基本的樣貌、顏色、明度和邊緣上較為複雜。此種非結構化的複雜度會反映在個別像素的變化程度。相對於特徵複雜度的非結構變化，設計複雜度可以根據特定形狀、物件及編排來相扣結構化變化，且可以分成六項原則：物件數量 (Quantity of objects)、物件的不規則 (Irregularity of objects)、物件的差異(Dissimilarity of objects)、物件的細節(Detail of objects)、物件排列的不對稱(Asymmetry of object arrangement)、物件排列的不規則(Irregularity of object arrangement)(Pieters, Wedel, & Batra, 2010)。 King et al. (2019)等人利用此兩種複雜度探討使用者對網頁的第一印象。結果支持了以往的視覺複雜度與用戶感受的線性關係，但卻只支持了設計複雜度。研究發現在特徵複雜度上，若增加視覺訊息再搭配上豐富的設計風格(設計複雜度)能夠創造良好的用戶感受和印象。而這有可能是因為特徵複雜度在研究的操作上不同所導致，以及研究並未達到高特徵複雜度的臨界值。. 三、. GOMS 模型. GOMS 模型是 HCI 理論中最廣為人知的理論概念(John & Kieras, 1996b)。在 HCI 領域長期運行的工作之一就是試圖了解人在電腦操作時瞬間交互中認知、感知和行為要素的參與。而這樣的工作和許多傳統心理學的研究形成了鮮明的對比， HCI 的目標是了解行為的多個元素如何交互作用，不僅僅是單項的運作而已 (Olson & Olson, 2003)。 GOMS 模型最早從 Card (1983) 等人所著作的《 The psychology of human-computer interaction》開始發展。他們利用傳統心理學將行為現象進行了分類，建立了一套模型並且能夠分離特定電腦程式所需的知識。透過此模型，可以確定幾種重要的行為：完成一項任務所需的時間(包含心理和身體行為的認知工程時間參數的總和)，人們在面對其他方法時會做出什麼樣的選擇，可能會發生哪些錯誤(例如短期記憶的喪失、動機的消失)，以及人們需要花多久時間學習新的應用程式(Olson & Olson, 2003)。. 12.

(21) 圖 2-8 GOMS 模型結構資料來源: Wilkins (2017). GOMS 模型分別為 goals, operators, methods 和 selection rules，結構如上，其定義整理至下表。表 2-3 GOMS 模型. 定義. GOMS 目標(Goals) 操作(Operators) 方法(Methods) 選擇方法(Selection Rules). 目標為使用者在模型中需要去達成的任務目標。操作為使用者在為達成任務目標下做出的行為步驟。方法為由一連串的步驟和子目標所組成，以達到任務目標。當方法不只一種時，選擇方法則為必要的。方法的選擇主要產生於使用者的個人經驗。. 資料來源: John and Kieras (1996a). 四、. Cogulator 認知建模. Cogulator 是運用 GMOS 所架構的模型工具，具備衡量任務時間、工作記憶負荷(working memory load)及心智負荷(mental workload)(Estes, 2017)。Cogulator 中有 29 個預裝的操作員並內置任務時間，但還是能夠針對人類行為對於場景和熟悉程度添加更多的操作員並修改任務時間。如果需要多個目標同時執行， Cogulator 也支援多任務建模。Cogulator 在每種模式操作下，將任務分解成兩個面向:任務時間(task times)和短期記憶(working memory)。Cogulator 利用甘特圖將結果視覺化，能清楚確定操作者的時間，運用資源合併行執行的任務(Wilkins, 2017)。. 13.

(22) 圖 2-9 Cogulator 甘特圖. Cogulator 近幾年也開始運用在許多研究上，例如飛行員飛航操作(Menzenski, 2018; Wilkins, 2017)、核電廠介面評估(Kovesdi & Joe, 2019)，此軟體的開發者 Steven Este 也表示此軟體針對介面設計上可能最有幫助，無論是使用上的效率或是心智負荷等，Cogulator 能在評估過中成為有用的工具(Savage-Knepshield, 2014)。. 14.

(23) 第三章研究方法第一節. 研究架構. 從上方蒐集文獻中，本研究進一步想實證文標 Labels 或圖標 Icons 的產品選單對於使用者在觀看、瀏覽介面時，哪種選單應該能夠給予使用者更快速感知選單功能與物件，也能夠降低系統的複雜性的效果，降低操作上繁複的點選，增加操作的效率，給予使用者較高的體驗。同時也討論整體網頁使用者介面的複雜度是否會與產品選單的互相影響，造成資訊傳遞的干擾或影響，以至於系統上的使用或是給予使用者過多的負擔和負面的印象等。以下為研究架構之假設：. 一、. 第一階段實驗. 圖 3-1 第一階段研究架構. 第一階段研究架構主要探討在圖標與文字標示下，使用上是否會造成在瀏覽網頁介面時產生不同的時間與操作步驟，相對的不同網頁結構與複雜度是否會干擾產生差異。此階段利用 Cogulator 建模，並假設使用者為有目的性的使用購物網站。 H1a：圖像標示 Icons 之產品分類選單會提高任務執行上的使用效率。 H1b：文字標示 Labels 之產品分類選單會提高任務執行上的使用效率。 H2a：低複雜度介面會對產品分類選單與介面使用效率之間正面調節使用效率。 H2b：高複雜度介面會對產品分類選單與介面使用效率之間負面調節使用效率。. 15.

(24) 二、. 第二階段實驗. 圖 3-2 第二階段研究架構. 在架構上自變數為購物網站上之產品分類選單的呈現形式，而相對的網站架構也會反映出不同的網頁複雜度為干擾變數。在前述文獻探討的發現以及我們的假設上，圖標應是要降低介面的複雜度，在搭配高和低複雜度的網頁結構，找出受測者體驗較高的介面架構。本研究透過受測者的實際操作收集應變數，衡量受測者的使用體驗，並收集受測者感受數據。第二階段實驗受測者為無目的性瀏覽購物網站介面，並增加第二頁產品介面增加互動性與瀏覽。 (H3a'為 H3a 之對立假說，以下以此類推) H3:產品分類的選單(圖標 icons/文標 labels)會影響使用者體驗。 H3a:使用者在圖像標示 icons 之產品分類介面下對吸引力有正面影響。 H3a':使用者在文字標示 labels 之產品分類介面下對吸引力有正面影響。 H3b:使用者在圖像標示 icons 之產品分類介面下對簡潔明瞭有正面影響。 H3b':使用者在文字標示 labels 之產品分類介面下對簡潔明瞭有正面影響。 H3c:使用者在圖像標示 icons 之產品分類介面下對效率有正面影響。 H3c':使用者在文字標示 labels 之產品分類介面下對效率有正面影響。 H3d:使用者在圖像標示 icons 之產品分類介面下對可靠性有正面影響。 H3d':使用者在文字標示 labels 之產品分類介面下對可靠性有正面影響。 H3e:使用者在圖像標示 icons 之產品分類介面下對刺激有正面影響。 H3e':使用者在文字標示 labels 之產品分類介面下對刺激有正面影響。 H3f:使用者在圖像標示 icons 之產品分類介面下對新奇有正面影響。 H3f':使用者在文字標示 labels 之產品分類介面下對新奇有正面影響。 H4:網頁複雜度的高低會對產品分類選單與使用者體驗之間產生調節作用。 16.

(25) H5a:吸引力與使用性具備正向影響。 H5b:簡潔明瞭與使用性具備正向影響。 H5c:效率與使用性具備正向影響。 H5d:可靠性與使用性具備正向影響。 H5e:刺激與使用性具備正向影響。 H5f:新奇與使用性具備正向影響。 H6:使用者體驗對產品選單與使用性之關係具備中介效果。 H6a:吸引力對產品選單與使用性之關係具備中介效果。 H6b:簡潔明瞭對產品選單與使用性之關係具備中介效果。 H6c:效率對產品選單與使用性之關係具備中介效果。 H6d:可靠性對產品選單與使用性之關係具備中介效果。 H6e:刺激對產品選單與使用性之關係具備中介效果。 H6f:新奇對產品選單與使用性之關係具備中介效果。. 17.

(26) 第二節. 研究流程. 本研究分成兩階段實驗，根據對購物網站產品分類介面的不同，分成圖標與文字兩類。第一階段實驗參考現有購物網站架構，設計實驗任務，以 Cogulator 建模工具分析操作任務時間。第二階段則以真實驗設計(true-experience design)的隨機化實驗控制組後測設計(randomized control-group posttest design；也稱為後測等組設計 posttest-only equivalent-group design)為基礎，以問卷衡量圖標和文字標示產品分類針對受測者對於體驗的整體感受，受測者所受測實驗任務與第一階段相同，問卷於完成任務後衡量使用經驗與個別購物網站介面的使用意願。. • • • •. 實驗一整理分類現有購物網站產品分類基本架構設計實驗購物網站 Prototype 利用建模工具衡量任務操作步驟與時間此結果為線上購物網站 UI 之實驗第一次基準. • • • • •. 實驗二利用 Prototype 模擬操作介面收集受測者對於不同產品分類介面的主觀感受收集受測者對於不同產品分類介面的使用偏好分析受測者對於分類選單介面的偏好此結果針對線上購物網站 UI 實驗第二次驗證. 分析、統計實驗數據結果圖 3-3 研究流程. 18.

(27) 第三節一、. 研究變數自變數. 本研究針對購物網站產品分類型式，整理國內外購物網站首頁，將自變數分成以下兩類。 (一) 圖像標示 Icons 如 eBay 與蝦皮等類型購物網站，產品分類屬於圖標與文字相襯在下方，標誌能夠使消費者清晰辨識，圖標大小、形狀一致，分類標示於版面的中央。. 圖 3-4 eBay 產品分類選單. 圖 3-5 蝦皮產品分類選單. (二) 文字標示 Labels 產品分類以文字標示之型式，通常位在購物網站左側欄位，有些網站也收於上方，但位於左側為大多數，且能夠滑動點選展開的型式顯示更多分類，快速選取所需的種類。. 19.

(28) 圖 3-6 momo 購物網產品分類選單. 圖 3-7 yahoo 購物中心產品分類選單. 二、. 干擾變數. 本研究利用設計複雜度與特徵複雜度(Pieters et al., 2010)，將目前常見之購物網站複雜度進行象限分類，參考圖 3-8。可以發現大多購物網站首頁普遍資訊量高，造成特徵複雜度普遍較高。其中 Amazon 的購物網站的首頁複雜度是較低的，相對的明度、色調等都不同於其他購物網站的豐富，文字、廣告都不多；eBay 的介面較為簡潔明亮乾淨，風格較為現代，複雜度也不會太高。台灣的購物網站特徵複雜度都較高，文字資訊豐富，廣告篇幅也多，並且可以發現購物網站風格與結構具有相似性，如 yahoo 拍賣和露天拍賣。另外，在分類上雖然 momo 摩天商城與 momo 購物網複雜度都較高，但透過良好的排版與設計似乎降低了視覺負擔，輔助了先前設計複雜度能改善特徵複雜度的研究。就目前常見購物網站之基礎結構來看，因購物網站的產品資訊或是廣告等造就特徵複雜度普遍較高，本研究的方向為實驗在相對特徵複雜度高的狀況下，目前常見購物網站，設計複雜度的高低是否造成使用者的負擔，因此將複雜度分成二者意義不大，因此本研究以整體網頁複雜度(Berlyne, 1960)為主要研究方向。 20.

(29) 實驗將會利用複雜度的高低搭配自變數對受測者進行刺激，調查受測者對於複雜度變化的操作影響，主要探討當豐富的資訊量呈現，使用者是否會因介面複雜造成體驗不同感受，以及複雜度是否會影響使用者往後持續瀏覽購物網站。特徵複雜度 FC. High. Yahoo 拍賣. Yahoo 商城. 松果購物. ebay. Yahoo 購物中心 PChome24h. 蝦皮購物. momo 摩天商城 momo 購物網. 露天拍賣. Amazon. High. Low. 設計複雜度 DC. Low 圖 3-8 購物網站首頁複雜度分類象限表 3-1 低複雜度與高複雜度介面 Low Complexity. High Complexity. 21.

(30) 三、 1.. 應變數. 第一階段本研究利用 Cogulator 建模測試實驗網站原型，確定任務使用步驟數，應變. 數為衡量任務時間以及任務中工作記憶負荷。任務時間是通過運算每個步驟花費的時間，統計彙整完成任務的時間。例如某任務時間是通過將手移到鼠標或鍵盤位置的動作需要 450 毫秒，在已知位置上看項目的動作需要 550 毫秒，所以此任務時間為 1000 毫秒。而工作記憶負荷是一種認知構造，其中信息被臨時存儲和操縱以完成複雜的任務(Wilkins, 2017)。 2.. 第二階段受測者接受介面任務操作網站模型後，此階段應變數為｢使用者體驗｣與｢使. 用性｣。 A.. 使用者體驗問卷中將使用者體驗的六種構面，建立尺度量表，如下(Schrepp, Hinderks, &. Thomaschewski, 2017)。 . 吸引力：使用者對於產品的整體印象。在量表中有 6 組尺度，令人不悅的－令人愉快的，好的－差的，令人厭惡的－招人喜歡的，難受的－宜人的，吸引人的－無吸引力的，引起好感的－令人反感的。. . 簡潔明瞭：產品之於使用者能否容易上手以及操作上是否容易學習。在量表中有 4 組尺度，費解的－易懂的，容易學的－難學的，複雜的－簡單的，一目了然的－眼花撩亂的。. . 效率：使用者是否無需多花力氣解決問題。在量表中有 4 組尺度，使用起來是快的－使用起來是慢的，低效率的－高效率的，不實用的－實用的，井然有序的－雜亂無章的。. . 可靠性：使用者在互動上具有控制權。在量表中有 4 組尺度，無法預測的－可預測的，礙手礙腳的－給予幫助的，可靠的－不可靠的，符合預期的－不符預期的。. . 刺激：使用者能否對使用此產品產生興致與動機。在量表中有 4 組尺度，品質高的－劣質的，令人乏味的－令人興奮的，無趣的－有趣的，令人激動的－令人昏昏欲睡的。 22.

(31) . 新奇：產品是否具備創新性，能否引起使用者的興趣。在量表中有 4 組尺度，具創造力的－平淡無奇的，獨創的－普通的，傳統的－新穎的，保守的－創新的。. B.. 使用性(Usability) Menon and Kahn (2002)研究發現如果消費者在最初階接觸一個線上購物網. 站，對其具有良好的印象，能產生愉悅的情緒並且更有可能產生後續的購物行為。消費者將會瀏覽更多商品，並計畫更多購買商品。除此，研究也發現如果消費者在最初印象時，接觸到太多刺激和資訊負荷，消費者將可能減少後續的瀏覽與購物行為，更多的刺激可能只會導致反向的結果。其部分我們可以運用使用性 (Usability)中的滿意度(satisfaction)面向來進行評估(Nielsen & Loranger, 2006)。於是本研究假設使用者對於購物網站具有良好的體驗下，會增加其瀏覽、未來後續使用或是購買的動機與意願。並採用 Deng and Poole (2010)對網站迴避行為的衡量尺度作為問卷量表，評量受測者的使用意願與網站的後續使用性。. 四、. 控制變數. 實驗控制變數硬體部分，參與實驗研究受測者將使用相同的硬體設備來進行受測，除自變數與干擾變數除外，兩組分別所觀察之實驗模擬界面相同，資訊內容也大致相符。. 五、. 實驗網站 Prototype 製作. 本研究實驗購物網站原型(Prototype)以 Balsamiq、Photoshop 為基礎設計工具，先勾勒出基礎線稿(wireframe)，繪製網頁介面基礎架構，製作 mockup，再以 invision 為原型工具製作出線上購物網站原型。購物網站原型分為四種，Icons / Labels ⨯高複雜度/低複雜度，四種原型皆參考目前常見的線上購物網站型式，icon 的部分也會以購物網站常見的類型呈現，也就是圖標 icon 輔以小標也是最有效率的顯示方式(Kacmar & Carey, 1991)。本研究將實驗原型去除掉所有品牌認知，以免實驗過程出現干擾，例如:品牌偏好與品牌忠誠等等，將實驗原型控制在使用者常見的購物網站架構下。icons ⨯低複雜度之結構參考至 eBay 購物平台之型式，icons ⨯高複雜度為蝦皮購物平台， labels ⨯低複雜度為 Amazon 購物網站，labels ⨯高複雜度為參考至露天拍賣。 23.

(32) 表 3-2 四種實驗購物網站 Prototype. Icons ⨯ LC. Icons ⨯ HC. Labels ⨯ LC. Labels ⨯ HC. 註:完整 Prototype 可參考附錄二。. 第四節. 實驗任務設計. 根據資策會 MIC 針對網購消費之研究顯示，網友最常網購產品類型前五名，依序為日常用品(37.9%)、3C 家電(36%)、服飾配件(29.9%)、交通票券(20.6%)、餐飲票券(19.2%)，而美容保養(19.1%)與食品保健(15.6%)品項也受消費者歡迎(張筱祺, 2019)。任務設計之產品選擇以 3C 產品中的筆記型電腦，為消費最常購買商品中排名第二，產品類型為較為中性，也屬於消費者會花較長時間在瀏覽的產品。. 一、. 第一階段實驗任務. 實驗任務藉由 GOMS 任務分析方法，針對每一種網頁介面，將使用者介面的配置，以最具效率的操作步驟進行安排。因實驗目標針對產品分類進行操作，以單一方法進行，下表無選擇方法(Selection Rules)一塊。. 24.

(33) 表 3-3 一階實驗任務. 實驗網站原型. Icons ⨯ LC. Icons ⨯ HC. Labels ⨯ LC. Labels ⨯ HC. 目標. 操作單元              . 進入筆電   產品頁面              . 二、. Hands to the mouse. Initiate move cursor to icons. Look at target. Point to icons. Initiate mouse down. Click. Hands to the mouse. Search the icons. Initiate move cursor to icons. Point to icons. Initiate mouse down. Click. Hands on the mouse. Initiate move cursor to category icon. Look at target. Point to category icon. Search to the label. Look at the label. Point to label. Initiate mouse down. Click. Hands to mouse. Initiate move cursor to category labels. Look at 3C label. Point to 3C label. Initiate move cursor to laptop label. Look at laptop label. Point to laptop label. Initiate mouse down. Click.. 方法. 點擊筆電 icon. 點擊筆電 icon. 點擊側邊分類欄，點選筆電標示. 鼠標移動至側邊分類欄，點選筆電標示. 第二階段實驗任務. 第二階段實驗，受測者除瀏覽觀看介面外可執行如一階實驗任務等操作，而為增加更多互動性，二階實驗在網頁原型上新增第二頁產品頁面，並能夠點選網頁 Logo 回到原型首頁。增加第二頁點選目的為，讓受測者有更多操作的空間與. 25.

(34) 活動，並讓受測者更專注在於首頁給予的感受。在任務操作上也不會去限制瀏覽時間，以達到無目的瀏覽的效果。. 圖 3-9 二階實驗新增頁面與任務互動. 第五節. 實驗樣本. 實驗樣本共 60 人，受測者 60 人將隨機分配各 30 人至控制組與實驗組。控制組受測者將觀看瀏覽傳統文字標示的產品分類選單，與不同高低複雜度之 UI 呈現；實驗組則觀看以圖標的產品分類選單，以及不同高低複雜度之 UI 呈現。. 第六節. 實驗流程. 各組受測者將會觀察一種網頁介面與互動後進行問卷回答。本研究受測者年齡控制在 18 至 30 歲之間等學生族群。本實驗設計過程如下：受測者填寫基本資料. 瀏覽第一種實驗 Prototype 介面. 進行問卷填寫. 瀏覽第二種實驗 Prototype 介面. 進行問卷填寫. 實驗結束圖 3-10 受測者實驗流程 26.

(35) 第四章實證分析第一節. 第一階段實驗結果. 第一階段實驗，以 Cogulator 針對四種不同購物網站原型做操作模擬。實驗任務步驟皆是以最有效率的途徑作為分析，以下是模擬結果。表 4-1 Cogulator 模擬結果. 實驗網站原型. Icons ⨯ LC. Icons ⨯ HC. Labels ⨯ LC. Labels ⨯ HC. 總任務操作時間. 1900 ms. 2600 ms. 4500 ms. 3500 ms. 任務總步驟數. 6. 6. 9. 9. 工作記憶負荷. 1.5 chunks. 0.7 chunks. 2.1 chunks. 3.3 chunks. * ms: 毫秒；四組模擬結果參考附錄三。. 從上表可以發現，在低複雜度的介面下，使用網站的步驟數沒有因此減少，和高複雜度的使用步驟是相同的數量。接著在圖標 Icons 的情況下來看，工作記憶負荷在高複雜度的介面下反而是較低的，低複雜度並沒有達到降低工作記憶負荷的效果。而從文標 Labels 的情況下看，總任務操作時間在低複雜度反而是花更多的時間。也就是說複雜度的高低對於在產品分類和介面的使用效率之間沒有干擾。. 圖 4-1 Labels ⨯ LC 模擬結果. 圖 4-2 Labels ⨯ HC 模擬結果 27.

(36) 比較文標 Labels 的模擬結果，發現在低複雜度的介面下，多花了 1250 毫秒的時間在尋找目標上，原因在於介面為了降低複雜度，會將產品分類欄位收起，而導致使用者無法直接看到分類欄，額外做出點開分類欄並尋找目標物的步驟。接著，在圖標 Icons 和文標 Labels 的比較下，不難發現文標 Labels 的模擬操作下，在總任務操作時間、任務總步驟數以及工作記憶負荷都較高。有可能是礙於文標 Labels 所需要的介面結構而導致的，但從此處可以看出還是可以知道圖標 Icons 是能夠降低介面的系統性結構的，進而提升執行上的效率。表 4-2 第一階段實驗假說結果研究假設. 假說驗證. H1a：圖像標示 Icons 之產品分類會提高任務執行上的使用效率。. 支持. H1b：文字標示 Labels 之產品分類會降低任務執行上的使用效率。. 支持. H2a：低複雜度介面會對產品分類選單與介面使用效率之間正面調節使用效率。. 未獲支持. H2b：高複雜度介面會對產品分類選單與介面使用效率之間負面調節使用效率。. 未獲支持. 第二節一、. 第二階段實驗結果實驗樣本結構. 在第二階段實驗階段，研究將受測者 60 位各分至控制組與實驗組。控制組為文標 Labels 受測組，實驗組則為圖標 Icons 受測組。兩組各為 30 人，學生身分為台師大與台科大大學生以及研究生。年齡約在 19-29 歲之間，兩組受測者男女比控制在各半，其中控制組男性佔 41%、女性佔 59%，而實驗組男性佔比為 47%、女性為 53%，幾乎所有受測者皆有使用線上購物網站的經驗。表 4-3 受測者使用網路購物平台頻率. 線上購物網站使用頻率. 控制組. 實驗組. 幾乎沒有在使用. 3%. 10%. 1 個月使用不到 1 次. 24%. 20%. 1 個月使用 1～3 次. 34%. 40%. 1 週使用 1～2 次. 24%. 27%. 1 週使用 3 次(含)以上. 14%. 3%. 28.

(37) 表 4-4 受測者使用網路購物平台經驗比率. 線上購物網站使用經驗. 控制組. 實驗組. 1~3 個月. 4%. 23%. 3 個月以上~6 個月. 4%. 3%. 半年以上~一年. 4%. 0%. 一年以上~三年. 32%. 10%. 三年以上. 57%. 63%. 從兩張表可以發現，受測者在使用購物網站上普遍都有豐富的經驗，一半以上都有使用三年以上的經驗，而在使用購物網站上，頻率也相當高，一個月至少都會使用線上購物網站 1-3 次。. 二、. 假設檢定分析. (一) 產品分類選單與網頁複雜度結果分析與比較本研究以二因子MANOVA分析產品分類圖標Icons和文標Labels在高低複雜度的情況下對於使用者體驗與使用性之效果，各細格描述統計如表 4-5 描述性統計，結果如表 4-6 多變量檢定與表 4-7 Two-way MANOVA 分析摘要。表 4-5 描述性統計低複雜度. 產品分類. 吸引力. 簡潔明瞭. 效率. 可靠性. 刺激. 新奇. 使用性. 高複雜度. n. M(SD). n. M(SD). 圖標Icons. 30. 0.92(0.87). 30. 0.74(1.35). 文標Labels. 30. 0.96(1.02). 30. 1.37(0.99). 圖標Icons. 30. 1.78(0.8). 30. 1.11(1.27). 文標Labels. 30. 1.98(0.6). 30. 0.95(1.41). 圖標Icons. 30. 1.48(0.83). 30. 0.97(1.26). 文標Labels. 30. 1.77(0.74). 30. 1.49(1.06). 圖標Icons. 30. 0.91(0.92). 30. 1.05(1.13). 文標Labels. 30. 1.25(0.90). 30. 1.56(0.66). 圖標Icons. 30. 0.14(0.87). 30. 0.24(1.32). 文標Labels. 30. 0.38(0.96). 30. 0.93 (1.13). 圖標Icons. 30. -0.04(1.00). 30. -0.23(1.42). 文標Labels. 30. -0.03(1.32). 30. 0.69(1.27). 圖標Icons. 30. 4.79(0.86). 30. 4.57(1.3). 文標Labels. 30. 5.07(0.96). 30. 5.11(0.96). 29.

(38) 分析前，Box’s M 檢定顯示變異數為同質(P =0.064)。表 4-6 多變量檢定可以看出產品分類對於應變數之主效果達到顯著，F =2.781，P =0.01，Pillai's trace =0.15，partial η2 =0.15。複雜度對於應變數的主效果達到顯著，F =5.62，P =0.00， Pillai's trace =0.263，partial η2 =0.263。產品分類和複雜度的交互作用對應變數的效果呈現不顯著，F =1.267，P =0.273，Pillai's trace =0.075，partial η2 =0.075。表 4-6 多變量檢定 Pillai's trace. F. Hypothesis df. Error df. Sig.. partial η2. 產品分類. 0.150. 2.781. 7. 110. 0.011**. 0.150. 複雜度. 0.263. 5.620. 7. 110. 0.000***. 0.263. 產品分類*複雜度. 0.075. 1.267. 7. 110. 0.273. 0.075. 效應. 註: n.s. p>0.05 **p<0.01 ***p<0.001；Pillai's Trace 比其他三個多變量分析 Wilks' Lambda (λ) 值、 Hotelling's Trace 、 Roy's 最大根更適合運算在違反常態性 (non-normality) 或異質性 (heteroscedasticity)的資料上(張紹勳、林秀娟, 2018)。. 接著分析顯著主效果結果，在下表 4-7 看出產品分類對針對效率(P =0.026)、可靠性(P =0.013)、刺激(P =0.02)、新奇(P =0.045)以及使用性(P =0.032)具有顯著效果；在吸引力(P =0.04)與簡潔明瞭(P =0.932)兩個構面下呈現不顯著。而複雜度對簡潔明瞭(P =0.00)與效率(P =0.033)兩構面上具有顯著效果；在吸引力(P =0.544)、可靠性(P =0.182)、刺激(P =0.103)、新奇(P =0.25)與使用性(P =0.631) 等構面下不具顯著效果。其中簡潔明瞭其構面對於介面複雜度的解釋力 14%( partial η2 =0.14>0.138)，為高度關聯強度。而產品分類和複雜度的交互作用在使用者體驗的六個構面與使用性上皆未達顯著。以下分析產品分類選單和高低複雜度對於使用者體驗和使用性的影響。利用比較平均數法，針對有顯著效果的應變數進行比較平均數分析，觀察受測者對於不同的產品分類選單和高低複雜度的量測結果。. 30.

(39) 表 4-7 Two-way MANOVA 分析摘要變異來源. 依變數. SS. df. MS. F. p. partial η2. 吸引力. 3.264. 1. 3.264. 2.850. .094. .024. 簡潔明瞭. .008. 1. .008. .007. .932. .000. *. .042. **. .052. .020. *. .046. .045. *. .034. *. .039 .003. 效率產品分類. 可靠性刺激新奇. 複雜度. 產品分類*複雜度. 誤差. 總計. 5.002 5.419 6.533 6.533. 1 1 1 1. 5.002 5.419 6.533 6.533. 5.070 6.418 5.584 4.098. .026 .013. 使用性. 5.025. 1. 5.025. 4.730. .032. 吸引力. .424. 1. .424. .370. .544 ***. .140***. 簡潔明瞭. 21.675. 1. 21.675. 18.902. 效率. 4.602. 1. 4.602. 4.665. .033*. .039. 可靠性. 1.519. 1. 1.519. 1.799. .182. .015. 刺激. 3.169. 1. 3.169. 2.708. .103. .023. 新奇. 2.133. 1. 2.133. 1.338. .250. .011. 使用性. .247. 1. .247. .233. .631. .002. 吸引力. 2.561. 1. 2.561. 2.236. .138. .019. 簡潔明瞭. .919. 1. .919. .801. .373. .007. 效率. .408. 1. .408. .414. .521. .004. 可靠性. .208. 1. .208. .247. .620. .002. 刺激. 1.519. 1. 1.519. 1.298. .257. .011. 新奇. 6.075. 1. 6.075. 3.811. .053. .032. 使用性. .490. 1. .490. .461. .498. .004. 吸引力. 132.832. 116. 1.145. 簡潔明瞭. 133.021. 116. 1.147. 效率. 114.437. 116. .987. 可靠性. 97.946. 116. .844. 刺激. 135.729. 116. 1.170. 新奇. 184.933. 116. 1.594. 使用性. 123.238. 116. 1.062. 吸引力. 258.102. 120. 簡潔明瞭. 409.375. 120. 效率. 368.125. 120. 可靠性. 275.500. 120. 刺激. 168.625. 120. 新奇. 200.875. 120. 使用性. 2996.062. 120. 註: n.s. p>0.05 **p<0.01 ***p<0.001 31. .000.

(40) 1.. 產品分類選單之比較平均數比較產品分類針對使用者體驗有顯著效果的構面，效率、可靠性、刺激、新. 奇，以及網頁使用性的部分之邊緣平均數。發現在效率、可靠性、刺激、新奇和使用性下，受測者給予文標 Labels 的分數都較圖標 Icons 高。表 4-8 產品分類選單之邊緣平均數 95% 信賴區間依變數效率. 可靠性. 刺激. 新奇. 使用性. 2.. 產品分類. 平均值. 標準誤. 下限. 上限. 比較平均數. 圖標Icons. 1.221. .128. .967. 1.475. 文標Labels＞圖標. 文標Labels. 1.629. .128. 1.375. 1.883. Icons. 圖標Icons. .979. .119. .744. 1.214. 文標Labels＞圖標. 文標Labels. 1.404. .119. 1.169. 1.639. Icons. 圖標Icons. .192. .140. -.085. .468. 文標Labels＞圖標. 文標Labels. .658. .140. .382. .935. Icons. 圖標Icons. -.133. .163. -.456. .190. 文標Labels＞圖標. 文標Labels. .333. .163. .010. .656. Icons. 圖標Icons. 4.683. .133. 4.420. 4.947. 文標Labels＞圖標. 文標Labels. 5.093. .133. 4.829. 5.356. Icons. 網頁複雜度之比較平均數針對網頁複雜度對於有顯著效果之依變數，為使用者體驗之簡潔明瞭與效率. 兩構面，比較其邊緣平均數。可以發現受測者在低複雜度上給予的評分都較高複雜度高。表 4-9 網頁複雜度之邊緣平均數 95% 信賴區間依變數簡潔明瞭. 效率. 複雜度. 平均值. 標準誤. 下限. 上限. 低複雜度. 1.879. .138. 1.605. 2.153. 高複雜度. 1.029. .138. .755. 1.303. 低複雜度. 1.621. .128. 1.367. 1.875. 高複雜度. 1.229. .128. .975. 1.483. 32. 比較平均數高複雜度＜低複雜度. 高複雜度＜低複雜度.

(41) 3.. 產品分類選單與網頁複雜度假說檢定結果從分析結果可以得出以下檢定結果。MANOVA之分析結果可得出，產品分. 類選單與網頁複雜度之交互作用不顯著，故網頁複雜度並不存在干擾作用，H4 未獲支持。而產品分類選單與網頁複雜度個別主效果皆為顯著，產品分類選單會左右使用者在操作、瀏覽上之體驗，與H3假說相符，故H3成立。分析產品分類選單之主效果，可以發現在吸引力與簡潔明瞭上，產品分類選單並不會影響受測者在瀏覽上的體驗，而其餘效率、可靠性、刺激以及新奇在對受測者的體驗上具顯著影響，故H3a、H3a'與H3b、H3b'兩組假說未獲支持。比較平均數分析產品分類選單之主效果，可以發現受測者對於文標Labels給予的平均分數都較圖標Icons高，故H3c'、H3d'、H3e'、H3f'假說成立，其對立假說H3c、H3d、H3e、H3f未獲支持。表 4-10 產品分類選單與網頁複雜度假說檢定結果. 研究假說. 假說驗證. H3:產品分類的選單(圖標 icons/文標 labels)會影響使用者體驗。. 支持. H3a:使用者在圖像標示 icons 之產品分類介面下對吸引力有正面影響。. 未獲支持. H3a':使用者在文字標示 labels 之產品分類介面下對吸引力有正面影響。. 未獲支持. H3b:使用者在圖像標示 icons 之產品分類介面下對簡潔明瞭有正面影響。. 未獲支持. H3b':使用者在文字標示 labels 之產品分類介面下對簡潔明瞭有正面影響。. 未獲支持. H3c:使用者在圖像標示 icons 之產品分類介面下對效率有正面影響。. 未獲支持. H3c':使用者在文字標示 labels 之產品分類介面下對效率有正面影響。. 支持. H3d:使用者在圖像標示 icons 之產品分類介面下對可靠性有正面影響。. 未獲支持. H3d':使用者在文字標示 labels 之產品分類介面下對可靠性有正面影響。. 支持. H3e:使用者在圖像標示 icons 之產品分類介面下對刺激有正面影響。. 未獲支持. H3e':使用者在文字標示 labels 之產品分類介面下對刺激有正面影響。. 支持. H3f:使用者在圖像標示 icons 之產品分類介面下對新奇有正面影響。. 未獲支持. H3f':使用者在文字標示 labels 之產品分類介面下對新奇有正面影響。. 支持. H4:網頁複雜度的高低會對產品分類選單與使用者體驗之間產生調節作用。. 33. 未獲支持.

(42) (二) 使用者體驗與使用性相關性分析本研究以Pearson’s correlation分析使用者體驗的六個構面與使用性之相關性，以驗證在操作、瀏覽網頁時，與使用者後續產生行為之關聯性。下表 4-12可以發現使用性與使用者體驗的六個構面相關係數為，吸引力(r=0.81)、簡潔明瞭 (r=0.51)、效率(r=0.52)、可靠性(r=0.52)、刺激(r=0.76)以及新奇(r=0.69)，大多介於0.5～0.8之間，相關性呈現顯著，適度或良好正向相關。其表中的簡單回歸，得使用者體驗與網頁使用性具備顯著關聯，P值皆小於0.05，故H5a、H5b、H5c、 H5d、H5e與H5f等假說成立。表 4-11 使用者體驗與使用性假說檢定結果. 研究假說. 假說驗證. H5a:吸引力與使用性具備正向影響。. 支持. H5b:簡潔明瞭與使用性具備正向影響。. 支持. H5c:效率與使用性具備正向影響。. 支持. H5d:可靠性與使用性具備正向影響。. 支持. H5e:刺激與使用性具備正向影響。. 支持. H5f:新奇與使用性具備正向影響。. 支持. (三) 使用者體驗中介檢定實驗設計因受到小樣本限制，與數據常態性不易維繫，同時使用者體驗具備六個因子類似多元中介。此部分以拔靴法(Bootstrap)來檢定更為精準，拔靴法以重複抽樣的方式來估算間接效果的信賴區間，以進行驗證，若是信賴區間未經過 0，則有中介效果。並且拔靴法在小樣本的衡量上也更為準確(林鉦棽、彭台光, 2012)。由於小樣本機率理論的不穩定性，本研究認為普遍的95%的信心水準可能導致苛刻，進而將信心水準調至90%，去符合小樣本的特質，而型Ι錯誤的容許度將提升。數據將分成兩部分，因在MANOVA分析時，交互作用並不顯著，故在第一筆數據具備干擾變數下之結構將會呈現不顯著；第二筆數據將會替除干擾變數，去觀察使用者體驗之中介效果。. 34.

(43) 表 4-12 Pearson 相關係數矩陣. 吸引力吸引力. 皮爾森 (Pearson) 相關性. 簡潔明瞭. 效率. 可靠性. 刺激. 新奇. 使用性. 1. 顯著性（雙尾）簡潔明瞭. 效率. 可靠性. 刺激. 新奇. 使用性. 皮爾森 (Pearson) 相關性. .411**. 顯著性（雙尾）. .000. 皮爾森 (Pearson) 相關性. .579**. .716**. 顯著性（雙尾）. .000. .000. 皮爾森 (Pearson) 相關性. .604**. .367**. .570**. 顯著性（雙尾）. .000. .000. .000. 皮爾森 (Pearson) 相關性. .856**. .298**. .476**. .503**. 顯著性（雙尾）. .000. .001. .000. .000. 皮爾森 (Pearson) 相關性. .785**. .220*. .357**. .372**. .819**. 顯著性（雙尾）. .000. .016. .000. .000. .000. 皮爾森 (Pearson) 相關性. .814**. .508**. .515**. .523**. .757**. .686**. 顯著性（雙尾）. .000. .000. .000. .000. .000. .000. 1. 1. 35. 1. 1. 1. 1.

(44) 1.. 拔靴法中介檢定結果(含干擾變數為網頁複雜度) 從下方表 4-14 與表 4-13 可得整個第二階段實驗研究架構之中介檢定結果，. 而網頁複雜度在架構中並不作為干擾變數之存在，進而影響結果影響而導致不顯著。則我們將網頁複雜度剔除，再進行一次 Bootstrap 中介檢定。此結果以 SPSS Process model 8 進行拔靴法檢定(Hayes, 2017)。表 4-13 Bootstrap 間接效果結果(含干擾變數). 網頁複雜度間接效果. Index. BootSE. 90% CI. 產品分類→吸引力→使用性. .2767. .2017. (-.0191, .6393). 產品分類→簡潔明瞭→使用性. -.1031. .1272. (-.3204, .0908). 產品分類→效率→使用性. -.0461. .0779. (-.1746, .0798). 產品分類→可靠性→使用性. .0114. .0392. (-.0408, .0852). 產品分類→刺激→使用性. .0926. .1032. (-.0349, .2912). 產品分類→新奇→使用性. .0615. .0882. (-.0638, .2180). 註:bootstrapping 為 90%信賴區間下同時反覆抽取 5000 次樣本進行區間估計。index of moderated mediation 為路徑分析以區間估計計算中介函數之參數(Hayes, 2015)。表 4-14 Bootstrap 直接效果結果(含干擾變數). 直接效果：產品分類選單→使用性複雜度. Effect. SE. t. p. 90% LLCI. 90% ULCI. 低複雜度. .1906. .1466. 1.2998. .1964. -.0526. .4338. 高複雜度. .1532. .1552. .9866. .3260. -.1044. .4107. 註:bootstrapping 為 90%信賴區間下同時反覆抽取 5000 次樣本進行區間估計。. 2.. 拔靴法中介檢定結果(不含干擾變數) 剔除干擾變數後，本研究以 SPSS Process 中的 model 4(Hayes, 2017)進行中. 介檢定。在表 4-15 中可以觀察到以間接效果整體(產品分類選單→使用者體驗→ 使用性)之結果在 90%的信賴區間中包含 0，不具有中介效果；但在使用者體驗中的個別構面中，可以觀察到吸引力(產品分類選單→吸引力→使用性)、效率(產. 36.

(45) 品分類選單→效率→使用性)與刺激(產品分類選單→刺激→使用性)在 90%之信賴區間皆不經過 0，則中介效果顯著。由上述分析得到使用者體驗之三構面顯著，我們再繼續觀察架構中直接效果之檢定，表 4-16 中顯示其直接效果(產品分類選單→使用性)之 90%信賴區間中並不包含 0，其直接效果為顯著；觀察表 4-17 總效果之檢定，其 90%信賴區間中亦不包含 0，總效果為顯著；顯示其中介效果為部分中介效果，其意義為當產品分類選單影響網頁使用性時，一部分是透過直接影響，而另一部分是通過中介變數吸引力、效率與刺激等三構面去影響。表 4-15 Bootstrap 間接效果結果(不含干擾變數) 間接效果. Effect. BootSE. 90% CI. TOTAL. .2298. .1629. (-.0316, .5041). 吸引力. .1572. .1062. (.0024, .3478)*. 簡潔明瞭. .0052. .0664. (-.1091, .1108). 效率. -.0803. .0561. (-.1833, -.0031)*. 可靠性. .0246. .0427. (-.0392, .0998). 刺激. .0917. .0709. (.0048, .2298)*. 新奇. .0314. .0424. (-.0366, .0988). 註:bootstrapping 為 90%信賴區間下同時反覆抽取 5000 次樣本進行區間估計。表 4-16 Bootstrap 直接效果結果(不含干擾變數) 直接效果. Effect. SE. t. p. 90% LLCI. 90% ULCI. 產品分類選單→使用性. .1795. .1070. 1.6773. .0963*. .0020. .3569. 註:bootstrapping 為 90%信賴區間下同時反覆抽取 5000 次樣本進行區間估計。表 4-17 Bootstrap 總效果結果(不含干擾變數) 總效果. Effect. SE. t. p. 90% LLCI. 90% ULCI. 產品分類選單→使用性. .4093. .1871. 2.1869. .0307**. .0990. .7195. 註:bootstrapping 為 90%信賴區間下同時反覆抽取 5000 次樣本進行區間估計。. 37.

(46) 而根據以上結果，可以得出以下檢定結果。在間接效果(表 4-15)下 TOTAL 中信賴區間包含 0，呈現不顯著，則 H6 使用者體驗對產品選單與使用性之關係具備中介效果未獲得統計支持。同理，其中吸引力、效率與刺激三構面，在信賴區間中皆未包含 0，則呈現中介效果顯著，支持 H6a、H6c、H6e。而其餘未獲支持構面為簡潔明瞭、可靠性和新奇，為 H6b、H6d 以及 H6f。表 4-18 中介效果假說檢定結果. 研究假說. 假說驗證. H6:使用者體驗對產品選單與使用性之關係具備中介效果。 H6a:吸引力對產品選單與使用性之關係具備中介效果。 H6b:簡潔明瞭對產品選單與使用性之關係具備中介效果。 H6c:效率對產品選單與使用性之關係具備中介效果。 H6d:可靠性對產品選單與使用性之關係具備中介效果。. 未獲支持支持未獲支持支持未獲支持. H6e:刺激對產品選單與使用性之關係具備中介效果。. 支持. H6f:新奇對產品選單與使用性之關係具備中介效果。. 未獲支持. 38.

(47) 第三節一、. 研究發現與討論產品分類選單主效果與網頁複雜度主效果. 第一階段實驗與第二階段實驗皆驗證了產品分類選單會產生的效果，第一階段實驗可看出產品分類選單不同呈現所帶來的使用效率；第二階段實驗產品選單在使用者體驗與網頁的使用性皆產生了顯著影響。但產品選單和複雜度在內部購面中都不對整體網頁吸引力具有影響。 (一) 第一階段實驗討論在第一階段實驗我們把主軸放在使用效率上，可以發現圖標 Icons 比文標 Labels 能提高使用上的效率，模擬結果發現在文標 Labels 的介面下操作、瀏覽，會花更多時間在尋找、觀察目標位置，其結果支持了如 Cheng and Patterson (2007) 之研究。而網頁複雜度的部分，我們在文標 Labels 選單發現，這樣的介面結構為了簡化複雜度而隱藏產品分類選單反而帶來更多的操作時間，儘管步驟數沒有變動，但在尋找目標物件上的時間卻增加了。Leuthold, Schmutz, Bargas-Avila, Tuch, and Opwis (2011)的研究類似於這方面的模擬實驗，其研究針對垂直選單與動態選單 (動態選單指會隱藏選單，需要依靠點擊才會顯示)，表示當使用者在進行較複雜的任務時，如果還需要再多做其他額外的點擊，使用者會產生不同的執行策略，而垂直完整的選單在視覺的感知與認知給予使用者更多方向與資訊。 (二) 第二階段實驗討論-產品分類選單第二階段實驗部分，H4 並未獲支持，也就是說明使用者在操作瀏覽網頁時，產品分類選單與網頁複雜度兩變數並不會互相干擾使用者體驗，而是獨立影響使用者的體驗。而產品分類選單，為消費者在瀏覽網頁與尋找商品的主要導覽工具之一，而事實上，圖標 Icons 的產品選單會讓使用者訪問更多的頁面以便尋找到想要的商品，完整的文標 Labels 選單，在頁面造訪上可能較少，而在首頁負荷較多且繁雜的資訊瀏覽(Walhout et al., 2015)。使用者行為上的造成不同，為主要支持 H3 且造成產品分類選單對於使用者體驗與使用性顯著差異的原因。. 39.