為觸屏手機而設計:拇指操作的「熱區/死角」與「控制項尺寸」

2020-12-05 雷鋒網

【編者按】本文作者@曉千在淘寶 是淘寶UED成員,以本文對行動裝置的觸屏進行分析介紹。

中國用戶的單手拇指操作熱區真的是這麼分布的嗎?熱區與死角的差異有多大?那使用雙手,食指操作還有沒有熱區和死角的差異呢?單手拇指操作和雙手食指操作對於控制項尺寸的設計要求又有什麼差異?

一、研究背景

觸屏手機界面設計的背景與挑戰

挑戰1:發展時間短,國內外的研究都尚處在探索階段,充滿未知和不確定。

觸屏技術最早被應用到手機上要追溯到1999年(Motorola A6188),至今雖然已有12年時間,但真正為手指操作的觸屏界面設計帶來革命性變化還是07年1月9日發布的iPhone1代以及他的多點觸摸技術。

時至今日,不過4年時間,以蘋果設計團隊為先驅國內外相關研究領域,包括觸摸的手勢、觸屏界面的規範、觸摸的可用性研究等等,都還處在探索階段,這也意味著有很多現有的東西都是建立在猜測和嘗試基礎上的,他們的成熟度也是有待時間檢驗的。這些東西包括國外的期刊文獻和圖書,甚至是蘋果app開發官網上的信息、設計原則。

挑戰2:從滑鼠鍵盤到手指,準確率問題、熱區和死角的問題。

觸屏手機交互研究與PC交互的研究存在著質的變化。輸入設備從滑鼠鍵盤變成手指,一方面,操作的精準度上受到了挑戰,在密集的信息處理上,用戶常常會出現許多誤操作;另一方面,手指操作所特有的「死角和熱區」問題也是PC界面設計中不會面臨的。

挑戰3:東西方生理指標和文化差異對現有設計原則的影響。

即便是那些被證明了合理可行的理論,在飄揚過海來到中國後,能克服東西方生理指標和文化差異帶來的影響嗎?要知道,同樣大小的手機對中國人的手和老外的手握持的穩定性而言也是可能存在差異的。所以,如何把成熟的西方知識拿來主義,進行更符合生理特徵和民族文化的調整,是我們要面對的第三個挑戰。

挑戰4:普通WAP/APP設計原則對淘寶(APP/WAP)的適用性。

手機電子商務又是一個特殊的領域,我們面對海量決策信息與有限屏幕空間之間的矛盾,這是普通WAP網站或者APP應用極少會面對的嚴峻局面。如何將其他產品的觸屏研究成果轉化成更適合電子商務領域應用,是我們要進一步解決的問題。

觸屏手機界面設計一些前人的經驗

《Tapworthy- Designing Great iphone Apps》Josh Clark  2010-6-25 (中文版:《觸動人心 -設計優秀的iPhone應用》翻譯者包季真)提到了iphone界面設計的兩條原則——Rule of Thumb 和 The Magic Number is 44(見下圖)。

即,右利手觸屏操作時的熱區與死角(如下圖),以及觸及控制項設計的合理尺寸為至少44pix。

對於這個研究結果,我們不難發現兩個疑問——

問題1這個熱區圖和所謂的標準尺寸是怎麼得來的,在書中並沒有詳細的敘述,是基於「研究結果」還是設計者自身的「經驗主義」我們也不得而知。根據書中的描述和作者的專業背景推測,這些很有可能是作者在收集大量iPhone界面案例後的自己的分析和經驗總結。

問題2很多設計師在看完44pix這個數字後都很容易犯一個錯誤——不同解析度的屏幕所對應的44pix實際物理大小是有很大差異的。在iPhone3下,44pix約等於7mm;在iPhone4下,卻不足6mm。書中的討論背景是iPhone3,所以需要設計師根據物理尺寸進行對應的換算。

觸屏手機界面設計一些前人的研究

Josh Clark也許是個經驗主義者,那讓我們重新審視這個44pix。事實上,iPhone團隊把觸擊控制項的界面最小尺寸限定為44pix(7mm)並非是沒有依據的。早在人機工效學的研究中,前人曾得出結論,認為用食指操作,觸擊範圍在7mm左右比較合適;

而用拇指操作,合適的觸擊範圍需在9mm左右。為給設計師們提供較為準確的工學指標,對按鍵操作進行精密的實驗設計必不可少。

二、研究目的

  • 中國用戶的單手拇指操作熱區真的是這麼分布的嗎?
  • 熱區與死角的差異有多大?
  • 那使用雙手,食指操作還有沒有熱區和死角的差異呢?
  • 熱區和死角如果存在差異,7mm這個設計原則在屏幕的任何區域都適用嗎?
  • 單手拇指操作和雙手食指操作對於控制項尺寸的設計要求又有什麼差異?

三、研究理論基礎

分析用戶按鍵誤操作成因

  1. 沒有擊中按鍵(空擊)
  2. 想按某個按鍵時卻按到相鄰的另一個按鍵上(錯擊)

對於用戶來說,第二種錯誤是更為致命的,這需要他花費更多的精力來糾正這一錯誤;而相對來說第一種情況就不那麼嚴重了。因此在我們的實驗設計中只取第二種情況為錯誤操作。

實驗情景

考慮影響用戶按鍵操作難易度的兩大情景因素:一為用戶的狀態(靜止、走動、公交車上等);二為做按鍵操作使用的手指(食指、拇指等)。將這兩個因素結合,正式實驗中取兩種最為常見的操作情景狀態(均為單手操作):靜止時用食指操作、走動時用拇指操作。前者相對容易,後者較為困難。

心理物理法——恆定刺激法:

本實驗研究採用心理物理法中的恆定刺激法,也叫正誤法、恆定法、次數法。它的特點是只採用少數幾個刺激(一般是4—9個),且這幾個刺激在整個測定閾限的過程中是固定不變的,主試把這幾個刺激以隨機的方式反覆向被試呈現。用恆定刺激法測感覺閾限之前,先要進行預備實驗,以選定刺激並確定各刺激呈現的順序。

所選刺激的最大強度應為每次呈現幾乎都能被感覺到的強度,被感覺到的可能性最好在95%左右;所選刺激的最小強度應為每次呈現幾乎都不能被感覺到的強度,被感覺到的可能性最好在5%左右。

選定刺激範圍以後,再在這個範圍內選出4—9個間距相等的刺激。正式實驗時,每種刺激強度呈現的次數不能少於20個,且呈現的次數要相等,呈現的順序要隨機排列。用恆定刺激法測絕對閾限時,絕對閾限的值可以根據操作定義由直線內插法或其他方法求得。

恆定刺激法測差別閾限時,也可以用相同的方法求得差別閾限。

四、實驗規劃

實驗對象與人群配比

由於本實驗為基礎研究,因此對於用戶的要求不高,不一定非要淘寶用戶。面向的對象可以是有潛在觸屏手機使用能力的所有正常成年人。右利手為宜。在實驗開始前,需對用戶的手掌大小等尺寸進行測量,以選擇手部尺寸適中的用戶。詳見國標《中國成年人人體尺寸》GB10000-88中的手部尺寸。採用被試間測試,初步定被試數量為40人左右,要求被試年齡在20歲以上,男女各半。

實驗設計

1、自變量

使用情景(2

靜止時用食指操作、走動時用拇指操作(被試間設計)

刺激呈現區域位置(16

將手機屏幕劃分為4*4的區域(被試內設計)

可觸擊區域的大小(5

設計5種可觸擊區域——拇指7891011;食指56789(實驗為被試間設計,每種水平至少要求被試反應10次,則共要求被試反應16*5*10=800次。)

2、因變量

觸擊正確率

在單個反應中,取被試正確擊中目標刺激為結束,但只要觸擊次數大於1則認為反應錯誤。即,手指首次成功擊中刺激紅點的次數佔紅點出現總數的比率。

觸擊熱區

在整個屏幕中,觸擊正確率顯著高於其他部位的區域。

觸擊死角

在整個屏幕中,觸擊正確率顯著低於其他部位的區域。

觸擊範圍最小尺寸

特定手指在觸擊正確率均值達到95%及以上的最小尺寸。

手機原始屏幕參數設置

  • 實驗設備:iphone4手機3.5英寸屏幕
  • 解析度:640*960
  • 物理尺寸:4.93*7.40CM,平均1cm有130個像素點左右
  • 底色為灰色RGB(144,144,144)

註:屏幕區域的劃分和標記都是虛擬的,不直接呈現在屏幕上。一開始呈現給被試的仍是原始屏幕,而在後臺刺激呈現和和數據處理時需要用到區域的概念。

實驗步驟

Step1:指導與過後,計入實驗參數設置。屏幕上部呈現文本框「請輸入參數」,下面有一個輸入框,要求可以輸入數字,並且輸入的數字可以被程序讀取。按確認鍵進入正式實驗。

Step2:每次只展現一個紅點,不會同時出現。要求被試儘可能快速地完成觸擊,但並非在考驗被試的反應能力和時間,保持平和心態。拇指實驗者在特定範圍內正常步行速度(1-1.5m/s)。

Step3:每個參數值有16×10次點擊,耗時大約4-5min。共5輪,每輪之間可休息。

step4:交由研究員截屏保存,再後期手工錄入SPSS進行統計分析。

 

單手·拇指·行走研究中的發現

結論1:通過檢驗,《Tap Worthy》書中建議的右手拇指觸擊熱區的合理性尚存在問題

為了驗證這一理論,本實驗近似取「B1+B2+B3+C1+C2+C3+D1+D2+D3」為檢驗區,定義為「建議熱區」,其餘區域定義為「非建議熱區」。

如果這種建議的「熱區」的假設成立,那麼「建議熱區」與「非建議熱區」應該存在正確率上的顯著差異,並且這種差異在不同刺激參數值下都成立,在紅點大小在7/8/9/10/11的情況下,建議熱區的正確率都應該顯著高於建議死角。

但是,通過配對T檢驗,建議區正確率略高於非建議區,僅在參數值為7的時候表現為差異顯著,但在紅點大小為8/9/10/11的時候,兩個區域差異不顯著。

即這個建議熱區的劃分方式合理性存在一定的問題,意味著控制項觸擊尺寸為8/9/10/11及以上的情況下,這種劃分意義可能不大,兩個區域基本不存在差異。

結論2:實驗發現更合理的右手拇指操作熱區

我們猜測,在拇指自然彎曲且處在指肚觸及的狀態下,手持機的穩定性最佳,手指移動的靈活性也相對佳。所以我們模擬這種狀態下手指觸及的區域,大致呈現出一個「扇環」區域,在本實驗中定義為「探索熱區」,而其他區域為「非探索熱區」。同理,如果這次探索的「熱區和死角」的假設成立,那麼「探索熱區」與「非探索熱區」應該存在正確率上的顯著差異,並且這種差異在不同刺激參數值下都成立,在紅點大小在7/8/9/10/11的情況下,建議熱區的正確率都應該顯著高於非建議熱區。

結果,通過配對T檢驗,當紅點大小為7/8/9/10時,探索區正確率均顯著高於非探索區。差異隨紅點的變大而減弱,可能因為當紅點增大到11後,觸擊定位變得更為簡單,整體正確率都得到了提高,區域間的差異就消失了。

較《tapworthy》所建議的操作熱區,右側通過我們探索得到的熱區劃分更為合理。尤其在控制項尺寸大小被限定的前提下,放在熱區與非熱區的差異就會很大。

 

實驗發現右手拇指操作的死角

通過比較16個區域的在不同紅點大小實驗下的正確率均值,發現A4C4D1D4 四個區域觸擊正確率顯著低於整體均值。死角區誤操作比率高,在控制項布局時應考慮死角問題,特別是在處理高頻操作位置時。

44pix(7mm)的原則在「單手/行走/拇指」操作狀態下並不適用

在本研究中,當紅點大小值為7mm時,行走狀態下單手拇指操作觸擊正確率均未達到95%。7mm or 44pix的設計遠不能滿足移動單手持機操作的狀態,容易引起較高的誤操作率。

實驗發現更具體的拇指操作尺寸要求

在本研究中,在行走狀態下單手拇指操作觸擊正確率均值達到95%的最小尺寸見下圖。且可以發現,不同區域對觸擊的尺寸要求是有差異的。在設計單手操作的界面時,參考控制項所在位置的觸擊尺寸要求,避免因尺寸小帶來誤操作,影響操作效率。

團隊博客:淘寶UED

雷鋒網原創文章,未經授權禁止轉載。詳情見轉載須知。

相關焦點

  • 給應用加入手勢操作需要注意的五件事
    這樣成功地通過過渡效果為用戶爭取了時間,用戶可以去決定到底是否要進行這一手勢操作。反面例子:還是同一款應用,在點進某一篇文章後,文章正文和評論頁面之間的切換卻不見了過渡動畫的蹤影,手勢完成之後,硬梆梆的感覺讓用戶反感。
  • 手機屏幕最佳的尺寸究竟是多少?
    賈伯斯所說的「3.5寸是手機最佳尺寸」的說法本身也沒有錯誤,這都是根據男女手掌的平均大小和長度、拇指最遠活動距離等數據精心測量出來的,當然,這也是受限於當時手機的厚度和邊框寬度所進行的設計,如果拿目前最新的「全面屏」手機放進個3.5英寸屏幕進去,恐怕確實是有些太過小巧了。咱們先從極端的兩類人群分析。
  • 互動設計|如何做好操作反饋規範的設計?
    互動設計中的操作反饋設計,要從用戶和產品的兩個角度去思考——反饋能為品牌氣質的提升帶來什麼價值,能多大程度地優化用戶的體驗效果?規範,意指符合邏輯,客觀、真實、全面、完整、準確、及時,達標。明文規定或約定俗成的標準, 使某一行為或活動達到或超越規定的標準。
  • 互動設計 | 如何做好操作反饋規範的設計?
    互動設計中的操作反饋設計,要從用戶和產品的兩個角度去思考——反饋能為品牌氣質的提升帶來什麼價值,能多大程度地優化用戶的體驗效果?每一項的操作規範都要站在用戶和產品角度考慮,操作的反饋給用戶的體驗帶來什麼好處,給產品的品牌氣質提升帶來何種價值。現在市面上有相當部分的產品在用戶操作行為後是無反饋的,再細緻的來說可能是設計不仔細,因為統一類型控制項中有些操作後是有反饋的。
  • 蘋果手機觸屏失靈亂跳怎麼辦?
    蘋果手機絕對是目前市面上智慧型手機領域的領頭羊,它旗下的產品不僅外觀設計出色,簡約流暢的外形極具辨識度,而且根據用戶的使用評測以及銷量口碑看來也是十分具有優勢的。但是再好的產品也會出現一些故障,不少蘋果手機使用者就會出現產品「觸屏失靈亂跳」的情況,這種問題有時候會干擾我們正常的使用操作。那麼接下來就一起來了解一下類似情況的原因和解決方法吧。蘋果手機屏幕失靈亂跳原因解析:1.充電線和適配器問題。表現為iPhone在充電時屏幕失靈亂跳情況會更加嚴重。
  • 為觸屏優化 Win8磁貼版應用軟體推薦
    為觸屏優化 Win8磁貼版應用軟體推薦 2013年01月10日 07:00作者:葉亮編輯:葉亮文章出處:泡泡網原創 全新的Windows 8大幅改變以往的操作邏輯,提供更佳的屏幕觸控支持。新系統畫面與操作方式變化極大,採用全新動態磁貼風格用戶界面,各種應用程式、快捷方式等能以動態方塊的樣式呈現在屏幕上,用戶可自行將常用的瀏覽器、社交網絡、遊戲、操作界面融入。
  • 目前較「火」的遊戲手柄:電容隔空映射,不用連接手機也能吃雞
    看到飛智黃蜂單手手柄,讓我最先想到的自然是小米科技旗下的黑鯊手機,其依靠一半手柄操作、一半觸屏操作的方式,讓手機的操作體驗得到了不小的提升,不過比較遺憾的是,黑鯊手機的手柄只為自己的手機適配,其他的手機用戶則無法使用。然鵝,可能黑鯊自己都沒有想到,飛智竟然也有能力推出類似的單手手柄。
  • BeauGauge虛擬儀表控制項使用(VC++)
    BeauGauge是套圖形儀表控制項組合。它應用於仿真、科學、儀表、自動化、工業監控等領域,可快速生成多種虛擬儀表。軟體內置多種圖形組件,開發者只需通過滑鼠進行簡單操作,就可自己定義自己的儀表。BeauGauge Instrumentation Suite 的ActiveX 控制項負責將設計好的控制項模板最終顯示到用戶界面上。它是一個ActiveX控制項,可以用在使用ActiveX控制項的任意地方,包括各個主流開發環境。下面將演示開發環境使用控制項的過程。
  • 以一套OA系統為例,做產品設計細節分析
    以下系統截圖已在重要位置進行馬賽克處理,本人無意醜化任何系統,僅作為與大家討論產品設計為用。隨機在當前平臺中挑選了幾個問題,寫出來與大家探討探討。一、頁籤切換按鈕過於狹窄1.第二,大部分臺式機或筆記本都不支持觸屏操作,無法精準的按照使用者的意識瞬間觸達切屏按鈕,建議更換為滑鼠可精準操作的其他方式。2. 建議方案增大按鈕可點擊面積,提升使用者滑鼠的精準點擊成功的概率(讓用戶覺得爽才是真的好)。
  • 哈蘇X1D II 50c 體驗:操作和手機一樣簡單,但畫質仍然標杆
    手柄背部也有自然凸起的設計,方便用戶將一部分支持力轉移到拇指上,提升手持穩定性。手柄上的前後撥盤很容易觸及,調整參數的時候也比較方便。不過即便有著人體工學設計的加成,裝上了鏡頭的 X1D II 50c 還是太重了,手柄也不能舒緩手持帶來的壓力。所以接下來我要開始挑刺了。
  • 在手機和電腦的時代,我們每個人都是《拇指姑娘》
    你是單手滑手機?還是雙手滑手機?每當我看到日劇中年輕妹妹雙手快速回信息時,我就覺得我老了。但不管如何,我們越來越依賴我們的10根指頭,不管是滑手機或是打電腦鍵盤。史丹佛大學教授米榭塞荷通稱這類的我們為"拇指姑娘"或"拇指少年"。沒錯!我在說的是"我們"!
  • qt布局控制項 - CSDN
    Qt基本控制項及三大布局來源: http://blog.csdn.net/a2604539133/article/details/73920696Qt基本模塊一、Qt的三大布局QHBoxLayout:水平顯示布局,所有在其上面擺放的控制項只能水平排列下去;
  • 手遊成大熱門 《拇指西遊》速度加開新服
    2012年上半年開始,手機網遊成為蘋果Appstore全新熱門!中國區榜單,幾款手機網遊長期佔據前排位置,手機網遊的優異表現徹底改變了appstore榜單排名格局,手遊玩家有了更多選擇。
  • 手機屏幕千差萬別,適合用戶的最佳尺寸是多少?
    隨著劉海屏、水滴屏、打孔屏等設計相繼亮相,消費者除了購買手機時越來越關注它的外表,還會關注每款手機的屏幕佔比情況。智能機發展至今時今日,人們似乎更加願意使用到屏幕佔比大的手機,畢竟在觀影和使用上也能夠給人們帶來極致的舒適體驗。
  • 解讀智慧型手機屏幕進化史
    觸屏時代之前:小尺寸屏幕設計是無奈之舉  「用戶根本不知道自己想要什麼」,這句話儘管有些主觀,但如果設身處地地試想一下,在基本的通訊和娛樂功能剛剛得以滿足的功能機和低端智能機時代,可能沒有人會對一部手機的屏幕尺寸或者更強大的功能有所奢求,普通消費者很難意識到一部簡單的通訊設備還能為生活帶來什麼驚喜。
  • 科學家發明手套鍵盤 單手操作擺脫手機鍵盤束縛
    手機免提設備剛剛出現時,人們對於有些人在走路或者乘坐公共運輸工具時自言自語的現象驚奇不已。但是現在,一種新型手套鍵盤的出現將會讓你再次顛覆對正常行為的評判標準。據英國《每日郵報》10月26日報導,阿拉巴馬州阿拉巴馬大學的劉家可(音譯)及其他3位計算機工程師共同開發設計了一款名為Gauntlet的新型手套鍵盤。
  • [圖]Google Home 2.31發布:Routines回歸 多媒體控制項重新設計...
    此外在本次更新中,谷歌還對多媒體控制項進行了重新調整,並帶來了其他有趣且實用的改進。用戶能還能夠為包含揚聲器執行動作的 Routines 選擇默認揚聲器。儘管尚未完成,Google Home 還將對應用中的多媒體控制項進行全面的視覺優化
  • hero打野塵夏手部操作曝光,手機放在桌子上四指操作,不用大拇指
    而他們的打野塵夏在比賽中被給到了手部特寫,非常有意思的是,他的操作方式並不像其他選手和我們平時玩的時候那樣把手機拿起來用拇指操作。而是把手機放到桌子上,用食指和中指四指操作。塵夏進步明顯,百裡守約成一絕塵夏這名選手春季賽的時候一度被認為是hero的短板,到了秋季賽甚至變成了輔助位的替補。
  • 從12個維度理解可達性設計
    當為可達性設計時,最常見的問題就是要知道用戶需求是什麼,為什麼而設計,這並不是為了篩選用戶,只是因為「我們不了解我們不知道的東西(譯者註:此處作者的意思應為,我們無法為我們不了解的需求進行設計)」。所以,當涉及到可達性時,有很多因素需要我們考慮。我們如何了解眾多的用戶以及他們的需求呢?