分类
设计创意
办公创意
游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服电话

    400-123-4567

    电子邮件

    1691000615@qq.com
  • 星点互联APP

    随时掌握行业动态

  • 扫描二维码

    关注星点微信公众号

轮播图的用法竟然如此讲究!

发布时期:2018-8-10 11:36
阅读:80 回复:0

轮播图(Carousels)这样的交互方式,在web时代似乎已经司空见惯。当一群人在会议室里争夺首屏焦点图的优先级时,使用轮播图,似乎能够不费吹灰之力地解决这场争端,没有人是输家。然而,轮播图这种方式真的有效吗? ...

轮播图(Carousels)这样的交互方式,在web时代似乎已经司空见惯。当一群人在会议室里争夺首屏焦点图的优先级时,使用轮播图,似乎能够不费吹灰之力地解决这场争端,没有人是输家。然而,轮播图这种方式真的有效吗?如何设计才能带给用户更好的体验呢?

事实上,“万能和事佬”轮播图的点击率通常都很低,转化效果也并不好,却往往占用了页面最抢眼的大面积位置。想象这么一个场景:当你走进图书馆想找一本特定的书阅读时,一个销售员挡在你面前让你先看一个大广告图,然后等你还没读完具体讲了什么内容时,他又突然换了一张,是不是很惹人厌呢?大部分轮播图的设计也是如此。

 

确保你真的需要使用轮播图

首先,设计不当的轮播图容易被用户当成与他想浏览的内容不相关的广告图片而直接无视。在各种网页中早以身经百战的用户,会选择最快速的方式找到和浏览他们想要看的内容。把精力放在翻看没有预期的轮播图上显然是低效的,一上来就自动进入了用户的视觉盲区。下面的热力图展示了用户的浏览行为习惯:快速扫描找到想要阅读的区域,然后再进行有序的沉浸式阅读,毫无例外他们都忽略了看起来像广告的图片部分。

1

(以上热力图源自 James Royal-Lawson

2

(以上热力图源自 Nielsen Norman Group

除此之外,在2013就有研究结果表明,轮播图的交互效果十分不理想: 只有 1% 的用户点击了轮播图上切换按钮,其中 84% 的用户只在首屏点了1次。

3

(以上图片源自Erik Runyon的研究结果)

还有学者针对30多个B2B的网站的网站进行了研究分析,根据轮播图的内容分成了三类:品牌宣传(Branding)、白皮书/在线研讨会(Thought Leadership)、服务推广(Service Promtion),发现不管是哪一类的内容,点击率都很低(0.16%~0.65%)

4

(以上图片源自Harrison Jones的研究结果)

不仅如此,不少使用轮播图的网站还存在以下几种SEO问题

复杂的大图导致网站性能低,加载速度慢。一般轮播图都会承载大量的图片信息,尤其是那些首屏就被高分辨率轮播图铺满的网站,这样庞大的图片信息会对加载速度造成很大影响。每多加载1秒,就会流失更多用户。无论是用户还是搜索引擎,都偏好加载更快的网站。

使用轮换的标题。不少开发者倾向于给页面最上方的轮播图片打上

标签,使页面上出现轮换的4-5个不同的

标签,导致相关关键词的检索能力降低。

Flash的使用。部分网站的轮播图使用Flash去展示内容,它能够做出很酷的效果,但却无法被任何搜索引擎抓取。

 

综上所述,设计不当的轮播图容易被忽略,点击率不理想,还可能会对SEO造成负面影响。所以,我们不应该在还没有仔细思考过页面希望给用户传达内容的优先级和希望达到的效果时,就哪里“需要”哪里搬。事实上,有很多其他方式也能帮助我们解决问题,并带来更好的效果:

1、找到最需要触达给用户的内容,将次要内容放在次级位置展示

谷歌云平台的产品与服务种类繁多,但并没有使用轮播图展示全部产品和特性,而是将浓缩的品牌价值和理念清晰地展现在用户面前,并提供主(免费试用)、次(与销售人员联系)两个明显的转化入口。同时,将其他次要入口铺在下方,让用户可以选择通过顶导航或者继续往下浏览,快速找到感兴趣的内容,如下图:

5

(以上图片截自Google Cloud Plantform

2、让它成为内容的一部分

氧气是一个专注于提供内衣购买推荐的app,当你按顺序滚动浏览页面的商品时,促销信息会以和通常产品推荐一样的形式出现在你面前,打扰感低,对进入沉浸式阅读的用户转化效果好,如下图:

6

(以上图片截自氧气app)

3、砍掉不重要的推广图,直接展示内容

右边的图片似乎看起来更 “好看” ,更 “吸引人” ,然而在实际场景中用户总是习惯性的忽略banner部分的内容,选择性的浏览正文部分,直接展示用户需要的内容,可以提高用户的检索效率,从而带来更高的转化率:

7

(图片源自《行为·设计·转化率 ——通过设计引导用户行为提升转化率》


鲜花

握手

雷人

路过

鸡蛋
本文暂无评论,快来抢沙发!

关注我们
  • 官方微信公众号
  • APP应用下载
客服咨询
  • 400-123-4567(工作日:9:00-16:00)
  • enquire@neoconex.com

所有资源均是网上搜集或网友上传提供,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担。如有侵犯您的版权,请及时发邮件联系我们

Powered by Discuz! X3.5 Licensed © 2001-2013 Comsenz Inc. 星点互联设计 ( 鲁ICP(32462341) )