SlideShare a Scribd company logo
1 of 51
Download to read offline
【用研 Discovery 第一期】
为触屏手机而设计
—— 之 屏幕的热区与控件的触击尺寸
         一淘@UX — 用户研究 — 晓千
目录
第一部分 为什么做这个研究?
第二部分 研究过程介绍
第三部分 单手·拇指·行走——研究中的发现
第四部分 双手·食指·静坐——研究中的发现
第五部分 总结和讨论
Part 1
?   为什么
    做这个研究?
触屏手机界面设计
背景与挑战

•   挑战1:发展时间短,国内外的研究都尚处在探索阶段,充满未知和不确定。
•   挑战2:从鼠标键盘到手指,准确率问题、热区和死角的问题。
•   挑战3:东西方生理指标和文化差异对现有设计原则的影响。
•   挑战4:普通WAP/APP设计原则对淘宝(APP/WAP)的适用性。
•   ……
触屏手机界面设计
 一些前人的经验
《Tapworthy- Designing Great iphone Apps》
               Josh Clark 2010-6-25



  Rule of Thumb
  The comfort zone for the right thumb
  falls on the opposite side of screen, at
  the left edge and bottom of the screen.
                                                    44Pixels
  ( The top right and bottom right corners
  are the toughest thumb zone for right-
  handed users.)

  The Magic Number is 44
  Ideally, any button or other tap target
  should be at least 44x44 pixels.           问题1:研究结果?经验主义?
                                             问题2:44pix=?mm
触屏手机界面设计
一些前人的研究



     9mm   7mm
关于【用研 Discovery】
 站在巨人的肩膀上,
  主动地思考,
  勇敢地质疑,
  批判地继承。
研究目的
                                            对现有的设计原则的
                                            验证 & 探索

                                            1. 中国用户的单手拇指操作热
                                               区真的是这么分布的吗?

                                            2. 热区与死角的差异有多大?

                                            3. 那使用双手,食指操作还有
                                               没有热区和死角的差异呢?




《Tap worthy- Designing Great iphone Apps》
        Page 58-62 Rule of Thumb
研究目的
                                            对现有的设计原则的
                                            分解 & 细化

               7mm         ?                4. 热区和死角如果存在差异,
                                               7mm这个设计原则在屏幕的
      食指7mm?                                   任何区域都适用吗?

     拇指 9mm?                                5. 单手拇指操作和双手食指操
                                               作对于控件尺寸的设计要求
   44Pixels?                                   又有什么差异?
   163 ppi screen




《Tap worthy- Designing Great iphone Apps》
    Page 62-77 The Magic Number is 44
……   Part 2
     研究过程介绍
实验设计 组间测试

          • 单手拇指   • 双手食指
实验1       • 行走状态   • 静坐状态    实验2




    10人     10人        11人   11人
实验设计 组内测试

                   5 个恒定刺激参数
4x4   • 细分16个测试区
      • 更精确的结果统计
                   16x10x5 次随机刺激呈现
                            食指 (单位 mm):


  A1 A2 A3 A4
                            拇指 (单位 mm) :
  B1 B2 B3 B4

  C1 C2 C3 C4

  D1 D2 D3 D4
数据统计方法
 16个测试区的   • 统计成功击的正确率:
触击正确率统计      用户触击产生的坐标在刺激红点区域内。
实验操作流程


 Step 1
 Safari浏览器——添加至主屏幕
实验操作流程


 Step 2
 要求:
 1. 每次只展现一个红点,不会同时
    出现。
 2. 尽可能快速地完成触击,但并非
    在考验你的反应能力和时间,保
    持平和心态。
 3. 拇指实验者在特定范围内正常步
    行速度(1-1.5m/s)。
实验操作流程


  Step 3
  1. 每个参数值有16x10次点击,耗
     时大约4-5min
  2. 共5轮,每轮之间可休息。

 http://www.taobao.com/go/chn/
 mobile/uedresearch.php
实验操作流程


 Step 4
 1. 交由研究员截屏保存,再后期手
    工录入SPSS进行统计分析。

 http://www.taobao.com/go/chn/
 mobile/uedresearch.php
实验设备选择




    实验设备:iphone4手机3.5英寸屏幕
    分辨率:640x960
    物理尺寸:4.93x7.40CM,平均1cm有130个像素点左右
    底色:灰色RGB(144,144,144)
被试选择

                                • 女性21人,男性21人
                                • 20-35 岁的成年人
                                • 右利手




                                邀请浙江科技学院、浙江工
                                业大学师生共38人、淘宝员
                                工10人。
                                共48个样本参与了这个研究。
                                最终有效样本42。




国标《中国成年人人体尺寸》GB10000-88中的手部尺寸
名词解释

报告中涉及的专业名词定义
触击正确率:
手指首次成功击中刺激红点的次数占红点出现总数的比率。

误操作:
手指触击坐标不在刺激红点区域内。

显著性:
t值和P值都是用来判断统计上是否显著的指标。本实验设定 P =0.01,即样本中变
量关联有1%的可能是由偶然性造成的。(在许多研究领域,p=0.05通常被认定为可接受错误
的边界水平。)

触击热区:
在整个屏幕中,触击正确率显著高于其他部位的区域。
触击死角:
在整个屏幕中,触击正确率显著低于其他部位的区域。

触击范围最小尺寸:
触击正确率均值达到95%及以上的最小尺寸。
Part 3
单手·拇指·行走
研究中的发现
3.1 [实验探索] 拇指
更合理的触击热区在哪里?
实验设置——拇指触击热区 · 建议区
   《Tap Worthy》书中建议的         为验证理论,本实验中的检验区域
      右手拇指触击热区                  定义为——建议热区




                                 B1   B2   B3
                       取近似实验区域
                                 C1   C2   C3


                                 D1   D2   D3
实验发现——拇指触击热区 · 建议区



                            建议区           vs. 非建议区
                  100
              触
   非建议热区      击
                   95
              正    90
              确    85
              率
              (%)
                   80
   建议              75
   热区                    7mm      8mm     9mm      10mm 11mm
                                     刺激红点的大小

                    •7mm时,建议区-非建议区: t (19) =3.169, P=0.005
                    •8mm时,建议区-非建议区: t (19) =0.988, P=0.336
                    •9mm时,建议区-非建议区: t (19) =1.829, P=0.083
                    •10mm时,建议区-非建议区: t (19) =0.862, P=0.400
                    •11mm时,建议区-非建议区: t (19) =-0.910, P=0.374
实验设置——拇指触击热区 · 探索区

          实验假设              探索热区


  拇指自然弯曲,
  指肚触击,
  稳定持机状态下的,
  手指自然移动。                      A2 A3

                            B1 B2
                     取近似
                     实验区域
                            C1 C2

                               D2
实验发现——拇指触击热区 · 探索区



                            探索区          vs. 非探索区
                  100
              触    95
              击
              正    90
              确    85
              率
  探索   非
              (%)
                   80
  热区   探           75
       索
       热                 7mm      8mm     9mm     10mm 11mm
       区                              刺激红点的大小


                    •7mm时,建议区-非建议区: t (19) =3.732, P=0.001
                    •8mm时,建议区-非建议区: t (19) =3.567, P=0.002
                    •9mm时,建议区-非建议区: t (19) =2.888, P=0.009
                    •10mm时,建议区-非建议区: t (19) =3.102, P=0.006
                    •11mm时,建议区-非建议区: t (19) =0.461, P=0.650
实验发现 ——拇指触击热区




                                    A2   A3


      B1   B2   B3             B1   B2

                       VS.
      C1   C2   C3             C1   C2


      D1   D2   D3                  D2




            较《tapworthy》所建议的操作热区,右侧通过我们探索得到的热
    启示      区划分更为合理。尤其在控件尺寸大小被限定的前提下,放在热
            区与非热区的差异就会很大。
3.2 [实验探索] 拇指
触击死角在哪里?
实验发现 ——拇指触击死角




                             死角区均值 vs. 整体均值
         A4
         89.10     100
           %
                 触 95
                 击
                 正 90                                       91.0%
                 确 85
         C4      率
                 (%)
                            89.1%
                                    88.2%
                                            88.8%
         88.20     80                               85.0%
           %
                       75
 D1      D4                   A4     C4     D1      D4
 88.80   85.00                                              整体均值
   %       %
3.3 [实验探索] 拇指
拇指操作触击尺寸参考
实验发现—— 当 参数值=7mm

                               实验发现
 86.5 87.0 86.0 77.0
  %    %    %    %

 87.0 93.5 87.0 75.0        在本研究中,当红点大小值为7mm时,行走状
  %    %    %    %     现象   态下单手拇指操作触击正确率均未达到95%。


 84.0 84.5 82.0 75.0
  %    %    %    %          7mm or 44pix 的设计远不能满足移动单手持机操作
                       启示   的状态,容易引起较高的误操作率。

 81.0 88.5 86.5 74.5
  %    %    %    %




刺激参数值为7mm时,触击正确率统计
实验发现——拇指触击尺寸参考
                              单手·拇指·行走 状态下
                              不同区域触击范围最小尺寸*
     A1     A2    A3    A4
     11mm   8mm   10mm 11mm


     B1     B2    B3    B4         在本研究中,在行走状态下单手拇指操作触
     10mm 10mm 11mm 10mm           击正确率均值达到95%的最小尺寸见左图。
                              现象
                                   不同区域对触击的尺寸要求是有差异的。
     C1     C2    C3    C4
     9mm    9mm   11mm 11mm


     D1     D2    D3    D4         在设计单手操作的界面时,参考控件所在位置的
     11mm 10mm 11mm 11mm      启示   触击尺寸要求,避免因尺寸小带来误操作,影响
                                   操作效率。




*拇指-触击正确率均值达到95%及以上的最小尺寸*
Part 4
双手·食指·静坐
研究中的发现
4.1 [实验探索] 食指
食指操作也有热区和死角!
实验发现——食指的触击热区和死角




              A4


    B1   B2   B4   通过比较各单元区与整体均值的差异,

                   发现——
    C1   C2   C4


    D1   D2   D4   B1/B2/C1/C2/D1/D2
                   触击正确率显著高于整体均值;

                   A4/B4/C4/D4
                   触击正确率显著低于整体均值;
实验发现——食指的触击热区和死角

                     实验发现
                   热区     vs. 整体      vs. 死角
           触 100
           击 95
           正 90
           确 85
           率 80

           (%)
              75
       触      70
       击           5mm   6mm    7mm   8mm   9mm
  触    死                       刺激红点参数值
  击    角
  热                通过配对T检验,两个区域与整体均值都存在显
  区                著差异。
            现象     同样,差异随红点的变大而减弱。可能因为当红
                   点变大后,触击定位变得容易,整体确率都得到
                   了提高,区域间差异就消失了。

                   在设计控件布局时,即使是食指操作,也需要考虑手指
            启示     在不同区域的限制。
4.2 [实验探索] 食指
食指操作触击尺寸指南
实验发现—— 当 参数值=7mm

                              实验发现

 90.9 91.4 91.8 90.5
  %    %    %    %

 95.5 93.2 93.6 91.8        在本研究中,当红点大小值为7mm时,静坐状
  %    %    %    %     现象   态下食指操作触击正确率达到95%的区域有
                            B1/C1/C2/D1/D2/D3(如左图)。
 96.8 95.0 89.6 90.5
  %    %    %    %          7mm or 44pix 的设计可以满足食指操作的部分区
                       启示   域,但其他位置任然容易高发误操作。

 95.5 96.8 95.9 90.9
  %    %    %    %




刺激参数值为7mm时,触击正确率统计
实验发现——食指触击尺寸参考
                            双手·食指·静坐 状态下
                            不同区域触击范围最小尺寸*

    A1    A2    A3    A4
    8mm   8mm   8mm   8mm


    B1    B2    B3    B4         在本研究中,在静坐状态下食指操作触击正
    7mm   8mm   8mm   9mm        确率均值达到95%的最小尺寸见左图。
                            现象
                                 不同区域对触击的尺寸要求是有差异的。
    C1    C2    C3    C4
    7mm   7mm   8mm   9mm

                                 在设计食指操作的界面时,参考控件所在位置的
    D1    D2    D3    D4    启示   触击尺寸要求,避免因尺寸小带来误操作,影响
    7mm   7mm   7mm   8mm        操作效率。




*食指-触击正确率均值达到95%及以上的最小尺寸*
Part 5
?   总结和讨论
总结:热区与死角


      拇指                        食指             混合状态
  热区&死角                     热区&死角              热区&死角



      拇    拇    拇                    食
      指    指    指                    指                  A4
      A2   A3   A4                   A4
 拇    拇                    食    食    食
 指    指                    指    指    指        B1   B2
 B1   B2                   B1   B2   B4
 拇    拇         拇    ∩交集   食    食    食    =
 指    指         指          指    指    指        C1   C2   C4
 C1   C2        C4         C1   C2   C4
 拇    拇         拇          食    食    食
 指    指         指          指    指    指             D2   D4
 D1   D2        D4         D1   D2   D4
总结:控件触击尺寸设计


          拇指                  食指
          尺寸要求                尺寸要求




     11   8    10 11     8    8    8    8
     mm   mm   mm   mm   mm   mm   mm   mm


     10 10 11 10         7    8    8    9
     mm   mm   mm   mm   mm   mm   mm   mm


     9    9    11 11     7    7    8    9
     mm   mm   mm   mm   mm   mm   mm   mm


     11 10 11 11         7    7    7    8
     mm   mm   mm   mm   mm   mm   mm   mm
讨论——说说你的感受




   看完这个研究,你 最大的感受 是什么?
   希望,它所告诉你的不只是一串百分比数字。
讨论1:左侧?右侧

通过做这个研究,我们发现——
1. 无论拇指操作还是食指操作,屏幕左侧的正确率均显著高于右侧。

   混合状态
   热区&死角



                 讨论1:
            A4
                 操作控件放在左侧是不是比右侧更合理呢?
  B1   B2


  C1   C2   C4


       D2   D4
讨论:左侧?右侧?




                 比较分析


     新的问题:
     除了正确率,还有哪些因素会影响到控件的位置?

       手指弯曲度              操作反馈视野

       持机稳定性               手指位移

      上下文和经验
     (例:搜索button、确认取消)
                           ……
预告:【用研 Discovery】
    第二期
   左侧 VS. 右侧
触摸式控件的位置如何考虑?
讨论2:个性化?标准化?

通过做这个研究,我们发现——
1. 不同手指的操作在“热区和死角”、“合理尺寸”上是有差异的。
2. 我们进一步猜测,对于左手和右手操作,也会有很大差异吧?

 1. 这个产品的使用环境是“左手”or“右手”?
 例:饭桌上的应用产品——微薄、小说、新闻,是否应该考虑左手操作设计?


 2. 这个产品的使用环境是“单手”or“双手”?
 例:路上应用产品——导航、微信,是否应该考虑单手拇指操作的要求?


 3. 这个页面的使用环境是“左手 or 右手 or 单手 or 双手”?
 例:手机淘宝女装频道 VS. 手机淘宝女装购买订单页,统一个产品的不同页面的设计也不
 可一概而论,设计要体贴入微。


讨论2:
应该考虑这些使用场景因素而做“个性化的有针对性的”调整吗?
还是应该保持绝对统一的标准?
讨论2——个性化?标准化?
正方:                反方:
个性化是产品从初期迈向成熟的产物   标准化更通用,不挑战用户的习惯
  1990
  2010




新的问题:                新的问题:
如何定义自己的目标场景和人群?      标准化=苹果化???
边缘场景和人群就不照顾了?
预告:【用研 Discovery】
     第三期
   个性化 VS. 标准化
触屏手机界面设计,何去何从?
最后——
【用研 Discovery】课题招标
无论你是设计师PD运营技术人员老板,
欢迎提出各种大胆的假设和想法,
加入Discovery团队,
我们一起站在巨人的肩膀上,
寻找“移动互联网世界”的答案!
thanks
        感谢 无明、天宏、梓佑 的支持;
        感谢 完颜、陈威、雪芝 的帮助;
感谢 胡馨月、启智、向松 、神勋、准提 等同学在工作中的配合。

More Related Content

More from etaoux

一淘PPT模板.ppt
一淘PPT模板.ppt一淘PPT模板.ppt
一淘PPT模板.pptetaoux
 
一淘PPT模板.ppt
一淘PPT模板.ppt一淘PPT模板.ppt
一淘PPT模板.pptetaoux
 
ppt模板.pptx
ppt模板.pptxppt模板.pptx
ppt模板.pptxetaoux
 
中文Pdf
中文Pdf中文Pdf
中文Pdfetaoux
 
T1QoTjXfReXXc_KqbX.pptx
T1QoTjXfReXXc_KqbX.pptxT1QoTjXfReXXc_KqbX.pptx
T1QoTjXfReXXc_KqbX.pptxetaoux
 
主搜垂直化调研报告-单反镜头.pptx
主搜垂直化调研报告-单反镜头.pptx主搜垂直化调研报告-单反镜头.pptx
主搜垂直化调研报告-单反镜头.pptxetaoux
 
Android客户端流失调研报告.pptx
Android客户端流失调研报告.pptxAndroid客户端流失调研报告.pptx
Android客户端流失调研报告.pptxetaoux
 
Listing_Detail篇__android客户端设计研究系列.pptx
Listing_Detail篇__android客户端设计研究系列.pptxListing_Detail篇__android客户端设计研究系列.pptx
Listing_Detail篇__android客户端设计研究系列.pptxetaoux
 
_信息布局_与_评论___推推用户研究报告系列.pptx
_信息布局_与_评论___推推用户研究报告系列.pptx_信息布局_与_评论___推推用户研究报告系列.pptx
_信息布局_与_评论___推推用户研究报告系列.pptxetaoux
 
电话访谈那些事儿.pptx
电话访谈那些事儿.pptx电话访谈那些事儿.pptx
电话访谈那些事儿.pptxetaoux
 
人物角色篇__android客户端设计研究系列.pptx
人物角色篇__android客户端设计研究系列.pptx人物角色篇__android客户端设计研究系列.pptx
人物角色篇__android客户端设计研究系列.pptxetaoux
 
视觉风格篇__android客户端设计研究系列.pptx
视觉风格篇__android客户端设计研究系列.pptx视觉风格篇__android客户端设计研究系列.pptx
视觉风格篇__android客户端设计研究系列.pptxetaoux
 
可用性测试篇__android客户端设计研究系列.pptx
可用性测试篇__android客户端设计研究系列.pptx可用性测试篇__android客户端设计研究系列.pptx
可用性测试篇__android客户端设计研究系列.pptxetaoux
 
定位_问题_机会点__推推用户研究报告系列.pptx
定位_问题_机会点__推推用户研究报告系列.pptx定位_问题_机会点__推推用户研究报告系列.pptx
定位_问题_机会点__推推用户研究报告系列.pptxetaoux
 
用户体验最新报告.pptx
用户体验最新报告.pptx用户体验最新报告.pptx
用户体验最新报告.pptxetaoux
 
主搜垂直化调研报告-单反相机.pptx
主搜垂直化调研报告-单反相机.pptx主搜垂直化调研报告-单反相机.pptx
主搜垂直化调研报告-单反相机.pptxetaoux
 
主搜垂直化调研报告-手机.pptx
主搜垂直化调研报告-手机.pptx主搜垂直化调研报告-手机.pptx
主搜垂直化调研报告-手机.pptxetaoux
 
一淘PPT模板_副本.pptx
一淘PPT模板_副本.pptx一淘PPT模板_副本.pptx
一淘PPT模板_副本.pptxetaoux
 
Wap淘宝可用性测试报告.pptx
Wap淘宝可用性测试报告.pptxWap淘宝可用性测试报告.pptx
Wap淘宝可用性测试报告.pptxetaoux
 
支付宝登录产品走查.pptx
支付宝登录产品走查.pptx支付宝登录产品走查.pptx
支付宝登录产品走查.pptxetaoux
 

More from etaoux (20)

一淘PPT模板.ppt
一淘PPT模板.ppt一淘PPT模板.ppt
一淘PPT模板.ppt
 
一淘PPT模板.ppt
一淘PPT模板.ppt一淘PPT模板.ppt
一淘PPT模板.ppt
 
ppt模板.pptx
ppt模板.pptxppt模板.pptx
ppt模板.pptx
 
中文Pdf
中文Pdf中文Pdf
中文Pdf
 
T1QoTjXfReXXc_KqbX.pptx
T1QoTjXfReXXc_KqbX.pptxT1QoTjXfReXXc_KqbX.pptx
T1QoTjXfReXXc_KqbX.pptx
 
主搜垂直化调研报告-单反镜头.pptx
主搜垂直化调研报告-单反镜头.pptx主搜垂直化调研报告-单反镜头.pptx
主搜垂直化调研报告-单反镜头.pptx
 
Android客户端流失调研报告.pptx
Android客户端流失调研报告.pptxAndroid客户端流失调研报告.pptx
Android客户端流失调研报告.pptx
 
Listing_Detail篇__android客户端设计研究系列.pptx
Listing_Detail篇__android客户端设计研究系列.pptxListing_Detail篇__android客户端设计研究系列.pptx
Listing_Detail篇__android客户端设计研究系列.pptx
 
_信息布局_与_评论___推推用户研究报告系列.pptx
_信息布局_与_评论___推推用户研究报告系列.pptx_信息布局_与_评论___推推用户研究报告系列.pptx
_信息布局_与_评论___推推用户研究报告系列.pptx
 
电话访谈那些事儿.pptx
电话访谈那些事儿.pptx电话访谈那些事儿.pptx
电话访谈那些事儿.pptx
 
人物角色篇__android客户端设计研究系列.pptx
人物角色篇__android客户端设计研究系列.pptx人物角色篇__android客户端设计研究系列.pptx
人物角色篇__android客户端设计研究系列.pptx
 
视觉风格篇__android客户端设计研究系列.pptx
视觉风格篇__android客户端设计研究系列.pptx视觉风格篇__android客户端设计研究系列.pptx
视觉风格篇__android客户端设计研究系列.pptx
 
可用性测试篇__android客户端设计研究系列.pptx
可用性测试篇__android客户端设计研究系列.pptx可用性测试篇__android客户端设计研究系列.pptx
可用性测试篇__android客户端设计研究系列.pptx
 
定位_问题_机会点__推推用户研究报告系列.pptx
定位_问题_机会点__推推用户研究报告系列.pptx定位_问题_机会点__推推用户研究报告系列.pptx
定位_问题_机会点__推推用户研究报告系列.pptx
 
用户体验最新报告.pptx
用户体验最新报告.pptx用户体验最新报告.pptx
用户体验最新报告.pptx
 
主搜垂直化调研报告-单反相机.pptx
主搜垂直化调研报告-单反相机.pptx主搜垂直化调研报告-单反相机.pptx
主搜垂直化调研报告-单反相机.pptx
 
主搜垂直化调研报告-手机.pptx
主搜垂直化调研报告-手机.pptx主搜垂直化调研报告-手机.pptx
主搜垂直化调研报告-手机.pptx
 
一淘PPT模板_副本.pptx
一淘PPT模板_副本.pptx一淘PPT模板_副本.pptx
一淘PPT模板_副本.pptx
 
Wap淘宝可用性测试报告.pptx
Wap淘宝可用性测试报告.pptxWap淘宝可用性测试报告.pptx
Wap淘宝可用性测试报告.pptx
 
支付宝登录产品走查.pptx
支付宝登录产品走查.pptx支付宝登录产品走查.pptx
支付宝登录产品走查.pptx
 

屏幕的热区与控件的触击尺寸_为触屏手机而设计系列报告_.pptx