身為 RD 的你受過太多 UI 的氣嗎？老是發現邏輯不通需要打掉重練被延誤時程嗎？常被 UI 嫌念理工的沒有美感都不懂嗎？報仇的時間到了。這篇文雖然說是「十大易用性原則」，也可以說得上是：「教你如何捅 UI 」。
RD 最擅長講理，就來跟 UI 講理！從易用性下手找 UI 麻煩，沒有幾位 UI 不中刀的…
易用性（Usability）指的是使用者能夠使用某樣工具來達到某個特定目標的容易程度，常見的中文翻譯有優使性、使用性、易用度、易用性、好用性、可用性等等，其中較常見的為優使性和可用性。
優使性感覺上像是優越的使用、還是優化過的使用，在詞彙上模稜兩可有模糊地帶；可用性的說法則像是僅分成可以用和不能用兩種狀況。Usability 翻譯成易用性，清楚指出「容易使用」的特點較為貼切。易用性畢竟是個較抽象的名詞，因此 Jakob Nielsen 提出十大易用性原則，詳細說明所謂「易用」需要符合易於學習、快速使用、相對無錯這三個部分。
- 系統狀態的能見度 Visibility of system status
軟體應該保持相同的模式，透過適當的反應，在合理的時間內通知使用者，讓使用者了解正在發生的事情。
最常見的就是按鈕狀態。在電腦上瀏覽網頁時常常會發現某些地方在游標移過去時顏色會有所改變，提示你這裡可以被點擊。在 iPhone 上沒有游標，所以會以更淺顯易懂的方式告訴你這裡可以被操作，像是更立體的按鈕、或是模擬實體開關的圖象。（App：Money Book，選中的項目底色變成鮮豔的藍色。）
使用者點擊按鈕，會出現按鈕被按下去的凹陷感，提示你已經點擊到了。（App：Reach，擬真的開關設計與下方明顯凹陷可點擊的 TabBar。）
另一種常見的系統狀態回應就是需要使用者等一下，現在正「讀取中」、「下載中」。在等待時如果沒有任何提示，就會產生「自從點了這個按鈕後畫面就不動了，我的操作到底有沒有被執行呢？不曉得要等多久…」的感受。
進度條就是為了降低使用者的不耐感、告訴使用者現在處理進度如何、大約還需要多少時間而存在。透過進度條，使用者可以知道他的操作正在執行中，現在完成多少部份，再等多久就可以結束。（App：Evernote，同步時右上角的 icon 會轉動，在所有記事標題下方有目前進度百分比。）
- 系統與真實世界的關聯性 Match between system and the real world
系統應該要運用使用者的語言，使用他們熟悉的詞句、短語、概念，而不是專業術語。
因應該族群的習慣進行開發，像 iOS 使用者會覺得左上角的按鈕通常是「回前頁」一樣，若你將「回前頁」放到右上角，會增加他們操作錯誤的機會。 試著將 Android 手機給 iOS 慣用者操作，會發現他們不曉得怎麼樣回到上一頁，也不知道回到主畫面的 Home 鍵在哪裡，對於實體按鍵的功能一無所知。
舉個我家發生的真實的例子：女兒教父親怎麼操作家用電腦，當她說「請把滑鼠移到開始」時，父親拿起手上的滑鼠左右翻看了一下，便將整隻滑鼠對準螢幕上的「開始」敲下去，螢幕被滑鼠撞擊發出摳摳摳的聲音…… 女兒問父親，為什麼會把滑鼠拿起來敲螢幕，明明只要在桌上移動滑鼠就可以操作，父親說：「妳叫我把滑鼠移到開始的啊！」
女兒的認知裡，拿滑鼠敲螢幕無法完成任何操作，滑鼠只是為了控制游標而存在，所以將滑鼠移到開始同等於「操作滑鼠以控制螢幕上的游標、並將游標移到開始」。但對父親而言，因為不熟悉電腦操作，他尚未建立滑鼠等於游標的概念，游標是游標、滑鼠是滑鼠，所以會發生拿滑鼠敲螢幕的爆笑情況。
你覺得大家都應該要知道的事情，其實不一定都會曉得。雖說這種說詞對「父親」很失禮，但請把所有使用者都當成是「父親」那類型的人物。什麼樣的用語才能讓第一次接觸 App 的人沒有誤會的快速上手呢？（App：Weightbot，用於記錄每日體重，模擬現實生活中的體重計刻度。）
- 使用者的操控自由 User control and freedom
使用者時常以「嘗試錯誤」來選擇系統功能，他們需要一個明顯的「離開」來結束使用者不需要的狀態。並且支援復原步驟與重複步驟。
易於犯錯且修正錯誤代價高昂的高風險情形將導致使用者不願意多研究這個軟體。良好的設計能讓使用者降低出錯率，在提供取消和重做的功能前先減少使用者出錯的機會。
Ctrl+z（復原）是最容易被記住的快速鍵，也因為有復原的存在，使用者才會大膽去嘗試各種不熟悉的操作。他們心想：「反正做錯了重來一遍就好了嘛！」如果一出錯就表示要從新開始，使用者會感到迷惘並且覺得壓力太大。（想看看 Diablo 的專家級模式，人物死亡不能重來。在這種模式下哪個玩家不是備感壓力戰戰兢兢小心翼翼的？）
使用者操作 App 是為了完成他預期的目標，根據八二法則，你的使用者有 80% 都是使用最初階的操作，只有 20% 人會想要更專業進階的功能。越輕鬆簡單無壓力越受大部份使用者青睞，不過是想透過 App 完成某項目的，用不著壓力這麼大的挑戰自我極限吧？（App：Awesome Note 的設定頁面，許多進階功能都放在這裡。）
初學者和 RD 很容易在這個原則犯下錯誤，不是所有的功能全部攤到第一層就代表豐富好用。
所有的功能都很重要就代表沒有一個功能是重要的。就像期末考前把課本每個字句都劃上螢光筆強調，根本沒有重點，有劃跟沒劃一樣。凡事都有輕重緩急，就像一位血流不止、骨折又長期咳嗽的病人在眼前，是要先止血、先處理骨折、還是先治療咳嗽一樣。最重要的事情需標明出來，可以暫緩不急的事之後再說。
功能的優先順序也是如此，最重要、最常用的功能放在最顯眼易觸碰的位置，較次級非必備的功能就擺到下一層或是乾脆挪到某個進階選單裡去吧。（App：Gmail 的側邊欄，這種選單無論主要還是次要的功能，都能排序整理得很漂亮。）
- 一致性和標準 Consistency and standards
使用者不應該猜測不同的字彙、狀態、動作是不是代表同一件事。
考慮到瀏覽器的相容性。App 必須採取使用者的語言、並運用他們熟悉的單詞、短語和概念，而不是程式語言或專有名詞。介面中的控制元件、命令、設定的功能應該清晰明確。操作軟體不應該需要透過排除法進行演繹推理。也不要讓使用者所執行的操作和他們的目標沒有明顯的關連。（App：Priority List，下方各個 icon 的含意要稍微想一下才能理解，且實際操作和預期的有落差。）
依現實生活常見的習慣，讓訊息在自然且有邏輯順序的情況下產生。為了達到這個目標，有時需開發一個詞典。這個詞典最好由團隊的技術編寫者來管理和實施、監視文件檔案和軟體中出現的術語一致性。支援目標工作領域中的問題該如何解決，它應該最大限度地減少或消除使用者花費時間解決軟體技術層面中的問題需求。
屬性、參數、設定、設置、資源。或者是尋找、搜尋、搜索、搜查、尋求…等等，這些詞指的都是同一個功能，對使用者來說他不會知道 App 上寫的「設定」和「屬性」其實是同一件事。如果將所有的字詞統一有困難，可以乾脆直接使用圖示代表。（App：My Wonderful Goals，簡單易懂的 icon 設計，畫面乾淨清爽。）
- 預防錯誤 Error prevention
比起提供使用者明確易懂的錯誤訊息，更重要的是如何防止使用者發生錯誤。
像是消除容易出錯的條件或是自動檢查確認選項。或是讓使用者確認他們接下來要做的行動。越是讓使用者自行輸入的欄位越容易出現錯誤，明明只能輸入數字的地方就是有人會想打英文字母。擺明說了帳號只能使用英文或數字，還是會有人用上特殊符號。比起使用者填完所有欄位按了送出後再告訴他哪些地方有誤，不如在輸入錯誤時就擋住他、在輸入正確資料前無法進入下個步驟。如果能在欄位旁邊即時反應驗證狀態是再好不過的。
在 iPhone 上最方便的就是內建數種鍵盤。在輸入電話號碼的欄位時只跳出數字鍵盤、輸入日期時使用 Picker。（App：聯絡資訊，輸入只有數字的欄位時，就跳出數字鍵盤。）
在小小的手機螢幕上打字是非常辛苦的一件事，按鈕小不好按、又容易出錯，最好也最貼心的作法是連輸入都簡化了，最好點點手指就解決。像是 Google 的即時搜尋，打入第一個字時就將熱門選項列出來供使用者選擇，但有可能不是使用者需要的。或像是 Facebook，輸入一個關鍵字就將所有包含這個關鍵字的朋友列出。（App：App Store，在使用者邊輸入時即時搜尋有可能的關鍵字。）
- 辨識而非記憶 Recognition rather than recall
盡量減少使用者需要記憶的事情、行動以及可見的選項。
使用者沒辦法記住太多步驟。App 如果有使用說明介紹，應該放在顯眼且可輕易使用的位置。如果軟體把資料當作訊息，把資料都丟給使用者，要使用者自己查看資料代表他們的注意力會被分散，產生錯誤的機會就會增加。軟體應該將使用者的注意力集中到重要的資料上，並幫助使用者從中取得訊息，而不是未經過篩選要使用者花時間思考。
像是為了酷炫而特別設計的操作介面，與眾不同讓人眼睛一亮，但使用者在初次接觸後再度使用，要花多少時間才能找到上次操作過的功能？相信很多人都有邊自言自語「我記得這個 App 有 xxx 功能啊，在哪裡呢…」邊將某個 App 所有按鈕選單翻一遍的經驗。（App：Yoritsuki，非常漂亮精緻的 App，下方選單與上方提示一目了然。）
- 彈性與使用效率 Flexibility and efficiency of use
功能與易用性之間通常存在一個平衡，對於軟體中的每個特性、功能、或能力，都必須提供一種途徑讓使用者調用或控制。如果使用者的目標是可預測而且常用的，使用者不應該為了實現這個目標而必須做很多工作。
做少量的工作、得到很多結果，才是使用者想要的。簡單來說就是要思考「有多少使用者」和「使用頻率如何」的問題。越頻繁使用的功能，需要點擊的次數應該要越少。越多使用者使用某功能，它就應該越明顯。且要為核心情況設計，不要為「邊緣」情況付出太多。
快速鍵就是這個易用性準則的最佳代表，在 App 上沒有快速鍵的設計，可以透過手勢來完成各式各樣的操作。例如瀏覽列表頁，已捲到最下方後想回到頂端不需要一直滑動手指、只需輕點一下 StatusBar，列表會自動捲回最頂端。（App：Day One，對撰寫日記來說，拍照和新增是最常用的功能。）
- 美觀與簡化設計 Aesthetic and minimalist design
為了防止使用者出錯，可以在軟體設計上就盡量減少使用者的記憶負擔。將功能、操作及選項設計得顯而易見。對於不相關或是很少需要的訊息或功能要隱藏起來，僅突出重點在軟體設計上非常重要。
像是註冊新會員，如果一開始就要使用者填寫一長串的個人資料，相信許多人在這個階段就打退堂鼓。簡化註冊流程就可以增加使用者成為會員的意願，最好只要一個按鈕就能完成註冊。有的 App 會串接 Facebook，使用者只要同意授權就完成註冊手續。或者是只讓使用者填寫必備的資料如帳號密碼等，其他非必備資料如生日、所在城市等，使用者可以在登入後去個人設定頁自行填寫。 （App：Pose，使用 Facebook 登入，或是輸入帳號密碼。）
- 幫助使用者認識、偵錯並從錯誤中恢復
幫助使用者識別、診斷、並從錯誤中恢復，將損失降到最低（Help users recognize, diagnose, and recover from errors）。如果無法自動挽回，則提供詳盡的說明文字和指導方向，而非難以理解的代碼。最好能在告知使用者發生錯誤的同時一併提供解決方法。
使用者不會想知道「404」代表什麼意思，直接說明「找不到網頁」比簡短的錯誤代號更能理解。比起找不到網頁的文字，如果能說明找不到網頁的原因、並加上如何解決更能幫助使用者排除錯誤。就以網路斷線這個例子來說，iOS 可以偵測使用者目前對於網路的設定，是因為沒有開啟網路功能、還是網路連線品質不佳所以無法開啟網頁。前者可以請使用者去設定將 Wifi 或 3G 功能開啟，後者能告知使用者換個連線環境或是稍後再試。（App：書報攤，刪除資料時會提示將刪除所有資料。）
- 幫助與說明文件 Help and documentation
一個軟體在完美的情形下不需要任何說明文件使用者就能夠操作，但就算是最好的軟體也需要提供幫助與說明文件。
當使用者尋求幫助時，此類訊息應該容易被搜索查詢。完美的介面即使沒有任何說明提示下，使用者仍然能夠流暢操作。為了預防還是有少數使用者搞不清楚狀況，常見的作法除了設製說明頁之外，初次開啟 App 直接進入說明教學，強迫使用者閱讀完畢後才可開始操作。（App：i Track My Time，永遠出現在首頁的操作方式說明。）
以上文章是我根據 Jakob Nielsen 的十大易用性原則翻譯（不怎麼精準）加上個人經驗所寫（其實寫完很久了，截圖有點舊。），有興趣的人建議去看原文。
這 10 條講起來很簡單，真要實行卻非常困難。iOS 和 Android 平台特性不同，若很堅持要根據這 10 條原則將介面設計到好，Guideline 應該要熟到掰碎吃到肚子裡的程度吧。像是第一條的「反應」，iOS 能透過 RD 設定按鈕按下去時顏色會變得較黑，所以按鈕切圖出 1 張未點擊時就好。Android 沒有內建這種功能只好乖乖出 2 張圖，諸如此類。
偏偏 RD 對 Guideline 通常都比 UI 熟，科科。（理工生很習慣是字的厚磚書，念設計的有大半不喜歡看沒幾張圖又生硬難啃的文章。）這 10 條原則都是 UI 在規劃介面時應該考慮進去的部份，不只 UI 需要勞記，RD 多多少少心裡有個底，如果看 UI 不順眼，在討論會議上慢條斯理把介面各個元件拆分出來一項項比對原則，捅死 UI 效果奇佳…
（轉載自合作 Blog：嫁給 RD 的 UI Designer；圖片來源：MGEARTWORKS， CC Licensed）
COMMENT