跳到主要內容區塊

政府網站營運交流平台-中文

網路趨勢與社群應用分享

一帖神奇藥方,解決使用者煩惱

 解決使用者常見問題的十大易用性原則。

「解決使用者需求的設計思維,是建構設計網頁與系統的一大趨勢。」

一、「使用者體驗」與「使用者為導向的設計」

用戶體驗是指一個人使用一個特定產品或系統或服務時的行為、情緒與態度。包括人機互動與擁有產品時的操作面向、體驗面向、情感面向、意義面向、與價值面向;還包含使用者對於系統的功能、易用、效率的感受,因此使用者經驗在本質上可以視為一個人對於系統的主觀感受與主觀想法(Wikipedia, 2019)。

使用者經驗是動態的,由於不斷變化的使用情況、不停變化的各個系統,以及變化發生背後的情境與脈絡,因此它是不斷隨著時間而變化。不同的用戶使用相同的產品,也會產生完全截然不同的使用者經驗。這是因為用戶的文化背景與學經歷,造就出不同的行為與思維模式。也因此,透過使用者經驗的相關研究與分析,我們更能清楚地知道用戶在使用介面時,產生什麼樣的交互行為、遇到什麼樣的困難,更能針對分析研究出的痛點,將系統進一步的調整修正與更新。

「也因此了解使用者很重要。」

二、但使用者在想什麼?讓我們來聽聽使用者怎麼說

我們在用戶訪談時,又或是在維護系統時,常常聽到使用者有下列這些反饋:
偉妮:「怎麼沒有反應啊?等好久!」
均凡:「我迷路了,這一頁在哪裡?」
佳霖:「這系統怎麼那麼難用?」
承穎:「我要的oooooo在哪裡?」
景維:「哎好煩,看都看不懂。這到底在寫什麼?」
盈如:「…………..#!*(%&(#$^%寶寶很煩,但不說。」

「要如何能夠快、狠、準的解決掉這些看似迷茫說不出個所以、且又時常發生的使用者問題呢?其實有所謂的『十大易用性原則』,可以讓各位設計師們參考:)」

三、一帖神奇藥方,解決使用者煩惱

可喜可賀的事,要解決這些繁雜的使用者的經驗反饋,並不是一件難事,易用性大師Jakob Nielsen在1994年提出《十大易用性原則-10 Usability Heuristics for User Interface Design》,詳細說明所謂「易用」需要符合易於學習、快速使用、相對無錯這三個部分,也為整個UI、GUI、UX的發展上,奠定非常重要的基礎。

Jakob Nielsen十大易用性原則如下(Jakob Nielsen, 1994)
1. 系統狀態的能見度 Visibility of system status
2. 系統與真實世界的關聯性 Match between system and the real world
3. 使用者的操控自由 User control and freedom
4. 一致性和標準 Consistency and standards
5. 預防錯誤 Error prevention
6. 辨識而非記憶 Recognition rather than recall
7. 彈性與使用效率 Flexibility and efficiency of use
8. 美觀與簡化設計 Aesthetic and minimalist design
9. 幫助使用者認識、偵錯並從錯誤中恢復 Help users recognize, diagnose, and recover from errors
#10. 幫助與說明文件 Help and documentation

「 因此我們可以透過易用性的原則,來作為開發網站與系統的根本基礎, 那我們一起來理解易用性原則這帖藥方,來解決使用者的煩惱吧:)」

四、關於十大易用性原則

1.明確顯示系統狀態

「定義:該系統應始終於合理的時間內,保持相同的模式與適當的反饋,讓使用者了解系統運作狀態。」

案例A「逐步揭露步驟」:游標移過去選項的框線顏色變更,提示可以被點擊;下方「選擇外觀」的選項被屏蔽,用以暗示選擇步驟。

Apple官⽅方網站

案例B「系統狀態視覺化表現」:等待中icon、無法顯示圖表的說明。

IOS⼿機系統_股市APP

2.連結系統與真實世界

「定義:該系統應該要運用使用者熟悉的語言、詞句、概念,而非專業術語。」

案例「介面概念擬真」:計算機擬真,參考既有的實體計算機加以設計。

IOS手機系統_計算機APP

3.提供使用者控制權和自由度

「定義:使用者時常以「嘗試錯誤」來選擇系統功能,他們需要一個明顯的「離開」來結束使用者不需要的狀態。並且支援復原步驟與重複步驟。」

範例「提醒的動作選單」:使用者不小心按到錯誤的按鈕時,系統給予即時提醒,並允許其選擇進一步動作。

IOS⼿手機系統_郵件 APP

4.一致性和標準化

「定義:使用者不應該猜測不同的字彙、狀態、動作是不是代表同一件事。」

案例「一至性的圖像」:頁面上的指示icon在視覺表現上應具有一致性

Apple官方網站

IOS⼿機系統_圖片 APP

5. 錯誤預防(Error Prevention)

「定義:預先防止與引導使用者,不發生錯誤最為重要。」

案例A「有用的約束」:事先提供使用者輸入對應資料的介面,例如輸入日期的欄位彈跳出月曆供使用者選擇日期。

Google ⾏行行事曆

案例B「直接提供使用者下一步的建議」:搜尋列中提供關鍵字建議。

Google 瀏覽器搜尋

案例C「提供合理的默認值」:對於重複性的操作,給予使用者恰當的預設選項,有助於防止使用者操作時發生錯誤;例如預排發送的郵件,預設傳送時間,可以減少使用者輸入錯誤的時間。

OS⼿機系統_郵件 APP

6. 讓使用者直覺認知而非記憶系統

「定義:盡量減少使用者需要記憶的事情、行動以及可見的選項。」

案例A「顯現使用足跡」:紀錄並提供使用者搜尋瀏覽過的資訊,讓使用者不需再重新回想之前搜尋過什麼。

iOS⼿機系統_⾳樂播放 APP

案例B「最近常用位置」:儲存檔案時,提供使用者最近常用的儲存位置,讓使用者不需再花費時間從頭尋找。

Pages

7.提供使用時的自由度和效率

「定義:取得功能與易用性之間的平衡,對於軟體中的每個特性、功能、或能力,都必須提供一種途徑讓使用者調用或控制,使用者能以最有效率的方式完成工作。」

案例「優化資訊與視覺層級」:越頻繁使用的功能,需要點擊的次數應該要越少。越多使用者使用某功能,它就應該越明顯。例如:在手機版的Gmail中,除了將使用者最常用的撰寫信件放置在首要頁面;左側打開的選單列也會考量使用頻率來排列項目。

Google Gmail

8.美觀和極簡設計

「定義:軟體設計上就盡量減少使用者的記憶負擔。將功能、操作及選項設計得顯而易懂。對於不相關或是很少使用的訊息或功能,隱藏起來。」

案例A「收合較少使用資訊」:Google翻譯功能頁面清楚而單純的呈現翻譯相關功能,將其他說明、法律條款等訊息隱藏在左上角的收合選單中。

Google 翻譯

案例B「清晰的視覺引導」:ios天氣app頁面上為當地當時的天氣狀況保留較大而乾淨的版面,以避免其他時間的天氣資訊干擾使用者瀏覽。

IOS系統_天氣App

9.幫助使用者去瞭解、偵錯和恢復錯誤

「定義:協助使用者識別、診斷、並從錯誤中恢復,將損失降到最低。如果無法自動挽回,則提供詳盡的說明文字和指導方向,而非難以理解的代碼。最好能在告知使用者發生錯誤的同時,一併提供解決方法。」

案例A「最後的叮嚀與提醒」:在ios系統刪除app時,系統將明確的告知使用者,刪除app時也會刪除的資料範圍。

IOS系統_系統頁⾯

案例B「提供疑難排解方案」:Adobe 的帳號登入頁面,若忘記密碼,則有忘記密碼的流程提供給使用者找回密碼;若無帳號密碼第一次登入者,則可以使用其他平台登入,或是註冊帳號。

Adobe_系統登入⾴面

案例C「狀態告知與建議作法」:chrome瀏覽器在缺乏網路連線的狀態下,給予使用者清楚地告知,並提供建議解決方案。

Chrome 瀏覽器

10.協助和說明引導機制

「定義:一個軟體在完美的情形下,不需要任何說明文件,使用者就能夠操作。又或是能提供清楚操作入門教學,引導用戶。」

案例A「操作提示」:ios系統手機的app在首次使用時,給予使用者簡易的app介紹與操作提示。

IOS_iTunes U

案例B「系統使用導覽簡報」:高鐵app在選單中提供簡易的使用導覽。

台灣⾼高鐵訂票APP

資料來源:

1.Wikipedia.使用者經驗。https://zh.wikipedia.org/wiki/%E4%BD%BF%E7%94%A8%E8%80%85%E7%B6%93%E9%A9%97
2. Jakob Nielsen April 24, 1994。https://www.nngroup.com/articles/match-system-real-world/
3. 價給RD的UI Designer。https://blog.akanelee.me/posts/160115-top-ten-usability-principles/

 

圖片來源:

文章所使用圖片均為好視設計團隊,協助整理與製作。