很多人都会和我说,网站中的滚动切换设计一般都是弊多利少,尽量不要使用。但是,本文会告诉你并非所有情况都是如此。
我写这篇文章就是希望我们能够更多理解网站中的滚动切换设计,不要听信传闻。我将用我们的调查数据来阐述我们的发现,介绍我们用以调研的方法,同时,对如何正确使用图文滚动切换提出一些建议。
可以说,有很多人都对滚动切换的坏名声做出了贡献。例如,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”。