你有沒有想過，為什麼每一個 App、每一個網站，長得再怎麼不一樣，用起來卻總有種「似曾相識」的感覺？
答案很簡單：不管介面外觀怎麼變，底層用的零件其實就那幾樣。按鈕、輸入欄位、選單、連結、對話框、提示訊息、圖示、核取方塊與單選按鈕、分頁標籤、搜尋欄 —— 十個元件，撐起了幾乎所有的圖形化使用者介面（GUI）。易用性專家 Jakob Nielsen 最近發表了一篇長文，把這套「介面字母表」從歷史脈絡到設計準則整理了一遍，這裡是整理好的重點，分享給大家！
老實說，這些元件沒有一個是新的，最年輕的可能也有三十年歷史了。但正因為老，它們才經過了數十億使用者、四十幾年的淘汰考驗，留下來的都是真的管用的設計。換句話說，先把這套字母表學好，再去發明新花樣也不遲。
Jakob Nielsen 是全球知名的 UX 與可用性專家，被譽為「使用性之父」，以 Nielsen's 10 Usability Heuristics 聞名，深深影響現代網站與產品設計。
一、按鈕：按下去，世界就變了
按鈕是互動設計裡最操勞的元件。不管一個任務前面經過多少步驟，最後幾乎都會停在一個按鈕上：「購買」「送出」「刪除」。連結跟分頁只是帶你去別的地方看看，選單跟對話框頂多重新安排一下對話的內容，只有按鈕會真的改變世界 —— 錢會轉走、檔案會消失、訊息送出去就收不回來。
正因為後果這麼直接，按鈕的命名規則也特別嚴格：標籤要說清楚「按下去會發生什麼事」，用動詞、講結果，例如「刪除三個檔案」遠比一顆孤零零的「確定」清楚。
有個心理學定律也一直在背後默默運作，就是 Fitts's Law（費茲定律）：距離越近、目標越大，滑鼠移過去點擊的時間就越短。這也是為什麼蘋果在一九八三年把 Lisa 選單列直接釘死在螢幕最上緣 —— 游標移到邊界就停住了，等於把目標高度變成無限大。手機介面也一樣，觸控目標建議至少一乘一公分，只是這條準則到現在還是常被忽略。
還有一個容易被搞混的地方：扁平化設計流行之後，很多按鈕拿掉了邊框跟陰影，結果使用者根本分不出畫面上哪些字是「可以按的指令」，哪些只是裝飾用的文字。這句話值得貼在螢幕邊提醒自己：當所有東西都是平的，就沒有東西看起來值得按下去。
二、輸入欄位與表單：金錢流動的地方
表單是網站上「錢真的會換手」的地方：結帳、註冊、名單蒐集。表單好不好用，直接反映在轉換率上，這也是為什麼「使用者體驗等於獲利」這句話在表單上最貼切。
幾個老掉牙但一直被忽略的準則：每個欄位都要有固定的標籤，不能只靠 placeholder 文字撐場面，因為使用者一開始打字，那行提示字就消失了，偏偏那正是他最需要確認自己填對欄位的時候。此外，該用日期選擇器就別逼使用者自己猜格式，購物車移除商品該給一個垃圾桶圖示，而不是要使用者自己把數量改成零 —— 沒有人會把「不想買了」理解成「數量設為零」。
三、選單：把資訊架構攤開來看
選單一次解決兩件事：省畫面空間，還有支援「用認的比用記的容易」這條原則 —— 使用者只要看著選項挑，不用死背指令名稱。這正是選單這個名字的由來：就像餐廳菜單，列出廚房做得出來的所有東西，但也只能點菜單上有的菜，這句但書才是關鍵。
分類命名一定要用使用者的語言，不是你的組織架構圖；下拉選單能用點擊展開就別用滑鼠停留展開，真的要用停留展開，記得加個緩衝時間；階層盡量控制在兩層以內；桌面版該把主要導覽攤開來給大家看，漢堡選單留給真的擠不出空間的手機版就好。畢竟 —— 使用者看不到的導覽，就是他們不會用的導覽。
四、連結：整個網路的最小單位
連結是網路的原子。一九四五年 Vannevar Bush 就已經在構想文件之間的聯想路徑，一九六八年 Doug Engelbart 展示了真正能運作的連結，一九九一年 Tim Berners-Lee 把全球資訊網搬上檯面。連結做出兩個承諾：一是「這個可以點」，靠顏色跟底線傳達；二是「點下去會去哪裡」，靠文字傳達。
這裡有個殘酷的事實：使用者掃視頁面時，往往只讀連結文字的前十一個字左右。如果整頁都是「了解更多」「點此查看」，讀者掃過去等於什麼都沒學到。這種零資訊的連結文案，該淘汰了。
五、對話框：打斷別人是要付出代價的
對話框是系統打斷你手邊工作、跳出來問問題的次要視窗。強制回應的叫「強制型」（modal），不擋住原本工作的叫「非強制型」（modeless）。
打斷注意力是有代價的，所以強制對話框一定要值回票價：真的會卡住流程的決策、不可逆的後果，或是沒有這個輸入就無法繼續的情況才值得跳出來問。另外，按鈕標籤用結果描述會比「確定／取消」更清楚，例如「刪除三個檔案」跟「保留檔案」對比，永遠比一組模糊的「確定」跟「取消」來得明確。
還有一種對話框沒了大人監管，就會變成彈出式廣告 —— 一九九〇年代末在 Tripod.com 誕生，現在則演變成訂閱牆、Cookie 同意視窗疊來疊去。分析數字通常只會記錄下訂閱成功的百分之三，卻不會記錄下另外九成七皺眉離開的人。使用者的怨氣不會出現在任何一個事件記錄裡，但成本是真實存在的。
六、警示、通知與錯誤訊息：系統該說的話
這一組是系統這一方在對話裡該講的台詞：發生了什麼事、正在發生什麼事，或是哪裡出錯了。錯誤訊息的準則其實比 GUI 本身還老：用白話文說清楚哪裡錯了、精確定位問題在哪、告訴使用者怎麼修正、絕對不要把責任推給使用者。
輕微的「訊息已送出」很適合用會自動消失的 Toast 通知；但真正需要使用者處理的錯誤絕對不能自己消失，因為那等於在用最粗暴的方式教使用者「錯誤訊息可以忽略」。另外別忘了色盲使用者 —— 大約每十二個男性就有一位有紅綠色弱，光靠顏色傳達訊息等於什麼都沒說，一定要搭配圖示跟文字。
七、圖示：小圖片，大誤會
圖示的先天弱點很單純：使用者常常猜錯不熟悉的圖案。真正能被普遍辨識的圖示其實沒幾個 —— 放大鏡、房子、齒輪、垃圾桶，其他一切都只是一個等著被驗證的假設。三十年前立下的準則到現在依然成立：只要空間允許，圖示一定要搭配文字標籤。一個文字標籤，是你能買到最便宜的易用性保險。每一次「圖示配文字」都是一次教學，每一個沒配文字的圖示都是一次考試。
還有一個容易被忽略的小角色：favicon，也就是瀏覽器分頁上那個十六乘十六像素的小圖示。分頁一多，標題文字幾乎都被截斷到看不見，這時候 favicon 就是你的網站僅存的身分證明，值得花心思設計清楚。
八、核取方塊與單選按鈕：方形代表「可複選」，圓形代表「只能選一個」
這兩個兄弟元件的形狀本身就是使用說明：方形表示「這幾個選項互不相干，愛選幾個選幾個」，圓形表示「這一組選項互斥，只能選一個」。這套語法使用者已經被訓練了幾十年，如果設計師把兩者形狀對調，畫面就等於在說謊 —— 但這種調換其實一直不斷發生，該停止了。
滑動開關（Toggle Switch）則比較像核取方塊裡「比較潮」的表親，分工原則很單純：設定會立即生效，就用滑動開關；設定要等按下送出鍵才會套用，就用核取方塊。如果一個開關上方還放了一顆「儲存」按鈕，那本身就是自相矛盾 —— 切換的當下算生效，還是按下儲存那一刻才算？沒人說得清楚。
九、分頁標籤：同一列、同類型、同層級
分頁的比喻直接來自檔案抽屜：卡片分隔頁、伸出來的標籤條。這個隱喻決定了設計規則：被選取的分頁要看起來跟內容黏在一起，未選取的分頁要看起來可以點但地位較低，標籤名稱要簡短，而且只能排一列。微軟九〇年代中期的選項對話框曾經把十幾個分頁塞成好幾列，一點到後排的分頁整排就會重新洗牌，使用者的空間記憶瞬間歸零。這個教訓業界早就學到了，別讓使用者用自己的體驗重新學一次。
分頁不適合用在有先後順序的步驟上 —— 結帳流程該用精靈引導，不是檔案櫃，因為步驟有順序，分頁卻暗示著隨意跳轉。分頁也會把內容藏起來，如果使用者需要跨頁比較資料，分頁反而把「用看的認」退化回「用記的想」，這種情況該用表格，不是分頁。
十、搜尋：讓使用者用自己的話講出目標
搜尋欄是一個文字輸入框加上一個送出動作，讓使用者用自己的話直接說出想找什麼，不用在導覽裡東翻西找。很多網路使用者一進站就直接找搜尋框，其他人則是在選單失靈時把搜尋當成逃生門，兩種情況都需要一個容易找到、而且願意包容打字失誤的搜尋引擎。
搜尋還有一個導覽給不了的好處：查詢紀錄。使用者會在裡面用最真實的措辭、拼字，把自己想要什麼原原本本打出來。你的搜尋紀錄，是你能拿到最便宜的一份使用者研究。那些查得到但結果很差的關鍵字，其實就是一份依需求排序好的待辦清單。
額外加碼：視窗與游標
視窗是組織螢幕資訊的基本比喻，每個視窗定義自己的邊界跟位置。網頁應用程式的設計師現在大多是「繼承」視窗（也就是瀏覽器分頁），而不是自己動手畫。真正還留下來要設計的問題是「什麼時候該開新視窗」，答案是：盡量少開。捲軸則同時扮演控制器跟地圖的角色 —— 一定要維持看得見的粗細，別讓它瘦到使用者根本抓不到。
游標則是使用者的手在螢幕上的代理人，形狀就是承諾：箭頭代表可以點，手形代表可以連結，工字形代表可以編輯文字。這套符號語言從一九六四年 Doug Engelbart 發明滑鼠開始累積至今，形狀說了什麼，畫面就該真的做到什麼。
結語
這十個元件（加上視窗跟游標兩個附加項目）沒有一個是新發明，這正是它們的價值所在 —— 每一個都撐過了數十億使用者、四十幾年的考驗。與其急著發明新元件，不如先把這套字母表用對、用好。畢竟，每一個多餘的通知都在花掉信任額度，每一次形狀誤用都在讓畫面說謊，而每一個標好文字的圖示，都是在替使用者省下猜測的時間。
如果你正在做產品設計，不妨拿這十項準則對照一下手邊的介面，看看有沒有哪個環節，其實一直在悄悄消耗使用者的耐心。
常見問題
Q1：核取方塊和單選按鈕到底該怎麼分？
方形核取方塊用於可複選、互不相干的選項；圓形單選按鈕用於互斥、只能選一個的選項。形狀本身就是給使用者的說明書，不要對調使用。
Q2：什麼時候該用滑動開關，什麼時候該用核取方塊？
設定值會立即生效，就用滑動開關；如果還要按下「儲存」才會套用，就用核取方塊，避免使用者搞不清楚變更到底生效了沒。
Q3：彈出式視窗（Popup）真的不能用嗎？
不是完全不能用，而是要衡量代價。強制型彈窗會打斷使用者的任務，如果沒有真正值得打斷的理由（例如不可逆的決策），建議改用非強制型面板或行內訊息。