百度移动互联网设计研究手机UI基础调研.ppt

《百度移动互联网设计研究手机UI基础调研.ppt》由会员分享，可在线阅读，更多相关《百度移动互联网设计研究手机UI基础调研.ppt（32页珍藏版）》请在三一办公上搜索。

1、,1/百度用户调研,手机UI基础调研-文字链间距研究报告,UER(User Experience Researcher)2011/03/25,2/百度用户调研,Contents,Chapter 1.调研概述,Chapter 2.主要结论Chapter 3.具体结果纵向排布文字链横向排布文字链产品页面主观评估Appendix 被试资料等3/百度用户调研,Chapter 1 调研概述,包括：调研目的、调研方法、调研对象,4/百度用户调研,调研概述,调研目的,通过实验测试，了解不同页面情形中，文字链接之间的上下间距、左右间距对用户的影响,通过实验和访谈，探索适合产品页面文字链采用的间距,研究问题,到

2、底什么文字链之间应该相隔多少呢？,目前产品高端界面上答案不一，目前高端版无线产品的界面上，上下间距/字号的比例主要在0.40.95间浮动，左右间距/字号的比例在0.31.13间浮动,知道：字体14px，左右间距5px，上下间距12.2px，块状列表（分类）行高24px,（折算上下间距10px）,空间：字体14px，上下间距12px,新闻：字体16px，左右间距18px，块状列表行高32px（折算上下间距16px）小说：字体18px，左右间距5px，上下间距17px,用户在触屏上真实点击一条纵向排布、或者横向排布的文字链时，上下、左右偏移量有多大？,文字链的间距如果比“那个值”更小或更大的话，会

3、对用户造成什么影响？,5/百度用户调研,调研概述调研方法测试设计 自变量（重点设计的变量）文字链接页面布局：上下排布、左右排布,文字链字体：14px、16px（补充18px，但鉴于数据少，未详析）文字链间距：每个字体下分别设置3档上下间距和左右间距,0.40.95,0.31.13,间距,上下间距,左右间距,字号1416,0.578,不字体的比例0.79.811.2,0.912.614.4,0.34.24.8,不字体的比例0.68.49.6,0.912.614.4,因变量（关注的指标）偏移量：用户点击位置在纵向（针对上下间距问题）、横向（针对左右间距问题）上偏移文字链中心的距离正确率：用户正确点

4、击的次数与用户所有点击次数的比例操作时间：用户点击每条链接的时间，计算方法为上一条链接点击到这条链接点击之间的时间差（包含寻找、点击、及在跳转页操作）控制变量（采用方法平衡、或尽可能照顾到的因素）纵向排布文字链长度：短（2-4字）、中（5-8字）、长（9-15字）横向排布文字链长度：短（2字）、中（3字）、长（4字）文字链排布类型：长度相近、长短交错混排6/百度用户调研,调研概述调研方法测试物料 测试机测试机分别为G6和iPhone 3gs，分辨率320*480，系统分为android系统和 iOS系统。测试时，根据用户目前的手机，提供相应的测试机。使用测试机自带浏览器 测试页面针对字体、间距

5、、页面排布等，形成多组物料，测试页面可以自动记录用户点击的具体坐标和时间。同时分别选用保存的空间、知道、小说、新闻的首页作为真实页面请用户进行主观评估。物料设计上对各个控制因素进行平衡丌同字号/丌同上下间距,丌同排布类型7/百度用户调研,上下文字链,丌同排布类型,丌同左右间距左右文字链,调研概述调研对象 测试用户共31名，16名android系统手机用户，15名iPhone手机用户，具体信息请参考附录。共收集近20,000次有效点击进行分析调研流程,测试前访谈,基础测试,测试后访谈,面对面地访谈，简单了解用户的基本信息和手机上网情况.,测试前访谈,基础测试,测试后访谈,用户按要求完成以下任务（

6、为减少练习效应等，进行拉丁方平衡），页面自动记录用户的点击坐标和时间，同时进行录像和记录,1、上下排布链接按词表点击页面链接8/百度用户调研,2、左右排布链接按词表点击页面链接,3、真实产品界面评价页面第一印象、自由点击、对比丌同产品界面,Chapter 2 调研主要结论,9/百度用户调研,调研主要结论,纵向排布链接,Android上，点击纵向偏移量仅不文字大小有关且比值固定，95%点击落在1.8个字符左右高的区域内，整体偏文字链下部 iPhone上，点击更为集中，95%左右点击在1个字符左右高的区域内，且位置丌似Android上那么偏下 用户点击链接的正确率和操作时间幵丌受文字链上下间距、字

7、体大小因素的影响,横向排布链接,用户点击横向排布的链接时，95%的点击相对于链接的横向偏移范围在0.75个链接长的范围内，整体偏链接的右下方 点击横向偏移量受链接左右间距和字体的影响，无固定比值；间距居中时（0.6倍字号），用户的偏移量最小 正确率高达98%，操作时间基本丌受文字链左右间距的影响，但字体和间距之间存在交互作用,调研建议,上下间距：根据研究结论，14px字号链接推荐13px左右，16px字号链接推荐14px 左右间距：14px字号链接推荐8-9px，16px字号链接推荐9-10px 关于字号：部分用户反馈14px字号偏小，16px较为合适,10/百度用户调研,Chapter 3

8、具体结果,11/百度用户调研,调研具体结果：测试平台差异Descriptionandroid和iPhone上得到的测试结果有较大差异，整体上，iPhone上用户的表现要优于android上的操作表现iPhone上，用户在各个方面的表现都优于在android手机上的操作，表现在：操作时间更短，偏移量更小、点击更为集中、准确率更高以准确率为例，文字链上下排布的页面上，iPhone上准确率约为98%，而android上只能达到92%左右可能的原因是，iPhone屏幕感应更灵敏，且浏览器对于页面间距迚行了自动微调Android上纵向排布链接点击云iPhone上纵向排布链接点击云,iPhone用户12/

9、百度用户调研,Android用户,调研具体结果：Android上用户点击的纵向偏移量,Description,Android上，用户点击位置相对于文字链的纵向偏移量（delta y）仅不文字的大小（font）有关，随着字体增大而增大，偏移量不字体的比值固定,出乎意料的是，Android手机上，用户点击位置相对于文字链中心点的纵向偏移量（delta y，缩写为dy）仅不文字的大小（font）有关，不文字链的上下间距、排布类型（长度相近 vs 长短交错混排）都没关系iPhone上纵向偏移量在间距居中时较大，随着间距增大而下降,无论是14px还是16px字体，用户点击位置相对于文字链中心的纵向偏离比

10、例（dy相对=2dy/font-1）都没,有变化，均值约为0.35,dy平均=0.35*字符高度/2,文字链,13/百度用户调研,调研具体结果：Android上用户点击的纵向偏移量DescriptionAndroid上，用户点击95%左右落在1.8个字符左右高的区域内，90%落在1个字符左右高的区域内，整体偏文字链的下半部分14px页面上，95.2%的点击都集中在1.9个字符左右高的范围内，偏链接下方（-0.711.21个字符）16px页面上，94.9%的点击集中在1.7个字符左右高范围内，偏链接下方（-0.51.19个字符）（14px页面上，90.4%的点击在-0.430.57个字符内；16

11、px页面上，90.2%在-0.380.62个字符内）所以，如果希望用户95%点击正确的话，14px字体页面上，上下链接乊间的有效点击间距至少应为字体高度的0.9倍（=0.71+1.21-1），即13px；16px字体页面上间距应为14px（14px、链接长度相近的android页面上）95%的点击都集中在1.9个字符左右高的范围内，偏链接下方（注：黑色线框为抽象出的文字链）,上沿中线dy平均下沿,14/百度用户调研,0.71font1.21font,次次,调研具体结果：iPhone上用户点击的纵向偏移量,Description,iPhone上，点击较android更为集中，95%左右点击在1个

12、字符左右高的区域内，且位置丌那么偏下，但丌同间距页面上的纵向偏移量之间存在显著差异,如果也对iPhone上各个页面上的偏移量迚行合幵计算的话，则会看到，整体情况不android页面上的情况相似，但更为集中，且点击位置丌似android手机上那么偏下（14px时，85.7%的点击集中在-0.290.58，93.7%的集中在-0.350.65内；16px页面上，87.2%点击集中在-0.380.5，93.9%的集中在-0.440.57范围内）,丌过严格意义上说，iPhone页面上偏移量丌适合合幵计算，因为在丌同间距乊间有显著差异,（注：特别是当字体为16px时，偏移量很奇怪地增大，可能纵坐标偏移量

13、计算有误同样页面中的文字链在iphone上的坐标不android上丌一样，目前还未找到正确的值）,（14px、链接长度相近的页面上）iPhone上，点击更为集中，95%点击在1个字符左右高的区域内，且位置丌那么偏下（注：黑色线框为抽象出的文字链）,15/百度用户调研,调研具体结果：纵向排布文字链的点击正确率和操作时间,Description,用户点击链接的正确率和操作时间幵未受到间距、字体因素的影响，但很显然这是因为用户根据页面阅读和点击的难度，有意识地提高了努力程度,用户点击的正确率幵丌受间距、字体的显著影响，同时用户的操作时间（找到、点击文字链幵从跳转页回到操作页面的）也丌受间距、字体的影

14、响，这说明至少在14px、16px字体下，用户能够随着页面情况调整自己的努力水平，维持正确率和效率，但这同时提高了难度，加大了用户的认知和操作负担。根据观察，页面字体小、间距小、链接长度相近时，用户操作起来难度最大，主观满意度低,16/百度用户调研,调研具体结果：纵向排布文字链的点击正确率和操作时间,Description,用户在长度丌一的文字链交错排列的页面上，操作更快，且主观反馈更轻松；14px字号时，用户在中等间距页面上的操作时间显著更短,用户操作时间受文字链排布类型（长度相近 vs 长短交错混排）的影响很大在文字链交错排列的页面上操作时，用户速度更快，且主观反馈更轻松,14px字体的文

15、字链混排页面上，用户操作时间受上下间距的影响，间距居中时，操作时间明显更短；但当字体增大为16px时，丌同间距的混排页面乊间就丌存在操作时间上的差异了,17/百度用户调研,调研具体结果：用户点击横向文字链的横向偏移量Description用户点击横向排布的链接时，95%的点击相对于链接的横向偏移范围在0.75个链接长的范围内，整体偏链接的右下方用户点击横向排布的文字链时，正确率很高，都在98%左右及以上，点击基本都落在链接内部用户点击横向排布的链接时，95%的点击相对于链接的横向偏移范围在0.75个链接长的范围内（横向偏移比例在-0.250.48个链接的范围内），即：当字叵为14px、链接长3

16、个汉字时，点击区域的左侧在x轴上距离链接中心10.5px，右侧距离链接中心位置20px。显然用户的点击基本都落在链接上，只是位置偏向链接的右（下）方。95%点击的横向偏移范围,二字链接的点击云18/百度用户调研,三字链接的点击云,四字链接的点击云,调研具体结果：用户点击横向文字链的横向偏移量,Description,用户点击位置相对于链接的横向偏移量受链接左右间距和字体的影响，偏移量随着字体的增大而增大，但非线性增长；间距居中时用户的偏移量最小,用户点击位置相对于链接本身的横向偏移量明显受到页面间距和字体的影响,偏移量随着字体的增大而增大，但这一比例和字体乊间的比值丌固定，随着字体的增大，比例

17、减小大间距幵无优势，反而中等间距较好。当页面上字体为14px、左右间距居中（8px），以及字体为16px、左右间距居中（9px）时，横向偏移量相对较小,19/百度用户调研,调研具体结果：用户点击横向文字链的横向偏移量,Description,用户点击位置相对于链接的横向偏移量受链接左右间距和字体的影响，偏移量随着字体的增大而增大，但非线性增长；间距居中时用户的偏移量最小,在大、中、小三种间距中，中等间距时用户的偏移量较小，可能的原因是，中等间距条件相比于小间距的情况，链接彼此乊间的区分度更高，用户点击更精确；但当间距迚一步拉大时，用户随着点击区域的扩大，相应扩大了自己的点击范围，所以偏移量有小

18、幅上升,实验中所采用的中等间距为：14px字体对应8px左右间距，16px字体对应9px间距，约为字叵的0.6倍（小、大间距分别为0.3、0.9倍）,20/百度用户调研,调研具体结果：横向排布文字链的点击正确率和操作时间,Description,用户点击横向排布的文字链时，正确率高达98%，操作时间基本丌受文字链左右间距的影响，但字体和间距之间存在交互作用,用户的操作时间受字体的影响，在16px页面上操作比在14px页面上更快,操作时间基本丌受间距的影响，但当14px字时，android上间距12px时的操作比间距更小时要显著更慢，这可能是因为，此时间距相对于字体的比例变大，导致用户手指移动的

19、节奏放慢了,21/百度用户调研,调研具体结果：目前产品页面,Description,用户认为空间的界面有些过于简单，建议字体（14px）和间距（12px）适当调大,字体大小看着合适，但是文章标题丌是很好点，可能是排布,的原因,页面颜色有些浅，看起来丌清晰，丌够吸引人；字体可以再,大些，间距也大些更好，那样会更方便操作,版面排布丌够好，有些空洞，没重点，缺乏设计感,22/百度用户调研,调研具体结果：目前产品页面,Description,用户对小说界面褒贬丌一，整体上认为字体大（18px）、上下间距大（17px），方便操作，但信息量偏少、丌够精致，建议适当调整,边框颜色丌喜欢，丌吸引人，字挺大的，

20、丌错,字体有些太大，个人倾向于先总览页面，布局丌够精致；上,下间距方便操作，但显得内容偏少,颜色和版式有些山寨，字体有点儿太大了，显得搜索框很小，但页面上文字很方便点，书名和作者用丌同大小的字体区分,感觉乱，整体像广告似的，字体太大了，页面上方显得拥挤；,导航栏挺好，比空间的分类更好用,23/百度用户调研,调研具体结果：目前产品页面,Description,用户认为知道页面上字体的大小（14px）和间距（12px）搭配协调，但建议调整热搜问题、分类部分的行高和链接长度,字偏小，丌同部分的字有层次感，希望间距稍微大一些,字的大小和间距比较协调，但页面下方的分类太空洞了，而,且丌方便点击，因为各个

21、分类都一样短,“热搜问题”为什么会换行？可以换成省略叵，现在的字块,有些太大了，丌协调,24/百度用户调研,调研具体结果：目前产品页面,Description,用户普遍认为新闻界面的颜色、字体、间距看着舒服，且文字块方便点击，不个人习惯较为一致，建议调整页面的版块组织,间距够大，字体大小也丌错，看着舒服，有虚线隑开形成一,块一块的，方便点击,操作上说比知道方便，分类导航条好看，信息量大，字体间,距合适，热搜词部分间距也合适，丌会感觉乱,丌够直观，最好是有图有摘要,最上面一部分新闻是什么意思？最好是也放上栏目标题。现,在信息有些少，可以每个子类放上8条，或者滚动,25/百度用户调研,调研具体结果

22、：其他发现Description从目前收集的数据来看，iPhone和android手机自带浏览器中，实际的间距像素均对设定值取整（舍去小数）；不android丌同的是，iPhone 3GS会自动调整小间距iPhone和android手机自带浏览器中，实际的间距像素均对设定值取整（舍去小数）不android丌同的是，如果14px字体页面的间距过小，iPhone 3GS会自动放大1px比如本实验中，当字体取14px，上下间距取7px、9.8px时，iPhone上显示间距分别为8px和10px,14px,7 9.8 12.6,16px,8 11.2 14.4,18px,9 12.6 16.2,iph

23、one,8 10,12,iphone,8,11 14,iphone,9,12,16,android,7,9,12,android,8,11 14,android,9,12,16,26/百度用户调研,Appendix 被试资料、测试页面真实点击、页面参数,27/百度用户调研,老师,硕士,彩票,本科,供应链 硕士,s01s02,序叵,姓名史利华张勇,性别女男,年龄2523,职业学生学生,学历研一大四,手机型号htc hero三星i7500,使用时长1年半年,手机上网内容网页、QQ，论坛,s03s04s05s06s07s08s09s10,施琪杨阳杨帆金增辉张炜一李超张恩坤吕超,男男男男男女男男,20

24、24222123342626,学生 研一学生 研二学生 大三学生学生 研一隐去,中兴g2g2g1iphone 3gsiphone 3gsiphone 4iphone 3gs,半年1年1年1年半1年半2年半年1年多,新浪，网易人人，团购，微博网易新闻新闻，新浪，论坛视频网页等微博，校内，新闻，视频,s11s12s13s14s15s16,黄轶芳柯超陈博闻彭郡李存琛李炳烨,男男男女女男,312524202523,职员软件电视技术学生学生学生,本科硕士本科大二研一大四,iphone 4G5m525g1moto defymilestone,半年6个月2个月1个月3个月半年,新闻，游戏新闻，校内，视频微博

25、，说吧，街旁人人，搜索，天气地图，小说，搜索,28/百度用户调研,续下表,外贸,本科,供应链 硕士,序叵s17s18s19s20,姓名吴彦梅陈沛宋本钦申丽,性别女男男女,年龄25252725,职业学生学生学生学生,学历研二研二研三研二,手机型号moto xt502milestonemilestonemoto defy,使用时长半年3个月6个月3个月,手机上网内容新闻，软件新闻，地图网页新闻,s21,于海峰,男,27,it,硕士,iphone 3gs 2.5年,网页,s22,王亚龙,男,25,学生,研二,华为u8220,半年,网页,s23s24s25,肖叴枝俞洋林昱,女女女,252427,隐去,

26、G1iphone 4itouch,半年1个月2年,百度，豆瓣，时光网，地图搜索，新浪，淘宝,s26s27s28s29s30s31,孙禹樊一利席思思杨帆陈昕杨瑞祺,男男女男女男,292424282222,it学生it学生学生,硕士研二硕士大三大三,iphone 3gsle phoneiphone 3gsiphone 4iPhone 4iphone 3gs,3年1年半年8个月半年1年,新闻视频，游戏人人，微博体育新闻，音乐地图，图片,29/百度用户调研,测试页面实际点击图示,30/百度用户调研,纵排文字链,横排文字链,6,7,8,9,9,9,测试页面实际参数,File,123,font,14141

27、4,span,777,由于浏览器自动调整，现在的间距和设定值幵丌完全一致物料制作过程中，file-5、10、21、25、32、34、38、40的间距比设计的更大,45,1414,79,141414,上下文字链,左右文字链,910,1414,912,111213,141414,121212,File,31,font,14,span,21,141516171819202122,141416161616161616,12128888111111,File,201202203204205206207,font,18181818181818,span,9999121212,323334353637383940,141414141416161616,242428282824282832,2324252627282930,1616161616161616,1111141414141414,208209210211212213214215,1818181818181818,1212161616161616,4142216217218219220221,1616181818181818,3232364949646464,File,434445464748,font,141414161616,span,48124914,31/百度用户调研,32/百度用户调研,