用户是如何浏览你的网站的(2)
作者:Kevin Zhong 来源:Tencent CDC Blog 发布时间:2010-05-03 14:26:00
Jakbo Nielsen的F形浏览热区
Jakbo Nielsen曾对232位用户浏览几千个页面的过程中的眼动情况进行追踪,发现用户在不同站点上的浏览行为有明显的一致性,将浏览热点可视化后呈现出类似F形的图案。这种浏览行为有三个特征:
1. 用户首先会在内容区的上部进行横向浏览。
2. 用户视线下移一段距离后在小范围内再次横向浏览。
3. 最后用户会在内容区的左侧做快速的纵向浏览。
PS.显然,用户的浏览行为并非精确的包含这个三个过程,有时候,在这三个过程之后,还会在底部有横向浏览的热点,使得整个浏览热区图看上去更像E而不是F。也有时候,用户浏览时只反应了上述的行为1和行为3,使得浏览热区图像一个倒写的L。但从所有数据整体上来看,用户的屏幕浏览热区图还是较一致地反应出了F图像。
如何运用F形阅读行为进行设计:
1. 用户并不会浏览页面上的所有内容(F形之外的大片空白区)
2. 将最重要的信息放在头两段(F热区中的两个横向热区)
3. 在后续的内容中,将关键词和信息放在段首,使用户在左侧纵向浏览时能更容易关注到。
总结和启示
1. 用户习惯扫视,而不是阅读
2. 用户并不会关注到页面上的所有内容
3. 不要考验用户的耐心,不要增加用户的认知负担
4. 用户并不做最佳选择
5. 用户在屏幕上的浏览热区整体上符合“F形”
6. 针对F形浏览行为,将最重要的信息放在上部,将相关的关键内容和信息放在内容区左侧。
参考文献:
1. F-Shaped Pattern For Reading Web Content, by Jakbo Nielsen
2. Common Email Layouts: B2C Electronics Template, by Teresa Hernandez
3. But What Does It All Mean? Understanding Eye-Tracking Results, by Teresa Hernandez
猜你喜欢
- 方法一使用以下流式代码,无论下载文件的大小如何,Python 内存占用都不会增加:def download_file(url):
- php高并发之opcache今天工作的时候接触到客户的一台服务器,业务逻辑比较简单 。估算pv在120w左右吧,用的是阿里云2c4g的服务器
- 一、心知天气API密钥获取首先,访问https://www.seniverse.com,进行登录或者注册操作,然后在控制台上创建一个免费版的
- 一、Base64编码原理步骤1:将所有字符转化为ASCII码;步骤2:将ASCII码转化为8位二进制;步骤3:将二进制3个归成一组(不足3个
- 1、数据驱动介绍:@ddt.ddt(类装饰器,申明当前类使用ddt框架)@ddt.data(函数装饰器,用于给测试用例传递数据),支持传py
- 问题:这里只解决一个问题,到底什么是Access?设计一个数据库管理系统,用access在access里面设计好表,查询,然后再用vb做窗体
- 本文实例讲述了php设计模式之装饰模式。分享给大家供大家参考,具体如下:介绍装饰者模式(Decorator Pattern)允许你向一个现有
- 这里是两个用于数组中查找重复元素的demo,可以看看啦<!DOCTYPE html><html lang="en
- 1.0 新建项目1.1 初始化项目输入npm init,之后需要填什么就写什么新建src目录,并在src目录下新建alert.vue$ np
- 一、前期准备(windows7+mysql-8.0.18-winx64)1.下载地址:https://dev.mysql.com/downl
- USE NBDXMIS CREATE proc TestTimeAnySentence @sql_where varchar(8000) a
- 一.克隆表法一mysql> create table info1 like info;复制格式,通过LIKE方法,复制info表结构生
- 在 Pandas 中有很多种方法可以进行dataframe(数据框)的合并。本文将研究这些不同的方法,以及如何将它们执行速度的对比。合并DF
- 记得以前的Windows任务定时是可以正常使用的,今天试了下,发现不能正常使用了,任务计划总是挂起。接下来记录下Python爬虫定时任务的几
- 爬一个网页时,要保存的数据都没有encode,就导致保存下来的中文都变成unicode了。。。那么,怎么把一个表示字符串的unicode还原
- 准备工作查看肯德基官网的请求方法:post请求。X-Requested-With: XMLHttpRequest 判断得肯德基官网是ajax
- 本文实例为大家分享了Thinkphp微信公众号支付接口,供大家参考,具体内容如下第一步 先把文件夹的那两个图片 配置成一样的路径
- skimage包的exposure模块图像亮度与对比度的调整,是放在skimage包的exposure模块里面1、gamma调整对原图像的像
- 做项目的时候,一位同事导数据的时候,不小心把一个表中的数据全都搞重了,也就是说,这个表里所有的记录都有一条重复的。这个表的数据是千万级的,而
- 由于marquee标签现在用得是越来越少了,所以滚动效果的做法大多也都改用javascript来实现了,至于不明白为什么不直接用marque