欢迎来到合肥浪讯网络科技有限公司官网
  咨询服务热线:400-099-8848

解剖互联网大脑,互联网神经生理学

发布时间:2015-09-02 文章来源:  浏览次数:4774

良多人都会和我说,网站中的动弹切换设计一般都是弊多利少,尽量不要使用。但是,本文会告诉你并非所有情况都是如斯。


我写这篇文章就是但愿我们能够更多理解网站中的动弹切换设计,不要听信传说传闻。我将用我们的调查数据来阐述我们的发现,先容我们用以调研的方法,同时,对如何准确使用图文动弹切换提出一些建议。


电商网站设计 电商网站优化 视觉动弹设计


可以说,有良多人都对动弹切换的坏名声做出了贡献。例如,Nielsen Norman团队(由Jakob Nielsen, Donald Norman 和 Bruce Tognazzini于1998年景立的一家电脑用户界面和用户体验的咨询公司)曾发表过关于动弹切换会妨碍用户捕获页面上枢纽信息的文章。此外,最主要的言论来自于Erik Runyon(圣母大学The University of Notre Dame的技术总监和开发职员)的一篇关于学院网站中图片动弹切换应用的分析文章。在Jared Smith 制作的一个“Should I Use A Carousel?”网站上,他也坚定地称,不要使用动弹切换。随后,网页设计师Brad Frost在他的“Carousels”文章中也表达了对动弹切换的负面情感。最后,国际公认的数码产品的领导者Luke Wroblewski(曾设计的软件在国内外有十亿用户的影响力)也说现在基本已有的数据足以说服让大家不要再用动弹切换(下文中会提及Luke的一些言论观点)。


在Mobify(一个匡助企业优化他们在智能手机以及平板电脑间的网页转换的移动电子商务平台),我们为移动设备开发了大规模的电商网页。在这些电商网页上,大多至少都有一个动弹切换的应用。如斯看来,我们做错了吗?我们在给用户帮倒忙吗?假如我们休止使用动弹切换,我们的网页可以更好吗?我和我的合作编纂Peter Maclachlan在浏览我们开发的网站时一直在探讨这些题目。于是,我们想与其一直在别人的研究结论中迷茫,不如开始我们自己的研究。


因此,我们开始分析我们所能获得的数据。刚开始,我们只是很好奇我们的数据能够反映什么?然而,从这些数据中不断获得的小惊喜足以鼓动我们继承深究下去。我们用了11个月的时间检测了许很多多中到大型的电商网页。在这里我说的中到大型是指每年至少有2千万美金(约1.26亿RMB)的电商销量的网页。这期间,大约750万个动弹切换的交互行为被我们进行采样,基于这些数据,以下是我们的研究成果。


我们为什么要用”动弹切换”?


电商网站设计 电商网站优化 视觉动弹设计


我们研究中所测的一个动弹切换的案例


动弹切换不仅是一种将产品信息呈现在主页上的方法,更是一种在移动设备上用以平衡信息密度的工具。在移动设备上,有限的小屏幕需要得到最大化的利用,我们要尽量确保总能最佳使用页面的空间,因此通过动弹切换,就可以使信息的密度最大化,也使用户不用通过进一步向下滑屏来获得信息。


电商网站设计 电商网站优化 视觉动弹设计


我们研究中所测的另一种动弹切换案例


此外,对于动弹切换来说,动弹切换间的上下关系是相互呼应并且完整的。我们的设计团队会尽量避免提供前后关系不呼应的动弹切换给用户。多数情况下,我们只在网页中的一个地方使用动弹切换,即:在呈现产品细节图集的时候。此时,用户知道可以通过滑动动弹切换来获得产品更多的图片信息。而在主页上的商用动弹切换中,用户往往会对下一张会呈现什么内容以及他们为什么要关注这些内容全无所闻。


“动弹切换”的反对声


目前关于动弹切换应用的批评主要在以下四点:


1.用户无法用动弹切换进行交互。


2.假如用户用动弹切换进行交互,那他们的交互行为也仅仅局限于第一张图文。


3.动弹切换这种方法是不可取的 。


4.用户不喜欢动弹切换中元素的自动更替。


我们将通过对比Erik Runyon的数据以及我们所找到的数据来解说前两个题目,后两个题目由于比较偏向动弹切换的性质意义,因此我将单独来分析。


假设1:用户无法用动弹切换进行交互。


论点:


现在的论据主要以Erik Runyon为圣母大学网站作调研时所提供的数据为中央。这些数据表明,只有1.07%的网站来访者会点击特定的贸易广告动弹切换。此处,浏览图文不能算是一种交互,只有当用户点击了图文才能算。


于是,为了辩驳这一假设,我们的数据必需显示出用户与动弹切换的交互率高于1.07%。


我们的结论:


在产品图片集的动弹切换中,高达72%的用户会至少一次切到下一张滚屏,又有23%的用户会通过缩放行为(zooming)来与网站中的滚屏切换进行直接交互。


假如你仔细研究一下我们交互数据的缩放行为(zooming),你可以发现有23%的用户会直接点击进去获取更多信息。假如把范围扩大,即以任何方式切换到下一张滚屏都算做一种交互行为,那么有72%的用户会这么做。


注释:


假如想知道我们获得这些结论的方法,请阅读下文中的“Findings”。


假设2:假如用户用动弹切换进行交互,那他们的交互行为也仅仅局限于第一张滚屏。


论点:


在上文中所提及的Erik所说的 1.07%会点击动弹切换图文的用户中,有89.1%会点击第一张图文。假如我们假设图文动弹切换是可以进行有效交互的,那么跟着我们添加更多图文页,数据会呈现出一个公道的下降趋势。Erik的数据表明位于第二张的图文只有3.1%的点击率,泛起了大幅衰减。更精准地说,在访问圣母大学网站的3755297位用户中,只有1234的来访者点击了第二张图文页。而第二张开始后的图文页访问量的衰减的趋势是我们预期的。


于是,假如我们要辩驳这个假设,数据必需显示出用户在访问第二张图文页时的比例需大于3.1%。


我们的结论:


我们发现用户与动弹切换的产品图集中的第二张图文的直接交互率是15.7%,其中至少有64%的用户会进一步从第二张切到第三张。


下图中的数据显示出用户切换各张动弹的图文页的访问比例大致呈现出一种线性的规律。当然,不同控制方式的设计会得出不同交互可能性的结果。但都体现出用户对于下一张图文有很高的介入度,至少64%的用户在与第一张图文交互后会继承与第二张交互。


电商网站设计 电商网站优化 视觉动弹设计


圣母大学的数据很显著是依照用户点击图文来丈量交互率的。为了使得数据之间进行有效的对比,在我们的研究中,这是一种直接交互中的缩放行为交互(zooming)。我们的数据显示,23%的用户会进行缩放交互,这其中,54.1%的用户会缩放第一张图文,而会于第二张图文交互的比例达到了15.7%。(如下图所示)


电商网站设计 电商网站优化 视觉动弹设计


我们的数据图看起来和Erik的很相似,即绝大多数用户的直接交互行会发生在第一张图文。但是,在之后交互比例的递减趋势中,我们的调研数据会看起来比圣母大学的数据更公道一点。由于在我们的数据中,泛起在第一张图文以后的直接交互比例总和是45.9%,这就意味着近一半的直接交互会泛起在首张图文之后。


注释:


假如想知道我们获得这些结论的方法,请阅读下文中的“Findings”。


假设3:动弹切换方法是不可取的。


这里的观点不是说要抵制使用各种图文动弹切换,而是要辩驳现如今已被使用的图片动弹切换。实在让图片动弹切换做到易被获取不是不可能的,但是现在还很少。确实,我们自己在设计图片动弹切换时并不会太多考虑其易访问性。


我以为这不是图文动弹切换自身的错,但是当你在决定是否要用动弹切换的时候,应该考虑他的易访问性。因此,使动弹切换的插件可以易被他人所获取将是我们下一个版本开发的重要特性。由于这点和动弹切换的有效性无关,在此我们将不会过多谈论。


正如他们说的,图文动弹切换缺乏易访问性,但是没有理由说在未来无法做到。


假设4:用户不喜欢动弹切换中元素的自动更替。


这里的论据是,假如动弹切换应用中设置了自动更替,那么想要点击图文的用户就会被页面的自动切换所干扰。我很赞同这一观点,假如要使用动弹切换,那一定要避免自动切换更替图文。


假如你一定要使用自动更替的动弹切换,那么当用户开始与图文有交互动作时就应该把它封闭,这样最少比让用户点错图文要好一点。详细如何做呢?例如,当鼠标划过电脑屏幕上的动弹切换时,休止其自动更替,或者当用户在手机上有一个触屏动作时,休止其自动更替。


总之,不提倡自动更替的动弹切换,假如你要做动弹切换,那就不要让它自动更替。


发现(Findings)


注:接下来这部门主要概括了我们如何进行调研和使用数据的。假如您觉得很有爱好的话可以阅读一下,您也可以跳过这部门到下一个章节。


调研方法和内容


我们所使用的数据来自于超过11个月时间的对一些中到大型电商网站的研究调查。这期间,我们采集了大约750万个动弹切换的用户交互行为。基于隐私权政策,我们保证其中不会有用户的可识别信息。


为了使数据能够应用于以上的几点假设,我们主要考虑了数据的以下两方面:


1.用户与动弹切换交互的频率


2.用户与第一张以后的图文交互的频率


定义交互


实验过程中,我们定义了以下四种用户与图文动弹切换的交互行为。


1.轻刷(swipe):用户在手机屏上从左至右的滑动轻扫手势。


2.按键(arrow):用户通过点击按键进入(或返回)下一张(或上一张)图文。


3.轻击缩略图(thumbnails):用户轻击位于图文动弹切换底部的缩略图。


4.缩放(zoom):轻击当前图文至全屏浏览。


上文中也提过,要使我们的数据和圣母大学的有可比性,即:确保所研究的交互行为的一致性。我们将用到缩放(zoom),由于这在我们和圣母大学的研究中,用户都用到此方式来介入和动弹切换的互动。


另一个很重要的点就是我们只考虑用户有意的交互行为,无意偶然的误触和滑屏或者因其导致的图页切进不会触发交互。


研究结果


1.唯一交互率


这个数据是指手机用户多常会与动弹切换交互一次。“唯一交互”指的是用户第一次与图文动弹切换的任何交互行为。例如,假如一位用户轻击5个缩略图,我们也将只纪录一次交互行为,是用户独占的一次的交互体验。(下文中将会细分非唯一交互)


数据表明,大约72%的网站来访者会与动弹切换进行任何形式下交互,其中的领跑者是缩略图交互(thumbnails),即:55%的来访者会至少轻击一张缩略图。


? 唯一交互的比例


从我们的数据中可以得出,轻击缩略图(thumbnails)是用户最受欢迎的交互方式,他的几乎是其他项的两倍,并且要比轻刷(swipe)和按键(arrow)的总和还多。


电商网站设计 电商网站优化 视觉动弹设计


缩放(zoom)排在第二位,缩放(zoom)和轻刷(swipe)相对于其他方式来说具有最大的触发区域,也就是说,用户可以通过动弹切换图文中的任意区域来进行缩放(zoom)和轻刷(swipe)交互。因此,我们需要假定的是这其中的一些是用户无意识的误触行为。但即便如斯,缩放(zoom)仍是有高达23%的比率,以至于可以忽略其无意偶然性。


轻刷(swipe)是最不受欢迎的,这也是为什么要提倡为用户建立明确的可视化交互控制系统。


按键(arrow)和轻刷(swipe)交互都包括统一举动,即:把用户带入下一张图文页。假如我们并合他们的比例,会发现他们之和与缩略图(thumbnails)的比例相似。


电商网站设计 电商网站优化 视觉动弹设计


2.合计交互率


总体说来,均匀每次唯一交互中会泛起2.4个交互行为。这表明在72%会与动弹切换互动的来访者中,几乎都会与其进行大于一次的交互。


? 相同类型的交互方式的均匀交互次数(非唯一)


图中可以看出,缩略图(thumbnails)比例是最大的,当用户与动弹切换交互时均匀每次要点击6张缩略图。按键(arrow)和轻刷(swipe)的均匀次数相近,分别是3.9和3.5次。缩放(zoom)最小,用户只有当十分感爱好的时候才会缩放产品图片。


电商网站设计 电商网站优化 视觉动弹设计


通过缩略图(thumbnails)进行交互的用户的均匀交互次数最高,这说明相较于按键(arrow)和轻刷(swipe),用户在缩略图(thumbnails)具有较高级别的介入度。而对用户的介入度的探索可以引出一些有趣的微转换,例如“添加到购物车”的设计。


假如我们合并按键(arrow)和轻刷(swipe)的数值,与分析唯一交互时所用的方法相似,那么我们可以发现,这个代表“把用户带入下一张图文页”的交互方式会成为最受欢迎的那一个。


电商网站设计 电商网站优化 视觉动弹设计


3.交互递减率


从我们搜集的数据中,我们可以构造继第一次之后的交互概率模型。也就是图文切进,详细来说,就是指用户从第一张图文页切换到第二张图文页,再继承从第二张切到第三张。在直接交互中,这表示第一张图文页后继承轻击缩放之后的图页。


我们为每一种交互方式都构造了图文切进致使的交互衰变率模型:缩略图(thumbnails),按键(arrow),轻刷(swipe)以及缩放(zoom)。


? 缩略图(thumbnails)


在缩略图浏览中,大概有69%的用户会继承查看下一张缩略图,我们用下面的数据递减图可以更明确地表示出来。值得一提的是,即便用户可以以任何顺序来浏览,但大多数用户仍是会依次浏览动弹切换中的缩略图。


电商网站设计 电商网站优化 视觉动弹设计


? 按键(arrow)


我们从按键(arrow)的数据图中可以发现一个大致的线性递减关系,其中76%的用户会再次轻击按键来浏览到下一张图文页。


电商网站设计 电商网站优化 视觉动弹设计


? 轻刷(swipe)


轻刷交互的数据模型也是线性递减的,有64%的用户会再次轻刷。


电商网站设计 电商网站优化 视觉动弹设计


? 缩放(zoom)


缩放交互的递减模式是一个幂次定律,即:少数几个事件的发生频率占了整个发生频率的大部门, 而其余的大多数事件只占整个发生频率的一个小部门,假如r2将近0.98,则表示契合得很好。


电商网站设计 电商网站优化 视觉动弹设计


留意事项:


商用动弹切换 VS 图像动弹切换


在对比我们和Erik的圣母大学数据时会碰到一个题目,那就是我们所研究的动弹切换类型是不同的。但这个对我们的研究发现影响不大,尽管两种动弹切换的类型在视觉呈现上截然不同。我们的研究目标是为了判定是否用水平动弹切换多张图文页这种方式该被抵制,数据告诉我们谜底是否定的。而圣母大学所研究的根本题目看似并不是普通广义的动弹切换,更像在谈论设计。


通常在网站上的广告盲区处会设置商用动弹切换,而这些商用动弹切换无法提供相关网站信息给用户。贸易标语类的动弹切换很无效由良多原因造成,全部怪罪到用户界面(UI)模式是不公道的,我们确实也会在网站上使用商用动弹切换,因此,假如能够将我们和圣母大学在这方面的数据做对比,将会是一个很有趣的随访。


国际公认的数码产品的领导者Luke Wroblewski(曾设计的软件在国内外有十亿用户的影响力)在一个Google演讲中提供了来自亚马逊(Amazon)用户体验经理PJ McCormick的数据。PJ夸耀了亚马逊是如何使用贸易广告动弹切换的以及所得出的更多乐观数据。Luke表示,现有的商用动弹切换的一个很大的题目是对其控制方式的不显著,而亚马逊的动弹切换通常呈现在底部,通过提供一个外显的动弹切换控制回避了这一题目。


电商网站设计 电商网站优化 视觉动弹设计


亚马逊的营销动弹屏使用了清楚的控制模块来鼓励用户进行交互


移动设备交互 VS 电脑桌面交互


我们的动弹切换只是基于移动设备上的研究,然而圣母大学的数据来自于电脑桌面。在这里,有一种可能性是移动设备用户比电脑桌面用户与动弹切换的交互更多。由于轻刷或者控制起来比用鼠标更轻易也更天然一些。


动弹切换的成功尺度


我们对于衡量动弹切换是否成功方式与Erik的不同,Erik是通过用户点击到页面内容,而我们则是通过用户浏览下一张图文页并且查阅所有图片来衡量。


前一个的衡量级别更高一些,由于需要用户轻击并切换到新一张的页面,这也可能是为什么圣母大学的动弹切换的交互率会比我们的更低。


学院网站 VS 电子商务网站


另外一点在将我们与圣母大学作对比时所受到的限制是网站内容的不同。在电商网站,用户目标是发现可以做购买决定的产品信息,而院校网站则是更多与学校相关的信息。


未来的趋势:


这份调查研究也让我了解到仍有良多关于网站图文动弹切换的调研需要做,可以参考以下的步骤:


1.我们但愿类似的研究能够被应用在不同类型的网站动弹切换。


2.同样会很有趣的是研究如何通过与动弹切换交互来影响用户行为。例如,假如与一个产品的动弹图集交互,用户是否会更倾向“添加到购物篮”这个选项?


3.我还但愿能有更好的方法来丈量各种传播媒介对交互率的影响,如移动设备,平板电脑,电脑桌面等。


4.数据表明轻刷(swipe)是在动弹切换顶用户使用起码的交互方式之一。调研中发现,通过提供一个附加的控制设计,用户可以明确知晓该如何与动弹切换进行交互,那么他们就会更倾向于这种方式,这种交互方式可能对轻刷交互会有一定影响。那么值得继承研究的是,是否删除这种附加的控制方式就会使得轻刷(swipe)交互比例上升。


总结


我们以反省我们在Mobify网站上为什么以及如何使用我们建立的图文动弹切换开始说起。不同类型的图文动弹切换间有很大区别。我们发现可以通过提供上下文相关信息使动弹切换更惹人留意,而不是迫使用户去使用。


目前现有的数据中大部门是基于贸易广告网站的图文动弹切换。这些数据也支持关于用户与动弹切换的交互率很低——仅1.07%的论点。同时,数据也表明用户在与动弹切换交互时继承切进到下一张图文页的概率很低。数据还反映出一些公认的观点,即:动弹切换的不易获得性以及动弹切换中的自动更页是不提倡的。


我们与Erik Runyon对圣母大学的研究的共同之处很少。我们的研究发现与Erik Runyon对圣母大学的研究发现有很少的共同之处。用户与我们的动弹切换的交互率较高,此外,他们还以一个比圣母大学的研究数据高良多的比率与其他的页面交互。会泛起这些差异性的原因主要是我们各自研究的动弹切换类型和目标不同,详细说明就在我们所讨论的“留意事项”中,这也是本文的重点结论。


动弹切换有多种形态大小,一些有效一些则不是,我们需要基于更多不通情况下的数据。基于Erik的研究,其对于主页上的商用动弹切换的反对是公道的。假如用户不知道从页面上可以获悉什么,他们就不会想浏览,因此可以通过动弹切换来示意下一张图文页,从而使得其真正施展作用。


所以,你应该要用一个“动弹切换”吗?


首先,不要只是想添加内容而使用动弹切换,可认为动弹切换思索一个特别的使用场景,即:在一个特定的上下文环境中添加信息。另外,当网页空间受到限制的时候页可以使用动弹切换,如移动手机,使用时要留意动弹切换中的信息内容要与网页内容的相关。


当动弹切换中的内容不太有趣或没什么用时也不要使用。在动弹切换中,前一张图文页需要对后一张起到推波助澜的作用。想一想为什么用户要从一张图文切到另一张商用标语页?除非里面有他们需要的内容。因此,动弹切换的内容需要有吸引力才能使他们更有效。


假如你想让用户看到全部内容的时候就不要使用动弹切换啦!即便你的动弹切换很有效,但多数用户都不会每一页都看。通常第一张图文页会展示最重要的内容,依次的重要性递减。假如浏览动弹切换中的各张图文页对你来说是重要但不是必要的,建议可以用缩略图(thumbnails)的方式。


言而总之,这个题目的谜底不是独一的。对于一些情况,如贸易标语的动弹切换,谜底会是:不要用。而例如产品图集的动弹切换,谜底会是:绝对可以。无论怎样,对于“我可以用图文切换吗?”的最好回答老是:“假如对用户好,那就用吧!”

上一条:解读总理力挺互联网金融的...

下一条:网络文学频与游戏联姻 价...