• 移動應用、小程序開發
    您現在的位置:首頁 ? 公司博客 ? 為觸屏手機而設計系列1——拇指操作的“熱區/死角”與“控件尺寸”

    為觸屏手機而設計系列1——拇指操作的“熱區/死角”與“控件尺寸”

    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 研究目的

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

     

    Part 3 研究理論基礎

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

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

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

    3.2 實驗情景

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

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

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

    Part 4 實驗規劃

    4.1 實驗對象與人群配比

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

     4.2 實驗設計

    • 自變量
    1. 使用情景(2):靜止時用食指操作、走動時用拇指操作(被試間設計)
    2. 刺激呈現區域位置(16):將手機屏幕劃分為4*4的區域(被試內設計)
    3. 可觸擊區域的大?。?):設計5種可觸擊區域——拇指7891011;食指56789(實驗為被試間設計,每種水平至少要求被試反應10次,則共要求被試反應16*5*10=800次。)

     

     

    • 因變量
    1. 觸擊正確率:在單個反應中,取被試正確擊中目標刺激為結束,但只要觸擊次數大于1則認為反應錯誤。即,手指首次成功擊中刺激紅點的次數占紅點出現總數的比率。
    2. 觸擊熱區:在整個屏幕中,觸擊正確率顯著高于其他部位的區域。
    3. 觸擊死角: 在整個屏幕中,觸擊正確率顯著低于其他部位的區域。
    4. 觸擊范圍最小尺寸:特定手指在觸擊正確率均值達到95%及以上的最小尺寸。
    • 手機原始屏幕參數設置
    1. 實驗設備:iphone4手機3.5英寸屏幕
    2. 分辨率:640*960
    3. 物理尺寸:4.93*7.40CM,平均1cm有130個像素點左右
    4. 底色為灰色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》書中建議的右手拇指觸擊熱區的合理性尚存在問題

    為了驗證這一理論,本實驗近似取“B1+B2+B3+C1+C2+C3+D1+D2+D3”為檢驗區,定義為“建議熱區”,其余區域定義為“非建議熱區”。如果這種建議的“熱區”的假設成立,那么“建議熱區”與“非建議熱區”應該存在正確率上的顯著差異,并且這種差異在不同刺激參數值下都成立,在紅點大小在7/8/9/10/11的情況下,建議熱區的正確率都應該顯著高于建議死角。

    但是,通過配對T檢驗,建議區正確率略高于非建議區,僅在參數值為7的時候表現為差異顯著,但在紅點大小為8/9/10/11的時候,兩個區域差異不顯著。即這個建議熱區的劃分方式合理性存在一定的問題,意味著控件觸擊尺寸為8/9/10/11及以上的情況下,這種劃分意義可能不大,兩個區域基本不存在差異。

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

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

    結果,通過配對T檢驗,當紅點大小為7/8/9/10時,探索區正確率均顯著高于非探索區。差異隨紅點的變大而減弱,可能因為當紅點增大到11后,觸擊定位變得更為簡單,整體正確率都得到了提高,區域間的差異就消失了。較《tapworthy》所建議的操作熱區,右側通過我們探索得到的熱區劃分更為合理。尤其在控件尺寸大小被限定的前提下,放在熱區與非熱區的差異就會很大。

     

    結論3:實驗發現右手拇指操作的死角

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

     結論4:44pix(7mm)的原則在“單手/行走/拇指”操作狀態下并不適用

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

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

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

    99V久久综合狠狠综合久久