如何设计用户友好度高的轮播图

原作者:Nick Babich  翻译者:Puddinnng

本教程为翻译教程,原文地址为:

http://babich.biz/designing-a-user-friendly-homepage-carousel/


轮播图,图片旋转器,滑片,无论你怎么叫这玩意,它在网络上无处不在。轮播图在电商网站主页上广泛应用,大多数电商网站的主页上都有它:

如何设计用户友好度高的轮播图_第1张图片
wallmart主页上的轮播图

但轮播图对用户真的有意义吗?或者它只是设计者用来偷懒,将内容一股脑塞进去的工具呢?

不论将这个问题抛向谁,他们都会告诉你,“轮播图就是个反面模式(anti-pattern)。”轮播图的坏名声来自多方面。Erik Runyon 主持的一项研究表明,只有1%的浏览者点击了轮播图——而且其中84%用户都只会点击第一张图。在 Jared Smith 的网站“我应该使用轮播图吗?(Should I use a carousel?)”中,Jared Smith说,如果可以的话,你不该使用轮播图。也许,Jared网站上最佳评论来自Lee Duddell,他总结了轮播图最普遍的问题:

轮播图是市场营销经理最后的救命稻草,如果主页上有什么一定会被用户忽略的东西,可以将他们放在轮播图上,不过如果要我说的话,不使用轮播图是最好的。

事实上,若是注意一定的细节,首页上的轮播图是可以发挥很好的作用的。本文将分析这些执行上的细节,并概述如何设计一个好的轮播图。

轮播图是什么

轮播图是在首页上展示信息的一种方式。为了让用户不用滚动屏幕就能看到更多内容,设计师们利用轮播图来最大化信息密度。轮播图有多种形状和大小,但本文中谈及的轮播图具有以下特性:

-它显示在首页的顶部,并占据不用滚动即可显示的页面上相当可观的面积。

-同一个地方会展示多页内容,虽然一次只展现一个页面;每页中包含图片以及小段文字。

-会有指示器表明,这个轮播图中不止一张图片。

如何设计用户友好度高的轮播图_第2张图片

轮播图的优点

-轮播图使得主屏上最重要的位置可以展示多页内容。

-页面顶部显示了更多的信息,用户有更大的可能性看到它们。

轮播图的缺点

-用户经常性地忽视轮播图,连带着里面所有的内容(就算自动滚动也无济于事噢~)——用户压根就不会长时间注意页面的顶部。所以,你不能指望他们能看完轮播图里所有内容。

-设计师常常认为轮播图是一组图片,但用户却只会在意他们看到的那一张图片。轮播图中的一组图片,也许能够精准地展现你的产品和服务,但如果用户只看到一组图片中的一张,他也许就会误解你的产品。

设计好轮播图的方法

内容为王

“内容为王”这句话大家都很熟悉。轮播图里的内容,决定了轮播图质量的上限。无论交互多么简单,不相关的内容都会带来糟糕的用户体验。这里需要提到几条重要的准则:

-当内容很无聊或者对用户一点帮助都没有,就别用轮播图了(例如,他们不关心的促销信息)。这样的轮播图只会使用户分心,却不能让他们点击购买。

轮播图中的内容千万不要看起来像广告。由于广告条盲点现象(Banner Blindness),大多数用户会直接忽略像广告的轮播图。如果轮播图选择了和网页其它部分相匹配的字体和图片,那么它看起来就像网站的一部分,而不是惹人烦的广告。


如何设计用户友好度高的轮播图_第3张图片
不要这样做。Drugstore.com在轮播图中使用了广告外观的内容

-轮播图要仔细排序。记住,最初那页内容比之后的内容吸引了多得多的关注。因此,第一页的内容不仅要选择最重要的,而且要能够推销后几页的内容。之后的页面也应该按照重要性来排序。

-轮播图永远不应该作为用户进入某项功能和内容的唯一途径。将重要的信息同时放在轮播图和页面其他位置是个好主意,这样用户就有更大可能性去看到它。

-当需要用户看到所有内容时,不要使用轮播图。就算你的轮播图做得非常好,也要记住,大部分用户是不会看完每一页内容的。

限制轮播图的页数

轮播图中的滑页要少于五页,因为用户不会去读更多的内容。对于数量的限制也有助于用户探索内容。

提供进度指示器

标示轮播图中的页数,并指明用户目前在哪一页。这能让用户感觉一切尽在掌控。

如何设计用户友好度高的轮播图_第4张图片
类似于点的图标表明了一共有多少滑页,而用户目前又在哪一页

确保内容在手机上也清晰

随着移动领域的需求开始变得不容忽视,为移动端优化轮播的内容成为了最为紧要的任务。文字和图片越清晰,用户就越能理解你的宣传内容。这就是当内容缩小到只有手机屏幕那么小之后,也要确保轮播图中的每个字都清晰的原因。而且当你将网页上的内容移植到手机上时,也一定要确保文字的清晰度。


如何设计用户友好度高的轮播图_第5张图片

不要这样做。手机上都看不清轮播图上的文字了。

设计合适的导航控件

-确保导航控件显示在轮播图之内,而不是在它下面或是折叠起来。这样不论是大屏幕还是小屏幕都不会出问题。下面是两个网页的例子:

如何设计用户友好度高的轮播图_第6张图片
不要这样做。dell主页上的轮播图中根本没有向前/向后的轮播图控件。导航控件仅仅是轮播图下面几个不起眼的小点。
如何设计用户友好度高的轮播图_第7张图片
这样做。apple主页上提供了显著且易于辨认的前后翻页控件。

-让链接,按钮与其它元素显著区分,并且尺寸易于识别与点击。尺寸太小,靠得太紧,或者放在复杂背景上的按钮(前页/后页以及页面选择按钮)即不容易看见,也不容易点击。

如何设计用户友好度高的轮播图_第8张图片
不要这样做。天梭的网页上,向前翻页和向后翻页的按钮在浅色背景下是很容易看见和点击的,但是在暗色背景下几乎看不到了(译者眼都要瞎了才看到orz)。

在手机设备上,请支持滑动手势。这不是说,像向前/向后翻页的轮播控件就不可以使用了,但他们应该作为滑动翻页手势的补充。

如何设计用户友好度高的轮播图_第9张图片
这样做。在手机设备上支持滑动手势。

使用自动滚动时的要点

自动滚动的轮播图引导用户看完所有的内容。如果想自动滚动发挥最大效果的话,还需要注意这四个细节:

手机网页上永远不要使用自动滚动。因为自动滚动也许会让用户点击到错误的滑页上。

确保滚动速度不要太快。轮播图有时滚动得太快,用户都看不清上面的信息了,这让他们十分沮丧。当然,太慢的速度也会让用户感到厌倦。你要测试出一个合适的时间间隔,或者至少要估计一下,一般用户读完图片上的文字需要多久。你甚至可以考虑每页图片都根据信息量,设置不同的滚动时间。如果不能确定你使用了合适的滚动时间——那就不要使用自动滚动了。

让用户来主导(控制感能产生信任感)。当鼠标在移动到轮播图上时,请暂停自动滚动。以免将用户想要阅读,或是点击的那页跳转过去了。当用户有任何主动交互行为时(如,点击轮播控件),就彻底暂停自动滚动,因为点击这个行为有很强的主动性,你要将决定权交给用户。

不要停在轮播图的最后一页。要反复地播放轮播图中所有的分页。

轮播图的最佳替代者

主页轮播图最常见的毛病是内容的缺乏:用户并不知道下一张分页会显示啥,也不知道他们为什么需要关心。因此,他们可能不会看完所有轮播图。为了解决这个问题,你也许可以考虑使用主页横幅(Hero image)来替代轮播图。和轮播图相比,主页横幅有以下优势:

-用户能够专注于一张图片而不是分散注意力到多张图片上。而且一张静止的主页横幅,比不停滚动的轮播图安静优雅多了。

-当设计师知道他们只能选一张图片时,也许会比选一组图片时更谨慎。

在原本放置轮播图的位置放上首页横幅,能够优化你的内容。举个例子,下面这张截图来自 Amazon 的首页,设计师选择了一张首页横幅来强调主打产品——Kindle Paperwhite。这张图在提供信息的同时,很好地吸引了注意力。

如何设计用户友好度高的轮播图_第10张图片
Amazon 选择了与网页全局导航栏像匹配的颜色和字体,所以这个首页横幅与主页很好的融合,并 不像讨人嫌的广告。

另一个例子——New Balance 在主页上推广了他们最新款跑鞋,并突出地展示了用户能找到这个产品的按钮。

如何设计用户友好度高的轮播图_第11张图片

结论

如果用户对你的轮播图不感兴趣,这也许并不是轮播图的错。就像其他的内容,轮播图也需要有吸引力才能起到效果。如果只是为了在屏幕上增加内容的话,那么就不要使用轮播图。还记得吗?轮播图的质量由内容决定。如果内容不够精彩,就别强扭瓜啦。然而,如果内容足够好,轮播图将是吸引用户注意力的一种优雅的方式。因此,到底要不要用轮播图呢?

如果能给用户展示合适的内容,就该用。

你可能感兴趣的:(如何设计用户友好度高的轮播图)