分享
 
 
 

网页设计中水平方向视觉焦点分布探讨

王朝学院·作者佚名  2010-04-29
窄屏简体版  字體: |||超大  

用户对Web页面的垂直方向注意力分布相对比较简单:进入人们视野的前半部分信息比下面一部分被掩藏起来的信息更多。现在,我们来看看用户在Web页面的水平方向上的注意力分布情况。用我们以前收集的数据库,很容易发现用户在浏览网页时候,从左到右的注意力分配权重如下:

在这个图表中,每一个条文横坐标代表的是100像素,纵坐标的100%表示用户从最左侧开始浏览直到跳出浏览的时间。

人们花了两倍以上于右侧的时间花在左侧,他们做出了理所当然的选择:

左半边花了69%的时间;右半边花了30%的时间;

这剩下的1%的浏览时间花在最先前可浏览的1024像素里了,一些信息只能当水平滚动后才能看到,这个信息建议我们最好能固定水平栏,以避免水平滚动。

这里我们所说的信息在“下面栏”其实是在被遮蔽的右边超过屏幕的部分,而不是字面上的“下面”。从另外一方面看,如果比较水平和垂直的浏览,垂直方向用户大概会略过20%的信息,而水平方向他们仅仅会忽略大概1%的信息。(我想事实上多达二十次的说水平滚轮的糟糕,因为它真的会让用户烦恼,而且吸引的是更少的注意力。)

我们的研究使用了1,024 × 768的显示器。用更大的显示器,我们希望花更少的滚动看到更多的右侧内容,无论怎么样普通模式下面也是同样的情况。

最左侧的一部分通常包括一个导航栏,所以它在200像素后的关注增长也就不足为奇了,加上这最受关注的300-500像素。人们往往一开始就把注意力放在第一行的主要内容区域。

语言从左到右的阅读方向

我们在从由到左阅读习惯的地区进行的可用性研究发现,人们更加注重一行的开始部分。显然,在这些语言中,文本一开始便从右侧开始的。即使如此,我们不一定会找到对应的Eyetracking进行,比如说,阿拉伯语和希伯来语同样有以上图表身影。(大概意思就是说当一个国家或地区的阅读习惯是从右到左,那么他们的注意力时间分布图则会与上面的图形成镜像关系,即横坐标写的是从右往左。)

原因是从右到左阅读语言的网站不总是采用从左到右的布局设计。下面是来自迪拜报纸 Emarat Al Youm 和以色列报纸Haaretz网站的布局:

Emarat Al Youm是一个真正的右对齐网站。与此不同的是,Haaretz是一个文本右对齐的网站,但仍有一个左侧导航栏。所以,这个视线追踪(Eyetracking,我暂且这样翻译)研究相比于我们普通的英文网站可能更为复杂。

优先常规布局

返回到我们常规的从左到右阅读习惯的语言,比如说中文,英语,俄文,甚至是日语——我们的发现意味着什么?

简单的说,坚持传统的网站布局,因为它完美的符合人们浏览网页的习惯。

保持导航的一致在左侧,这是人们希望找到的一个清单;

更加注重主要内容的从左至右排列;

最重要的内容应该占到整个页面宽度的三分之一甚至是一半。这是用户最关注的地方;

保持次要内容在右侧。它不会被过多的关注的,不过已经够了——不是每一个内容都能获得头等位置,你需要一个位置放置并不那么重要的内容。

有趣的是,这个大图所显示的网站布局和主流的内联网布局极其相似。但是这只是一个网站。

占主导地位的浏览模式和网页布局显然演变成了一种从属关系:

人们被训练要注意某些地方是因为那里通常分布有最重要的信息;

就目前,公司创造网站的布局时,他们的信息是按照人们如何分配其整个页面的关注度来排布的。

如果与传统的布局向背的话,一些用户在浏览你的网站时候将改变关注的习惯。如果你放置重要的东西在右侧, 那么可能碰巧那些(更少)用户在那个区域相比于典型的用户域发现这种信息将花费更多的时间。

这并非是如果用户事先决定:“我将我从左到右看的时间只花2.5%,浏览1000和1100的像素这一段。”

无论如何,你偏离传统设计的代价是:当用户最初浏览你的网页,他们将花费大量时间寻找他们所需要的东西。

如果你的网页布局符合用户的浏览需求,而不是放在非传统的位置,传统布局他们可能不知不觉的轻松找到信息,完成他们想要的意愿。

而且,当你的网站让用户觉得理所当然的时候,你的业务也将会更顺利。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有