Your SlideShare is downloading. ×
屏幕的热区与控件的触击尺寸_为触屏手机而设计系列报告_.pptx
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

796

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
796
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 【用研 Discovery 第一期】为触屏手机而设计—— 之 屏幕的热区与控件的触击尺寸 一淘@UX — 用户研究 — 晓千
  • 2. 目录第一部分 为什么做这个研究?第二部分 研究过程介绍第三部分 单手·拇指·行走——研究中的发现第四部分 双手·食指·静坐——研究中的发现第五部分 总结和讨论
  • 3. Part 1? 为什么 做这个研究?
  • 4. 触屏手机界面设计背景与挑战• 挑战1:发展时间短,国内外的研究都尚处在探索阶段,充满未知和不确定。• 挑战2:从鼠标键盘到手指,准确率问题、热区和死角的问题。• 挑战3:东西方生理指标和文化差异对现有设计原则的影响。• 挑战4:普通WAP/APP设计原则对淘宝(APP/WAP)的适用性。• ……
  • 5. 触屏手机界面设计 一些前人的经验《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
  • 6. 触屏手机界面设计一些前人的研究 9mm 7mm
  • 7. 关于【用研 Discovery】 站在巨人的肩膀上, 主动地思考, 勇敢地质疑, 批判地继承。
  • 8. 研究目的 对现有的设计原则的 验证 & 探索 1. 中国用户的单手拇指操作热 区真的是这么分布的吗? 2. 热区与死角的差异有多大? 3. 那使用双手,食指操作还有 没有热区和死角的差异呢?《Tap worthy- Designing Great iphone Apps》 Page 58-62 Rule of Thumb
  • 9. 研究目的 对现有的设计原则的 分解 & 细化 7mm ? 4. 热区和死角如果存在差异, 7mm这个设计原则在屏幕的 食指7mm? 任何区域都适用吗? 拇指 9mm? 5. 单手拇指操作和双手食指操 作对于控件尺寸的设计要求 44Pixels? 又有什么差异? 163 ppi screen《Tap worthy- Designing Great iphone Apps》 Page 62-77 The Magic Number is 44
  • 10. …… Part 2 研究过程介绍
  • 11. 实验设计 组间测试 • 单手拇指 • 双手食指实验1 • 行走状态 • 静坐状态 实验2 10人 10人 11人 11人
  • 12. 实验设计 组内测试 5 个恒定刺激参数4x4 • 细分16个测试区 • 更精确的结果统计 16x10x5 次随机刺激呈现 食指 (单位 mm): A1 A2 A3 A4 拇指 (单位 mm) : B1 B2 B3 B4 C1 C2 C3 C4 D1 D2 D3 D4
  • 13. 数据统计方法 16个测试区的 • 统计成功击的正确率:触击正确率统计 用户触击产生的坐标在刺激红点区域内。
  • 14. 实验操作流程 Step 1 Safari浏览器——添加至主屏幕
  • 15. 实验操作流程 Step 2 要求: 1. 每次只展现一个红点,不会同时 出现。 2. 尽可能快速地完成触击,但并非 在考验你的反应能力和时间,保 持平和心态。 3. 拇指实验者在特定范围内正常步 行速度(1-1.5m/s)。
  • 16. 实验操作流程 Step 3 1. 每个参数值有16x10次点击,耗 时大约4-5min 2. 共5轮,每轮之间可休息。 http://www.taobao.com/go/chn/ mobile/uedresearch.php
  • 17. 实验操作流程 Step 4 1. 交由研究员截屏保存,再后期手 工录入SPSS进行统计分析。 http://www.taobao.com/go/chn/ mobile/uedresearch.php
  • 18. 实验设备选择 实验设备:iphone4手机3.5英寸屏幕 分辨率:640x960 物理尺寸:4.93x7.40CM,平均1cm有130个像素点左右 底色:灰色RGB(144,144,144)
  • 19. 被试选择 • 女性21人,男性21人 • 20-35 岁的成年人 • 右利手 邀请浙江科技学院、浙江工 业大学师生共38人、淘宝员 工10人。 共48个样本参与了这个研究。 最终有效样本42。国标《中国成年人人体尺寸》GB10000-88中的手部尺寸
  • 20. 名词解释报告中涉及的专业名词定义触击正确率:手指首次成功击中刺激红点的次数占红点出现总数的比率。误操作:手指触击坐标不在刺激红点区域内。显著性:t值和P值都是用来判断统计上是否显著的指标。本实验设定 P =0.01,即样本中变量关联有1%的可能是由偶然性造成的。(在许多研究领域,p=0.05通常被认定为可接受错误的边界水平。)触击热区:在整个屏幕中,触击正确率显著高于其他部位的区域。触击死角:在整个屏幕中,触击正确率显著低于其他部位的区域。触击范围最小尺寸:触击正确率均值达到95%及以上的最小尺寸。
  • 21. Part 3单手·拇指·行走研究中的发现
  • 22. 3.1 [实验探索] 拇指更合理的触击热区在哪里?
  • 23. 实验设置——拇指触击热区 · 建议区 《Tap Worthy》书中建议的 为验证理论,本实验中的检验区域 右手拇指触击热区 定义为——建议热区 B1 B2 B3 取近似实验区域 C1 C2 C3 D1 D2 D3
  • 24. 实验发现——拇指触击热区 · 建议区 建议区 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
  • 25. 实验设置——拇指触击热区 · 探索区 实验假设 探索热区 拇指自然弯曲, 指肚触击, 稳定持机状态下的, 手指自然移动。 A2 A3 B1 B2 取近似 实验区域 C1 C2 D2
  • 26. 实验发现——拇指触击热区 · 探索区 探索区 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
  • 27. 实验发现 ——拇指触击热区 A2 A3 B1 B2 B3 B1 B2 VS. C1 C2 C3 C1 C2 D1 D2 D3 D2 较《tapworthy》所建议的操作热区,右侧通过我们探索得到的热 启示 区划分更为合理。尤其在控件尺寸大小被限定的前提下,放在热 区与非热区的差异就会很大。
  • 28. 3.2 [实验探索] 拇指触击死角在哪里?
  • 29. 实验发现 ——拇指触击死角 死角区均值 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 整体均值 % %
  • 30. 3.3 [实验探索] 拇指拇指操作触击尺寸参考
  • 31. 实验发现—— 当 参数值=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时,触击正确率统计
  • 32. 实验发现——拇指触击尺寸参考 单手·拇指·行走 状态下 不同区域触击范围最小尺寸* 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%及以上的最小尺寸*
  • 33. Part 4双手·食指·静坐研究中的发现
  • 34. 4.1 [实验探索] 食指食指操作也有热区和死角!
  • 35. 实验发现——食指的触击热区和死角 A4 B1 B2 B4 通过比较各单元区与整体均值的差异, 发现—— C1 C2 C4 D1 D2 D4 B1/B2/C1/C2/D1/D2 触击正确率显著高于整体均值; A4/B4/C4/D4 触击正确率显著低于整体均值;
  • 36. 实验发现——食指的触击热区和死角 实验发现 热区 vs. 整体 vs. 死角 触 100 击 95 正 90 确 85 率 80 (%) 75 触 70 击 5mm 6mm 7mm 8mm 9mm 触 死 刺激红点参数值 击 角 热 通过配对T检验,两个区域与整体均值都存在显 区 著差异。 现象 同样,差异随红点的变大而减弱。可能因为当红 点变大后,触击定位变得容易,整体确率都得到 了提高,区域间差异就消失了。 在设计控件布局时,即使是食指操作,也需要考虑手指 启示 在不同区域的限制。
  • 37. 4.2 [实验探索] 食指食指操作触击尺寸指南
  • 38. 实验发现—— 当 参数值=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时,触击正确率统计
  • 39. 实验发现——食指触击尺寸参考 双手·食指·静坐 状态下 不同区域触击范围最小尺寸* 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%及以上的最小尺寸*
  • 40. Part 5? 总结和讨论
  • 41. 总结:热区与死角 拇指 食指 混合状态 热区&死角 热区&死角 热区&死角 拇 拇 拇 食 指 指 指 指 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
  • 42. 总结:控件触击尺寸设计 拇指 食指 尺寸要求 尺寸要求 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
  • 43. 讨论——说说你的感受 看完这个研究,你 最大的感受 是什么? 希望,它所告诉你的不只是一串百分比数字。
  • 44. 讨论1:左侧?右侧通过做这个研究,我们发现——1. 无论拇指操作还是食指操作,屏幕左侧的正确率均显著高于右侧。 混合状态 热区&死角 讨论1: A4 操作控件放在左侧是不是比右侧更合理呢? B1 B2 C1 C2 C4 D2 D4
  • 45. 讨论:左侧?右侧? 比较分析 新的问题: 除了正确率,还有哪些因素会影响到控件的位置? 手指弯曲度 操作反馈视野 持机稳定性 手指位移 上下文和经验 (例:搜索button、确认取消) ……
  • 46. 预告:【用研 Discovery】 第二期 左侧 VS. 右侧触摸式控件的位置如何考虑?
  • 47. 讨论2:个性化?标准化?通过做这个研究,我们发现——1. 不同手指的操作在“热区和死角”、“合理尺寸”上是有差异的。2. 我们进一步猜测,对于左手和右手操作,也会有很大差异吧? 1. 这个产品的使用环境是“左手”or“右手”? 例:饭桌上的应用产品——微薄、小说、新闻,是否应该考虑左手操作设计? 2. 这个产品的使用环境是“单手”or“双手”? 例:路上应用产品——导航、微信,是否应该考虑单手拇指操作的要求? 3. 这个页面的使用环境是“左手 or 右手 or 单手 or 双手”? 例:手机淘宝女装频道 VS. 手机淘宝女装购买订单页,统一个产品的不同页面的设计也不 可一概而论,设计要体贴入微。讨论2:应该考虑这些使用场景因素而做“个性化的有针对性的”调整吗?还是应该保持绝对统一的标准?
  • 48. 讨论2——个性化?标准化?正方: 反方:个性化是产品从初期迈向成熟的产物 标准化更通用,不挑战用户的习惯 1990 2010新的问题: 新的问题:如何定义自己的目标场景和人群? 标准化=苹果化???边缘场景和人群就不照顾了?
  • 49. 预告:【用研 Discovery】 第三期 个性化 VS. 标准化触屏手机界面设计,何去何从?
  • 50. 最后——【用研 Discovery】课题招标无论你是设计师PD运营技术人员老板,欢迎提出各种大胆的假设和想法,加入Discovery团队,我们一起站在巨人的肩膀上,寻找“移动互联网世界”的答案!
  • 51. thanks 感谢 无明、天宏、梓佑 的支持; 感谢 完颜、陈威、雪芝 的帮助;感谢 胡馨月、启智、向松 、神勋、准提 等同学在工作中的配合。

×