介面設計

一、 心理模式

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）。視覺設計利用色彩、文字、圖像 及符號提升網站的吸引力，導覽設計則旨在建立完整的資訊階層，讓使用者得以 迅速找到目標資訊，資訊設計乃清楚傳達資訊內容，並提升其內容豐富度。整體

Newman 與 Landay（2000）表示網站設計包含三個部分：視覺（visual）設 計、導覽（navigation）與資訊（information）。視覺設計利用色彩、文字、圖像 及符號提升網站的吸引力，導覽設計則旨在建立完整的資訊階層，讓使用者得以 迅速找到目標資訊，資訊設計乃清楚傳達資訊內容，並提升其內容豐富度。整體