網路架站

手機按鈕太小誤觸,真的只是手滑嗎?其實是量得出來的成本

多數團隊遇到訪客在手機上點錯按鈕,第一個念頭通常是使用者自己手滑,或者當下不夠專心,很少人會回頭想,手機按鈕太小誤觸其實是一個量得出來的落差。手指有多粗、按鈕做得多小,兩者中間差了幾毫米,都能量出具體數字,換一支手機、換一種握法,量出來的結果也大同小異。

這不是設計師憑感覺才會踩到的問題,而是有生理數據、行為科學跟大規模瀏覽紀錄可以印證的一連串反應,訪客點不準,重試一次,還是點不準,乾脆關掉頁面。按鈕該做多大,業界其實早有現成的國際標準可以對照,這篇不重複那份規格表,而是把鏡頭拉遠,看誤觸這件小事最後怎麼變成一條會流失訪客的路徑。

先從最根本的問題講起,看手指比螢幕上的按鈕大多少。

手指比想像中粗,這是量得出來的落差

手指的實際觸壓面積比多數人想像中大。Nielsen Norman Group 在分析觸控目標設計時,引用了麻省理工學院 Touch Lab 的研究,指出一般人的指尖寬度落在 1.6 到 2 公分之間,拇指真正壓在螢幕上的面積更大,平均寬度來到 2.5 公分左右。Parhi、Karlson 與 Bederson 在 2006 年的研究則建議,要讓使用者快速準確點中一個目標,該目標的最小尺寸應該落在 1 公分見方以上。

拿這幾個數字對照手機上常見的按鈕,落差立刻浮現。很多網站的關閉鈕、純圖示的功能鈕、頁尾一排社群分享小圖示,實際可點擊的範圍往往只有一小塊,遠比拇指的觸壓面積小上一截。這不是設計師美感取捨的問題,是尺寸擺在那裡就對不上。業界對這件事其實早有共識,建議的觸控門檻大致落在 40 幾像素上下,只是不少網站的實際設計並沒有對齊。

指尖與拇指的觸壓面積遠大於約 24px 的常見小按鈕,手機按鈕太小誤觸是量得出來的尺寸落差
拇指壓上去約 2.5 公分寬、指尖也有 1.6 到 2 公分,遠比只有 24px 的關閉鈕、圖示鈕大一截。

這個落差之所以重要,是因為它會直接影響使用者選取一個目標所需要的時間跟出錯率,而這正是下一步要拆的部分。

按鈕越小,點準要花的時間就越長

手指跟按鈕的尺寸對不上,接下來會發生什麼事,心理學家 Paul Fitts 在 1954 年提出的費茲定律(Fitts’s Law)已經給出解釋。這套理論說的是,一個目標離手指起始位置越遠、目標本身越小,選中它所需要的時間就越長,選錯的機率也越高。這是一套通用的人因工程理論,不只用在觸控螢幕,滑鼠、搖桿等任何需要瞄準再點選的操作都適用;套進手機介面,結論很直接,按鈕做得越小,使用者要花的時間跟出錯的機會就跟著上升。

Nielsen Norman Group 在同一份研究裡,點出兩個具體現象可以拿來解釋這件事實際怎麼發生。一個是使用者「看得到不代表點得準」(view-tap asymmetry),按鈕的文字標籤看起來清清楚楚,但真正能點中的範圍比看起來的小很多,或者跟旁邊的元素擠在一起,使用者得瞄準好幾次才點對地方。另一個是「元素太擠造成誤觸」(crowding causes errors),按鈕跟按鈕之間留白不夠,手指點下去很容易先碰到隔壁的目標,就算最後沒點錯,光是感覺這裡容易點錯,也會讓使用者覺得整個介面難用。

同樣三顆功能鈕,太小又擠時觸控範圍互相重疊容易誤觸,做到 44px 以上並拉開間距後才各自分明
按鈕不是看得到就點得準,太小又擠會讓觸控範圍重疊,尺寸夠、間距足才按得準。

按鈕做小、擺擠,不會只讓人多花零點幾秒瞄準,它會啟動一整串使用者不自覺的挫折反應,而這條反應鏈最後去了哪裡,才是這件事真正影響生意的地方。

誤觸這件小事,怎麼變成流失顧客的路徑?

點不準的瞬間,使用者的動作其實很固定,再點一次,如果還是沒反應,情緒開始上來,連續點好幾下,最後乾脆放棄、離開頁面。這條「誤觸、重試、挫折、放棄」的路徑,不是憑感覺推測出來的行為模式,在大規模使用者行為分析裡有專門的名稱可以追蹤。

其中一個叫「rage click」(暴怒點擊),使用者在很短的時間內對著同一個元素連續點擊好幾次,這通常代表他正在經歷「按了沒反應」的挫折,而不是單純手滑。另一個是「dead click」(無效點擊),使用者點了某個看起來可以互動的元素,頁面卻完全沒有任何回應,連續發生幾次,使用者多半會判定這個功能壞了,乾脆放棄操作。這兩種訊號在大型分析平台的追蹤資料裡,是可以被辨識、被計算出比例的,不是主觀感受。

Contentsquare 在 2026 年發布的《Digital Experience Benchmark》報告裡,針對這類「挫折訊號」(frustration signals)做了年度追蹤,資料規模涵蓋 990 億筆造訪、超過 6500 個橫跨 9 個產業的網站,結果顯示整體挫折訊號比前一年下降了 4.3%,方向正在改善,但這不代表問題已經消失。往前推一份報告更能看出問題有多普遍。Contentsquare 在 2024 年發布的報告分析 2023 年度資料時發現,挫折訊號影響了將近四成(39.6%)的網站造訪,估計拖累互動與造訪價值達 15%,那一年行動裝置的轉換率更下滑了 6.4%。

誤觸點不準會一路走成連續再點、判定壞了到放棄離開頁面,是可被追蹤的挫折訊號路徑
誤觸、連續再點、判定壞了、離開,這串挫折訊號曾影響約 39.6% 造訪(資料來源:Contentsquare)。

這些數字不是說按鈕太小一定會讓每個訪客都轉身離開,誤觸只是眾多挫折訊號裡最直接、最常見的一種,但它已經足夠說明一件事,一個做得太小的按鈕,不會只停在「使用者體驗不太好」這種模糊的形容詞裡,它連到的是可以被量出來的造訪行為跟商業表現。按鈕該做多大,這件事其實不缺答案,只是很多網站沒有把答案用上。

業界不是沒有答案,是很多網站沒對齊既有共識

Apple 的人機介面指南(Human Interface Guidelines)建議互動元素的可點擊區域至少維持 44×44 點;Google 的 Android 無障礙指南則建議觸控目標做到 48×48dp 以上,元素之間至少留 8dp 的間距,換算到實際螢幕上大約落在 9 公釐,符合國際上對觸控物件建議的 7 到 10 公釐範圍。這兩個數字看起來不完全一樣,但方向一致,都是廠商自己內部測試出來、公開寫進官方文件的門檻,不是設計師憑感覺喊出來的數字。

更關鍵的是,這件事已經不只是體驗加分題。全球資訊網協會(W3C)在 WCAG 2.2 版本裡,把「Target Size (Minimum)」列為 AA 等級的合規項目,要求指標可操作的目標至少達到 24×24 CSS 像素,少數例外情況除外。W3C 說明這條規範對誰有幫助時,特別點出手部有精細動作障礙的使用者、容易手震的族群、習慣單手操作的人,以及在公車、捷運等會晃動的交通工具上滑手機的乘客。換句話說,按鈕做太小,已經不只是「這個網站好像有點難用」這種模糊評價,在無障礙稽核的框架下,它會被算成一項需要修正的缺失。

Apple 建議 44×44 點、Google 建議 48×48dp 加 8dp 間距、W3C WCAG 2.2 要求至少 24×24 CSS 像素
Apple 的 44 點、Google 的 48dp、W3C 的 24 像素單位不同,方向一致:把可點區域做大、彼此留間距。

知道規格門檻在哪裡,不代表問題就此解決,很多網站把按鈕改大之後,誤觸還是照樣發生。

按鈕做大只是其中一步,時機和慣用手同樣重要

把按鈕改大,聽起來像是最直接的解法,但只做這一步,誤觸不會自動消失。前面提過,元素擠在一起本身就會造成誤觸,如果把每個按鈕都放大,卻沒有同時把它們之間的間距拉開,結果只是換一種方式互相干擾,問題還在,只是換了個位置發生。

另一個容易被忽略的變數,是拇指天生構不到的地方。多數人是單手拿著手機操作,用同一隻手的拇指完成大部分點擊,螢幕上有些角落,不管怎麼調整握姿,拇指都很難自然伸到。UX 研究者 Steven Hoober 在分析使用者實際握持手機的方式時就指出,單手操作者多半會用固定的幾種姿勢拿手機,拇指的活動範圍本來就有限。把重要的操作按鈕擺在這類角落,等於把誤觸的風險直接內建進版面裡,不管按鈕本身做得多大都一樣。

情境也會放大這個風險。Nielsen Norman Group 的研究提到,使用者走路、通勤、單手抱著東西的時候,操作精準度本來就會下降,需要精細操作的控制項在這些情境下會變得很難用,甚至完全用不了。這代表按鈕的容錯空間不能只用「使用者坐在桌前、雙手打字」的理想狀態去設計,行動場景的使用者本來就更容易點歪目標。

按鈕好不好按,不是美感問題,而是一件有生理數據、行為科學跟大規模行為紀錄可以驗證的商業風險。開頭提過,多數團隊遇到手機按鈕太小誤觸,第一反應是覺得使用者手滑,但手指的觸壓面積、選取一個目標所需要的時間跟出錯率、點不準之後的挫折反應,每一環都量得出來,也都能被觀察、被驗證。

這代表按鈕尺寸不該是設計最後才順手調一調的小細節,而是可以排進優先順序、值得認真測量一次的項目。量出實際的觸控範圍多大、看看行動裝置上的誤觸訊號有多頻繁,答案往往比「感覺應該還好」更值得信任。

資料來源
  1. Touch Target Size — Nielsen Norman Group
  2. Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices — ACM Digital Library
  3. Fitts's Law and Its Applications in UX — Nielsen Norman Group
  4. 2026 Digital Experience Benchmark Report — Contentsquare
  5. The 2024 Digital Experience Benchmark Report — Contentsquare
  6. How Do Users Really Hold Mobile Devices? — Steven Hoober
  7. Layout - Human Interface Guidelines — Apple Developer
  8. Touch target size - Android Accessibility Help — Android Accessibility Help
  9. Understanding Success Criterion 2.5.8: Target Size (Minimum) — W3C WAI