SPARKFUL

Blog

Insights from the SPARKFUL teams

觸控螢幕的 UI 設計:該選手勢操作還是虛擬按鈕?

Magic Hunguser-interface-design
name

手勢操作可說是觸控式行動裝置的一大特色以及優點,使用者可以在空間狹小的螢幕中輕鬆又放肆地揮舞手指,快速執行想要的功能。而比較起螢幕中的虛擬按鈕,到底手勢對於使用性以及效率可以帶來多少效益呢?

研究者 Bragdon 等人做了一個有關手勢操作的探討 [1],比較了 5 種手勢操作流程:

  1. 直線式手勢(Bezel marks)
  2. 曲線路徑手勢(Bezel paths)
  3. 虛擬按鈕(Soft buttons)
  4. 實體按鈕-直線式手勢(Hard button marks)
  5. 實體按鈕-曲線路徑手勢(Hard button paths)

並讓受測者在不同的情境以及干擾程度下進行指令操作,來比較指令完成的效率以及精確程度。

操作模式解說:

  1. 直線式手勢以及曲線路徑手勢,透過簡單的橫向滑動手勢(Bezel swipe)切換至手勢操作模式 [2],再使用手勢來進行任務操作。
  2. 實體按鈕-直線式手勢,以及實體按鈕-曲線路徑手勢 則讓受測者先透過實體按鈕切換至手勢操作模式,再進行手勢任務操作。
  3. 虛擬按鈕則是直接點擊在畫面中指定的按鈕即可。

需要高度分心的應用,適合虛擬按鈕設計

實驗結果顯示,使用直線式手勢(Bezel marks)在受測者受到不連續的干擾訊息的情境時,完成效率明顯的高於使用虛擬按鈕,並且在操作的過程中,眼睛需要注視於螢幕的時間只需約 3.5%。

而使用虛擬按鈕則需要 98.8% 的時間,這幾乎代表無法在受到干擾的情況下使用,所以非常適用於需要高度分心的應用上,例如走路時切換歌曲、撥打電話等。

其次有效率的為實體按鈕-直線式手勢,而曲線路徑(Free-form path)錯誤率則比直線式手勢(Marked-based)多出約 168%, 主要原因在於,使用直線式手勢只需要單手就可以完成操作,但曲線路徑卻無法精確地透過單手完成指令操作。

而在精確度方面,直線式手勢與虛擬按鈕幾乎沒有差異。

實驗發現在受測者直接目視專注於螢幕時,使用直線式手勢與虛擬按鈕的完成效率,竟沒有顯著差異,且目標虛擬按鈕沒有刻意強調與區別。

50% 的受測者喜歡手勢操作勝過虛擬按鈕

在主觀感受方面,約有 50% 的受測者在直接目視螢幕操作時,喜好使用手勢代替虛擬按鈕,並且覺得曲線路徑式的方式會讓他們覺得會有過多的手勢操作;而結合實體按鈕的操作流程則讓部分受測者覺得操作累贅不順暢,但相較於虛擬按鈕,還是比較容易不需透過眼睛就可以執行完成。

這個實驗發現,直線式手勢對於指令操作是最有效率、並保有精確度的,即使在有高度干擾的情境下也可以順利完成操作。

因此在設計一些模式轉換或特定功能開關操作時,建議使用直線式手勢來增加操作效率,以及釋放使用者的注意力需求,達到可以眼球零負擔(eyes-free)的使用方式,缺點是手勢操作需要提示以及教學,通常仍然會搭配虛擬按鈕一同使用。


參考文獻:

  1. A., Bragdon, E., Nelson, Y., Li, and K. Hinckley. (2011). "Experimental Analysis of Touch-Screen Gesture Designs in Mobile Environments," Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp 403-412.
  2. V., Roth and T., Turner. (2009). "Bezel swipe: conflict-free scrolling and multiple selection on mobile touch screen devices," In CHI'09. (圖片來源:ChodHound, CC Licensed)
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

The Visual Perception Principles of Gestalt Psychology

Special tendency occurs when our eyes and brain observe objects and perceive visual stimuli. The tendency usually helps us to identify objects faster, but sometimes it also causes the “illusion”. The main concept of Gestalt Psychology is “the whole is other than the sum of the parts”. For ex...Read more