評論：How to Prevent Users from Mistapping Icon Buttons
此文提到幾個觸控按鈕的設計重點：
- 按鈕之間要有足夠的間距：當間距足夠，點擊某一按鈕時，相鄰的按鈕仍然可見。
- 顯示按鈕邊界，回饋用戶點擊的位置。
- 用手指實測。
關於第 1 點，大原則沒有錯，但知易行難，特別是內容龐雜又有許多觸發點的狀況，比如圖 1 的 Instagram APP 版，藍色框線標示的位置全部都是點擊熱區，留言、觀看次數、帳號、留言摘要、查看全部留言緊緊相依，各自有各自的作用。
容易誤擊嗎？肯定是的。
先不論整體介面設計，至少 FB 的按鈕間距比 Instagram 人性一些。
另一個典型案例是手遊，功能龐大的遊戲很常出現如圖 2 的操作介面，有限的螢幕空間擠了許多小小的圖示按鈕，一個一個緊緊相依。
容易誤擊嗎？肯定是的。
當然我們可以思考能否重新安排這些按鈕的順位，將次要功能收納起來，精簡第一層畫面的按鈕數量。但這麼一來又會加深次要功能的操作步驟，導致需要時找不到。
即使可以在遊戲上線後，從各項功能的點擊數據判斷出使用頻率，收納問題仍是一個難度頗高的取捨。因為數據可能沒有明顯的分野，那麼到底達多少程度算是常用？就算訂出一個滿足相對多數的標準，接下來介面的改動勢必會影響到相對少數的族群。
要用戶欣然改變習慣，不是一件容易的事情。Real racing 2 曾經大改過進版操作介面，當時被玩家罵翻了，APP Store 上連番出現一星評價，多數批評在新介面找不到需要的功能，以及先前在首屏（above the fold）就能點擊的選項，在新版要往下拉才看得到。
我相信 Instagram 或手遊的開發團隊，不可能對 UX 毫無概念，畢竟除了按鈕間距較不人性，其他環節大多有照顧到使用體驗。
那為何會設計出如圖 1、圖 2 的介面？
個人認為是折衷後的結果，剩下不完美的部分，只要別太誇張，仍然可以靠使用者的習慣克服，雖不滿意但可接受。若硬要套用該文作者提到的第 2 點解法：顯示按鈕邊界，在 Instagram 反而會變成很奇特的畫面，就算都用淺灰打底標示熱區範圍，為數眾多的塊狀元素將會干擾瀏覽。
如果採用像虛擬鍵盤的提示方式（圖 3 ），也許會好一些，點擊當下立即以微互動（microinteraction）回饋使用者操作結果。在有限的螢幕空間裡，這是滿理想的回饋方式，但開發難度要再請工程師評估了。
話說回來，與其把一堆操作介面擠在一起，再追加各式各樣的微互動回饋，不如一開始加寬熱區之間的距離，並加大單一按鈕的熱區範圍，問題不就解決了嗎？但如果 Instagram 實務上能這樣改，早就改了，也輪不到其他人提點。
觀察一下 APP Store 的最低分評論，也沒有用戶反應容易誤擊的問題，所以這個問題嚴重嗎？看樣子不是。
關於避免誤擊，就算做到該篇文章提出的 3 個要點，包括在按鈕之間保留適當間距、顯示按鈕邊界、以手指實測，仍有誤擊的可能，因為誤擊的原因也許在點擊前就出現了。
一般來說，使用者操作前會先觀察，觀察後才有動作。《It’s Not You, It’s the Interface》提到的指示符號，正是使用者觀察時在搜尋的重要線索，也就是 Donald Norman 在《好設計不簡單》所說的「指意」：
設計師正確的觀察到，有些人對使用某產品有困難，是因為他們沒有注意到預設用途，所以，設計師故意加上可看到的記號，來表明預設用途的存在。
p.241
回到圖 1 的 Instagram，圖示按鈕都沒有文字標籤，首次開啟也沒有類似手遊的新手教學，使用者如何得知每個按鈕的作用？除了依靠其他 APP 的使用經驗，或者詢問別人，再來就是實際體驗了。
會不會因為不知道按鈕作用而不想點擊？也許吧！除非做 A/B testing，否則難以證實因果關係了。
刊頭圖片：Kelly Sikkema on Unsplash