移动电商网站中轮播组件用法研究

看到这个标题你内心里或许会充满疑惑，我在写这篇文章之前，也曾经有很多疑问。你去问任何一个人，他们都不会推荐使用轮播这种模式。但是轮播本身并不是那么一无是处。 本文将基于真实的数据，针对近期业界对轮播组件的各种争论做个回应，看看大家对它的评论是不是名副其实。我会针对各个观点进行剖析，看看我们的数据与预期是否一致。通过这些内容，我会详细阐述我们的研究发现和研究方法，并给大家一些建议，希望对大家未来在判断何时以及如何使用轮播组件有价值。

之前有很多人不看好轮播这种模式。从NNG的一篇文章开始；真正的转折点是Erik Runyon发表的关于圣母大学网站的一篇详细分析轮播模式的文章轮播组件用法详解；在Jared Smith的文章是否应该使用轮播中，他建议大家放弃使用轮播组件；Brad Frost也在他的文章轮播组件中呼应了这种对轮播的负面评价；紧接着Luke Wroblewski加入了反对派的阵营，他说从目前的数据来看，建议不要使用轮播，他的文章详情见 以后绝对不再使用轮播，（他后来又补充数据说对他的结论有怀疑）。

在Mobify（提供移动建站服务的网站），我们开发用于移动设备的大型电子商务网站。很多情况下，这些网站都有一个轮播组件。我们这样做错了吗？是不是伤害了我们的用户？如果我们停止使用轮播组件，我们的网站是否就会变得更好？这些问题是我和这篇文章的共同作者Peter Maclachlan在审查我们开发的网站时反复问自己的。我和Peter决定做我们自己的研究，而不是盲目追随网上这些反对轮播组件的声音。

自此，我们开始研究那些我们能获取的数据。刚开始，我们充满好奇，我们的数据说明了什么呢？我们的发现令人非常惊喜，并且鼓舞着我们不断深入研究。我们在为期11个月的时间里审查了几个中型到大型的网站。我说的中型到大型网站，是指在过去一年里交易额不少于两千万美金的网站。在这11个月的时间里，我们研究了近750万次轮播组件的交互事件。这篇文章的结论都是基于这些数据所做的分析。

我们为什么要使用轮播组件

轮播组件存在的意义绝对不仅仅是为了在首页显示更多的市场营销信息。因为我们是专注于做无线端设计的，我们最大的顾虑就是要确保在有限的屏幕尺寸和信息的密度之间做好平衡。这意味着，我们总是要在有限的面积里做好水平和垂直方向上的空间利用。我们使用轮播组件可以增强信息的密度，并且不需要用户在查看时滚动页面。

使用情景也是理解轮播组件的一部分。我们的设计团队只是在规避使用轮播组件，而没有向用户提供具体的使用情景。大部分情况下，我们只是在一中情境中使用轮播组件：在商品详情页中展示更多的图片。在商品详情页中，用户知道左右滑动一个轮播组件可以查看更多的商品图片。在一个网站首页的市场营销轮播组件中，用户是没有办法知道下一张图片是什么内容的，也不清楚这里面的信息是否需要去关注。

反对轮播组件的长春网站建设公司理由

目前反对使用轮播组件的理由主要有以下几个方面：

1、用户不会点击轮播组件中的内容；

2、如果用户要点击轮播组件中的内容，他们只会点第一个；

3、轮播组件不易理解；

4、自动轮播对用户不友好；

针对前两条，我们将用我们自己的数据和Erik Runyon文中的数据作比较。最后两点更多的是定性的结论，我会针对性的剖析。

猜想一、用户不会使用轮播组件

大家的争议

这个猜想基于Erik Runyon文章中展现的圣母大学网站数据。只有1.07%的访问者点击了网站的Banner轮播图。只是查看Banner无法作为交互行为被记录，只有产生点击行为的用户才算数。为了反驳这一猜想，需要有数据能够显示实际上发生交互行为的人数高于1.07%才行。

我们的结论

用户对产品图片轮播产生交互行为的比例：72%的用户至少切换轮播图一次；23%的用户会放大图片。如果你看我们的研究结果，具体的以放大操作为例，你会发现23%的用户直接进行图片的放大以获得更多的信息。如果你更关心哪些用户有切换轮播图的行为，数据显示高达72%的用户直接产生了操作行为。下文中将会展示我们的数据是如果获取的，请留意发现部分。

猜想二、用户只对第一张轮播图感兴趣

大家的争议

Erik提到的点击了轮播图的1.07%的用户中，有89.1%的人点击了第一张轮播图。并且，我们猜测如果这个轮播组件是有效的，那么随着轮播图数量的不断增加，点击分布将会有一个合理的下降趋势。Erik的数据显示，在第二个位置的轮播图只有整个点击数据的3.1%。更客观地来看，圣母大学网站中3,755,297位访客中只有1,234人点击了第二个位置上的轮播图。第二个位置之后的轮播图的点击数据也符合我们预期的落差。我们如果要反驳这个猜想，那么就要有数据显示，对第二个位置上的轮播图有交互行为的用户比例高于3.1%。

我们的结论 我们的数据显示，和第二个位置上的产品图片轮播有交互行为的用户占淮北网站建设公司比为15.7%。至少64%的用户从第二个位置的产品图切换到了第三个位置的产品图。用户切换轮播图有一个线性的变化规律。不同的轮播图切换方式会导致不同的数据结果。所有的数据都表明用户从当前的轮播图切换到其他轮播图的比例较高。和第一个位置上的轮播图有交互的用户中，有64%的人和第二个位置上的轮播图也产生了交互。

圣母大学的数据只是包含了用户的点击，而不是全部交互行为。为了确保我们的数据更有说服力，我们也会看产生直接交互行为的数据。对于我们的产品图轮播组件来说，那就是用户的放大操作。数据显示，有23%的用户产生了放大产品图的行为，其中54.1%的人放大的是第一个位置的产品图。所有的放大行为中，有15.7%发生在第二个位置的产品图。

这个图和Erik的数据很相似：第一个位置的轮播图占据了绝大多数交互行为。然而，我们的数据中随着轮播图位置而产生的数据衰减趋势更为合理；45.9%的直接交互行为发生在第一个位置之外的轮播图上。这就意味着，接近一半的直接交互行为产生在第一个位置的轮播图之外。 提示：关于这个数据的来源，详情请查看下文中发现部分。

猜想三、轮播组件不属于无障碍设计

接下来的问题是不好的，但是易于解释。这个争议整体上没有否定轮播组件，只是对于当前用法的质疑。轮播组件本高端网站建设身并没有所谓的无障碍问题。当然，我们在应用轮播组件的时候，可能存在设计上对无障碍的考虑。 这一点，我不认为是轮播组件本身的问题，但是当你决定要用轮播组件的时候，你必须要考虑。下一个版本中，我们一定会让我们的轮播组件变成一个无障碍的插件。这不是关于轮播组件有效性争议的一部分，所以这里我们就不做更多论述了。轮播组件本身不算是无障碍的，但是这并不能说明我们将来在应用的时候做不到无障碍。

猜想四、轮播组件的自动轮播对用户不友好

这个争议是说能自动轮播的轮播组件，想要去点击的用户会有障碍。我们完全同意这种观点。如果你想要用轮播组件，一定要避免使用自动轮播。如果你需要更多的理由，请看这篇Brad Frost的文章。 关于这个问题的可以阅读Jakob Nielsen的文章用户不喜欢自动轮播的轮播组件以及手风琴组件，没有那个轮播组件我们设计成自动轮播的。 如果你不得不使用自动轮播，那么在用户准备要产生交互行为的时候，请停止自动轮播。 当用户想要点击一个轮播图的时候，因为自动轮播到下一张，导致用户点击错误，这种体验非常糟糕。在PC端，这意味着当用户的光标Hover到轮播图的时候，停止自动轮播。在移动端，这意味着当用户准备触摸的时就停止自动轮播。自动轮播不友好。如果你要使用轮播组件，请不要让它自动轮播。

发现

提醒：这一部分主要是揭秘我们是如何做上述研究，数据是如何获取的。如果你对此感兴趣，请继续往下读，如果不感兴趣，请跳过这一部分。

研究方法及情景 这些数据来源于对几个中型到大型电子商务网站长达11个月的分析。在此期间，我们抽样了大约750万个轮播组件的交互事件。我们遵循隐私保护协议，没有保留任何个人信息。

为了针对上述的前两个猜想，我们的数据主要着眼于以下两点：

1、用户与轮播组件产生交互的频率；

2、用户与轮播组件中第一个位置之外的图片产生交互的频率；

定义交互方式

在研究中，我们跟踪了轮播图组件中的四种交互方式：

1、智能手机中，用左右滑动的手势切换轮播图；

2、单击轮播图组件中的箭头，每次切换一张图；

3、单击轮播图组件底部的缩略图切换；

4、单击轮播图中当前的图片，放大至全屏查看；

为了和圣母大学的数据相对应，我们选择了第四种交互方式，单击放大，这个操作和点击比较类似。两种情况下，用户都是对当前的轮播图比较感兴趣，并且希望了解更多内容。补充另外一点，我们关注的交互方式是指那些最核心的交互，不包含那些无法触发交互事件的操作。没有导致轮播图切换的意外滑动也不算是能触发交互事件的交互。

结论

1.各种交互方式的使用占比 我们首先研究的是用户使用手机中轮播图组件的频率，我们是通过独立的交互事件来看这一现象。这里所说的独立交互事件，是指用户通过上述的交互方式和轮播图组件的首次交互行为。如果一个用户点击了5个轮播图的缩略图，那么我们计算的时候还是只算一个独立的交互事件。下文中我们将更详尽的阐述独立交互事件。数据显示，一个页面中大约72%的用户以各种方式对轮播图进行了操作。缩略图是最清晰地，能够提前预知内容的交互方式：55%的用户至少点击一个缩略图。

1a.各种交互方式的占比 我们的数据表明，缩略图是最受用户欢迎的交互方式。事实上，缩略图的使用率是其他类型的轮播图切换方式的两倍，受欢迎程度比箭头和左右滑动加起来还要高。

放大操作是用户进行的操作中频次仅次于点击缩略图的操作。放大和左右滑动的共性是，可以出发操作的区域都比较大，几乎是点击轮播图的任何位置都可以触发。我们猜想用户的放大操作中又不部分可能是误操作。话虽这么说，放大操作仍然是用户目的性比较强的一个操作，所以产生意外操作的概率不高。大约23%的访客进行了放大操作。左右滑动是用户使用率最低的操作。这一点强有力的说明，给用户提供一个清晰的控制系统有利于引导用户进行操作。箭头和左右滑动操作都是为了切换到下一张轮播图。如果我们把这两种交互方式整合在一起，他们的使用率和缩略图比较接近。