美文网首页Ivan的用研笔记好设计今日看点
眼动研究---今日头条APP中图片在左侧与右侧的差异

眼动研究---今日头条APP中图片在左侧与右侧的差异

作者: IvanMu | 来源:发表于2017-03-10 09:36 被阅读702次

前言

最近在简书看到的文章“为什么说左图右文字比右图左文字要好”,文章中作者对改版后网站中‘图片放在标题右侧’提出了质疑。网上查到的观点中多是以Nielsen当初发现的F型阅读模式为指导,然后根据内容的重要性程度(左上到右下)来进行排列。因为后续作者也没有再更新改版的效果如何,就打算自己探索一下图片在左侧和右侧的区别。

本着“在毕业前再利用一下学校的眼动仪器”的想法,简单设计了一个的眼动实验。以今日头条的截图为材料,用Photoshop改变了图片和标题的位置(如图1左),然后收集了用户在阅读过程中在兴趣区(图1中红框)内的注视停留时间和首视点时间。

注:停留时间指的是用户在兴趣区内所产生的注视时长,即用户看了这里多久;首视点时间为从阅读开始到用户首次看到兴趣区中内容所花费的时间,即多久以后用户开始关注这里。这两个指标经常用于注意偏向的研究中来表达用户对内容的偏好/回避,在本实验中则用于对比图片位置对用户注意的影响。

图1. 部分实验材料,红框为兴趣区

实验结果

1. 热图

本次实验一共收集了10个同学的数据,都阅读图片在右侧和左侧的截图各一张。阅读顺序和内容进行了拉丁方平衡。图2为利用Data Viewer获得的注视热图。可以看出不管图片是在左侧还是右侧,都不是用户在阅读过程中的重点;甚至是对于标题,用户也更加注重其前部分。

图2. 用户在截图上的注视热区

2. 统计结果

图3中为用户在左右两侧图片上的停留时间,使用SPSS进行配对t检验的结果为:t=.358,,P=.729。即图片位置对用户在图片上的停留时间没有显著的影响。

对于首视点时间,有6名用户看到了放在左侧的图片,而只有4名用户注视了放在右侧的图片。对首视点时间进行配对t检验的结果为:t=.084,P=.941。即图片位置对用户在图片上的首视点时间没有显著的影响。

图3. 用户在左右两侧图片上的停留时间

总结

虽然整个实验非常简陋、样本量也少到没底气,但还是总结一下:实验的结果表明图片的位置问题根本不重要!就像简叔留下的评论一样“其实很多时候两种都可以,并没有太大的区别,有时候更取决于图片以外区域的设计,也就是网站整体的设计”。

另外PMCAFF中也有人细致地分析了图片分别放在左侧/右侧的优缺点,感兴趣的可以前往观看:为什么大部分新闻app都是图片放在右边

PS. 实在没办法做出干净的注视轨迹图,所以也就无从探讨用户到底是按照‘Z’型或是垂直型的阅读方式了...另外,我知道肯定有人感兴趣真实、联网环境下用户如何在新闻APP上进行阅读。因为设备的原因没办法完成这种实验,但感觉热点可能会集中在屏幕的某个位置。

再PS. 找材料的时候发现好像资讯类APP(头条,一点)的图片都在右边,而新闻类APP(网易、腾讯)的图片都放在左边,

相关文章

网友评论

  • 6231216318a0:这个首视时间和停留时间是用脚本跑出来的吗?
    6231216318a0:@IvanMu没别的意思哈,,,我只是好奇你们有新的方法:frowning:
    6231216318a0:也得需要aoi标记吧?
    IvanMu:不是 眼动仪可以直接导出的
  • 文砸:看你写了好多篇好努力!不过这个眼动实验的材料,图片和文字不一样,两个材料不一样的地方太多了,所以结论...
    IvanMu:@文砸 对任何一个做过科研实验的人来说这个实验都太简陋了... 不过材料这里其实是有作平衡的 每个被试都是看了两张图的 我只是把热图p在一起 免得要上传太多图...:joy:
  • 居客侠:一般网站会对列表数据进行埋点曝光,发送log到服务器,之后会针对log进行用户行为分析。这是大数据分析:smiley:
    话说如何追踪用户是Z型阅读还是垂直阅读,懂的人可以说说
    IvanMu:目前对阅读模式的判断一般都是基于眼动的热力图进行判断的 比如传播最广的F型阅读... 而且多是基于网页的...
  • 7bafd663b8d4:可以这么理解吗,首先,图片只是辅助,标题放左边,浏览时应该更顺畅,避免花里胡哨的干扰。但网易类新闻图片的质量很高,这样放左边更好
    IvanMu:@Jeedoo 嗯, 图片的质量 和文章的相关性 肯定都会影响到用户的注意。
  • 604e5aa195ae:图片在左侧,布局还能保持整洁,有一个前提,就是每个用户每次所发的文章都需附上图片,这样排版:图片、标题、用户头像能够划一,页面相对整洁;如果像简书这样,有的用户文章有图,有的无图,把有图文章的图片放右侧,则可以有效避免,头像、标题左右参差不齐的情形出现。
    IvanMu:@知一行难 学习了 :+1::v:
  • 妖精王国的猫小姐:都已经下本用眼动了,不如多找几个被试呀喂,看得好不过瘾[扶额]
    IvanMu:@妖精王国的猫小姐 没。 因为是自由浏览的任务, 因为设计的时候偷工减料也没做记忆测试...:joy::joy::joy:
    妖精王国的猫小姐:@IvanMu 有没有记录反应时之类的数据?
    IvanMu:我自己常驻学校的眼动实验室 所以其实没怎么下本...:joy::joy::joy:
  • 乔溪:请问测试的时候,用户是在手机上看,还是电脑上看材料
    乔溪: @IvanMu 同样好奇移动端的结果😺
    IvanMu:在电脑上 材料是用axure和ps合成的图片 学校的设备是桌面固定式的 其实也对正常的阅读环境下是怎样的结果更感兴趣些 但条件有限...:joy::joy::joy:
  • 王师伯:666666
  • 59b2c94d80f9:所以其实结论就是左右对用户都不影响,是否有更好的一种方式?
    IvanMu:从这次的数据来看是这样的 其实可能放在左右都有其优劣所在 具体还是要看产品的整体框架更适合怎么样的排版吧...
  • 就是小龙虾:@闫泽华
    闫泽华:眼动测试有偏,统计测试消偏。但是这篇文章真下本。
  • MJGA:6666666

本文标题:眼动研究---今日头条APP中图片在左侧与右侧的差异

本文链接:https://www.haomeiwen.com/subject/snmwgttx.html