以使用者行為數據提升操作效率之使用者介面模式

余虹儀 1 陳佑竹 2
1

國立臺北科技大學設計學院設計博士班 博士
2

世成科技股份有限公司 資深系統分析師

yocofish@gmail.com, mouson@gmail.com

摘要
現今許多產品的使用者介面功能日漸複雜化，或是有選項過多、步驟冗長等現象，讓頻繁使用者（frequent user）在操作時容易感到繁複與不耐。本研究旨在提升使用者介面之操作效率與使用者滿意度，透過使用者介面文獻探討與模式
專家訪談，以使用者行為數據（user behavior data）為依據，將使用者較常使
用之功能或服務設為捷徑或推薦選項，提出五個讓使用者可便捷操作的使用者介面模式（user interface patterns），包括預設最常用服務（Default Most UseService）、常用步驟組合（Most Use Steps Combination）、常用捷徑選項（MostUsed Shortcut Option）、常用推薦選項（Most Used Recommending Option）
和位置推薦選項（Position Recommending Option），以減少使用者視覺搜尋及
決策時間，也較能接近使用者期望。
關鍵字：使用者介面模式（user interface pattern）；使用者行為數據（userbehavior data）；捷徑（shortcut）；推薦（recommendation）

一、 前言科技進步，許多產品的功能越來越多，導致使用者介面趨於複雜，不論是選
項過多或步驟冗長，都可能會讓使用者在操作時感到繁瑣。特別是有些日常生活
經常使用到的產品或系統，如果無法提供便捷操作的捷徑或功能，對使用頻率較
高的使用者，也就是頻繁使用者，可能會感到困擾或不耐，甚至影響其滿意度。
而近年來，電子商務系統或網站重視使用者經驗，運用使用者行為數據，致力於發展推薦系統。加上人工智慧技術成熟、使用者行為分析和 Google 網路分析等
工具產生，皆讓系統或介面有機會更加貼近使用者需求。基於上述系統與技術的發展，本研究將進行以使用者行為數據提升操作效率的使用者介面模式之建立。

二、 文獻探討
使用者介面以直觀的操作介面來設計是最合適的，因為新手使用者（noviceusers）或偶爾使用者（occasional user）不太可能記住如何使用系統。但經驗豐富且頻繁的使用者在使用這類考量初學者的介面很可能會感到挫敗，而較喜歡
快捷命令和命令形式的介面（Bell, D., 2000）。Shneiderman（1998）提出使用者介面黃金十大原則中，也有指出隨著使用頻率的增加，使用者希望減少互動的
數量，並加快互動的步伐。縮寫和快捷鍵對專家使用者非常有幫助。顯示捷徑（shortcut）對頻繁使用者的重要性。捷徑主要可透過略過步驟或合併步驟，提供使用者完成任務的最短路徑。如果採用群體數據資料，略過步驟就是跳到多數
人常用頁面，或提供多數人常用捷徑，合併步驟則是提供多數人常用流程。如果依個人使用者經驗紀錄，就是提供個人常用捷徑和常用流程等等（余虹儀，2017）。
推薦（recommendations）在網站設計經常可見。使用者需求可以根據目前或其他有著相似興趣的使用者歷史行為，透過系統推薦被滿足，被認為是識別使用者喜好和調整服務的過程（Xu, Zhang & Zhou, 2006）。此外，透過阻擋很少使用的介面功能，新手能夠較快地完成任務，且透過優選資訊可處理資訊負載過度，用以幫助使用者快速查找（Mc Grenere, Baecker & Booth, 2002）。因此，
當選項太多，甚至超過七個時，推薦選項可以減少資訊複雜性，群化選項可以減少使用者的心智負荷。Kathryn Whitenton（2014）也指出提供使用者多個分類的選項是可以幫助更多使用者找到較佳選項的簡單方法，且最重要的資訊應該優先被擺在明顯位置。在使用者介面上若有區分推薦選項和一般選項，可以讓有經驗使用者或熟練使用者更快得到其想要的選擇，其他使用者也能有所參考，加速其決策。
以使用者行為數據在使用者介面應用的模式，在現有環境中仍不常見。本研究以捷徑選項介面設計形式發展出三個介面模式，包括預設最常用服務（Default

Most Use Service）、常用步驟組合（Most Use Steps Combination）、常用捷徑
選項（Most Used Shortcut Option）。以推薦選項介面設計形式發展出二個介面模式，包括常用推薦選項（Most Used Recommending Option）和位置推薦選項（Position Recommending Option），並透過訪談一位模式專家陳建村先生（其經歷見附錄），整理出如下表（表 1、表 2、表 3、表 4 和表 5）的模式描述：
表 1
元素

預設最常用服務模式描述
模式描述（捷徑選項介面設計形式）

名稱

預設最常用服務（Default Most Use Service）

情境當某個服務或功能的使用頻率特別高，但使用者每次都需要經過某個步驟才能操作，對一再重複某個步驟感到不耐。

問題

如何讓使用者直接使用最常用服務或功能，以減少其操作步驟？

解法

直接跳到多數人或個人最常用的服務或功能頁面，讓使用者可以直接操作該項服務或功能，避免每次都要自行選擇。

實例

讓使用者進入最常用的服務或功能頁面，直接使用。

悠遊卡自助加值機讓使用者加值完畢就直接進入不列印收據的加值成功頁面。如果需要列印收據者則要另外再按下加值成功頁面上的列印收據按鈕。（圖片取自悠遊卡自助加值機，2016）。
圖解

系統透過提取多數或個人使用者行為數據，直接提供多數或個人使用者最常用選項
的操作頁面，讓使用者不需要再做選擇，即可開始執行任務步驟。倘若使用者此次不是選用最常用選項，則須回到主選單，重新選擇。

元素模式描述（捷徑選項介面設計形式）

名稱

預設最常用服務（Default Most Use Service）

作用力

優點：
選擇使用頻率特別高的服務或功能時，使用者可直接操作該項目的內容，操作上少一個步驟，縮短其操作時間、提升其操作效率。

缺點：

不是選擇使用頻率特別高的服務或功能時，使用者需要多一個步驟，重新選擇
其他服務或功能。

當介面或系統有多項服務或功能的使用頻率皆很高則不適合使用此介面模式，否則會讓使用者經常要重新選擇其他服務或功能而增加步驟。採用「常用捷徑選項」模式較佳。

表 2元素

常用步驟組合模式描述

模式描述（捷徑選項介面設計形式）名稱常用步驟組合（Most Use Steps Combination）

情境當常使用的服務或功能形成固定的流程或組合，但使用者每次都需要重新進行相同選擇的操作，對一再重複多個步驟感到不耐。

問題

如何讓使用者直接以一個步驟完成多個常用服務或功能的操作，以減少操作步驟？

解法

將多數人或個人常用項目的步驟合併，直接提供常用服務流程或組合供其選用。

實例

提供使用者常用的服務組合，一次完成多項操作。

有的自動櫃員機會將印明細表和印商品優惠劵合併成一個服務選項，提供使用者一次完成（圖片取自中國信託銀行自動櫃員機，2016）。
圖解

系統透過提取多數或個人使用者行為數據，提供多數或個人使用者最常用選項流
程，讓使用者選取後，可直接完成多項操作。倘若使用者此次不是選擇此流程，則須回到主選單，照原步驟操作。

元素模式描述（捷徑選項介面設計形式）名稱常用步驟組合（Most Use Steps Combination）

作用力

優點：


選擇常用的服務流程或組合時，使用者可一次完成多個項目的操作，跳過多個
步驟，縮短其操作時間、提升其操作效率。

缺點：不是選擇常用的服務流程或組合時，使用者需要多一個步驟，重新選擇其他服務或功能。

表 3元素

常用捷徑選項模式描述

模式描述（捷徑選項介面設計形式）名稱

常用捷徑選項（Most Used Shortcut Option）

情境

使用者希望常用服務項目或功能的操作路徑可以被縮短，以快速完成任務。另外，當選項多到會超出使用者知覺負載時。

問題

提供的服務或功能太多時，如何讓使用者只瀏覽常用項目？

解法

讓使用者很容易看到多數人或個人較常使用的服務或功能，而其他不常用的服務或功能將被隱藏在「其他選項」或「更多選項」的按鈕之中。

實例系統將多數或個人常用服務或功能選項設成捷徑，讓使用者可直接選用，不常用的選項則設在其他選項之中。

→
Google 網站將使用者較常使用的應用程式設成捷徑，讓人可直接點選，較少使用到的應用程式則要透過「更多」才能看見及使用。（圖片取自 Google 網站，2017）。

元素模式描述（捷徑選項介面設計形式）名稱

常用捷徑選項（Most Used Shortcut Option）

圖解

系統透過提取多數或個人使用者行為數據，直接提供多數或個人使用者最常用選項，並將不常用選項放入其他選項之中，讓使用者可以直接選擇常用選項。倘若使
用者此次不是選用常用選項，可點選其他選項再進行選擇。

作用力

優點：


如果使用者需要的是常用項目，可減少其視覺搜尋及心智負荷。

若考量版面大小或選項載入時間可使用此模式，以減少使用者心智負荷。

缺點：若使用者需要的是不常用項目，需多一個步驟重新選擇其他服務。

表 4元素

常用推薦選項模式描述

模式描述（推薦選項介面設計形式）

名稱

常用推薦選項（Most Used Recommending Option）

情境使用者想快速發現其常用的項目。在頁面之中必須呈現全部選項，又想幫助使用者減少視覺搜尋及心智負荷時。

問題當介面提供的服務或功能太多時，如何縮短使用者視覺搜尋與心智負荷？

解法

以大小、文字、顏色或動態等視覺提示做法，推薦使用者多數人或個人常用選項。

實例

透過掌握多數或個人使用者行為數據，將常用的選項以顏色及文字進行提示。

IDEO 為其客戶 Wells Fargo 所設計的自動櫃員機（Automated Teller Machine,元素名稱

模式描述（推薦選項介面設計形式）
常用推薦選項（Most Used Recommending Option）
ATM），透過掌握使用者個人使用紀錄，以顏色及文字推薦其最常用的金額選項。
（圖片取自 IDEO 網站，2016）。

圖解系統透過提取多數或個人使用者行為數據，將多數使用者常用選項進行視覺提示，讓使用者可以較容易發現，以進行決策。不論使用者選擇的是常用選項或一般選項，其操作步驟的數量皆一樣。

作用力優點：


使用者在過多選項中可快速發現其可能需要的選項，減少視覺搜尋及心智負荷。

使用者常用的項目有提示，可縮短其視覺搜尋與心智負荷，提升操作效率。



系統若提取使用者的個人紀錄，將可為個人常用選項進行推薦。系統若提取所有使用者的使用紀錄，則以大多數使用者常用選項進行推薦。



不論是否選用有視覺提示的常用選項，兩者的操作步驟數量一樣。

缺點：

系統若提取個人資料，使用者可能會有隱私安全的疑慮。

表 5元素

位置推薦選項模式描述

模式描述（推薦選項介面設計形式）

名稱

位置推薦選項（Position Recommending Option）

情境

使用者想快速找到大眾熱門或自己喜好的項目。另外，如廣告商和企業主等利益相
關者，有想推薦給使用者的服務或功能時也可採用此模式。

問題

使用者心中沒有特定目標時，如何讓使用者快速發現其可能感興趣的項目，或是讓
使用者快速發現利益相關者欲推薦的項目？

解法

將使用者可能需要或利益相關者欲推薦的項目，放在較佳的視覺位置。如果項目是由上而下排列，上方是較佳的視覺位置，由左而右排列則是左邊較佳。

實例付費廣告或熱門產品可能會被放在眾多選項的最佳位置，讓使用者可以快速發現及
參考。

元素
名稱

模式描述（推薦選項介面設計形式）
位置推薦選項（Position Recommending Option）

實例「暢銷推薦」排序選項被放在最佳位置。（圖片取自博客來網站，2016）
圖解

系統透過提取多數或個人使用者行為數據，將多數或個人使用者喜愛的選項，或是利益相關者欲推薦給使用者的選項，依視覺最佳位置進行排序，讓使用者較容易看見該選項。不論使用者選擇的是哪一個選項，其操作步驟的數量皆一樣。

作用力優點：


使用者可快速發現其可能需要的選項，減少視覺搜尋及心智負荷。

此模式與「常用推薦選項」不同之處是不會干擾使用者的視覺注意力，也不會
增加操作步驟。

利益相關者可藉此推薦使用者某些服務或功能。

缺點：

如果使用者需要的服務並非大眾熱門項目或利益相關者推薦項目，這樣的提示對其無幫助。

將影響使用者的功能固著（functional fixedness），故不適合使用在固定項目或功能上。如果怕影響使用者的功能固著，可採用「常用推薦選項」模式。

三、 結論本研究以使用者行為數據（user behavior data）為依據，將使用者較常使
用之功能或服務設為捷徑或推薦選項，提出五個讓使用者可便捷操作的使用者介面模式，希望促進設計師和開發人員在進行使用者介面設計時可以應用，減少使用者在眾多服務或功能中搜尋不易，透過捷徑的提供和推薦的提示，加速使用者
的心理操作時間，讓更多日常事務性的工作可以更快速完成，提升系統或介面的操作效率與使用者滿意度，讓服務對應使用者經驗，接近使用者期望。
本研究特別感謝陳建村先生在研究初期，以其對模式的專業知識給予許多指導，並感謝牧羊人李信杰先生的悉心提醒與寶貴建議，使得本論文之品質得以更加提昇。

四、 參考文獻1.

Bell, D. (2000). Software engineering: a programming approach. Harlow,England: Addison Wesley., pp. 187.

2.

Mcgrenere, J., Baecker, R. M., & Booth, K. S. (2002). An evaluation of amultiple interface design solution for bloated software. Proceedings of theSIGCHI conference on Human factors in computing systems Changing
our world, changing ourselves - CHI '02. 4(1). pp. 163-170.

3.

Shneiderman, B. (1998). Designing the user interface: strategies foreffective human-computer-interaction (3rd ed.). USA: Addison WesleyLongman.

4.

Whitenton K. Satisficing: Quickly Meet Users’ Main Needs. Retrieved
January 22, 2017, from https://www.nngroup.com/articles/satisficing/5.

Xu, G., Zhang, Y. & Zhou, X. (2006). Discovering task-oriented usage
pattern for web recommendation. Proceedings of the Seventeenth
Australasian Databases Conference. IEEE. pp. 167-174.

6.

余虹儀（2017）。使用者介面之通用使用性與介面模式。國立臺北科技大學
設計學院設計博士班博士論文。

7.

臺大智慧生活科技整合與創新研究中心（2012）。產學案例-ibon 服務全面升級迅速友善讓您找到需要的服務。2016 年 11 月 29 日取自http://insight.ntu.edu.tw/04_cases_16.html