今天分享的这篇文章,则告诉你京东设计中心,如何将眼动研究应用到实际设计中,设计更好的网页,让你更愉快地买买买。
随着「双十一」的结束,一场全民网购狂欢落下帷幕。当往日的「血拼」战场搬到网页,曾经的逛街路线成为今天的页面浏览轨迹;穿衣镜前的目光如炬变为屏幕前注视时长……网页设计师们这时已经忙的不亦乐乎了,因为页面的排版布局、信息的陈列描述等无不影响用户在虚拟世界的「血拼」体验。
「消费者关注什么?他们是如何浏览页面的?」
「促销信息放在左侧还是顶部?」
「商品一行放 3 个还是 5 个?」
为了解答这些问题,我们在 2014 年初开展了一次针对导购网站的研究。通过眼动测试及深度访谈等方法,了解用户在不同导购页面的浏览行为及重点关注内容,旨在为导购类页面的设计带来启发。
既然研究的是「导购网站」,那么首先让我们首先明确以下几个问题 :
1. 什么是导购类网站?
导购类网站是提取电商中优质商品或品牌,推荐给用户,以减少用户时间的网站。
2. 导购类网站布局都有哪些?
通过对几大电商导购页面的布局分析,抽象出以下几种常见的页面布局形式 :
3. 导购网站的内容主要有哪些?
根据内容的不同,可将其主要分为品牌导购(如,京东青春)、单品导购(如,易讯早市)、 团购导购(如,美团)、社区导购(如,美丽说)1。
好啦,一切就绪,让我们来看下研究全过程吧!
本次共招募了 30 位喜欢「逛」各类导购网站的用户(男:女=7:23),与视觉和交互设计师共同商讨选取了 21 个较有代表性的导购网页。为排除内容的影响,眼动实验采用静态网页 2,非真实网站。
同时将实验素材设置了组内随机和组间随机,以此来避开页面浏览顺序对用户造成的影响。即将实验素材按页面内容分为3类(品牌测试页、单品测试页、主题测试页3 ),每类页面均采用随机播放的形式,且每组用户 间看到的页面内容顺序也有所差异。
眼动结束后采用了 PEEP 法(Post Experience Eyetracked Protocol)让用户回溯。最终结合眼动结果和访谈内容我们得到了以下发现。
同时根据用户的行为习惯特征,做了关于逛导购页面用户的人物画像分析,这部分内容就先在这里卖个关子,留着下期与大家共同分享。
导购类网站内容还有:比价导购、打折促销导购和返利导购等等。但由于这类网站均以文字为主,因此不在本次眼动研究范围内。
静态网页像素与屏幕分辨率的宽度保持一致,尽量还原用户浏览情境。
「主题测试页」包含团购导购页面。
通过眼动实验,我们在「页面布局」与「信息元素的关注度」两个维度上发现:
不同的页面布局下由于用户视线轨迹的差异,因此适合承载的导购页面有所不同。
不同类型的导购页面中,用户对图片、文字、品牌等信息元素的关注度有所差异。
下面,我们将详细分享这次的调研发现。
通过研究上文介绍过的 3 种页面布局(网格式、一栏式、瀑布流式)的典型用户视线轨迹,我们发现这些页面从布局上能够引导用户形成特定模式的视线轨迹,而不同的视线轨迹将影响用户对于页面信息的认知效率及加工深度。
因此可以通过合理利用这些各具特色的页面布局,来提升导购页面的转化率。
从下面的视线轨迹图上,可以看出网格式页面布局中,用户的视线轨迹以 Z 型和弓形为主。这样的视线轨迹 阅读效率高 ,且不容易因为错行而漏读信息。
因此,网格式的页面设计可展示较多信息,更有利于用户的信息检索。但它的缺点是图片 、文字偏小,用户对信息的认知负担较大 。
一栏式布局下,用户视线轨迹以 Z 型和 F 型为主。Z 型轨迹 阅读效率高 ,F 型阅读轨迹说明用户阅读过程中自主性较强,此时信息处理能力较强 。
因此,一栏式页面布局适用于 需要强化用户认知的页面中(如通过对页面的的浏览,建立对品牌形象的认知)。
但一栏式布局存在的问题则是展示信息量偏少,在导购页面信息较多的情况下,容易造成因页面过长而导致的页面流失率高的问题。
瀑布流式布局下,用户的视线轨迹以 S 型为主,这样的轨迹阅读流畅,但由于用户采用「就近原则」 阅读信息,容易产生漏读现象 。
因此,瀑布流式的页面布局适于应用在社区类浏览型页面中,这样的页面往往信息量大,采用瀑布流式布局浏览体验更为流畅。但缺点则是信息不能完全被关注,容易漏读信息。
编辑:未知
卡戴珊诞下女婴TT深陷出轨丑闻守护身边 网友:感谢你离开哈登
科勒卡戴珊当妈妈啦。 两位知情人士告诉CNN,卡戴珊已经生下一个女孩。 卡戴珊的男友以及女婴的父亲是克里夫兰骑士球员特里斯坦