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

評論:How to Prevent Users from Mistapping Icon Buttons

該篇文章作者提供兩種方法來避免使用者誤觸按鈕,一是按鈕之間要提供適當的距離,另一則是使用Circle Pads來加強暗示。

1.Add Extra Padding Between Icons

在第一點主要說明按鈕之間要提供適當的距離,對於這個觀點是深感認同,在個人最近常用的"高雄閱讀隨身GO"APP,就深刻體會到按鈕間有適當距離的重要。從下面圖一左可看到書單上有兩個看來可以提供點擊的地方,一個i圖示,另一個是>,這兩圖是提供給我的訊息都是可以到下一層,但依據過去的操作經驗,點擊整個欄位也是到下一層的方法,因此我的首選就是點擊整欄,但結果卻不是我認為的進到下一層,而是出現了其他的操作行為(圖一 右),於是我只好點擊>,為何選擇>這圖示,因為與i比較起來,他讓我更直覺的是到下一層的指示。因他靠i圖示很近,所以我只能小心的點擊,避免點到旁邊的按鈕,點了第一次沒反應,以為是自己沒點好,再更小心的點一次,依舊紋風不動,這時我知道也不是這個入口了,最後只剩下i這個能點。

圖一

從上面的操作流程看來,當按鈕太接近時,一定會讓使用者花更多力氣去點擊,如要單手操作就更為不易,有適當的距離才能讓使用者輕鬆的點擊,而所謂適當的距離,作者提到可以用手指來做為距離的測量,個人認為這是一個理想的狀況,但並不是適合套用在每個介面,畢竟螢幕空間是有限的,最終還是要經過易用性的測試,來找出適合的距離。

2.Use Circle Pads for Visual Affordance

文章第二點所講的是為按鈕加上Circle Pads來加強暗示性,透過增加按鈕的視覺範圍,讓使用者可以正確輕鬆的點擊,並且能清楚知道點擊的變化。個人認為如要執行該論點,同樣也有螢幕空間的問題,因此如按鈕間有適當的距離,且按鈕點擊上又能清楚表達三種狀況:點擊前的狀態、點擊時得狀態以及點擊後的狀態,也是能讓使用者輕易正確的完成目標。

圖二 (LINE):該圖亮處左邊有4個按鈕,並且也有加強暗示,但因每個按鈕的距離過近,點擊時也需小心的點擊,才能避免誤觸;反觀右側的三個按鈕,雖然距離相近,但按鈕是比較大的,因此在點擊上就較為輕鬆。
圖三:亮處中的三個按鈕,依據介面提供適合距離,並清楚告知點擊前後的變化,讓使用者了解他操作後發生了什麼事。

綜觀以上內容,個人認為提供按鈕彼此間適當的距離,是讓按鈕易用的關鍵,之後才是按鈕操作的變化以及圖示能正確提供訊息,如能完整做到這幾項,應能解決多數按鈕的易用性,至於是否要利用Circle Pads這樣的方式來加強,就需依據介面大小、需求來評估了。

發表迴響

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