SPARKFUL

Blog

Insights from the SPARKFUL teams

行動裝置上的按鈕大小設計

Magic Hunguser-interface-design
name

本文有圖檔遺失,我們正在努力恢復中了!

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

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

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

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

touchm

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

example

觸控式行動裝置上的螢幕空間寸土寸金,過大的按鈕設計會浪費空間,有質感的小按鈕又總是讓人按不到,那麼到底按鈕應該要設計多大才方便使用呢?根據過去的統計資料,人們最常用於操控觸控式螢幕的拇指與食指平均寬度為:男性 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. Photo by Kelly Sikkema on Unsplash
Magic Hung
Magic Hung
Technical Director
Technical Director @ Fourdesire. Create fun and crafts via programming.
divider
Related Posts
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...Read more
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...Read more
name

為使用者撒下「麵包屑」

大家小時候應該都有看過或聽過《糖果屋》(收錄於格林童話)的故事吧?故事裡的小兄妹在森林裡面邊走邊撒下麵包屑,希望可以在迷路的時候沿著麵包屑回到家,結果麵包屑被森林裡的小動物吃掉,這對小兄妹也就在森林裡面...Read more