数极客首页

[译文]移动电商网站中轮播组件用法研究

看到这个标题你内心里或许会充溢
疑惑,我在写这篇文章之前,也曾经有很多疑问。你去问任何一个人,他们都不会举荐

运用
轮播这种方式

。但是轮播自身

并不是那么尽善尽美
。 本文将基于真实的数据,针对近期业界对轮播组件的各种争论做个回应,看看大家对它的评论是不是名不虚传
。我会针对各个观念
中止

剖析

,看看我们的数据与预期能否
分歧
。经过
这些内容,我会细致
论述

我们的研讨
发现和研讨
办法

,并给大家一些倡议

,希望对大家未来

在判别
何时以及怎样
运用
轮播组件有价值。

[译文]移动电商网站中轮播组件用法研讨

之前有很多人不看好轮播这种方式

。从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%的直接交互行为发作
在第一个位置之外的轮播图上。这就意味着,接近一半的直接交互行为产生在第一个位置的轮播图之外。 提示:关于这个数据的来源,详情请查看下文中“发现”部分

猜测

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

接下来的问题是不好的,但是易于解释。这个争议整体上没有招认

轮播组件,只是关于
当前用法的质疑。轮播组件自身

并没有所谓的无障碍问题。当然,我们在应用轮播组件的时分
,可能存在设计上对无障碍的思索
。 这一点,我不以为
是轮播组件自身

的问题,但是当你决议
要用轮播组件的时分
,你必需求

思索
。下一个版本中,我们一定会让我们的轮播组件变成一个无障碍的插件。这不是关于轮播组件有效性争议的一部分

,所以这里我们就不做更多论述

了。轮播组件自身

不算是无障碍的,但是这并不能阐明

我们未来

在应用的时分
做不到无障碍。

猜测

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

这个争议是说能自动轮播的轮播组件,想要去点击的用户会有障碍。我们完好

同意这种观念
。假定

你想要用轮播组件,一定要避免

运用
自动轮播。

没有那个轮播组件我们设计成自动轮播的。 假定

你不得不运用
自动轮播,那么在用户准备要产生交互行为的时分
,请中止
自动轮播。 当用户想要点击一个轮播图的时分
,由于
自动轮播到下一张,招致
用户点击错误,这种体验十分

糟糕。

在PC端,这意味着当用户的光标Hover到轮播图的时分
,中止
自动轮播。在移动

端,这意味着当用户准备触摸的时就中止
自动轮播。自动轮播不友好。假定

你要运用
轮播组件,请不要让它自动轮播。

发现

提示
这一部分

主要是揭秘我们是怎样
做上述研讨
,数据是怎样
获取的。假定

你对此感兴味
,请继续往下读,假定

不感兴味
,请跳过这一部分

研讨
办法

及情形
:这些数据来源于对几个中型到大型电子商务网站长达11个月的剖析

。在此期间,我们抽样了大约750万个轮播组件的交互事情
。我们遵照
隐私维护
协议,没有保管

任何个人信息。

为了针对上述的前两个猜测

,我们的数据主要着眼于以下两点:

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

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

定义交互方式

在研讨
中,我们跟踪了轮播图组件中的四种交互方式:

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

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

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

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

为了和圣母大学的数据相对应,我们选择了第四种交互方式,单击放大,这个操作和点击比较

相似

。两种状况

下,用户都是对当前的轮播图比较

感兴味
,并且希望了解

更多内容。补充另外一点,我们关注的交互方式是指那些最中心
的交互,不包含那些无法触发交互事情
的操作。没有招致
轮播图切换的不测
滑动也不算是能触发交互事情
的交互。

结论

1.各种交互方式的运用
占比:
我们第一
研讨
的是用户运用
手机中轮播图组件的频率,我们是经过
独立的交互事情
来看这一现象。这里所说的独立交互事情
,是指用户经过
上述的交互方式和轮播图组件的初次
交互行为。假定

一个用户点击了5个轮播图的缩略图,那么我们计算的时分
还是只算一个独立的交互事情
。下文中我们将更详尽的论述

独立交互事情

数据显现
,一个页面中大约72%的用户以各种方式对轮播图中止

了操作。缩略图是最明晰
地,能够

提早
预知内容的交互方式:55%的用户至少点击一个缩略图。

1a.各种交互方式的占比:我们的数据标明
,缩略图是最受用户欢送

的交互方式。事实上,缩略图的运用
率是其他类型的轮播图切换方式的两倍,受欢送

水平

比箭头和左右滑动加起来还要高。

[译文]移动电商网站中轮播组件用法研讨

放大操作是用户中止

的操作中频次仅次于点击缩略图的操作。放大和左右滑动的共性是,能够

动身
操作的区域都比较

大,简直

是点击轮播图的任何位置都能够

触发。我们猜测

用户的放大操作中又不部分

可能是误操作。话虽这么说,放大操作依然

是用户目的性比较

强的一个操作,所以产生不测
操作的概率不高。大约23%的访客中止

了放大操作。左右滑动是用户运用
率最低的操作。这一点强有力的阐明

,给用户提供一个明晰
的控制系统有利于引导用户中止

操作。箭头和左右滑动操作都是为了切换到下一张轮播图。假定

我们把这两种交互方式整合在一同
,他们的运用
率和缩略图比较

接近。

[译文]移动电商网站中轮播组件用法研讨

2.一切
类型的操作:总体上看,每个轮播图平均

有2.4次交互事情
。这标明
与轮播图产生交互的72%的访客中,产生多次

交互行为是很正常的。

2a.各种类

型的交互方式操作次数占比(非独立:点击缩略图的用户中更倾向于运用
缩略图而不是其他交互方式,平均

在一个轮播图中点击6张缩略图。 左右滑动和点击箭头中止

操作的用户有近似的操作频率:平均

数分别是3.5和3.9次。放大操作的交互次数较少,这标明
用户只需

在对某张产品图十分

感兴味
的状况

下才会放大。

[译文]移动电商网站中轮播组件用法研讨

操作缩略图的用户具有
最高的点击次数,这阐明

略缩图的交互方式比箭头和左右滑动有更高的用户参与度。探求

这一层次的参与度所招致
的额外转化,比如

“参与

购物车”将会是件有趣的事情。假定

分别

箭头和左右滑动两种交互方式来看,数据和我们剖析

的独立交互方式比较

接近,前后移动

(滑动或箭头操作)是轮播图中最普遍的交互方式。

[译文]移动电商网站中轮播组件用法研讨

3.交互频次衰减率

从我们统计到的数据,能够

画出用户每次操作时之后第三
操作的概率曲线。在轮播图切换的案例中,这就是说在用户从第一张轮播图切换到第二张轮播图之后,再从第二张轮播图切换到第三张轮播图。 在直接交互的案例中,这就是说点击放大第一张轮播图之后再去点击放大其他的轮播图。我们画出了各种不同交互方式下的曲线:缩略图、箭头、滑动、放大。

3a.缩略图

每一张被点击过的缩略图,用户有大约69%的可能性会继续点击其他缩略图。从下图中的指数衰减曲线能够

更精确

的看出这一变化趋向
。固然

用户点击缩略图能够

有很多可能的次第
,但是大部分

的缩略图用户还是依照

轮播图中默许
给定次第
查看。

[译文]移动电商网站中轮播组件用法研讨

3b.箭头

关于
每个被点击的箭头,我们发现用一个接近线性的衰减曲线来描画

是比较

精确

的。在这种线性衰减中,用户有大约76%的可能性会会第三
点击这个箭头来查看下一张轮播图。

[译文]移动电商网站中轮播组件用法研讨

3c.左右滑动

左右滑动的衰减也是线性的,用户有64%的可能性会第三
滑动。下图是一个更精准的指数变化趋向
图。

[译文]移动电商网站中轮播组件用法研讨

3d.放大 放大操作的规律遵照
幂定律,线性的变化不能精确

描画

这一趋向
,下图的函数能够

比较

真实的反映其趋向

[译文]移动电商网站中轮播组件用法研讨

一些思索

营销类轮播图 VS 图片轮播

这是我们在用我们的数据和Erik统计的圣母大学的数据作比较

时发现的问题。我们用的轮播图类型不同。我以为
这个问题并不影响我们的研讨
结论。这两种轮播图或许在视觉样式

上不相同,但是我们的研讨
阐明

他们的基本

方式

是胜利

的。我们这项研讨
的目的是为了考证
这种水平

滚动的多页轮播图是不是有缺陷。从数据来看,并没有显然
的缺陷。圣母大学轮播图的问题可能不在轮播图组件自身

,而是设计问题。

用户对营销Banner的认知自身

就比较

疑惑。这类轮播Banner可能基本

就不能给用户提供有效信息。有很多的缘由
会招致
轮播Banner的无效,致使

于大家以为
这个UI方式

自身

就有问题。我们的网站有时也会运用
营销类轮播Banner。接下来我们将会用我们的数据和圣母大学网站的数据作一个很有意义
的比较

Luke Wroblewski在Google的一次演讲中提到Amazon UX经理PJ McCormick的数据。PJ展示

了Amazon运用
营销Banner轮播图组件的一些积极悲观
的数据。Luke以为
目前的营销轮播组件最大的设计问题是控制轮播的部分

不够明白
。下图中,Amazon的轮播图组件设计明白
的将控制轮播的部分

单独出来,这样做就很好地逃避
了控制部分

不够明白
的问题。

[译文]移动电商网站中轮播组件用法研讨

手机端交互 VS PC端交互

我们的轮播组件只在手机端有。圣母大学的网站只在PC端有轮播组件。用户在手机端的交互要比PC端频繁。这有可能是由于
手机端有滑动操作,也可能是由于
PC端用鼠标操作小控件比较

难。还有可能是由于轮播组件原本

就是更适合

手机上适用
的一种方式

轮播组件胜利

应用的规范

我们这里说的轮播组件胜利

应用的规范

和Erik的规范

不同。Erik的更在意用户能否
经过
轮播图点击到了里面的内容,重点看这个转化率。我们的规范

是看用户能否
有查看更多的企图
,能否
看了一切
产品图片。前者的规范

显然更高,央求

用户点击翻开
新的页面。这就是为什么圣母大学网站中的轮播组件数据相关于
我们的数据更低。

大学的网站VS电子商务网站 我们拿圣母大学的网站和我们的网站作比较

,有一个局限性,那就是圣母大学的网站用户和我们的网站用户运用
情形
不同,两个网站或许没有可比性。电子商务网站用户的目的
是发现更多关于产品的信息以便于做出置办

决策。大学网站的用户是为了学习或者找到关于大学的一个细致

信息。

对未来

的一些思索

这一次的数据剖析

使我明白了,关于
轮播组件,我们还有很多研讨
工作要做。下面的这些内容使我希望自己

未来

能够

进一步研讨
,也希望看到其他同行能够

针对此中止

一些研讨

1、针对不同类型的轮播组件做对比

研讨
。这将有助于研讨
我们的营销类轮播组件和 Erik Runyon的数据有何不同。

2、权衡
交互方式是怎样
影响用户的操作行为趋向
。假定

他们操作的是一个产品图片汇合

,他们是更愿意还是更不意愿运用
参与

购物车呢?

3、我希望知道

能否
有办法

权衡
手机端、PAD端、PC端用户在轮播组件的交互方式的差别

。不幸的是,我们不做PC端的站点,所以我们缺乏PC端的数据。我们希冀
做直接的对比

,而不只
仅是从已知数据去做推测

4、数据显现
,在手机端,滑动是最低频的操作。我以为
滑动操作在手机上被其他交互方式弱化了,或许也是由于
在PC端,用户对滑动操作还没有什么认知。经过
提供额外的控件,用户能够

很明白
的取得

操作轮播组件的交互方式,因而

,他们更愿意选择这样的交互方式。假定

移除了轮播组件中其他的可操作控件,那么滑动的交互方式能否
会增加?

结论

这篇文章是在彻底调查Mobify为什么以及怎样
运用
我们提供的轮播组件,构建自己

的网站。

不同类型的轮播组件之间差别

很大。给用户提供了额外的上下文情形
之后,不用迫运用
户做滚动操作,他们就很乐意运用
轮播了。

目前关于轮播组件的数据都是关于市场营销Banner的。这些数据都阐明

了一点,用户对轮播组件中的内容很少产生交互。同时也阐明

了,用户切换轮播组件中的内容,翻到下一张轮播图的概率十分

低。当然,这些数据也证明了一些普适性的观念
:轮播组件不易于了解

,自动轮播不友好。 我们的数据和Erik Runyon提供的关于圣母大学的数据共性比较

少。用户在我们的网站上交互行为更多。

相关于
圣母大学网站的用户数据,我们的用户对当前轮播图之外的内容有更高的交互行为比率。产生这些差别

是是有很多缘由
的,这也是我们想在总结的环节去讨论
的。不同的的轮播组件方式
适用于不同的产品目的
。 对我而言,这就是本文最大的结论。 轮播组件有很多的外形
和尺寸。有一些很有效,有一些效果并不好。在盲目

的批判之前,我们应该针对不同的状况

搜集
更为丰厚
的数据,来充沛

了解

真实的状况

。Erik的研讨
结果以为
,首页的市场营销轮播效果不好也是事实。用户不知道

能从轮播组件的内容中获取到什么信息,因而

,他们也不想去操作。假定

你能够

很明晰
的通知
用户你将会取得

什么信息,这些信息对你有什么用,那么,用户肯定也乐意去做更多的操作。

那么,你到底会不会用轮播组件呢?

不要仅仅是为了在有限的屏幕空间展示

更多内容而去用轮播组件。轮播组件主要是用于为用户提供特定情境下更多的内容。

在手机端,当横向的屏幕空间有限,内容彼此有关联性,并且这个内容对用户有意义的时分
通常会用轮播组件。 当内容基本

就无趣或对用户无意义时不要用轮播组件。第一张展示

给用户的轮播图一定要能传达出其他剩余轮播图将要给用户传送
的内容。用户从当前轮播图切换到其他轮播图的时分
必然是由于
这样能够

取得

更多有用的信息。轮播的内容要有吸收
力,这样才干
保证
轮播的有效性。假定

用户对你的轮播不感兴味
,这不一定是是轮播组件自身

的问题。 不要为了让用户看到你要展示

的全部的容而运用
轮播。即便

你的轮播是有效的,用户也不会查看一切
的内容。第一个展示

的轮播内容应该是最重要的,一切
的轮播图应该依照

重要性的次第
展示

。假定

查看多个内容很重要,但是这不是必要的操作,那么我举荐

运用
缩略图轮播的方式。 这个问题并没有独一
的答案。在某些状况

下,与市场营销Banner轮播一样,答案是NO。在其他状况

下,与产品轮播图一样,答案是YES。在各种不同的设计方式

下,假定

你要问“我是不是应该用轮播组件”,这的确

有一个正确的回答

:假定

这适合

你的用户就是对的。

原文地址:[http://www.smashingmagazine.com/2015/02/09/carousel-usage-exploration-on-mobile-e-commerce-websites]

原文作者:Kyle Pea

来源:阿里巴巴(中国站)用户体验设计中心

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章