超越觸控的手勢交互

1 評論 18005 瀏覽 53 收藏 13 分鐘

未來的交互是多重方式的。但結合觸控和隔空手勢(還可能有語音輸入)的方式,并非典型的UI設計任務。在Exipple,我們的設計師與工程師協(xié)作打造各種環(huán)境中的界面,能夠響應手勢交互和用戶移動等物理屬性。我們從迭代式的設計、研發(fā)和評估過程中受益良多,我愿意在此分享我們在手勢交互中的領悟與心得。

FC Barcelona博物館中一堵交互式視頻墻的照片。

設計易于發(fā)現(xiàn)的手勢

手勢通常被認為是與屏幕和物體交互的自然方式,我們會談論在移動設備屏幕上雙指縮放地圖,還有在電視前揮手切換到下一部電影。但這些手勢真的那么自然嗎?

對于從沒體驗過某種交互方式的用戶而言,手勢是陌生的領域。雖然我們都本能地了解在觸屏上查看地圖細節(jié)該如何操作,但是想一想,如果在遠處觀看一塊大屏幕呢?如果有人告訴你,你不用觸碰屏幕,可以通過手部運動,以一種很自然直觀的方式放大地圖,你會首先嘗試什么手勢?遇到這種問題時,我們每個人對自然的手勢都有各自的定義。

“未來的交互是多重方式的”

設計要易于發(fā)現(xiàn),這點非常重要。要確保提供正確的設計符號線索,幫助用戶輕松發(fā)現(xiàn)手勢操作方式。這些可以是視覺提示,表明什么樣的手勢觸發(fā)什么樣的動作。反復使用后,這些探索性的提示就不必保留了,因為用戶已經(jīng)學會了這種手勢。

還可以設計動畫,漸進式地揭示某種不同的交互方式。例如,要確保用戶了解到他們可以不必觸碰屏幕,在遠處就能操作,為此我們創(chuàng)造了一個菜單,當手指向屏幕時它就能顯示更多信息。起初圖片以一種隨意的方式懸浮排列(A圖)??拷焓种赶蜻@些圖片,能顯示出每張圖片其實是一個分類,包含更多內容(B圖)。

gest-7

為什么不能直接把觸控操作搬過來

去年我們做了一個小小的非正式研究。我們邀請了一些人到工作室來,向他們展示了一些熟悉的電視界面:菜單和圖標、地圖、網(wǎng)格、輪播圖。讓他們想象應該如何在遠處通過隔空手勢操作這些界面。

這些界面實際上是一系列微型的手勢交互原型。我們收集他們的期望,讓他們探索一番并給我們反饋。其中顯示出一種清晰的模式,他們的期望基本都來源于移動設備上熟悉的手勢。所有的參與者,都將手機上的心理模型應用到隔空手勢上。有時候,通過對界面操作的期望,我們甚至能從中區(qū)分出iOS和Android用戶。

“最直觀的未必最有效易用?!?/p>

但我們很快就遭遇了挑戰(zhàn):最直觀的未必最有效易用。例如,鼠標是一種高精度設備,提供一種精確控制。人的肢體在三維空間中隔空移動就沒這么精確。我們覺得自己的手在X軸上移動,但實際上我們在另外兩個維度上也在微微運動。

我們無法指望達到相同的精確度。專注于精確細致的移動,會不可避免地導致某種緊張——而且“伸直手”肯定不是自然的交互方式。

觸碰屏幕時,觸點就是起點——一個參照點。想象一下,典型的雙指縮放和雙手隔空構成類似的操作,兩者有什么區(qū)別??s放等級的參考點變得模糊不定。你也不能松開屏幕來停止操作,所以起始點和結束點都變得模棱兩可。

An example to avoid: the equivalent of a pinch gesture in an air gesture.
應該避免的例子:等同于雙指縮放的隔空手勢。

不要嘗試把觸控手勢直接變成隔空手勢,盡管它們更熟悉和容易。手勢交互需要一種全新的方式——一種起初陌生,但最終能夠讓用戶極盡掌控、并使用戶體驗設計走得更遠的方式。

去掉“亂跳”的指針

如果你在項目中運用計算機視覺技術(例如通過Kinect、Asus、Orbecc等帶有深度傳感器的相機捕捉動作),你就知道,無法100%實現(xiàn)手和手指的位置追蹤。

其他的技術或許能提供更高的精確度,但它們通常需要用戶穿戴特殊的設備。隨著我們手部運動,計算機并不能持續(xù)“看見”我們的手,結果就導致了我們所謂的手抖:看起來像屏幕上的指針或箭頭“緊張”顫抖。

“去掉指針這種反饋形式,提供一種替代方案。”

設計另一種指針或箭頭起不到多大作用,因為它仍然需要在屏幕上追蹤手部運動。你可以要求開發(fā)者過濾這些微妙的手部運動來避免這種效果。但是,這種解決方案要付出很高的代價,喪失了某些響應和精確度,并且會導致指針與手有輕微的延遲,降低用戶對于界面的操控感。喪失用戶的操控感,我們承擔不起。

那應該怎么辦?

去掉指針。觸摸屏上也不需要指針。去掉指針這種反饋形式,提供一種替代方案。讓圖片和物體“彈出來”,立即響應用戶的手部運動,不需要任何指針。

這會從根本上改變你思考用戶界面的方式。這不是網(wǎng)頁,也不是移動端觸摸屏體驗。

gest-3

敞開思路

要嘗試解放思想,從你熟悉的標準網(wǎng)頁和移動UI模式中解脫出來。忘了按鈕——思考動作。想象一下,不再有屏幕了,你要用手勢來控制周圍環(huán)境中的設備。你要如何讓電視機降低音量?如何點亮電燈?

象征性和形象的手勢,例如用食指做出“噓”的手勢降低電視音量,這就簡單直接、富于表達力。這或許有些依賴特定場景,也需要用戶學習,但一旦用戶學會了,他們就很容易記住和使用。

我們創(chuàng)造了一些成功的手勢來控制媒體播放:

gest-2

要在手勢和它所觸發(fā)的動作之間建立聯(lián)系。這些可以基于容易記憶的含義或者視覺參考。這并不容易——因為你需要考慮例如文化環(huán)境這樣的方面。比如說,在某個國家或文化中被普遍接受的一種手勢表達,在另一個國家中或許有冒犯的意味。在某些環(huán)境中非常突出的象征,在其他場合或許就沒有幫助。

依靠形象化的手勢創(chuàng)造所有類型的交互,可能會導致太多的手勢要記憶。要將它們當做快捷、有力的快速觸發(fā)方式——值得分配給那些需要用戶頻繁重復的操作。

減少錯誤識別

對于計算機而言最大的挑戰(zhàn),就是區(qū)分真正的意圖,和那些人們自然做出的偶然手勢,例如與人交談時手部四處移動。

很容易會意外觸發(fā)動作,讓界面在不該變化時發(fā)生改變,導致不穩(wěn)定的體驗。作為UI設計師,你得與開發(fā)者密切配合,找出哪些有意義、哪些沒有,就能避免哪些錯誤的識別。

好的起點是:手勢設計總是要與特定場景和需要遇到的狀況聯(lián)系起來。是否正在播放音樂?那么手勢就可以觸發(fā)。如果沒有,那就什么也不做。

“忘了按鈕——思考動作?!?/p>

要區(qū)分手勢和意外手部運動,時間是個重要的因素。例如,如果我指著某個物體超過1秒,就意味著我的確想要操作它。

距離也是另一個因素。如果你在為博物館或參觀中心設計一套互動裝置,你可能想讓它識別足夠靠近的參與者的手勢,相對忽略那些站在遠處的旁觀者。

避免疲勞

就像字面意思,感受手勢造成的影響并不容易。你得一遍遍觀察用戶,理解你所創(chuàng)造的體驗給人帶來的真實感受。

簡單幾點需要記?。?/p>

除非你在設計物理游戲或鍛煉項目,否則要確保人們不必太頻繁或太長時間舉起手臂、抬起雙手。

要確保手部軌跡和UI元素間距離的比例足夠舒適,尤其對于大屏幕。這意味著用戶可以毫不費力指向屏幕的任何部分。

Example of smaller movements mapped to a larger part of the screen for comfortable reach.

一個例子,小范圍動作對應屏幕上更大范圍的區(qū)域,讓觸達更加輕松。

使用雙手比單手交互更不容易感到疲勞??梢园涯持皇肿鳛閼T用手,用來觸發(fā)操作(比如顯示出滑塊)。然后用另一只手來輔助(調整滑塊的數(shù)值)。要考慮到你不必用單手來完成所有操作,可以探索更多的組合。

Related:

保持一致,左右手都要觸發(fā)相同動作

最后,用戶通過右手觸發(fā)的任何操作,也應當能夠用左手觸發(fā)。這不僅是為了方便右撇子和左撇子,這種一致性也幫助人們學習和接受。所以如果你學會了某個手勢,你可以用任意一只手觸發(fā)——不必記住要用哪只手。

一致性要貫穿你整個概念,就像其他所有UX項目一樣。成功創(chuàng)造了手勢+動作的組合后,可以考慮是否需要在其他用戶場景下啟用類似動作。一旦熟悉了,用戶會期望使用相同的手勢。

要創(chuàng)造易于發(fā)現(xiàn)和記憶的統(tǒng)一的手勢語言。

有了這些手勢交互的規(guī)范,你就可以開始探索這塊相對未知的創(chuàng)意領域了。一旦理解了這些區(qū)別,就能結合隔空手勢和觸控手勢,創(chuàng)造獨特流暢的用戶交互。

相關閱讀:UX設計師應當探索手勢交互的6大理由

原文鏈接http://blog.invisionapp.com/effective-gestural-interaction-design/

#專欄作家#

可樂橙,微信公眾號:可樂橙(colachangreen)。人人都是產(chǎn)品經(jīng)理專欄作家,UI/UX設計師,關注互聯(lián)網(wǎng),關注科技?,F(xiàn)居杭州,與小伙伴們正在創(chuàng)業(yè)途中?;蛟S不是一名優(yōu)秀的設計師,至少是個快樂的設計師。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉載。

更多精彩內容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 你得先有個預設動作,比如拍手掌五下啟動人機交互,后面才使用那些交互的手勢

    回復