热门标签 | HotTags
当前位置:  开发笔记 > 开放平台 > 正文

网站交互设计:优化List式信息结构——眼动研究

List式信息结构是在网页中常用的,一种类似于表单的自上而下的信息分布方式。例如Facebook中和其他社交网站中常用的信息流,很多电商网站中常用的产品列表,这些都属于List式信息结...SyntaxHighlighter.all();

  List式信息结构是在网页中常用的,一种类似于表单的自上而下的信息分布方式。例如Facebook中和其他社交网站中常用的信息流,很多电商网站中常用的产品列表,这些都属于List式信息结构。

  关于List式结构的研究有很多,它的优点在于其符合目前人类自然阅读的两条基本规律 — 自上而下,从左往右。但是经过近些年的眼动研究,其缺点也越来越多的被发现,即注意力分布不均匀,处于较顶端的元素获得了90%的关注度,而中间部分的元素则很难被注意到,具体详细信息请参看这篇blog。

  香港浸会大学的Li Chen教授在去年发表了一篇论文,对三种List式信息结构进行了眼动研究。如下图

  

\

 

  如上图,除了在普通list式结构(a)的基础上,Li Chen 同时测试了令两种经过了优化的结构(b,c),即将原有的列表分离成若干小部分,并给它们加上小标题。热点图,和浏览顺序图如下:

  

\

 

  

\

 

  从上图可以看出,在后两种list结构中,用户注意力的分布会更加平均些,而不像第一种list结构,中部很少被注意到。而实验也证明,用户在后两种list结构中的购买率也更高一些。细看的话可以发现,在后两种结构中,起关键作用的是各个“小标题”,它将用户散落在各处的注意力串联在一起,让整个页面成为一个整体。这个概念对于更合理的list结构信息流的设计也许会有些启发意义。

  来源:http://nickinteractiondesign.com


推荐阅读
author-avatar
liyanyl_499
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有