APP浏览体验设计的思考:如何理解用户的眼


  生活中很多人会调侃道:“每天手指在手机屏幕上滑动的距离比走路的距离还长!”随着指尖上的浏览融入到生活的方方面面,如何让用户手指滑动的更有效率,在滑动手指的同时看到更多想看的内容,而不白白滑动手指,是提升手机APP用户体验的重要方面。为深入理解人们的APP浏览行为,我们使用专门用于追踪移动设备注视行为的眼动仪对用户浏览社交APP的习惯进行了研究,试图更加直观地展示人们浏览APP的特点,以及由此引发的对于优化APP浏览体验设计的思考。

  手机与PC浏览,区别在哪里?

  我们曾先后针对QQ空间PC版和QQ空间手机版进行了眼动测试,让用户登录自己的QQ空间自由浏览好友动态,对比两次测试的结果(如下图),可以发现,相比于使用电脑浏览好友动态,用户在手机上浏览好友动态时手指滑动更频繁,经常是在滑动手指的同时浏览内容。在进行基于电脑网页的眼动数据分析时,我们主要关注用户的注视焦点和轨迹,但对于手机来说,只分析用户看了什么和不看什么是不够的,有必要兼顾眼睛注视和手指滑动,来分析用户的浏览特征,并评估用户的浏览效率。


  在对QQ空间手机版进行眼动测试的过程中,我们发现,有时用户明明对某一条动态感兴趣,却只是滑动屏幕而不看上面的内容,直到把内容调整到一定范围内的时候才开始看,这种情境显然降低了用户的浏览效率,增加了手指的滑动距离,却没有因此看到更多的内容(如下图)。在该研究中,我们将这种情景称为“低效滑动”。


  低效滑动的情景让我们不禁思考:既然用户不是自上而下将整个屏幕的内容浏览完之后才向上滑动屏幕,那么,用户的注视范围究竟有多大?如何基于注视范围来优化设计以减少用户的低效滑动?用户的注视范围能否改变?

  指尖上的注视范围有多大?

  以QQ空间手机版为例,我们使用Tobii X120眼动仪对24名用户进行了眼动测试,让用户使用手机登录自己的QQ空间自由浏览好友动态,结果表明,注视范围的长度占手机屏幕长度(不含顶bar和底bar)的比例约为75.0%(如下图)。


  说明:

  1、每张图均由参加相应终端测试的6名用户的注视热点图叠加而成,独立版是指QQ空间的客户端,结合版是指从QQ上的入口进入看到的QQ空间;

  2、在热点图中,颜色越深,代表关注度越高。对于叠加而成的热点图,屏幕背景只是为了示意屏幕的大小,热点覆盖的区域代表注视的范围,不代表实际看到的内容;

  3、标注的红框是为了凸显注视范围的边界。

  有限的注视范围与图文并茂的APP设计

  在浏览一条感兴趣的动态的过程中,当用户想看的内容没出现/没完全出现在注视范围内时,会通过用手指滑动屏幕来调整这些内容的位置,定位好之后才开始浏览。因此,把用户想看的内容显示在其注视范围内,可以减少低效滑动的发生。

  图文并茂是社交APP内容的主要呈现形式,其中,图片占据了屏幕的较大面积,且扮演着重要的角色,无论是好友类动态中的生活见闻照片,还是让资讯类动态更加生动直观的图片,都是用户用来判断对动态是否感兴趣的关键要素,也是浏览感兴趣的动态时重点浏览的内容。由于用户的注视范围有限,在对动态中文字和图片的高度进行设计时,应注意哪些问题呢? 互联网的一些事

  第一,图片为竖图时高度控制在注视范围内。在单条动态中,横图的高度通常不会超过注视范围,用户不需产生低效滑动就可以完整浏览文字和图片。但对于竖图,则高度不宜过长,应控制在注视范围内。当图片没有完全展示在注视范围内时,用户看完文字就会上滑屏幕,其间不会注视图片内容,将图片定位好后,通常是把图片的顶部与屏幕最上方对齐,才开始浏览图片,这不仅给用户浏览图片带来了麻烦,而且当用户想再次看文字的时候,还要再次下滑屏幕才能看到文字。


  第二,文字较长时展开部分文字,将文字和图片的总高度控制在注视范围内。对于文字较长的图文并茂动态,用户在手机上通常通过标题、图片来快速判断自己对动态是否感兴趣,而对大段文字摘要的关注度较低。有时用户没有被标题吸引,滑动屏幕直接略过文字摘要,当该条动态中的图片出现在屏幕上后被图片吸引,然后点击详情页阅读全文。因此,将较长的文字部分收起,把文字和图片的高度控制在注视范围内,可减少用户略过文字时产生的低效滑动。


  思考:用户的注视范围是否可以改变?

  通过上文分析用户浏览社交APP内容时的特点可知,用户的注视范围与图文并茂类动态的设计有着密不可分的关系。那么,对于不同的社交APP,用户的注视范围是固定的吗?

  在对QQ空间手机版进行眼动测试的同时,我们也针对Facebook手机版用户进行了眼动测试,让6名用户自由浏览Facebook,得到用户使用Facebook时的注视范围(如下图)。 yixieshi.com


  Facebook的注视范围的长度占手机屏幕长度(不含顶bar和底bar)的比例为87%,长于QQ空间手机版注视范围的长度。为了更好地分析注视范围的形成,我们也对用户浏览单条动态时的注视情况进行了研究。Facebook的动态是卡片式设计,两条动态之间的间隔较为明显,用户在浏览一条动态时,通常将其滑到屏幕顶端后开始浏览,加之文字和图片的总高度在一屏之内,用户可以在一屏内看到图片的底边,这使得用户在浏览一条自己感兴趣的动态的过程中,可以直接在一屏内完整地浏览文字和图片,很少发生看完文字便开始滑动屏幕来调整图片位置的情况,因而使得注视范围的长度增加。

  由此,我们推断,在使用社交APP时,用户的注视范围并不是固定的,通过设计上的改变可以扩大用户的注视范围,这不仅可以更好地利用了屏幕的大小,也可以减少用户的低效滑动,提高浏览效率。当然,这只是对比QQ空间手机版和Facebook手机版得到的推论,注视范围受哪些设计元素的影响、设计上的改变对注视范围的具体影响机制如何都是值得进一步深入研究的问题。

  小结 :本文主要揭示了用户浏览社交APP的特点,并试图从浏览体验的视角为APP的设计带来一些启发。针对用户的注视范围和低效滑动问题,如何通过设计上的改变来扩大注视范围、减少低效滑动,是设计社交APP中动态的呈现方式时值得思考的问题。与此同时,对于其他类型的APP(如资讯类等),用户的注视范围具有什么特点?与社交APP注视范围的异同在哪里?是否可以通过对比不同类型APP的注视范围总结出一些完善 APP浏览体验设计的准则?对于这些问题,我们将会持续地开展相关研究去寻找答案。

时间: 2025-01-01 16:52:06

APP浏览体验设计的思考:如何理解用户的眼的相关文章

手机APP如何理解用户的眼

  手机与PC浏览,区别在哪里? 我们曾先后针对QQ空间PC版和QQ空间手机版进行了眼动测试,让用户登录自己的QQ空间自由浏览好友动态,对比两次测试的结果(如下图),可以发现,相比于使用电脑浏览好友动态,用户在手机上浏览好友动态时手指滑动更频繁,经常是在滑动手指的同时浏览内容. 在进行基于电脑网页的眼动数据分析时,我们主要关注用户的注视焦点和轨迹,但对于手机来说,只分析用户看了什么和不看什么是不够的,有必要兼顾眼睛注视和手指滑动,来分析用户的浏览特征,并评估用户的浏览效率. 在对QQ空间手机版进

大话传统企业网站用户体验设计 做细节就是做用户体验

中介交易 SEO诊断 淘宝客 云主机 技术大厅 说到网站用户体验,很多行内的兄弟们要说得可比接下来要写的话还多,用户体验直接影响了网站的营销效果,如从营销推广的五层数据(即浏览层.点击层.访问层.咨询层.转化层)来看,用户体验在其中间起着举足重轻的作用,哪一层用户感觉不爽了都可能跑掉.无论是传统的企业网站还是专业设计的营销型的网站,用户体验一样可轻易地适用于两者之上,优秀的用户体验设计往往在:视觉性.友好性.易用性.有用性(实用性)等方面体现,无论如何,只要用户浏览网站感觉好.舒适.习惯,那么这

用户体验设计涉及的几个用户研究设计讨论

导读:文章比较零碎,主要讨论的是用户研究与设计,短小精悍,但话题与观点比较有趣,可供大家一读. 如何偷数据?针对不同业务的产品,某些情况下可以利用固有特点从非正常渠道获取数据.补充个例子,要想获取某电子书店一天交易订单量?早晚各下一单,根据订单ID号可以判断出当天的订单量,如果把一天按小时拆分成N个时间点,再分别下单,则大致可以推算出当天每小时的订单量. 为什么严格执行用户研究流程却收效甚微?我不建议新产品设计一开始就做用户研究,其实在快速迭代的互联网产品设计流程中,也不太可能有太多时间去先研究

用户体验设计:培养一颗贴近用户的心

摘要: 对于设计师, -挖掘用户需求,具有什么样的价值? -挖掘用户需求,能做些什么事? -挖掘用户需求,保持怎样的心态? -挖掘用户需求,实践中可以怎样做? 俺的宗旨,尽量把自己的实践方法介绍给大家,重点在于HOW. 但俺根本的宗旨,不是教大家花很多时间去执行这些方法,而是培养一颗贴近用户的心. 0.BG 我们,或是莫名其妙的开工,根本不清楚自己接的什么产品:或是MRD\PRD一应俱全,却是依葫芦画瓢,只专注于界面的设计:又或者热情高涨,很有见解,却PK的不是那么有理有据.这就是我工作一年来的

用户体验设计:送别人礼物和用户体验的关系

一个朋友给她的朋友买礼物.撕心裂肺.绞尽脑汁.最后蹦出来一个主意:"送打火机"我不知道小妞们通过哪的投票,就这么断定男人都喜欢打火机.导致一些不抽烟的人,上三年学,能收两个打火机. "送别人礼物"和"用户体验"有一点是相通的,"送礼人"和"站长"首先要做的事情是忘掉自己的想法.不能因为自己所处的环境.所使用的分辨率都是1440*900,就想当然的认为自己的用户也使用这种分辨率.做网站还是要以数据说话,我们来

用户体验设计-关于使用微信注册用户的问题

问题描述 关于使用微信注册用户的问题 系统原来的注册方式是传统的用户名+密码的方式. 目前因为微信比较火,打算做一个使用微信Oauth获取用户OpenId后,自动帮用户注册的功能. 我的设想是在Account表中放三个字段UserName.PassWord.WeiXinOpenId. 现在的问题是通过UserName+Password注册的用户,我很可能不能在第一时间拿到用户的WeiXinOpenId,而使用WeiXinOpenId注册的用户,我无法在第一时间知道?UserName+Passwo

通过设计让学习变轻松 - Google 的 Primer 团队是如何做用户体验设计的

本文讲的是通过设计让学习变轻松 - Google 的 Primer 团队是如何做用户体验设计的, 学习一向是个苦差事,如何在设计上下功夫,让学习变得愉快呢? 说起来容易做起来难.直观上讲,人们通常不会全力以赴地学习新知识.调查显示,仅3%的美国成年人在他们的日常生活中会花费时间去学习.¹ 那么可想而知:尽管大量信息对我们来说触手可及,而所有的新技术都似乎在一夜之间涌出,97%的人丝毫不会为了提升自己而花时间寻求这些新知识. 这就是我们团队在Google打造 Primer,时面临的挑战,Prime

移动用户体验设计新要素

无论是在一系列草图间快速切换,还是屏幕与屏幕之间的切换,或者其它类似场景,想要在这些场景切换中加入动效进行完美过渡,并不是一件容易的事情.这是一门需要耐心的艺术,需要用眼睛仔细的观察 ,人和物体如何在时间和空间两个维度中运动与变化. 这种非常巧妙的动效和动画,正在慢慢成为一种新的.有意思的移动体验设计要素.并值得用户体验从业者去学习,最终学会如何有效率和优雅的使用在自己的设计中.好的动效和过场动画可以传达给用户更加清晰的当前所处场景和层级关系,甚至带给用户一种愉悦和有趣的感受.然而,过多的或者太

用户体验设计是情感设计 直接影响人的情绪

我们一直说用户体验,做产品没有一刻离的了这个概念.它是很基础的东西,但是现在,这个词被放大了,我们都在讲都想要用,可是这个理念仍旧关注力不足,所以今天来还是要讲点东西.做名词解释说明,太枯燥,所以我尝试换个角度来分享些内容. 用户体验是一种情感设计,就像电影.小说.戏剧和音乐一样,好的设计给人愉悦的情绪,糟糕的则有各种糟糕. 生活中的例子,各种情绪 1 身份证的设计没有考虑到用户在使用时需要复印的需求,个人信息和有效期在两面,复印时让人无奈 2 上次分享会,我们改进了签到流程,让与会者可以更方便