在 19 common UX problems and how to fix them 一文中，將討論一些目前在熱門網頁或應用中常見的欄位設計模式與細節。
01. 使用者可以輕易的檢舉或回報網頁內容
由於社群的內容大多是由網友所提供的，其中勢必會出現一些不當的內容，而社群平台就需要提供讓使用者回報的功能，維持社群平台上，資料的正當性。
pinterest 的回報功能畫面
Facebook 的檢舉功能畫面
02. 使用者可以輸入自己的 Tag
tag 可以是一種分類或組織的概念，讓使用者更容易尋找。
Behance 可讓使用者設定自己的 tag
flickr 可利用關鍵字 tag 將照片分類
03. 談話式表格
Virgin America 的預約表格
好的表格 UI 必須是以使用者為中心，而非資料收集為中心，且一個好的表格會讓使用者填表的意願提高！
表格使用對話式語氣，並將需要填入的資料融合在對話中。如：Virgin Atlantic 的訂票格式不是傳統的下拉式選單、radio button …等，而是清楚地以使用者的思維去呈現（我要訂 X 到 Y 的機票）。
04. 提供輸入欄位所需的提示
用戶在輸入資料時，欄位必須提供使用者所需的資訊，讓使用者不會因而迷惘。
如果網頁的表格沒有使用“對話式表格”，那麼提供所需的”提示”是一個很好的方法。以下有幾個提示的方式：HTML5 提供了 placeholder 的方式，也可在輸入欄位附近加入註釋、提示等文字。
skype 註冊表格，使用者可以清楚地知道該填什麼
05. 允許使用大眾化、普遍的用詞
提供使用者以一般的句子直接和電腦進行對話，而不必考慮程式語法，使用起來更人性化、更方便。
其中最常見的例子就是 Facebook 的 Graph Search，使用者可以輸入 “People from Austin, TX who like Coldplay” 或是 “Married men who like prostitutes” 等字句。
Facebook 的 Graph Search
延伸閱讀：Natural language vs. Tech language?
06. 輸入內容的格式可以更寬鬆
如果你的網頁平台提供用戶不同選項或條件，建議你可以多提供一個 “全部（All）”的選項供用戶選擇，如下圖：使用者可以輸入任何格式以達到快速的目的，如日期：next Thu ｜ nxt Thu ｜ 29/8/2014 ｜ 8/29/2014 ｜ 8/29
IMDb 的搜尋 bar 提供了一個 “All” 選項
延伸閱讀：Designing Interface – Forgiving Format、UI Patterns – Forgiving Format
07. 即時回饋錯誤訊息
當使用者輸入錯誤時，系統可以即時回饋錯誤訊息，而不是等使用者按下“送出”後才告知錯誤。
Gmail 的表格
延伸閱讀：Inline Validation in Web Forms、支付寶登入之驗證碼
08. 盡可能將冗長的表格分步驟進行或壓縮其內容
一次呈現太多資訊會造成使用者的反感，所以在設計表格時，試著將問題分類並以“步驟”的方式，一步一步分批次將資料呈現給使用者。這可運用在註冊的表單設計上，因而大大增加其註冊人數。例如：Mint.com 的註冊表格，使用者只需填入 mail/密碼/郵遞區號，其餘之後再補。
Mint.com 的註冊表格
將表格步驟化也有另一個好處：可以針對使用者先填寫的資料來過濾後面的表格資料，跳過不需要的題目，如此一來，使用者在填表格時，可以更簡易、快速。
延伸閱讀：Multi step form vs single complex form、Wizard
09. 進度條 (Completeness meters) 的呈現讓使用者更清楚知道自己目前任務的進度。
使用進度條可以增進使用者的黏著度、促使用戶完成特定的任務，如：完成個人資料、邀請好友、分享至社群等。下圖則是 LinkedIn 的個人簡介頁面，透過 ‘Strength Meter’ ，即可清楚了解自己完成了多少項目，還有多少資料還沒填。
LinkedIn 呈現了視覺化的個人簡介強度（完整度）
延伸閱讀：Completeness meter、The Power of The Progress Bar
10. 讓使用者清楚知道他的操作將會產生什麼影響與結果
操作過程中，使用者必須意識到許多重要的脈絡，如：還有多少時間才能完成？這將會有什麼影響或反應？是否有時間限制？
Quora 會呈現“有多少人在等待其解答”的資訊，來促進其他使用者回答。
booking.com 將飯店相關消息做成推播，例如目前多少人也在看這家飯店、今天訂房的國籍是哪個國家的人最多…等
11. 提供快捷鍵或熱鍵，讓使用者的操作效率提高
當使用者在操作某些任務時，提供一些熱鍵進而取代滑鼠，尤其是一些重複性很高的任務，如此一來，會增加操作時的效率，對於使用性(usability)也大增了不少，使其大大改善其使用者經驗(UX)。
windows: CTRL + /
mac osx: ⌘ Cmd + /
Dropbox shortcut list
windows: SHIFT + ?
mac osx: ⇧ Shift + ?
原文是 CTRL + ? ，但筆者試不出來，最後發現是 SHIFT + ?
Gmail shortcut list
直接在頁面底層呈現最常用的快捷鍵列表
Asana shortcut list
12. 提供 “拖曳/置放（Drag-and-drop）”的功能，讓使用者可以更直覺的操作
使用者希望可以直覺且快速地操作相關物件或內容，拖曳/置放（Drag-and-drop）就是一個好方法！平時可以應用在排列順序或是上傳檔案時，例如 Google Drive, Dropbox 或是 Asana 都有提供拖曳/置放的功能。
Drag-and-drop 在 Google Drive 中非常好用
13. 自動設定預設值與藉由使用者輸入一半的資料預測其相對應的選項以達成任務
如此一來，使用者可以更有效率地達到其目的，例如 YouTube 會將語言、地區預設成使用者瀏覽時的所在地區，這選項就在頁面的最底，容易修改，但 YouTube 已經幫使用者預設了，使用者幾乎不會修改到這預設值。Google 也以使用者瀏覽的區域為基準，預填了國家、電話國碼，讓使用者在填這些資料時，可以跳過一些步驟。
而 Autocomplete 這個屬性可以讓使用者填寫表單時，輸入欄位自動完成且提供相關關鍵字讓使用者參考，加速了使用者操作的過程，如 Google Search 的輸入欄位。
好用的 YouTube Autocomplete 功能
14. 不需登入或註冊即可使用產品的服務
現今有越來越多新的線上服務，而使用者的時間有限，請勿在他們使用產品前，即要求註冊登入。他們也許很快就討厭你的產品或發現產品不是他要的；當使用者愛上你的服務時，自然而然地會註冊且成為你產品的忠實使用者。
讓使用者直接親身體驗產品，搞不好他會迷上你的產品。因為有時候讓使用者親身體驗的效果遠比你跟使用者說明其功能來的好。
- AirBnb 允許用戶在註冊前瀏覽所有住宿的資料，甚至可以建立表單。
- SoundCloud 不需註冊即可以收聽其他用戶的作品。
- Yelp 允許用戶在註冊前寫一些店家評論。
大部分來說，如果用戶想用進階服務時再註冊，反而更加吸引人。稍後再註冊也許不是一直適用，但是註冊前試用 (try-before-you-register) 的選項也許是個不錯的方式，增加其產品黏著度。
用戶在註冊前仍可以使用很多服務 – AirBnb
15. 可以快速使用社群帳號登入或註冊
用戶可以使用已存在的帳號（社群帳號）進行登入，無需再註冊，這也代表著在使用者腦裡“少了一組帳密”的組合需要記住，例如：Spotify, Pinterest 等都有提供社群帳號登入的功能。
目前 OAuth 登入主要以 Facebook, Twitter and Google 為主，如果一味的強求使用者註冊一個新帳號，你可能因此失去使用者們。使用社群帳號登入還可以讓你輕鬆搜集到用戶相關的基本資料，而不須要求用戶在剛使用應用程式時，輸入相關個人資料。
你可以使用 Facebook 登入 Spotify
16. 系統提供 ”訊息通知“ 的功能
這個小小的號誌因 iOS 而大紅，現在則到處都可以看到它的蹤跡（web 或其它應用），如：LinkedIn, Facebook or Quora等。twitter 使用 “highlight 數字的訊息通知” 告知最新動態，其它形式如 banner 等可引起用戶注意的元素。
twitter 的訊息通知
17. 當使用者需要某些功能時，可以很輕易地找到
當你輕輕滑過某些特定的區塊或是頁面往下滾動時，其功能或資訊則會出現在用戶面前。這種方法讓頁面更加簡潔。
Pinterest 中有許多此應用
當滑鼠靠近某區塊，功能則出現在用戶面前
18. 輸入欄位會因功能需要而展開或隨著字數輸入多寡而改變高度
Quartz 為了節省空間，隱藏其搜尋的輸入欄位，只保留其 icon，當使用者按下其 icon，輸入欄位則自動展開。
Quartz 的 搜尋欄位
Quora 只顯示短短的文字區域 (上圖)，直到 … 用戶點擊其文字欄位（下圖）
19. 當使用者不小心觸發某功能時，可以 “還原” 其動作
用戶常常不小心誤刪了信件或是按到送出鈕而不知所以然。“還原” 的 UI 讓用戶覺得貼心且人性化。
Gmail 中的 ”還原“ 功能
如果一直跳出提示訊息，雖然會提醒用戶該注意的事項，但當有大量的步驟時，十分耗時。且在跳出訊息提示時，用戶通常不容易理解其結果而誤按，所以無論如何，提供“還原”的功能讓用戶可以補救自己的失誤。
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
