文章觀點評論:防止誤觸按鈕(3)

評論:How to Prevent Users from Mistapping Icon Buttons

此文提到幾個觸控按鈕的設計重點:

  1. 按鈕之間要有足夠的間距:當間距足夠,點擊某一按鈕時,相鄰的按鈕仍然可見。
  2. 顯示按鈕邊界,回饋用戶點擊的位置。
  3. 用手指實測。

關於第 1 點,大原則沒有錯,但知易行難,特別是內容龐雜又有許多觸發點的狀況,比如圖 1 的 Instagram APP 版,藍色框線標示的位置全部都是點擊熱區,留言、觀看次數、帳號、留言摘要、查看全部留言緊緊相依,各自有各自的作用。

容易誤擊嗎?肯定是的。

先不論整體介面設計,至少 FB 的按鈕間距比 Instagram 人性一些。

圖 1 Instagram

另一個典型案例是手遊,功能龐大的遊戲很常出現如圖 2 的操作介面,有限的螢幕空間擠了許多小小的圖示按鈕,一個一個緊緊相依。

容易誤擊嗎?肯定是的。

當然我們可以思考能否重新安排這些按鈕的順位,將次要功能收納起來,精簡第一層畫面的按鈕數量。但這麼一來又會加深次要功能的操作步驟,導致需要時找不到。

即使可以在遊戲上線後,從各項功能的點擊數據判斷出使用頻率,收納問題仍是一個難度頗高的取捨。因為數據可能沒有明顯的分野,那麼到底達多少程度算是常用?就算訂出一個滿足相對多數的標準,接下來介面的改動勢必會影響到相對少數的族群。

要用戶欣然改變習慣,不是一件容易的事情。Real racing 2 曾經大改過進版操作介面,當時被玩家罵翻了,APP Store 上連番出現一星評價,多數批評在新介面找不到需要的功能,以及先前在首屏(above the fold)就能點擊的選項,在新版要往下拉才看得到。

圖 2 三國戰記的操作介面

我相信 Instagram 或手遊的開發團隊,不可能對 UX 毫無概念,畢竟除了按鈕間距較不人性,其他環節大多有照顧到使用體驗。

那為何會設計出如圖 1、圖 2 的介面?

個人認為是折衷後的結果,剩下不完美的部分,只要別太誇張,仍然可以靠使用者的習慣克服,雖不滿意但可接受。若硬要套用該文作者提到的第 2 點解法:顯示按鈕邊界,在 Instagram 反而會變成很奇特的畫面,就算都用淺灰打底標示熱區範圍,為數眾多的塊狀元素將會干擾瀏覽。

如果採用像虛擬鍵盤的提示方式(圖 3 ),也許會好一些,點擊當下立即以微互動(microinteraction)回饋使用者操作結果。在有限的螢幕空間裡,這是滿理想的回饋方式,但開發難度要再請工程師評估了。

圖 3 點擊虛擬鍵盤後的視覺回饋

話說回來,與其把一堆操作介面擠在一起,再追加各式各樣的微互動回饋,不如一開始加寬熱區之間的距離,並加大單一按鈕的熱區範圍,問題不就解決了嗎?但如果 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

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *