電子商務網站介面設計研究－美感與使用性

全文

(1)電子商務網站介面設計研究－美感與使用性學生：林珮雯. 指導教授：李峻德. 國立交通大學傳播研究碩士論文. 摘. 要. 長久以來，介面設計的功能與形式爭議不斷，衍生出易於使用(Ease to use) 與樂於使用(Joy to use)兩大概念。然而，過去人機互動聚焦於強調效率、功能的使用性 (Usability)上，往往忽略產品形式與美感(Aesthetics)所影響使用者經驗及情緒部分。因此，除了先前備受討論的功能性之使用性設計外，現在越來越多學者開始關注形式層面的探討，如美感和情緒議題。本研究從美感與使用性角度探討電子商務網站介面設計，除了傳統的使用性設計，情緒性因素如美感是否對人的感知與行為表現具正面的影響？本研究證實，電子商務網站介面的美感呈現的確會影響個人對網站好不好用的初步感知。在滿意度與使用者表現方面，固有使用性具有重要影響性，但研究也發現，在情緒部分，美感所產生的影響性確實比固有使用性來的大，美感高的實驗組別較能引發偏向正面的愉悅感，美感低的實驗組帶來的偏向負面情緒。因此，本研究認為，需要進一步將使用性滿意度擴大為使用者主觀經驗，納入使用心理、情緒性因素－美感考量。同時，從本研究結果中發現美感與使用性是並行不悖，也就是電子商務網站介面設計，除了達到方便、好用等使用性原則是基本要求外，亦應於網站中增加美感因素，以便在第一印象上能達到顯著的影響效果。. i.

(2) The Study of E-commerce Website Interface Design –Aesthetics v.s. Usability Student : Peiwen Lin. Advisor : Dr. Jiunde Lee. Institute of Communication Studies National Chiao Tung University. ABSTRAC The argument between functionality and form in the field of interface design mainly concerns these two issues: “Ease to use” and “Joy to use”. “Ease to use” represents the objective values of product functions; “Joy to use” relates to subjective feelings. Earlier HCI researchers focused on the usability issues in terms of efficiency and functionality. The drawback is that designers might easily neglect the forms and aesthetics of products which affect users’ experiences and emotion. Up to date, researchers have been prompted to pay more attention toward formative and subjective issues, such as aesthetics and emotion. The purpose of the present study is to investigate the interface design of e-commerce websites from aesthetics and usability perspectives. The assumption is that, aside from usability, aesthetics (emotional factor) could also positively influence users’ perceptions and behaviors. In other words, the degree of attractive interface layouts might be able to affect users to perceive the usability of an e-commerce website. One of the results showed that, in aspect of user’s behavioral performance, inherent usability is an influential factor. Also, this study proved that aesthetics will affect user satisfaction and emotion. Moreover, the findings revealed that rather than expressed negative emotion like low-aesthetic groups, high- aesthetic groups tended to evoke positive emotion. Conclusively, usability test should consider taking mental and emotional factors (e.g. aesthetics) into account. Applying aesthetic factors into the interface design of e-commerce websites will benefit consumers’ initial impression as well as increases their shopping motivations and efficiency. ii.

(3) 目錄. 摘. 要 ......................................................................................................................... I. ABSTRAC...................................................................................................................... II 表目錄 .......................................................................................................................... VI 圖目錄 ......................................................................................................................... VII 第一章緒論 .................................................................................................................1 1.1 研究動機與目的 ...................................................................................................1 1.2 理論架構 ...............................................................................................................3 1.3 研究問題 ...............................................................................................................5 1.4 研究方法簡述 .......................................................................................................5 1.5 研究架構與流程 ...................................................................................................6 1.6 研究貢獻 ...............................................................................................................7 1.7 名詞解釋 ...............................................................................................................8 第二章文獻探討 .......................................................................................................10 2.1 電子商務 .............................................................................................................10 2.1.1 深思可能模式(Elaboration Likelihood Model) .................................12 2.2 理性(SENSE)VS.感性(SENSIBLITY)－功能與形式爭議 ....................................15 2.3 情緒 .....................................................................................................................17 2.4 美感設計 .............................................................................................................21 2.4.1 美感定義..............................................................................................21 2.4.2 美感與情緒的關係..............................................................................21 2.4.3 美感的形式通則..................................................................................23 2.4.4 網頁美感設計原則..............................................................................27 2.5 使用性 .................................................................................................................34 2.5.1 使用性定義..........................................................................................34 2.5.2 使用性指標..........................................................................................35 2.5.3 網站啟發式考評及使用性原則 .........................................................37 2.6 傳統使用性不足 .................................................................................................41 2.6.1 使用性分類..........................................................................................43 2.6.2 美感與使用性......................................................................................44 2.7 小結 .....................................................................................................................48 第三章研究方法 .......................................................................................................50 3.1 研究假設.............................................................................................................50 iii.

(4) 3.2 實驗設計.............................................................................................................52 3.2.1 變項陳述與操作化..............................................................................52 3.2.2 統計分析..............................................................................................55 3.3 實驗對象.............................................................................................................56 3.4 實驗環境設定.....................................................................................................58 3.4.1 實驗網站..............................................................................................58 3.4.2 問卷設計..............................................................................................61 3.4.3 實驗任務設計......................................................................................64 3.5 實驗步驟.............................................................................................................68 3.5.1 前測......................................................................................................69 3.5.2 實驗進行..............................................................................................71 第四章資料分析 .......................................................................................................72 4.1 樣本描述統計 .....................................................................................................72 4.2 因素分析 .............................................................................................................73 4.2.1 表面使用性..........................................................................................73 4.2.2 主觀經驗的滿意度..............................................................................74 4.3 各組描述統計分析 .............................................................................................76 4.3.1 表面使用性..........................................................................................76 4.3.2 主觀經驗(S)分析.................................................................................76 4.3.3 使用性表現(P)分析.............................................................................79 4.4 假設驗證 .............................................................................................................81 4.4.1 假設 1 檢驗..........................................................................................81 4.4.2 假設 2 檢驗..........................................................................................81 4.4.3 假設 3 檢驗..........................................................................................82 4.4.4 假設 4 檢驗..........................................................................................83 4.4.5 假設 5 檢驗..........................................................................................84 4.4.6 假設 6 檢驗..........................................................................................84 4.4.7 假設 7 檢驗..........................................................................................85 4.4.8 假設 8 檢驗..........................................................................................87 4.4.9 假設 9 檢驗..........................................................................................88 4.4.10 假設 10 檢驗......................................................................................89 4.4.11 假設 11 檢驗......................................................................................89 第五章結論與研究限制 ...........................................................................................93 5.1 研究結果 .............................................................................................................93 5.2 研究限制及建議 .................................................................................................98 參考文獻 .....................................................................................................................101 中文書目 .............................................................................................................101 iv.

(5) 英文書目 .............................................................................................................102 附件 1..........................................................................................................107 附件 2..........................................................................................................108 附件 3..........................................................................................................110 附件 4..........................................................................................................112 附件 5..........................................................................................................113 附件 6..........................................................................................................114 附件 7..........................................................................................................116 附件 8..........................................................................................................118 附件 9..........................................................................................................122 附件 10........................................................................................................123 附件 11........................................................................................................124 附件 12........................................................................................................125 附件 13........................................................................................................131 附件 14........................................................................................................137 附件 15........................................................................................................143. v.

(6) 表目錄表 1、美感的形式通則 ................................................................................................27 表 2、網頁美感設計原則 ............................................................................................33 表 3、各家學者的使用性定義 ....................................................................................34 表 4、實驗設計組分組表 ............................................................................................52 表 5、研究中各變項關係表 ........................................................................................52 表 6、美感與固有使用性變項的操作定義 ................................................................54 表 7、實驗分組表 ........................................................................................................57 表 8、美感專家評估結果整理 ....................................................................................71 表 9、使用性專家評估結果整理 ................................................................................71 表 10、樣本結構表 ......................................................................................................72 表 11、表面使用性因素分析與信度檢驗之結果歸納表 ..........................................73 表 12、主觀經驗的滿意度因素分析與信度檢驗之結果歸納表..............................75 表 13、各組之表面使用性的平均數及標準差 ..........................................................76 表 14、各組之使用性滿意度的平均數及標準差 ......................................................77 表 15、各組之情緒平均數及標準差 ..........................................................................78 表 16、各組之主觀經驗平均數及標準差 ..................................................................78 表 17、各組之完成任務時間平均數及標準差 ..........................................................79 表 18、各組之錯誤率平均數及標準差 ......................................................................79 表 20、「美感」為自變項之「表面使用性」T 檢定.................................................81 表 21、「固有使用性」為自變項之「表面使用性」T 檢定 ....................................82 表 22、表面使用性之多元迴歸分析 ..........................................................................83 表 23、「美感」為自變項之「實際使用性之主觀經驗」T 檢定 ............................83 表 24、「固有使用性」為自變項之「實際使用性之主觀經驗」T 檢定 ................84 表 25、表面使用性與實際使用性之主觀經驗間的關係..........................................85 表 26、實際使用性之主觀經驗之多元迴歸分析 ......................................................86 表 27、使用性滿意度之多元迴歸分析 ......................................................................86 表 28、情緒之多元迴歸分析 ......................................................................................87 表 29、「美感」為自變項之「使用者表現」T 檢定.................................................88 表 30、「固有使用性」為自變項之「實際使用性之使用者表現」T 檢定 ............88 表 31、表面使用性與實際使用性之使用者表現間的關係 ....................................89 表 32、使用者表現之多元迴歸分析 ..........................................................................90 表 33、任務時間之多元迴歸分析 ..............................................................................90 表 34、錯誤率之多元迴歸分析 ..................................................................................91 表 35、本研究驗證假設結果 ......................................................................................92. vi.

(7) 圖目錄圖 1、圖 2、圖 3、圖 4、圖 5、圖 6、圖 7、圖 8、圖 9、圖 10、. 研究流程圖 .....................................................................................................6 深思可能模式圖 ...........................................................................................14 修改 MASLOW 的人類需求動機 ..................................................................22 準則性評估效果 ...........................................................................................38 本研究概念模式圖 .......................................................................................49 實驗網站主架構圖 .......................................................................................59 SAM SELF-ASSESSMENT MANIKIN ...............................................................64 圖電子巿場與消費者互動模式圖 ...............................................................65 本研究的消費行為流程圖 ...........................................................................66 實驗流程圖 ...................................................................................................69. vii.

(8) 第一章緒論 1.1 研究動機與目的隨著網際網路的廣泛運用與瀏覽器的日趨成熟，使得企業得以透過網際網路進行許多的商務活動。對使用者而言，一個網路商店的呈現，就好比一個人的外表一樣，人透過外表及形象、與人交談、接觸，對不同的人產生不同的印象；而對於一個陌生的網站而言，客戶從網站的設計、版面配置與整體呈現方式，對網站產生不同的感覺與印象。過去人機互動(Human-computer interaction, HCI)的評估方式多以使用性來描述資訊科技產品的品質，然而現在大部分新產品的品質，除了經由使用性測試階段外，還透過行銷活動與廣告包裝，來向使用者保證高品質的使用經驗。再者，商品屬性的不同也會影響整體的呈現方式。網路購物商品屬性多元，從電腦、資訊商品為主，轉向網路服飾、美容、時尚精品等相關商品銷售，尤其對於消費性商品，特別講求外觀形式及氣氛營造。可知，由於線上銷售產品的屬性從電腦、資訊商品，轉向網路服飾、時尚精品等相關商品銷售，電子商務網站的包裝策略也從講求實用性趨向視覺取向，整體呈現的外觀美感設計益形重要。另外，長久以來，電腦環境在設計上功能(functionality)與形式(form)的持續爭議，衍生出易於使用(ease to use)與樂於使用(joy to use)兩大概念(Hassenzahl, Platz, Burmester and Lehner, 2000; Sevener, 2003) 。然而，過去以來，人機互動 (Human-Computer Interaction/ HCI)聚焦於使用性 (usability)，從一個功能性的角度來探討效率、好不好用，往往忽略產品形式與美感所影響使用者經驗及情緒部分。在早期以機械、工作場域為主軸的環境中，商品著重在效率性上的確有其價 1.

(9) 值存在。但是，當轉換至以使用經驗為導向的線上相關活動中，如網路購物、線上遊戲等，販售的範疇已擴大到服飾、美容生活用品等情緒性產品時，情緒扮演了十分重要的角色，單單強調使用性已不足蓋括(Brave and Nass, 2003)。因此，網站介面設計不應只再局限在效用議題上，情緒因素如美感等面向皆需納入考量。因此，本研究目的即是從美感與使用性等兩個角度切入探討電子商務網站介面設計。究竟電子商務網站設計應以何種形式才會帶給使用者良好的印象？除了傳統的使用性設計原則外，情緒性因素如美感是否對人的感知與行為表現產生正面的影響？. 2.

(10) 1.2 理論架構網站介面之設計對使用者而言是一個非常重要的影響因素，約有 10%左右之開發經費是在設計介面上之花費，不同的網站介面設計、版面配置會能讓使用者產生不同的感覺與印象，因此網站的介面設計不但會影響使用者的滿意度，也可能影響其再次造訪的意願（張莉青，2002）。. 然而，由於早期電腦科技主要發展於工作領域，介面設計多強調功能的效率、正確等特質，延伸影響所及，2000 年後在電子商務領域中，其介面設計亦是偏重易用性，著重於使用性議題上，將情緒與美感設計視為次要地位，是以客觀功能取向的使用性凌駕於主觀形式的美感之上。過去以認知心理學(Cognitive Psychology)為基礎之 HCI，開始了解到除了傳統上之訊息處理理論(Information Processing Theory)外，還存在有另一個平行且交會互影響的系統－情緒系統(Emotion system)，此系統並非與認知對立，而是不可分離的一部分。此外，情緒因素也證實不但影響使用滿意度，還有助於問題解決及創造性(Dillon, 2001)。由於情緒的重新被定位，部分學者(Sevener, 2003; Dillon, 2001; Jordan, 1998)提出超越使用性(Beyond usability)的想法，趨使 HCI 研究由使用性基礎取向 (Usability-based approaches) 轉為含蓋情緒性的愉悅基礎取向 (Pleasure-based approaches)，強調人的生理與心理的通盤考量，是故過去以使用性為主流的設計概念開始受到挑戰與調整。以往的使用性基礎的研究多強調速度(Speed)與正確性(Accuracy)，其使用性. 測試結果大都是以避免負面的感覺，如減少錯誤率或挫折感為主，但對正面的情緒，如愉悅、享受等卻視而不見。”The attitudinal component of usability is concerned with. avoiding. negative. feelings. rather 3. than. producing. overtly. positive.

(11) emotion” .(Jordan, 1998)，長久以來，致使使用性測試缺乏情緒因素考量。即使將滿意度視為客觀的使用性指標(Usability criteria)的主觀佐證，亦難以含蓋完整的使用者經驗(Dillon, 2001)。本研究認為，滿意度不僅是使用者對系統在可學習性、效率性、可記憶性、錯誤率等客觀指標上的主觀指標，更是需進一步將滿意度擴大為使用者完整的主觀使用經驗，納入使用者的心理、情緒層面的考量。此外，使用性與滿意度間的絕對關係也受到質疑，也就是高使用性並不保證實際使用後必然之高滿意度。因為介面設計是否好用，往往很大程度是仰賴使用者的主觀經驗，設計師有意設定的固有使用性，未必能被使用者同樣的感知到。換句話，固有使用性(Inherent usability)未必等同於表面使用性(Apparent usability)，可能還存在其他因素影響使用者的感知、滿意度與表現。其中，美感被認為能引發強烈的正面情緒，研究指出美感會影響使用者對產品的感知，進而影響其他產品屬性或整體產品的評估(Norman, 2004; Lindgaard and Dudek, 2003)。為什麼情緒性因素－美感，會影響使用者感知網站的使用性、實際使用後之滿意度及行為表現？依據社會心理學家觀點，當媒體科技和社會或生理上規則愈相近時，科技的使用相對會愈愉悅，因此人會把電腦當作跟實際社會互動一樣，人會以貌取人，同樣地網站的美感會影響我們情緒上反應，在做客觀性評價時會有所偏差(Reeves and Nass, 1996)。簡而言之，美感的確會影響人的感知與行為表現，其所帶來的正面的影響可能是有助於做決定與創意，並且可做為改善使用者表現的手段，所以要達到最終接受系統的目的應該要兼顧美感與使用性的平衡。. 4.

(12) 1.3 研究問題本研究主要將探討的問題是，在使用電子商務網站時，除了使用性因素外，情緒性因素－美感是否會對使用者的感知與行為表現產生影響？本研究將討論自變項「美感」、「固有使用性」對「表面使用性」的影響，以及三者與依變項實際使用性之「主觀經驗」、「使用者表現」之間關係。並且，本研究將進一步重新檢視使用性概念，是否能含蓋完整的使用者經驗？. 1.4 研究方法簡述在研究方法上，本研究將以實驗法，進行 2 乘 2 因素實驗設計。根據美感與固有使用性的高低，建置四個實驗網站為「美感高/固有使用性低」、「美感高/固有使用性高」、「美感低/固有使用性低」、「美感低/固有使用性高」。本研究實驗文本選擇服飾購物網站，經由專家評估實驗網站符合預設的四種類型後，再請受測者進行實驗任務與問卷填寫，以蒐集研究所需資料。. 5.

(13) 1.5 研究架構與流程本研究主要探討電子商務網站介面設計中使用性與美感之間的關係，研究架構總共分為五章。首先於第一章說明研究動機與目的，並簡要指出本研究理論構架、研究問題與方法簡述、研究架構與流程、研究貢獻，及解釋研究中特殊名詞。第二章根據研究目的，依次回顧相關理論與研究之文獻，包括電子商務、功能與形式爭議、情緒、美感、使用性、傳統使用性不足等，最後推演出本研究問題。接著，第三章依據研究問題擬出研究假說，並說明本研究方法、實驗設計及資料分析方法等。第四章說明本研究資料回收與資料分析狀況，進一步檢驗本研究假設。最後，第五章依據研究結果說明研究發現和結論，另外說明本研究限制及對後續研究提出建議。詳細的研究流程圖，請參考圖 1。. 確定研究方向. 決定研究方法與實驗設計. 回顧相關研究文獻. 實驗執行與資料蒐集. 設定研究目的與研究問題. 資料分析與解釋. 確立研究假說. 結論與後續研究建議. 圖1、研究流程圖. 6.

(14) 1.6 研究貢獻本研究主要貢獻可歸納為四方面：一，本研究重新檢視使用性概念，將使用性細分為不同概念為固有使用性、表面使用性、實際使用性等，並歸納出傳統使用性的不足與局限，應強調使用者的心理層面。二，本研究嚐試針對長久以來 HCI 於功能與形式爭議做探討，釐清使用性與情緒因素－美感之間關係。若是美感對使用者感知的表面使用性或實際使用性之滿意度有明顯影響，顯示要達到最終接受系統(System acceptability)的目的，介面設計中美感因素不可偏廢。三，本研究針對美感產生的背後因素做進一步的探討，發現其所帶來的正面情緒是重要的影響因素，嚐試將情緒設計納入討論。另外，國內外情緒設計的相關研究並不豐富，是故亟需相關研究結果做為後續研究基礎。四，Dillon(2001)指出傳統滿意度被視為使用性的佐證，測量的問卷也傾向聚焦在效率、有效性、學習性、記憶性等面向的滿意度。但是，在軟性、消費性商品的線上購物等相關活動中，使用性強調的生產力(Productivity)可能不是趨動 (Driving)使用者使用的主要動機，而使用者的主觀經驗也不局限在效率、有效性、學習性、記憶性等面向上，因此其所依賴的滿意度評鑑標準(Criteria)會有所不同。是故，現有的使用性滿意度難以完整呈現主觀性經驗，本研究嚐試進一步納入使用者心理、情緒層面的考量，而擴大為使用者完整的主觀使用經驗。. 7.

(15) 1.7 名詞解釋情緒(Emotion) (Brave and Nass, 2003) 情緒是對於一個事件的反應，而且被視為與其需求、目標或個人所關心的所有相關，包括生理的、情感的、行為的與認知的成分。美感(Aesthetics) （歐世勛，2004）指人對審美對象的外在形式吸引，並打動我們情感，使我們對它凝神專注，它具有強烈的愉快、感動、舒暢的經驗效果。滿意度(Satisfaction) (Sweeney, Maguire and Shackel, 1993) 滿意度是指，當使用者與系統互動時態度的概括的正面關注或情緒，用來評量使用者對其資訊系統的感覺，是系統成功與否的主觀判斷依據。使用性(Usability) (ISO 9241-11) 採由 HCI 專家所發展之 9241-11 ISO 定義，使用性是指一種有效 (Effectiveness), 效率(Efficiency), 滿意(Satisfaction) 而讓特定的使用者在一個特別的環境中可以達到特定的目標。使用性是多重因素構成，其五個屬性效標：容易學習、使用效益、容易記憶、錯誤少、主觀滿意度。表面使用性(Apparent usability) (Kurosu and Kashimura, 1995) 表面使用性是從使用者主觀性出發，依據他們能察覺或感覺到介面或產品是否好用，因此偏向感知性也較為表面化，比較偏向系統的形式性。固有使用性(Inherent usability) (Kurosu and Kashimura, 1995) 固有使用性是指設計者依據客觀的原理、原則建構出介面或產品的使用性，因此是在發展初期，設計者本來賦予給介面或產品的使用性，比較偏向系統的功能性。 8.

(16) 實際使用性(Actual usability) 實際使用性包括使用者表現、使用性滿意度的評量，是在使用者實際操作後所產生的使用性結果。. 9.

(17) 第二章文獻探討 2.1 電子商務「以貌取人」，不免俗的，一般人仍無法避免如此的人性傾向，時常以個人的外表來斷定其好壞。同樣的，一個商店的外觀就好比人的外表一樣，顧客常對各式的商品陳設與外顯設計產生不同的感覺與印象。因此，傳統商務行銷方式十分重視環境設計，利用一些裝飾性元素強化視覺效果，這些可能不是太有用的資訊，也許不會直接影響任務的完成，但是卻可以創造出購物的環境氛圍，使購物經驗更加愉悅。許多相關研究已證實，傳統商店中購物環境、美感因素會對購物情緒、注意力、訊息感知、購物行為產生影響 (Botschen and Crowther,2004; Summers and Hebert,2001; Sherman、Mathur and Smith,1997 )。環境設計因素可分為三類：1)社會性因素(Social factors)：指環境中人與人間的互動，如售貨服務員人；2)周圍性因素(Aambient factors)：指非視覺性元素，如燈光、音樂、氣味等；3)設計性因素(Design factors)：指產品視覺性元素，如外觀形式、顏色、乾淨程度等(Baker, Levy, and Grewal,1992)，並且這些環境因素會影響消費者各種心理與行為上的購物結果。 Summers 和 Hebert(2001)研究商品陳列打光(Lighting)效果，發現在購物決策時，地點的氣氛可能比商品本身更具影響力，因為商品燈光打的好，更能增加空間的美感與功能性，並引發特殊的消費者回應。Sherman、Mathur 和 Smith(1997)研究證實，商店環境的視覺設計性與社會性因素對消費者情緒愉悅是有正相關，而正面情緒也對購物行為具有影響力，比如更喜歡這家商店、願意花多的金錢等。傳統商店的設計者十分善於透過美感元素的結合以吸引消費者感官，相關研. 10.

(18) 究主題相當豐富(Sherman、Mathur and Smith,1997; Baker, Levy and Grewal,1992 )。然而，擁有相對上多媒體能力之電子商務在環境介面設計卻沒有發揮既有之優勢與潛力，一般都不強調美感設計，而相關學術研究也較少。從業者觀點來看，電子商務主要優點是讓使用者能有效的利用時間購物、結合科技能提供更方便與資訊等；以消費者的看法，線上購物的特點是提供方便、比價便利及時、空的限制消失等(Eroglu, Machleit and Davis, 2001)。此外，1998 年時代雜誌(Time magazine)預測未來商務發展，標題以「跟商場吻別：線上購物更便宜、更快速、更好」(Kiss your mall goodbye: online shopping is cheaper, quicker and better. )( Arnold and Reynolds, 2003)。這些設計都只侷限性的，預設電子商務只需著重方便、有效率，而忽略極可能影響購買動機之環境美感設計，導致電子商務介面設計多著重於效率、使用性議題上，介面的美感設計則成為次要的地位。近年來，隨著生活科技的發展，過去強調「效率」的電腦工具性思考，重新被檢視，並從消費動機來討論，消費購物研究長期聚焦在使用經驗的效用 (utilitarian)層面，其特徵皆是以工作任務相關(Task-related)、理性，及購物的「任務＂mission＂」是否完成，但是這樣產品取得(Product acquistion)的解釋並不能反映整個購物經驗，因此近來研究開始轉向關注消費動機快樂(Hedonic)面向(Arnold and Reynolds, 2003)。Arnold 與 Reynolds(2003)針對 98 位人士深度訪談其消費經驗與動機，研究歸納出六種1愉悅的購物動機，其中購物時尋求感官刺激(Seek sensory stimulation)所帶來愉悅感是主要購物動機之一。是故，以快樂(Hedonic)正面情緒觀點來看，消費是由使用經驗的快樂好玩(Fun)所趨動，而此類經驗的直接影響因素－美感、感官刺激的設計或許將成為商務成功與否的主要標準之一。傳統零售業者重視商店外觀呈現，類推至網路虛擬世界，就是電子商務的網站介面外觀，使用者從網站的設計、版面配置與整體呈現方式，對網站產生不同. 1. 冒險購物(adventure shopping)；社會性購物(social shopping)；滿足購物(gratification shopping)； 11.

(19) 的感覺與印象。根據 Vrechopoulos、 O＇Keefe、Doukidis 及 Siomkos(2004)，研究不同虛擬商店的外觀呈現，發現不同的介面(Layout)設計會影響消費的購買意願。其中，商店形象(Store image)是影響消費行為的重要因素，而環境、介面設計為其關鍵性的決定因素。電子商務網站介面美感已逐漸受到學者的關注。Jennings(2000)指出，愉悅的視覺性是相當重要的，因為它們能創造良好的第一印象，讓使用者更進一步去探索，而運用至電子商務中可刺激使用者達到最終的消費目的。Ranganathan 和 Shobha Ganapathy (2002)研究認為，傳統商務強調的氣氛線索，同樣可以運用在線上購物環境中，商務網站的設計在吸引客戶上門、維持客戶持續消費與留住客等方面扮演了一個十分重要的角色與地位。因此，透過適當的介面設計，電子商網站可以產生好的視覺吸引力，提升購物經驗的愉悅程度，影響消費者心情並產生對這個網站的形象感知。. 2.1.1 深思可能模式(Elaboration Likelihood Model) 另外，若自訊息說服理論觀之，在廣告學中，Petty 與 Cacioppo 在 1986 年提出「深思可能模式」 (Elaboration Likelihood Model)，主張說服訊息影響使用者的態度產生有兩種路徑－中央路徑(central route)及周邊路徑(peripheral route)（林東泰，1999）（圖 2）。中央路徑是指，訊息說服效果產生於使用者詳細檢視資訊內容、訊息的主張及其他與議題相關素材(O＇Keffe，2002)。因此，中央說服路徑強調，使用者傾向以理性方式處理說服訊息，重視實質效用問題，舉例來說，好不好用、是否符合需要等。周邊路徑是指，訊息說服效果產生於接收者以簡單的決定法則或經驗法則(Heuristic principle)去評估，另外，相關研究更指出傳播訊息本身的吸引力(Attractiveness)可以增加說服力(O＇Keffe，2002)。所以，周邊說服路徑強調，使用者傾向根據一些感性的情境因素做為簡單的推論判斷，如外觀、特色. 12.

(20) 等。由此可知，說服取向有中央路徑及周邊路徑，其說服訊息呈現的方式分為理性與感性兩大取向。在早期電腦資訊科技領域中多半強調系統效能的開發及效率問題，即為所謂之使用性(Usability)(Nielsen, 2000)。網路商品的訊息呈現策略多以理性訴求，的確能符合中央路徑的說服取向。然而，近年來，電腦成為日常生活的大眾化工具，資訊科技巿場也轉向以使用者為中心之觀點，圖形化使用者介面(Graphics User Interface，GUI)成為標準的操作形式。資訊環境的設計開始注意情境因素及著重情感之訴求。簡言之，網站介面設計不應只是局限在效用功能之議題上，情境因素如氣氛、美感等形式面向都需納入探討。. 13.

(21) Sense. Sensibility. 圖2、深思可能模式圖資料來源：Elaboration Likelihood Model (Moore, 2004). 14.

(22) 2.2 理性(Sense)VS.感性(Sensiblity)－功能與形式爭議產品的功能(Functionality)與形式(Form)到底何者比較重要？從產品設計角度來看，產品的價值是經由使用而彰顯出來，因此產品設計的主軸是聚焦於產品功能性設計及易於使用(Ease to use)的概念。相反的從使用者角度觀之，產品的價值可由外觀形式所帶來的美感與愉悅而顯現，對產品評判的重心在於形式美感及樂於使用(Joy to use)的概念。許多學者認為，「易於使用」與「樂於使用」這兩個概念要分辨清楚(Hassenzahl, Platz, Burmester and Lehner, 2000)。理論上，易於使用 (Ease to use)暗示了效率化，有時與形式美感(Aesthetics)、好玩吸引性(Fun)等概念是相矛盾。因為，當把某樣東西盡量效率化時，可能會犧牲形式美感或使它變得越無趣。因此，過去使用者介面(User interface) 或產品設計領域中，使用性議題總是被視為最重要的層面，而美感則是次要的議題，或者有時在使用者介面設計注意要點上，兩者是互相競爭的(Kallio, 2003)。一般而言，早期大家對產品的概念界定為協助人類的工具，覺得一件產品用起來沒什麼大阻礙就可以了。在機械或電子產品時代，設計師強調的不外乎是產品功能，如識別性、使用性、人因等問題（歐世勛，2004）。延伸至資訊時代，數位科技產品談論的仍是使用性，如人機互動介面、使用者中心設計，往往忽略產品形式與美感所影響使用者情感性部分，再加上 Norman(1990 )大力提倡使用性的重要性，從各方來看，功能使用性已經凌駕於形式美感之上。但實際上，即使擁護使用性如 Norman 者，亦於其 2004 的新書《Emotional Dsign》中承認，其過於武斷的單獨強調使用性而忽略情緒因素，影響所及，後續的學者與研究過半太著重於使用性，而對影響使用上的主觀情緒因素甚少注意。科技的進步及普及，個人與資訊產品的互動性提高，每個人都具備有一定的科技使用常識，使用科技產品已經不是好不好用的問題，往往在於個人願不願意使用的問 15.

(23) 題。Norman(2004)認為，傳統上使用者中心設計的程序已逐漸由「物件」設計，重視好不好用、會不會出錯、是否符合人因等問題，轉向關心人的情感、感受、經驗等層面。再者，產品定位是實用工具或消費符號、是工作或生活娛樂性質之間的界線愈來愈模糊。以手機為例，以工具角度來說若要容易使用操作方式就必須一致，但目前手機並不具有標準介面，精通某一款手機介面操作並無助於使用不同款式。正因為手機不再是單純打電話聯絡工具，某種程度它已成為流行配件一部分。可知，手機已從單純的工具性產品漸演化為兼具消費娛樂性質產品，為了吸引消費者目光，物品的設計必須多樣性，不僅是功能性考量，還需兼顧形式性，是故設計講究的大多是非理性、感官的魅力。同樣地，當許多產品或網站的功能不局限於工具上，介面設計多樣化與操作簡便性之間固有的衝突就會出現。簡而言之，近年來不論是那一種類的產品設計領域，很明顯設計的方向除了先前一直受到討論的功能性之使用性設計外，現在愈來愈多學者開始關注形式層面的探討，如美感和情緒議題。. 16.

(24) 2.3 情緒 2.3.1 情緒定義什麼是情緒(Emotion)呢？情緒是對於一個事件的反應，而且被視為與其需求、目標或個人所關心的所有相關，包括生理的、情感的、行為的與認知的成分 (Brave and Nass, 2003)。情緒的產生有天生俱來觀點與後天學習觀點，不論兩者的說法如何，基本他們都認同，所謂基本共通情緒的存在，包含恐懼、生氣、悲傷、快樂、厭惡、興趣和驚訝(Brave and Nass, 2003)。依據情緒向度理論(Dimensional theories of emotion) ，認為情緒是由多個面向構成，大致可分為悅愉度 (Pleasure/valence)、覺醒強度(Arousal)、控制(Dominance)，悅愉正負向(Pleasure/Valence) 是指連續情感反應範圍從「愉悅正面性(Pleasant/positive)」到「非愉悅負面性 (Unpleasant/negative)」；覺醒強度(Arousal)是指連續情感反應範圍從強度高的「精力(Energized)、興奮(Excited)、活潑(Alert)」到強度弱的「冷靜(Calm)、昏沈(Drowsy)、平靜(Peaceful)」，至於 Dominance 是指連續的測量其終點是控制 (In-control)與失控 (Out-of-control)，這個面向一般較少被提及(Lang, Dhillon and Dong, 1995)。以往心理學研究趨勢將情緒放在和認知(Cognition)對立的位置上。情緒被視為熱性(Hot)、動物性(Animalistic)、激動性(Irrational)，而認知則被視為冷性(Cold)、人性化(Human)、邏輯性(Logical)( Norman, 2004)。這樣的對比之下，過去認知心理學研究都強調理性與邏輯性的推理，因此將情緒摒除在認知之外，甚至情緒被視為是人類演化過中殘留未進化的動物性，由於承襲自動物的遺產而受到忽略。情緒與認知關係在近幾年的心理學與科技場域研究中，許多學者開始陸續提出一個相當不同的觀點，情緒是認知不可分離的，一個人在從事行為活動時，是無法不涉入個人情緒系統，甚至在某些情況下，往往是潛意識的涉入情緒因素(Picard, 1997; Norman,2004)。 17.

(25) 根據相關研究指出，訊息處理系統包括認知與情緒等二種系統。Norman(2004) 認為，情緒此種資訊處理系統，與認知類似但不相同。有別於認知，情緒的作用更為迅速，它的角色是進行好壞的判斷，涉及了價值的判斷但卻不能做意義的判讀，因此需要經由認知系統才能理解並詮釋這個世界，而這個過程是需要時間。另外，情緒系統會影響認知系統的操作(Norman, 2004)，我們做每件事或進行思考時，可能會不自覺地參雜情緒在其中。情緒有時也會改變個人的行為，像是感到驚嚇時肌肉會緊繃；感到快樂時人會放輕鬆。過去情緒面向的研究多專注於負面情緒，如恐懼(Fear)、生氣(Anger)、挫折感(Frustrate)等，較少正面情緒的討論，如快樂(Happiness)、愉悅(Pleasure)、有趣(Fun)等(Dillon, 2001; Jordan, 1998)。事實上，研究發現，即使最輕微的正面情感性狀態也能顯著的影響表現，如思考解決問題更有彈性與效率，影響他們的滿意態度，還能夠導致有效率與創造性(Brave and Nass, 2003)。是故，情緒又重新被定位，它不是邊緣化及摒除在認知之外，而情緒討論也不應局限在負面情緒，因為正面情緒比負面情緒更重要，其對行為表現有正向的影響。. 2.3.4 情緒設計的重要以往人機互動領域中，一個被視為基本的例外：使用者必須捨棄他們的情感、情緒，強調於非情感性關注，如工作效率與電腦理性互動。所以，在 HCI 領域中情感(Emotion)往往被邊緣化並且是矛盾對立的。然而，在近幾年關於人、電腦及情緒之間關係的研究中，部分學者提出一個相當不同的觀點，認為情緒是不可捨棄不談論，而正面情緒能對認知及行為產生有益的影響，在電腦相關、目標導向的活動中，如線上購物、網路搜尋、寄送電子郵件、遊戲等，情緒扮演了十分關鍵重要的角色(Brave and Nass, 2003)。 1. 設計層面：. 18.

(26) 由於情緒的重新被定位，HCI 設計議題從過去的使用性設計擴大至情緒設計的探討。是故，部分學者提出超越使用性(Beyond usability)的想法，趨使人機領域研究由使用性基礎取向(Usability-based approaches)轉為情緒性的愉悅基礎取向 (Pleasure-based approaches)，強調人的生理與心理的通盤考量(Sevener, 2003; Dillon, 2001; Jordan, 1998)。再者，由近年來的一些設計趨勢與作品可以看到，人性與情感的因素在產品設計中漸受重視。過去使用性設計研究趨向人理智的部分，合理性常常是首先考量的，因為它影響能容易實行且電腦可模擬的解決方法，或經由合理的分析來達成容易的使用。但是，關於人機互動情緒與經驗的關注相對欠缺，歐世勛（2004）指出，使用性也許是設計的一個重要考量，但不是唯一的途徑，設計者應開始認識知到情感不是奢侈品，而是必需品。 2. 理論依據層面：從心理學來看，我們從事每個活動都同時包括認知(Cognitive component)與情感(Aaffective component)部分──認知層面涉及意義的解讀，而情感層面則涉及價值的判斷。因此，我們不可能捨棄情感，因為它是必然存在的。更重要的，不論正負面的情感狀況都會影響我們如何思考，尤其正面情緒會對認知與行為表現帶來正向的效果，是故情緒設計的重點則在於如何運用這個特點。如同前述，使用性研究學者 Norman(2004)近年來也體察到這樣的轉變，並對過去所提倡之使用性優先論述，提出修正的看法，主張超越使用性設計並強調未來於研究中應一併探討情緒與正面事物。根據 Norman(2004)指出，情緒系統具影響改變訊息處理模式過程之能力(Lang, 2000)，你在焦慮時的想法，與快樂時的想法會有所出入(Johnson and Sherman, 1990)。焦慮讓你太過於專注在問題上而缺乏彈性。但如果是在快樂時，你就會變得比較有創造力，而且較能容許干擾。是以，若設計時能掌握情緒因素，讓使用者處於愉悅的心理狀態時，相對的使用者會具有較高創造力及表現效率，同時能. 19.

(27) 較能忍受產品使用上問題。. 20.

(28) 2.4 美感設計. 2.4.1 美感定義美感(Aesthetics)是人類在日常生活中最常見、最基本的心理現象，是一種單純而又複雜、具體而又抽象的東西，而人們可以直接具體感受事物，任何人或多或少都具備了審美能力。簡單地說，所謂美感指人對審美對象的外在形式吸引，並打動其情感產生注視的強烈需求，一旦情感、想像和理解到了某種飽和的程度，並與自由的心智達到和諧的程度時，我們便不期然地達到一種精神亢奮的狀態，這就是著迷，它具有強烈的愉快、感動、舒暢的經驗效果（歐世勛，2004）。根據字典(American Heritage Dictionary)解釋，美感定義為「對美與藝術性經驗之心理上反應的研究」。一般而言，美感會被認為是對美麗(Beauty)的事物的知覺與評論，狹義指涉為外表視覺美感(Visual beauty)產生吸引性。然而，Jennings(2000) 認為，進一步擴大美感概念則包括了感知(Perceptional)、情感(Affective)、認知 (Cognitive)三個層面，其形成之過程由感知(Perception)→情感(Affective)→認知 (Cognition)。另外，美感是全面的概念，像是美麗、優雅、酷、崇高、怪異的、幽默的等都是可以是美感的呈現形態，討論的主體擴充至了解藝術與人的感受、學習、生活文化等關係(Matthews, 1999)。. 2.4.2 美感與情緒的關係影響情緒的產生因素很多，其中美感是最常被討論的因素(Norman, 2004 )。為什麼美感能明顯右左人的情緒及帶來愉悅感？根據 Maslow 分析人類的需求可以區分為基本需求與成長需求，一共歸納出八項人類需求動機（圖 3），包括基本需求和成長需求(Benson, Crosier, and Parker, 2004; Huitt, 2004 )： 21.

(29) 1. 基本需求(Basic Needs)： z. 生理 (Physiological)：睡眠休息、飲食、居住(shelter)、性、呼吸等需求。. z. 安全 (Safety/security)：免於危險、一致性可預測的世界(for a predictable world with consistency)、穩定安全感等需求. 2. 成長需求(Growth Needs) z. 社會性 (Social)：需要愛、照顧與被隸屬於某一團體. z. 尊重 (Esteem)：有二個部分，一是自我的尊重，期望有自信及能力。一是尊重他人，期望被接納、名聲、地位等。. z. 認知 (Cognitive)：知識以滿足好奇、探索、發現、智慧性挑戰的需求。. z. 美感 (Aesthetics)：一種環境空間的美感，人有尋求和諧、秩序、美的需求。. z. 自我實現 (Self-actualization)：了解自己濳力以自我實現。. z. 超越(Transcendence)：幫助他人尋找自己潛力及自我實力。. 圖3、修改 Maslow 的人類需求動機資料來源：Maslow's Hierarchy of Needs (Huitt , 2004) 美感是其中人類基本需求之一，Maslow(1999)指出，當某特定情境、事件或物品能促進提升人的基本需求時，就會導致正面情緒的產生，相反地當阻擾了這些需求達成，便會產生負面情緒。是故，因為具有美感的事物能滿足人類基本需 22.

(30) 求，因而帶來愉悅的心理狀況，這也說明了外表的吸引性的確顯著的促使使用時的愉悅度，相對的缺乏美感的吸引性會影響使用時的不愉悅。另外，從需求階層圖來看，從最底部的生理需求到認知需求，這部分是可由使用性(Usability)面向解決的，但較高層次的美感需求等，使用性面向則無法完全滿足。 Norman(2004)曾舉例來說明美感事物能引發強烈和正面的情緒。他曾在廣播節目中介紹 Graves 設計師的作品 Rooster 茶壺，批評它外表好看但卻很難使用，因為特殊的造型很容易造成倒水燙傷。結果，觀眾立即 call in 表達即使如此還是不減他對 Rooster 茶壺的喜愛。他說：「每天早上起床他會用這個最喜愛的茶壺泡茶，一整天心情都會很好。」Norman 反問，難道不覺得 Rooster 茶壺很難使用，他回答，只要使用謹慎一點，但美麗的事物能讓他心情愉悅卻是最重要的事。可見，美感的事物的確能引發人正面的情緒，也可能因此較能容許使用上的不便干擾。從美感特質來看，因為美感特質是很容易達到視覺上的接近，在人與物品互動時很早就被察覺，視覺感知是在與物品互動最初的過程，因此物品的形式美感是影響第一印象形成，並刺激愉悅感產生的主要原因之一。這樣的想法引發後續態度的確立，也就是接受或拒絕一項物品(Sevener, 2003)。所以，Kallio(2003)表示，使用者經驗不再局限於過去的使用性概念討論，美感也是構成使用經驗的元素之一。如同 Norman(2004)所提及，在許多訪談研究中發現美感是一個相當重要卻往往被忽視的議題。就現今消費巿場來看，形式美感已成為吸引消費者的關鍵因素之一，如 Apple 電腦的產品因外觀吸引性而一再的引發革命性消費風潮。. 2.4.3 美感的形式通則美感是建構於人們視覺與心靈感官的感受基礎上，是故如此的感受是主觀的，既然是主觀的，就會對同一個對象有不同美的見解。但美感究竟有沒有通則 23.

(31) 呢？根據現代藝術運動、後現代設計運動及近代美術教育的發展，認為美感在客觀的形式方面是有通則的（楊裕富，2000；Watzman, 2003）。關於美的形式討論，從希臘哲學家亞里斯多德(Aristoteles)以來，康德(Kant)、黑格爾(Hegel)等人皆有深度的研究，經過現代藝術家與設計家不斷整理、討論，美感通則已逐漸形成定論，這些通則就是韻律、對稱、對比、平衡、調合、統一等項目（林品章，1996；楊裕富，2000）：（表 1） z. 韻律韻律依據柏拉圖的解釋指「運動的秩序而言」，而近代 Edgar Willems「韻律. 是指運動和秩序之間的關連」及「韻律動是一種調和」等。基本上，韻律一個從音樂藝術借用的原則，因此，在藝術美感通則中，指涉效果是同樣或相似的元素連續出現及交替，所呈現一略具動態愉悅的感受。依據造形的方法分析，一般可以分成反複、漸變兩種，而這兩種方法又與規則及不規則現象交互使用時，則可發展無限的圖形之可能性。所謂的反複是指，相同的東西重複出現，其中又包含著週期性的意義。至於漸變表現律動的手法，在造形部分，由於使用數字的有規則變化，較容易表現秩序的美感，然而數字變化的比例大小，也能產生不同的視覺效果。除了形的漸變之外，色彩的中的色相、彩度、明度等也可以以漸變方式做出律動效果。 1. 對稱所謂的對稱是指上下或左右相等的圖形，對稱又分為軸對稱和心對稱。軸對稱指形狀能由一個中央軸作鏡射的吻合，如人的五官。心對稱指形狀能由一個點作鏡射吻合，如圓形。另一種區分法則是，上下或左右相等的圖形，稱為實質的對稱；左右或上下並非完全相等，但在視覺上也能產生對稱的感覺時，又可稱為感覺的對稱。簡而言之，對稱原則也是造形統一的重要原則，兼具集中與重複兩原則效果。來說，對稱的圖形具有單純、簡潔的美感以及靜態的安定感。. 24.

(32) 2. 對比對比指兩個性質相反的元素放在一起呈現的美感效果，而可運用在色相、明暗、彩度、質感、形狀、空間等，產生使強者更強，弱者更弱的現象，例如明和暗、粗和細、大和小等。當其中之一單獨存在時，一般較不容易表現出它的特性，但兩者同時出現時，便產生了對比現象，使其互相襯托而產生了對比美。對比的程度不同，強烈對比指性質上極端對立要素並列；中性對比指性質上不同但仍可能和諧兩要素。微差對比則指兩要素稍為不同，與漸變和烘托方式相關。 3. 平衡平衡是指一個形狀、色彩、質感等元素，在整個作品中組織起來達到安定的狀態的視覺平衡。另一種情形，畫面的構成實際上是沒有達到平衡的要求，但卻能使我們在心裡感到平衡的，又叫做不正常的平衡。正常的平衡具有安定、靜態的感覺，不正常的平衡則有不安定的、動態的感覺。在造形上的平衡，是指色彩、明暗、大小、質感等感覺上的均衡狀態，也就是說色彩、明暗、大小、質感會產生不同的重量感，而形成了不同的平衡效果。依據現代造形心理學的探討發現，所有的造形藝術品都是在尋求作品本身的視覺上的平衡，而這種感覺是美感或安全感的很重要的判斷因素。 4. 調和調和原先只是音樂裡重要原則，指兩個音同時出現或前後出現時，能感到愉悅感覺，那麼兩個音就稱為調和或合諧。但在造形上運用到美感通則用來描述形狀、顏色、質感並置時能感受一種雷同的共鳴感覺出現時，有達成秩序化、統一化及優美化的意思。調和通常又和比例、律動、平衡、統一等幾個形式原則具有密切的關係。當構成要素間的比例一致時便能達到調和，若構成的要素過於相似時，便產生了反複，形成律動。而平衡、與統一也與調和在某些層面上具有共通性，例如正常的平衡與統一都可以看作是一種調和。一般來說，調和具有靜態的、. 25.

(33) 愉快的情感，富有女性化的溫和雅緻之美，適合一般大眾品味。 5. 統一統一就是組織具有共通機能的部分，換句話，就是把構成要素做統一性的組織並以一個整體來觀看。統一具有高尚、權威的情感，也可以產生如平衡及調和的美感。達成統一的要素有很多，如顏色、形狀、方向、明度、質感等都具備這方面功能。統一又可以用「支配」和「從屬」來說明。當許多對立的要素一起存在時，互相具有排斥、競爭的現象，這時便需要一個主調來組織它，有了主調便能產生統一性，主調也具有支配的地位，其他部分成為從屬。總而言之，韻律、對稱、平衡、調和基本上是造成秩序、調性的重要原則；對比及漸變是造成變化、活潑化與變調的重要原則（楊裕富，2000）。此外，美的各項形式之間都具有密切關係，如對稱可以達到平衡，平衡又可以得到調和，有秩序的比例構成了律動，均衡的比例也可達到調和，而懸殊的比例又造成了對比（林品章，1996）。再把這些形式原理和統一性比較時，又可發現到這些形式原理都需要統一來完成其整體性，各種形式原理都具有部分的共通性，而這個共通性便是為了達到畫面的完整性，也就是統一。. 26.

(34) 表 1、美感的形式通則. 美感的形式通則秩序調性. 韻律對稱平衡調和統一. 變化、活潑對比韻律. 韻律指涉效果是同樣或相似的元素連續出現及交替，其中反複是指，相同的東西重複出現，可以達到秩序性美感。對稱是指上下或左右相等的圖形，也是造形統一的重要原則，兼具集中與重複兩原則效果。平衡是指一個形狀、色彩、質感等元素，在整個作品中組織起來達到安定的狀態的視覺平衡。描述形狀、顏色、質感並置時能感受一種雷同的共鳴感覺出現時，有達成秩序化、統一化及優美化的意思。統一就是組織具有共通機能的部分，是把構成要素做統一性的組織並以一個整體來觀看。對比指兩個性質相反的元素放在一起呈現的美感效果，而可運用在色相、明暗、彩度、質感、形狀、空間等。漸變是表現律動的手法，數字變化的比例大小產生不同的視覺效果，此外色彩的中的色相、彩度、明度等也可以以漸變方式做出律動效果。. 2.4.4 網頁美感設計原則視覺美感關注的焦點即外觀 (Look) 呈現，這不僅是一個裝飾性的補強 (Aterthought)，而是一個完整性考量過程的結果，而適當的運用美感的形式通則的確能提升視覺吸引力與使用者感知效果。再者，在視覺設計的各類運用與美感的形式通則之間具有密切關係，如版面對齊(Alignment) 可以達到統一；字體運用的大小、顏色差異化可造成對比；圖像的視覺效果一致性可以得到調和及統一等。根據視覺設計原則的文獻整理可歸納，影響美感網頁設計有三個主要因素，即版面安排 (Layout) 、字體設計 (Typography) 、圖像 (graphic)( Watzman, 2003; Williams,1994 ;Matthews, 1999)：(表 2). 1.. 版面安排(Layout) Robin Williams(1994)提出四個適用於網頁設計概念，主要針對版面(Layout). 配置：接近(Proximity)、對齊(Alignment)、重複(Repetition)、對比(Contrast)。顯然地， 27.

(35) 此四個設計概念與美感的形式通則（重複、調和、統一、對比等）多處相符。是故，遵循此設計原則概念，的確能確保設計出吸引人視覺的網頁。以下詳述四個基本的原則： (1) 接近(Proximity) 一般初學者擔心留空過多問題而把過多元素塞在一起，導致版面缺乏組織化。因此設計原則的第一步「接近」，將版面上相關的項目群組起來，成為一個視覺單位，非數個單獨零散的元素，並進而提供視覺線索，以避免資訊散亂。接近原則運用的好處是能產生適當的留白，是有組織、條理化留下視覺呼吸空間。另外，作者強調，所謂的接近概念並不是意味著把所有元素都緊密放在一起，而是在理智上(Intellectually)有關連性種類群組，產生視覺上關係。簡而言之，接近原則的基本目的是組織。一旦版面經過組織化，更能產生更多吸引人且適當的留白美感。運用接近原則應避免的是，避免版面存在過多單獨散亂的元素；避免把東西插放在角落或中間；除非是子集合(Subset)部分，其他元素避免留相等的空間；避免將不相關的元素放在一起。 (2) 對齊(Alignment) 版面上任何東西不是咨意放置，每個項目都是與頁面上其他部分有視覺連結，所以並不是因為版面版好有空間，就隨意丟個東西填空。因為人視覺上喜歡秩序感，對缺乏對齊的版面容易產生不愉快的感覺。是故，對齊原則強調，將每個項目並列對齊在頁面上，成為一個結合性單位。即使這些元素在距離上是各自獨立，但運用對齊原則並列時能產生一條看不見的線將他們連結在一起。一般來說，中間對齊是最常見的，靠中看起來比較正式、平穩，但往往也顯得過於一般、呆板。所以，適當的往左或往右對齊變化，會讓人印象更深刻。換句話，對齊原則的目的是整體性與組織化，重點是利用一視覺上線條(Visual tie)， 28.

(36) 將版面每個部分連結一起，產生所謂的整體性美感。運用對齊原則應避免的是，一個版面內避免使用過多的文字對齊線，如一部分是靠，一部分靠左。 (3) 重複(Repetition) 重複原則主張，重複某些部分以貫穿整個作品，例如重複顏色、字體大小、線條組細、空間關係、設計元素或格式等。重複也可以視為一致性的概念，而且不僅是自然的一致化，還要到所有設計部分的整體化。因此，重複原則的目的是達到整體化與增加視覺趣味性，因為愈有視覺趣味，愈會吸引人瀏覽閱讀。作者指出，簡單的找出存在的重複性，然後再加強它們。此外，應避免過多的重複元素而造成視覺上的干擾。 (4) 對比(Contrast) 對比原則是強化視覺趣味性最有效的方法之一，能在不同元素中創造有組織的階層關係。如果在版面存在兩個不太相同的項目，應該儘量讓它們產生差異化，而且是真正的差異不同。對比原則的目的基本上有兩個，一是產生版面的趣味性吸引人，另一個是輔助資訊的組織性，讓被強調的重點能一目了然。作者也表示，這原則應避免過於微弱不彰的對比，最重要是，既然是差異化，就要真的做到差異效果。 2.. 字體設計(Typography) 字體設計是指文字內容的視覺編排以豐富視覺溝通性(Matthews, 1999)。字體. 不只是建立在識別性(Legiblity)的基礎上，一般設計師把字體視為構成美感的一部分而將字體圖像視覺化處理。是故，字體設計能增加頁面吸引性，不同的文字運用方式能營造出三種不同關係：運用相同大小、字形、粗細等產生調合的關係；運用類似的大小、字形、粗細等產生衝突的關係；運用獨立不同的元素產生明顯的區別對比關係(Williams,1994)。Williams(1994)認為，其中適當地運用對比方式能增加設計的美感與視覺趣味性，而字體對比運用的方式有六種，包括大小、重 29.

(37) 量、字體結構、字體形式、方向與顏色。(表 2) (1) 大小所謂的字體大小的運用產生的對比很明顯。其次，當放大特殊符號字體時，如數字、問號等，能增加視覺上的美感。. (2) 重量至於字體的重量是指筆畫的粗細，一般來說，字體家族設計有各種重量，包含一般、加粗、半加粗、特粗或變細等。 (3) 結構字體結構指字是如何被建構出來，所以可以利用不同字體家族的結構差異產生對比，例如單一重量字體與粗細變化字體。 (4) 形式字體形式是指字母的形狀，不同的字母形狀會產生不同的視覺效果，如大寫字母是方形，小寫字母則是形成不規則狀。 (5) 方向所謂方向是指字體傾斜的角度產生的視覺效果，適當的運用不但能產生對比的美感，還能增加趣味性。 (6) 顏色至於顏色來說，原則是暖色系（紅、橙）較能吸引人注意力，我們眼睛很容易被暖色系吸引，因此運用少量的顏色就能產生對比效果。而冷色系（藍、綠）則是相反效果，所以從大塊冷色系的運用才能產生有效的對比。. 30.

(38) 除了這六項字體對比運用外，Watzman(2003)表示，間距概念(spacing)，如字距與行距也是字體設計考量之一，因為適當的間距能產生留白美感，讓視覺舒服及呼吸空間。 3.. 圖像(graphic) 俗話說「圖片勝過千言萬語」(a picture is worth a thousand words)，意指一張. 好的圖像可以減少對文字(text)的依賴及達成跨文化的溝通。從現在溝通模式可見，人們喜歡運用大量符號、圖像反而純文字少見，主要因為人本來就偏向視覺圖像化東西。根據研究指出，人們喜歡圖像溝通，而圖像視覺(image)所留下的印象效果會比文字來的持久(Watzman, 2003)。可知，圖像運用的確能增加版面變化與活潑性以提高使用者動機而吸引力。圖像設計原則(Graphic design principles)眾多，綜合各學者看法歸納出五項圖像運用原則(Watzman, 2003;Woodburn and Rahtz, 2000；丘永福，1995 )：(表 2) (1) 視覺化程度高(High Visualized Level) 單純的文字呈現較無視覺吸引性，是以設計師喜歡運用圖像與高度的視覺化提高網頁的美感。 (2) 視覺效果的一致性(Consistent Visual Language) 在運用圖片時，建立視覺效果的一致性很重要。也就是，頁面中的每個視覺圖像元素具有風格(style)的一致性，創造統一和諧的美感。例如，網站是可愛卡通風為主，如果穿插一、二張時髦或畫風不同的圖片，那網站整體變得很不協調、缺乏美感。 (3) 圖片完整性(Graphic Completeness) 圖片的畫面取捨要完整，像是繪畫類作品宜整幅呈現，不可隨意裁切，而截取的部分要能表達特寫的作用。此外，圖片的放大小是小對角線為準，避免破壞 31.

(39) 原來的畫面效果。 (4) 在單獨的頁面上不要包含過多的大型圖片(Don’t Iinclude Lots of Large Graphic on A Single Page) 過多的大圖片堆砌在一起會使視覺失去焦點。另外，圖片做穿插搭配能產生韻律美，頁面上各圖片的大小要形成對比，切勿分割成一樣面積，因為圖片處理最忌諱是等分割。是故，單獨頁面最好是不要同時並列太多大型或等分割圖片，而圖片內容也不宜過於繁雜，可以適當運用留白及大色塊產生視覺合諧美感。 (5) 不要讓背景顏色或圖片模糊了文字內容(Don’t Let Background Colors or Graphic Obscure the Text) 把圖片當為背景運用時，圖片本身或顏色過於顯眼會干擾了文字內容呈現，並使網頁美感呈現反效果，故背景與網頁內容應具有明顯的對比效果。. 32.

(40) 表 2、網頁美感設計原則. 網頁美感設計原則即版面安排接近(Proximity) 接近原則的基本目的是組織，一旦. 字體設計. 版面經過組織化，能產生更多吸引人且適當的留白美感。對齊(Alignment) 對齊原則強調，將每個項目並列對齊在頁面上，成為一個結合性單位，目的是整體性與組織化，利用一視覺上線條(visual tie)，將版面每個部分連結一起，產生所謂的整體性美感。重複(Repetition) 重複原則主張重複某些部分以貫穿整個作品，可以視為一致性的概念，其目的是達到整體化與增加視覺趣味性。對比(Contrast) 對比原則指兩個不太相同的項目，應該儘量讓它們產生差異化，其目的是產生版面的趣味性吸引人及組織性。大小運用字體大小產生對比，增加視覺上的美感。重量利用筆畫的粗細產生變化美感。結構形式方向顏色. 圖像. 利用不同字體家族的結構差異產生對比。不同的字母形狀會產生不同的視覺效果。字體傾科的角度產生對比的美感及趣味性。適當運用冷暖色系組合，吸引人視覺的注意力。. 平衡. 統一. 統一韻律. 對比. 對比韻律. 視覺化程度高. 對比. 視覺效果的一致性. 統一調和. 圖片完整性. 對稱. 在單獨的頁面上不要包含過多的大型圖片. 平衡調和. 不要讓背景顏色或圖片模糊了文字內容. 平衡調和. 33.

(41) 2.5 使用性. 2.5.1 使用性定義使用性(Usability)一詞最早被創出來是 1970 年代未期到 1980 年代初期之間，當中以 Eason(1984)與 Shackel(1986)為重要的代表者。早期的使用性作品傾向在以電腦為基礎的使用及辦公室與商業的文本上，這意味，使用性是強調功能性與效用方面。使用性一詞普遍應用於人機介面領域，近年來多位學者對「使用性」一詞有相當多的見解。茲整理如下（轉引自黃足如，2001；童鼎鈞、李傳房，2003； Dillon, 2001）： Booth(1989). 表 3、各家學者的使用性定義產品使用性的程度是依據特定使用者在特殊環境內達成效率、愉快及可接受性的方法。重點在有用性、效率性(容易使用)、學習性、適應性、態度(親和性)，並增加有用性參數來替代適應性。. Davis(1989). 個人相信使用一項科技是輕鬆不費力的事。. Shackel(1991). 使用性定義是指，盡量於人性功能項目中簡易、效率的使用，藉此提供特別的訓練給特殊的使用者。基於此概念發展出四個操作定義：效率性、學習性、適應性、態度，所有要素都是可測量的，因此建議使用系統應經過上列四者的評估。. 小松原明哲(1992). 使用性是指具備了效率好、品質好，不必學習或容易學習，學習之後不會忘記等特質，使用者不會有不愉快而能達到滿足。. Dumas and. 使用性如同人們使用產品而有效地容易達成他們的. Redish(1993). 工作。 34.

(42) Nielsen(1993). 把使用性視為使用者能設法去使用系統的機能，他定義五個屬性效標：容易學習、使用效益、容易記憶、錯誤少、主觀滿意度。. Preece, Jenny(1993) 使用性的意義就是促進人機互動的目標，可以讓使用者安全地、實際地、有效率和愉快執行他們的作業。 Garzotto、Matera. 使用性是使用者以最有效的方法存取他們所要內容. and Paolini(1998). 的能力。如同終極目標在於提供全球資訊網站是必須滿足其可用品質的訂單以及使評價準則的系統方法得以令人注目。. Kromker(1999). 使用性工程是設計出對用戶（使用者）友善的產品和提升的一套方法。. 童鼎鈞李傳房. 使用性既是讓使用者設法去使用系統介面的機能，. (2003). 又可精準地指出使用者與介面之間的關連特性。. 綜合而言，以 ISO 9241-11 定義為代表，從人為主體的設計觀點出發，所謂使用性是指某項產品的特定使用者能以有效、效率、滿意，在一個特別的環境中可以達到特的目標(Usability: the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, satisfaction in a specified context of use. )。. 2.5.2 使用性指標一個最典型測量效度的方法就是依專家知識之定義而取得評量標準。根據 Nielsen 提出，評估系統或使用者介面之使用性課題並非單一向度，傳統上主要是由五個指標所組成的，分別為可學習性、效率性、可記憶性、錯誤率、滿意度（童鼎鈞、李傳房，2003；Nielsen, 1993）： 35.

(43) 1.. 可學習性(Learnability) 系統應該讓初次使用者容易於學習，並且讓使用者能很快開始使用此系統完. 成任務。所以，可學習性是從生手經驗角度來看，也就是初期的學習曲線，在短時間內就能達到合理的使用熟悉度。. 2.. 效率性(Efficiency) 系統應該能有效率的使用，當使用者一旦學會了如何使用系統後，便可以很. 快得到高效能的表現。並且，效率性是指在一段時間學習曲線趨平緩後，專家表現穩定情形的程度。. 3.. 可記憶性(Memorability) 系統應該易於記憶，即使使用者在離開此系統一段時間後，再回到這個系統. 時，不需要從頭學起。. 4.. 錯誤率(Error rate) 系統應該有較低的錯誤率，讓使用者在使用系統時，能預防、避免錯誤，即. 使犯錯也能輕易地有更正機會。另外，最重要的應避免毀滅性錯誤發生，導致無法彌補的結果。. 5.. 滿意度(Satisfaction) 系統應該使用起來很愉快，有高度的使用意願，讓使用者使用時能主觀滿意. 這個系統。其中，滿意度指標有別於前四項強調的客觀性。使用者與系統互動時與主觀態度相關的反應或情緒因素等，皆被假定可以為所謂滿意度來概括 (Sweeney, Maguire and Shackel, 1993)。使用者滿意度雖被定立成主觀判斷的依據，被用來評量使用者對其資訊系統或操作介面的感覺，但基本上仍不脫使用性角度的觀點， 36.