【UI 陷阱】按鈕總是看的到卻點不到?

buttonsize

在茫茫的 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),開發者就勢必需要花時間調整觸控感應區的大小,才不會讓你的使用性大打折,為了魚與熊掌兼具,這些需要費工設計的小地方可是省不得的呢!

 

延伸閱讀:

按鈕要多大?費茲定律告訴你

【ui-陷阱】套牢的進度對話框

【ui-陷阱】消失的訊息

 

Image via CJ Isherwood, CC License.

參考文獻:

[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

Audi 汽車的網站上曾經做過一個有趣的服務,他們讓使用者可以選擇自己的配備,像是座椅、皮套、方向盤、烤漆等等,然後看看這台車將會變成什麼樣子。使用者必須一組一...
許多時候我們選擇用 Illustrator 來完成工作。Illustrator 最大的優點在於可以輕易將圖形量化並修改、以及可以在完成製圖後再來考慮大部分的「後...
想像你現在正在一間唱片行裡挑喜歡的 CD,當你正要帶著一張標價 399 元的搖滾專輯去櫃檯結帳的時候,旁邊有一個背著吉他的年輕人拉著你,說:「我只是好心想告訴你...
中國有一句成語叫做「白紙黑字」,白紙上寫了黑字,閱讀起來是再清楚也不過了。形容了明確的文字憑據,不容許抵賴或悔改。一直到現在,白紙依然是我們最常用到的紙張類型,...
設計使用者介面時常常會碰到需要讓使用者來決定下一步的時候,在電腦系統中最常見的就是「確認」以及「取消」按鈕。像是在作業系統中要刪除檔案時,系統會跳出以下的詢問視...
色相環是指人類的肉眼可以辨識的色彩色相所組成的色環,其中以 12 色相環最為常見以及使用,用途是幫助我們更快認識以及識別顏色之間的關聯度。 12 色相環是由 3...
© 2013 Desiring Clicks. All Rights Reserved.
Top