從一個讓人火大的右下角取消按鈕，談如何不背叛人的直覺
體驗一個類似收銀台的操作介面時，右下區域放著一個取消類按鈕。
那一瞬間，它看起來更像「下一步」或「確認」會出現的位置，差點就按錯。
很煩。
但這不代表要發明一條教條：「取消按鈕永遠不能放右邊。」不同系統和產品有不同慣例，右側有取消本身並不是錯。
真正的問題是：人根據過去經驗預測的動作，是否和介面實際發生的動作衝突。
人看到新介面時不是白紙。手機、網站、收銀台、售票機、遙控器、電梯，都在訓練我們。設計若違背這些經驗，就會出現一種很討厭的介面：仔細想能懂，但手一快就容易錯。
很多日常誤操作不是深思熟慮後做錯，而是因為太熟、太快、太累，或兩個相似按鈕靠得太近。
這篇文章從一個小小的取消按鈕出發，再延伸到內容網站的自我稽核，用研究與設計原則回答：
什麼才是真正對人友善的UI/UX？
答案不是「多寫說明」。
而是：不要背叛預期、降低誤觸、讓錯誤可以恢復、不要把現在用不到的選項硬塞到眼前。
0. 30秒版：別只問「使用者為什麼按錯」，先問「是不是太容易按錯」
- 相同文字應該導向相同類型的結果。
- 常用操作盡量遵循熟悉的位置與慣例。
- 後果差異很大的操作，不要用幾乎相同的樣式緊貼在一起。
- 高代價操作盡量可復原；無法復原時，執行前說明具體後果。
- 點擊目標要夠大，也要和鄰近控制拉開距離。
- 進階功能可以保留，但不必第一次就全部展開。
- 不只看選項數量，也看比較到底有多難。
- 觀察「點了立刻返回」「剛開啟就關閉」等修正行為。
UI不是考試。
目標不是「使用者能不能研究懂」，而是不用研究UI也能大致做對。
1. 「直覺」通常是過去經驗的再利用
人會在腦中形成「這個系統大概怎麼運作」的模型，UX常稱為心智模型。[1][2]
放大鏡像搜尋、左箭頭像返回、垃圾桶像刪除、三角形像播放。
使用者不是每次都重新推理，而是在重用以前學過的介面文法。
因此，為了創新把搜尋做成星星、把關閉做成陌生符號，很可能讓設計師覺得新鮮，卻讓使用者開始解謎。
NN/g的可用性原則強調，介面應符合現實世界與產業慣例，並保持內外一致。[1]
空間上的對應也重要。刺激—反應相容性的研究顯示，空間提示與需要的反應不相容時，錯誤會增加。[3]
原則很簡單：
不要把使用者已經學會的經驗清零。
2. 「理解錯」和「手滑」不是同一種錯誤
一種情況是使用者誤解系統，所以做了錯誤決定。
另一種情況是使用者明明知道，卻按錯了。
NN/g大致把它們區分為mistake與slip。[1]
以為按鈕是儲存，其實是刪除，可能是理解問題。
知道那是刪除，但因為緊貼著儲存而誤點，更像slip。
對後者說「請仔細看標籤」很弱。
特別危險的是把後果差異巨大的動作放在一起：儲存與丟棄、送出與取消、前進10秒與跳到另一篇文章。
NN/g也指出，破壞性操作與確認操作太靠近，在趕時間或反覆操作時容易產生誤點。[4]
後果不同，位置與視覺層級也要不同。
3. 加確認視窗之前，先問能不能復原
刪除、退訂、全部清空、放棄修改。
看到這些操作，很容易想到再加一個「確定嗎？」
但確認視窗不是魔法。
如果每件事都問，人很快會學會不看內容直接按確定。NN/g建議把確認留給嚴重而難復原的操作，寫清楚具體後果，並盡可能提供Undo。[5]
「確定刪除嗎？是／否」很弱。
「將刪除3項，30天內可以復原」 「刪除3項」 「保留」
更容易理解。
對人友善的設計不是幻想永遠不出錯，而是降低出錯的代價。
4. 按鈕不只要夠大，也要和鄰居保持距離
WCAG 2.2 Target Size (Minimum)要求指標操作目標原則上至少24×24 CSS像素，或保有足夠間距。[6]
W3C自己的例子就是：本來要按Submit，卻按到Cancel。
Enhanced準則使用44×44 CSS像素，Apple也一般建議按鈕可點區域至少44×44點。[7][8]
但全部做成44仍不是完整答案。
還要看大小、間距、操作後果、使用頻率、是否在螢幕邊緣、是否靠近外觀相似但意義相反的控制。
兩個都很大的「儲存」和「刪除」緊貼在一起，還是陷阱。
5. 「有這個功能」和「現在就展示」是兩件事
功能強的產品會越長越多。
朗讀、速讀、收藏、播放清單、章節移動、上一篇、下一篇、學習模式、設定、離線儲存。
每個都可能有用。
但第一次就全部攤開，會變成功能展。
漸進式揭露的做法是：先顯示高頻核心功能，低頻或進階功能等需要時再展開。NN/g指出這能幫助學習效率、操作效率與降低錯誤。[9]
實務規則可以很簡單：
不要刪，先摺起來。
6. 選項越多越糟嗎？沒有這麼簡單
Hick定律討論備選數量或不確定性與反應時間的關係，在HCI中仍是重要基礎。[10]
但現代綜述也整理了刺激—反應相容性、練習、超大型選擇集合等會讓簡單關係改變的情況。[10]
選擇過載也不是無條件成立。
2010年的統合分析發現平均效果幾乎為零，但研究間差異很大。[11]
2015年的統合分析則指出，選項集合複雜度、決策任務難度、偏好不確定性、想省力的目標等會加強選擇過載。[12]
所以問題不是「有10個」。
而是「讓一個很累的人立刻比較10個很難分辨的選項」。
系統裡可以很多，當下的決策面要小。
7. 內容網站自我稽核，也抓到同一類陷阱
7-1. 標題的一個詞觸發錯誤的下一步
AI開發文章標題碰巧有搬家相關詞，正文前卻出現搬家行動導引。關鍵字成功，語意失敗。
7-2. 10秒移動、章節移動、文章移動擠在同一控制列
它們都像方向操作，但後果差太多。局部移動和頁面跳轉應拆開。
7-3. 相同的「搜尋文章」去了不同地方
同一標籤卻有不同結果，會破壞已學會的意義。
7-4. 正文前先放出超長目錄
長文需要目錄，但17項全展開會在閱讀前先製造比較工作。
7-5. 搜尋頁把「全部收聽」做成最強按鈕
這是很好的進階功能，但不一定是最常見的搜尋任務。
7-6. 文末堆上推薦、排行、搜尋、電子報、作者資訊
每個都有理由存在，但不必同時擁有同等優先級。
7-7. 通知訂閱和取消太接近
相反結果的行為，最好在視覺層級和距離上都分開。
有趣的是：在意UX的網站，也照樣會替自己埋雷。
8. 廣告不等於壞UX，搶走閱讀任務才是問題
廣告可以支持營運。
問題是注意力競爭。
Web廣告的眼動研究顯示，橫幅與正文的距離、動畫等會影響視覺行為；在需要理解內容的閱讀任務中，干擾可能更明顯。[13]
文章頁可以設定一個「注意力預算」：
- 正文前不要同時堆廣告、播放器、巨大目錄、註冊CTA
- 廣告不要貼得離可操作內容太近
- 空廣告位及時收合
- 與連結保留誤觸距離
真正的問題只有一個：
使用者來這個頁面主要想做什麼？
9. 對人友善的UI/UX QC清單
可預測性
- 同一標籤是否產生同一結果
- 圖示是否符合一般意義
- 是否無理由逆轉平台慣例
- 初次使用者能否在點擊前大致預測結果
防誤觸
- 相反行為是否相鄰
- 破壞性操作是否和主要操作一樣醒目
- 能否復原
- 確認視窗是否說明真正後果
手指與指標
- 重要目標是否夠大
- 小目標是否密集
- 螢幕邊緣是否難操作
- 高代價行為是否有額外間距
資訊量
- 當下主任務是否清楚
- 進階功能是否過早全部展開
- 長目錄、篩選、推薦是否可漸進展開
一致性
- 產品內是否使用同一套互動文法
- 是否保留從其他產品學到的有用預期
10. 真正值得看的UX資料，是按錯之後發生什麼
點擊率只能說按鈕被點了。
更有意思的線索包括：
- 點擊後幾秒內返回
- 剛開啟就立刻關閉
- 跳頁後立刻回去
- 同一區域反覆點擊
- 錯誤後離開
- 第二次嘗試能完成
- 到核心內容前耗時異常長
這些不是困惑的證明，只是線索。
最好以匿名、彙總方式觀察。
假設 → 小改動 → 看修正行為 → 變好就保留 → 變差就復原
11. 結論：友善不是增加說明，而是減少陷阱
好UI通常不會搶戲。
按得到。 回得去。 想找的東西在熟悉的位置。
壞UI只要一次誤觸，就會突然成為主角。
「為什麼取消在這裡？」
不要讓人背機器的私人規則，讓機器盡量靠近人已經擁有的預期。
功能可以多。 進階功能可以保留。 廣告可以有。 文章庫可以很大。
但當下先顯示最需要的東西，把相反操作分開，用視覺層級表達後果大小，並讓錯誤可恢復。
對人友善的UI/UX，不是要求使用者更聰明，而是讓普通人在普通狀態下也不容易出事故。
資料來源
- Nielsen Norman Group nngroup.com
- Mental Models nngroup.com
- Christ et al. (2000) pubmed.ncbi.nlm.nih.gov
- Application-Design Mistakes nngroup.com
- Confirmation dialogs nngroup.com
- W3C Target Size (Minimum) w3.org
- W3C Target Size (Enhanced) w3.org
- Apple Buttons developer.apple.com
- Progressive Disclosure nngroup.com
- Proctor & Schneider (2018) pubmed.ncbi.nlm.nih.gov
- Scheibehenne et al. (2010) doi.org
- Chernev et al. (2015) doi.org
- Online advertising and visual attention pmc.ncbi.nlm.nih.gov
