人機介面互動

根據Shneiderman和Plaisant(2010)在人機介面設計一書所整理的概念，使用 者介面的設計工作已從傳統的電腦，逐漸轉型到社交電腦(social computer)上，改 變了使用者進行溝通與合作的方式。從過去只針對桌上型電腦的應用，現今使用 的群眾能夠自製內容，並在網際網路上與其他的使用者進行交流，並且也應用在 社交網絡媒體上，目前更是透過各式的行動裝置 (例如：Apple、Android、

Blackberry、Windows Phone等)呈現給使用者。研究者與使用者介面設計者已經 開始透過更先進的技術來滿足使用者的需求，根據實驗心理學的理論與社會科學 領域的工具，透過人機互動(human-computer interaction)建立跨領域的設計科學，

整合各領域專家的想法，並在越來越興盛的社群媒體傳播影響下，研究者與設計 者收集出更多在介面設計上的新想法。從早期使用者主要使用電腦的時代，就已 經有介面設計者寫下指導方針，幫助未來的設計者建置介面，讓設計者對輸入或 輸出、運作、硬體裝置皆能有詳細的討論(Galitz, 2007; Lynch & Horton, 2008)。

Shneiderman和Plaisant(2010)整理出以下的指導方針：

(1) 使用者介面瀏覽：對許多使用者可能在瀏覽介面時覺得太困難而產生困 擾，因此如果能夠提供使用者明確的設計規則，將能協助他們了解介面。因此美 國國家癌症協會(national cancer institute; NCI, 2006)近年來致力於協助政府單位 設計教學性網站亦提出以下的指導方針(NCI, 2006)：

1. 標準化工作順序：

讓使用者在類似的條件下能以相同的順序與方式去執行工作。

2. 確保具有描述性的嵌入連結：

若有使用嵌入的連結，則連結的文字應明確標示讓使用者瞭解其連結的 目標。

3. 使用獨一無二且描述性的標題：

標題應該是獨一無二的，標題與描述的內容應避免相關。

4. 用單選按鈕表示互斥的選擇狀況：

23

讓使用者從互斥的選擇中，選擇一種回應的選項。

5. 提供能夠正確列印的頁面：

如果使用者想要列印時，不管是列印一頁或多頁，需提供符合列印大小 的頁面。

6. 用縮圖來預覽較大的影像：

當沒有立即觀看原始影像大小的需求時，僅提供影像的縮圖。

(2) 組織其所顯示的內容：顯示畫面的設計是一個很重要的主題，包含了許 多例子。Smith和Moiser(1986)提出了以下五個資料顯示的指導方針：

1. 一致性地顯示資料：

在設計時應針對術語、縮寫、格式、色彩與大小等都應該要標準化。

2. 讓使用者有效率地接收資訊：

使用的格式應該符合使用者的習慣，而有一些規則能遵循，如提供簡潔 的資料欄位、字母與數字向左對齊顯示、整數向右對齊、小數點對齊、

提供適當的間距、使用易理解的標記、適當的測量單位等。

3. 讓使用者僅有非常小的記憶負擔：

設計者應設計的每一個畫面，都應該包含上一個畫面的資訊，讓使用者 不需做額外的記憶。而任務的安排上，應該盡量減少操作次數，以避免 忘記中途某個步驟的情況產生。對於初學者或是中階的使用者，應提供 常用的標籤與格式。

4. 資料顯示與輸入的相容性：

資訊顯示的格式與資料輸入的格式應做連結，且儘可能讓輸出欄位也能 夠進行編輯。

5. 使用者能夠控制資料顯示的方式：

使用者能夠以最簡單的方式得到他所想要的資訊，例如：使用者能夠輕 易地改變欄位和列顯示的順序。

24

(3) 吸引使用者的注意：雖然大部分呈現給使用者的資訊為一般的使用狀 況，然而呈現給使用者還包含一些例外的情況與時間相關的資訊。為了吸引使用 者的注意(Wickens & Hollands, 2000)，以下為吸引使用者注意者應用的一些技巧：

1. 亮度：

使用較高亮度的設計方式來吸引使用者的注意。

2. 標示：

例如加底線、方框、以指標來指明，或是應用指示符號如星號、加號、

項目符號等。

3. 大小：

最多使用不超過四種大小的尺吋，並且透過較大的尺吋來吸引使用者的 注意。

4. 選擇字型：

最多使用不要超過三種字型。

5. 影像反白設定：

運用反轉的顏色。

6. 閃爍：

閃爍顯示或是在指定區域閃爍變換顏色。

7. 顏色：

最多使用不超過四種標準顏色，並保留一些其他的顏色以運用在突發的 狀況。

8. 聲音：

以柔和的聲音作為肯定的回饋，以刺耳的聲音作為突發狀況時的警示音。

(4) 協助使用者進行資料輸入：使用者經常在資料輸入時耗費大量的時間，

原因可能是在過程中發生問題。Smith和Moiser(1986)提出了以下五個協助使用者 資料輸入的指導方針：

1. 一致性地處理資料輸入：

25

讓使用者在任何狀況都是以類似的操作順序來操作，因此定義的符號與 縮寫等都盡量要類似。

2. 減少使用者需要輸入動作的次數：

第一點應減少使用者輸入的次數，讓操作更有效率，亦能減少錯誤發生 的可能性。例如：可以將需要輸入長字串文字的欄位，改用單一按鍵、

滑鼠點選或手指按壓來取代。第二點應避免使用者重複進行相同的資料 輸入，將會浪費使用者的力氣且有出錯的可能。系統應提供複製資訊的 選項，且讓使用者仍然可以重新鍵入資料、做複寫的操作。

3. 讓使用者僅有非常小的記憶負擔：

當進行資料輸入時，因避免要求使用者記憶過長的編碼清單或是複雜的 語法。

4. 使資料輸入與資料顯示具有相容性：

資料輸入顯示的格式應該要與資料顯示的格式類似。

5. 控制使用者輸入資料的彈性：

通常熟悉度高的使用者會希望能夠自行控制自己輸入資訊的順序，然而 彈性的操作應用必須小心，因為它有可能會影響一致性的原則。

另外，在過去的研究亦有針對使用者介面的功能性與差異性進行探討，蔡育 珉(2005)將過去文獻中針對功能性與差異性進行整理，歸納出以下使用者介面設 計的原則：

1. 一致與協調性：

當今的產品介面種類眾多，若能讓共同族群使用的產品在介面設計尚有 一致性，將能夠減少轉換到其他不同製造但是是相似產品需要花時間學 習的時間。協調性部份表示介面圖示與整體環境，應要避免太過突兀或 是不清晰的情形。

2. 清楚易懂且容易學習：

介面設計需要考量到不同年齡層、族群、文化的使用習慣，讓這些使用

26

者皆能快速理解介面上的功用與操作方式。需要減少需要學習的時間，

最佳的方法就是讓使用者能看即所見即知道操作的原理。

3. 提示與回饋：

介面設計需具備互動性，即能夠適時提供使用者需要的訊息與資訊。例 如使用者在遇到問題時，能夠適合給予提示的功能與資訊回饋，互動呈 現的方式有許多種，包含聲音、影像、文字等等。

4. 直覺反應：

直覺反應是互動性介面的一個重要因素，因為學習過程難以比上使用者 的直覺反應。因此本研究需根據使用者先天的感覺與目前趨勢學習的經 驗，來作為設計介面的參考。

5. 允許錯誤：

在使用產品時，難免都會有錯誤的發生。然而如何提供適合的互動，讓 使用者在遇到問題時，給予使用者適當的資訊與處理問題的方式是很重 要的。

6. 親和性：

在設計介面時，需考慮到互動的介面是否讓使用者感覺是很有親和力 的、是使用者所喜歡的，以促進使用者願意多使用此產品。

以下是近年來針對行動裝置設計準則提出指導方針的相關文獻，Song等人 (2011)提出五項設計行動裝置使用者介面的準則：

1. 專注在使用者上：

清楚了解學習者的需求，讓學習者認為設計是為他們精心打造的。

2. 正確地呈現：

最常見的操作功能，需要清楚可見、讓學習者容易取得；而較不常見的 功能可以移到menu中。

3. 給予使用者適當的回饋：

至少要包含四種互動User Interface的狀態(例如：default、身心障礙者、

27

年長者)，並保證操作過程的結果都能清楚可見、且適時給予他們一些 操作的提示。

4. 規則式的行為模式：

行為模式須遵循使用者的期待，透過合適的動作來增加功能可見性。

5. 容錯能力

Fu (2010)認為行動電話的軟體已經漸漸地變成直接與使用者溝通的管道，因 此他們提出了三項介面設計的準則：

1. 結構設計

標題盡量避免使用縮寫、顏色樣式在系統中需有一致性，讓不同的學習 者能快速了解系統如何操作。

2. 互動設計

主要指的是要有適合的智慧型人機介面、有溝通的特性，而溝通的類別 如下所示：

(1) 一般溝通：看、聽、說、觸

(2) 主動溝通：透過問問題的方式，和即時地做些調整 (3) 有效率的溝通：敏銳觀察出使用者情緒上的改變與意圖 3. 視覺設計

(1) 軟體最多不能超過五個顏色

(2) 介面大小需要符合美學的觀點(例如：icon要適應電話的小螢幕、影 像品質要夠清晰)

(3) 前端與後端的顏色需要夠協調。

現今使用者期待的不只是有著高功能應用程式的手持裝置，而是要有友善的 使用者介面(Song et al., 2011)，必須思考的是：如何建置出最適合人們使用的App 行動裝置介面，能夠符合人們真正的使用需求。因此，本研究將參考以上所述關 於人機介面相關的研究中，所建議的設計準則。

28

第四節 教學專業知識發展