本文有部分圖檔遺失,我們正在努力回復資料中。

在茫茫的 APP 海中,總是會有很多小不拉機的按鈕,怎麼點也點不到,使用觸控式行動裝置時最痛苦的事莫過於此,如果上天能夠給我一個重來的機會,我一定不會下載這個 APP!

但,同樣是一些嬌小的內建按鈕,如 iOS 導覽列上的導覽按鈕以及清單列的刪除按鈕,為何它們卻不會造成使用上的困擾呢?

秘訣在於設定按鈕的觸控感應區(Touch area),按鈕其實可以分為兩個部分:

  1. 視覺目標(Visual targe)- 使用者可以看的到,並且想要去點擊的區域。
  2. 觸控感應區(Touch area)- 使用者看不到,用於判斷檢測手指是否有觸碰到按鈕的區域。
    touchm

一般來說,對小於建議大小的按鈕,我們需要手動將觸控感應區調整的比視覺目標更大一些,這樣一來即使使用者沒有真的觸碰到按鈕的視覺目標(如下圖),也可以成功地點擊到按鈕。但開發者一般在撰寫自定的按鈕時,很容易忽略了這個細節,忘了要將觸控感應區指定到適合的大小,以方便使用者點擊。

觸控式行動裝置上的螢幕空間寸土寸金,過大的按鈕設計會浪費空間,有質感的小按鈕又總是讓人按不到,那麼到底按鈕應該要設計多大才方便使用呢?根據過去的統計資料,人們最常用於操控觸控式螢幕的拇指與食指平均寬度為:男性 2.29 cm 與 1.82 cm、女性 1.91 cm 與 1.55 cm;因此傳統上建議按鈕大小為 2.2 cm。

但隨著觸控螢幕的改進與進步,許多研究發現有效率且合適的按鈕大小約為 0.9 cm 至 1.0 cm ,在 Apple 所提供的 iOS Human Interface Guidelines 上也明確建議可接受的按鈕大小為 44pt(約 0.65 cm),再小則會嚴重影響使用者的操作(實際上需再配合使用費茲定律來做設計)。

如果你的服務是設計給 50 歲以上年長的使用者的話,合適的大小則為 1.14 cm(單一按鈕)以及 1.65 cm(並列式按鈕)。

但如果為了視覺與空間設計上的需求,按鈕必須小於建議的尺寸(如導覽按鈕高 0.40 cm;清單列刪除按鈕 0.30 cm x 0.30 cm),開發者就勢必需要花時間調整觸控感應區的大小,才不會讓你的使用性大打折,為了魚與熊掌兼具,這些需要費工設計的小地方可是省不得的呢!

參考文獻:

  1. Hoober, S. and Berkman, E. (2011). “Designing Mobile Interface,” O’Reilly Media.
  2. Lee, S. C. and Zhai, S. (2009). “The Performance of Touch Screen Soft Buttons,” Proceedings of the 27th international conference on Human factors in computing systems. 309-318
  3. Sun, S., Piocher, T., and Qu, W. (2007). “An Empirical Study on the Smallest Comfortable Button/Icon Size on Touch Screen,” Proceedings of the 2nd international conference on Usability and internationalization. 615-621.
  4. Parhi, P., Karlson, A. k., and Bederson, B. B. (2006). “Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices,” Proceedings of the 8th conference on Human-computer interaction with mobile devices and services. 203-210.
  5. Jin, Z. X., Plocher, T., and Kiff, L. (2007). “Touch Screen User Interfaces for Older Adults: Button Size and Spacing,” Proceedings of the 4th international conference on Universal access in human computer interaction: coping with diversity, 933-941
  6. 圖片來源:CJ Isherwood, CC Licensed