介面設計原則

介面設計（Interface Design）分為使用者介面設計、圖形化介面設計、人機 介面設計、網頁多媒體介面設計…等。

Nielsen（1993）針對使用者介面評估提出學習性 (Learnability) 、效率性

（Efficiency）、記憶性（Memorability）、錯誤率（Errors）及滿意度（Satisfaction），

此五項說明了介面設計的重要性。首先，學習性上應該要易於被學習，而能讓使 用者快速的開始利用此產品學習；讓使用者在學會後，應有效率的使用；幫助使 用者記住事情，讓使用者在沒有使用它後，不需再重新學一遍；讓使用者在操作 中幾乎不會出現錯誤，即使出錯也能容易的恢復；在操作上能讓使用者感到滿意 而且喜歡它，這就達到使用者介面評估的效標。

GUBloopers 一書中也提到，使用者介面設計應容易學習(easy to use)、有效 的學習(efficient to use)、減少錯誤率(few error)、個人的滿意度(subjectively pleasing)及容易記憶(easy to remember)(Johnson,J.,2000；引自江翹竹，2006)。在 這五項中就有四項與 Nielsen 所提出的相互呼應，也就是說介面設計原則中，學 習力、有效率、錯誤率及滿意度，非常重要且需注意的設計原則。

Shneiderman 最重要的八個使用者介面設計準則（李易修，2005），讓使用者

在使用選單、提示及說明文件中，有一致性的操作，取得一致性。

當使用頻率增加時，使用者會希望減少互動的次數、讓每次的互動能夠一次 做更多的動作，像是捷徑、快速鍵與功能鍵等。在使用者做出一些動作時，系統 提供回饋，越頻繁的動作，回饋的強度可以低一些；越重要或不尋常的動作，其 回饋強度應該要顯著一些，提供有意義的回饋。

一串的動作應該被組織成開始、中間、結束三部份。當動作結束的時候，要 提供回饋讓使用者知道動作已經完成。在做下個一連串的動作之前，先告知使用 者整個流程，能夠減輕使用者的壓力、提高滿意度。

最好不要讓系統有嚴重錯誤的可能性，如果還是造成錯誤，系統應該能夠偵 測出出來，並提供一個簡單、使用者可以理解的錯誤處理方式。回到上一步的功 能可以減低使用者的焦慮，因為使用者隻到做錯了可以重來。這個功能鼓勵使用 者探索不熟西的選項。回到上一步的功能，可以包含一個、或是一連串的動作。

有經驗的使用者強烈的感覺到他們在控制系統，做出動作之後，系統提供回 饋。系統設計上要讓滿足使用者控制的需求。人類的短期記憶有限，因此顯示要 保持簡單、同時能顯示多頁資料以減少視窗切換頻率，減少記憶指令和動作順序 的時間。

100 個影響認知、增加美感，讓設計更好的關鍵法則（William Lidwell、Kritina Holden & Jill Butler，2008），從 100 個法則中找出 10 個與手機介面設計相關之 法則，整理如下：

1. 容易使用（Accessibility）：設計的東西和環境應該要能讓人使用，而不需 要修改，並且給愈多人用愈好。

2. 美就是好用的效果（Aesthetic-Usability Effect）：美的設計，被認為比較 為不美的設計更好用。

3. 功能可見性（Affordance）：一種特性；物品或環境的實質特性，會影響 到它的功能。

（Closure）一種傾向；看到一組單獨元素，把它當做一個可辨認的

圖案，而不是多個單獨元素。

5. 顏色（Color）：在設計上用顏色來吸引注意、集合元素、表示涵義，以及 增加美感。

6. 一致性（Consistency）：當類似的部分，用類似的方法表現時，系統就更 好使用了。

7. 形象-背景關係（Fiure-Ground Relationship）：認為元素不是形（焦點物 件），就是景（剩下的可感知範圍）。

8. 圖像表徵（Iconic Representation）：用圖像加強辨識，以及對標誌及控制 的回想。

9. 容易辨識（Legibility）：文字在視覺上的清晰程度，通常是基於字元大小、

字體、對比、文字區，以及空格所造成。

10. 圖優效果（Picture Superiority Effect）：圖片比文字容易記憶。

Jakob Nielsen and Marie Tahir (2001)在「Homepage Usability: 50 Websites Deconstructed」一書中提到「113 首頁可用性設計準則」，指引設計者明確的方向，

在 113 項的準則中找出與本研究相關之介面設計原則，如表 2.1。

針對手機介面之可用性設計中，準確傳達網站設計的意圖，清楚的設計及界 定出手機主頁的專屬版面；導覽區中使用圖示可以協助瀏覽者立即分辨出來才使 用該圖示；在手機主頁提供工具與工作捷徑，是屬於常用功能鍵或重要的捷徑以 便使用者馬上找到；在圖像與動畫中，按鈕圖像無法清楚表示所代表之內容，可 加以標示並說明；圖形設計中過度設計的文字會降低文字的重要性，所以設計出 符合按鈕圖形之大小；使用者介面工具集中，確認使用者介面都是可以點選的，

例如圖形化的項目符號。

表 2.1 可用性設計準則

準確傳達網站設計的意圖

1 清楚而適當的在網頁明顯的版面位置呈現公司名稱與標誌

2 涵蓋一段簡單而明確的副標題來說明網站或公司性質

12 導覽區的分類選單中，不要使用捏造的文字(例如：uCommerce)或難以理 解的文字(例如：Zeether)

26 使用對比強的文字與背景顏色，讓字體盡可能的清楚 27 避免在 800x600 螢幕解析度的網頁出現水平捲動 28 將最重要的內容在不須捲動的情況下呈現出來

29 採用不固定的版面設計，如此首頁的大小才會隨者螢幕解析度的大小作調 整

30 審慎的使用商標

使用者介面工具集

31 確認使用者介面都是可以點選的，例如圖形化的項目符號

32 避免在首頁使用多個文字輸入方塊，尤其在網頁上方，以免與搜尋功能混 淆

33 審慎的使用下拉式選單，特別是當選項本身無法充分說明時。若選項太少 時，就直接列出來。也不要太長，此將不利於瀏覽者的操作

資料來源：Nielsen, J. and Tahir, M.(2001).