焦点图向左走还是向右走

之前同事在做一个网站(地域性门户网站)首页的改版工作,把方案拿出来和我们一起讨论。注意到同事把焦点图放在首屏的右边,而左边是一个资讯文字列表,如下图所示:


图1

从上图几乎看不出有任何不妥,而观点不同就在焦点图的位置。

我的观点:首屏焦点图更适合将焦点图放在左侧,资讯列表放在右侧。不然用户眼睛会跳过文字,直接浏览跑马灯的焦点图,看完焦点图后,左侧的文字列表阅读率可能会降低。

同事观点:根据F型浏览习惯认为,左侧新闻列表是在用户视觉起点位置,会先注意到并且阅读;就算用户跳过新闻列表,先浏览焦点图,也会在看完焦点图后,返回阅读新闻列表;对前面的新闻阅读率影响不大。

近日想起此事,在网上查找了一些资料,从以下几个方面进行探讨,不是为了求证谁对谁错,而是为了更好的了解用户浏览行为。

一、F形浏览习惯的背后

二、焦点图该在左还是在右

三、门户新闻网站的图文布局

四、更多思考


一、F形浏览习惯的背后

2006年4月美国著名网站设计师杰柯柏·尼尔森(JakobNielsen)发表的一项《眼球轨迹的研究》报告。

报告称,大多数情况下浏览者都不由自主的以“F”形状的模式阅读网页,这种基本恒定的阅读习惯决定了网页呈现F形的关注热度。如图2:


图2

不过大家要注意到,这份研究报告是在2006年4月发表的,并且尼尔森在当时仅仅是对三个页面进行研究:

①一般文字说明性网页,

②电商商品详情网页,

③google搜索list页;

这三个页面内容布局相对简单,用户更容易以“从左至右,从上至下”的习惯去浏览,粗放的总结,确实可以看出“F”形。

在这个理论发表至今过去近10年的时间里,WEB页面的内容有了更多的变化,多样的页面布局,不同的用户需求,会出现更多的眼球滚动轨迹图案。例如:在你浏览类似“花瓣网”这种等宽瀑布流网页时,浏览轨迹已然成了波浪形,甚至是发散形,如图3:

图3

阿里产品经理Heidi在2009年就做出了对F形浏览习惯的质疑(强烈建议移步——搜索结果页(SERP)之三:不要被F型浏览忽悠了)。

小结:F形浏览习惯并不适应所有网页,它是对用户“从左至右,从上至下”浏览基本习惯的理论升华,F形浏览习惯会随着网页内容布局的不同,形成其他更多形状的眼动轨迹,不能作为用户浏览习惯的全部指导思想。


二、焦点图到底是该在左还是在右

我假设了一个场景,你们感受下:


图4

如上图4,是一个画展展厅简易俯视图,前提是厅内有指示进门右转沿着逆时针参观。不过在门口即可看到中间的一副面积远大于旁边画的展品。当展厅中间没有阻挡时,你基本会直奔中间的大画欣赏,当你欣赏结束大画后,你下一步怎么走?

①重新回到起点,继续沿着路线看没看完的作品。

②看完大画之后,沿着路线逆时针看后面的作品。

③不规则随机看看。

不管哪一种选择,均打破了原有的规则,行动上给人或多或少别扭的感觉。

回到焦点图,基本上很多用户第一眼是看到焦点图,那么问题来了,看完焦点图接着是往下看,还是不想错过前面内容(今日头条),将视线移回到前面的新闻列表呢。视线“反方向”移回新闻列表是不是感觉有稍许别扭。

就算我努力的先浏览前面的新闻列表(没有看到焦点图的具体内容),在浏览过程中,非常容易被右侧的焦点图干扰。在阅读新闻列表时,右侧的焦点图就成为了视觉噪音

我把焦点图简单PS了一下放在左边,看图5


图5

在先看完焦点图后,是不是“更愿意、更自然”浏览到后面的新闻列表。焦点图在网页左边显得更合适。当然电商网站的焦点图一般是在中间,最左边的是导航列表。那是因为导航在电商网站中几乎是最重要的地位,更多用户购物把导航作为浏览的第一步。

因此,一般性的资讯首页,焦点图更适合在放在左侧。

 

三、门户新闻网站的图文布局

我去统计了一下国内几个大门户网站新闻资讯页焦点图的布局。情况如下:


腾讯新闻在去年8月份做了改版,在探索用户碎片化时间浏览新闻的高效性、便捷性和个性化,这里不做讨论。网易、百度、凤凰都将焦点图放在了右侧,把一屏左侧的新闻的文字做了加粗处理,但是在浏览左侧新闻时,还是会受到焦点图的视觉影响。在二屏位置,这三家新闻频道都做了同样的处理,左侧大片新闻延伸下去,中间是图片,如下图6:


图6

那么往下浏览左侧新闻的时候,一是会淹没在众多文字新闻中,产生视觉疲劳,二是在浏览时容易受到中间图片的干扰。

我把百度新闻的左右内容做个调换,看图7


图7

个人阅读体验:我把图7以100%放大浏览,会更加舒适。同一水平线内,看完左边的图,再看右边的新闻列表更加舒适,视觉中会感觉左边的内容已经浏览结束,降低视觉干扰。在这种两栏/三栏的排列方式下,是多年看网页新闻留下的习惯,如果换汤不换药,去改变左右浏览习惯,会觉得很不适应。就类似于,大段落的阅读性文章一般用14px字号宋体,部分网站将沿用多年的宋体(14px边缘锐利清晰)改为微软雅黑(14px较扁且边缘模糊),降低了阅读的舒适度,招致网友吐槽。改变用户习惯是个有高风险的行为。

腾讯新闻在去年的改版是一个值得思考的方向(参考:腾讯新闻改版:门户网站的回归式颠覆


四、更多思考:

因为自己就职一家垂直媒体,借此初探门户的新闻频道布局,为以后自己网站频道的优化做一些铺垫。思考:

1、传统新闻标题堆砌是否已经不适合当前时间碎片化的用户习惯,如何优化“传统”布局

2、瀑布流形式的新闻加载是否可以增加连续性,从而获得更好的体验

3、如何帮助用户过滤他们没兴趣的内容,而不是对用户狂轰乱炸

其他参考阅读:

格式塔心理学5项法则的学习与思考

评论
热度 ( 10 )
  1. 翘楚ZIKO 转载了此文字
  2. 齐即ZIKO 转载了此文字