SPARKFUL
真抱歉,这个页面尚未被翻译成你的语言,但是我们正在努力中了!

Blog

SPARKFUL x Fourdesire 团队心得与生活点滴

觸控螢幕的 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
相关文章
name

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

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

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

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

立足在擬物與扁平之間

去年微軟發表了 Windows 8 所搭載的 Metro UI 後,就掀起了一陣扁平介面設計(Flat UI Design)的熱潮,許多網站、App、介面設計和互動設計都開始採用了這種風格。Google 在前一陣子的設計革新中也運用了許多扁平設計的元素,就連上星...阅读更多