Más contenido relacionado
Similar a Listing_Detail篇__android客户端设计研究系列.pptx (20)
Listing_Detail篇__android客户端设计研究系列.pptx
- 2. 调研方法 Android客户端设计研究报告
眼动测试 参与式设计 深度访谈+实验研究
60 ×60
70 ×70
80 ×80
90 ×90
17个眼动样本
结合实验设计，通过访谈挖掘
眼动仪是个同时可做定性和定量 邀请10个安卓客户端用户协助完 目前用户对listing和detail设计
分析的工具。学术上，50个眼动 成。 的想法和观点。
样本已可视为定量大样本。由于 由用户参与设计手机淘宝的搜索
企业研究时间和经费的限制，本 结果页，在过程中深挖用户需求
，探索用户心目中的产品原型。
研究采纳17个眼动样本，原则上
属于较大样本的定性研究。故分
析过程中结论均结合定性访谈和
经验分析。
对眼动研究不熟悉的同学，请点击这里
- 4. Part 1
Android客户端设计研究报告
Listing研究
- 5. 调研思路和目的 Android客户端设计研究报告
……
挑产品阶段
搜索阶段
……
心动宝贝
挑宝贝阶段
1. 由于研究设备的限制，故本研究眼动部分以PC研究为基础，通
过分析PC淘宝页面设计中的存在问题，为手机淘宝设计提供参
考。
2. 本研究将搜索挑选阶段“挑产品”和“挑宝贝”的阶段分开考虑，分
析两者在“大图”和“列表”模式下的不同眼动结果。
- 6. 调研思路和目的 Android客户端设计研究报告
我们的用户 我们的设计
决策过程的 决策要素的 界面要素本身的视觉设计
先后顺序 重要性 界面要素之间的视觉流设计
通过 获得 通过 获得 根据分的得到：
眼动 数据 眼动 数据 •F型浏览原则
•对角线设计原则
各决策因素的 各决策因素的 对比 Pc listing
眼动注视顺序 眼动注视人数 视觉设计分析
目的2：
通过对比眼动数据结果和视
目的1： 觉设计分析结果，指出目前
通过眼动数据结果，了解各 PC listing视觉设计不合理的
决策因素在不同挑选阶段用 地方，为手机淘宝的视觉设
于的关注程度，为手机淘宝 计提供参考。
的视觉设计提供参考。
- 7. Listing决策信息 挑产品阶段
大图模式
报告
解读要点 Android客户端设计研究报告
界面元素 注视人数占比
结论：
图片 96.88%
1. 根据决策因素的注视人数
标题
我们的用户
59.38%
占比排序，可近似推断各
价格 40.63% 元素在PC“大图模式页”中
眼动数据说明：
销量 31.25% 挑产品时的重要度排序。
•有效样本数：16
•取首屏4个宝贝的均值 运费 23.44% （见蓝色表格）
所在地 23.44% 2. 若根据二八原则，挑产品
卖家名称 17.19% 大图阶段，调研中80%用
保障 15.63% 户关注的因素仅为图片，
20%以下的元素为买家名
称和保障。
设计分析结果
意味着在该阶段：1、视觉
图片
设计时，最大胆的做法是
标题
我们的设计 价格
只保留大图。2、买家名
称和保障是可砍的元素。
分析原则：
销量
F型浏览原则，即从上到 3. 对比两个表格（红色和蓝
下，从左到右的浏览习 运费 色），PC端在该阶段的设
惯
所在地 计较为合理，与眼动数据
卖家名称 保持一致。
保障
- 8. Listing决策信息 挑产品阶段
列表模式
报告
解读要点 Android客户端设计研究报告
我们的用户
眼动数据说明：
•有效样本数：16
•取首屏4个宝贝的均值
界面元素 图片 标题 价格 运费 卖家名称 销量 评价 所在地 保障
关注人数占比 95.31% 45.31% 32.81% 18.75% 9.38% 7.81% 7.81% 7.81% 1.56%
我们的设计 优先级1-2级的信
息：帮助定位
分析原则：
对角线设计原则，即从
上到下，从左到右的浏 优先级2-3级的信息：
览习惯 帮助选择
设计分析结果 图片 标题 价格 运费 所在地 销量 卖家名称 评价 保障
问题设计元素 问题设计元素
结论：
1. 根据决策因素的注视人数占比排序，可近似推断各元素在PC“列表模式”中挑产品时的重要度排序。（见蓝色
表格）
2. 对比同一阶段“大图”（上页ppt）和“列表”（本页ppt）两种模式的数据，显示出大图模式带来更多其他因素的
浏览。但80%以上关注人数的元素任然为“图片” 。
3. 对比两个表格（蓝色和红色），显示“图片”“所在地”在视觉设计时略显不合理，在设计中我们给予的“所在地”
的设计分量略重，而“图片”设计分量显得略轻。
- 9. Listing决策信息 挑宝贝阶段
列表模式
报告
解读要点 Android客户端设计研究报告
我们的用户
眼动数据说明：
•有效样本数：13
•取首屏4个宝贝的均值
界面元素 价格 标题 图片 运费 所在地 卖家名称 销量 评价 保障
关注人数占比 90.38% 88.46% 75.00% 73.08% 63.46% 61.54% 55.77% 55.77% 32.69%
我们的设计
分析原则：
对角线设计原则，即从上到下，从左到右的浏览习惯
设计分析结果 图片 标题 价格 运费 所在地 销量 卖家名称 评价 保障
问题设计元素 问题设计元素
结论：
1. 同样是列表模式，“挑产品”和“挑宝贝”两个阶段的眼动结果有比较大的差异，特别是在核心元素上（及80%以
上用户关注的元素）。
2. 近似推断各元素在PC“列表模式”中挑宝贝时的重要度排序。（见蓝色表格）
3. 若根据二八原则，挑宝贝列表阶段，调研中80%用户关注的因素为价格和标题，无20%以下的元素。意味着
在该阶段：视觉设计时，最大胆的做法是只保留价格和标题。
4. 对比两个表格（蓝色和红色），显示“图片”在视觉设计时分量略重，而价格可以尝试更突出地设计。
- 10. 参与式设计结果 Android客户端设计研究报告
原有元素 图片 标题 价格 销量 信用 所在地 新增元素 保障 评价 旺旺在线 卖家名称
删除情况 1/10 0/10 0/10 1/10 5/10 5/10 删除情况 4/10 2/10 5/10 1/10
- 11. listing图片尺寸研究 Android客户端设计研究报告
研究发现 建议
1. 不同类目对图片尺寸的需求有差异，如鞋类和服 1. 考虑关键词特征（类目、目标明确度）
饰类；连衣裙与T恤。 进行智能尺寸匹配。
2. 不同购物情景（目标是否明确），对图片尺寸的 2. 强化不同类目主图规范：
需求有差异，如query——“手机”和“iphone”。 • 促销文字数量和大小
3. 带促销文字的图片需要更大的尺寸识别，影响购 • 商品logo
物体验。 • 商品视图（多品/单品/细节）
60 ×60
70 ×70
非标类：服饰
80 ×80
缩放比例
性别 有无促销文字
（全身/半身）
90 ×90
标类：鞋、数码、化妆品
缩放比例
有无促销文字
（单品陈列/多品陈列）
- 12. Part 2
Android客户端设计研究报告
Detail 研究
- 13. 调研思路和目的 Android客户端设计研究报告
报告浏览必读：
1. 取非标类（服饰）和标类（数码相机）分别统计眼动数据
2. 数据1及目的——取用户进入页面后的前三个10秒，用户关注
的主要页面元素和随时间的变化。
3. 数据2及目的——分别统计非标类和标类detail页面中各决策
因素在30秒内用户的关注人数和首次注视时间，以了解用户
在进入页面后最关注什么信息，顺序是怎样的。
- 14. 非标类 detail眼动 Android客户端设计研究报告
非标类 •有效样本数：15
用户进入detail的 用户进入detail的 用户进入detail的
第一个10秒 第二个10秒 第三个10秒
热区主要集中在首屏三个区域， 热区开始下移，但仍然主要在 不同用户行为逐渐分流，一部
图片、价格、卖家信用，是用 首屏。图片、价格、评价，是 分用户专注于评价浏览及详情
户进入到detail后第一个10秒 用户进入到detail后第一个10 内容；另一部分用户使用搜索
最关注的内容。 秒最关注的内容。 框进行同款搜索。
- 15. 标类 detail眼动 Android客户端设计研究报告
标类 •有效样本数：14
用户进入detail的 用户进入detail的 用户进入detail的
第一个10秒 第二个10秒 第三个10秒
热区主要集中在首屏，价格、 热区从首屏消失，用户进入第 更多用户开始关注评价详情。
卖家信用，是用户进入到 二屏浏览商品详情。首屏中，
detail后第一个10秒最关注的 评价详情和成交记录是用户较
内容。 关注的两个区域。
- 16. Detail 各元素眼动 Android客户端设计研究报告
非标类
非标类 界面元素 注视人数 界面元素 首次注视时间 结论：
•有效样本数：15 图片 15人 图片 0.7s 1. 对比标类与非标
• 时间：30s
价格和运费 13人 卖家信息 4.8s 类的各元素注视
评价 12人 价格和运费 5.6s 人数排行，销量
卖家信息 9人 评价 9.5s 在标类商品的
销量 7人 销量 10s detail更受用户关
收藏人气 7人 收藏人气 15.3s 注。
所在地 2人 所在地 16.9s
分享人气 2人 分享人气 20.0s 2. 各元素在两类商
消保 1人 消保 23.1s 品的首次注视时
间排序差异不大；
标类 界面元素 注视人数 界面元素 首次注视时间 detail在10秒内
标类
•有效样本数：14 图片 14人 图片 0.3s 关注到的核心重
•时间：30s 要信息为——图
评价 14人 价格和运费 2.9s
销量 卖家信息 6.7s
片、卖家信息、
13人
价格和运费。
价格和运费 12人 评价 8.2s
卖家信息 9人 销量 10.6s
收藏人气 1人 收藏人气 11.0s
所在地 0人 所在地
分享人气 0人 分享人气
消保 0人 消保
- 17. 卖家信息详情眼动 Android客户端设计研究报告
结论：
1. 无论是标类还是非标
类的卖家信息中，信
用是用户最关注的视
觉中心。
2. 店铺动态评分的眼动
数据显示，“行业高低
比较”比“评分”更多得
到用户关注。
3. 安卓客户端中仅显示
评分，是否也考虑加
入行业比较信息？
- 19. 附录：
以上报告中涉及的——
眼动专业名词和术语
- 21. 附录：
稍后报告中涉及的—— << 返回浏览报告
眼动专业名词和术语 继续了解眼动>>
• 注视。（看到并被认知到）
• 扫视。（视而不见，视线划过）
注视
扫视
- 22. 附录：
稍后报告中涉及的—— << 返回浏览报告
眼动专业名词和术语 继续了解眼动>>
• 注视人数（占比）。
• 平均注视时长。（参与测试的用户注视某区域的平均时间。）
• 首次注视时间。（参与测试的用户在打开页面后第几秒开始注视某区域的平
均时间。）
- 23. 附录：
眼动数据解读注意事项 << 返回浏览报告
• 眼动测试是任务主导的测试
• 特定任务只能检验特定问题
随意浏览任务 找婚庆任务
不同的任务情景，眼动数据差异会很大。
故眼动图不是万能钥匙，不可以回答检验范围之外的问题。
