網頁設計

一、 網頁設計研究

自從全球資訊網(World Wide Web)在90年代出現後，各種網站設計的相關研 究便應運而生。Powell(2000)提出了網站設計金字塔的概念，呈現出各個網站構 成要素之間的關聯。他說明網站設計中內容(Content)、目的-經濟

(Purpose-Economics)、形式-視覺(Form-Visuals)和功能-技術(Function-Technology) 之間的關係：「內容」(Content)要幫助設計者(Designers)提供資訊及說服使用者 (Users)；「技術」(Technology)負責建構網站的功能(Function)；「視覺」(Visuals) 提供了網站的形式(Form)；「經濟」(Economics)則是整個網站架設的目的 (Purpose)，但對某些網站來講這並非絕對－如個人部落格的目的可能只是單純的 社交功能、自我展演等。

圖2-2 網頁設計金字塔(Powell, 2000)

國內外關於網站設計的研究相當多，其中Newman & Landay(2000)在

「Sitemaps, Storyboard, and Specifications：A Sketch of Web Site Design Practice」

一文中訪談了十一個來自不同專業經驗、專業背景與從事職務的網站設計研究者 後，整理出當前網站設計研究的三大面向，分別是導覽設計(Navigation Design)、

資訊設計(Information Design)和視覺設計(Visual Design)。

導覽設計(Navigation Design)的目的是要規劃出一套完整且正確的組織架構 以協助使用者迅速找到所需要的資訊；資訊設計(Information Design)是要讓網站

的內容能夠被完整且清楚的傳達；視覺設計(Visual Design)則是要運用色彩、影 像、文字及編排等方式來讓畫面更有吸引力，並使網站設計更容易被理解。類似 的概念也有Daniel(2000)網站設計的內容(Content)、視覺呈現(Visual Appearance) 和可用性(Usability)三要素，與Newman & Landay的看法不謀而合。

圖2-3 網頁設計中三大面向間的關係(Newman & Landay, 2000)

圖2-3呈現了各領域之間的關係，可以發現這三大面向又整合出了使用者介 面設計(User Interface Design)和資訊結構(Information Architecture)兩個向度。表 2-2則是本研究針對不同學者所提出的網站設計面向所整理出來的對照表格。

表2-2 不同學者提出的網站設計面向整理

Powell(2000) Newman & Landay (2000)

Daniel(2000)

形式-視覺(Form-Visuals) 視覺設計(Visual Design) 視覺呈現(Visual Appearance) 功能-技術

(Function-Technology)

導覽設計(Navigation Design)

可用性(Usability)

內容(Content) 資訊設計(Information Design)

內容(Content) 目的-經濟

(Purpose-Economics)

可以發現除了網站依據其目的(多為業主所掌控而非設計者)所提供的資訊與

上。這也衍生出來網頁設計領域長久以來關於「易於使用」(Ease to use)和「樂 於使用」(Joy to use)兩大面向的討論(Hassenzahl, Platz, Burmester and Lehner, 2000)。

二、 從人機互動的使用性觀點看網站界面設計

從前述文獻可以發現，許多學者接指陳使用者介面設計(User Interface)及使 用性(Usability)對網站設計的重要性；這也代表對資訊系統設計領域來說，人機 互動(Human-Computer Interaction, HCI)的概念越來越受重視。根據Preece(1994) 的觀點，所謂人機互動指是一種以電腦為基礎的互動模式，對設計者來說亦是整 個設計過程中最重要的基本原則，其目的在於幫助並確保使用者在使用資訊系統 的過程中能夠獲得很好的效率和安全性。在網站與網頁設計的技術要求越來越高 的時空背景下，網頁設計人員對網頁人機介面互動使用性(Usability)也越來越加 重視；也因此自1990年代以來人機互動的開始大量被引用在網站設計領域，並發 展出獨特之論述，稱為網站使用性 (website usability)(Pearrow, 2000)。

當代的網路設計已不再僅限於關注程式設計等技術層面的問題，在網站與網

關於使用性的測量，ISO 9241-11(1998)曾建議應包含：

 有效性effectiveness：使用者利用系統來完成任務的能力，以及任務成果的 品質。

 效率efficiency：執行任務所耗費的資源層級(通常是時間)

 滿意度satisfaction：使用者使用系統後的主觀反應。

Nielson(1993)則更進一步將系統評估與使用者介面使用性分成五大指標來 探討，分別是：

 可學習性(Learnability)：系統應能讓初次使用者易於學習且能輕易上手完成 任務。

 效率性(Efficiency) ：系統應能有效率的被使用，使用者一旦學會了如何使 用系統之後，便可快速獲得高效能的表現。

 可記憶性(memorability)：系統對使用者來說應該易於記憶，不會因為一段時 間未接觸就對系統操作感到生疏。

 錯誤率(Error)： 系統應擁有較低的錯誤率，讓使用者不會在使用系統時能 夠預防、避免錯誤的發生；即使發生操作錯誤，也能夠迅速的進行更正。

 滿意度(Satisfaction)：系統應能讓使用者在主觀上滿意系統、感到愉快且願 意使用。 域來說，介面研究已從早期的使用性導向(usability-based)轉向愉悅性導向

(pleasure-based)；然而這並不代表視覺形式上的情緒感受取代了使用性，使用性

與美感等心理、情緒因子等考量並不衝突(林珮雯，2004)。由於情緒系統會影響 認知系統的操作(Norman, 2005)，所以好的情感設計也會影響到使用者對系統使 用性的認知。Isen(2000)研究指出，美感所帶來的正面情緒影響有助於使用者做 決定與激發他們的創意，因此經由介面美感對使用者所產生的正面情緒影響有助 於改善使用者的表現。Tractinsky、Katz 及 Ikar 等學者(2000)研究發現，對系統 介面好不好用的第一印象與實際使用後滿意程度有高度相關，顯示第一眼視覺上 的情緒感受是會影響使用者對系統整體評量的重要因素。(關於情感設計與情緒 的部分，還會再於第三第四節進行更進一步的探討)

由於使用性有其限制與不足，許多研究者便開始解構使用性的概念

(Tractinsky, 1997; Kurosu & Kashimura,1995 )。他們將使用性的概念區別成三種類 型：

(一) 固有使用性(Inherent usability)

是指設計者依據客觀的理論與原則所建構出來的系統介面或產品的使用 性；因此屬於發展初期設計者所賦予給介面或產品的使用性，較注重系統的 功能。

(二) 表面使用性(Apparent usability or perceived usability, 又稱感知使用性) 從使用者主觀觀點出發，依據使用者所能察覺或感知到介面或產品是否好 用，因此偏向較為表面化的使用者感知，較注重系統的形式。

(三) 實際使用性(Actual usability)

是在使用者經過實際操作後所產生的使用性結果，這包括來自於各種客觀數 據上展現的使用者表現(如操作時間及績效)，以及使用者主觀上的使用性滿 意度評量(例如使用者美感上的感受)。

值得注意的是表面使用性(Apparent usability)概念的出現。由上述整裡可以發 現表面使用性與使用者第一時間的主觀感知高度相關，也因此產品或系統在較表 面的視覺形式上對表面使用性的影響最大。許多研究皆顯示，產品的固有使用性 並不一定會影響使用者對產品表面使用性的認知。Kurosu & Kashimra(1995)便指 出，固有使用性對感知的表面使用性或吸引性的辨別並沒有太大的影響。這極大 的挑戰了原本人機互動領域對於使用性的概念：產品或系統的固有使用性會影響 使用者對實際使用性的感知。

相對的，許多研究皆顯示表面使用性的好壞對於實際使用性認知會產生可能 的影響。Norman(2004)便曾在其「情感設計」(Emotional Design)一書中指稱，物 品的外觀會影響使用者對產品好用與否的認知，例如外觀經過整理、清洗和打蠟 過的車子會讓人覺得比較好開－雖然他還是原本那輛車子，機械構造和操作上並 無不同(固有使用性相同)。Tractinsk等學者(2000)也發現，對系統或介面好用與 否的第一印象與實際使用後滿意度有高度相關，顯見表面使用性對實際使用性的 認知有著重要的影響。

那麼，哪些因素會影響使用者對產品或系統表面使用性的感知?顯然的，視 覺呈現上的形式對使用者的表面感知有著直接的影響。Kurosu & Kashimra(1995) 的研究指出，介面美感的判斷與表面使用性有高度相關；Tractinsky(1997)雖然質 疑美感的感知可能會受使用者文化背景所影響，但同樣進一步證實兩者之間的關 連性；這都顯示介面不同的視覺呈現風格對於使用者表面使用性認知的關連：

Hassenzahl (2004)進一步指出，影響表面使用性的因素很多，不同使用者可能會 對同樣的視覺呈現有不同的感知。為了釐清各種視覺要素對於使用者表面使用性 感知的影響，使用者所感知到的呈現風格(Presentational-Style)的概念會是更合適 的選擇。關於風格的定義與相關研究，將於下一節進行更深入的探討。

第三節 網頁設計風格