萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 觸屏手機操作的“熱區死角”與“控件尺寸”

觸屏手機操作的“熱區死角”與“控件尺寸”

  Part 1 研究背景

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

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

  觸屏技術最早被應用到手機上要追溯到1999年(motorola A6188),至今雖然已有12年時間,但真正為手指操作的觸屏界面設計帶來革命性變化還是07年1月9日發布的iphone1代以及他的多點觸摸技術。時至今日,不過4年時間,以蘋果設計團隊為先驅國內外相關研究領域,包括觸摸的手勢、觸屏界面的規范、觸摸的可用性研究等等,都還處在探索階段,這也意味著有很多現有的東西都是建立在猜測和嘗試基礎上的,他們的成熟度也是有待時間檢驗的。這些東西包括國外的期刊文獻和圖書,甚至是蘋果app開發官網上的信息、設計原則。

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

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

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

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

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

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

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

  《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,所以需要設計師根據物理尺寸進行對應的換算。

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

  Josh Clark也許是個經驗主義者,那讓我們重新審視這個44pix。事實上,iphone團隊把觸擊控件的界面最小尺寸限定為44pix(7mm)並非是沒有依據的。早在人機工效學的研究中,前人曾得出結論,認為用食指操作,觸擊范圍在7mm左右比較合適;而用拇指操作,合適的觸擊范圍需在9mm左右。為給設計師們提供較為准確的工學指標,對按鍵操作進行精密的實驗設計必不可少。

  Part 2 研究目的

  中國用戶的單手拇指操作熱區真的是這麼分布的嗎?

  熱區與死角的差異有多大?

  那使用雙手,食指操作還有沒有熱區和死角的差異呢?

  熱區和死角如果存在差異,7mm這個設計原則在屏幕的任何區域都適用嗎?

  單手拇指操作和雙手食指操作對於控件尺寸的設計要求又有什麼差異?

  Part 3 研究理論基礎

  3.1 分析用戶按鍵誤操作成因

  沒有擊中按鍵(空擊)

  想按某個按鍵時卻按到相鄰的另一個按鍵上(錯擊)

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

  3.2 實驗情景

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

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

  本實驗研究采用心理物理法中的恆定刺激法,也叫正誤法、恆定法、次數法。它的特點是只采用少數幾個刺激(一般是4—9個),且這幾個刺激在整個測定阈限的過程中是固定不變的,主試把這幾個刺激以隨機的方式反復向被試呈現。用恆定刺激法測感覺阈限之前,先要進行預備實驗,以選定刺激並確定各刺激呈現的順序。所選刺激的最大強度應為每次呈現幾乎都能被感覺到的強度,被感覺到的可能性最好在95%左右;所選刺激的最小強度應為每次呈現幾乎都不能被感覺到的強度,被感覺到的可能性最好在5%左右。選定刺激范圍以後,再在這個范圍內選出4—9個間距相等的刺激。正式實驗時,每種刺激強度呈現的次數不能少於20 個,且呈現的次數要相等,呈現的順序要隨機排列。用恆定刺激法測絕對阈限時,絕對阈限的值可以根據操作定義由直線內插法或其他方法求得。恆定刺激法測差別阈限時,也可以用相同的方法求得差別阈限。

  Part 4 實驗規劃

  4.1 實驗對象與人群配比

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

  4.2 實驗設計

  自變量

  使用情景(2):靜止時用食指操作、走動時用拇指操作(被試間設計)

  刺激呈現區域位置(16):將手機屏幕劃分為4*4的區域(被試內設計)

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

  因變量

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

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

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

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

  手機原始屏幕參數設置

  實驗設備:iphone4手機3.5英寸屏幕

  分辨率:640*960

  物理尺寸:4.93*7.40CM,平均1cm有130個像素點左右

  底色為灰色RGB(144,144,144)

 

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

  實驗步驟

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

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

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

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

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

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

copyright © 萬盛學電腦網 all rights reserved